@sfxcode/nuxt-ui-formkit 1.2.5 → 1.2.6

package/README.md

@@ -18,7 +18,7 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 
 ## Features
 
-✨ **20 Input Components** - Complete set of FormKit-wrapped Nuxt UI input components
+✨ **21 Input Components** - Complete set of FormKit-wrapped Nuxt UI input components
 - `nuxtUICalendar` - Bare date-grid picker with range/multiple selection
 - `nuxtUICheckbox` - Single checkbox with label and description
 - `nuxtUICheckboxGroup` - Multiple checkbox selection
@@ -39,6 +39,7 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 - `nuxtUISlider` - Range slider for numeric values
 - `nuxtUISwitch` - Toggle switch for boolean states
 - `nuxtUITextarea` - Multi-line text input with autoresize
+- `nuxtUITree` - Hierarchical selection input (categories, org charts, file trees)
 
 🔁 **Repeater Component** - Dynamic repeatable form sections
 - `nuxtUIRepeater` - Create dynamic lists with add, remove, clone, and reorder functionality

package/dist/module.json

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

package/dist/runtime/components/FUAutoForm.d.vue.ts

@@ -6,7 +6,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {
-        type: PropType<Record<string, unknown>>;
+        type: PropType<Record<string, unknown> | Record<string, unknown>[]>;
         default: null;
     };
     overrides: {
@@ -28,7 +28,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "update:modelValue": (value: Record<string, unknown> | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
-        type: PropType<Record<string, unknown>>;
+        type: PropType<Record<string, unknown> | Record<string, unknown>[]>;
         default: null;
     };
     overrides: {
@@ -49,7 +49,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: Record<string, unknown> | undefined) => any) | undefined;
 }>, {
-    data: Record<string, unknown>;
+    data: Record<string, unknown> | Record<string, unknown>[];
     overrides: AutoFormOverrides;
     valibotSchema: ValibotLikeSchema;
     zodSchema: ZodLikeSchema;

package/dist/runtime/components/FUAutoForm.vue

@@ -1,11 +1,11 @@
 <script setup>
 import { ref, watch } from "vue";
-import { inferFormSchema, inferFormSchemaFromValibot, inferFormSchemaFromZod } from "../composables/useFormKitAutoForm";
+import { inferFormSchema, inferFormSchemaFromSamples, inferFormSchemaFromValibot, inferFormSchemaFromZod } from "../composables/useFormKitAutoForm";
 import FUDataEdit from "./FUDataEdit.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   data: {
-    type: Object,
+    type: [Object, Array],
     default: null
   },
   overrides: {
@@ -22,7 +22,7 @@ const props = defineProps({
   }
 });
 const formData = defineModel({ type: Object });
