Project import from github

app/app.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>

app/assets/css/tailwind.css

@@ -0,0 +1,127 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: 'Inter Variable', sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.60 0.10 185);
+  --primary-foreground: oklch(0.98 0.01 181);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.85 0.13 181);
+  --chart-2: oklch(0.78 0.13 182);
+  --chart-3: oklch(0.70 0.12 183);
+  --chart-4: oklch(0.60 0.10 185);
+  --chart-5: oklch(0.51 0.09 186);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.60 0.10 185);
+  --sidebar-primary-foreground: oklch(0.98 0.01 181);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.70 0.12 183);
+  --primary-foreground: oklch(0.28 0.04 193);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.85 0.13 181);
+  --chart-2: oklch(0.78 0.13 182);
+  --chart-3: oklch(0.70 0.12 183);
+  --chart-4: oklch(0.60 0.10 185);
+  --chart-5: oklch(0.51 0.09 186);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.78 0.13 182);
+  --sidebar-primary-foreground: oklch(0.28 0.04 193);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply font-sans bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

app/assets/images/logo.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 282 282" width="282" height="282">
+  <style>
+    circle,
+    path{fill:none;stroke:#000;stroke-width:15}
+    path{stroke-width:25}
+    .white{stroke:#ccc}
+    .red{stroke:#AD1D25}
+    .blue{stroke:#1E4785}
+  </style>
+  <g transform="translate(50 6)">
+    <path d="M58 168V70a50 50 0 0 1 50-50h20" class="red"/>
+    <path d="M58 236v-100a50 50 0 0 1 50-50h20" class="white"/>
+    <path d="M58 236v-30a50 50 0 0 1 50-50h20" class="blue"/>
+    <circle cx="142" cy="20" r="18" class="red"/>
+    <circle cx="142" cy="88" r="18" class="white"/>
+    <circle cx="142" cy="156" r="18" class="blue"/>
+    <circle cx="58" cy="250" r="18" class="blue"/>
+  </g>
+</svg>

app/assets/scss/styles.scss

@@ -0,0 +1 @@
+// Nothing here. For now.

app/components/LoginForm.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Frown } from "lucide-vue-next";
+
+const authStore = useAuthStore();
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+const email = ref("");
+const password = ref("");
+
+const doLogin = async () => {
+  await authStore.signIn(email.value, password.value);
+};
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-6', props.class)">
+    <Card>
+      <CardHeader class="text-center">
+        <CardTitle class="text-xl">Login</CardTitle>
+        <CardDescription>Enter your email below to login</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form autocomplete="off" @submit.prevent="doLogin">
+          <FieldGroup>
+            <Field>
+              <FieldLabel for="email">Email</FieldLabel>
+              <Input id="email" v-model="email" type="email" placeholder="m@example.com" required />
+            </Field>
+            <Field>
+              <FieldLabel for="password">Password</FieldLabel>
+              <Input id="password" v-model="password" type="password" required />
+            </Field>
+            <Field>
+              <Button type="submit">Login</Button>
+              <FieldDescription class="text-center">
+                Don't have an account?
+                <NuxtLink to="/auth/create-account">
+                  <Button variant="link">Create account</Button>
+                </NuxtLink>
+              </FieldDescription>
+            </Field>
+            <Field v-if="authStore.lastError" variant="error">
+              <FieldDescription class="text-destructive flex items-center gap-2">
+                <Frown /> {{ authStore.lastError }}
+              </FieldDescription>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+    <FieldDescription class="px-6 text-center">
+      <NuxtLink to="/"><Button variant="link">Terms of Service</Button></NuxtLink>
+      <NuxtLink to="/"><Button variant="link">Privacy Policy</Button></NuxtLink>
+    </FieldDescription>
+  </div>
+</template>

app/components/SignupForm.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+
+import { authClient } from "~~/shared/utils/auth-client";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+const name = ref("");
+const email = ref("");
+const password = ref("");
+const confirmPassword = ref("");
+
+const createAccount = async () => {
+  await authClient.signUp.email({
+    name: name.value,
+    email: email.value,
+    password: password.value,
+    // callbackURL: "/",
+  });
+};
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-6', props.class)">
+    <ClientOnly>
+      <Card>
+        <CardHeader class="text-center">
+          <CardTitle class="text-xl">Create your account</CardTitle>
+          <CardDescription>Enter your email below to create your account</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form autocomplete="off" @submit.prevent="createAccount">
+            <FieldGroup>
+              <Field>
+                <FieldLabel for="name">Full Name</FieldLabel>
+                <Input id="name" v-model="name" type="text" placeholder="John Doe" required />
+              </Field>
+              <Field>
+                <FieldLabel for="email">Email</FieldLabel>
+                <Input id="email" v-model="email" type="email" placeholder="m@example.com" required />
+              </Field>
+              <Field>
+                <Field class="grid grid-cols-2 gap-4">
+                  <Field>
+                    <FieldLabel for="password">Password</FieldLabel>
+                    <Input id="password" v-model="password" type="password" required />
+                  </Field>
+                  <Field>
+                    <FieldLabel for="confirm-password">Confirm Password</FieldLabel>
+                    <Input id="confirm-password" v-model="confirmPassword" type="password" required />
+                  </Field>
+                </Field>
+                <FieldDescription>Must be at least 8 characters long.</FieldDescription>
+              </Field>
+              <Field>
+                <Button type="submit">Create Account</Button>
+                <FieldDescription class="text-center">
+                  Already have an account?
+                  <NuxtLink to="/auth/login">
+                    <Button variant="link">Log in</Button>
+                  </NuxtLink>
+                </FieldDescription>
+              </Field>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </ClientOnly>
+    <FieldDescription class="px-6 text-center">
+      <NuxtLink to="/"><Button variant="link">Terms of Service</Button></NuxtLink>
+      <NuxtLink to="/"><Button variant="link">Privacy Policy</Button></NuxtLink>
+    </FieldDescription>
+  </div>
+</template>

app/components/ui/avatar/Avatar.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { AvatarRoot } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <AvatarRoot data-slot="avatar" :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)">
+    <slot />
+  </AvatarRoot>
+</template>

app/components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AvatarFallback } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarFallback>
+</template>

app/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 data-slot="avatar-image" v-bind="props" class="aspect-square size-full">
+    <slot />
+  </AvatarImage>
+</template>

app/components/ui/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from "./Avatar.vue";
+export { default as AvatarFallback } from "./AvatarFallback.vue";
+export { default as AvatarImage } from "./AvatarImage.vue";

app/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" data-slot="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>

app/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { MoreHorizontal } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>

app/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
+    <slot />
+  </li>
+</template>

app/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
+});
+</script>
+
+<template>
+  <Primitive
+    data-slot="breadcrumb-link"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

