@una-ui/nuxt 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/runtime/components/forms/select/Select.vue.d.ts

@@ -1,66 +1,64 @@
 import type { AcceptableValue } from 'reka-ui';
 import type { NSelectProps, SelectGroup as SelectGroupType } from '../../../types/index.js';
-declare const _default: <T extends AcceptableValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: <T extends AcceptableValue, I extends Array<T | SelectGroupType<T>>, M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:open"> & NSelectProps<T> & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:open"> & NSelectProps<T, I, M> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
         default?: (props: {
-            modelValue: AcceptableValue | AcceptableValue[] | undefined;
-            open: boolean;
+            modelValue: any;
+            open: any;
         }) => any;
     } & {
         'trigger-wrapper'?: (props: {
-            modelValue: AcceptableValue | AcceptableValue[] | undefined;
-            open: boolean;
+            modelValue: any;
+            open: any;
         }) => any;
     } & {
         trigger?: (props: {
-            modelValue: AcceptableValue | AcceptableValue[] | undefined;
-            open: boolean;
+            modelValue: any;
+            open: any;
         }) => any;
     } & {
         value?: (props: {
-            modelValue: AcceptableValue | AcceptableValue[] | undefined;
-            open: boolean;
+            modelValue: any;
+            open: any;
         }) => any;
     } & {
         content?: (props: {
-            items: T[] | SelectGroupType<T>[];
+            items: any;
         }) => any;
     } & {
         label?: (props: {
-            label: string;
+            label: any;
         }) => any;
     } & {
         item?: (props: {
-            item: T | SelectGroupType<T>;
+            item: any;
         }) => any;
     } & {
         indicator?: (props: {
-            item: T | SelectGroupType<T>;
+            item: any;
         }) => any;
     } & {
         group?: (props: {
-            items: SelectGroupType<T>;
+            items: any;
         }) => any;
     } & {
         label?: (props: {
-            label: string;
+            label: any;
         }) => any;
     } & {
         item?: (props: {
-            item: T;
+            item: any;
         }) => any;
     } & {
         indicator?: (props: {
-            item: T;
+            item: any;
         }) => any;
-    } & {
-        default?: (props: {}) => any;
     };
     emit: ((evt: "update:modelValue", value: T) => void) & ((evt: "update:open", value: boolean) => void);
 }>) => import("vue").VNode & {

package/dist/runtime/components/forms/select/SelectContent.vue

@@ -22,8 +22,10 @@ const props = defineProps({
   bodyLock: { type: Boolean, required: false },
   side: { type: null, required: false },
   sideOffset: { type: Number, required: false },
+  sideFlip: { type: Boolean, required: false },
   align: { type: null, required: false },
   alignOffset: { type: Number, required: false },
+  alignFlip: { type: Boolean, required: false },
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
@@ -51,6 +53,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
   cn(
+    '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',
     'select-content',
     position === 'popper' && 'select-content-popper',
     props.class

package/dist/runtime/components/forms/select/SelectItem.vue

@@ -9,7 +9,6 @@ import SelectItemIndicator from "./SelectItemIndicator.vue";
 import SelectItemText from "./SelectItemText.vue";
 const props = defineProps({
   selectItem: { type: null, required: false, default: "gray" },
-  isSelected: { type: Boolean, required: false },
   _selectItemText: { type: Object, required: false },
   _selectItemIndicator: { type: Object, required: false },
   una: { type: Object, required: false },
@@ -38,7 +37,6 @@ const forwardedProps = useForwardProps(delegatedProps);
     :select-item
   >
     <SelectItemIndicator
-      v-if="isSelected"
       :una
       v-bind="props._selectItemIndicator"
     >

package/dist/runtime/components/forms/select/SelectItemIndicator.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Primitive } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
+import { SelectItemIndicator, useForwardProps } from "reka-ui";
 import { cn } from "../../../utils";
 import Icon from "../../elements/Icon.vue";
 const props = defineProps({
@@ -7,14 +8,14 @@ const props = defineProps({
   class: { type: null, required: false },
   una: { type: Object, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "span" }
+  as: { type: null, required: false }
 });
+const forwardProps = useForwardProps(reactiveOmit(props, ["icon", "una"]));
 </script>
 
 <template>
-  <Primitive
-    aria-hidden
-    v-bind="props"
+  <SelectItemIndicator
+    v-bind="forwardProps"
     :class="cn(
   'select-item-indicator',
   props.una?.selectItemIndicator,
@@ -29,5 +30,5 @@ const props = defineProps({
 )"
       />
     </slot>
-  </Primitive>
+  </SelectItemIndicator>
 </template>

package/dist/runtime/components/forms/select/SelectItemIndicator.vue.d.ts

@@ -3,9 +3,7 @@ declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<NSelectItemIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NSelectItemIndicatorProps> & Readonly<{}>, {
-    as: import("reka-ui").AsTag | import("vue").Component;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<NSelectItemIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NSelectItemIndicatorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/hover-card/HoverCard.vue.d.ts

@@ -1,6 +1,6 @@
 import type { NHoverCardProps } from '../../types/index.js';
 declare var __VLS_6: {}, __VLS_11: {
-    open: boolean;
+    open: any;
 }, __VLS_16: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;

package/dist/runtime/components/hover-card/HoverCardContent.vue

@@ -14,8 +14,10 @@ const props = defineProps({
   forceMount: { type: Boolean, required: false },
   side: { type: null, required: false },
   sideOffset: { type: Number, required: false, default: 4 },
+  sideFlip: { type: Boolean, required: false },
   align: { type: null, required: false },
   alignOffset: { type: Number, required: false },
+  alignFlip: { type: Boolean, required: false },
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
   collisionPadding: { type: [Number, Object], required: false },
@@ -44,6 +46,7 @@ const forwarded = useForwardProps(delegatedProps);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
   cn(
+    'data-[state=hidden]:opacity-0 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',
     'hover-card-content',
     props.una?.hoverCardContent,
     props.class

package/dist/runtime/components/misc/ThemeSwitcher.vue

@@ -25,23 +25,23 @@ const currentPrimaryThemeName = computed(() => {
 });
 const currentGrayThemeHex = computed(() => settings.value.grayColors?.["--una-gray-hex"]);
 const currentGrayThemeName = computed(() => {
-  if (settings.value.theme !== null) {
-    return false;
+  if (settings.value.theme) {
+    return settings.value.theme;
   }
   const theme = grayThemes.find(([, theme2]) => theme2["--una-gray-hex"] === currentGrayThemeHex.value);
   return theme ? theme[0] : "";
 });
-function updateColor(theme) {
+function updateTheme(theme) {
   settings.value.theme = theme;
-  settings.value.primary = "";
-  settings.value.gray = "";
+  settings.value.primary = false;
+  settings.value.gray = false;
 }
 function updatePrimaryTheme(theme) {
-  settings.value.theme = null;
+  settings.value.theme = false;
   settings.value.primary = theme;
 }
 function updateGrayTheme(theme) {
-  settings.value.theme = null;
+  settings.value.theme = false;
   settings.value.gray = theme;
 }
 function shuffleTheme() {
@@ -114,7 +114,7 @@ function shuffleTheme() {
                   class="justify-start gap-2 ring-primary"
                   :aria-label="`Theme: ${theme.name}`"
                   :class="currentPrimaryThemeName === theme?.name && 'ring-2'"
-                  @click="updateColor(theme.name)"
+                  @click="updateTheme(theme.name)"
                 >
                   <template #leading>
                     <Icon
@@ -169,19 +169,25 @@ function shuffleTheme() {
         <div class="space-y-2">
           <Label for="color" class="text-xs"> Gray Color </Label>
           <div class="grid grid-cols-7 gap-3">
-            <button
+            <template
               v-for="[key, theme] in grayThemes"
               :key="key"
-              :title="capitalize(key)"
-              :style="{ background: theme['--una-gray-hex'] }"
-              :class="currentGrayThemeName === key ? 'ring-2' : 'scale-93'"
-              class="transition-all"
-              rounded="full"
-              square="6.5"
-              :aria-label="`Gray Color: ${key}`"
-              ring="gray offset-4 offset-background"
-              @click="updateGrayTheme(key)"
-            />
+            >
+              <button
+                :title="capitalize(key)"
+                :style="{
+  '--c-gray': `oklch(${theme['--una-gray-600']})`,
+  '--c-gray-foreground': `oklch(${theme['--una-gray-500']})`
+}"
+                class="bg-$c-gray transition-all dark:bg-$c-gray-foreground"
+                rounded="full"
+                square="6.5"
+                :class="[currentGrayThemeName === key ? 'ring-2' : 'scale-93']"
+                ring="gray offset-4 offset-background"
+                :aria-label="`Gray Color: ${key}`"
+                @click="updateGrayTheme(key)"
+              />
+            </template>
           </div>
         </div>
 

package/dist/runtime/components/misc/ThemeSwitcher.vue.d.ts

@@ -1,5 +1,5 @@
 declare var __VLS_5: {
-    open: boolean;
+    open: any;
 }, __VLS_10: {};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_5) => any;

package/dist/runtime/components/navigation/breadcrumb/Breadcrumb.vue.d.ts

@@ -1,26 +1,16 @@
 import type { NBreadcrumbProps } from '../../../types/index.js';
 declare var __VLS_5: {
-    items: Partial<import("../../../types/index.js").NButtonProps & {
-        children?: import("../../../types/index.js").NButtonProps[];
-    }>[];
+    items: any;
 }, __VLS_10: {
-    item: Partial<import("../../../types/index.js").NButtonProps & {
-        children?: import("../../../types/index.js").NButtonProps[];
-    }>;
+    item: any;
 }, __VLS_15: {
-    item: Partial<import("../../../types/index.js").NButtonProps & {
-        children?: import("../../../types/index.js").NButtonProps[];
-    }>;
+    item: any;
 }, __VLS_20: {
-    item: Partial<import("../../../types/index.js").NButtonProps & {
-        children?: import("../../../types/index.js").NButtonProps[];
-    }>;
-    index: number;
+    item: any;
+    index: any;
     isActive: boolean;
 }, __VLS_22: {
-    item: Partial<import("../../../types/index.js").NButtonProps & {
-        children?: import("../../../types/index.js").NButtonProps[];
-    }>;
+    item: any;
 }, __VLS_33: {};
 type __VLS_Slots = {} & {
     root?: (props: typeof __VLS_5) => any;

package/dist/runtime/components/navigation-menu/NavigationMenu.vue.d.ts

@@ -7,31 +7,31 @@ declare const _default: <T extends U[], U extends NNavigationMenuItemProps>(__VL
     attrs: any;
     slots: {
         [x: string]: ((props: {
-            item: T extends number ? number : T extends string ? string : T extends any[] ? T[number] : T extends Iterable<infer T1> ? T1 : any;
-            active: boolean | undefined;
+            item: any;
+            active: any;
         }) => any) | undefined;
     } & {
-        [x: `${string}-content`]: ((props: {
-            items: import("../../types/index.js").NNavigationMenuLinkProps[];
-            item: T extends number ? number : T extends string ? string : T extends any[] ? T[number] : T extends Iterable<infer T1> ? T1 : any;
+        [x: string]: ((props: {
+            items: any;
+            item: any;
         }) => any) | undefined;
     } & {
         [x: string]: ((props: {
-            item: T extends number ? number : T extends string ? string : T extends any[] ? T[number] : T extends Iterable<infer T1> ? T1 : any;
+            item: any;
         }) => any) | undefined;
     } & {
         default?: (props: {
-            items: T | undefined;
+            items: any;
         }) => any;
     } & {
         list?: (props: {
-            items: T | undefined;
+            items: any;
         }) => any;
     } & {
         trigger?: (props: {
-            modelValue: string;
-            item: T extends number ? number : T extends string ? string : T extends any[] ? T[number] : T extends Iterable<infer T1> ? T1 : any;
-            index: number;
+            modelValue: any;
+            item: any;
+            index: any;
         }) => any;
     } & {
         viewport?: (props: {}) => any;

package/dist/runtime/components/navigation-menu/NavigationMenuIndicator.vue

@@ -18,6 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps);
   <NavigationMenuIndicator
     v-bind="forwardedProps"
     :class="cn(
+  'data-[state=hidden]:opacity-0 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut',
   'navigation-menu-indicator',
   props.una?.navigationMenuIndicator,
   props.class

package/dist/runtime/components/navigation-menu/NavigationMenuLink.vue.d.ts

@@ -1,6 +1,6 @@
 import type { NNavigationMenuLinkProps } from '../../types/index.js';
 declare var __VLS_6: {
-    active: boolean | undefined;
+    active: any;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
@@ -15,8 +15,8 @@ declare const __VLS_component: import("vue").DefineComponent<NNavigationMenuLink
     }>) => any) | undefined;
 }>, {
     btn: string;
-    navigationMenuLink: string;
     as: import("reka-ui").AsTag | import("vue").Component;
+    navigationMenuLink: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/navigation-menu/NavigationMenuTrigger.vue.d.ts

@@ -6,8 +6,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<NNavigationMenuTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NNavigationMenuTriggerProps> & Readonly<{}>, {
     btn: string;
     trailing: string;
-    navigationMenu: string;
     as: import("reka-ui").AsTag | import("vue").Component;
+    navigationMenu: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/navigation-menu/NavigationMenuViewport.vue

@@ -34,6 +34,7 @@ const forwardedProps = useForwardProps(delegatedProps);
   cn(
     'navigation-menu-viewport',
     'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90',
+    'data-[state=closed]:fade-out data-[state=open]:fade-in',
     props.una?.navigationMenuViewport
   )
 "

package/dist/runtime/components/number-field/NumberField.vue

@@ -19,6 +19,7 @@ const props = defineProps({
   formatOptions: { type: null, required: false },
   locale: { type: String, required: false },
   disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
   disableWheelChange: { type: Boolean, required: false },
   invertWheelChange: { type: Boolean, required: false },
   id: { type: String, required: false },

package/dist/runtime/components/overlays/Toaster.vue

@@ -13,6 +13,7 @@ const props = defineProps({
   class: { type: null, required: false },
   label: { type: String, required: false },
   duration: { type: Number, required: false },
+  disableSwipe: { type: Boolean, required: false },
   swipeDirection: { type: String, required: false },
   swipeThreshold: { type: Number, required: false }
 });

package/dist/runtime/components/overlays/Toaster.vue.d.ts

@@ -1,5 +1,5 @@
 import type { NToasterProps } from '../../types/index.js';
-declare var __VLS_9: string | number, __VLS_10: any;
+declare var __VLS_9: any, __VLS_10: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
 };

package/dist/runtime/components/overlays/toast/Toast.vue.d.ts

@@ -1,6 +1,6 @@
 import type { NToastProps } from '../../../types/index.js';
 declare var __VLS_10: {}, __VLS_15: {}, __VLS_20: {}, __VLS_25: {}, __VLS_30: {}, __VLS_32: {
-    actions: import("reka-ui").ToastActionProps[];
+    actions: any;
 }, __VLS_40: {};
 type __VLS_Slots = {} & {
     leading?: (props: typeof __VLS_10) => any;

package/dist/runtime/components/overlays/toast/ToastAction.vue.d.ts

@@ -1,5 +1,5 @@
 import type { NToastActionProps } from '../../../types/index.js';
-declare var __VLS_10: string | number, __VLS_11: any;
+declare var __VLS_10: any, __VLS_11: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 };

package/dist/runtime/components/overlays/toast/ToastProvider.vue

@@ -3,6 +3,7 @@ import { ToastProvider } from "reka-ui";
 const props = defineProps({
   label: { type: String, required: false },
   duration: { type: Number, required: false, default: 5e3 },
+  disableSwipe: { type: Boolean, required: false },
   swipeDirection: { type: String, required: false },
   swipeThreshold: { type: Number, required: false }
 });

package/dist/runtime/components/pin-input/PinInput.vue

@@ -0,0 +1,139 @@
+<script>
+
+</script>
+
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { PinInputRoot, useForwardPropsEmits } from "reka-ui";
+import { computed } from "vue";
+import { cn, randomId } from "../../utils";
+import PinInputGroup from "./PinInputGroup.vue";
+import PinInputSeparator from "./PinInputSeparator.vue";
+import PinInputSlot from "./PinInputSlot.vue";
+const props = defineProps({
+  defaultValue: { type: Array, required: false },
+  maxLength: { type: Number, required: false },
+  separator: { type: [Boolean, String], required: false, default: false },
+  groupBy: { type: Number, required: false, default: 0 },
+  _pinInputGroup: { type: Object, required: false },
+  _pinInputSeparator: { type: Object, required: false },
+  _pinInputSlot: { type: Object, required: false },
+  una: { type: Object, required: false },
+  modelValue: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  mask: { type: Boolean, required: false },
+  otp: { type: Boolean, required: false },
+  type: { type: null, required: false, default: "text" },
+  dir: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  pinInput: { type: null, required: false, default: "outline-primary" },
+  status: { type: String, required: false },
+  class: { type: null, required: false },
+  size: { type: null, required: false, default: "md" }
+});
+const emits = defineEmits(["update:modelValue", "complete"]);
+const rootProps = reactivePick(props, [
+  "as",
+  "asChild",
+  "dir",
+  "defaultValue",
+  "disabled",
+  "id",
+  "mask",
+  "modelValue",
+  "name",
+  "otp",
+  "placeholder",
+  "type",
+  "required"
+]);
+const forwarded = useForwardPropsEmits(rootProps, emits);
+const id = computed(() => props.id ?? randomId("pin-input"));
+const separator = computed(() => {
+  if (props.separator === true) {
+    return "pin-input-separator-icon";
+  }
+  return props.separator;
+});
+const maxLength = computed(() => {
+  if (typeof props.maxLength !== "number") {
+    return props.modelValue?.length ?? 0;
+  }
+  return props.maxLength;
+});
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="forwarded"
+    :id
+    data-slot="pin-input"
+    :class="cn(
+  'pin-input',
+  props.una?.pinInput,
+  props.class
+)"
+    :size
+  >
+    <slot>
+      <template v-if="groupBy === 0">
+        <PinInputGroup
+          v-bind="_pinInputGroup"
+          :una
+        >
+          <slot name="group">
+            <template v-for="index in maxLength" :key="index">
+              <slot name="slot" :index="index - 1">
+                <PinInputSlot
+                  :index="index - 1"
+                  :una
+                  :status
+                  :pin-input
+                  v-bind="_pinInputSlot"
+                />
+              </slot>
+            </template>
+          </slot>
+        </PinInputGroup>
+      </template>
+
+      <template v-else>
+        <template v-for="(groupIndex) in Math.ceil(maxLength / groupBy)" :key="groupIndex">
+          <PinInputGroup
+            v-bind="_pinInputGroup"
+            :una
+          >
+            <slot name="group">
+              <template v-for="slotInGroup in Math.min(groupBy, maxLength - (groupIndex - 1) * groupBy)" :key="slotInGroup">
+                <slot name="slot" :index="(groupIndex - 1) * groupBy + slotInGroup - 1">
+                  <PinInputSlot
+                    :index="(groupIndex - 1) * groupBy + slotInGroup - 1"
+                    :una
+                    :pin-input
+                    :status
+                    v-bind="_pinInputSlot"
+                  />
+                </slot>
+              </template>
+            </slot>
+          </PinInputGroup>
+
+          <template v-if="separator !== false && (separator || $slots.separator) && groupIndex < Math.ceil(maxLength / groupBy)">
+            <PinInputSeparator
+              :icon="separator"
+              :una
+              v-bind="_pinInputSeparator"
+            >
+              <slot name="separator" />
+            </PinInputSeparator>
+          </template>
+        </template>
+      </template>
+    </slot>
+  </PinInputRoot>
+</template>

package/dist/runtime/components/pin-input/PinInput.vue.d.ts

@@ -0,0 +1,33 @@
+import type { NPinInputProps, PinInputType } from '../../types/index.js';
+declare const _default: <T extends PinInputType = "text">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+        readonly onComplete?: ((value: string[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onComplete"> & NPinInputProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    } & {
+        group?: (props: {}) => any;
+    } & {
+        slot?: (props: {
+            index: number;
+        }) => any;
+    } & {
+        group?: (props: {}) => any;
+    } & {
+        slot?: (props: {
+            index: number;
+        }) => any;
+    } & {
+        separator?: (props: {}) => any;
+    };
+    emit: ((evt: "update:modelValue", value: string[]) => void) & ((evt: "complete", value: string[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};