@sfxcode/nuxt-ui-formkit 1.2.0 → 1.2.2

package/README.md

@@ -43,6 +43,10 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 🔁 **Repeater Component** - Dynamic repeatable form sections
 - `nuxtUIRepeater` - Create dynamic lists with add, remove, clone, and reorder functionality
 
+🧭 **Multi-Step Forms** - Wizard-style forms with tab navigation and validation gating
+- `nuxtUIMultiStep` - Tab-strip wizard container built on `@formkit/addons`' `createMultiStepPlugin`
+- `nuxtUIStep` - A single step's content, with Nuxt UI-styled previous/next actions
+
 📊 **6 Output Components** - Display-only components for read-only data
 - `nuxtUIOutputBoolean` - Boolean display with custom icons
 - `nuxtUIOutputDate` - Formatted date/time display
@@ -55,11 +59,19 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
 - `FUDataEdit` - Edit forms with schema-based configuration
 - `FUDataView` - Read-only data display with schema support
 - `FUDataDebug` - Development tool for form debugging
+- `FUAutoForm` - Schema-free forms: inputs inferred from your data's value shapes, or a Valibot/Zod schema, with an override map for fine-tuning
+
+⚙️ **Config Helper** - One-line `formkit.config.ts` setup
+- `createNuxtUiFormkitConfig` - Assembles all `nuxtUIXxx` inputs/outputs and this module's plugins into `{ inputs, plugins }` you spread into your own config
 
 🔧 **Composables & Utilities** - Reusable form logic
 - `useFormKitSchema` - Schema-based form generation with element builders
 - `useFormKitInput` - Input component utilities and prop handling
 - `useFormKitOutput` - Output component utilities and prop handling
+- `useFormKitRepeater` - Repeater insert/remove/clone/move/drag handlers
+- `useFormKitMultiStep` - Multi-step tab-item mapping and navigation bridging
+- `useFormKitForm` - Submit/reset/error-management wrapper for a form's imperative APIs, callable from outside the form
+- `useFormKitAutoForm` - Schema inference from data value shapes, Valibot, or Zod schemas (`inferFormSchema`/`inferFormSchemaFromValibot`/`inferFormSchemaFromZod`)
 - `colorConverter` - Color format conversion utilities
 - `durationConverter` - Duration format conversion utilities
 
