@sfxcode/formkit-nuxt-ui 0.7.2

package/dist/runtime/components/inputs/FUInputMenu.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { useFormKitInput } from "../../utils/useFormKitInput";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <UInputMenu
+    :id="context.id"
+    v-model="modelValue"
+    v-bind="{ ...context?.attrs }"
+    :class="styleClass"
+    :disabled="!!context?.disabled"
+    :readonly="context?.attrs.readonly ?? false"
+    :style="context?.attrs.style"
+    :color="color"
+    :highlight="!!(isInvalid || context.highlight)"
+    :size="context.size ?? 'md'"
+    :variant="context.variant ?? 'outline'"
+    :type="context?.inputType || 'text'"
+    :items="items"
+    :placeholder="context.placeholder"
+    :autofocus="context.autofocus"
+    :autofocus-delay="context.autofocusDelay"
+    :trailing-icon="context.trailingIcon"
+    :selected-icon="context.selectedIcon"
+    :delete-icon="context.deleteIcon"
+    :clear="context.clear"
+    :clear-icon="context.clearIcon"
+    :arrow="context.arrow"
+    :portal="context.portal"
+    :virtualize="context.virtualize"
+    :value-key="context.valueKey"
+    :label-key="context.labelKey"
+    :description-key="context.descriptionKey"
+    :multiple="context.multiple"
+    :fixed="context.fixed"
+    :create-item="context.createItem || false"
+    :filter-fields="context.filterFields"
+    :ignore-filter="context.ignoreFilter"
+    :default-open="context.defaultOpen"
+    :reset-search-term-on-blur="context.resetSearchTermOnBlur"
+    :reset-search-term-on-select="context.resetSearchTermOnSelect"
+    :reset-model-value-on-clear="context.resetModelValueOnClear"
+    :highlight-on-hover="context.highlightOnHover"
+    :open-on-click="context.openOnClick"
+    :open-on-focus="context.openOnFocus"
+    :leading="context.leading"
+    :leading-icon="context.leadingIcon"
+    :trailing="context.trailing"
+    :loading="context.loading"
+    :loading-icon="context.loadingIcon"
+    :list="context.list"
+    :autocomplete="context.autocomplete"
+    :search-term="context.searchTerm"
+    :ui="context.ui"
+    @change="handleChange"
+    @update:model-value="handleInput"
+  />
+</template>

package/dist/runtime/components/inputs/FUInputMenu.vue.d.ts