app/components/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <ol
+    data-slot="breadcrumb-list"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>

app/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-page"
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('text-foreground font-normal', props.class)"
+  >
+    <slot />
+  </span>
+</template>

app/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { ChevronRight } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" :class="cn('[&>svg]:size-3.5', props.class)">
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>

app/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";

app/components/ui/button/Button.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from ".";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { 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 data-slot="button" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+    <slot />
+  </Primitive>
+</template>

app/components/ui/button/index.ts

@@ -0,0 +1,35 @@
+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 transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

app/components/ui/card/Card.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/card/CardAction.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>
+  <div data-slot="card-action" :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/card/CardContent.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>
+  <div data-slot="card-content" :class="cn('px-6', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/card/CardDescription.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>
+  <p data-slot="card-description" :class="cn('text-muted-foreground text-sm', props.class)">
+    <slot />
+  </p>
+</template>

app/components/ui/card/CardFooter.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>
+  <div data-slot="card-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/card/CardHeader.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="
+      cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/card/CardTitle.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>
+  <h3 data-slot="card-title" :class="cn('leading-none font-semibold', props.class)">
+    <slot />
+  </h3>
+</template>

app/components/ui/card/index.ts

@@ -0,0 +1,7 @@
+export { default as Card } from "./Card.vue";
+export { default as CardAction } from "./CardAction.vue";
+export { default as CardContent } from "./CardContent.vue";
+export { default as CardDescription } from "./CardDescription.vue";
+export { default as CardFooter } from "./CardFooter.vue";
+export { default as CardHeader } from "./CardHeader.vue";
+export { default as CardTitle } from "./CardTitle.vue";

app/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="slotProps" data-slot="collapsible" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </CollapsibleRoot>
+</template>

app/components/ui/collapsible/CollapsibleContent.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleContentProps } from "reka-ui";
+import { CollapsibleContent } from "reka-ui";
+
+const props = defineProps<CollapsibleContentProps>();
+</script>
+
+<template>
+  <CollapsibleContent data-slot="collapsible-content" v-bind="props">
+    <slot />
+  </CollapsibleContent>
+</template>

