@sfxcode/nuxt-ui-formkit 1.2.5 → 1.2.7

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
+✨ **22 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
@@ -29,6 +29,7 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 - `nuxtUIInputDate` - Date and time picker with range support
 - `nuxtUIInputMenu` - Dropdown menu with searchable options
 - `nuxtUIInputNumber` - Number input with increment/decrement buttons
+- `nuxtUIInputRating` - Star-based rating input for numeric values
 - `nuxtUIInputTags` - Tag input with custom delimiters
 - `nuxtUIInputTime` - Time picker with 12/24-hour format
 - `nuxtUIListbox` - Listbox for single/multiple selection with filtering (for use with transfer mode lucide icons must be installed additionally)
@@ -39,6 +40,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
@@ -314,6 +316,7 @@ The playground includes comprehensive examples for all components:
 - [InputDate](./playground/app/pages/components/input/input-date.vue)
 - [InputMenu](./playground/app/pages/components/input/input-menu.vue)
 - [InputNumber](./playground/app/pages/components/input/input-number.vue)
+- [InputRating](./playground/app/pages/components/input/input-rating.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)

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "1.2.5",
+  "version": "1.2.7",
   "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/FUAutoFormOverlay.d.vue.ts

@@ -73,10 +73,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     data: Record<string, any>;
     title: string;
-    as: "modal" | "slideover";
     overrides: AutoFormOverrides;
     valibotSchema: ValibotLikeSchema;
     zodSchema: ZodLikeSchema;
+    as: "modal" | "slideover";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -73,10 +73,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     data: Record<string, any>;
     title: string;
-    as: "modal" | "slideover";
     overrides: AutoFormOverrides;
     valibotSchema: ValibotLikeSchema;
     zodSchema: ZodLikeSchema;
+    as: "modal" | "slideover";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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/FUInputRating.d.vue.ts

@@ -0,0 +1,30 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+export interface FormKitInputRatingProps {
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    orientation?: 'horizontal' | 'vertical';
+    icon?: string;
+    emptyIcon?: string;
+    readonly?: boolean;
+    clearable?: boolean;
+    hoverable?: boolean;
+    length?: number;
+    step?: number;
+    defaultValue?: number;
+    name?: string;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputRatingProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputRatingProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,48 @@
+<script setup>
+import { useFormKitInput } from "../../utils/useFormKitInput";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, handleChange, handleBlur, styleClass, color, modelValue, validSlotNames, ui } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <UInputRating
+    :id="context.id"
+    v-model="modelValue"
+    :name="context.node.name"
+    v-bind="{ ...context?.attrs }"
+    :class="styleClass"
+    :disabled="!!context?.disabled"
+    :style="context?.attrs.style"
+    :color="color"
+    :size="context.size ?? 'md'"
+    :orientation="context.orientation ?? 'horizontal'"
+    :icon="context.icon"
+    :empty-icon="context.emptyIcon"
+    :readonly="context.readonly"
+    :clearable="context.clearable"
+    :hoverable="context.hoverable"
+    :length="context.length ?? 5"
+    :step="context.step"
+    :default-value="context.defaultValue"
+    :ui="ui"
+    @change="handleChange"
+    @update:model-value="handleInput"
+    @blur="handleBlur"
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UInputRating>
+</template>

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

@@ -0,0 +1,30 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+export interface FormKitInputRatingProps {
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    orientation?: 'horizontal' | 'vertical';
+    icon?: string;
+    emptyIcon?: string;
+    readonly?: boolean;
+    clearable?: boolean;
+    hoverable?: boolean;
+    length?: number;
+    step?: number;
+    defaultValue?: number;
+    name?: string;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputRatingProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitInputRatingProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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;