feat: add motion api docs

.docs/composables/useNavigationMotion.ts

@@ -18,6 +18,13 @@ function _useNavigation() {
  to: '/motion/getting-started',
  active: route.path.startsWith('/motion/getting-started'),
  },
+ {
+ label: 'API',
+ description: 'Learn how to get started with Nuxt.',
+ icon: 'i-ph-rocket-launch-duotone',
+ to: '/motion/api',
+ active: route.path.startsWith('/motion/api'),
+ },
  {
  label: 'Examples',
  description: 'Discover and explore official and community examples.',

.docs/content/motion/4.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.
+

.docs/nuxt.config.ts

@@ -5,6 +5,7 @@ import type { NuxtConfig } from 'nuxt/config'
 const routeRules = {
  '/motion/getting-started': { redirect: '/motion/getting-started/introduction', prerender: false },
  '/motion/community': { redirect: '/motion/community/getting-help', prerender: false },
+ '/motion/api': { redirect: '/motion/api/motion', prerender: false },
 }
 
 const devConfig = {