@sfxcode/nuxt-ui-formkit 0.9.1 → 0.10.0

package/README.md

@@ -18,7 +18,7 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 
 ## Features
 
-✨ **16 Input Components** - Complete set of FormKit-wrapped Nuxt UI input components
+✨ **17 Input Components** - Complete set of FormKit-wrapped Nuxt UI input components
 - `nuxtUICheckbox` - Single checkbox with label and description
 - `nuxtUICheckboxGroup` - Multiple checkbox selection
 - `nuxtUIColorPicker` - Color selection with multiple formats
@@ -28,6 +28,7 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 - `nuxtUIInputNumber` - Number input with increment/decrement buttons
 - `nuxtUIInputTags` - Tag input with custom delimiters
 - `nuxtUIInputTime` - Time picker with 12/24-hour format
+- `nuxtUIListbox` - Listbox for single/multiple selection with filtering
 - `nuxtUIPinInput` - PIN/OTP entry component
 - `nuxtUIRadioGroup` - Radio button group for single selection
 - `nuxtUISelect` - Select dropdown with search
@@ -289,6 +290,7 @@ The playground includes comprehensive examples for all components:
 - [InputNumber](./playground/app/pages/components/input/input-number.vue)
 - [InputTags](./playground/app/pages/components/input/input-tags.vue)
 - [InputTime](./playground/app/pages/components/input/input-time.vue)
+- [Listbox](./playground/app/pages/components/input/listbox.vue)
 - [PinInput](./playground/app/pages/components/input/pin-input.vue)
 - [RadioGroup](./playground/app/pages/components/input/radio-group.vue)
 - [Select](./playground/app/pages/components/input/select.vue)