@@ -0,0 +1,73 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+export interface InputMenuItem {
+    label?: string;
+    icon?: string;
+    avatar?: {
+        src?: string;
+        alt?: string;
+    };
+    chip?: string | number;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export interface FormKitInputMenuProps {
+    options?: string[] | InputMenuItem[];
+    inputType?: 'number' | 'search' | 'image' | 'text' | 'button' | 'time' | 'color' | 'checkbox' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'month' | 'password' | 'radio' | 'range' | 'reset' | 'submit' | 'tel' | 'url' | 'week' | string & {};
+    placeholder?: string;
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    trailingIcon?: string;
+    selectedIcon?: string;
+    deleteIcon?: string;
+    clear?: boolean;
+    clearIcon?: string;
+    arrow?: boolean;
+    portal?: boolean;
+    virtualize?: boolean;
+    valueKey?: string;
+    labelKey?: string;
+    descriptionKey?: string;
+    multiple?: boolean;
+    highlight?: boolean;
+    fixed?: boolean;
+    createItem?: boolean | 'always' | {
+        position?: 'top' | 'bottom';
+        when?: 'always' | 'empty' | undefined;
+    } | undefined;
+    filterFields?: string[];
+    ignoreFilter?: false;
+    defaultOpen?: false;
+    resetSearchTermOnBlur?: boolean;
+    resetSearchTermOnSelect?: boolean;
+    resetModelValueOnClear?: boolean;
+    highlightOnHover?: boolean;
+    openOnClick?: boolean;
+    openOnFocus?: boolean;
+    icon?: string;
+    leading?: boolean;
+    leadingIcon?: string;
+    trailing?: boolean;
+    loading?: boolean;
+    loadingIcon?: string;
+    list?: string;
+    autocomplete?: string & {} | 'on' | 'off';
+    searchTerm?: string;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputMenuProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputMenuProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/inputs/FUInputNumber.d.vue.ts

@@ -0,0 +1,43 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+export interface FormKitInputNumberProps {
+    placeholder?: string;
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    highlight?: boolean;
+    fixed?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    increment?: boolean;
+    incrementIcon?: string;
+    incrementDisabled?: boolean;
+    decrement?: boolean;
+    decrementIcon?: string;
+    decrementDisabled?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    stepSnapping?: boolean;
+    formatOptions?: Intl.NumberFormatOptions;
+    disableWheelChange?: boolean;
+    invertWheelChange?: boolean;
+    focusOnChange?: boolean;
+    list: string;
+    autocomplete?: string & {} | 'on' | 'off';
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputNumberProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputNumberProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/inputs/FUInputNumber.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { useFormKitInput } from "../../utils/useFormKitInput";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <UInputNumber
+    :id="context.id"
+    v-model="modelValue"
+    v-bind="{ ...context?.attrs }"
+    :class="styleClass"
+    :disabled="!!context?.disabled"
+    :style="context?.attrs.style"
+    :color="color"
+    :size="context.size ?? 'md'"
+    :variant="context.variant ?? 'outline'"
+    :orientation="context.orientation ?? 'vertical'"
+    :highlight="isInvalid || context.highlight"
+    :fixed="context.fixed"
+    :increment="context.increment"
+    :increment-icon="context.incrementIcon"
+    :increment-disabled="context.incrementDisabled"
+    :decrement="context.decrement"
+    :decrement-icon="context.decrementIcon"
+    :decrement-disabled="context.decrementDisabled"
+    :autofocus="context.autofocus"
+    :autofocus-delay="context.autofocusDelay"
+    :min="context.min"
+    :max="context.max"
+    :step="context.step"
+    :step-snapping="context.stepSnapping"
+    :format-options="context.formatOptions"
+    :disable-wheel-change="context.disableWheelChange"
+    :invert-wheel-change="context.invertWheelChange"
+    :focus-on-change="context.focusOnChange"
+    :placeholder="context.placeholder"
+    :list="context.list"
+    :autocomplete="context.autocomplete"
+    :ui="context.ui"
+    @change="handleChange"
+    @update:model-value="handleInput"
+  />
+</template>

package/dist/runtime/components/inputs/FUInputNumber.vue.d.ts

@@ -0,0 +1,43 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+export interface FormKitInputNumberProps {
+    placeholder?: string;
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    highlight?: boolean;
+    fixed?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    increment?: boolean;
+    incrementIcon?: string;
+    incrementDisabled?: boolean;
+    decrement?: boolean;
+    decrementIcon?: string;
+    decrementDisabled?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    stepSnapping?: boolean;
+    formatOptions?: Intl.NumberFormatOptions;
+    disableWheelChange?: boolean;
+    invertWheelChange?: boolean;
+    focusOnChange?: boolean;
+    list: string;
+    autocomplete?: string & {} | 'on' | 'off';
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputNumberProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputNumberProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/inputs/FUInputTags.d.vue.ts

@@ -0,0 +1,47 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+import type { AvatarProps } from '#ui/components/Avatar.vue';
+export interface FormKitInputTagsProps {
+    placeholder?: string;
+    maxLength?: number;
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    deleteIcon?: string;
+    highlight?: boolean;
+    fixed?: boolean;
+    addOnPaste?: boolean;
+    addOnTab?: boolean;
+    addOnBlur?: boolean;
+    duplicate?: boolean;
+    delimiters?: string | RegExp;
+    max: number;
+    convertValue?: (value: string) => string;
+    displayValue?: (value: string) => string;
+    icon?: string;
+    avatar?: AvatarProps;
+    leading?: boolean;
+    leadingIcon?: string;
+    trailing?: boolean;
+    trailingIcon?: string;
+    loading?: boolean;
+    loadingIcon?: boolean;
+    list?: string;
+    autocomplete?: string & {} | 'on' | 'off';
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputTagsProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputTagsProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/inputs/FUInputTags.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { useFormKitInput } from "../../utils/useFormKitInput";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <UInputTags
+    :id="context.id"
+    v-model="modelValue"
+    v-bind="{ ...context?.attrs }"
+    :class="styleClass"
+    :disabled="!!context?.disabled"
+    :readonly="context?.attrs.readonly ?? false"
+    :style="context?.attrs.style"
+    :color="color"
+    :highlight="isInvalid || context.highlight"
+    :size="context.size ?? 'md'"
+    :variant="context.variant ?? 'outline'"
+    :placeholder="context.placeholder"
+    :max-length="context.maxLength"
+    :autofocus="context.autofocus"
+    :autofocus-delay="context.autofocusDelay ?? 0"
+    :delete-icon="context.deleteIcon"
+    :fixed="context.fixed"
+    :add-on-paste="context.addOnPaste"
+    :add-on-tab="context.addOnTab"
+    :add-on-blur="context.addOnBlur"
+    :duplicate="context.duplicate"
+    :delimiters="context.delimiters"
+    :max="context.max"
+    :convert-value="context.convertValue"
+    :display-value="context.displayValue"
+    :icon="context.icon"
+    :avatar="context.avatar"
+    :leading="context.leading"
+    :leading-icon="context.leadingIcon"
+    :trailing="context.trailing"
+    :trailing-icon="context.trailingIcon"
+    :loading="context.loading"
+    :loading-icon="context.loadingIcon"
+    :list="context.list"
+    :autocomplete="context.autocomplete || 'off'"
+    :ui="context.ui"
+    @change="handleChange"
+    @update:model-value="handleInput"
+  />
+</template>

package/dist/runtime/components/inputs/FUInputTags.vue.d.ts

@@ -0,0 +1,47 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+import type { AvatarProps } from '#ui/components/Avatar.vue';
+export interface FormKitInputTagsProps {
+    placeholder?: string;
+    maxLength?: number;
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    deleteIcon?: string;
+    highlight?: boolean;
+    fixed?: boolean;
+    addOnPaste?: boolean;
+    addOnTab?: boolean;
+    addOnBlur?: boolean;
+    duplicate?: boolean;
+    delimiters?: string | RegExp;
+    max: number;
+    convertValue?: (value: string) => string;
+    displayValue?: (value: string) => string;
+    icon?: string;
+    avatar?: AvatarProps;
+    leading?: boolean;
+    leadingIcon?: string;
+    trailing?: boolean;
+    trailingIcon?: string;
+    loading?: boolean;
+    loadingIcon?: boolean;
+    list?: string;
+    autocomplete?: string & {} | 'on' | 'off';
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputTagsProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputTagsProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/inputs/FUInputTime.d.vue.ts

@@ -0,0 +1,50 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+import type { Time } from '@internationalized/date';
+import type { AvatarProps } from '#ui/components/Avatar.vue';
+type DateStep = {
+    hour?: number;
+    minute?: number;
+    second?: number;
+};
+export interface FormKitInputTimeProps {
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    highlight?: boolean;
+    fixed?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    defaultValue: Time;
+    placeholder?: Time;
+    defaultPlaceholder?: Time;
+    hourCycle?: 12 | 24;
+    step?: DateStep;
+    stepSnapping?: boolean;
+    granularity?: 'hour' | 'minute' | 'second';
+    hideTimeZone?: boolean;
+    maxValue?: Time;
+    minValue?: Time;
+    icon?: string;
+    avatar?: AvatarProps;
+    leading?: boolean;
+    leadingIcon?: string;
+    trailing?: boolean;
+    trailingIcon?: string;
+    loading?: boolean;
+    loadingIcon?: string;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputTimeProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputTimeProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/inputs/FUInputTime.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { useFormKitInput } from "../../utils/useFormKitInput";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <UInputTime
+    :id="context.id"
+    v-model="modelValue"
+    v-bind="{ ...context?.attrs }"
+    :default-value="context.defaultValue"
+    :class="styleClass"
+    :disabled="!!context?.disabled"
+    :readonly="context?.attrs.readonly ?? false"
+    :style="context?.attrs.style"
+    :color="color"
+    :highlight="isInvalid || context.highlight"
+    :size="context.size ?? 'md'"
+    :variant="context.variant ?? 'outline'"
+    :placeholder="context.placeholder"
+    :default-placeholder="context.defaultPlaceholder"
+    :autofocus="context.autofocus"
+    :autofocus-delay="context.autofocusDelay"
+    :fixed="context.fixed"
+    :icon="context.icon"
+    :avatar="context.avatar"
+    :leading="context.leading"
+    :leading-icon="context.leadingIcon"
+    :trailing="context.trailing"
+    :trailing-icon="context.trailingIcon"
+    :loading="context.loading"
+    :loading-icon="context.loadingIcon"
+    :hour-cycle="context.hourCycle"
+    :step="context.step"
+    :step-snapping="context.stepSnapping"
+    :granularity="context.granularity"
+    :hide-time-zone="context.hideTimeZone"
+    :max-value="context.maxValue"
+    :min-value="context.minValue"
+    :ui="context.ui"
+    @change="handleChange"
+    @update:model-value="handleInput"
+  />
+</template>

package/dist/runtime/components/inputs/FUInputTime.vue.d.ts

@@ -0,0 +1,50 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+import type { Time } from '@internationalized/date';
+import type { AvatarProps } from '#ui/components/Avatar.vue';
+type DateStep = {
+    hour?: number;
+    minute?: number;
+    second?: number;
+};
+export interface FormKitInputTimeProps {
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    highlight?: boolean;
+    fixed?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    defaultValue: Time;
+    placeholder?: Time;
+    defaultPlaceholder?: Time;
+    hourCycle?: 12 | 24;
+    step?: DateStep;
+    stepSnapping?: boolean;
+    granularity?: 'hour' | 'minute' | 'second';
+    hideTimeZone?: boolean;
+    maxValue?: Time;
+    minValue?: Time;
+    icon?: string;
+    avatar?: AvatarProps;
+    leading?: boolean;
+    leadingIcon?: string;
+    trailing?: boolean;
+    trailingIcon?: string;
+    loading?: boolean;
+    loadingIcon?: string;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputTimeProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputTimeProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/inputs/FUPinInput.d.vue.ts

@@ -0,0 +1,30 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+export interface FormKitPinInputProps {
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    length?: string | number;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    highlight?: boolean;
+    fixed?: boolean;
+    defaultValue?: string[] | undefined;
+    mask?: boolean;
+    otp?: boolean;
+    placeholder?: string;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPinInputProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitPinInputProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/inputs/FUPinInput.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useFormKitInput } from "../../utils/useFormKitInput";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <UPinInput
+    :id="context.id"
+    v-model="modelValue"
+    v-bind="{ ...context?.attrs }"
+    :default-value="context.defaultValue"
+    :class="styleClass"
+    :disabled="!!context?.disabled"
+    :readonly="context?.attrs.readonly ?? false"
+    :style="context?.attrs.style"
+    :color="color"
+    :highlight="isInvalid || context.highlight"
+    :size="context.size ?? 'md'"
+    :variant="context.variant ?? 'outline'"
+    :length="context.length ?? 5"
+    :autofocus="context.autofocus"
+    :autofocus-delay="context.autofocusDelay"
+    :fixed="context.fixed"
+    :mask="context.mask"
+    :otp="context.otp"
+    :placeholder="context.placeholder"
+    :ui="context.ui"
+    @change="handleChange"
+    @update:model-value="handleInput"
+  />
+</template>