Initial website implementation with Hero section

app/app.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const defaultOpen = useCookie<boolean>("sidebar_state");
+</script>
+
+<template>
+    <SidebarProvider :defaultOpen="defaultOpen">
+        <NuxtLayout>
+            <NuxtPage />
+        </NuxtLayout>
+    </SidebarProvider>
+</template>

app/assets/css/tailwind.css

@@ -0,0 +1,120 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.216 0.006 56.043);
+  --primary-foreground: oklch(0.985 0.001 106.423);
+  --secondary: oklch(0.97 0.001 106.424);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.216 0.006 56.043);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+}
+
+.dark {
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.923 0.003 48.717);
+  --primary-foreground: oklch(0.216 0.006 56.043);
+  --secondary: oklch(0.268 0.007 34.298);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/components/ui/button-group/ButtonGroup.vue

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

app/components/ui/button-group/ButtonGroupSeparator.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+import { Separator } from '@/components/ui/separator'
+
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "vertical",
+})
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    data-slot="button-group-separator"
+    v-bind="delegatedProps"
+    :orientation="props.orientation"
+    :class="cn(
+      'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
+      props.class,
+    )"
+  />
+</template>

app/components/ui/button-group/ButtonGroupText.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonGroupVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+interface Props extends PrimitiveProps {
+  class?: HTMLAttributes["class"]
+  orientation?: ButtonGroupVariants["orientation"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "div",
+})
+</script>
+
+<template>
+  <Primitive
+    role="group"
+    data-slot="button-group"
+    :data-orientation="props.orientation"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

app/components/ui/button-group/index.ts

@@ -0,0 +1,25 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as ButtonGroup } from "./ButtonGroup.vue"
+export { default as ButtonGroupSeparator } from "./ButtonGroupSeparator.vue"
+export { default as ButtonGroupText } from "./ButtonGroupText.vue"
+
+export const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+)
+
+export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>

app/components/ui/button/Button.vue

@@ -0,0 +1,29 @@
+<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,38 @@
+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/frame/Frame.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { FrameVariants } from "."
+import { cn } from "@/lib/utils"
+import { frameVariants } from "."
+
+
+interface Props extends PrimitiveProps {
+    border?: FrameVariants["border"]
+    borderRadius?: FrameVariants["borderRadius"]
+    borderPlacement?: FrameVariants["borderPlacement"]
+    background?: FrameVariants["background"]
+    padding?: FrameVariants["padding"]
+    margin?: FrameVariants["margin"]
+    class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "frame",
+})
+</script>
+
+<template>
+    <div :as="as" :as-child="asChild"
+        :class="cn(frameVariants({ border, borderRadius, borderPlacement, background, padding, margin }), props.class)">
+        <slot />
+    </div>
+</template>

app/components/ui/frame/index.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Frame } from "./Frame.vue"
+
+export const frameVariants = cva(
+    "border-solid",
+    {
+        variants: {
+            border: {
+                default: "border-border",
+                input: "border-input",
+            },
+            borderRadius: {
+                default: "rounded-md",
+                round: "rounded-2xl",
+                circle: "rounded-full",
+                none: "",
+            },
+            borderPlacement: {
+                default: "border-2",
+                bottom: "border-b-2",
+                left: "border-l-2",
+                right: "border-r-2",
+                top: "border-t-2",
+            },
+            background: {
+                default: "bg-background",
+                muted: "bg-muted",
+                primary: "bg-primary"
+            },
+            padding: {
+                default: "p-8",
+                loose: "p-12",
+                dense: "p-3",
+                none: "",
+            },
+            margin: {
+                default: "m-12",
+                dense: "m-8",
+                none: "",
+            },
+        },
+        defaultVariants: {
+            border: "default",
+            borderRadius: "default",
+            borderPlacement: "default",
+            background: "default",
+            padding: "default",
+            margin: "default",
+        },
+    },
+)
+
+export type FrameVariants = VariantProps<typeof frameVariants>
+
+
+
+
+

app/components/ui/input-group/InputGroup.vue

