@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.20 → 1.0.22

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.20",
+  "version": "1.0.22",
   "main": "dist/perisai-ui.umd.js",
   "module": "dist/perisai-ui.es.js",
   "scripts": {
@@ -28,7 +28,6 @@
     "esbuild": "^0.25.12",
     "estree-walker": "^2.0.2",
     "fdir": "^6.5.0",
-    "input-otp": "^1.4.2",
     "lucide-vue-next": "^0.554.0",
     "magic-string": "^0.30.21",
     "nanoid": "^3.3.11",
@@ -39,7 +38,8 @@
     "source-map-js": "^1.2.1",
     "tailwind-merge": "^3.4.0",
     "tinyglobby": "^0.2.15",
-    "vaul-vue": "^0.4.1"
+    "vaul-vue": "^0.4.1",
+    "vue-input-otp": "^0.3.2"
   },
   "description": ""
 }

package/src/index.ts

@@ -10,12 +10,11 @@ export * from './shadcn/tooltip';
 export * from './shadcn/command';
 export * from './shadcn/switch';
 export * from './shadcn/collapsible';
+export * from './shadcn/navigation-menu';
+export * from './shadcn/input-otp';
+export * from './shadcn/context-menu';
 
 export * from './ui/tree';
-export { default as InputOTP } from './ui/InputOTP.vue';
-export { default as InputOTPGroup } from './ui/InputOTPGroup.vue';
-export { default as InputOTPSeparator } from './ui/InputOTPSeparator.vue';
-export { default as InputOTPSlot } from './ui/InputOTPSlot.vue';
 export { default as PopoverContent } from './ui/PopoverContent.vue';
 export { default as PopoverTrigger } from './ui/PopoverTrigger.vue';
 export { default as SelectContent } from './ui/SelectContent.vue';
@@ -112,7 +111,6 @@ export { default as Slash } from './ui/icons/Slash.vue';
 export { default as Trash2 } from './ui/icons/Trash2.vue';
 export { default as Type } from './ui/icons/Type.vue';
 export { default as User } from './ui/icons/User.vue';
-export { default as InputOtp } from './ui/input-otp.vue';
 export { default as Input } from './ui/input.vue';
 export { default as Label } from './ui/label.vue';
 export { default as Pagination } from './ui/pagination.vue';
@@ -176,3 +174,6 @@ export { default as Tabs } from './ui/tabs.vue';
 export { default as Textarea } from './ui/textarea.vue';
 export { default as ThreatGauge } from './ui/threat-gauge.vue';
 export { default as Toggle } from './ui/toggle.vue';
+
+// Toast utilities
+export { toast } from './ui/toast';

package/src/shadcn/context-menu/ContextMenuContent.vue

@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       data-slot="context-menu-content"
       v-bind="forwarded"
       :class="cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+        'bg-popover text-popover-foreground border-border 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-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-lg',
         props.class,
       )"
     >

package/src/shadcn/context-menu/ContextMenuItem.vue

@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     :data-variant="variant"
     v-bind="forwarded"
     :class="cn(
-      'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'focus:bg-accent focus:text-accent-foreground text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >

package/src/shadcn/context-menu/ContextMenuSubContent.vue

@@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border border-border p-1 shadow-lg',
         props.class,
       )
     "

package/src/shadcn/input-otp/InputOTP.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { OTPInputEmits, OTPInputProps } from "vue-input-otp"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardPropsEmits } from "reka-ui"
+import { OTPInput } from "vue-input-otp"
+import { cn } from "../../lib/utils"
+
+const props = defineProps<OTPInputProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<OTPInputEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <OTPInput
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)"
+    data-slot="input-otp"
+    class="disabled:cursor-not-allowed"
+  >
+    <slot v-bind="slotProps" />
+  </OTPInput>
+</template>

