refactor: new motion (#51)

* feat: new docs

* refactor: motion

* chore: update deps

* fix: key

* feat: add plugin

* refactor: motion

* fix: presence

* fix: type

* feat: motion add index

* fix: composables

* fix: build

* chore: fix storybook

* chore: add motion plugin

* fix: animationFrame reactive

* feat: useAnimate

* fix: useAnimate options

* fix: presence group status

.docs/.vitepress/components.d.ts

@@ -0,0 +1,45 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Acknowledgment: typeof import('./theme/components/acknowledgment/Acknowledgment.vue')['default']
+    ArtDot: typeof import('./theme/components/art/ArtDot.vue')['default']
+    Aside: typeof import('./theme/components/Aside.vue')['default']
+    Breadcrumb: typeof import('./theme/components/Breadcrumb.vue')['default']
+    ColorAppearance: typeof import('./theme/components/color-pick/ColorAppearance.vue')['default']
+    ColorPick: typeof import('./theme/components/color-pick/ColorPick.vue')['default']
+    ColorPickPill: typeof import('./theme/components/color-pick/ColorPickPill.vue')['default']
+    Community: typeof import('./theme/components/community/Community.vue')['default']
+    DotPattern: typeof import('./theme/components/DotPattern.vue')['default']
+    Footer: typeof import('./theme/components/Footer.vue')['default']
+    FrameworkCard: typeof import('./theme/components/framework/FrameworkCard.vue')['default']
+    GridPattern: typeof import('./theme/components/GridPattern.vue')['default']
+    Header: typeof import('./theme/components/Header.vue')['default']
+    HomeCodeGranular: typeof import('./theme/components/home/HomeCodeGranular.vue')['default']
+    HomeCodeUnstyle: typeof import('./theme/components/home/HomeCodeUnstyle.vue')['default']
+    HomeDemo: typeof import('./theme/components/home/HomeDemo.vue')['default']
+    HomeFeatures: typeof import('./theme/components/home/HomeFeatures.vue')['default']
+    Item: typeof import('./theme/components/blog/Item.vue')['default']
+    LandingBackground: typeof import('./theme/components/LandingBackground.vue')['default']
+    Lightning: typeof import('./theme/components/Lightning.vue')['default']
+    Line: typeof import('./theme/components/Line.vue')['default']
+    Logo: typeof import('./theme/components/Logo.vue')['default']
+    Next: typeof import('./theme/components/Page/Next.vue')['default']
+    Package: typeof import('./theme/components/packages/Package.vue')['default']
+    Page: typeof import('./theme/components/Page/Page.vue')['default']
+    ParticlesEffect: typeof import('./theme/components/ParticlesEffect.vue')['default']
+    Popover: typeof import('./theme/components/Popover.vue')['default']
+    Prev: typeof import('./theme/components/Page/Prev.vue')['default']
+    RadiusPill: typeof import('./theme/components/color-pick/RadiusPill.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Search: typeof import('./theme/components/Search.vue')['default']
+    Toc: typeof import('./theme/components/toc/Toc.vue')['default']
+    TocItem: typeof import('./theme/components/toc/TocItem.vue')['default']
+  }
+}

.docs/.vitepress/components/Announcement.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { frontmatter: fm } = useData()
+</script>
+
+<template>
+  <a
+    v-if="fm.hero.prelink"
+    :href="fm.hero.prelink.link"
+    :target="fm.hero.prelink.target"
+    class="inline-flex items-center rounded-lg bg-[var(--vp-c-default-soft)] px-4 py-1 text-sm font-semibold mb-3"
+  >
+    {{ fm.hero.prelink.title }}
+  </a>
+</template>

.docs/.vitepress/components/CardLink.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { AspectRatio } from '@oku-ui/primitives'
+
+defineProps<{
+  title: string
+  description?: string
+  url: string
+  image?: string
+}>()
+</script>
+
+<template>
+  <div>
+    <a
+      class="flex flex-col bg-[var(--vp-c-bg-soft)] hover:bg-[var(--vp-c-bg-alt)] transition duration-300 rounded-xl p-4"
+      target="_blank"
+      :href="url"
+    >
+      <h5 class="font-bold">{{ title }}</h5>
+      <p class="my-1 text-sm text-[var(--vp-c-text-2)]">{{ description }}</p>
+
+      <AspectRatio
+        v-if="image"
+        :ratio="16 / 9"
+        class="rounded-md mt-2 overflow-hidden  "
+      >
+        <img
+          class="w-full h-full object-cover"
+          :src="image"
+          :alt="title"
+        >
+      </AspectRatio>
+
+    </a>
+  </div>
+</template>

.docs/.vitepress/components/ComponentLoader.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+import Spinner from './Spinner.vue'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const Component = defineAsyncComponent({
+  loadingComponent: Spinner,
+  loader: () => import(`../../components/demo/${props.name}/tailwind/index.vue`),
+  timeout: 5000,
+  suspensible: false,
+})
+</script>
+
+<template>
+  <Component :is="Component" />
+</template>