@@ -0,0 +1,35 @@
+<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="input-group"
+    role="group"
+    :class="cn(
+      'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+      'h-9 min-w-0 has-[>textarea]:h-auto',
+
+      // Variants based on alignment.
+      'has-[>[data-align=inline-start]]:[&>input]:pl-2',
+      'has-[>[data-align=inline-end]]:[&>input]:pr-2',
+      'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
+      'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+
+      // Focus state.
+      'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+
+      // Error state.
+      'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/input-group/InputGroupAddon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { InputGroupVariants } from "."
+import { cn } from "@/lib/utils"
+import { inputGroupAddonVariants } from "."
+
+const props = withDefaults(defineProps<{
+  align?: InputGroupVariants["align"]
+  class?: HTMLAttributes["class"]
+}>(), {
+  align: "inline-start",
+})
+
+function handleInputGroupAddonClick(e: MouseEvent) {
+  const currentTarget = e.currentTarget as HTMLElement | null
+  const target = e.target as HTMLElement | null
+  if (target && target.closest("button")) {
+    return
+  }
+  if (currentTarget && currentTarget?.parentElement) {
+    currentTarget.parentElement?.querySelector("input")?.focus()
+  }
+}
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="input-group-addon"
+    :data-align="props.align"
+    :class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
+    @click="handleInputGroupAddonClick"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/input-group/InputGroupButton.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { InputGroupButtonProps } from "."
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+import { inputGroupButtonVariants } from "."
+
+const props = withDefaults(defineProps<InputGroupButtonProps>(), {
+  size: "xs",
+  variant: "ghost",
+})
+</script>
+
+<template>
+  <Button
+    :data-size="props.size"
+    :variant="props.variant"
+    :class="cn(inputGroupButtonVariants({ size: props.size }), props.class)"
+  >
+    <slot />
+  </Button>
+</template>

app/components/ui/input-group/InputGroupInput.vue

@@ -0,0 +1,19 @@
+<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="input-group-control"
+    :class="cn(
+      'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+      props.class,
+    )"
+  />
+</template>

app/components/ui/input-group/InputGroupText.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>
+  <span
+    :class="cn(
+      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </span>
+</template>

app/components/ui/input-group/InputGroupTextarea.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Textarea } from '@/components/ui/textarea'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Textarea
+    data-slot="input-group-control"
+    :class="cn(
+      'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+      props.class,
+    )"
+  />
+</template>

app/components/ui/input-group/index.ts

@@ -0,0 +1,59 @@
+import type { VariantProps } from "class-variance-authority"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from '@/components/ui/button'
+import { cva } from "class-variance-authority"
+
+export { default as InputGroup } from "./InputGroup.vue"
+export { default as InputGroupAddon } from "./InputGroupAddon.vue"
+export { default as InputGroupButton } from "./InputGroupButton.vue"
+export { default as InputGroupInput } from "./InputGroupInput.vue"
+export { default as InputGroupText } from "./InputGroupText.vue"
+export { default as InputGroupTextarea } from "./InputGroupTextarea.vue"
+
+export const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+)
+
+export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>
+
+export const inputGroupButtonVariants = cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        "xs": "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        "sm": "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+)
+
+export type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>
+
+export interface InputGroupButtonProps {
+  variant?: ButtonVariants["variant"]
+  size?: InputGroupButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}

app/components/ui/input/Input.vue

@@ -0,0 +1,33 @@
+<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/internal/AppHeader.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next';
+</script>
+
+<template>
+    <div class="flex items-center justify-center w-full p-4 gap-8 border-b">
+        <div>
+            <NuxtImg src="logo.jpg" width="48" height="48" />
+        </div>
+        <div>
+            <Button variant="ghost">
+                Search
+            </Button>
+            <Button variant="ghost">
+                Social
+            </Button>
+            <Button variant="ghost">
+                Forum
+            </Button>
+        </div>
+        <div>
+            <InputGroup>
+                <InputGroupInput placeholder="Search..." />
+                <InputGroupAddon>
+                    <Search />
+                </InputGroupAddon>
+            </InputGroup>
+        </div>
+    </div>
+</template>

app/components/ui/outline/Outline.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { FrameVariants } from "../frame"
+import { cn } from "@/lib/utils"
+import Frame from "../frame/Frame.vue"
+
+
+interface Props extends PrimitiveProps {
+    side?: FrameVariants["borderPlacement"]
+    class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "container",
+})
+</script>
+
+<template>
+    <Frame :as="as" :as-child="asChild" :class="cn(props.class)" margin="none" borderRadius="none"
+        :borderPlacement="side">
+        <slot />
+    </Frame>
+</template>

app/components/ui/outline/index.ts

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

app/components/ui/separator/Separator.vue

@@ -0,0 +1,29 @@
+<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,19 @@
+<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,15 @@
+<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,62 @@
+<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,16 @@
+<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,15 @@
+<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,21 @@
+<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,21 @@
+<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,15 @@
+<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,96 @@
+<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,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-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,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-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,27 @@
+<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,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-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,25 @@
+<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,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-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,22 @@
+<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,21 @@
+<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,18 @@
+<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,35 @@
+<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,26 @@
+<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,48 @@
+<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,18 @@
+<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,35 @@
+<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,22 @@
+<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,36 @@
+<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,18 @@
+<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,82 @@
+<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,33 @@
+<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,19 @@
+<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 = "24rem"
+export const SIDEBAR_WIDTH_MOBILE = "18rem"
+export const SIDEBAR_WIDTH_ICON = "4rem"
+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")