app/components/ui/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from "reka-ui";
+import { CollapsibleTrigger } from "reka-ui";
+
+const props = defineProps<CollapsibleTriggerProps>();
+</script>
+
+<template>
+  <CollapsibleTrigger data-slot="collapsible-trigger" v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>

app/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";

app/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui";
+import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRoot v-slot="slotProps" data-slot="dropdown-menu" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DropdownMenuRoot>
+</template>

app/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Check } from "lucide-vue-next";
+import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class
+      )
+    "
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

app/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
+});
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground 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 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

app/components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from "reka-ui";
+import { DropdownMenuGroup } from "reka-ui";
+
+const props = defineProps<DropdownMenuGroupProps>();
+</script>
+
+<template>
+  <DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>

app/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuItem, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(
+  defineProps<
+    DropdownMenuItemProps & {
+      class?: HTMLAttributes["class"];
+      inset?: boolean;
+      variant?: "default" | "destructive";
+    }
+  >(),
+  {
+    variant: "default",
+  }
+);
+
+const delegatedProps = reactiveOmit(props, "inset", "variant", "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

app/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuLabel, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }>();
+
+const delegatedProps = reactiveOmit(props, "class", "inset");
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

app/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui";
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioGroup data-slot="dropdown-menu-radio-group" v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Circle } from "lucide-vue-next";
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>();
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class
+      )
+    "
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Circle class="size-2 fill-current" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

app/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuSeparator } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  DropdownMenuSeparatorProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+  />
+</template>

app/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 data-slot="dropdown-menu-shortcut" :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
+    <slot />
+  </span>
+</template>

app/components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui";
+import { DropdownMenuSub, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSub v-slot="slotProps" data-slot="dropdown-menu-sub" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DropdownMenuSub>
+</template>

app/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuSubContent, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

app/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronRight } from "lucide-vue-next";
+import { DropdownMenuSubTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"]; inset?: boolean }>();
+
+const delegatedProps = reactiveOmit(props, "class", "inset");
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+        props.class
+      )
+    "
+  >
+    <slot />
+    <ChevronRight class="ml-auto size-4" />
+  </DropdownMenuSubTrigger>
+</template>

app/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from "reka-ui";
+import { DropdownMenuTrigger, useForwardProps } from "reka-ui";
+
+const props = defineProps<DropdownMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

app/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";

app/components/ui/field/Field.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import type { FieldVariants } from ".";
+import { cn } from "@/lib/utils";
+import { fieldVariants } from ".";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+  orientation?: FieldVariants["orientation"];
+}>();
+</script>
+
+<template>
+  <div role="group" data-slot="field" :data-orientation="orientation" :class="cn(fieldVariants({ orientation }), props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/field/FieldContent.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>
+  <div data-slot="field-content" :class="cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/field/FieldDescription.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <p
+    data-slot="field-description"
+    :class="
+      cn(
+        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </p>
+</template>

app/components/ui/field/FieldError.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+  errors?: Array<string | { message: string | undefined } | undefined>;
+}>();
+
+const content = computed(() => {
+  if (!props.errors || props.errors.length === 0) return null;
+
+  const uniqueErrors = [
+    ...new Map(
+      props.errors.filter(Boolean).map((error) => {
+        const message = typeof error === "string" ? error : error?.message;
+        return [message, error];
+      })
+    ).values(),
+  ];
+
+  if (uniqueErrors.length === 1 && uniqueErrors[0]) {
+    return typeof uniqueErrors[0] === "string" ? uniqueErrors[0] : uniqueErrors[0].message;
+  }
+
+  return uniqueErrors.map((error) => (typeof error === "string" ? error : error?.message));
+});
+</script>
+
+<template>
+  <div
+    v-if="$slots.default || content"
+    role="alert"
+    data-slot="field-error"
+    :class="cn('text-destructive text-sm font-normal', props.class)"
+  >
+    <slot v-if="$slots.default" />
+
+    <template v-else-if="typeof content === 'string'">
+      {{ content }}
+    </template>
+
+    <ul v-else-if="Array.isArray(content)" class="ml-4 flex list-disc flex-col gap-1">
+      <li v-for="(error, index) in content" :key="index">
+        {{ error }}
+      </li>
+    </ul>
+  </div>
+</template>