package/src/shadcn/input-otp/InputOTPGroup.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from "reka-ui"
+import { cn } from "../../lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-group"
+    v-bind="forwarded"
+    :class="cn('flex items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/shadcn/input-otp/InputOTPSeparator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { MinusIcon } from "lucide-vue-next"
+import { useForwardProps } from "reka-ui"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-separator"
+    role="separator"
+    v-bind="forwarded"
+  >
+    <slot>
+      <MinusIcon />
+    </slot>
+  </div>
+</template>

package/src/shadcn/input-otp/InputOTPSlot.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { useForwardProps } from "reka-ui"
+import { computed } from "vue"
+import { useVueOTPContext } from "vue-input-otp"
+import { cn } from "../../lib/utils"
+
+const props = defineProps<{ index: number, class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardProps(delegatedProps)
+
+const context = useVueOTPContext()
+
+const slot = computed(() => context?.value.slots[props.index])
+</script>
+
+<template>
+  <div
+    v-bind="forwarded"
+    data-slot="input-otp-slot"
+    :data-active="slot?.isActive"
+    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]', props.class)"
+  >
+    {{ slot?.char }}
+    <div v-if="slot?.hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+    </div>
+  </div>
+</template>

package/src/shadcn/input-otp/index.ts

@@ -0,0 +1,4 @@
+export { default as InputOTP } from "./InputOTP.vue"
+export { default as InputOTPGroup } from "./InputOTPGroup.vue"
+export { default as InputOTPSeparator } from "./InputOTPSeparator.vue"
+export { default as InputOTPSlot } from "./InputOTPSlot.vue"

package/src/shadcn/navigation-menu/NavigationMenuTrigger.vue

@@ -1,24 +1,29 @@
 <script setup lang="ts">
+import type { NavigationMenuTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { NavigationMenuTrigger, useForwardProps } from "reka-ui"
 import { cn } from '@/lib/utils';
 import { ChevronDown } from 'lucide-vue-next';
-const props = defineProps({
-  class: { type: String, default: '' },
-  open: { type: Boolean, default: false },
-});
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 <template>
-  <button
-    :class="cn('group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 transition-[color,box-shadow] outline-none',
-      { 'data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-1': props.open },
-      props.class)
-    "
-    :aria-expanded="props.open ? 'true' : 'false'"
+  <NavigationMenuTrigger
+    data-slot="navigation-menu-trigger"
+    v-bind="forwardedProps"
+    :class="cn(
+      'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 transition-[color,box-shadow] outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-1',
+      props.class
+    )"
   >
     <slot />
     <ChevronDown
       class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
-      :class="{ 'rotate-180': props.open }"
     />
-  </button>
+  </NavigationMenuTrigger>
 </template>

package/src/ui/card.vue