app/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+interface SkeletonProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
+  />
+</template>

app/components/ui/skeleton/index.ts

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

app/components/ui/sonner/Sonner.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { ToasterProps } from "vue-sonner"
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-vue-next"
+import { Toaster as Sonner } from "vue-sonner"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    :class="cn('toaster group', props.class)"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      '--border-radius': 'var(--radius)',
+    }"
+    v-bind="props"
+  >
+    <template #success-icon>
+      <CircleCheckIcon class="size-4" />
+    </template>
+    <template #info-icon>
+      <InfoIcon class="size-4" />
+    </template>
+    <template #warning-icon>
+      <TriangleAlertIcon class="size-4" />
+    </template>
+    <template #error-icon>
+      <OctagonXIcon class="size-4" />
+    </template>
+    <template #loading-icon>
+      <div>
+        <Loader2Icon class="size-4 animate-spin" />
+      </div>
+    </template>
+    <template #close-icon>
+      <XIcon class="size-4" />
+    </template>
+  </Sonner>
+</template>

app/components/ui/sonner/index.ts

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

app/components/ui/textarea/Textarea.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    data-slot="textarea"
+    :class="cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', props.class)"
+  />
+</template>

app/components/ui/textarea/index.ts

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

app/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui"
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot
+    v-slot="slotProps"
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </TooltipRoot>
+</template>

app/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

app/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from "reka-ui"
+import { TooltipProvider } from "reka-ui"
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

app/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from "reka-ui"
+import { TooltipTrigger } from "reka-ui"
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>

app/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"

app/layouts/default.vue

@@ -0,0 +1,21 @@
+<template>
+    <ClientOnly>
+        <Sonner />
+    </ClientOnly>
+    <div class="flex flex-1">
+        <div class="w-full">
+            <header>
+                <AppHeader />
+            </header>
+            <main class="h-screen">
+                <slot />
+            </main>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import 'vue-sonner/style.css'
+import Sonner from '@/components/ui/sonner/Sonner.vue';
+import AppHeader from '@/components/ui/internal/AppHeader.vue';
+</script>

app/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx"
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

app/pages/index.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="space-y-16">
+        <div class="flex flex-col items-center gap-4 mt-32">
+            <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">
+                The next-generation anime platform
+            </h1>
+            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight text-center max-w-2/5">
+                Track, share, and discover your favorite anime and manga with Anyame
+            </h3>
+        </div>
+        <div class="flex items-center justify-center">
+            <div class="grid grid-cols-2 gap-16">
+                <div class="flex max-w-96 gap-8">
+                    <NuxtImg src="discover-icon.svg" width="96" height="96" />
+                    <div>
+                        <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
+                            Discover your obsessions
+                        </h4>
+                        <p class="font-semibold text-sm text-muted-foreground">
+                            What are your highest rated genres or most watched voice actors?
+                            Follow your watching habits over time with in-depth statistics.
+                        </p>
+                    </div>
+                </div>
+                <div class="flex max-w-96 gap-8">
+                    <NuxtImg src="anywhere-icon.svg" width="96" height="96" />
+                    <div>
+                        <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
+                            Bring Anyame anywhere
+                        </h4>
+                        <p class="font-semibold text-sm text-muted-foreground">
+                            Keep track of your progress on-the-go with one of many Anyame apps across iOS, Android,
+                            macOS, and Windows.
+                        </p>
+                    </div>
+                </div>
+                <div class="flex max-w-96 gap-8">
+                    <NuxtImg src="conversation-icon.svg" width="96" height="96" />
+                    <div>
+                        <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
+                            Join the conversation
+                        </h4>
+                        <p class="font-semibold text-sm text-muted-foreground">
+                            Share your thoughts with our thriving community, make friends, socialize, and receive
+                            recommendations.
+                        </p>
+                    </div>
+                </div>
+                <div class="flex max-w-96 gap-8">
+                    <NuxtImg src="tweak-icon.svg" width="96" height="96" />
+                    <div>
+                        <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
+                            Tweak it to your liking
+                        </h4>
+                        <p class="font-semibold text-sm text-muted-foreground">
+                            Customize your scoring system, title format, color scheme, and much more! Also, we have a
+                            dark mode.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

app/plugins/ssh-width.ts

@@ -0,0 +1,5 @@
+import { provideSSRWidth } from '@vueuse/core'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    provideSSRWidth(1024, nuxtApp.vueApp)
+})