feat: 课程章节UI

2025-04-03 22:57:36 +08:00 · 2025-04-03 22:57:36 +08:00 · 1093d404c7
commit 1093d404c7
173 changed files with 14386 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
--- a/README.md
+++ b/README.md
@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
--- a/app.vue
+++ b/app.vue
@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { Toaster } from "@/components/ui/sonner";
+</script>
+
+<template>
+  <SidebarProvider>
+    <TooltipProvider>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+      <Toaster class="pointer-events-auto" />
+    </TooltipProvider>
+  </SidebarProvider>
+</template>
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@ -0,0 +1,86 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 12px;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/components.json
+++ b/components.json
@ -0,0 +1,20 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "assets/css/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "composables": "@/composables",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "iconLibrary": "lucide"
+}
--- a/components/CourseCard.vue
+++ b/components/CourseCard.vue
@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import type { ICourse } from "~/types";
+
+defineProps<{
+  data: ICourse;
+}>();
+
+const openCourse = (id: string) => {
+  window.open(`/course/${id}`, "_blank", "noopener,noreferrer");
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <NuxtImg
+      :src="data.thumbnail_url"
+      alt="课程封面"
+      class="w-full aspect-video rounded-md shadow-md cursor-pointer hover:shadow-lg transition duration-300 ease-in-out hover:ring-4 hover:ring-primary-background"
+      @click="openCourse(data.id)"
+    />
+    <div class="px-1.5 flex flex-col gap-1">
+      <div class="flex justify-between items-center gap-2">
+        <h1 class="flex-1 text-base font-medium text-ellipsis line-clamp-1">
+          {{ data.title || "未知课程" }}
+        </h1>
+        <p
+          class="text-xs text-muted-foreground font-medium flex items-center gap-0.5"
+        >
+          <Icon name="tabler:user" size="14px" />
+          <span>{{ data.teacher_name || "未知教师" }}</span>
+        </p>
+      </div>
+      <div class="flex justify-between gap-1 text-xs text-muted-foreground/80">
+        <div class="flex-1 flex flex-col">
+          <p>
+            学期：<span>{{ data.semester || "未知" }}</span>
+          </p>
+          <p>
+            课程ID：<span>{{ data.id }}</span>
+          </p>
+        </div>
+        <div class="flex flex-col items-end">
+          <p>{{ data.school_name }}</p>
+          <div class="flex items-center gap-1">
+            <div
+              v-if="data.is_published"
+              class="w-2 h-2 rounded-full bg-emerald-400"
+            />
+            <div v-else class="w-2 h-2 rounded-full bg-gray-400" />
+            <p class="text-xs text-muted-foreground/80">
+              {{ data.is_published ? "开课" : "关课" }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
--- a/components/app/NavMain.vue
+++ b/components/app/NavMain.vue
@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ChevronRight, type LucideIcon } from "lucide-vue-next";
+import type { RouteLocationRaw } from "vue-router";
+
+defineProps<{
+  nav: {
+    label?: string;
+    items: {
+      title: string;
+      url?: RouteLocationRaw | string;
+      icon: LucideIcon | string;
+      isActive?: boolean;
+      items?: {
+        title: string;
+        url: string;
+      }[];
+    }[];
+  }[];
+}>();
+</script>
+
+<template>
+  <SidebarGroup v-for="group in nav" :key="group.label">
+    <SidebarGroupLabel v-if="group.label">{{ group.label }}</SidebarGroupLabel>
+    <SidebarMenu>
+      <Collapsible
+        v-for="item in group.items"
+        :key="item.title"
+        as-child
+        :default-open="item.isActive"
+        class="group/collapsible"
+      >
+        <SidebarMenuItem>
+          <CollapsibleTrigger as-child>
+            <!-- 有跳转链接 -->
+            <NuxtLink
+              v-if="item.url"
+              v-slot="{ isActive, href, navigate }"
+              class="py-6"
+              :to="item.url"
+              custom
+            >
+              <SidebarMenuButton
+                as="a"
+                class="flex justify-start text-base pl-8"
+                :tooltip="item.title"
+                :is-active="isActive"
+                :href
+                @click="navigate"
+              >
+                <!-- 图标名 -->
+                <Icon
+                  v-if="item.icon && typeof item.icon === 'string'"
+                  :name="item.icon"
+                  class="!size-6"
+                />
+                <!-- 图标组件 -->
+                <component :is="item.icon" v-else class="!size-6" />
+                <span>{{ item.title }}</span>
+                <!-- 有子项目 -->
+                <ChevronRight
+                  v-if="item.items"
+                  class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+                />
+              </SidebarMenuButton>
+            </NuxtLink>
+            <!-- 无跳转链接 -->
+            <SidebarMenuButton v-else :tooltip="item.title">
+              <!-- 图标名 -->
+              <Icon
+                v-if="item.icon && typeof item.icon === 'string'"
+                :name="item.icon"
+                size="16px"
+              />
+              <!-- 图标组件 -->
+              <component :is="item.icon" v-else />
+              <span>{{ item.title }}</span>
+              <ChevronRight
+                v-if="item.items"
+                class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+              />
+            </SidebarMenuButton>
+          </CollapsibleTrigger>
+
+          <CollapsibleContent v-if="item.items">
+            <SidebarMenuSub>
+              <SidebarMenuSubItem
+                v-for="subItem in item.items"
+                :key="subItem.title"
+              >
+                <NuxtLink
+                  v-slot="{ isActive, href, navigate }"
+                  :to="subItem.url"
+                  custom
+                >
+                  <SidebarMenuSubButton
+                    as="a"
+                    as-child
+                    :is-active="isActive"
+                    :href
+                    @click="navigate"
+                  >
+                    <span>{{ subItem.title }}</span>
+                  </SidebarMenuSubButton>
+                </NuxtLink>
+              </SidebarMenuSubItem>
+            </SidebarMenuSub>
+          </CollapsibleContent>
+        </SidebarMenuItem>
+      </Collapsible>
+    </SidebarMenu>
+  </SidebarGroup>
+</template>
--- a/components/app/NavUser.vue
+++ b/components/app/NavUser.vue
@ -0,0 +1,91 @@
+<script setup lang="ts">
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from "lucide-vue-next";
+import { useSidebar } from "../ui/sidebar";
+
+defineProps<{
+  user: {
+    name: string;
+    email: string;
+    avatar: string;
+  };
+}>();
+
+const { isMobile } = useSidebar();
+</script>
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Avatar class="h-8 w-8 rounded-lg">
+              <AvatarImage :src="user.avatar" :alt="user.name" />
+              <AvatarFallback class="rounded-lg"> CN </AvatarFallback>
+            </Avatar>
+            <div class="grid flex-1 text-left text-sm leading-tight">
+              <span class="truncate font-semibold">{{ user.name }}</span>
+              <span class="truncate text-xs">{{ user.email }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto size-4" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+          :side="isMobile ? 'bottom' : 'right'"
+          align="end"
+          :side-offset="4"
+        >
+          <DropdownMenuLabel class="p-0 font-normal">
+            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+              <Avatar class="h-8 w-8 rounded-lg">
+                <AvatarImage :src="user.avatar" :alt="user.name" />
+                <AvatarFallback class="rounded-lg"> CN </AvatarFallback>
+              </Avatar>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-semibold">{{ user.name }}</span>
+                <span class="truncate text-xs">{{ user.email }}</span>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Sparkles />
+              Upgrade to Pro
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <BadgeCheck />
+              Account
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CreditCard />
+              Billing
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Bell />
+              Notifications
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogOut />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
--- a/components/app/PageWithSidebar.vue
+++ b/components/app/PageWithSidebar.vue
@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { SidebarNavGroup } from "./Sidebar.vue";
+
+const props = defineProps<{
+  sidebarNav: SidebarNavGroup[];
+}>();
+
+defineExpose({
+  props,
+});
+</script>
+
+<template>
+  <SidebarProvider style="--sidebar-width: 200px">
+    <slot name="sidebar" :sidebar-nav="sidebarNav">
+      <AppSidebar :nav="sidebarNav" />
+    </slot>
+    <SidebarInset>
+      <slot name="topbar">
+        <AppTopbar />
+      </slot>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <slot />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
+
+<style scoped></style>
--- a/components/app/Sidebar.vue
+++ b/components/app/Sidebar.vue
@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import type { LucideIcon } from "lucide-vue-next";
+import type { SidebarProps } from "../ui/sidebar";
+import type { RouteLocationRaw } from "vue-router";
+
+export interface SidebarNavItem {
+  title: string;
+  url?: string | RouteLocationRaw;
+  icon: LucideIcon | string;
+  isActive?: boolean;
+  items?: {
+    title: string;
+    url: string;
+  }[];
+}
+
+export interface SidebarNavGroup {
+  label?: string;
+  items: SidebarNavItem[];
+}
+
+const props = withDefaults(
+  defineProps<
+    SidebarProps & {
+      nav: SidebarNavGroup[];
+    }
+  >(),
+  {
+    collapsible: "offcanvas",
+    variant: "sidebar",
+  }
+);
+
+const data = {
+  user: {
+    name: "Timothy Yin",
+    email: "master@uniiem.com",
+    avatar: "https://bh8.ga/avatar.jpg",
+  },
+};
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <div
+        class="flex h-12 justify-center items-center gap-2 rounded truncate group-has-[[data-collapsible=icon]]/sidebar-wrapper:justify-start transition-all duration-200 ease-in-out"
+      >
+        <NuxtImg
+          src="/images/xsh_logo.png"
+          alt="Logo"
+          class="w-9 max-w-9 aspect-square group-has-[[data-collapsible=icon]]/sidebar-wrapper:w-full transition-all duration-200 ease-in-out"
+        />
+        <h1 class="text-lg font-medium">智课教学平台</h1>
+      </div>
+    </SidebarHeader>
+    <SidebarContent>
+      <slot name="extra-header" />
+      <AppNavMain :nav="nav" />
+    </SidebarContent>
+    <SidebarFooter>
+      <AppNavUser :user="data.user" />
+    </SidebarFooter>
+    <SidebarRail />
+  </Sidebar>
+</template>
+
+<style scoped></style>
--- a/components/app/Topbar.vue
+++ b/components/app/Topbar.vue
@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
+
+defineProps({
+  hideTrigger: {
+    type: Boolean,
+    default: false,
+  },
+  nav: {
+    type: Array as () => TopbarNavItem[],
+    default: () => topbarNavDefaults,
+  },
+});
+
+const colorMode = useColorMode();
+</script>
+
+<script lang="ts">
+export interface TopbarNavItem {
+  title: string;
+  to: string;
+  icon?: string;
+}
+
+export const topbarNavDefaults = [
+  {
+    title: "课程中心",
+    to: "/course",
+    icon: "tabler:home",
+  },
+  {
+    title: "AI 备课",
+    to: "/course/prepare",
+    icon: "tabler:clipboard-list",
+  },
+  {
+    title: "AI 教科研",
+    to: "/course/research",
+    icon: "tabler:report-search",
+  },
+  {
+    title: "课程资源库",
+    to: "/course/resources",
+    icon: "tabler:books",
+  },
+];
+</script>
+
+<template>
+  <header
+    class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear border-b sticky top-0 z-30 bg-background"
+  >
+    <!-- group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 -->
+    <div class="flex items-center gap-2 px-4 w-full">
+      <SidebarTrigger v-if="!hideTrigger" class="-ml-1" />
+      <slot name="title-area" />
+      <div class="flex-1 flex justify-center">
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem v-for="item in nav" :key="item.title">
+              <NuxtLink
+                v-slot="{ isActive, href, navigate }"
+                :to="item.to"
+                custom
+              >
+                <NavigationMenuLink
+                  :active="isActive"
+                  :href
+                  :class="navigationMenuTriggerStyle()"
+                  @click="navigate"
+                >
+                  <Icon
+                    v-if="item.icon"
+                    :name="item.icon"
+                    class="mr-1.5"
+                    size="16px"
+                  />
+                  <span>{{ item.title }}</span>
+                </NavigationMenuLink>
+              </NuxtLink>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="ghost" size="icon">
+            <Icon
+              name="tabler:moon"
+              class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+            />
+            <Icon
+              name="tabler:sun"
+              class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+            />
+            <span class="sr-only">Toggle theme</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem @click="colorMode.preference = 'light'">
+            亮色
+          </DropdownMenuItem>
+          <DropdownMenuItem @click="colorMode.preference = 'dark'">
+            暗色
+          </DropdownMenuItem>
+          <DropdownMenuItem @click="colorMode.preference = 'system'">
+            跟随系统
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  </header>
+</template>
+
+<style scoped></style>
--- a/components/course/Chapter.vue
+++ b/components/course/Chapter.vue
@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import { ChevronLeft } from "lucide-vue-next";
+import type { ICourseChapter } from "~/types";
+
+const props = defineProps<{
+  tag?: string;
+  chapter: ICourseChapter;
+}>();
+
+const emit = defineEmits<{
+  (e: "delete-chapter", chapterId: string): void;
+}>();
+
+const handleDeleteChapter = () => {
+  if (props.chapter.sections.length > 0) {
+    const confirmDelete = confirm(
+      "该章节下有小节，删除后将无法恢复，是否继续？"
+    );
+    if (!confirmDelete) return;
+  }
+  emit("delete-chapter", props.chapter.id);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-1 relative">
+    <div
+      v-if="chapter.sections.length > 0"
+      class="absolute inset-y-0 left-9 bottom-6 w-[1px] bg-gray-300 dark:bg-gray-700 z-0"
+    />
+    <Collapsible class="group/collapsible z-10" :default-open="true">
+      <div
+        class="w-full px-4 py-3 rounded-md bg-indigo-50 dark:bg-muted flex justify-between items-center"
+      >
+        <div class="flex items-center gap-2">
+          <div class="w-10 flex justify-center">
+            <Badge variant="secondary" class="text-xs text-white bg-indigo-400">
+              <span>
+                {{
+                  tag || chapter.sections.length > 0
+                    ? chapter.sections.length
+                    : 0
+                }}
+              </span>
+            </Badge>
+          </div>
+          <h1 class="text-base font-semibold text-ellipsis line-clamp-1">
+            {{ chapter.title }}
+          </h1>
+        </div>
+        <div class="flex items-center gap-2">
+          <!-- TODO: hide actions defaulty -->
+          <div
+            class="flex items-center gap-2 opacity-100 group-hover/collapsible:opacity-100 transition-opacity duration-200"
+          >
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  variant="link"
+                  size="xs"
+                  class="flex items-center gap-2 text-muted-foreground"
+                >
+                  <div
+                    v-if="chapter.is_published"
+                    class="w-2 h-2 rounded-full bg-emerald-500"
+                  />
+                  <div
+                    v-else
+                    class="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-500"
+                  />
+                  <span>{{ chapter.is_published ? "已发布" : "未发布" }}</span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>TBD.</TooltipContent>
+            </Tooltip>
+            <Button
+              variant="link"
+              size="xs"
+              class="flex items-center gap-1 text-muted-foreground"
+            >
+              <Icon name="tabler:automation" size="16px" />
+              <span>章节检测</span>
+            </Button>
+            <Button
+              variant="link"
+              size="xs"
+              class="flex items-center gap-1 text-muted-foreground"
+            >
+              <Icon name="tabler:plus" size="16px" />
+              <span>添加小节</span>
+            </Button>
+            <Button
+              variant="link"
+              size="xs"
+              class="flex items-center gap-1 text-red-500"
+              @click="handleDeleteChapter"
+            >
+              <Icon name="tabler:trash" size="16px" />
+              <span>删除</span>
+            </Button>
+          </div>
+
+          <CollapsibleTrigger>
+            <ChevronLeft
+              class="transition-transform duration-200 group-data-[state=open]/collapsible:-rotate-90 text-muted-foreground"
+            />
+            <span class="sr-only">Toggle</span>
+          </CollapsibleTrigger>
+        </div>
+      </div>
+      <CollapsibleContent class="pt-4">
+        <div v-if="chapter.sections.length > 0" class="flex flex-col gap-4">
+          <!-- Section -->
+          <CourseSection
+            v-for="section in chapter.sections"
+            :key="section.id"
+            :section="section"
+          />
+        </div>
+        <div
+          v-else
+          class="flex items-center justify-center gap-2 text-muted-foreground"
+        >
+          <Icon name="tabler:circle-minus" size="16px" />
+          <span class="text-sm">该章节没有内容</span>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  </div>
+</template>
+
+<style scoped></style>
--- a/components/course/Resource.vue
+++ b/components/course/Resource.vue
@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { ICourseResource } from "~/types";
+
+const props = defineProps<{
+  resource: ICourseResource;
+}>();
+
+const emit = defineEmits<{
+  (e: "delete-resource", resourceId: string): void;
+}>();
+
+const resourceIcon = computed(() => {
+  switch (props.resource.type) {
+    case "video":
+      return "tabler:video";
+    case "image":
+      return "tabler:photo";
+    case "ppt":
+      return "tabler:file-type-ppt";
+    case "doc":
+      return "tabler:file-type-doc";
+
+    default:
+      return "tabler:file";
+  }
+});
+</script>
+
+<template>
+  <div
+    class="px-4 pl-8 py-1 flex justify-between group/resource hover:bg-muted/50"
+  >
+    <div class="flex items-center gap-2 relative text-muted-foreground">
+      <div
+        class="absolute inset-y-0 top-3 left-1.5 w-4 h-[1px] bg-gray-300 dark:bg-gray-700 z-0"
+      />
+      <div class="w-[7px] h-[7px] rounded-full bg-foreground/50 z-10" />
+      <Icon :name="resourceIcon" class="ml-6" size="20px" />
+      <span class="text-ellipsis line-clamp-1 text-xs font-medium">
+        {{ resource.name }}
+      </span>
+    </div>
+    <div
+      class="flex items-center gap-2 mr-8 opacity-0 group-hover/resource:opacity-100"
+    >
+      <Button
+        variant="link"
+        size="xs"
+        class="flex items-center gap-1 text-muted-foreground"
+      >
+        <Icon name="tabler:eye" size="16px" />
+        <span>预览</span>
+      </Button>
+      <Button
+        variant="link"
+        size="xs"
+        class="flex items-center gap-1 text-muted-foreground"
+        :class="{
+          'text-amber-500': resource.allow_download,
+        }"
+      >
+        <Icon
+          :name="
+            resource.allow_download ? 'tabler:download-off' : 'tabler:download'
+          "
+          size="16px"
+        />
+        <span>
+          {{ resource.allow_download ? "禁止下载" : "允许下载" }}
+        </span>
+      </Button>
+      <!-- <Tooltip :delay-duration="0">
+        <TooltipTrigger>
+          
+        </TooltipTrigger>
+        <TooltipContent>
+          {{ `当前${resource.allow_download ? "允许" : "禁止"}下载` }}
+        </TooltipContent>
+      </Tooltip> -->
+      <Button
+        variant="link"
+        size="xs"
+        class="flex items-center gap-1 text-red-500"
+        @click="emit('delete-resource', resource.id)"
+      >
+        <Icon name="tabler:trash" size="16px" />
+        <span>删除</span>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
--- a/components/course/Section.vue
+++ b/components/course/Section.vue
@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { ICourseSection } from "~/types";
+
+const props = defineProps<{
+  tag?: string;
+  section: ICourseSection;
+}>();
+
+const emit = defineEmits<{
+  (e: "delete-section", sectionId: string): void;
+}>();
+
+const handleDeleteSection = () => {
+  if (props.section.resources.length > 0) {
+    const confirmDelete = confirm(
+      "该小节下有资源，删除后将无法恢复，是否继续？"
+    );
+    if (!confirmDelete) return;
+  }
+  emit("delete-section", props.section.id);
+};
+</script>
+
+<template>
+  <div class="rounded-md border border-muted overflow-hidden">
+    <div
+      class="w-full px-4 py-2.5 bg-muted dark:bg-muted/50 flex justify-between items-center group/section"
+    >
+      <div class="flex items-center gap-2">
+        <div class="w-10 flex justify-center">
+          <Badge variant="outline" class="text-xs bg-background">
+            <span>
+              {{
+                tag || section.resources.length > 0
+                  ? section.resources.length
+                  : 0
+              }}
+            </span>
+          </Badge>
+        </div>
+        <h2 class="inline-flex items-center gap-2 text-sm font-medium">
+          <span>1.1</span>
+          <span class="text-ellipsis line-clamp-1">什么传感器</span>
+        </h2>
+      </div>
+      <div
+        class="flex items-center gap-2 mr-8 opacity-0 group-hover/section:opacity-100"
+      >
+        <Button
+          variant="link"
+          size="xs"
+          class="flex items-center gap-1 text-muted-foreground"
+        >
+          <Icon name="tabler:plus" size="16px" />
+          <span>添加资源</span>
+        </Button>
+        <Button
+          variant="link"
+          size="xs"
+          class="flex items-center gap-1 text-red-500"
+          @click="handleDeleteSection"
+        >
+          <Icon name="tabler:trash" size="16px" />
+          <span>删除</span>
+        </Button>
+      </div>
+    </div>
+    <div v-if="section.resources.length > 0" class="flex flex-col gap-2">
+      <!-- Resource -->
+      <CourseResource
+        v-for="resource in section.resources"
+        :key="resource.id"
+        :resource="resource"
+      />
+    </div>
+    <div
+      v-else
+      class="py-4 flex items-center justify-center gap-2 text-muted-foreground"
+    >
+      <Icon name="tabler:circle-minus" size="16px" />
+      <span class="text-sm">该小节下暂无资源</span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
--- a/components/ui/avatar/Avatar.vue
+++ b/components/ui/avatar/Avatar.vue
@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { AvatarRoot } from 'reka-ui'
+import { avatarVariant, type AvatarVariants } from '.'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
+  size: 'sm',
+  shape: 'circle',
+})
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
--- a/components/ui/avatar/AvatarFallback.vue
+++ b/components/ui/avatar/AvatarFallback.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
+
+const props = defineProps<AvatarFallbackProps>()
+</script>
+
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
--- a/components/ui/avatar/AvatarImage.vue
+++ b/components/ui/avatar/AvatarImage.vue
@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'reka-ui'
+import { AvatarImage } from 'reka-ui'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover">
+    <slot />
+  </AvatarImage>
+</template>
--- a/components/ui/avatar/index.ts
+++ b/components/ui/avatar/index.ts
@ -0,0 +1,24 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+
+export const avatarVariant = cva(
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>
--- a/components/ui/badge/Badge.vue
+++ b/components/ui/badge/Badge.vue
@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { type BadgeVariants, badgeVariants } from '.'
+
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
--- a/components/ui/badge/index.ts
+++ b/components/ui/badge/index.ts
@ -0,0 +1,25 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
--- a/components/ui/breadcrumb/Breadcrumb.vue
+++ b/components/ui/breadcrumb/Breadcrumb.vue
@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>
--- a/components/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
--- a/components/ui/breadcrumb/BreadcrumbItem.vue
+++ b/components/ui/breadcrumb/BreadcrumbItem.vue
@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
--- a/components/ui/breadcrumb/BreadcrumbLink.vue
+++ b/components/ui/breadcrumb/BreadcrumbLink.vue
@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'a',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/components/ui/breadcrumb/BreadcrumbList.vue
+++ b/components/ui/breadcrumb/BreadcrumbList.vue
@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
--- a/components/ui/breadcrumb/BreadcrumbPage.vue
+++ b/components/ui/breadcrumb/BreadcrumbPage.vue
@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>
--- a/components/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/components/ui/breadcrumb/BreadcrumbSeparator.vue
@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:w-3.5 [&>svg]:h-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
--- a/components/ui/breadcrumb/index.ts
+++ b/components/ui/breadcrumb/index.ts
@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
--- a/components/ui/button/Button.vue
+++ b/components/ui/button/Button.vue
@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { type ButtonVariants, buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/components/ui/button/index.ts
+++ b/components/ui/button/index.ts
@ -0,0 +1,36 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export { default as Button } from "./Button.vue";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        xs: "h-6 rounded px-2 text-xs",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
--- a/components/ui/collapsible/Collapsible.vue
+++ b/components/ui/collapsible/Collapsible.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>
--- a/components/ui/collapsible/CollapsibleContent.vue
+++ b/components/ui/collapsible/CollapsibleContent.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleContent, type CollapsibleContentProps } from 'reka-ui'
+
+const props = defineProps<CollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+    <slot />
+  </CollapsibleContent>
+</template>
--- a/components/ui/collapsible/CollapsibleTrigger.vue
+++ b/components/ui/collapsible/CollapsibleTrigger.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'reka-ui'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
--- a/components/ui/collapsible/index.ts
+++ b/components/ui/collapsible/index.ts
@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
--- a/components/ui/dialog/Dialog.vue
+++ b/components/ui/dialog/Dialog.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
--- a/components/ui/dialog/DialogClose.vue
+++ b/components/ui/dialog/DialogClose.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
--- a/components/ui/dialog/DialogContent.vue
+++ b/components/ui/dialog/DialogContent.vue
@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+      >
+        <X class="w-4 h-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
--- a/components/ui/dialog/DialogDescription.vue
+++ b/components/ui/dialog/DialogDescription.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
--- a/components/ui/dialog/DialogFooter.vue
+++ b/components/ui/dialog/DialogFooter.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
--- a/components/ui/dialog/DialogHeader.vue
+++ b/components/ui/dialog/DialogHeader.vue
@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/components/ui/dialog/DialogScrollContent.vue
+++ b/components/ui/dialog/DialogScrollContent.vue
@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
--- a/components/ui/dialog/DialogTitle.vue
+++ b/components/ui/dialog/DialogTitle.vue
@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
--- a/components/ui/dialog/DialogTrigger.vue
+++ b/components/ui/dialog/DialogTrigger.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
--- a/components/ui/dialog/index.ts
+++ b/components/ui/dialog/index.ts
@ -0,0 +1,9 @@
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
--- a/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/components/ui/dropdown-menu/DropdownMenu.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class=" cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/components/ui/dropdown-menu/DropdownMenuContent.vue
@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/components/ui/dropdown-menu/DropdownMenuGroup.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuItem.vue
@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/components/ui/dropdown-menu/DropdownMenuLabel.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRadioGroup,
+  type DropdownMenuRadioGroupEmits,
+  type DropdownMenuRadioGroupProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  type DropdownMenuRadioItemEmits,
+  type DropdownMenuRadioItemProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  DropdownMenuSeparator,
+  type DropdownMenuSeparatorProps,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot />
+  </span>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSub.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSub,
+  type DropdownMenuSubEmits,
+  type DropdownMenuSubProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import {
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+  useForwardProps,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>
--- a/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>
--- a/components/ui/dropdown-menu/index.ts
+++ b/components/ui/dropdown-menu/index.ts
@ -0,0 +1,16 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { DropdownMenuPortal } from 'reka-ui'
--- a/components/ui/form/FormControl.vue
+++ b/components/ui/form/FormControl.vue
@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { Slot } from 'reka-ui'
+import { useFormField } from './useFormField'
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>
--- a/components/ui/form/FormDescription.vue
+++ b/components/ui/form/FormDescription.vue
@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useFormField } from './useFormField'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </p>
+</template>
--- a/components/ui/form/FormItem.vue
+++ b/components/ui/form/FormItem.vue
@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { cn } from '@/lib/utils'
+import { useId } from 'reka-ui'
+import { type HTMLAttributes, provide } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>
--- a/components/ui/form/FormLabel.vue
+++ b/components/ui/form/FormLabel.vue
@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { LabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+import { useFormField } from './useFormField'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    :class="cn(
+      error && 'text-destructive',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>
--- a/components/ui/form/FormMessage.vue
+++ b/components/ui/form/FormMessage.vue
@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { ErrorMessage } from 'vee-validate'
+import { toValue } from 'vue'
+import { useFormField } from './useFormField'
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    as="p"
+    :name="toValue(name)"
+    class="text-sm font-medium text-destructive"
+  />
+</template>
--- a/components/ui/form/index.ts
+++ b/components/ui/form/index.ts
@ -0,0 +1,7 @@
+export { default as FormControl } from './FormControl.vue'
+export { default as FormDescription } from './FormDescription.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+export { Form, Field as FormField } from 'vee-validate'
--- a/components/ui/form/injectionKeys.ts
+++ b/components/ui/form/injectionKeys.ts
@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>
--- a/components/ui/form/useFormField.ts
+++ b/components/ui/form/useFormField.ts
@ -0,0 +1,30 @@
+import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
+import { inject } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+  if (!fieldContext)
+    throw new Error('useFormField should be used within <FormField>')
+
+  const { name } = fieldContext
+  const id = fieldItemContext
+
+  const fieldState = {
+    valid: useIsFieldValid(name),
+    isDirty: useIsFieldDirty(name),
+    isTouched: useIsFieldTouched(name),
+    error: useFieldError(name),
+  }
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
--- a/components/ui/input/Input.vue
+++ b/components/ui/input/Input.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>
--- a/components/ui/input/index.ts
+++ b/components/ui/input/index.ts
@ -0,0 +1 @@
+export { default as Input } from './Input.vue'
--- a/components/ui/label/Label.vue
+++ b/components/ui/label/Label.vue
@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Label, type LabelProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
--- a/components/ui/label/index.ts
+++ b/components/ui/label/index.ts
@ -0,0 +1 @@
+export { default as Label } from './Label.vue'
--- a/components/ui/navigation-menu/NavigationMenu.vue
+++ b/components/ui/navigation-menu/NavigationMenu.vue
@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  NavigationMenuRoot,
+  type NavigationMenuRootEmits,
+  type NavigationMenuRootProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import NavigationMenuViewport from './NavigationMenuViewport.vue'
+
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="forwarded"
+    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot />
+    <NavigationMenuViewport />
+  </NavigationMenuRoot>
+</template>
--- a/components/ui/navigation-menu/NavigationMenuContent.vue
+++ b/components/ui/navigation-menu/NavigationMenuContent.vue
@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  NavigationMenuContent,
+  type NavigationMenuContentEmits,
+  type NavigationMenuContentProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="forwarded"
+    :class="cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      props.class,
+    )"
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>
--- a/components/ui/navigation-menu/NavigationMenuIndicator.vue
+++ b/components/ui/navigation-menu/NavigationMenuIndicator.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    v-bind="forwardedProps"
+    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
+  >
+    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuIndicator>
+</template>
--- a/components/ui/navigation-menu/NavigationMenuItem.vue
+++ b/components/ui/navigation-menu/NavigationMenuItem.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { NavigationMenuItem, type NavigationMenuItemProps } from 'reka-ui'
+
+const props = defineProps<NavigationMenuItemProps>()
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="props">
+    <slot />
+  </NavigationMenuItem>
+</template>
--- a/components/ui/navigation-menu/NavigationMenuLink.vue
+++ b/components/ui/navigation-menu/NavigationMenuLink.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  NavigationMenuLink,
+  type NavigationMenuLinkEmits,
+  type NavigationMenuLinkProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<NavigationMenuLinkProps>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <NavigationMenuLink v-bind="forwarded">
+    <slot />
+  </NavigationMenuLink>
+</template>
--- a/components/ui/navigation-menu/NavigationMenuList.vue
+++ b/components/ui/navigation-menu/NavigationMenuList.vue
@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-x-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>
--- a/components/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/components/ui/navigation-menu/NavigationMenuTrigger.vue
@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import {
+  NavigationMenuTrigger,
+  type NavigationMenuTriggerProps,
+  useForwardProps,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { navigationMenuTriggerStyle } from '.'
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+  >
+    <slot />
+    <ChevronDown
+      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>
--- a/components/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/components/ui/navigation-menu/NavigationMenuViewport.vue
@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  NavigationMenuViewport,
+  type NavigationMenuViewportProps,
+  useForwardProps,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="absolute left-0 top-full flex justify-center">
+    <NavigationMenuViewport
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>
--- a/components/ui/navigation-menu/index.ts
+++ b/components/ui/navigation-menu/index.ts
@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority'
+
+export { default as NavigationMenu } from './NavigationMenu.vue'
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
+export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'
+
+export const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+)
--- a/components/ui/popover/Popover.vue
+++ b/components/ui/popover/Popover.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
--- a/components/ui/popover/PopoverContent.vue
+++ b/components/ui/popover/PopoverContent.vue
@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
--- a/components/ui/popover/PopoverTrigger.vue
+++ b/components/ui/popover/PopoverTrigger.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
--- a/components/ui/popover/index.ts
+++ b/components/ui/popover/index.ts
@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
--- a/components/ui/select/Select.vue
+++ b/components/ui/select/Select.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
--- a/components/ui/select/SelectContent.vue
+++ b/components/ui/select/SelectContent.vue
@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
--- a/components/ui/select/SelectGroup.vue
+++ b/components/ui/select/SelectGroup.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { SelectGroup, type SelectGroupProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
--- a/components/ui/select/SelectItem.vue
+++ b/components/ui/select/SelectItem.vue
@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
--- a/components/ui/select/SelectItemText.vue
+++ b/components/ui/select/SelectItemText.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from 'reka-ui'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
--- a/components/ui/select/SelectLabel.vue
+++ b/components/ui/select/SelectLabel.vue
@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SelectLabel, type SelectLabelProps } from 'reka-ui'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
--- a/components/ui/select/SelectScrollDownButton.vue
+++ b/components/ui/select/SelectScrollDownButton.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
--- a/components/ui/select/SelectScrollUpButton.vue
+++ b/components/ui/select/SelectScrollUpButton.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronUp } from 'lucide-vue-next'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
--- a/components/ui/select/SelectSeparator.vue
+++ b/components/ui/select/SelectSeparator.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
--- a/components/ui/select/SelectTrigger.vue
+++ b/components/ui/select/SelectTrigger.vue
@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
--- a/components/ui/select/SelectValue.vue
+++ b/components/ui/select/SelectValue.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'reka-ui'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
--- a/components/ui/select/index.ts
+++ b/components/ui/select/index.ts
@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
--- a/components/ui/separator/Separator.vue
+++ b/components/ui/separator/Separator.vue
@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Separator, type SeparatorProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+      )"
+    >{{ props.label }}</span>
+  </Separator>
+</template>
--- a/components/ui/separator/index.ts
+++ b/components/ui/separator/index.ts
@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'
--- a/components/ui/sheet/Sheet.vue
+++ b/components/ui/sheet/Sheet.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
--- a/components/ui/sheet/SheetClose.vue
+++ b/components/ui/sheet/SheetClose.vue
@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`export { default as Input } from './Input.vue'`
				`@ -0,0 +1 @@`
				`export { default as Label } from './Label.vue'`
				`@ -0,0 +1 @@`
				`export { default as Separator } from './Separator.vue'`