docs: add gestures (#22)

* docs: add simple animations

* docs: add transitioin docs

* fix some error

* feat: add gestures

* fix: some changes

* fix: some changes

.docs/composables/useNavigationMotion.ts

@@ -39,13 +39,6 @@ function _useNavigation() {
             to: '/motion/examples',
             active: route.path.startsWith('/motion/examples'),
           },
-          {
-            label: 'Community',
-            description: 'Find answers and support from the community.',
-            icon: 'i-ph-chats-teardrop-duotone',
-            to: '/motion/community',
-            active: route.path.startsWith('/motion/community'),
-          },
         ],
       },
       {

.docs/content/motion/1.getting-started/_dir.yml

@@ -1,3 +1,3 @@
 title: Getting Started
 titleTemplate: '%s · Get Started with Vue3 and Nuxt3'
-icon: i-ph-compass-tool-light
+icon: i-ph-rocket-launch-duotone

.docs/content/motion/2.guide/1.animation/3.Gestures.md

@@ -0,0 +1,21 @@
+---
+title: 'Gestures'
+description: 'A powerful gesture recognition system for the browser.'
+---
+
+Oku Motion extends the basic set of event listeners provided by Vue3 with a simple yet powerful set of UI gesture recognisers.
+
+It currently has support for hover, press and more. Each gesture has a series of event listeners that you can attach to your `motion` component.
+
+## Animation helpers
+
+`motion` components provide multiple gesture animation props: `whileHover`, `whileTap`, `whileFocus`, `whileDrag` and `whileInView`. These can define animation targets to temporarily animate to while a gesture is active.
+
+## Hover
+
+The hover gesture detects when a pointer hovers a component.
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-qwnt8k?embed=1&file=src%2FDemo.vue&hideExplorer=1&hideNavigation=1&view=preview"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+></iframe>

.docs/content/motion/2.guide/2.components/_dir.yml

@@ -0,0 +1,3 @@
+title: Components
+icon: i-ph-brackets-curly-duotone
+# navigation: false

.docs/content/motion/3.api/1.motion.md

@@ -0,0 +1,280 @@
+---
+title: Motion
+description: Renders an animatable HTML or SVG element.
+icon: i-ph-brackets-curly-duotone
+---
+
+Renders an animatable HTML or SVG element.
+
+```ts
+<Motion :animate="{ opacity: 1 }"></Motion>
+``` 
+
+# Usage
+Import Motion from "@oku-ui/motion" and register it with your component.
+
+
+```ts
+<template>
+  <Motion />
+</template>
+
+<script lang="ts" setup>
+import { Motion } from "@oku-ui/motion"
+</script>
+
+<style scoped>
+:root {
+  --splash: #fca311;
+}
+
+div {
+  width: 100px;
+  height: 100px;
+  border-radius: 10px;
+  background-color: var(--splash);
+}
+</style>
+```
+
+Motion accepts an animate prop. Add the following to the editable example above:
+
+```
+<Motion :animate="{ rotate: 45, backgroundColor: 'var(--red)' }"></Motion>
+``` 
+
+The animate prop accepts all the same values and keyframes as Motion One's [animate](https://motion.dev/dom/animate) function.
+
+
+## Transition settings
+
+We can change the type of animation used by passing a `transition` prop.
+
+```ts
+<Motion
+  :animate="{ rotate: 90, backgroundColor: 'var(--yellow)' }"
+  :transition="{ duration: 1, easing: 'ease-out' }"
+>
+</Motion>
+```
+
+By default transition options are applied to all values, but we can also override on a per-value basis:
+
+```ts
+<Motion
+  :animate="{ rotate: 90, backgroundColor: 'var(--yellow)' }"
+  :transition="{
+    duration: 1,
+    x: { duration: 2 },
+  }"
+>
+</Motion>
+``` 
+
+All the same transition options from Motion One's [animate function](https://motion.dev/dom/animate#options) are accepted. You can even import custom easing from Motion One, like [spring](https://motion.dev/dom/spring):
+
+```ts
+<script setup lang="ts">
+import { spring } from "motion"
+import { Motion } from "@oku-ui/motion"
+
+const transition = {
+  delay: 1,
+  easing: spring()
+}
+</script>
+
+
+<template>
+  <Motion
+    :animate="{ rotate: 90, backgroundColor: 'var(--yellow)' }"
+    :transition="transition"
+  />
+</template>
+
+
+<style>
+:root {
+  --splash: #fca311;
+  --yellow: #ffdc5e;
+}
+
+div {
+  width: 100px;
+  height: 100px;
+  border-radius: 10px;
+  background-color: var(--splash);
+}
+</style>
+``` 
+
+
+## Props
+
+### tag
+
+default: `div`
+
+Define a HTML or SVG tag to render.
+
+```ts
+<Motion tag="li"></Motion>
+``` 
+
+### animate
+
+A target of values to animate to.
+
+```
+<Motion :animate="{ backgroundColor: 'white' }"></Motion>
+```
+
+Whenever a value in animate changes, the element will automatically animate to the latest value.
+
+The animate prop accepts all the same values and keyframes as Motion One's [animate function](https://motion.dev/dom/animate).
+
+### initial
+A target of values to animate from when the element is first rendered.
+
+```ts
+<Motion :initial="{ x: 100 }" :animate="{ x: 0 }"></Motion>
+``` 
+
+If set to false, the target defined in animate will be immediately set when the element is first rendered. Only subsequent changes to animate will animate.
+
+
+```ts
+<Motion :initial="false" :animate="{ x: 100 }"></Motion>
+``` 
+
+
+### exit
+
+A target of values to animate to when the element is hidden via v-if or v-show.
+
+The element must be a direct child of the Presence component.
+
+```ts
+<script setup lang="ts">
+import { Motion, Presence } from "@oku-ui/motion"
+const show = ref(true)
+</script>
+
+
+<template>
+  <div class="container">
+    <Presence>
+      <Motion
+        v-show="show"
+        :initial="{ opacity: 0, scale: 0 }"
+        :animate="{ opacity: 1, scale: 1 }"
+        :exit="{ opacity: 0, scale: 0.6 }"
+        class="box"
+      />
+    </Presence>
+    <button @click="show = !show">
+      Toggle
+    </button>
+  </div>
+</template>
+
+<style>
+:root {
+  --splash: #fca311;
+}
+
+.container {
+  width: 100px;
+  height: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.container button {
+  cursor: pointer;
+}
+.box {
+  width: 100px;
+  height: 100px;
+  border-radius: 10px;
+  background-color: var(--splash);
+}
+</style>
+``` 
+
+Note: This animation is only interruptible if the element is hidden via v-show.
+
+The exit prop accepts all the same values and keyframes as Motion One's [animate function](https://motion.dev/dom/animate).
+
+### transition
+
+Provides a default transition for all animations to use.
+
+```ts
+<Motion :animate="{ x: 100 }" :transition="{ duration: 0.5 }">
+</Motion>
+``` 
+
+Supports all [animate options.](https://motion.dev/dom/animate#options)
+
+The transition defined in this prop can be overridden for specific animation props by passing those a transition option:
+
+```ts
+<Motion
+  :animate="{
+    x: 100,
+    transition: { duration: 0.2 },
+  }"
+  :exit="{
+    x: 0,
+    transition: { duration: 1 },
+  }"
+  :transition="{ duration: 0.5 }"
+>
+</Motion>
+``` 
+
+## Events
+
+The Motion components emit [custom DOM events](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events#adding_custom_data_%E2%80%93_customevent) to the rendered element. The detail prop is provided data on the related animation.
+
+```ts
+<script setup lang="ts">
+import { Motion } from "@oku-ui/motion"
+
+const logStart = ({ detail }) => console.log("Start: ", detail)
+const logComplete = ({ detail }) => console.log("Complete: ", detail)
+</script>
+
+<template>
+  <Motion
+    :initial="{ opacity: 0 }"
+    :animate="{ opacity: 1 }"
+    @motionstart="logStart"
+    @motioncomplete="logComplete"
+  />
+</template>
+
+<style>
+:root {
+  --splash: #fca311;
+}
+
+div {
+  width: 100px;
+  height: 100px;
+  border-radius: 10px;
+  background-color: var(--splash);
+}
+</style>
+``` 
+
+### motionstart
+
+Fires when any animation is started.
+
+### motioncomplete
+
+Fires when any animation is completed.
+