init

Initial mock up of the app

src/components/ui/accordion/Accordion.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { AccordionRoot, useEmitAsProps } from "radix-vue";
+
+const props = defineProps({
+  type: { type: String, required: true },
+  modelValue: { type: [String, Array], required: false },
+  defaultValue: { type: [String, Array], required: false },
+  collapsible: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  dir: { type: String, required: false },
+  orientation: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+const emits = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
+    <slot />
+  </AccordionRoot>
+</template>

src/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { AccordionContent } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="props"
+    :class="
+      cn(
+        'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+        props.class
+      )
+    "
+  >
+    <div class="pb-4 pt-0">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

src/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { AccordionItem } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  value: { type: String, required: true },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <AccordionItem v-bind="props" :class="cn('border-b', props.class ?? '')">
+    <slot />
+  </AccordionItem>
+</template>

src/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { AccordionHeader, AccordionTrigger } from "radix-vue";
+import { ChevronDownIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <AccordionHeader class="flex" as="div">
+    <AccordionTrigger
+      v-bind="props"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class
+        )
+      "
+    >
+      <slot />
+      <ChevronDownIcon
+        class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+      />
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

src/components/ui/accordion/index.js

@@ -0,0 +1,4 @@
+export { default as Accordion } from "./Accordion.vue";
+export { default as AccordionContent } from "./AccordionContent.vue";
+export { default as AccordionItem } from "./AccordionItem.vue";
+export { default as AccordionTrigger } from "./AccordionTrigger.vue";

src/components/ui/alert-dialog/AlertDialog.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { AlertDialogRoot, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+});
+const emits = defineEmits(["update:open"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>

src/components/ui/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { AlertDialogAction } from "radix-vue";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <AlertDialogAction
+    v-bind="props"
+    :class="cn(buttonVariants(), $attrs.class ?? '')"
+  >
+    <slot />
+  </AlertDialogAction>
+</template>

src/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { AlertDialogCancel } from "radix-vue";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="props"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'mt-2 sm:mt-0',
+        $attrs.class ?? ''
+      )
+    "
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>

src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,49 @@
+<script setup>
+import {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useEmitAsProps,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  trapFocus: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "dismiss",
+  "openAutoFocus",
+  "closeAutoFocus",
+]);
+
+const emitsAsProps = useEmitAsProps(emits);
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="{ ...props, ...emitsAsProps }"
+      :class="
+        cn(
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

src/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { AlertDialogDescription } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <AlertDialogDescription
+    :class="cn('text-muted-foreground text-sm', props.class)"
+    :as-child="props.asChild"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>

src/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { AlertDialogTitle } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <AlertDialogTitle
+    :as-child="props.asChild"
+    :class="cn('text-lg text-foreground font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>

src/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { AlertDialogTrigger } from "radix-vue";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>

src/components/ui/alert-dialog/index.js

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.vue";
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue";
+export { default as AlertDialogContent } from "./AlertDialogContent.vue";
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue";
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue";
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue";
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue";
+export { default as AlertDialogAction } from "./AlertDialogAction.vue";
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue";

src/components/ui/alert/Alert.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { alertVariants } from ".";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  variant: { type: null, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class ?? '')">
+    <slot />
+  </div>
+</template>

src/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: String,
+});
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/lib/utils";
+</script>
+
+<template>
+  <h5
+    :class="
+      cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')
+    "
+  >
+    <slot />
+  </h5>
+</template>

src/components/ui/alert/index.js

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+
+export { default as Alert } from "./Alert.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";
+
+export const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);