app/components/ui/field/FieldGroup.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="field-group"
+    :class="
+      cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/field/FieldLabel.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <Label
+    data-slot="field-label"
+    :class="
+      cn(
+        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

app/components/ui/field/FieldLegend.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"];
+  variant?: "legend" | "label";
+}>();
+</script>
+
+<template>
+  <legend
+    data-slot="field-legend"
+    :data-variant="variant"
+    :class="cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', props.class)"
+  >
+    <slot />
+  </legend>
+</template>

app/components/ui/field/FieldSeparator.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="field-separator"
+    :data-content="!!$slots.default"
+    :class="cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', props.class)"
+  >
+    <Separator class="absolute inset-0 top-1/2" />
+    <span
+      v-if="$slots.default"
+      class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+      data-slot="field-separator-content"
+    >
+      <slot />
+    </span>
+  </div>
+</template>

app/components/ui/field/FieldSet.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>
+  <fieldset
+    data-slot="field-set"
+    :class="
+      cn('flex flex-col gap-6', 'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', props.class)
+    "
+  >
+    <slot />
+  </fieldset>
+</template>

app/components/ui/field/FieldTitle.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="field-label"
+    :class="
+      cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/field/index.ts

@@ -0,0 +1,36 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+  variants: {
+    orientation: {
+      vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+      horizontal: [
+        "flex-row items-center",
+        "[&>[data-slot=field-label]]:flex-auto",
+        "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      ],
+      responsive: [
+        "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+        "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+        "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      ],
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+export type FieldVariants = VariantProps<typeof fieldVariants>;
+
+export { default as Field } from "./Field.vue";
+export { default as FieldContent } from "./FieldContent.vue";
+export { default as FieldDescription } from "./FieldDescription.vue";
+export { default as FieldError } from "./FieldError.vue";
+export { default as FieldGroup } from "./FieldGroup.vue";
+export { default as FieldLabel } from "./FieldLabel.vue";
+export { default as FieldLegend } from "./FieldLegend.vue";
+export { default as FieldSeparator } from "./FieldSeparator.vue";
+export { default as FieldSet } from "./FieldSet.vue";
+export { default as FieldTitle } from "./FieldTitle.vue";

app/components/ui/input/Input.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { useVModel } from "@vueuse/core";
+import { cn } from "@/lib/utils";
+
+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"
+    data-slot="input"
+    :class="
+      cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class
+      )
+    "
+  />
+</template>

app/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue";

app/components/ui/label/Label.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { LabelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Label } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

app/components/ui/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from "./Label.vue";

app/components/ui/separator/Separator.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Separator } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "horizontal",
+  decorative: true,
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class
+      )
+    "
+  />
+</template>

app/components/ui/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue";

app/components/ui/sheet/Sheet.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+import { DialogRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

app/components/ui/sheet/SheetClose.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui";
+import { DialogClose } from "reka-ui";
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <DialogClose data-slot="sheet-close" v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

app/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { X } from "lucide-vue-next";
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+import SheetOverlay from "./SheetOverlay.vue";
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"];
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: "right",
+});
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class", "side");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          props.class
+        )
+      "
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
+
+      <DialogClose
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+      >
+        <X class="size-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

app/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogDescription } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>

app/components/ui/sheet/SheetFooter.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <div data-slot="sheet-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/sheet/SheetHeader.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <div data-slot="sheet-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/sheet/SheetOverlay.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogOverlay } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    :class="
+      cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+        props.class
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

app/components/ui/sheet/SheetTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogTitle } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DialogTitle data-slot="sheet-title" :class="cn('text-foreground font-semibold', props.class)" v-bind="delegatedProps">
+    <slot />
+  </DialogTitle>
+</template>

app/components/ui/sheet/SheetTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui";
+import { DialogTrigger } from "reka-ui";
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger data-slot="sheet-trigger" v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

app/components/ui/sheet/index.ts

@@ -0,0 +1,8 @@
+export { default as Sheet } from "./Sheet.vue";
+export { default as SheetClose } from "./SheetClose.vue";
+export { default as SheetContent } from "./SheetContent.vue";
+export { default as SheetDescription } from "./SheetDescription.vue";
+export { default as SheetFooter } from "./SheetFooter.vue";
+export { default as SheetHeader } from "./SheetHeader.vue";
+export { default as SheetTitle } from "./SheetTitle.vue";
+export { default as SheetTrigger } from "./SheetTrigger.vue";