.docs/.vitepress/components/ComponentPreview.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStorage } from '@vueuse/core'
+import HeroContainer from './NewHeroContainer.vue'
+import HeroCodeGroup from './NewHeroCodeGroup.vue'
+
+const props = defineProps<{
+  name: string
+  files?: string
+}>()
+
+const cssFramework = useStorage<'css' | 'tailwind' | 'pinceau' >('cssFramework', 'tailwind')
+const parsedFiles = computed(() => JSON.parse(decodeURIComponent(props.files ?? ''))[cssFramework.value])
+</script>
+
+<template>
+  <HeroContainer
+    :folder="name"
+    :files="parsedFiles"
+    :css-framework="cssFramework"
+  >
+    <slot />
+
+    <template #codeSlot>
+      <HeroCodeGroup v-model="cssFramework">
+        <slot name="tailwind" />
+        <slot name="css" />
+      </HeroCodeGroup>
+    </template>
+  </HeroContainer>
+</template>

.docs/.vitepress/components/Contributors.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { contributors } from '../contributors'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2 justify-center">
+    <a
+      v-for="{ name, avatar } of contributors"
+      :key="name"
+      :href="`https://github.com/${name}`"
+      class="m-0"
+      rel="noopener noreferrer"
+      :aria-label="`${name} on GitHub`"
+    >
+      <img
+        loading="lazy"
+        :src="avatar"
+        width="50"
+        height="50"
+        class="rounded-full h-12 w-12"
+        :alt="`${name}'s avatar`"
+      >
+    </a>
+  </div>
+</template>

.docs/.vitepress/components/EmbedIframe.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { AspectRatio } from '@oku-ui/primitives'
+import { onMounted, ref } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{ src: string }>()
+
+const isMounted = ref(false)
+onMounted(() => {
+  isMounted.value = true
+})
+</script>
+
+<template>
+  <AspectRatio>
+    <iframe
+      :src="src"
+      class="w-full h-full"
+      v-bind="$attrs"
+    />
+  </AspectRatio>
+</template>

.docs/.vitepress/components/HomePage.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { VPTeamMembers } from 'vitepress/theme-without-fonts'
+import { teamMembers } from '../contributors'
+import Contributors from './Contributors.vue'
+</script>
+
+<template>
+  <div class="content px-6 sm:px-[48px] lg:px-[64px]">
+    <div class="mx-auto w-full container max-w-[1152px]">
+      <main class="w-full">
+        <div class="vp-doc flex flex-col items-center mt-10">
+          <h2
+            id="meet-the-team"
+            class="opacity-50 font-medium pt-10 pb-2"
+          >
+            Meet The Team
+          </h2>
+          <div class="w-full">
+            <VPTeamMembers
+              size="small"
+              :members="teamMembers"
+            />
+          </div>
+          <h2
+            id="the-team"
+            class="op50 font-medium pt-5 pb-2"
+          >
+            Contributors
+          </h2>
+          <p class="text-lg max-w-200 text-center leading-7">
+            <Contributors />
+            <br>
+            <a
+              href="https://discord.gg/RCGzQQPtAh"
+              rel="noopener noreferrer"
+            >Join the community</a> and get involved!
+          </p>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>

.docs/.vitepress/components/HomePageDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Demos from '../../components/Demos.vue'
+</script>
+
+<template>
+  <div class="mt-12 md:mt-24 content px-6 sm:px-[48px] lg:px-[64px]">
+    <div class="mx-auto w-full container max-w-[1152px]">
+      <Demos class="grid w-auto lg:grid-cols-2 gap-6 md:gap-12 lg:gap-6" />
+    </div>
+  </div>
+</template>

.docs/.vitepress/components/InstallationTabs.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@oku-ui/primitives'
+import { PACKAGE_MANAGERS } from '../plugins/InstallationTabs'
+import { store } from '../store'
+
+defineProps<{
+  value: string
+}>()
+</script>
+
+<template>
+  <TabsRoot
+    v-model="store.packageManager"
+    class="bg-[var(--vp-code-block-bg)] border border-neutral-700/40 rounded-lg overflow-hidden"
+    default-value="npm"
+  >
+    <div class="bg-[var(--vp-code-block-bg)] border-b-2 border-[#272727] flex pr-2">
+      <div class="flex justify-between items-center w-full text-[13px]">
+        <TabsList class="flex">
+          <TabsTrigger
+            v-for="(pkg, index) in PACKAGE_MANAGERS"
+            :key="index"
+            :value="pkg"
+            tabindex="-1"
+            class="text-white/70 py-2.5 px-4 border-box data-[state=active]:shadow-[0_1px_0_#10b981] data-[state=active]:font-medium data-[state=active]:text-white"
+          >
+            {{ pkg }}
+          </TabsTrigger>
+        </TabsList>
+      </div>
+    </div>
+
+    <div
+      class="[&_>div]:!m-0 custom"
+    >
+      <TabsContent
+        v-for="pkg in PACKAGE_MANAGERS"
+        :key="pkg"
+        :value="pkg"
+        as-child
+      >
+        <slot :name="pkg" />
+      </TabsContent>
+    </div>
+  </TabsRoot>
+</template>