@@ -375,6 +377,7 @@ export default defineFormKitConfig({
 import { 
   nuxtUICheckboxDefinition,
   nuxtUIInputDefinition,
+  nuxtUIListboxDefinition,
   nuxtUISelectDefinition 
 } from '@sfxcode/nuxt-ui-formkit/definitions'
 
@@ -382,6 +385,7 @@ export default defineFormKitConfig({
   inputs: {
     nuxtUICheckbox: nuxtUICheckboxDefinition,
     nuxtUIInput: nuxtUIInputDefinition,
+    nuxtUIListbox: nuxtUIListboxDefinition,
     nuxtUISelect: nuxtUISelectDefinition,
   },
 })

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "0.9.1",
+  "version": "0.10.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -0,0 +1,63 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import { type PropType } from 'vue';
+export interface ListboxItem {
+    label?: string;
+    description?: string;
+    icon?: string;
+    avatar?: Record<string, unknown>;
+    chip?: string | number | Record<string, unknown>;
+    type?: 'label' | 'separator' | 'item';
+    disabled?: boolean;
+    onSelect?: (event: Event) => void;
+    class?: unknown;
+    ui?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export interface FormKitListboxProps {
+    options?: string[] | ListboxItem[] | ListboxItem[][];
+    as?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    by?: string | ((a: unknown, b: unknown) => boolean);
+    displayMode?: 'single' | 'transfer';
+    transferLeftHeaderText?: string;
+    transferRightHeaderText?: string;
+    transferHeaderClass?: string;
+    transferAll?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    selectionBehavior?: 'toggle' | 'replace';
+    disabled?: boolean;
+    defaultValue?: unknown;
+    multiple?: boolean;
+    valueKey?: string;
+    labelKey?: string;
+    descriptionKey?: string;
+    loading?: boolean;
+    loadingIcon?: string;
+    filter?: boolean | Record<string, unknown>;
+    filterFields?: string[];
+    ignoreFilter?: boolean;
+    selectedIcon?: string;
+    virtualize?: boolean | {
+        overscan?: number;
+        estimateSize?: number | ((index: number) => number);
+    };
+    highlight?: boolean;
+    highlightOnHover?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    searchTerm?: string;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitListboxProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitListboxProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,230 @@
+<script setup>
+import { computed } from "vue";
+import { useFormKitInput } from "../../utils/useFormKitInput";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, handleChange, isInvalid, styleClass, modelValue, items, validSlotNames } = useFormKitInput(props.context);
+const targetItems = ref(modelValue.value || []);
+const sourceSelection = ref([]);
+const targetSelection = ref([]);
+const transferHeaderClass = computed(() => {
+  const baseClass = "text-sm font-medium text-highlighted";
+  return props.context.transferHeaderClass ? props.context.transferHeaderClass : baseClass;
+});
+const sourceItems = computed(() => {
+  const valueKey = props.context?.valueKey || "value";
+  return items.value.filter((item) => !targetItems.value.some((t) => t[valueKey] === item[valueKey]));
+});
+function transferSelected() {
+  targetItems.value = [...targetItems.value, ...sourceSelection.value];
+  sourceSelection.value = [];
+}
+function transferAll() {
+  targetItems.value = [...targetItems.value, ...sourceItems.value];
+  sourceSelection.value = [];
+}
+function removeSelected() {
+  const valueKey = props.context?.valueKey || "value";
+  targetItems.value = targetItems.value.filter((item) => !targetSelection.value.some((t) => t[valueKey] === item[valueKey]));
+  targetSelection.value = [];
+}
+function removeAll() {
+  targetItems.value = [];
+  targetSelection.value = [];
+}
+watch(targetItems, (newVal) => {
+  modelValue.value = newVal;
+});
+</script>
+
+<template>
+  <UListbox
+    v-if="!context.displayMode || context.displayMode === 'single'"
+    :id="context.id"
+    v-model="modelValue"
+    v-bind="{ ...context?.attrs }"
+    :class="styleClass"
+    :style="context?.attrs.style"
+    :as="context.as"
+    :size="context.size ?? 'md'"
+    :items="items"
+    :by="context.by"
+    :orientation="context.orientation"
+    :selection-behavior="context.selectionBehavior"
+    :disabled="!!context?.disabled"
+    :default-value="context.defaultValue"
+    :multiple="context.multiple"
+    :value-key="context.valueKey"
+    :label-key="context.labelKey"
+    :description-key="context.descriptionKey"
+    :loading="context.loading"
+    :loading-icon="context.loadingIcon"
+    :filter="context.filter"
+    :filter-fields="context.filterFields"
+    :ignore-filter="context.ignoreFilter"
+    :selected-icon="context.selectedIcon"
+    :virtualize="context.virtualize"
+    :highlight="!!(isInvalid || context.highlight)"
+    :highlight-on-hover="context.highlightOnHover"
+    :autofocus="context.autofocus"
+    :autofocus-delay="context.autofocusDelay"
+    :search-term="context.searchTerm"
+    :ui="context.ui"
+    @change="handleChange"
+    @update:model-value="handleInput"
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UListbox>
+  <div
+    v-if="context.displayMode === 'transfer'"
+    class="flex items-stretch gap-4 w-full"
+  >
+    <div class="flex flex-col flex-1 gap-1">
+      <span
+        v-if="context.transferLeftHeaderText"
+        :class="transferHeaderClass"
+      >{{ context.transferLeftHeaderText }}</span>
+      <UListbox
+        :id="context.id + '-transfer-left'"
+        v-model="sourceSelection"
+        v-bind="{ ...context?.attrs }"
+        :class="styleClass"
+        :style="context?.attrs.style"
+        :as="context.as"
+        :size="context.size ?? 'md'"
+        :items="sourceItems"
+        :by="context.by"
+        :orientation="context.orientation"
+        :selection-behavior="context.selectionBehavior"
+        :disabled="!!context?.disabled"
+        :default-value="context.defaultValue"
+        :multiple="true"
+        :value-key="context.valueKey"
+        :label-key="context.labelKey"
+        :description-key="context.descriptionKey"
+        :loading="context.loading"
+        :loading-icon="context.loadingIcon"
+        :filter="context.filter"
+        :filter-fields="context.filterFields"
+        :ignore-filter="context.ignoreFilter"
+        :selected-icon="context.selectedIcon"
+        :virtualize="context.virtualize"
+        :highlight="!!(isInvalid || context.highlight)"
+        :highlight-on-hover="context.highlightOnHover"
+        :autofocus="context.autofocus"
+        :autofocus-delay="context.autofocusDelay"
+        :search-term="context.searchTerm"
+        :ui="context.ui"
+        @change="handleChange"
+        @update:model-value="handleInput"
+      >
+        <template
+          v-for="slotName in validSlotNames"
+          :key="slotName"
+          #[slotName]="slotProps"
+        >
+          <component
+            :is="context?.slots[slotName]"
+            v-bind="{ ...context, ...slotProps }"
+          />
+        </template>
+      </UListbox>
+    </div>
+    <div class="flex flex-col items-center justify-center gap-1">
+      <UButton
+        icon="i-lucide-chevron-right"
+        color="neutral"
+        variant="outline"
+        :disabled="sourceSelection.length === 0"
+        @click="transferSelected"
+      />
+      <UButton
+        v-if="context.transferAll"
+        icon="i-lucide-chevrons-right"
+        color="neutral"
+        variant="outline"
+        :disabled="sourceItems.length === 0"
+        @click="transferAll"
+      />
+      <UButton
+        icon="i-lucide-chevron-left"
+        color="neutral"
+        variant="outline"
+        :disabled="!targetSelection.length"
+        @click="removeSelected"
+      />
+      <UButton
+        v-if="context.transferAll"
+        icon="i-lucide-chevrons-left"
+        color="neutral"
+        variant="outline"
+        :disabled="targetItems.length === 0"
+        @click="removeAll"
+      />
+    </div>
+    <div class="flex flex-col flex-1 gap-1">
+      <span
+        v-if="context.transferRightHeaderText"
+        :class="transferHeaderClass"
+      >{{ context.transferRightHeaderText }}</span>
+      <UListbox
+        :id="context.id + '-transfer-right'"
+        v-model="targetSelection"
+        v-bind="{ ...context?.attrs }"
+        :class="styleClass"
+        :style="context?.attrs.style"
+        :as="context.as"
+        :size="context.size ?? 'md'"
+        :items="targetItems"
+        :by="context.by"
+        :orientation="context.orientation"
+        :selection-behavior="context.selectionBehavior"
+        :disabled="!!context?.disabled"
+        :default-value="context.defaultValue"
+        :multiple="true"
+        :value-key="context.valueKey"
+        :label-key="context.labelKey"
+        :description-key="context.descriptionKey"
+        :loading="context.loading"
+        :loading-icon="context.loadingIcon"
+        :filter="context.filter"
+        :filter-fields="context.filterFields"
+        :ignore-filter="context.ignoreFilter"
+        :selected-icon="context.selectedIcon"
+        :virtualize="context.virtualize"
+        :highlight="!!(isInvalid || context.highlight)"
+        :highlight-on-hover="context.highlightOnHover"
+        :autofocus="context.autofocus"
+        :autofocus-delay="context.autofocusDelay"
+        :search-term="context.searchTerm"
+        :ui="context.ui"
+        @change="handleChange"
+        @update:model-value="handleInput"
+      >
+        <template
+          v-for="slotName in validSlotNames"
+          :key="slotName"
+          #[slotName]="slotProps"
+        >
+          <component
+            :is="context?.slots[slotName]"
+            v-bind="{ ...context, ...slotProps }"
+          />
+        </template>
+      </UListbox>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,63 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import { type PropType } from 'vue';
+export interface ListboxItem {
+    label?: string;
+    description?: string;
+    icon?: string;
+    avatar?: Record<string, unknown>;
+    chip?: string | number | Record<string, unknown>;
+    type?: 'label' | 'separator' | 'item';
+    disabled?: boolean;
+    onSelect?: (event: Event) => void;
+    class?: unknown;
+    ui?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export interface FormKitListboxProps {
+    options?: string[] | ListboxItem[] | ListboxItem[][];
+    as?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    by?: string | ((a: unknown, b: unknown) => boolean);
+    displayMode?: 'single' | 'transfer';
+    transferLeftHeaderText?: string;
+    transferRightHeaderText?: string;
+    transferHeaderClass?: string;
+    transferAll?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    selectionBehavior?: 'toggle' | 'replace';
+    disabled?: boolean;
+    defaultValue?: unknown;
+    multiple?: boolean;
+    valueKey?: string;
+    labelKey?: string;
+    descriptionKey?: string;
+    loading?: boolean;
+    loadingIcon?: string;
+    filter?: boolean | Record<string, unknown>;
+    filterFields?: string[];
+    ignoreFilter?: boolean;
+    selectedIcon?: string;
+    virtualize?: boolean | {
+        overscan?: number;
+        estimateSize?: number | ((index: number) => number);
+    };
+    highlight?: boolean;
+    highlightOnHover?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    searchTerm?: string;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitListboxProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitListboxProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/formkit/definitions/index.d.ts

@@ -10,6 +10,7 @@ export declare const nuxtUIInputs: {
     nuxtUIInputNumber: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIInputTags: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIInputTime: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUIListbox: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIPinInput: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIRadioGroup: import("@formkit/core").FormKitTypeDefinition;
     nuxtUISelect: import("@formkit/core").FormKitTypeDefinition;

package/dist/runtime/formkit/definitions/index.js

@@ -1,4 +1,4 @@
-import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.js";
+import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.js";
 import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.js";
 export * from "./input.js";
 export * from "./output.js";
@@ -12,6 +12,7 @@ export const nuxtUIInputs = {
   nuxtUIInputNumber: nuxtUIInputNumberDefinition,
   nuxtUIInputTags: nuxtUIInputTagsDefinition,
   nuxtUIInputTime: nuxtUIInputTimeDefinition,
+  nuxtUIListbox: nuxtUIListboxDefinition,
   nuxtUIPinInput: nuxtUIPinInputDefinition,
   nuxtUIRadioGroup: nuxtUIRadioGroupDefinition,
   nuxtUISelect: nuxtUISelectDefinition,

package/dist/runtime/formkit/definitions/index.mjs

@@ -1,4 +1,4 @@
-import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.mjs";
+import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.mjs";
 import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.mjs";
 export * from "./input.mjs";
 export * from "./output.mjs";
@@ -12,6 +12,7 @@ export const nuxtUIInputs = {
   nuxtUIInputNumber: nuxtUIInputNumberDefinition,
   nuxtUIInputTags: nuxtUIInputTagsDefinition,
   nuxtUIInputTime: nuxtUIInputTimeDefinition,
+  nuxtUIListbox: nuxtUIListboxDefinition,
   nuxtUIPinInput: nuxtUIPinInputDefinition,
   nuxtUIRadioGroup: nuxtUIRadioGroupDefinition,
   nuxtUISelect: nuxtUISelectDefinition,

package/dist/runtime/formkit/definitions/input.d.ts

@@ -8,6 +8,7 @@ export declare const nuxtUIInputMenuDefinition: FormKitTypeDefinition;
 export declare const nuxtUIInputNumberDefinition: FormKitTypeDefinition;
 export declare const nuxtUIInputTagsDefinition: FormKitTypeDefinition;
 export declare const nuxtUIInputTimeDefinition: FormKitTypeDefinition;
+export declare const nuxtUIListboxDefinition: FormKitTypeDefinition;
 export declare const nuxtUIPinInputDefinition: FormKitTypeDefinition;
 export declare const nuxtUIRadioGroupDefinition: FormKitTypeDefinition;
 export declare const nuxtUISelectDefinition: FormKitTypeDefinition;

package/dist/runtime/formkit/definitions/input.js

@@ -8,6 +8,7 @@ import FUInputMenu from "../../../runtime/components/inputs/FUInputMenu.vue";
 import FUInputNumber from "../../../runtime/components/inputs/FUInputNumber.vue";
 import FUInputTags from "../../../runtime/components/inputs/FUInputTags.vue";
 import FUInputTime from "../../../runtime/components/inputs/FUInputTime.vue";
+import FUListbox from "../../../runtime/components/inputs/FUListbox.vue";
 import FUPinInput from "../../../runtime/components/inputs/FUPinInput.vue";
 import FURadioGroup from "../../../runtime/components/inputs/FURadioGroup.vue";
 import FUSelect from "../../../runtime/components/inputs/FUSelect.vue";
@@ -51,6 +52,10 @@ export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
   props: ["color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "defaultValue", "placeholder", "defaultPlaceholder", "hourCycle", "step", "stepSnapping", "granularity", "hideTimeZone", "maxValue", "minValue", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "ui"],
   family: "NuxtUIInput"
 });
+export const nuxtUIListboxDefinition = createInput(FUListbox, {
+  props: ["options", "as", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass"],
+  family: "NuxtUIInput"
+});
 export const nuxtUIPinInputDefinition = createInput(FUPinInput, {
   props: ["color", "variant", "size", "length", "autofocus", "autofocusDelay", "highlight", "fixed", "defaultValue", "mask", "otp", "placeholder", "ui"],
   family: "NuxtUIInput"

package/dist/runtime/formkit/definitions/input.mjs

@@ -8,6 +8,7 @@ import FUInputMenu from "../../../runtime/components/inputs/FUInputMenu.vue";
 import FUInputNumber from "../../../runtime/components/inputs/FUInputNumber.vue";
 import FUInputTags from "../../../runtime/components/inputs/FUInputTags.vue";
 import FUInputTime from "../../../runtime/components/inputs/FUInputTime.vue";
+import FUListbox from "../../../runtime/components/inputs/FUListbox.vue";
 import FUPinInput from "../../../runtime/components/inputs/FUPinInput.vue";
 import FURadioGroup from "../../../runtime/components/inputs/FURadioGroup.vue";
 import FUSelect from "../../../runtime/components/inputs/FUSelect.vue";
@@ -51,6 +52,10 @@ export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
   props: ["color", "variant", "size", "highlight", "fixed", "autofocus", "autofocusDelay", "defaultValue", "placeholder", "defaultPlaceholder", "hourCycle", "step", "stepSnapping", "granularity", "hideTimeZone", "maxValue", "minValue", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "ui"],
   family: "NuxtUIInput"
 });
+export const nuxtUIListboxDefinition = createInput(FUListbox, {
+  props: ["options", "as", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass"],
+  family: "NuxtUIInput"
+});
 export const nuxtUIPinInputDefinition = createInput(FUPinInput, {
   props: ["color", "variant", "size", "length", "autofocus", "autofocusDelay", "highlight", "fixed", "defaultValue", "mask", "otp", "placeholder", "ui"],
   family: "NuxtUIInput"

package/dist/runtime/formkit/index.d.ts

@@ -1,5 +1,5 @@
 import type { FormKitBaseSlots, FormKitInputs } from '@formkit/inputs';
-import type { CheckboxSlots, CheckboxGroupSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, SwitchSlots } from '@nuxt/ui';
+import type { CheckboxSlots, CheckboxGroupSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, ListboxSlots, SwitchSlots } from '@nuxt/ui';
 export * from './definitions/index.js';
 export * from './plugins/index.js';
 /**
@@ -35,6 +35,9 @@ declare module '@formkit/inputs' {
         nuxtUIInputTime: {
             type: 'nuxtUIInputTime';
         };
+        nuxtUIListbox: {
+            type: 'nuxtUIListbox';
+        };
         nuxtUIPinInput: {
             type: 'nuxtUIPinInput';
         };
@@ -84,6 +87,7 @@ declare module '@formkit/inputs' {
         nuxtUIInputNumber: MergeSlots<FormKitBaseSlots<Props>, InputNumberSlots>;
         nuxtUIInputTags: MergeSlots<FormKitBaseSlots<Props>, InputTagsSlots>;
         nuxtUIInputTime: MergeSlots<FormKitBaseSlots<Props>, InputTimeSlots>;
+        nuxtUIListbox: MergeSlots<FormKitBaseSlots<Props>, ListboxSlots>;
         nuxtUIRadioGroup: MergeSlots<FormKitBaseSlots<Props>, RadioGroupSlots>;
         nuxtUISelect: MergeSlots<FormKitBaseSlots<Props>, SelectSlots>;
         nuxtUISelectMenu: MergeSlots<FormKitBaseSlots<Props>, SelectMenuSlots>;

package/dist/runtime/plugin.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/utils/useFormKitInput.d.ts

@@ -3,7 +3,7 @@ export declare function useFormKitInput(context: FormKitFrameworkContext): {
     isInvalid: import("vue").ComputedRef<boolean>;
     validSlotNames: import("vue").ComputedRef<string[]>;
     styleClass: import("vue").ComputedRef<string>;
-    color: import("vue").ComputedRef<"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral">;
+    color: import("vue").ComputedRef<"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral">;
     handleBlur: (event: FocusEvent) => void;
     handleChange: (_: unknown) => void;
     handleInput: (_: unknown) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/nuxt-ui-formkit",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
   "author": {
     "name": "Tom",
@@ -34,7 +34,7 @@
     "design-system",
     "form-builder"
   ],
-  "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319",
+  "packageManager": "pnpm@10.33.2+sha512.a90faf6feeab71ad6c6e57f94e0fe1a12f5dcc22cd754db40ae9593eb6a3e0b6b12e3540218bb37ae083404b1f2ce6db2a4121e979829b4aff94b99f49da1cf8",
   "type": "module",
   "exports": {
     ".": {
@@ -79,7 +79,7 @@
     "dev": "npm run dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --patch --release && npm publish --access=public && git push --follow-tags",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --major --release && npm publish --access=public && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest watch",
@@ -89,11 +89,11 @@
     "@formkit/addons": "^2.0.0",
     "@formkit/nuxt": "^2.0.0",
     "@nuxt/kit": "^4.4.2",
-    "@nuxt/ui": "^4.6.1"
+    "@nuxt/ui": "^4.7.0"
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.3",
-    "@iconify-json/lucide": "^1.2.102",
+    "@iconify-json/lucide": "^1.2.103",
     "@iconify-json/simple-icons": "^1.2.79",
     "@nuxt/devtools": "4.0.0-alpha.4",
     "@nuxt/eslint-config": "^1.15.2",