@@ -55,7 +55,7 @@ const customPaddingValue = computed(() => {
     <!-- Content container -->
     <div
       data-slot="card"
-      :class="cn('bg-card text-card-foreground flex flex-col gap-3 relative rounded shadow-sm', customPaddingValue, $attrs.class as any)"
+      :class="cn('bg-card text-card-foreground flex flex-col gap-3 relative rounded', customPaddingValue, $attrs.class as any)"
       :style="{ clipPath: clipPathValue, margin: '1px' }"
       v-bind="$attrs"
     >
@@ -65,7 +65,7 @@ const customPaddingValue = computed(() => {
   <div
     v-else
     data-slot="card"
-    :class="cn('bg-gray-900 text-card-foreground flex flex-col gap-3 relative rounded-xl border border-gray-800 shadow-sm', $attrs.class as any)"
+    :class="cn('bg-card text-card-foreground flex flex-col gap-3 relative rounded-xl border border-border', $attrs.class as any)"
     v-bind="$attrs"
   >
     <slot />

package/src/ui/dialog-body.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-slot="dialog-body"
-    :class="['px-6 py-5 space-y-6 [&>*+*]:border-t [&>*+*]:border-border [&>*+*]:pt-5', $attrs.class]"
+    :class="['px-6 py-5 space-y-6', $attrs.class]"
     v-bind="$attrs"
   >
     <slot />

package/src/ui/dialog-header.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-slot="dialog-header"
-    :class="['flex flex-col gap-2 text-center pl-4 py-4 pr-5 sm:text-left border-b', $attrs.class]"
+    :class="['flex flex-col gap-2 text-center pl-4 py-4 pr-5 sm:text-left border-b border-border', $attrs.class]"
     v-bind="$attrs"
   >
     <slot />

package/src/ui/select.vue

@@ -20,7 +20,7 @@
     :disabled="disabled"
     :class="mergedClass"
   >
-    <SelectTrigger class="w-full">
+    <SelectTrigger :class="cn('w-full', triggerClass)">
       <slot name="trigger">
         <SelectValue :placeholder="placeholder" />
       </slot>
@@ -59,6 +59,7 @@ const props = defineProps({
   disabled: Boolean,
   customClass: String,
   contentClass: String,
+  triggerClass: String,
   title: String,
   maxDisplay: { type: Number, default: 3 },
   size: { type: String, default: 'default' },

package/src/ui/sonner.vue

@@ -1,37 +1,53 @@
 
 <template>
-  <transition-group name="sonner-fade" tag="div" class="fixed z-50 w-full flex flex-col items-center pointer-events-none top-4 left-0">
-    <div
-      v-for="(toast, idx) in toasts"
-      :key="toast.id"
-      class="bg-card border border-border shadow-lg rounded-lg px-4 py-3 mb-2 flex items-center gap-3 pointer-events-auto min-w-[240px] max-w-xs"
-      :style="{ opacity: toast.visible ? 1 : 0 }"
-    >
-      <span v-if="toast.icon" class="text-xl">{{ toast.icon }}</span>
-      <div class="flex-1">
-        <div v-if="toast.title" class="font-semibold text-sm">{{ toast.title }}</div>
-        <div v-if="toast.description" class="text-xs text-muted-foreground mt-1">{{ toast.description }}</div>
-      </div>
-      <button
-        class="ml-2 text-muted-foreground hover:text-foreground focus:outline-none"
-        @click="removeToast(toast.id)"
-        aria-label="Close"
+  <div 
+    class="fixed z-50 pointer-events-none bottom-4 right-4 relative min-h-[80px]" 
+    @mouseenter="expandStack"
+    @mouseleave="collapseStack"
+  >
+    <transition-group name="sonner-fade" tag="div">
+      <div
+        v-for="(toast, idx) in toasts"
+        :key="toast.id"
+        :class="getToastClasses(toast.type, idx)"
+        :style="{ 
+          opacity: toast.visible ? 1 : 0,
+          transform: isStackExpanded ? `translateY(-${(toasts.length - 1 - idx) * 72}px)` : `translateY(-${(toasts.length - 1 - idx) * 4}px)`,
+          zIndex: idx + 1,
+          position: 'absolute',
+          right: '0',
+          top: '0',
+          pointerEvents: 'auto'
+        }"
       >
-        ×
-      </button>
-    </div>
-  </transition-group>
+        <span v-if="toast.icon" :class="getIconClasses(toast.type)">{{ toast.icon }}</span>
+        <div class="flex-1">
+          <div v-if="toast.title" class="font-medium text-sm leading-none">{{ toast.title }}</div>
+          <div v-if="toast.description" class="text-xs mt-1 leading-none" :class="getDescriptionClasses(toast.type)">{{ toast.description }}</div>
+        </div>
+        <button
+          :class="getCloseButtonClasses(toast.type)"
+          @click="removeToast(toast.id)"
+          aria-label="Close"
+        >
+          ×
+        </button>
+      </div>
+    </transition-group>
+  </div>
 </template>
 
 <script setup>
 import { ref, onUnmounted } from 'vue';
 
 const toasts = ref([]);
+const isStackExpanded = ref(false);
 let idCounter = 0;
 
-function showToast({ title, description, icon, duration = 3000 }) {
+function showToast({ title, description, icon, duration = 3000, type = 'default' }) {
   const id = ++idCounter;
-  toasts.value.push({ id, title, description, icon, visible: true });
+  console.log('Creating toast:', { id, title, description, icon, type });
+  toasts.value.push({ id, title, description, icon, visible: true, type });
   setTimeout(() => removeToast(id), duration);
 }
 
@@ -45,6 +61,87 @@ function removeToast(id) {
   }
 }
 
+function expandStack() {
+  isStackExpanded.value = true;
+}
+
+function collapseStack() {
+  isStackExpanded.value = false;
+}
+
+function getToastClasses(type, index) {
+  const baseClasses = 'rounded-lg px-4 py-3 flex items-center gap-3 pointer-events-auto w-80 shadow-lg border font-sans transition-all duration-200 ease-out';
+  const stackOffset = index * 8; // Stack offset in pixels
+  
+  switch (type) {
+    case 'success':
+      return `${baseClasses} bg-green-50 text-green-800 border-green-200`;
+    case 'error':
+      return `${baseClasses} bg-red-50 text-red-800 border-red-200`;
+    case 'warning':
+      return `${baseClasses} bg-yellow-50 text-yellow-800 border-yellow-200`;
+    case 'info':
+      return `${baseClasses} bg-blue-50 text-blue-800 border-blue-200`;
+    case 'loading':
+      return `${baseClasses} bg-gray-50 text-gray-800 border-gray-200`;
+    default:
+      return `${baseClasses} bg-card text-card-foreground border-border`;
+  }
+}
+
+function getDescriptionClasses(type) {
+  switch (type) {
+    case 'success':
+      return 'text-green-700';
+    case 'error':
+      return 'text-red-700';
+    case 'warning':
+      return 'text-yellow-700';
+    case 'info':
+      return 'text-blue-700';
+    case 'loading':
+      return 'text-gray-700';
+    default:
+      return 'text-muted-foreground';
+  }
+}
+
+function getCloseButtonClasses(type) {
+  const baseClasses = 'ml-2 hover:opacity-80 focus:outline-none transition-opacity rounded-full w-5 h-5 flex items-center justify-center text-xs';
+  
+  switch (type) {
+    case 'success':
+      return `${baseClasses} text-green-600 hover:bg-green-100`;
+    case 'error':
+      return `${baseClasses} text-red-600 hover:bg-red-100`;
+    case 'warning':
+      return `${baseClasses} text-yellow-600 hover:bg-yellow-100`;
+    case 'info':
+      return `${baseClasses} text-blue-600 hover:bg-blue-100`;
+    case 'loading':
+      return `${baseClasses} text-gray-600 hover:bg-gray-100`;
+    default:
+      return `${baseClasses} text-muted-foreground hover:bg-muted`;
+  }
+}
+
+function getIconClasses(type) {
+  switch (type) {
+    case 'success':
+      return 'text-green-600 text-lg';
+    case 'error':
+      return 'text-red-600 text-lg';
+    case 'warning':
+      return 'text-yellow-600 text-lg';
+    case 'info':
+      return 'text-blue-600 text-lg';
+    case 'loading':
+      return 'text-gray-600 text-lg';
+    default:
+      return 'text-muted-foreground text-lg';
+  }
+}
+
 // Expose showToast globally (for demo, you may want to use provide/inject or a plugin in real apps)
 if (typeof window !== 'undefined') {
   window.$sonner = showToast;

package/src/ui/toast.ts

@@ -0,0 +1,55 @@
+// Toast utilities for the Sonner component
+
+export interface ToastOptions {
+  title: string;
+  description?: string;
+  icon?: string;
+  duration?: number;
+  type?: 'success' | 'error' | 'warning' | 'info' | 'loading';
+}
+
+export const toast = {
+  success: (title: string, description?: string, duration?: number) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner({ title, description, icon: '✅', duration, type: 'success' });
+    }
+  },
+  
+  error: (title: string, description?: string, duration?: number) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner({ title, description, icon: '❌', duration, type: 'error' });
+    }
+  },
+  
+  warning: (title: string, description?: string, duration?: number) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner({ title, description, icon: '⚠️', duration, type: 'warning' });
+    }
+  },
+  
+  info: (title: string, description?: string, duration?: number) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner({ title, description, icon: 'ℹ️', duration, type: 'info' });
+    }
+  },
+  
+  loading: (title: string, description?: string, duration?: number) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner({ title, description, icon: '⏳', duration, type: 'loading' });
+    }
+  },
+  
+  // Custom toast method
+  show: (options: ToastOptions) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner(options);
+    }
+  }
+};
+
+// Extend Window interface for TypeScript
+declare global {
+  interface Window {
+    $sonner?: (options: ToastOptions) => void;
+  }
+}