src/components/ui/badge/Badge.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { badgeVariants } from ".";
+import { cn } from "@/lib/utils";
+
+defineProps({
+  variant: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
+    <slot />
+  </div>
+</template>

src/components/ui/badge/index.js

@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority";
+
+export { default as Badge } from "./Badge.vue";
+
+export const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);

src/components/ui/button/Button.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { Primitive } from "radix-vue";
+import { buttonVariants } from ".";
+import { cn } from "@/lib/utils";
+
+defineProps({
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  as: { type: String, required: false, default: "button" },
+  asChild: { type: Boolean, required: false },
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
+  >
+    <slot />
+  </Primitive>
+</template>

src/components/ui/button/index.js

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority";
+
+export { default as Button } from "./Button.vue";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);

src/components/ui/card/Card.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div
+    :class="
+      cn('rounded-lg border bg-card text-card-foreground shadow', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/card/CardContent.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/card/CardDescription.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

src/components/ui/card/CardFooter.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/card/CardHeader.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/card/CardTitle.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <h3 :class="cn('font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </h3>
+</template>

src/components/ui/card/index.js

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

src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,42 @@
+<script setup>
+import {
+  CheckboxIndicator,
+  CheckboxRoot,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { CheckIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  defaultChecked: { type: Boolean, required: false },
+  checked: { type: [Boolean, String], required: false },
+  disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  value: { type: String, required: false },
+  id: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+const emits = defineEmits(["update:checked"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        $attrs.class ?? ''
+      )
+    "
+  >
+    <CheckboxIndicator
+      class="flex h-full w-full items-center justify-center text-current"
+    >
+      <CheckIcon class="h-4 w-4" />
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

src/components/ui/checkbox/index.js

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

src/components/ui/collapsible/Collapsible.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { CollapsibleRoot, useEmitAsProps } from "radix-vue";
+
+const props = defineProps({
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+const emits = defineEmits(["update:open"]);
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-slot="{ open }"
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+  >
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>

src/components/ui/collapsible/CollapsibleContent.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { CollapsibleContent } from "radix-vue";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <CollapsibleContent
+    v-bind="props"
+    class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>

src/components/ui/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { CollapsibleTrigger } from "radix-vue";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>

src/components/ui/collapsible/index.js

@@ -0,0 +1,3 @@
+export { default as Collapsible } from "./Collapsible.vue";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue";
+export { default as CollapsibleContent } from "./CollapsibleContent.vue";

src/components/ui/command/Command.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  searchTerm: { type: String, required: false },
+  multiple: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  dir: { type: String, required: false },
+  filterFunction: { type: Function, required: false },
+  displayValue: { type: Function, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+const emits = defineEmits([
+  "update:modelValue",
+  "update:open",
+  "update:searchTerm",
+]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :open="true"
+    :class="
+      cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-md text-popover-foreground',
+        $attrs.class ?? ''
+      )
+    "
+  >
+    <slot />
+  </ComboboxRoot>
+</template>

src/components/ui/command/CommandDialog.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { useEmitAsProps } from "radix-vue";
+import Command from "./Command.vue";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false },
+});
+const emits = defineEmits(["update:open"]);
+
+const emitsAsProps = useEmitAsProps(emits);
+</script>
+
+<template>
+  <Dialog v-bind="{ ...props, ...emitsAsProps }">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command
+        class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+      >
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>

src/components/ui/command/CommandEmpty.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { ComboboxEmpty } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <ComboboxEmpty
+    v-bind="props"
+    :class="cn('py-6 text-center text-sm', $attrs.class ?? '')"
+  >
+    <slot />
+  </ComboboxEmpty>
+</template>

src/components/ui/command/CommandGroup.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { ComboboxGroup, ComboboxLabel } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  heading: { type: String, required: false },
+});
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="props"
+    :class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
+  >
+    <ComboboxLabel
+      v-if="heading"
+      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    >
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>

src/components/ui/command/CommandInput.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { MagnifyingGlassIcon } from "@radix-icons/vue";
+import { ComboboxInput } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  type: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  autoFocus: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...props, ...$attrs }"
+      auto-focus
+      :class="
+        cn(
+          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          $attrs.class ?? ''
+        )
+      "
+    />
+  </div>
+</template>

src/components/ui/command/CommandItem.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { ComboboxItem, useEmitAsProps } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  value: { type: null, required: true },
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+const emits = defineEmits(["select"]);
+
+const emitsAsProps = useEmitAsProps(emits);
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="{ ...props, ...emitsAsProps }"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        $attrs.class ?? ''
+      )
+    "
+    @select.prevent
+  >
+    <slot />
+  </ComboboxItem>
+</template>

src/components/ui/command/CommandList.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { ComboboxContent, useForwardPropsEmits } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  position: { type: String, required: false },
+  bodyLock: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  side: { type: null, required: false },
+  sideOffset: { type: Number, required: false },
+  align: { type: null, required: false },
+  alignOffset: { type: Number, required: false },
+  avoidCollisions: { type: Boolean, required: false },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: { type: [Number, Object], required: false },
+  arrowPadding: { type: Number, required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  onPlaced: { type: Function, required: false },
+  prioritizePosition: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "dismiss",
+]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ComboboxContent
+    v-bind="forwarded"
+    :class="
+      cn('max-h-[500px] max-h-full overflow-y-auto overflow-x-hidden', $attrs.class ?? '')
+    "
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>

src/components/ui/command/CommandSeparator.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { ComboboxSeparator } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="props"
+    :class="cn('-mx-1 h-px bg-border', $attrs.class ?? '')"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>

src/components/ui/command/CommandShortcut.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+</script>
+
+<template>
+  <span
+    :class="
+      cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        $attrs.class ?? ''
+      )
+    "
+  >
+    <slot />
+  </span>
+</template>

src/components/ui/command/index.js

@@ -0,0 +1,9 @@
+export { default as Command } from "./Command.vue";
+export { default as CommandDialog } from "./CommandDialog.vue";
+export { default as CommandEmpty } from "./CommandEmpty.vue";
+export { default as CommandGroup } from "./CommandGroup.vue";
+export { default as CommandInput } from "./CommandInput.vue";
+export { default as CommandItem } from "./CommandItem.vue";
+export { default as CommandList } from "./CommandList.vue";
+export { default as CommandSeparator } from "./CommandSeparator.vue";
+export { default as CommandShortcut } from "./CommandShortcut.vue";

src/components/ui/context-menu/ContextMenu.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { ContextMenuRoot, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps({
+  dir: { type: String, required: false },
+  modal: { type: Boolean, required: false },
+});
+const emits = defineEmits(["update:open"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ContextMenuRoot v-bind="forwarded">
+    <slot />
+  </ContextMenuRoot>
+</template>

src/components/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -0,0 +1,40 @@
+<script setup>
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuItemIndicator,
+  useEmitAsProps,
+} from "radix-vue";
+import { CheckIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  checked: { type: [Boolean, String], required: false },
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+const emits = defineEmits(["select", "update:checked"]);
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    :class="[
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      ),
+    ]"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator
+        class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
+      >
+        <CheckIcon class="h-4 w-4" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>

src/components/ui/context-menu/ContextMenuContent.vue

@@ -0,0 +1,51 @@
+<script setup>
+import {
+  ContextMenuContent,
+  ContextMenuPortal,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  alignOffset: { type: Number, required: false },
+  avoidCollisions: { type: Boolean, required: false },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: { type: [Number, Object], required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "dismiss",
+  "entryFocus",
+  "openAutoFocus",
+  "closeAutoFocus",
+]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      :align-offset="props.alignOffset"
+      :class="[
+        cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class
+        ),
+      ]"
+      v-bind="forwarded"
+    >
+      <slot />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>

src/components/ui/context-menu/ContextMenuGroup.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { ContextMenuGroup } from "radix-vue";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <ContextMenuGroup v-bind="props">
+    <slot />
+  </ContextMenuGroup>
+</template>

src/components/ui/context-menu/ContextMenuItem.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { ContextMenuItem, useEmitAsProps } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+  inset: { type: Boolean, required: false },
+});
+const emits = defineEmits(["select"]);
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    :class="[
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        props.class
+      ),
+    ]"
+  >
+    <slot />
+  </ContextMenuItem>
+</template>

