@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.0

package/src/ui/drawer-header.vue

@@ -0,0 +1,22 @@
+<script setup>
+// DrawerHeader.vue - Vue migration of DrawerHeader from drawer.tsx
+import { computed } from 'vue';
+
+defineProps({
+  class: String,
+});
+
+const headerClass = computed(() => {
+  return ['flex flex-col gap-1.5 p-4', $props.class].join(' ');
+});
+</script>
+
+<template>
+  <div :class="headerClass" data-slot="drawer-header">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* Add any necessary styles for drawer header here */
+</style>

package/src/ui/drawer-title.vue

@@ -0,0 +1,23 @@
+<script setup>
+// DrawerTitle.vue - Vue migration of DrawerTitle from drawer.tsx
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
+import { computed } from 'vue';
+
+defineProps({
+  class: String,
+});
+
+const titleClass = computed(() => {
+  return ['text-foreground font-semibold', $props.class].join(' ');
+});
+</script>
+
+<template>
+  <VaulDrawerTitle v-bind="$attrs" :class="titleClass" data-slot="drawer-title">
+    <slot />
+  </VaulDrawerTitle>
+</template>
+
+<style scoped>
+/* Add any necessary styles for drawer title here */
+</style>

package/src/ui/drawer-trigger.vue

@@ -0,0 +1,23 @@
+<script setup>
+// DrawerTrigger.vue - Vue migration of DrawerTrigger from drawer.tsx
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue';
+// Replace with the correct vaul-vue trigger import if needed
+
+defineProps({
+  asChild: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <slot v-if="asChild" />
+  <DrawerTrigger v-bind="$attrs" v-else data-slot="drawer-trigger">
+    <slot />
+  </DrawerTrigger>
+</template>
+
+<style scoped>
+/* Add any necessary styles for the trigger here */
+</style>

package/src/ui/drawer.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from 'vue';
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
+// VaulDrawer is a placeholder for the actual vaul-vue drawer primitive
+// Replace with the correct import if needed
+
+defineProps({
+  open: Boolean,
+  size: {
+    type: String,
+    default: 'md',
+  },
+  direction: {
+    type: String,
+    default: 'right',
+  },
+});
+</script>
+
+<template>
+  <DrawerRoot
+    v-bind="$attrs"
+    :open="open"
+    :size="size"
+    :direction="direction"
+    data-slot="drawer"
+  >
+    <slot />
+  </DrawerRoot>
+</template>
+
+<style scoped>
+/* Add any necessary styles for drawer variants here */
+</style>

package/src/ui/dropdown-menu-checkbox-item.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// Minimal stub for DropdownMenuCheckboxItem
+import { defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  checked: Boolean,
+  disabled: Boolean,
+  class: { type: String, default: '' },
+});
+const emit = defineEmits(['update:checked', 'change']);
+function onClick() {
+  if (!props.disabled) emit('update:checked', !props.checked);
+}
+</script>
+<template>
+  <div
+    :class="['flex items-center px-2 py-1.5 text-sm cursor-pointer select-none', props.class, { 'opacity-50 pointer-events-none': props.disabled }]"
+    @click="onClick"
+    role="menuitemcheckbox"
+    :aria-checked="props.checked"
+    tabindex="0"
+  >
+    <span class="mr-2 w-4 h-4 flex items-center justify-center">
+      <span v-if="props.checked" class="block w-3 h-3 bg-primary rounded"></span>
+    </span>
+    <slot />
+  </div>
+</template>

package/src/ui/dropdown-menu-content.vue

@@ -0,0 +1,23 @@
+
+<script setup lang="ts">
+import { DropdownMenuContent, DropdownMenuPortal } from '@/shadcn/dropdown-menu';
+import { cn } from './utils';
+import { computed } from 'vue';
+const props = defineProps({
+  class: { type: String, default: '' },
+  sideOffset: { type: Number, default: 4 },
+});
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      :sideOffset="props.sideOffset"
+      v-bind="$attrs"
+      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[--reka-dropdown-menu-content-available-height] min-w-[8rem] origin-[--reka-dropdown-menu-content-transform-origin] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

package/src/ui/dropdown-menu-group.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+</script>
+<template>
+  <div data-slot="dropdown-menu-group">
+    <slot />
+  </div>
+</template>

package/src/ui/dropdown-menu-item.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from './utils';
+defineProps({
+  class: { type: String, default: '' },
+  inset: { type: Boolean, default: false },
+  variant: { type: String, default: 'default' },
+});
+</script>
+<template>
+  <div
+    data-slot="dropdown-menu-item"
+    :data-inset="inset"
+    :data-variant="variant"
+    :class="cn('focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm select-none', { 'pl-8': inset }, $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/dropdown-menu-label.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from './utils';
+defineProps({
+  class: { type: String, default: '' },
+  inset: { type: Boolean, default: false },
+});
+</script>
+<template>
+  <div
+    data-slot="dropdown-menu-label"
+    :data-inset="inset"
+    :class="cn('px-2 py-1.5 text-sm font-medium', { 'pl-8': inset }, $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/dropdown-menu-portal.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// Minimal stub for DropdownMenuPortal
+</script>
+<template>
+  <div data-slot="dropdown-menu-portal">
+    <slot />
+  </div>
+</template>

package/src/ui/dropdown-menu-radio-group.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ref, provide, watch, defineProps } from 'vue';
+const props = defineProps({
+  modelValue: String,
+});
+const value = ref(props.modelValue);
+provide('dropdownMenuRadioGroupValue', value);
+watch(() => props.modelValue, v => value.value = v);
+</script>
+<template>
+  <div role="radiogroup">
+    <slot />
+  </div>
+</template>

