@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.19 → 1.0.21

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.19",
+  "version": "1.0.21",
   "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,10 @@ 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 './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 +110,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';

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/pagination.vue

@@ -1,21 +1,37 @@
 <template>
-  <nav class="flex items-center justify-center gap-2" role="navigation" aria-label="Pagination">
+  <nav class="flex items-center justify-center gap-1" role="navigation" aria-label="Pagination">
     <button
-      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+      class="px-3 py-2 text-sm font-medium rounded-md transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:cursor-not-allowed"
       :disabled="page <= 1"
       @click="$emit('update:page', page - 1)"
       aria-label="Previous page"
     >
-      &lt;
+      Previous
     </button>
-    <span class="px-2 text-sm">{{ page }} / {{ totalPages }}</span>
+    
+    <template v-for="(pageNum, index) in visiblePages" :key="pageNum">
+      <span v-if="pageNum === '...'" class="px-3 py-2 text-sm">...</span>
+      <button
+        v-else
+        class="px-3 py-2 text-sm font-medium rounded-md transition-colors"
+        :class="pageNum === page 
+          ? 'border border-input bg-background' 
+          : 'hover:bg-accent hover:text-accent-foreground'"
+        @click="$emit('update:page', pageNum)"
+        :aria-label="`Page ${pageNum}`"
+        :aria-current="pageNum === page ? 'page' : undefined"
+      >
+        {{ pageNum }}
+      </button>
+    </template>
+    
     <button
-      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+      class="px-3 py-2 text-sm font-medium rounded-md transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:cursor-not-allowed"
       :disabled="page >= totalPages"
       @click="$emit('update:page', page + 1)"
       aria-label="Next page"
     >
-      &gt;
+      Next
     </button>
   </nav>
 </template>
@@ -38,4 +54,45 @@ const props = defineProps({
 });
 const emit = defineEmits(['update:page']);
 const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.perPage)));
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const current = props.page;
+  const total = totalPages.value;
+  
+  if (total <= 7) {
+    // Show all pages if total is 7 or less
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    // Always show first page
+    pages.push(1);
+    
+    if (current <= 4) {
+      // Show pages 2, 3, 4, 5, then ellipsis, then last page
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push('...');
+      pages.push(total);
+    } else if (current >= total - 3) {
+      // Show first page, ellipsis, then last 4 pages
+      pages.push('...');
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Show first page, ellipsis, current-1, current, current+1, ellipsis, last page
+      pages.push('...');
+      pages.push(current - 1);
+      pages.push(current);
+      pages.push(current + 1);
+      pages.push('...');
+      pages.push(total);
+    }
+  }
+  
+  return pages;
+});
 </script>

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/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>

package/src/ui/InputOTPSlot.vue

@@ -1,61 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { cn } from '@/lib/utils';
-
-const props = defineProps({
-  index: Number,
-  char: String,
-  class: String,
-  disabled: Boolean,
-});
-
-const extDisplayChar = computed(() => {
-  return '';
-});
-
-const extIsActive = computed(() => {
-});
-
-const isActive = computed(() => {
-});
-
-const handleClick = () => {
-};
-
-const handleInput = (e) => {
-  const value = e.target.value;
-};
-
-</script>
-
-<template>
-  <!-- Fallback context: input field mode -->
-  <div
-    data-slot="input-otp-slot"
-    :data-index="props.index"
-    :data-active="isActive"
-    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 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] cursor-text', props.class)"
-    @click="handleClick"
-  >
-    <input
-      ref="inputRef"
-      type="text"
-      inputmode="numeric"
-      pattern="[0-9]*"
-      maxlength="1"
-      :value="char"
-      @input="handleInput"
-      @keydown="handleKeydown"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-      class="absolute inset-0 w-full h-full bg-transparent border-0 outline-none text-center opacity-0 caret-transparent"
-      style="caret-color: transparent;"
-    />
-    <div class="pointer-events-none select-none relative z-10 flex items-center justify-center">
-      <span v-if="char" class="text-foreground">{{ displayChar }}</span>
-    </div>
-    <div v-if="isActive && !char" class="pointer-events-none absolute inset-0 flex items-center justify-center z-20">
-      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-    </div>
-  </div>
-</template>

package/src/ui/input-otp.vue

@@ -1,52 +0,0 @@
-<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>