src/components/ui/context-menu/ContextMenuLabel.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { ContextMenuLabel } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+  inset: { type: Boolean, required: false },
+});
+</script>
+
+<template>
+  <ContextMenuLabel
+    v-bind="props"
+    :class="
+      cn(
+        'px-2 py-1.5 text-sm font-semibold text-foreground',
+        inset && 'pl-8',
+        props.class ?? ''
+      )
+    "
+  >
+    <slot />
+  </ContextMenuLabel>
+</template>

src/components/ui/context-menu/ContextMenuPortal.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { ContextMenuPortal } from "radix-vue";
+
+const props = defineProps({
+  to: { type: null, required: false },
+  disabled: { type: Boolean, required: false },
+  forceMount: { type: Boolean, required: false },
+});
+</script>
+
+<template>
+  <ContextMenuPortal v-bind="props">
+    <slot />
+  </ContextMenuPortal>
+</template>

src/components/ui/context-menu/ContextMenuRadioGroup.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { ContextMenuRadioGroup, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+const emits = defineEmits(["update:modelValue"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ContextMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </ContextMenuRadioGroup>
+</template>

src/components/ui/context-menu/ContextMenuRadioItem.vue

@@ -0,0 +1,40 @@
+<script setup>
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { DotFilledIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  value: { type: String, required: true },
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+const emits = defineEmits(["select"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    v-bind="forwarded"
+    :class="[
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      ),
+    ]"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <DotFilledIcon class="h-4 w-4 fill-current" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuRadioItem>
+</template>

src/components/ui/context-menu/ContextMenuSeparator.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { ContextMenuSeparator } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <ContextMenuSeparator
+    v-bind="props"
+    :class="cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')"
+  />
+</template>

src/components/ui/context-menu/ContextMenuShortcut.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { cn } from "@/lib/utils";
+</script>
+
+<template>
+  <span
+    :class="
+      cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        $attrs.class ?? ''
+      )
+    "
+  >
+    <slot />
+  </span>
+</template>

src/components/ui/context-menu/ContextMenuSub.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { ContextMenuSub, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+});
+const emits = defineEmits(["update:open"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ContextMenuSub v-bind="forwarded">
+    <slot />
+  </ContextMenuSub>
+</template>

src/components/ui/context-menu/ContextMenuSubContent.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { ContextMenuSubContent, useForwardPropsEmits } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  disableOutsideScroll: { type: Boolean, required: false },
+  trapFocus: { type: Boolean, required: false },
+  side: { type: null, required: false },
+  sideOffset: { type: Number, required: false },
+  align: { type: null, required: false },
+  alignOffset: { type: Number, required: false },
+  avoidCollisions: { type: Boolean, required: false },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: { type: [Number, Object], required: false },
+  arrowPadding: { type: Number, required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  prioritizePosition: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "dismiss",
+  "entryFocus",
+  "openAutoFocus",
+  "closeAutoFocus",
+]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ContextMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ContextMenuSubContent>
+</template>

src/components/ui/context-menu/ContextMenuSubTrigger.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { ContextMenuSubTrigger } from "radix-vue";
+import { ChevronRightIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+  inset: { type: Boolean, required: false },
+});
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="props"
+    :class="[
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        inset && 'pl-8',
+        props.class
+      ),
+    ]"
+  >
+    <slot />
+    <ChevronRightIcon class="ml-auto h-4 w-4" />
+  </ContextMenuSubTrigger>
+</template>

src/components/ui/context-menu/ContextMenuTrigger.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { ContextMenuTrigger } from "radix-vue";
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <ContextMenuTrigger v-bind="props">
+    <slot />
+  </ContextMenuTrigger>
+</template>

src/components/ui/context-menu/index.js

@@ -0,0 +1,14 @@
+export { default as ContextMenu } from "./ContextMenu.vue";
+export { default as ContextMenuTrigger } from "./ContextMenuTrigger.vue";
+export { default as ContextMenuContent } from "./ContextMenuContent.vue";
+export { default as ContextMenuGroup } from "./ContextMenuGroup.vue";
+export { default as ContextMenuRadioGroup } from "./ContextMenuRadioGroup.vue";
+export { default as ContextMenuItem } from "./ContextMenuItem.vue";
+export { default as ContextMenuCheckboxItem } from "./ContextMenuCheckboxItem.vue";
+export { default as ContextMenuRadioItem } from "./ContextMenuRadioItem.vue";
+export { default as ContextMenuShortcut } from "./ContextMenuShortcut.vue";
+export { default as ContextMenuSeparator } from "./ContextMenuSeparator.vue";
+export { default as ContextMenuLabel } from "./ContextMenuLabel.vue";
+export { default as ContextMenuSub } from "./ContextMenuSub.vue";
+export { default as ContextMenuSubTrigger } from "./ContextMenuSubTrigger.vue";
+export { default as ContextMenuSubContent } from "./ContextMenuSubContent.vue";

src/components/ui/dialog/Dialog.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { DialogRoot, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false },
+});
+const emits = defineEmits(["update:open"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

src/components/ui/dialog/DialogClose.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { DialogClose } from "radix-vue";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

src/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,57 @@
+<script setup>
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useEmitAsProps,
+} from "radix-vue";
+import { Cross2Icon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  trapFocus: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "dismiss",
+  "openAutoFocus",
+  "closeAutoFocus",
+]);
+
+const emitsAsProps = useEmitAsProps(emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="
+        cn(
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          props.class
+        )
+      "
+      v-bind="{ ...props, ...emitsAsProps }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+      >
+        <Cross2Icon class="w-4 h-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

src/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { DialogDescription } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="props"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

src/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { DialogTitle } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="props"
+    :class="
+      cn(
+        'text-lg text-foreground font-semibold leading-none tracking-tight',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>

src/components/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { DialogTrigger } from "radix-vue";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

src/components/ui/dialog/index.js

@@ -0,0 +1,8 @@
+export { default as Dialog } from "./Dialog.vue";
+export { default as DialogClose } from "./DialogClose.vue";
+export { default as DialogTrigger } from "./DialogTrigger.vue";
+export { default as DialogHeader } from "./DialogHeader.vue";
+export { default as DialogTitle } from "./DialogTitle.vue";
+export { default as DialogDescription } from "./DialogDescription.vue";
+export { default as DialogContent } from "./DialogContent.vue";
+export { default as DialogFooter } from "./DialogFooter.vue";

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

@@ -0,0 +1,19 @@
+<script setup>
+import { DropdownMenuRoot, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  dir: { type: String, required: false },
+  modal: { type: Boolean, required: false },
+});
+const emits = defineEmits(["update:open"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup>
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useEmitAsProps,
+} from "radix-vue";
+import { CheckIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  checked: { type: [Boolean, String], required: false },
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+const emits = defineEmits(["select", "update:checked"]);
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <CheckIcon class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup>
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  side: { type: null, required: false },
+  sideOffset: { type: Number, required: false, default: 4 },
+  align: { type: null, required: false },
+  alignOffset: { type: Number, required: false },
+  avoidCollisions: { type: Boolean, required: false },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: { type: [Number, Object], required: false },
+  arrowPadding: { type: Number, required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  prioritizePosition: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "dismiss",
+  "entryFocus",
+  "openAutoFocus",
+  "closeAutoFocus",
+]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      :class="[
+        cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class
+        ),
+      ]"
+      v-bind="forwarded"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup>
+import { DropdownMenuGroup } from "radix-vue";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup>
+import { DropdownMenuItem } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  inset: { type: Boolean, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="props"
+    :class="[
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        props.class
+      ),
+    ]"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup>
+import { DropdownMenuLabel } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  inset: { type: Boolean, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="props"
+    :class="
+      cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)
+    "
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup>
+import { DropdownMenuRadioGroup } from "radix-vue";
+
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <DropdownMenuRadioGroup
+    v-bind="props"
+    @update:model-value="emits('update:modelValue', $event)"
+  >
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

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