package/src/ui/dropdown-menu-radio-item.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { inject, defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  value: String,
+  disabled: Boolean,
+  class: { type: String, default: '' },
+});
+const emit = defineEmits(['update:modelValue']);
+const groupValue = inject('dropdownMenuRadioGroupValue', null);
+function onClick() {
+  if (!props.disabled && groupValue) {
+    groupValue.value = props.value;
+    emit('update:modelValue', props.value);
+  }
+}
+</script>
+<template>
+  <div
+    :class="['flex items-center px-2 py-1.5 text-sm cursor-pointer select-none', props.class, { 'opacity-50 pointer-events-none': props.disabled }]"
+    @click="onClick"
+    role="menuitemradio"
+    :aria-checked="groupValue && groupValue.value === props.value"
+    tabindex="0"
+  >
+    <span class="mr-2 w-4 h-4 flex items-center justify-center">
+      <span v-if="groupValue && groupValue.value === props.value" class="block w-3 h-3 bg-primary rounded-full"></span>
+    </span>
+    <slot />
+  </div>
+</template>

package/src/ui/dropdown-menu-separator.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from './utils';
+defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <div
+    data-slot="dropdown-menu-separator"
+    :class="cn('bg-border -mx-1 my-1 h-px', $attrs.class)"
+    v-bind="$attrs"
+  />
+</template>

package/src/ui/dropdown-menu-shortcut.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from './utils';
+defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <span
+    data-slot="dropdown-menu-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </span>
+</template>

package/src/ui/dropdown-menu-sub-content.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// Minimal stub for DropdownMenuSubContent
+</script>
+<template>
+  <div class="absolute left-full top-0 mt-0 ml-2 min-w-[8rem] bg-popover border rounded-md shadow-md z-50" data-slot="dropdown-menu-sub-content">
+    <slot />
+  </div>
+</template>

package/src/ui/dropdown-menu-sub-trigger.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// Minimal stub for DropdownMenuSubTrigger
+</script>
+<template>
+  <div class="flex items-center cursor-pointer select-none" data-slot="dropdown-menu-sub-trigger">
+    <slot />
+  </div>
+</template>

package/src/ui/dropdown-menu-sub.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// Minimal stub for DropdownMenuSub
+</script>
+<template>
+  <div class="relative" data-slot="dropdown-menu-sub">
+    <slot />
+  </div>
+</template>

package/src/ui/dropdown-menu-trigger.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger } from '@/shadcn/dropdown-menu';
+</script>
+<template>
+  <DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="$attrs">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

package/src/ui/dropdown-menu.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DropdownMenu } from '@/shadcn/dropdown-menu';
+// No props or logic needed for root DropdownMenu
+</script>
+<template>
+  <DropdownMenu data-slot="dropdown-menu">
+    <slot />
+  </DropdownMenu>
+</template>

package/src/ui/grouped-avatar.vue

@@ -0,0 +1,19 @@
+<template>
+  <Avatar :class="groupedClass" v-bind="$attrs">
+    <slot />
+  </Avatar>
+</template>
+
+<script setup lang="ts">
+import Avatar from './avatar.vue';
+import { cn } from './utils';
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const groupedClass = cn('border-2 border-background', props.class);
+</script>

package/src/ui/icons/Accessibility.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <circle cx="12" cy="4" r="2" />
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0l-4 8m4-8l4 8" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/AlignLeft.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h10M4 14h16M4 18h10" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/ArrowDown.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down">
+    <path d="M12 5v14" />
+    <polyline points="19 12 12 19 5 12" />
+  </svg>
+</template>
+<script setup lang="ts"></script>