@@ -288,9 +300,12 @@ Refer to the [Nuxt UI documentation](https://ui.nuxt.com/) for component-specifi
 The playground includes comprehensive examples for all components:
 
 ### Input Components
+- [Calendar](./playground/app/pages/components/input/calendar.vue)
 - [Checkbox](./playground/app/pages/components/input/checkbox.vue)
 - [CheckboxGroup](./playground/app/pages/components/input/checkbox-group.vue)
 - [ColorPicker](./playground/app/pages/components/input/color-picker.vue)
+- [Editor](./playground/app/pages/components/input/editor.vue)
+- [FileUpload](./playground/app/pages/components/input/file-upload.vue)
 - [Input](./playground/app/pages/components/input/input.vue)
 - [InputDate](./playground/app/pages/components/input/input-date.vue)
 - [InputMenu](./playground/app/pages/components/input/input-menu.vue)
@@ -314,6 +329,16 @@ The playground includes comprehensive examples for all components:
 - [OutputNumber](./playground/app/pages/components/output/number.vue)
 - [OutputText](./playground/app/pages/components/output/text.vue)
 
+### Repeater
+- [Repeater](./playground/app/pages/form/repeater-sample.vue)
+- [Drag-and-Drop Repeater](./playground/app/pages/form/repeater-drag.vue)
+
+### Multi-Step
+- [Multi-Step Form](./playground/app/pages/form/multi-step.vue)
+
+### Form Composable
+- [useFormKitForm](./playground/app/pages/form/form-composable.vue)
+
 ## Development
 
 <details>

package/dist/module.json

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

package/dist/module.mjs

@@ -15,7 +15,7 @@ const module$1 = defineNuxtModule({
     addPlugin(resolver.resolve("./runtime/plugin"));
     addImportsDir(resolver.resolve("./runtime/composables"));
     const NPM_PCK_FORMKIT_NUXT_UI = "@sfxcode/nuxt-ui-formkit";
-    const componentNames = ["FUDataView", "FUDataEdit", "FUDataDebug"];
+    const componentNames = ["FUDataView", "FUDataEdit", "FUDataDebug", "FUAutoForm"];
     componentNames.forEach(
       (name) => addComponent({
         name,

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

@@ -0,0 +1,65 @@
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { PropType } from 'vue';
+import type { AutoFormOverrides, ValibotLikeSchema, ZodLikeSchema } from '../composables/useFormKitAutoForm.js';
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
+}>, {
+    data: Record<string, any>;
+    overrides: AutoFormOverrides;
+    valibotSchema: ValibotLikeSchema;
+    zodSchema: ZodLikeSchema;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FUAutoForm.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref, watch } from "vue";
+import { inferFormSchema, inferFormSchemaFromValibot, inferFormSchemaFromZod } from "../composables/useFormKitAutoForm";
+import FUDataEdit from "./FUDataEdit.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null
+  },
+  overrides: {
+    type: Object,
+    default: void 0
+  },
+  valibotSchema: {
+    type: Object,
+    default: void 0
+  },
+  zodSchema: {
+    type: Object,
+    default: void 0
+  }
+});
+const formData = defineModel({ type: [Object, String, Array] });
+if (!formData.value && props.data) {
+  formData.value = props.data;
+}
+function buildSchema(data) {
+  if (props.valibotSchema) {
+    return inferFormSchemaFromValibot(props.valibotSchema, props.overrides);
+  }
+  if (props.zodSchema) {
+    return inferFormSchemaFromZod(props.zodSchema, props.overrides);
+  }
+  return inferFormSchema(data ?? formData.value ?? {}, props.overrides);
+}
+const formSchema = ref(buildSchema(props.data));
+watch([() => props.data, () => props.overrides, () => props.valibotSchema, () => props.zodSchema], ([data]) => {
+  formSchema.value = buildSchema(data);
+});
+</script>
+
+<template>
+  <FUDataEdit
+    v-bind="$attrs"
+    v-model="formData"
+    :schema="formSchema"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      #[name]="slotProps"
+    >
+      <slot
+        :name="name"
+        v-bind="slotProps ?? {}"
+      />
+    </template>
+  </FUDataEdit>
+</template>

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

@@ -0,0 +1,65 @@
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { PropType } from 'vue';
+import type { AutoFormOverrides, ValibotLikeSchema, ZodLikeSchema } from '../composables/useFormKitAutoForm.js';
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    overrides: {
+        type: PropType<AutoFormOverrides>;
+        default: undefined;
+    };
+    valibotSchema: {
+        type: PropType<ValibotLikeSchema>;
+        default: undefined;
+    };
+    zodSchema: {
+        type: PropType<ZodLikeSchema>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<FormKitSchemaDefinition>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
+}>, {
+    data: Record<string, any>;
+    overrides: AutoFormOverrides;
+    valibotSchema: ValibotLikeSchema;
+    zodSchema: ZodLikeSchema;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -149,9 +149,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
+    schema: FormKitSchemaDefinition;
     data: Record<string, any>;
     id: string;
-    schema: FormKitSchemaDefinition;
     formClass: string;
     actionsClass: string;
     submitSeverity: string;

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

@@ -149,9 +149,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
+    schema: FormKitSchemaDefinition;
     data: Record<string, any>;
     id: string;
-    schema: FormKitSchemaDefinition;
     formClass: string;
     actionsClass: string;
     submitSeverity: string;

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

@@ -57,8 +57,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
-    data: Record<string, any>;
     schema: FormKitSchemaDefinition;
+    data: Record<string, any>;
     formClass: string;
     debugData: boolean;
     debugSchema: boolean;

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

@@ -57,8 +57,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
 }>, {
-    data: Record<string, any>;
     schema: FormKitSchemaDefinition;
+    data: Record<string, any>;
     formClass: string;
     debugData: boolean;
     debugSchema: boolean;

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

@@ -1,9 +1,11 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
 import type { DateValue } from '@internationalized/date';
 import type { PropType } from 'vue';
+import type { DateValueType } from '../../utils/dateValueConversion.js';
+type DateLike = DateValue | Date | string;
 export interface CalendarDateRange {
-    start: DateValue;
-    end: DateValue;
+    start: DateLike;
+    end: DateLike;
 }
 export interface FormKitCalendarProps {
     type?: 'date' | 'month' | 'year';
@@ -16,9 +18,17 @@ export interface FormKitCalendarProps {
     monthControls?: boolean;
     yearControls?: boolean;
     viewControl?: boolean;
-    defaultValue?: DateValue | DateValue[] | CalendarDateRange;
-    minValue?: DateValue;
-    maxValue?: DateValue;
+    /**
+     * Shape of the value read from / written to the FormKit form data.
+     * `'calendar'` (default) keeps the native `@internationalized/date` `DateValue`.
+     * `'date'` converts to/from a JS `Date`. `'iso'` converts to/from an ISO 8601 string.
+     */
+    valueType?: DateValueType;
+    /** Timezone used when converting to/from `'date'`/`'iso'`. Defaults to the local timezone. */
+    timeZone?: string;
+    defaultValue?: DateLike | DateLike[] | CalendarDateRange;
+    minValue?: DateLike;
+    maxValue?: DateLike;
     isDateDisabled?: (date: DateValue) => boolean;
     isDateUnavailable?: (date: DateValue) => boolean;
     ui?: Record<string, unknown>;

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

@@ -1,12 +1,24 @@
 <script setup>
+import { computed } from "vue";
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { toDateValue, toDateValueOrRangeOrArray, fromDateValueOrRangeOrArray } from "../../utils/dateValueConversion";
 const props = defineProps({
   context: {
     type: Object,
     required: true
   }
 });
-const { handleInput, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, styleClass, color, validSlotNames } = useFormKitInput(props.context);
+const conversionOptions = computed(() => ({ timeZone: props.context.timeZone }));
+const modelValue = computed({
+  get: () => toDateValueOrRangeOrArray(props.context._value, conversionOptions.value),
+  set: (value) => {
+    props.context.node.input(fromDateValueOrRangeOrArray(value, props.context.valueType ?? "calendar", props.context.timeZone));
+  }
+});
+const defaultValue = computed(() => toDateValueOrRangeOrArray(props.context.defaultValue, conversionOptions.value));
+const minValue = computed(() => toDateValue(props.context.minValue, conversionOptions.value));
+const maxValue = computed(() => toDateValue(props.context.maxValue, conversionOptions.value));
 </script>
 
 <template>
@@ -27,9 +39,9 @@ const { handleInput, styleClass, color, modelValue, validSlotNames } = useFormKi
     :month-controls="context.monthControls"
     :year-controls="context.yearControls"
     :view-control="context.viewControl"
-    :default-value="context.defaultValue"
-    :min-value="context.minValue"
-    :max-value="context.maxValue"
+    :default-value="defaultValue"
+    :min-value="minValue"
+    :max-value="maxValue"
     :is-date-disabled="context.isDateDisabled"
     :is-date-unavailable="context.isDateUnavailable"
     :ui="context.ui"

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

@@ -1,9 +1,11 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
 import type { DateValue } from '@internationalized/date';
 import type { PropType } from 'vue';
+import type { DateValueType } from '../../utils/dateValueConversion.js';
+type DateLike = DateValue | Date | string;
 export interface CalendarDateRange {
-    start: DateValue;
-    end: DateValue;
+    start: DateLike;
+    end: DateLike;
 }
 export interface FormKitCalendarProps {
     type?: 'date' | 'month' | 'year';
@@ -16,9 +18,17 @@ export interface FormKitCalendarProps {
     monthControls?: boolean;
     yearControls?: boolean;
     viewControl?: boolean;
-    defaultValue?: DateValue | DateValue[] | CalendarDateRange;
-    minValue?: DateValue;
-    maxValue?: DateValue;
+    /**
+     * Shape of the value read from / written to the FormKit form data.
+     * `'calendar'` (default) keeps the native `@internationalized/date` `DateValue`.
+     * `'date'` converts to/from a JS `Date`. `'iso'` converts to/from an ISO 8601 string.
+     */
+    valueType?: DateValueType;
+    /** Timezone used when converting to/from `'date'`/`'iso'`. Defaults to the local timezone. */
+    timeZone?: string;
+    defaultValue?: DateLike | DateLike[] | CalendarDateRange;
+    minValue?: DateLike;
+    maxValue?: DateLike;
     isDateDisabled?: (date: DateValue) => boolean;
     isDateUnavailable?: (date: DateValue) => boolean;
     ui?: Record<string, unknown>;

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

@@ -1,11 +1,13 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
 import type { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
 import type { PropType } from 'vue';
+import type { DateValueType } from '../../utils/dateValueConversion.js';
 import type { AvatarProps } from '#ui/components/Avatar.vue';
 export interface DateRange {
     start: CalendarDate | CalendarDateTime | ZonedDateTime;
     end: CalendarDate | CalendarDateTime | ZonedDateTime;
 }
+type DateLike = CalendarDate | CalendarDateTime | ZonedDateTime | Date | string;
 export interface FormKitInputDateProps {
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
@@ -24,15 +26,26 @@ export interface FormKitInputDateProps {
     trailingIcon?: string;
     loading?: boolean;
     loadingIcon?: string;
-    defaultValue: CalendarDate | CalendarDateTime | ZonedDateTime | DateRange;
-    placeholder?: CalendarDate | CalendarDateTime | ZonedDateTime;
-    defaultPlaceholder?: CalendarDate | CalendarDateTime | ZonedDateTime;
+    /**
+     * Shape of the value read from / written to the FormKit form data.
+     * `'calendar'` (default) keeps the native `@internationalized/date` `DateValue`.
+     * `'date'` converts to/from a JS `Date`. `'iso'` converts to/from an ISO 8601 string.
+     */
+    valueType?: DateValueType;
+    /** Timezone used when converting to/from `'date'`/`'iso'`. Defaults to the local timezone. */
+    timeZone?: string;
+    defaultValue: DateLike | {
+        start: DateLike;
+        end: DateLike;
+    };
+    placeholder?: DateLike;
+    defaultPlaceholder?: DateLike;
     hourCycle?: 12 | 24;
     step?: Record<string, number>;
     granularity?: 'day' | 'hour' | 'minute' | 'second';
     hideTimeZone?: boolean;
-    maxValue?: CalendarDate | CalendarDateTime | ZonedDateTime;
-    minValue?: CalendarDate | CalendarDateTime | ZonedDateTime;
+    maxValue?: DateLike;
+    minValue?: DateLike;
     isDateUnavailable?: (date: DateValue) => boolean;
     ui?: Record<string, unknown>;
 }

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

@@ -1,12 +1,30 @@
 <script setup>
+import { computed } from "vue";
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { fromDateValueOrRange, toDateValue, toDateValueOrRange } from "../../utils/dateValueConversion";
 const props = defineProps({
   context: {
     type: Object,
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, styleClass, color, validSlotNames } = useFormKitInput(props.context);
+const conversionOptions = computed(() => ({
+  granularity: props.context.granularity,
+  hideTimeZone: props.context.hideTimeZone,
+  timeZone: props.context.timeZone
+}));
+const modelValue = computed({
+  get: () => toDateValueOrRange(props.context._value, conversionOptions.value),
+  set: (value) => {
+    props.context.node.input(fromDateValueOrRange(value, props.context.valueType ?? "calendar", props.context.timeZone));
+  }
+});
+const defaultValue = computed(() => toDateValueOrRange(props.context.defaultValue, conversionOptions.value));
+const placeholder = computed(() => toDateValue(props.context.placeholder, conversionOptions.value));
+const defaultPlaceholder = computed(() => toDateValue(props.context.defaultPlaceholder, conversionOptions.value));
+const maxValue = computed(() => toDateValue(props.context.maxValue, conversionOptions.value));
+const minValue = computed(() => toDateValue(props.context.minValue, conversionOptions.value));
 </script>
 
 <template>
@@ -14,7 +32,7 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     :id="context.id"
     v-model="modelValue"
     v-bind="{ ...context?.attrs }"
-    :default-value="context.defaultValue"
+    :default-value="defaultValue"
     :class="styleClass"
     :disabled="!!context?.disabled"
     :readonly="context?.attrs.readonly ?? false"
@@ -23,8 +41,8 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     :highlight="isInvalid || context.highlight"
     :size="context.size ?? 'md'"
     :variant="context.variant ?? 'outline'"
-    :placeholder="context.placeholder"
-    :default-placeholder="context.defaultPlaceholder"
+    :placeholder="placeholder"
+    :default-placeholder="defaultPlaceholder"
     :autofocus="context.autofocus"
     :autofocus-delay="context.autofocusDelay"
     :fixed="context.fixed"
@@ -42,8 +60,8 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     :step="context.step"
     :granularity="context.granularity"
     :hide-time-zone="context.hideTimeZone"
-    :max-value="context.maxValue"
-    :min-value="context.minValue"
+    :max-value="maxValue"
+    :min-value="minValue"
     :is-date-unavailable="context.isDateUnavailable"
     :ui="context.ui"
     @change="handleChange"

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

@@ -1,11 +1,13 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
 import type { CalendarDate, CalendarDateTime, DateValue, ZonedDateTime } from '@internationalized/date';
 import type { PropType } from 'vue';
+import type { DateValueType } from '../../utils/dateValueConversion.js';
 import type { AvatarProps } from '#ui/components/Avatar.vue';
 export interface DateRange {
     start: CalendarDate | CalendarDateTime | ZonedDateTime;
     end: CalendarDate | CalendarDateTime | ZonedDateTime;
 }
+type DateLike = CalendarDate | CalendarDateTime | ZonedDateTime | Date | string;
 export interface FormKitInputDateProps {
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
@@ -24,15 +26,26 @@ export interface FormKitInputDateProps {
     trailingIcon?: string;
     loading?: boolean;
     loadingIcon?: string;
-    defaultValue: CalendarDate | CalendarDateTime | ZonedDateTime | DateRange;
-    placeholder?: CalendarDate | CalendarDateTime | ZonedDateTime;
-    defaultPlaceholder?: CalendarDate | CalendarDateTime | ZonedDateTime;
+    /**
+     * Shape of the value read from / written to the FormKit form data.
+     * `'calendar'` (default) keeps the native `@internationalized/date` `DateValue`.
+     * `'date'` converts to/from a JS `Date`. `'iso'` converts to/from an ISO 8601 string.
+     */
+    valueType?: DateValueType;
+    /** Timezone used when converting to/from `'date'`/`'iso'`. Defaults to the local timezone. */
+    timeZone?: string;
+    defaultValue: DateLike | {
+        start: DateLike;
+        end: DateLike;
+    };
+    placeholder?: DateLike;
+    defaultPlaceholder?: DateLike;
     hourCycle?: 12 | 24;
     step?: Record<string, number>;
     granularity?: 'day' | 'hour' | 'minute' | 'second';
     hideTimeZone?: boolean;
-    maxValue?: CalendarDate | CalendarDateTime | ZonedDateTime;
-    minValue?: CalendarDate | CalendarDateTime | ZonedDateTime;
+    maxValue?: DateLike;
+    minValue?: DateLike;
     isDateUnavailable?: (date: DateValue) => boolean;
     ui?: Record<string, unknown>;
 }

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

@@ -0,0 +1,38 @@
+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 interface ValibotLikePipeEntry {
+    kind: string;
+    type: string;
+    requirement?: unknown;
+}
+export interface ValibotLikeSchema {
+    kind: 'schema';
+    type: string;
+    entries?: Record<string, ValibotLikeSchema>;
+    item?: ValibotLikeSchema;
+    wrapped?: ValibotLikeSchema;
+    default?: unknown;
+    pipe?: readonly ValibotLikePipeEntry[];
+}
+export declare function inferFormSchemaFromValibot(schema: object, overrides?: AutoFormOverrides): FormKitSchemaNode[];
+export interface ZodLikeSchema {
+    type: string;
+    shape?: Record<string, ZodLikeSchema>;
+    element?: ZodLikeSchema;
+    minLength?: number | null;
+    maxLength?: number | null;
+    minValue?: number | null;
+    maxValue?: number | null;
+    format?: string | null;
+    unwrap?: () => ZodLikeSchema;
+    def?: {
+        defaultValue?: unknown;
+    };
+}
+export declare function inferFormSchemaFromZod(schema: object, overrides?: AutoFormOverrides): FormKitSchemaNode[];
+export declare function useFormKitAutoForm(): {
+    inferFormSchema: typeof inferFormSchema;
+    inferFormSchemaFromValibot: typeof inferFormSchemaFromValibot;
+    inferFormSchemaFromZod: typeof inferFormSchemaFromZod;
+};