@@ -0,0 +1,39 @@
+<script setup>
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useEmitAsProps,
+} from "radix-vue";
+import { DotFilledIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  value: { type: String, required: true },
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+
+const emits = defineEmits(["select"]);
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    :class="
+      cn(
+        'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
+        props.class
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <DotFilledIcon class="h-4 w-4 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup>
+import { DropdownMenuSeparator } from "radix-vue";
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="props" class="-mx-1 my-1 h-px bg-muted" />
+</template>

src/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { cn } from "@/lib/utils";
+</script>
+
+<template>
+  <span
+    :class="
+      cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')
+    "
+  >
+    <slot />
+  </span>
+</template>

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

@@ -0,0 +1,17 @@
+<script setup>
+import { DropdownMenuSub, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+});
+const emits = defineEmits(["update:open"]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>

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

@@ -0,0 +1,52 @@
+<script setup>
+import { DropdownMenuSubContent, useForwardPropsEmits } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  disableOutsideScroll: { type: Boolean, required: false },
+  trapFocus: { type: Boolean, required: false },
+  side: { type: null, required: false },
+  sideOffset: { type: Number, required: false },
+  align: { type: null, required: false },
+  alignOffset: { type: Number, required: false },
+  avoidCollisions: { type: Boolean, required: false },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: { type: [Number, Object], required: false },
+  arrowPadding: { type: Number, required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  prioritizePosition: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+const emits = defineEmits([
+  "escapeKeyDown",
+  "pointerDownOutside",
+  "focusOutside",
+  "interactOutside",
+  "dismiss",
+  "entryFocus",
+  "openAutoFocus",
+  "closeAutoFocus",
+]);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        $attrs.class ?? ''
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup>
+import { DropdownMenuSubTrigger } from "radix-vue";
+import { ChevronRightIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="props"
+    :class="[
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        props.class
+      ),
+    ]"
+  >
+    <slot />
+    <ChevronRightIcon class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup>
+import { DropdownMenuTrigger } from "radix-vue";
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="props">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

src/components/ui/dropdown-menu/index.js

@@ -0,0 +1,16 @@
+export { DropdownMenuPortal } from "radix-vue";
+
+export { default as DropdownMenu } from "./DropdownMenu.vue";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue";
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue";
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue";
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue";
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue";
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue";
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue";

src/components/ui/form/FormControl.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { Slot } from "radix-vue";
+import { useFormField } from "./useFormField";
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :aria-describedby="
+      !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
+    "
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>

src/components/ui/form/FormDescription.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { useFormField } from "./useFormField";
+import { cn } from "@/lib/utils";
+
+const { formDescriptionId } = useFormField();
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn('text-[0.8rem] text-muted-foreground', $attrs.class ?? '')"
+  >
+    <slot />
+  </p>
+</template>

src/components/ui/form/FormItem.vue

@@ -0,0 +1,18 @@
+<script>
+export const FORM_ITEM_INJECTION_KEY = Symbol();
+</script>
+
+<script setup>
+import { provide } from "vue";
+import { useId } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const id = useId();
+provide(FORM_ITEM_INJECTION_KEY, id);
+</script>
+
+<template>
+  <div :class="cn('space-y-2', $attrs.class ?? '')">
+    <slot />
+  </div>
+</template>

src/components/ui/form/FormLabel.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { Label } from "radix-vue";
+import { useFormField } from "./useFormField";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  for: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+});
+
+const { error, formItemId } = useFormField();
+</script>
+
+<template>
+  <Label
+    :class="
+      cn(
+        'block text-sm tracking-tight font-medium text-foreground text-left',
+        error && 'text-destructive',
+        $attrs.class ?? ''
+      )
+    "
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>