app/components/ui/sidebar/Sidebar.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { SidebarProps } from ".";
+import { cn } from "@/lib/utils";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import SheetDescription from "@/components/ui/sheet/SheetDescription.vue";
+import SheetHeader from "@/components/ui/sheet/SheetHeader.vue";
+import SheetTitle from "@/components/ui/sheet/SheetTitle.vue";
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  side: "left",
+  variant: "sidebar",
+  collapsible: "offcanvas",
+});
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+</script>
+
+<template>
+  <div
+    v-if="collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      :side="side"
+      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
+    >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="group peer text-sidebar-foreground hidden md:block"
+    data-slot="sidebar"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="
+        cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+        )
+      "
+    />
+    <div
+      :class="
+        cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          props.class
+        )
+      "
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

app/components/ui/sidebar/SidebarContent.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-content"
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/sidebar/SidebarFooter.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>
+  <div data-slot="sidebar-footer" data-sidebar="footer" :class="cn('flex flex-col gap-2 p-2', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/sidebar/SidebarGroup.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>
+  <div data-slot="sidebar-group" data-sidebar="group" :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/sidebar/SidebarGroupAction.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-action"
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>

app/components/ui/sidebar/SidebarGroupContent.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>
+  <div data-slot="sidebar-group-content" data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/sidebar/SidebarGroupLabel.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-group-label"
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="
+      cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>

app/components/ui/sidebar/SidebarHeader.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>
+  <div data-slot="sidebar-header" data-sidebar="header" :class="cn('flex flex-col gap-2 p-2', props.class)">
+    <slot />
+  </div>
+</template>

app/components/ui/sidebar/SidebarInput.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <Input data-slot="sidebar-input" data-sidebar="input" :class="cn('bg-background h-8 w-full shadow-none', props.class)">
+    <slot />
+  </Input>
+</template>

app/components/ui/sidebar/SidebarInset.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <main
+    data-slot="sidebar-inset"
+    :class="
+      cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </main>
+</template>

app/components/ui/sidebar/SidebarMenu.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>
+  <ul data-slot="sidebar-menu" data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
+    <slot />
+  </ul>
+</template>

app/components/ui/sidebar/SidebarMenuAction.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      showOnHover?: boolean;
+      class?: HTMLAttributes["class"];
+    }
+  >(),
+  {
+    as: "button",
+  }
+);
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-action"
+    data-sidebar="menu-action"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        props.class
+      )
+    "
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>

app/components/ui/sidebar/SidebarMenuBadge.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-menu-badge"
+    data-sidebar="menu-badge"
+    :class="
+      cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/sidebar/SidebarMenuButton.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Component } from "vue";
+import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue";
+import { useSidebar } from "./utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<
+    SidebarMenuButtonProps & {
+      tooltip?: string | Component;
+    }
+  >(),
+  {
+    as: "button",
+    variant: "default",
+    size: "default",
+  }
+);
+
+const { isMobile, state } = useSidebar();
+
+const delegatedProps = reactiveOmit(props, "tooltip");
+</script>
+
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>

app/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { SidebarMenuButtonVariants } from ".";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { sidebarMenuButtonVariants } from ".";
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  variant?: SidebarMenuButtonVariants["variant"];
+  size?: SidebarMenuButtonVariants["size"];
+  isActive?: boolean;
+  class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+  as: "button",
+  variant: "default",
+  size: "default",
+});
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-button"
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>

app/components/ui/sidebar/SidebarMenuItem.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>
+  <li data-slot="sidebar-menu-item" data-sidebar="menu-item" :class="cn('group/menu-item relative', props.class)">
+    <slot />
+  </li>
+</template>

app/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const props = defineProps<{
+  showIcon?: boolean;
+  class?: HTMLAttributes["class"];
+}>();
+
+const width = computed(() => {
+  return `${Math.floor(Math.random() * 40) + 50}%`;
+});
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
+  >
+    <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+
+    <Skeleton
+      class="h-4 max-w-(--skeleton-width) flex-1"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }"
+    />
+  </div>
+</template>

app/components/ui/sidebar/SidebarMenuSub.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-badge"
+    :class="
+      cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ul>
+</template>