package/src/ui/icons/ArrowUp.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up">
+    <path d="M12 19V5" />
+    <polyline points="5 12 12 5 19 12" />
+  </svg>
+</template>
+<script setup lang="ts"></script>

package/src/ui/icons/ArrowUpDown.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-down">
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <polyline points="19 12 12 19 5 12" />
+    <polyline points="5 12 12 5 19 12" />
+  </svg>
+</template>
+<script setup lang="ts"></script>

package/src/ui/icons/BookOpen.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v15l9-2z" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Calendar.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <rect x="3" y="4" width="18" height="18" rx="2" />
+    <line x1="16" y1="2" x2="16" y2="6" stroke-width="2" stroke-linecap="round" />
+    <line x1="8" y1="2" x2="8" y2="6" stroke-width="2" stroke-linecap="round" />
+    <line x1="3" y1="10" x2="21" y2="10" stroke-width="2" stroke-linecap="round" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Check.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/ChevronRight.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Circle.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="8" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Copy.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <rect x="9" y="9" width="13" height="13" rx="2" />
+    <rect x="3" y="3" width="13" height="13" rx="2" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Dot.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="2" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Edit.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536M9 13l6-6m2 2l-6 6m-2 2h2v2h-2v-2z" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/FileText.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <rect x="4" y="4" width="16" height="16" rx="2" />
+    <line x1="8" y1="8" x2="16" y2="8" stroke-width="2" stroke-linecap="round" />
+    <line x1="8" y1="12" x2="16" y2="12" stroke-width="2" stroke-linecap="round" />
+    <line x1="8" y1="16" x2="16" y2="16" stroke-width="2" stroke-linecap="round" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Folder.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/FolderOpen.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13h18" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Hash.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 10h16M4 14h16M10 4l-2 16m8-16l-2 16" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Home.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l9-9 9 9M4 10v10a1 1 0 001 1h3m10-11v10a1 1 0 01-1 1h-3m-6 0h6" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Minus.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <line x1="5" y1="12" x2="19" y2="12" stroke-width="2" stroke-linecap="round" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/MoreHorizontal.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <circle cx="6" cy="12" r="2" />
+    <circle cx="12" cy="12" r="2" />
+    <circle cx="18" cy="12" r="2" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Settings.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <circle cx="12" cy="12" r="3" />
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06A1.65 1.65 0 0015 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.82-.33l-.06.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 00.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 0015 4.6a1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 15z" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Slash.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <line x1="4" y1="20" x2="20" y2="4" stroke-width="2" stroke-linecap="round" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Trash2.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6h18M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2m2 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/Type.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 18h16M9 6v12" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/icons/User.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <circle cx="12" cy="8" r="4" />
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 20v-2a4 4 0 014-4h0a4 4 0 014 4v2" />
+  </svg>
+</template>
+<script setup></script>

package/src/ui/input-otp.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, provide, defineAsyncComponent, useSlots } from 'vue';
+import { cn } from '@/lib/utils';
+// These would be your context keys (provide/inject)
+const InputOTPMaskContext = Symbol('InputOTPMaskContext');
+const FallbackInputOTPContext = Symbol('FallbackInputOTPContext');
+
+const props = defineProps({
+	class: String,
+	containerClass: String,
+	maxLength: { type: Number, required: true },
+	modelValue: { type: String, default: '' },
+	disabled: { type: Boolean, default: false },
+	masked: { type: Boolean, default: false },
+});
+const emit = defineEmits(['update:modelValue']);
+const slots = useSlots();
+
+const handleChange = (newValue: string) => {
+	if (newValue.length <= props.maxLength) {
+		emit('update:modelValue', newValue);
+	}
+};
+
+import { OTPInput } from "input-otp";
+
+const contextValue = computed(() => ({
+	value: props.modelValue,
+	onChange: handleChange,
+	maxLength: props.maxLength,
+	disabled: props.disabled,
+	masked: props.masked,
+}));
+
+</script>
+<template>
+    <OTPInput
+      data-slot="input-otp"
+      :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.containerClass)"
+      :class-name="cn('disabled:cursor-not-allowed', props.class)"
+      :maxlength="props.maxLength"
+      :value="props.modelValue"
+      :on-change="(val) => emit('update:modelValue', val)"
+      :disabled="props.disabled"
+      v-bind="props"
+      style="display: flex;"
+    >
+      <div class="flex items-center gap-2">
+        <slot />
+      </div>
+    </OTPInput>
+</template>