src/components/ui/form/FormMessage.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { ErrorMessage } from "vee-validate";
+import { toValue } from "vue";
+import { useFormField } from "./useFormField";
+
+const { name, formMessageId } = useFormField();
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    as="p"
+    :name="toValue(name)"
+    class="text-[0.8rem] font-medium text-destructive"
+  />
+</template>

src/components/ui/form/index.js

@@ -0,0 +1,6 @@
+export { Form, Field as FormField } from "vee-validate";
+export { default as FormItem } from "./FormItem.vue";
+export { default as FormLabel } from "./FormLabel.vue";
+export { default as FormControl } from "./FormControl.vue";
+export { default as FormMessage } from "./FormMessage.vue";
+export { default as FormDescription } from "./FormDescription.vue";

src/components/ui/form/useFormField.js

@@ -0,0 +1,36 @@
+import {
+  FieldContextKey,
+  useFieldError,
+  useIsFieldDirty,
+  useIsFieldTouched,
+  useIsFieldValid,
+} from "vee-validate";
+import { inject } from "vue";
+import { FORM_ITEM_INJECTION_KEY } from "./FormItem.vue";
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey);
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
+
+  const fieldState = {
+    valid: useIsFieldValid(),
+    isDirty: useIsFieldDirty(),
+    isTouched: useIsFieldTouched(),
+    error: useFieldError(),
+  };
+
+  if (!fieldContext)
+    throw new Error("useFormField should be used within <FormField>");
+
+  const { name } = fieldContext;
+  const id = fieldItemContext;
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+}