app/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { Primitive } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(
+  defineProps<
+    PrimitiveProps & {
+      size?: "sm" | "md";
+      isActive?: boolean;
+      class?: HTMLAttributes["class"];
+    }
+  >(),
+  {
+    as: "a",
+    size: "md",
+  }
+);
+</script>
+
+<template>
+  <Primitive
+    data-slot="sidebar-menu-sub-button"
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="
+      cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Primitive>
+</template>

app/components/ui/sidebar/SidebarMenuSubItem.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>
+  <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" :class="cn('group/menu-sub-item relative', props.class)">
+    <slot />
+  </li>
+</template>

app/components/ui/sidebar/SidebarProvider.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { HTMLAttributes, Ref } from "vue";
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core";
+import { TooltipProvider } from "reka-ui";
+import { computed, ref } from "vue";
+import { cn } from "@/lib/utils";
+import {
+  provideSidebarContext,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from "./utils";
+
+const props = withDefaults(
+  defineProps<{
+    defaultOpen?: boolean;
+    open?: boolean;
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
+    open: undefined,
+  }
+);
+
+const emits = defineEmits<{
+  "update:open": [open: boolean];
+}>();
+
+const isMobile = useMediaQuery("(max-width: 768px)");
+const openMobile = ref(false);
+
+const open = useVModel(props, "open", emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>;
+
+function setOpen(value: boolean) {
+  open.value = value; // emits('update:open', value)
+
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value;
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);
+}
+
+useEventListener("keydown", (event: KeyboardEvent) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault();
+    toggleSidebar();
+  }
+});
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => (open.value ? "expanded" : "collapsed"));
+
+provideSidebarContext({
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+});
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div
+      data-slot="sidebar-wrapper"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>

app/components/ui/sidebar/SidebarRail.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { useSidebar } from "./utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+  <button
+    data-sidebar="rail"
+    data-slot="sidebar-rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="
+      cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        props.class
+      )
+    "
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>

app/components/ui/sidebar/SidebarSeparator.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <Separator data-slot="sidebar-separator" data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
+    <slot />
+  </Separator>
+</template>

app/components/ui/sidebar/SidebarTrigger.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { PanelLeft } from "lucide-vue-next";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useSidebar } from "./utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+  <Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('h-7 w-7', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>

app/components/ui/sidebar/index.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "vue";
+import { cva } from "class-variance-authority";
+
+export interface SidebarProps {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+  class?: HTMLAttributes["class"];
+}
+
+export { default as Sidebar } from "./Sidebar.vue";
+export { default as SidebarContent } from "./SidebarContent.vue";
+export { default as SidebarFooter } from "./SidebarFooter.vue";
+export { default as SidebarGroup } from "./SidebarGroup.vue";
+export { default as SidebarGroupAction } from "./SidebarGroupAction.vue";
+export { default as SidebarGroupContent } from "./SidebarGroupContent.vue";
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue";
+export { default as SidebarHeader } from "./SidebarHeader.vue";
+export { default as SidebarInput } from "./SidebarInput.vue";
+export { default as SidebarInset } from "./SidebarInset.vue";
+export { default as SidebarMenu } from "./SidebarMenu.vue";
+export { default as SidebarMenuAction } from "./SidebarMenuAction.vue";
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue";
+export { default as SidebarMenuButton } from "./SidebarMenuButton.vue";
+export { default as SidebarMenuItem } from "./SidebarMenuItem.vue";
+export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue";
+export { default as SidebarMenuSub } from "./SidebarMenuSub.vue";
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue";
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue";
+export { default as SidebarProvider } from "./SidebarProvider.vue";
+export { default as SidebarRail } from "./SidebarRail.vue";
+export { default as SidebarSeparator } from "./SidebarSeparator.vue";
+export { default as SidebarTrigger } from "./SidebarTrigger.vue";
+
+export { useSidebar } from "./utils";
+
+export const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>;

app/components/ui/sidebar/utils.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from "vue";
+import { createContext } from "reka-ui";
+
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<"expanded" | "collapsed">;
+  open: Ref<boolean>;
+  setOpen: (value: boolean) => void;
+  isMobile: Ref<boolean>;
+  openMobile: Ref<boolean>;
+  setOpenMobile: (value: boolean) => void;
+  toggleSidebar: () => void;
+}>("Sidebar");