-if (!formData.value && props.data) {
+if (!formData.value && props.data && !Array.isArray(props.data)) {
   formData.value = props.data;
 }
 function buildSchema(data) {
@@ -32,6 +32,9 @@ function buildSchema(data) {
   if (props.zodSchema) {
     return inferFormSchemaFromZod(props.zodSchema, props.overrides);
   }
+  if (Array.isArray(data)) {
+    return inferFormSchemaFromSamples(data, props.overrides);
+  }
   return inferFormSchema(data ?? formData.value ?? {}, props.overrides);
 }
 const formSchema = ref(buildSchema(props.data));

package/dist/runtime/components/FUAutoForm.vue.d.ts

@@ -6,7 +6,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {
-        type: PropType<Record<string, unknown>>;
+        type: PropType<Record<string, unknown> | Record<string, unknown>[]>;
         default: null;
     };
     overrides: {
@@ -28,7 +28,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "update:modelValue": (value: Record<string, unknown> | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
-        type: PropType<Record<string, unknown>>;
+        type: PropType<Record<string, unknown> | Record<string, unknown>[]>;
         default: null;
     };
     overrides: {
@@ -49,7 +49,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: Record<string, unknown> | undefined) => any) | undefined;
 }>, {
-    data: Record<string, unknown>;
+    data: Record<string, unknown> | Record<string, unknown>[];
     overrides: AutoFormOverrides;
     valibotSchema: ValibotLikeSchema;
     zodSchema: ZodLikeSchema;

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

@@ -12,6 +12,7 @@ export interface FormKitCheckboxProps {
     trueValue?: unknown;
     falseValue?: unknown;
     autofocus?: false | true | 'true' | 'false';
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -13,6 +13,7 @@ const { handleInput, handleChange, handleBlur, styleClass, modelValue, color, va
   <UCheckbox
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :class="styleClass"
     :disabled="!!context?.disabled"

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

@@ -12,6 +12,7 @@ export interface FormKitCheckboxProps {
     trueValue?: unknown;
     falseValue?: unknown;
     autofocus?: false | true | 'true' | 'false';
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -30,7 +30,7 @@ const handleContainerBlur = createContainerBlurHandler(props.context);
     :label-key="context.labelKey"
     :description-key="context.descriptionKey"
     :loop="context.loop ?? false"
-    :name="context.name"
+    :name="context.node.name"
     :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"

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

@@ -37,7 +37,7 @@ const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, mod
     :file-delete="context.fileDelete"
     :file-delete-icon="context.fileDeleteIcon"
     :preview="context.preview"
-    :name="context.name"
+    :name="context.node.name"
     :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"

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

@@ -60,6 +60,7 @@ export interface FormKitInputMenuProps {
     list?: string;
     autocomplete?: string & {} | 'on' | 'off';
     searchTerm?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -13,6 +13,7 @@ const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, mod
   <UInputMenu
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :class="styleClass"
     :disabled="!!context?.disabled"

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

@@ -60,6 +60,7 @@ export interface FormKitInputMenuProps {
     list?: string;
     autocomplete?: string & {} | 'on' | 'off';
     searchTerm?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -49,6 +49,7 @@ export interface FormKitListboxProps {
     autofocus?: boolean;
     autofocusDelay?: number;
     searchTerm?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -212,6 +212,7 @@ watch(targetItems, (newVal) => {
     v-if="!context.displayMode || context.displayMode === 'single'"
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :class="styleClass"
     :style="context?.attrs.style"
@@ -278,6 +279,7 @@ watch(targetItems, (newVal) => {
       <UListbox
         :id="context.id + '-transfer-left'"
         v-model="sourceSelection"
+        :name="context.node.name + '-transfer-left'"
         v-bind="{ ...context?.attrs }"
         :class="styleClass"
         :style="context?.attrs.style"
@@ -380,6 +382,7 @@ watch(targetItems, (newVal) => {
       <UListbox
         :id="context.id + '-transfer-right'"
         v-model="targetSelection"
+        :name="context.node.name + '-transfer-right'"
         v-bind="{ ...context?.attrs }"
         :class="styleClass"
         :style="context?.attrs.style"

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

@@ -49,6 +49,7 @@ export interface FormKitListboxProps {
     autofocus?: boolean;
     autofocusDelay?: number;
     searchTerm?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -15,6 +15,7 @@ export interface FormKitPinInputProps {
     separator?: number | number[];
     type?: 'text' | 'number';
     placeholder?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -18,6 +18,7 @@ function handlePinBlur(event) {
   <UPinInput
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :default-value="context.defaultValue"
     :class="styleClass"

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

@@ -15,6 +15,7 @@ export interface FormKitPinInputProps {
     separator?: number | number[];
     type?: 'text' | 'number';
     placeholder?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -29,7 +29,7 @@ const handleContainerBlur = createContainerBlurHandler(props.context);
     :label-key="context.labelKey"
     :description-key="context.descriptionKey"
     :loop="context.loop ?? false"
-    :name="context.name"
+    :name="context.node.name"
     :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"

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

@@ -32,6 +32,7 @@ export interface FormKitSelectProps {
     trailingIcon?: string;
     loading?: boolean;
     loadingIcon?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -13,6 +13,7 @@ const { handleInput, handleChange, isInvalid, color, styleClass, modelValue, ite
   <USelect
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :class="styleClass"
     :disabled="!!context?.disabled"

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

@@ -32,6 +32,7 @@ export interface FormKitSelectProps {
     trailingIcon?: string;
     loading?: boolean;
     loadingIcon?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -58,6 +58,7 @@ export interface FormKitSelectMenuProps {
     resetModelValueOnClear?: boolean;
     highlightOnHover?: boolean;
     searchTerm?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -13,6 +13,7 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, ite
   <USelectMenu
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :class="styleClass"
     :disabled="!!context?.disabled"

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

@@ -58,6 +58,7 @@ export interface FormKitSelectMenuProps {
     resetModelValueOnClear?: boolean;
     highlightOnHover?: boolean;
     searchTerm?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -23,7 +23,7 @@ const { handleInput, handleChange, styleClass, color, modelValue, ui } = useForm
     :orientation="context.orientation ?? 'horizontal'"
     :tooltip="context.tooltip"
     :default-value="context.defaultValue"
-    :name="context.name"
+    :name="context.node.name"
     :inverted="context.inverted"
     :min="context.min"
     :max="context.max"

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

@@ -13,6 +13,7 @@ export interface FormKitSwitchProps {
     trueValue?: unknown;
     falseValue?: unknown;
     autofocus?: false | true | 'true' | 'false';
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -13,6 +13,7 @@ const { handleInput, handleChange, handleBlur, styleClass, color, modelValue, va
   <USwitch
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :class="styleClass"
     :disabled="!!context?.disabled"

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

@@ -13,6 +13,7 @@ export interface FormKitSwitchProps {
     trueValue?: unknown;
     falseValue?: unknown;
     autofocus?: false | true | 'true' | 'false';
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

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

@@ -0,0 +1,36 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+export interface FormKitTreeProps {
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    multiple?: boolean;
+    nested?: boolean;
+    virtualize?: boolean | {
+        overscan?: number;
+        estimateSize?: number | ((index: number) => number);
+    };
+    labelKey?: string;
+    trailingIcon?: string;
+    expandedIcon?: string;
+    collapsedIcon?: string;
+    expanded?: string[];
+    defaultExpanded?: string[];
+    selectionBehavior?: 'toggle' | 'replace';
+    propagateSelect?: boolean;
+    bubbleSelect?: boolean;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitTreeProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitTreeProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,52 @@
+<script setup>
+import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, styleClass, color, modelValue, items, validSlotNames, ui } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
+</script>
+
+<template>
+  <UTree
+    :id="context.id"
+    v-model="modelValue"
+    v-bind="{ ...context?.attrs }"
+    :class="styleClass"
+    :style="context?.attrs.style"
+    :color="color"
+    :size="context.size ?? 'md'"
+    :items="items"
+    :disabled="!!context?.disabled"
+    :multiple="context.multiple"
+    :nested="context.nested ?? true"
+    :virtualize="context.virtualize"
+    :label-key="context.labelKey"
+    :trailing-icon="context.trailingIcon"
+    :expanded-icon="context.expandedIcon"
+    :collapsed-icon="context.collapsedIcon"
+    :expanded="context.expanded"
+    :default-expanded="context.defaultExpanded"
+    :selection-behavior="context.selectionBehavior"
+    :propagate-select="context.propagateSelect"
+    :bubble-select="context.bubbleSelect"
+    :ui="ui"
+    @update:model-value="handleInput"
+    @focusout="handleContainerBlur"
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UTree>
+</template>

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

@@ -0,0 +1,36 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+export interface FormKitTreeProps {
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    multiple?: boolean;
+    nested?: boolean;
+    virtualize?: boolean | {
+        overscan?: number;
+        estimateSize?: number | ((index: number) => number);
+    };
+    labelKey?: string;
+    trailingIcon?: string;
+    expandedIcon?: string;
+    collapsedIcon?: string;
+    expanded?: string[];
+    defaultExpanded?: string[];
+    selectionBehavior?: 'toggle' | 'replace';
+    propagateSelect?: boolean;
+    bubbleSelect?: boolean;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitTreeProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitTreeProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useFormKitAutoForm.d.ts

@@ -1,6 +1,7 @@
 import type { FormKitSchemaNode } from '@formkit/core';
 export type AutoFormOverrides = Record<string, Record<string, unknown> | boolean>;
 export declare function inferFormSchema(data: Record<string, unknown>, overrides?: AutoFormOverrides): FormKitSchemaNode[];
+export declare function inferFormSchemaFromSamples(samples: Record<string, unknown>[], overrides?: AutoFormOverrides): FormKitSchemaNode[];
 export interface ValibotLikePipeEntry {
     kind: string;
     type: string;
@@ -33,6 +34,7 @@ export interface ZodLikeSchema {
 export declare function inferFormSchemaFromZod(schema: object, overrides?: AutoFormOverrides): FormKitSchemaNode[];
 export declare function useFormKitAutoForm(): {
     inferFormSchema: typeof inferFormSchema;
+    inferFormSchemaFromSamples: typeof inferFormSchemaFromSamples;
     inferFormSchemaFromValibot: typeof inferFormSchemaFromValibot;
     inferFormSchemaFromZod: typeof inferFormSchemaFromZod;
 };

package/dist/runtime/composables/useFormKitAutoForm.js

@@ -127,6 +127,91 @@ function inferNodes(data, overrides, pathPrefix = "") {
 export function inferFormSchema(data, overrides) {
   return inferNodes(data, overrides);
 }
+function isFilled(value) {
+  if (value === void 0 || value === null) {
+    return false;
+  }
+  if (typeof value === "string") {
+    return value !== "";
+  }
+  if (Array.isArray(value)) {
+    return value.length > 0;
+  }
+  return true;
+}
+function transposeSamples(samples) {
+  const columns = {};
+  for (const sample of samples) {
+    for (const key of Object.keys(sample)) {
+      columns[key] ??= samples.map((entry) => entry[key]);
+    }
+  }
+  return columns;
+}
+function inferSampleNode(name, values, overrides, path) {
+  const presentValues = values.filter((value) => value !== void 0 && value !== null);
+  if (presentValues.length === 0) {
+    return void 0;
+  }
+  const filledValues = presentValues.filter(isFilled);
+  const required = filledValues.length === values.length;
+  const representative = filledValues[0] ?? presentValues[0];
+  const label = humanizeKey(name);
+  const validation = required && typeof representative !== "boolean" ? "required" : void 0;
+  const base = validation ? { name, label, validation } : { name, label };
+  if (typeof representative === "boolean") {
+    return { $formkit: "nuxtUISwitch", ...base };
+  }
+  if (typeof representative === "number") {
+    return { $formkit: "nuxtUIInputNumber", ...base };
+  }
+  if (representative instanceof Date) {
+    return { $formkit: "nuxtUIInputDate", ...base, valueType: "date" };
+  }
+  if (isDateValue(representative)) {
+    return { $formkit: "nuxtUIInputDate", ...base, valueType: "calendar" };
+  }
+  if (typeof representative === "string") {
+    if (isIsoDateString(representative)) {
+      return { $formkit: "nuxtUIInputDate", ...base, valueType: "iso" };
+    }
+    if (representative.includes("\n")) {
+      return { $formkit: "nuxtUITextarea", ...base };
+    }
+    return { $formkit: "nuxtUIInput", ...base };
+  }
+  if (Array.isArray(representative)) {
+    const [first] = representative;
+    if (isPlainObject(first)) {
+      const rows = presentValues.filter(Array.isArray).flat().filter(isPlainObject);
+      return {
+        $formkit: "nuxtUIRepeater",
+        ...base,
+        newItem: blankItem(rows[0] ?? first),
+        children: inferSampleNodes(rows, overrides, path),
+        ...REPEATER_BUTTON_DEFAULTS
+      };
+    }
+    return { $formkit: "nuxtUIInputTags", ...base };
+  }
+  if (isPlainObject(representative)) {
+    return { $formkit: "group", name, children: inferSampleNodes(presentValues.filter(isPlainObject), overrides, path) };
+  }
+  return void 0;
+}
+function inferSampleNodes(samples, overrides, pathPrefix = "") {
+  return buildNodes(transposeSamples(samples), (key, values, path) => inferSampleNode(key, values, overrides, path), overrides, pathPrefix);
+}
+export function inferFormSchemaFromSamples(samples, overrides) {
+  if (!Array.isArray(samples)) {
+    return [];
+  }
+  const records = samples.filter(isPlainObject);
+  if (records.length === 0) {
+    return [];
+  }
+  return inferSampleNodes(records, overrides);
+}
 const OPTIONAL_WRAPPER_TYPES = /* @__PURE__ */ new Set(["optional", "nullable", "nullish", "exact_optional"]);
 function unwrapValibot(entry) {
   let schema = entry;
@@ -345,5 +430,5 @@ export function inferFormSchemaFromZod(schema, overrides) {
   return inferZodNodes(root.shape, overrides);
 }
 export function useFormKitAutoForm() {
-  return { inferFormSchema, inferFormSchemaFromValibot, inferFormSchemaFromZod };
+  return { inferFormSchema, inferFormSchemaFromSamples, inferFormSchemaFromValibot, inferFormSchemaFromZod };
 }

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

@@ -24,6 +24,7 @@ export declare const nuxtUIInputs: {
     nuxtUIStep: import("@formkit/core").FormKitTypeDefinition;
     nuxtUISwitch: import("@formkit/core").FormKitTypeDefinition;
     nuxtUITextarea: import("@formkit/core").FormKitTypeDefinition;
+    nuxtUITree: import("@formkit/core").FormKitTypeDefinition;
     nuxtUIRepeater: import("@formkit/core").FormKitTypeDefinition;
 };
 export declare const nuxtUIOutputs: {

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

@@ -1,4 +1,4 @@
-import { nuxtUICalendarDefinition, nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIEditorDefinition, nuxtUIFileUploadDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.js";
+import { nuxtUICalendarDefinition, nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIEditorDefinition, nuxtUIFileUploadDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition, nuxtUITreeDefinition } from "./input.js";
 import { nuxtUIMultiStepDefinition, nuxtUIStepDefinition } from "./multiStep.js";
 import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.js";
 import { nuxtUIRepeaterDefinition } from "./repeater.js";
@@ -28,6 +28,7 @@ export const nuxtUIInputs = {
   nuxtUIStep: nuxtUIStepDefinition,
   nuxtUISwitch: nuxtUISwitchDefinition,
   nuxtUITextarea: nuxtUITextareaDefinition,
+  nuxtUITree: nuxtUITreeDefinition,
   nuxtUIRepeater: nuxtUIRepeaterDefinition
 };
 export const nuxtUIOutputs = {

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

@@ -1,4 +1,4 @@
-import { nuxtUICalendarDefinition, nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIEditorDefinition, nuxtUIFileUploadDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.mjs";
+import { nuxtUICalendarDefinition, nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIEditorDefinition, nuxtUIFileUploadDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition, nuxtUITreeDefinition } from "./input.mjs";
 import { nuxtUIMultiStepDefinition, nuxtUIStepDefinition } from "./multiStep.mjs";
 import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.mjs";
 import { nuxtUIRepeaterDefinition } from "./repeater.mjs";
@@ -28,6 +28,7 @@ export const nuxtUIInputs = {
   nuxtUIStep: nuxtUIStepDefinition,
   nuxtUISwitch: nuxtUISwitchDefinition,
   nuxtUITextarea: nuxtUITextareaDefinition,
+  nuxtUITree: nuxtUITreeDefinition,
   nuxtUIRepeater: nuxtUIRepeaterDefinition
 };
 export const nuxtUIOutputs = {

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

@@ -19,3 +19,4 @@ export declare const nuxtUISelectMenuDefinition: FormKitTypeDefinition;
 export declare const nuxtUISliderDefinition: FormKitTypeDefinition;
 export declare const nuxtUISwitchDefinition: FormKitTypeDefinition;
 export declare const nuxtUITextareaDefinition: FormKitTypeDefinition;
+export declare const nuxtUITreeDefinition: FormKitTypeDefinition;

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

@@ -19,12 +19,13 @@ import FUSelectMenu from "../../../runtime/components/inputs/FUSelectMenu.vue";
 import FUSlider from "../../../runtime/components/inputs/FUSlider.vue";
 import FUSwitch from "../../../runtime/components/inputs/FUSwitch.vue";
 import FUTextarea from "../../../runtime/components/inputs/FUTextarea.vue";
+import FUTree from "../../../runtime/components/inputs/FUTree.vue";
 export const nuxtUICalendarDefinition = createInput(FUCalendar, {
   props: ["type", "range", "multiple", "color", "variant", "size", "weekNumbers", "monthControls", "yearControls", "viewControl", "defaultValue", "minValue", "maxValue", "isDateDisabled", "isDateUnavailable", "ui", "valueType", "timeZone"],
   family: "NuxtUIInput"
 });
 export const nuxtUICheckboxDefinition = createInput(FUCheckbox, {
-  props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "trueValue", "falseValue", "autofocus", "ui"],
+  props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "trueValue", "falseValue", "autofocus", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUICheckboxGroupDefinition = createInput(FUCheckboxGroup, {
@@ -52,7 +53,7 @@ export const nuxtUIInputDateDefinition = createInput(FUInputDate, {
   family: "NuxtUIInput"
 });
 export const nuxtUIInputMenuDefinition = createInput(FUInputMenu, {
-  props: ["options", "inputType", "placeholder", "color", "variant", "size", "autofocus", "autofocusDelay", "trailingIcon", "selectedIcon", "deleteIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "mode", "by", "open", "valueKey", "labelKey", "descriptionKey", "multiple", "highlight", "fixed", "createItem", "filterFields", "ignoreFilter", "defaultOpen", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover", "openOnClick", "openOnFocus", "icon", "leading", "leadingIcon", "trailing", "loading", "loadingIcon", "list", "autocomplete", "searchTerm", "ui"],
+  props: ["options", "inputType", "placeholder", "color", "variant", "size", "autofocus", "autofocusDelay", "trailingIcon", "selectedIcon", "deleteIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "mode", "by", "open", "valueKey", "labelKey", "descriptionKey", "multiple", "highlight", "fixed", "createItem", "filterFields", "ignoreFilter", "defaultOpen", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover", "openOnClick", "openOnFocus", "icon", "leading", "leadingIcon", "trailing", "loading", "loadingIcon", "list", "autocomplete", "searchTerm", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUIInputNumberDefinition = createInput(FUInputNumber, {
@@ -68,11 +69,11 @@ export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
   family: "NuxtUIInput"
 });
 export const nuxtUIListboxDefinition = createInput(FUListbox, {
-  props: ["options", "as", "color", "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", "transferSortIcons", "transferItemDraggable"],
+  props: ["options", "as", "color", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "name", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass", "transferSortIcons", "transferItemDraggable"],
   family: "NuxtUIInput"
 });
 export const nuxtUIPinInputDefinition = createInput(FUPinInput, {
-  props: ["color", "variant", "size", "length", "autofocus", "autofocusDelay", "highlight", "fixed", "defaultValue", "mask", "otp", "separator", "type", "placeholder", "ui"],
+  props: ["color", "variant", "size", "length", "autofocus", "autofocusDelay", "highlight", "fixed", "defaultValue", "mask", "otp", "separator", "type", "placeholder", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUIRadioGroupDefinition = createInput(FURadioGroup, {
@@ -80,11 +81,11 @@ export const nuxtUIRadioGroupDefinition = createInput(FURadioGroup, {
   family: "NuxtUIInput"
 });
 export const nuxtUISelectDefinition = createInput(FUSelect, {
-  props: ["options", "placeholder", "color", "variant", "size", "selectedIcon", "arrow", "portal", "content", "valueKey", "labelKey", "descriptionKey", "defaultValue", "multiple", "highlight", "fixed", "autofocus", "autofocusDelay", "open", "defaultOpen", "autocomplete", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "ui"],
+  props: ["options", "placeholder", "color", "variant", "size", "selectedIcon", "arrow", "portal", "content", "valueKey", "labelKey", "descriptionKey", "defaultValue", "multiple", "highlight", "fixed", "autofocus", "autofocusDelay", "open", "defaultOpen", "autocomplete", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUISelectMenuDefinition = createInput(FUSelectMenu, {
-  props: ["options", "placeholder", "searchInput", "color", "variant", "size", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "selectedIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "by", "valueKey", "labelKey", "descriptionKey", "defaultValue", "multiple", "highlight", "fixed", "createItem", "filterFields", "ignoreFilter", "autofocus", "autofocusDelay", "open", "defaultOpen", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover", "searchTerm", "ui"],
+  props: ["options", "placeholder", "searchInput", "color", "variant", "size", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "selectedIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "by", "valueKey", "labelKey", "descriptionKey", "defaultValue", "multiple", "highlight", "fixed", "createItem", "filterFields", "ignoreFilter", "autofocus", "autofocusDelay", "open", "defaultOpen", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover", "searchTerm", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUISliderDefinition = createInput(FUSlider, {
@@ -92,10 +93,14 @@ export const nuxtUISliderDefinition = createInput(FUSlider, {
   family: "NuxtUIInput"
 });
 export const nuxtUISwitchDefinition = createInput(FUSwitch, {
-  props: ["color", "size", "loading", "loadingIcon", "checkedIcon", "uncheckedIcon", "label", "description", "defaultValue", "trueValue", "falseValue", "autofocus", "ui"],
+  props: ["color", "size", "loading", "loadingIcon", "checkedIcon", "uncheckedIcon", "label", "description", "defaultValue", "trueValue", "falseValue", "autofocus", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUITextareaDefinition = createInput(FUTextarea, {
   props: ["color", "size", "variant", "placeholder", "autofocus", "autofocusDelay", "autoresize", "autoresizeDelay", "rows", "maxrows", "highlight", "fixed", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "cols", "dirname", "maxlength", "minlength", "wrap", "ui"],
   family: "NuxtUIInput"
 });
+export const nuxtUITreeDefinition = createInput(FUTree, {
+  props: ["color", "size", "disabled", "multiple", "nested", "virtualize", "labelKey", "trailingIcon", "expandedIcon", "collapsedIcon", "expanded", "defaultExpanded", "selectionBehavior", "propagateSelect", "bubbleSelect", "ui", "items", "options"],
+  family: "NuxtUIInput"
+});

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

@@ -19,12 +19,13 @@ import FUSelectMenu from "../../../runtime/components/inputs/FUSelectMenu.vue";
 import FUSlider from "../../../runtime/components/inputs/FUSlider.vue";
 import FUSwitch from "../../../runtime/components/inputs/FUSwitch.vue";
 import FUTextarea from "../../../runtime/components/inputs/FUTextarea.vue";
+import FUTree from "../../../runtime/components/inputs/FUTree.vue";
 export const nuxtUICalendarDefinition = createInput(FUCalendar, {
   props: ["type", "range", "multiple", "color", "variant", "size", "weekNumbers", "monthControls", "yearControls", "viewControl", "defaultValue", "minValue", "maxValue", "isDateDisabled", "isDateUnavailable", "ui", "valueType", "timeZone"],
   family: "NuxtUIInput"
 });
 export const nuxtUICheckboxDefinition = createInput(FUCheckbox, {
-  props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "trueValue", "falseValue", "autofocus", "ui"],
+  props: ["label", "description", "color", "variant", "size", "indicator", "icon", "indeterminateIcon", "trueValue", "falseValue", "autofocus", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUICheckboxGroupDefinition = createInput(FUCheckboxGroup, {
@@ -52,7 +53,7 @@ export const nuxtUIInputDateDefinition = createInput(FUInputDate, {
   family: "NuxtUIInput"
 });
 export const nuxtUIInputMenuDefinition = createInput(FUInputMenu, {
-  props: ["options", "inputType", "placeholder", "color", "variant", "size", "autofocus", "autofocusDelay", "trailingIcon", "selectedIcon", "deleteIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "mode", "by", "open", "valueKey", "labelKey", "descriptionKey", "multiple", "highlight", "fixed", "createItem", "filterFields", "ignoreFilter", "defaultOpen", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover", "openOnClick", "openOnFocus", "icon", "leading", "leadingIcon", "trailing", "loading", "loadingIcon", "list", "autocomplete", "searchTerm", "ui"],
+  props: ["options", "inputType", "placeholder", "color", "variant", "size", "autofocus", "autofocusDelay", "trailingIcon", "selectedIcon", "deleteIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "mode", "by", "open", "valueKey", "labelKey", "descriptionKey", "multiple", "highlight", "fixed", "createItem", "filterFields", "ignoreFilter", "defaultOpen", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover", "openOnClick", "openOnFocus", "icon", "leading", "leadingIcon", "trailing", "loading", "loadingIcon", "list", "autocomplete", "searchTerm", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUIInputNumberDefinition = createInput(FUInputNumber, {
@@ -68,11 +69,11 @@ export const nuxtUIInputTimeDefinition = createInput(FUInputTime, {
   family: "NuxtUIInput"
 });
 export const nuxtUIListboxDefinition = createInput(FUListbox, {
-  props: ["options", "as", "color", "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", "transferSortIcons", "transferItemDraggable"],
+  props: ["options", "as", "color", "size", "by", "orientation", "selectionBehavior", "disabled", "defaultValue", "multiple", "valueKey", "labelKey", "descriptionKey", "loading", "loadingIcon", "filter", "filterFields", "ignoreFilter", "selectedIcon", "virtualize", "highlight", "highlightOnHover", "autofocus", "autofocusDelay", "searchTerm", "name", "ui", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferAll", "transferHeaderClass", "transferSortIcons", "transferItemDraggable"],
   family: "NuxtUIInput"
 });
 export const nuxtUIPinInputDefinition = createInput(FUPinInput, {
-  props: ["color", "variant", "size", "length", "autofocus", "autofocusDelay", "highlight", "fixed", "defaultValue", "mask", "otp", "separator", "type", "placeholder", "ui"],
+  props: ["color", "variant", "size", "length", "autofocus", "autofocusDelay", "highlight", "fixed", "defaultValue", "mask", "otp", "separator", "type", "placeholder", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUIRadioGroupDefinition = createInput(FURadioGroup, {
@@ -80,11 +81,11 @@ export const nuxtUIRadioGroupDefinition = createInput(FURadioGroup, {
   family: "NuxtUIInput"
 });
 export const nuxtUISelectDefinition = createInput(FUSelect, {
-  props: ["options", "placeholder", "color", "variant", "size", "selectedIcon", "arrow", "portal", "content", "valueKey", "labelKey", "descriptionKey", "defaultValue", "multiple", "highlight", "fixed", "autofocus", "autofocusDelay", "open", "defaultOpen", "autocomplete", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "ui"],
+  props: ["options", "placeholder", "color", "variant", "size", "selectedIcon", "arrow", "portal", "content", "valueKey", "labelKey", "descriptionKey", "defaultValue", "multiple", "highlight", "fixed", "autofocus", "autofocusDelay", "open", "defaultOpen", "autocomplete", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUISelectMenuDefinition = createInput(FUSelectMenu, {
-  props: ["options", "placeholder", "searchInput", "color", "variant", "size", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "selectedIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "by", "valueKey", "labelKey", "descriptionKey", "defaultValue", "multiple", "highlight", "fixed", "createItem", "filterFields", "ignoreFilter", "autofocus", "autofocusDelay", "open", "defaultOpen", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover", "searchTerm", "ui"],
+  props: ["options", "placeholder", "searchInput", "color", "variant", "size", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "selectedIcon", "clear", "clearIcon", "arrow", "portal", "virtualize", "content", "by", "valueKey", "labelKey", "descriptionKey", "defaultValue", "multiple", "highlight", "fixed", "createItem", "filterFields", "ignoreFilter", "autofocus", "autofocusDelay", "open", "defaultOpen", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "resetModelValueOnClear", "highlightOnHover", "searchTerm", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUISliderDefinition = createInput(FUSlider, {
@@ -92,10 +93,14 @@ export const nuxtUISliderDefinition = createInput(FUSlider, {
   family: "NuxtUIInput"
 });
 export const nuxtUISwitchDefinition = createInput(FUSwitch, {
-  props: ["color", "size", "loading", "loadingIcon", "checkedIcon", "uncheckedIcon", "label", "description", "defaultValue", "trueValue", "falseValue", "autofocus", "ui"],
+  props: ["color", "size", "loading", "loadingIcon", "checkedIcon", "uncheckedIcon", "label", "description", "defaultValue", "trueValue", "falseValue", "autofocus", "name", "ui"],
   family: "NuxtUIInput"
 });
 export const nuxtUITextareaDefinition = createInput(FUTextarea, {
   props: ["color", "size", "variant", "placeholder", "autofocus", "autofocusDelay", "autoresize", "autoresizeDelay", "rows", "maxrows", "highlight", "fixed", "icon", "avatar", "leading", "leadingIcon", "trailing", "trailingIcon", "loading", "loadingIcon", "cols", "dirname", "maxlength", "minlength", "wrap", "ui"],
   family: "NuxtUIInput"
 });
+export const nuxtUITreeDefinition = createInput(FUTree, {
+  props: ["color", "size", "disabled", "multiple", "nested", "virtualize", "labelKey", "trailingIcon", "expandedIcon", "collapsedIcon", "expanded", "defaultExpanded", "selectionBehavior", "propagateSelect", "bubbleSelect", "ui", "items", "options"],
+  family: "NuxtUIInput"
+});

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

@@ -1,4 +1,4 @@
-import { disablesChildren } from "@formkit/inputs";
+import { disablesChildren, localize } from "@formkit/inputs";
 import { createInput } from "@formkit/vue";
 import { useFormKitMultiStep } from "../../composables/useFormKitMultiStep.js";
 import { useFormKitSchema } from "../../composables/useFormKitSchema.js";
@@ -14,14 +14,14 @@ export const nuxtUIStepDefinition = createInput(
     addElement("div", "$slots.default", { class: "formkit-step-inner" }),
     addElement("div", [
       addStepActionButton(
-        { if: "$previousLabel", then: "$previousLabel", else: "Previous" },
+        { if: "$previousLabel", then: "$previousLabel", else: "$ui.prev.value" },
         "$handlers.previous",
         "$previousAttrs",
         "$isFirstStep === false",
         "outline"
       ),
       addStepActionButton(
-        { if: "$nextLabel", then: "$nextLabel", else: "Next" },
+        { if: "$nextLabel", then: "$nextLabel", else: "$ui.next.value" },
         "$handlers.next",
         "$nextAttrs",
         "$isLastStep === false || $stepIndex === 0",
@@ -42,7 +42,11 @@ export const nuxtUIStepDefinition = createInput(
     forceTypeProp: "step",
     family: "NuxtUIInput",
     props: ["beforeStepChange", "nextAttrs", "nextLabel", "previousAttrs", "previousLabel", "validStepIcon", "ui", "stepActionsClass"],
-    features: [disablesChildren, addStepHandler]
+    // `localize('next')`/`localize('prev')` seed the `node.store` "ui" messages
+    // that `$ui.next.value`/`$ui.prev.value` (in the schema above) read - without
+    // them the schema expression resolves to nothing. Matches `@formkit/addons`'
+    // own `step` input definition, which includes the same two features.
+    features: [disablesChildren, addStepHandler, localize("next"), localize("prev")]
   },
   {
     // `createInput()` always wraps the given schema in FormKit's standard

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

@@ -1,4 +1,4 @@
-import { disablesChildren } from "@formkit/inputs";
+import { disablesChildren, localize } from "@formkit/inputs";
 import { createInput } from "@formkit/vue";
 import { useFormKitMultiStep } from "../../composables/useFormKitMultiStep";
 import { useFormKitSchema } from "../../composables/useFormKitSchema";
@@ -14,14 +14,14 @@ export const nuxtUIStepDefinition = createInput(
     addElement("div", "$slots.default", { class: "formkit-step-inner" }),
     addElement("div", [
       addStepActionButton(
-        { if: "$previousLabel", then: "$previousLabel", else: "Previous" },
+        { if: "$previousLabel", then: "$previousLabel", else: "$ui.prev.value" },
         "$handlers.previous",
         "$previousAttrs",
         "$isFirstStep === false",
         "outline"
       ),
       addStepActionButton(
-        { if: "$nextLabel", then: "$nextLabel", else: "Next" },
+        { if: "$nextLabel", then: "$nextLabel", else: "$ui.next.value" },
         "$handlers.next",
         "$nextAttrs",
         "$isLastStep === false || $stepIndex === 0",
@@ -42,7 +42,11 @@ export const nuxtUIStepDefinition = createInput(
     forceTypeProp: "step",
     family: "NuxtUIInput",
     props: ["beforeStepChange", "nextAttrs", "nextLabel", "previousAttrs", "previousLabel", "validStepIcon", "ui", "stepActionsClass"],
-    features: [disablesChildren, addStepHandler]
+    // `localize('next')`/`localize('prev')` seed the `node.store` "ui" messages
+    // that `$ui.next.value`/`$ui.prev.value` (in the schema above) read - without
+    // them the schema expression resolves to nothing. Matches `@formkit/addons`'
+    // own `step` input definition, which includes the same two features.
+    features: [disablesChildren, addStepHandler, localize("next"), localize("prev")]
   },
   {
     // `createInput()` always wraps the given schema in FormKit's standard

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

@@ -1,6 +1,6 @@
 import type { FormKitMultiStepSlots, FormKitStepSlots } from '@formkit/addons';
 import type { FormKitBaseSlots, FormKitInputs } from '@formkit/inputs';
-import type { CalendarSlots, CheckboxSlots, CheckboxGroupSlots, EditorSlots, FileUploadSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, ListboxSlots, PinInputSlots, SwitchSlots } from '@nuxt/ui';
+import type { CalendarSlots, CheckboxSlots, CheckboxGroupSlots, EditorSlots, FileUploadSlots, RadioGroupSlots, InputSlots, TextareaSlots, SelectSlots, SelectMenuSlots, InputDateSlots, InputMenuSlots, InputNumberSlots, InputTagsSlots, InputTimeSlots, ListboxSlots, PinInputSlots, SwitchSlots, TreeSlots } from '@nuxt/ui';
 export * from './createNuxtUiFormkitConfig.js';
 export * from './definitions/index.js';
 export * from './plugins/index.js';
@@ -79,6 +79,9 @@ declare module '@formkit/inputs' {
         nuxtUITextarea: {
             type: 'nuxtUITextarea';
         };
+        nuxtUITree: {
+            type: 'nuxtUITree';
+        };
         nuxtUIOutputText: {
             type: 'nuxtUIOutputText';
         };
@@ -120,5 +123,6 @@ declare module '@formkit/inputs' {
         nuxtUIStep: MergeSlots<FormKitBaseSlots<Props>, FormKitStepSlots<Props>>;
         nuxtUISwitch: MergeSlots<FormKitBaseSlots<Props>, SwitchSlots>;
         nuxtUITextarea: MergeSlots<FormKitBaseSlots<Props>, TextareaSlots>;
+        nuxtUITree: MergeSlots<FormKitBaseSlots<Props>, TreeSlots>;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfxcode/nuxt-ui-formkit",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
   "author": {
     "name": "Tom",