src/components/ui/input/Input.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useVModel } from "@vueuse/core";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  defaultValue: { type: [String, Number], required: false },
+  modelValue: { type: [String, Number], required: false },
+  class: { type: null, required: false },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    :class="
+      cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class ?? ''
+      )
+    "
+  />
+</template>

src/components/ui/input/index.js

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

src/components/ui/label/Label.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { Label } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  for: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+</script>
+
+<template>
+  <Label
+    v-bind="props"
+    :class="
+      cn(
+        'block text-sm tracking-tight font-medium text-foreground text-left',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

src/components/ui/label/index.js

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

src/components/ui/menubar/Menubar.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { MenubarRoot } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  defaultValue: { type: String, required: false },
+  dir: { type: String, required: false },
+  loop: { type: Boolean, required: false },
+  class: { type: String, required: false },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <MenubarRoot
+    v-bind="props"
+    :class="
+      cn(
+        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
+        props.class
+      )
+    "
+    @update:model-value="emits('update:modelValue', $event)"
+  >
+    <slot />
+  </MenubarRoot>
+</template>

src/components/ui/menubar/MenubarCheckboxItem.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { MenubarCheckboxItem, MenubarItemIndicator } from "radix-vue";
+import { CheckIcon } from "@radix-icons/vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  checked: { type: [Boolean, String], required: false },
+  disabled: { type: Boolean, required: false },
+  textValue: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+
+const emit = defineEmits(["select", "update:checked"]);
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    v-bind="props"
+    :class="[
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      ),
+    ]"
+    @update:checked="emit('update:checked', $event)"
+    @select="emit('select', $event)"
+  >
+    <MenubarItemIndicator
+      class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
+    >
+      <CheckIcon class="w-4 h-4" />
+    </MenubarItemIndicator>
+    <slot />
+  </MenubarCheckboxItem>
+</template>

src/components/ui/menubar/MenubarContent.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { MenubarContent, MenubarPortal, useForwardProps } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  side: { type: null, required: false },
+  sideOffset: { type: Number, required: false, default: 8 },
+  align: { type: null, required: false, default: "start" },
+  alignOffset: { type: Number, required: false, default: -4 },
+  avoidCollisions: { type: Boolean, required: false },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: { type: [Number, Object], required: false },
+  arrowPadding: { type: Number, required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false },
+  updatePositionStrategy: { type: String, required: false },
+  prioritizePosition: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: String, required: false },
+});
+const forwarded = useForwardProps(props);
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>