package/vite.config.ts

@@ -25,7 +25,6 @@ export default defineConfig({
 	"vaul-vue",
 	"clsx",
 	"tailwind-merge",
-	"input-otp",
 	"class-variance-authority"	// keep dynamic async imports unbundled
       ],
       output: {

package/src/ui/InputOTP.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { computed, provide, h, defineAsyncComponent, useSlots } from 'vue';
-import { cn } from './utils';
-import { InputOTPContext, InputOTPMaskContext } from './InputOTPContext';
-
-const props = defineProps({
-  modelValue: { type: String, default: '' },
-  maxLength: { type: Number, required: true },
-  disabled: { type: Boolean, default: false },
-  masked: { type: Boolean, default: false },
-  class: String,
-  containerClass: String,
-});
-const emit = defineEmits(['update:modelValue']);
-const slots = useSlots();
-
-const handleChange = (newValue: string) => {
-  if (newValue.length <= props.maxLength) {
-    emit('update:modelValue', newValue);
-  }
-};
-
-// Try to use external input-otp package if available
-let OTPInput: any = null;
-try {
-  OTPInput = defineAsyncComponent(() => import('input-otp'));
-} catch (e) {
-  OTPInput = null;
-}
-
-if (OTPInput) {
-  provide(InputOTPMaskContext, { masked: props.masked });
-}
-
-const contextValue = computed(() => ({
-  value: props.modelValue,
-  onChange: handleChange,
-  maxLength: props.maxLength,
-  disabled: props.disabled,
-  masked: props.masked,
-}));
-
-if (!OTPInput) {
-  provide(InputOTPContext, contextValue.value);
-  provide(InputOTPMaskContext, { masked: props.masked });
-}
-</script>
-<template>
-  <component
-    v-if="OTPInput"
-    :is="OTPInput"
-    data-slot="input-otp"
-    :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.containerClass)"
-    :class="cn('disabled:cursor-not-allowed', props.class)"
-    :max-length="props.maxLength"
-    :value="props.modelValue"
-    :onChange="(val: string) => emit('update:modelValue', val)"
-    :disabled="props.disabled"
-  >
-    <slot />
-  </component>
-  <div
-    v-else
-    data-slot="input-otp"
-    :class="cn('flex items-center gap-2 has-disabled:opacity-50', props.containerClass)"
-  >
-    <slot />
-  </div>
-</template>

package/src/ui/InputOTPGroup.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { cn } from './utils';
-const props = defineProps({ class: String });
-</script>
-<template>
-  <div data-slot="input-otp-group" :class="cn('flex items-center gap-1', props.class)"><slot /></div>
-</template>

package/src/ui/InputOTPSeparator.vue

@@ -1,8 +0,0 @@
-<script setup lang="ts">
-import { Minus } from 'lucide-vue-next';
-</script>
-<template>
-  <div data-slot="input-otp-separator" role="separator">
-    <Minus class="h-4 w-4" />
-  </div>
-</template>