@datum-cloud/datum-ui 0.6.0-alpha.b817c77 → 0.6.0

package/dist/{form-BE1xBne4.mjs → form-B3rQ4CH9.mjs}

@@ -10,16 +10,21 @@ import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u
 import { t as Tooltip } from "./tooltip-Cruvl5F6.mjs";
 import { t as Switch } from "./switch-DQJQhPIQ.mjs";
 import { t as Textarea } from "./textarea-BwD-MmTV.mjs";
-import { t as Autocomplete } from "./autocomplete-V5-qslzS.mjs";
+import { t as Autocomplete } from "./autocomplete-CkYJueBL.mjs";
+import { t as CalendarDatePicker } from "./calendar-date-picker-CDT-8Ha8.mjs";
 import { t as toast } from "./toast-BWnN5fax.mjs";
-import { t as useCopyToClipboard } from "./use-copy-to-clipboard-BGdTmkFV.mjs";
-import { n as useAdapter } from "./adapter-context-B7L2ucTr.mjs";
-import { defineStepper } from "./stepper/index.mjs";
+import { Autosearch } from "./autosearch/index.mjs";
+import { n as useFormContext$1, t as FormProvider } from "./form-context-Ccxm-wqL.mjs";
+import { t as Combobox } from "./combobox-B-C9lJeD.mjs";
+import { t as useCopyToClipboard } from "./use-copy-to-clipboard-uNeeVHC4.mjs";
+import { t as DateTimePicker } from "./date-time-picker-BomrW07W.mjs";
+import { n as useAdapter } from "./adapter-context-rWveHhDd.mjs";
 import { InputWithAddons } from "./input-with-addons/index.mjs";
+import { t as TimePicker } from "./time-picker-BoF7pZZ2.mjs";
+import { t as Transfer } from "./transfer-46C-rFFW.mjs";
 import { CheckIcon, CircleHelp, CopyIcon } from "lucide-react";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { z } from "zod";
 //#region src/components/features/form/context/field-context.tsx
 const FieldContext = React$1.createContext(null);
 function FieldProvider({ children, value }) {
@@ -90,7 +95,10 @@ function FormAutocomplete({ disabled, className, ...props }) {
 		name: fieldState?.name,
 		id,
 		value,
-		onValueChange: (val) => fieldState?.change(val),
+		onValueChange: (val) => {
+			fieldState?.change(val);
+			fieldState?.blur();
+		},
 		disabled: isDisabled,
 		triggerClassName: cn(hasErrors && "border-destructive", props.triggerClassName),
 		className
@@ -98,19 +106,58 @@ function FormAutocomplete({ disabled, className, ...props }) {
 }
 FormAutocomplete.displayName = "Form.Autocomplete";
 //#endregion
-//#region src/components/features/form/context/form-context.tsx
-const FormContext = React$1.createContext(null);
-function FormProvider({ children, value }) {
-	return /* @__PURE__ */ jsx(FormContext, {
+//#region src/components/features/form/components/form-autosearch.tsx
+/**
+* Form.Autosearch - Search-first input with dropdown results
+*
+* Automatically wired to the parent Form.Field context.
+* Shows a text input that triggers search and displays results in a popover.
+* Different from Form.Autocomplete which shows all options upfront.
+*
+* @example Basic usage
+* ```tsx
+* <Form.Field name="userId" label="User" required>
+*   <Form.Autosearch
+*     options={users}
+*     onSearch={handleSearch}
+*     loading={isSearching}
+*     placeholder="Search users..."
+*   />
+* </Form.Field>
+* ```
+*
+* @example With debounce control
+* ```tsx
+* <Form.Field name="email" label="Email">
+*   <Form.Autosearch
+*     options={searchResults}
+*     onSearch={debouncedSearch}
+*     searchDebounceMs={500}
+*     placeholder="Type email to search..."
+*   />
+* </Form.Field>
+* ```
+*/
+function FormAutosearch({ disabled, className, inputClassName, ...props }) {
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	const value = fieldState?.value != null ? String(fieldState.value) : "";
+	return /* @__PURE__ */ jsx(Autosearch, {
+		...props,
+		name: fieldState?.name,
+		id,
 		value,
-		children
+		onValueChange: (val) => {
+			fieldState?.change(val);
+			fieldState?.blur();
+		},
+		disabled: isDisabled,
+		inputClassName: cn(hasErrors && "border-destructive", inputClassName),
+		className
 	});
 }
-function useFormContext$1() {
-	const context = React$1.use(FormContext);
-	if (!context) throw new Error("useFormContext must be used within a Form.Root component");
-	return context;
-}
+FormAutosearch.displayName = "Form.Autosearch";
 //#endregion
 //#region src/components/features/form/components/form-button.tsx
 /**
@@ -168,7 +215,10 @@ function FormCheckbox({ label, disabled, className }) {
 		children: [/* @__PURE__ */ jsx(Checkbox, {
 			id,
 			checked,
-			onCheckedChange: (value) => fieldState?.change(Boolean(value)),
+			onCheckedChange: (value) => {
+				fieldState?.change(Boolean(value));
+				fieldState?.blur();
+			},
 			disabled: isDisabled,
 			"aria-invalid": hasErrors || void 0,
 			"aria-describedby": hasErrors ? `${id}-error` : void 0
@@ -181,6 +231,36 @@ function FormCheckbox({ label, disabled, className }) {
 }
 FormCheckbox.displayName = "Form.Checkbox";
 //#endregion
+//#region src/components/features/form/components/form-combobox.tsx
+function FormCombobox({ options, placeholder, searchPlaceholder, emptyMessage, disabled, className, triggerClassName, contentClassName, searchable = true, showDropdownArrow = true, clearable = false, "data-testid": testId, modal }) {
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	const handleChange = React$1.useCallback((value) => {
+		fieldState?.change(value ?? "");
+		fieldState?.blur();
+	}, [fieldState]);
+	return /* @__PURE__ */ jsx(Combobox, {
+		id,
+		options,
+		value: fieldState?.value ?? "",
+		onChange: handleChange,
+		placeholder,
+		searchPlaceholder,
+		emptyMessage,
+		disabled: isDisabled,
+		searchable,
+		showDropdownArrow,
+		clearable,
+		modal,
+		className,
+		triggerClassName: cn(hasErrors && "border-destructive", triggerClassName),
+		contentClassName,
+		"data-testid": testId
+	});
+}
+FormCombobox.displayName = "Form.Combobox";
+//#endregion
 //#region src/components/features/form/components/form-copy-box.tsx
 /**
 * Form.CopyBox - Read-only field with copy-to-clipboard functionality
@@ -246,6 +326,7 @@ function FormCopyBox({ variant = "default", className, contentClassName, buttonC
 		})]
 	});
 }
+FormCopyBox.displayName = "Form.CopyBox";
 //#endregion
 //#region src/components/features/form/components/form-custom.tsx
 /**
@@ -270,17 +351,119 @@ function FormCopyBox({ variant = "default", className, contentClassName, buttonC
 * ```
 */
 function FormCustom({ children }) {
-	const { form, fields, isSubmitting, submit, reset } = useFormContext$1();
+	const ctx = useFormContext$1();
 	return /* @__PURE__ */ jsx(Fragment$1, { children: children({
-		form,
-		fields,
-		isSubmitting,
-		submit,
-		reset
+		form: ctx.form,
+		fields: ctx.fields,
+		isSubmitting: ctx.isSubmitting,
+		isDirty: ctx.isDirty,
+		isValid: ctx.isValid,
+		isSubmitted: ctx.isSubmitted,
+		submitCount: ctx.submitCount,
+		dirtyFields: ctx.dirtyFields,
+		touchedFields: ctx.touchedFields,
+		submit: ctx.submit,
+		reset: ctx.reset
 	}) });
 }
 FormCustom.displayName = "Form.Custom";
 //#endregion
+//#region src/components/features/form/components/form-date-picker.tsx
+function FormDatePicker({ placeholder, disabled, className, triggerClassName, numberOfMonths = 1, minDate: minDateProp, maxDate: maxDateProp, disableFuture, disablePast, modal }) {
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	const currentValue = React$1.useMemo(() => {
+		const val = fieldState?.value;
+		if (!val) return {
+			from: void 0,
+			to: void 0
+		};
+		if (val instanceof Date) return {
+			from: val,
+			to: val
+		};
+		if (typeof val === "string") {
+			const date = new Date(val);
+			return {
+				from: date,
+				to: date
+			};
+		}
+		if (typeof val === "object" && "from" in val) return val;
+		return {
+			from: void 0,
+			to: void 0
+		};
+	}, [fieldState?.value]);
+	const minDate = minDateProp;
+	const maxDate = maxDateProp;
+	return /* @__PURE__ */ jsx(CalendarDatePicker, {
+		id,
+		date: currentValue,
+		onDateSelect: React$1.useCallback((range) => {
+			if (!range) {
+				fieldState?.change(void 0);
+				fieldState?.blur();
+				return;
+			}
+			if (numberOfMonths === 1) fieldState?.change(range.from.toISOString());
+			else fieldState?.change({
+				from: range.from.toISOString(),
+				to: range.to?.toISOString()
+			});
+			fieldState?.blur();
+		}, [fieldState, numberOfMonths]),
+		numberOfMonths,
+		placeholder,
+		disabled: isDisabled,
+		minDate,
+		maxDate,
+		disableFuture,
+		disablePast,
+		variant: "outline",
+		modal,
+		className: cn(className),
+		triggerClassName: cn(triggerClassName),
+		"aria-invalid": hasErrors || void 0,
+		"aria-describedby": hasErrors ? `${id}-error` : void 0
+	});
+}
+FormDatePicker.displayName = "Form.DatePicker";
+//#endregion
+//#region src/components/features/form/components/form-date-time-picker.tsx
+function FormDateTimePicker({ minDate: minDateProp, maxDate: maxDateProp, disabledDates, timezone, showTimezoneIndicator, placeholder, disabled, className, modal }) {
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	const currentValue = React$1.useMemo(() => {
+		const val = fieldState?.value;
+		if (!val) return void 0;
+		if (typeof val === "string") return val;
+	}, [fieldState?.value]);
+	const minDate = minDateProp;
+	const maxDate = maxDateProp;
+	return /* @__PURE__ */ jsx(DateTimePicker, {
+		value: currentValue,
+		onChange: React$1.useCallback((value) => {
+			fieldState?.change(value);
+			fieldState?.blur();
+		}, [fieldState]),
+		minDate,
+		maxDate,
+		disabledDates,
+		timezone,
+		showTimezoneIndicator,
+		placeholder,
+		disabled: isDisabled,
+		modal,
+		className: cn(className),
+		"aria-invalid": hasErrors || void 0,
+		"aria-describedby": hasErrors ? `${id}-error` : void 0
+	});
+}
+FormDateTimePicker.displayName = "Form.DateTimePicker";
+//#endregion
 //#region src/components/features/form/components/form-description.tsx
 /**
 * Form.Description - Display field description/helper text
@@ -377,9 +560,6 @@ function FormDialog({ open, onOpenChange, defaultOpen, title, description, trigg
 		try {
 			await onSubmit?.(data);
 			onSuccess?.(data);
-		} catch (error) {
-			console.error("Form submission error:", error);
-			throw error;
 		} finally {
 			if (loading === void 0) setInternalIsSubmitting(false);
 		}
@@ -526,10 +706,33 @@ function FieldLabel({ htmlFor, label, hasErrors, required, tooltip, className })
 */
 function FormField({ name, children, label, description, tooltip, required = false, disabled = false, className, labelClassName }) {
 	const adapter = useAdapter();
-	const { fields, isSubmitting, form } = useFormContext$1();
+	const { fields, isSubmitting, form, mode, displayTouchedFields, markFieldTouched } = useFormContext$1();
 	const fieldState = adapter.useField(name);
-	const errors = fieldState.errors;
+	const isDisplayTouched = displayTouchedFields.includes(name);
+	const rawErrors = fieldState.errors;
+	const errors = isDisplayTouched ? rawErrors : [];
 	const hasErrors = errors.length > 0;
+	const hasFocusedRef = React$1.useRef(false);
+	React$1.useEffect(() => {
+		hasFocusedRef.current = false;
+	}, [name]);
+	const handleFocus = React$1.useCallback((e) => {
+		if (e.target.type !== "hidden") hasFocusedRef.current = true;
+	}, []);
+	const handleChange = React$1.useCallback(() => {
+		if (mode === "onChange" && hasFocusedRef.current) markFieldTouched(name);
+	}, [
+		mode,
+		name,
+		markFieldTouched
+	]);
+	const handleBlur = React$1.useCallback(() => {
+		if ((mode === "onChange" || mode === "onBlur") && hasFocusedRef.current) markFieldTouched(name);
+	}, [
+		mode,
+		name,
+		markFieldTouched
+	]);
 	const fieldId = fieldState.id;
 	const descriptionId = description ? `${fieldId}-description` : void 0;
 	const errorId = hasErrors ? `${fieldId}-error` : void 0;
@@ -576,6 +779,9 @@ function FormField({ name, children, label, description, tooltip, required = fal
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cn("flex flex-col space-y-2", className),
+			onFocusCapture: handleFocus,
+			onChange: handleChange,
+			onBlur: handleBlur,
 			children: [
 				label && /* @__PURE__ */ jsx(FieldLabel, {
 					htmlFor: fieldId,
@@ -675,6 +881,39 @@ function FormInput({ ref, type = "text", className, disabled, ...props }) {
 }
 FormInput.displayName = "Form.Input";
 //#endregion
+//#region src/components/features/form/components/form-input-group.tsx
+/**
+* Form.InputGroup - Input with leading/trailing addons
+*
+* Automatically wired to the parent Form.Field context.
+*
+* @example
+* ```tsx
+* <Form.Field name="website" label="Website" required>
+*   <Form.InputGroup leading="https://" placeholder="example.com" />
+* </Form.Field>
+* ```
+*/
+function FormInputGroup({ ref, className, disabled, ...props }) {
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	return /* @__PURE__ */ jsx(InputWithAddons, {
+		...props,
+		ref,
+		id,
+		name: fieldState?.name,
+		value: fieldState?.value ?? "",
+		onChange: (e) => fieldState?.change(e.target.value),
+		onBlur: () => fieldState?.blur(),
+		className: cn("text-xs!", className),
+		disabled: isDisabled,
+		"aria-invalid": hasErrors || void 0,
+		"aria-describedby": hasErrors ? `${id}-error` : void 0
+	});
+}
+FormInputGroup.displayName = "Form.InputGroup";
+//#endregion
 //#region src/components/features/form/components/form-radio-group.tsx
 /**
 * Form.RadioGroup - Radio button group component
@@ -698,7 +937,10 @@ function FormRadioGroup({ orientation = "vertical", disabled, className, childre
 	const hasErrors = errors && errors.length > 0;
 	return /* @__PURE__ */ jsx(RadioGroup, {
 		value: fieldState?.value != null ? String(fieldState.value) : void 0,
-		onValueChange: (val) => fieldState?.change(val),
+		onValueChange: (val) => {
+			fieldState?.change(val);
+			fieldState?.blur();
+		},
 		disabled: isDisabled,
 		"aria-invalid": hasErrors || void 0,
 		"aria-describedby": hasErrors ? `${id}-error` : void 0,
@@ -716,7 +958,8 @@ FormRadioGroup.displayName = "Form.RadioGroup";
 * ```
 */
 function FormRadioItem({ value, label, description, disabled }) {
-	const radioId = `radio-${value}`;
+	const { id: fieldId } = useFieldContext$1();
+	const radioId = `${fieldId}-radio-${value}`;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-start space-x-2",
 		children: [/* @__PURE__ */ jsx(RadioGroupItem, {
@@ -762,13 +1005,17 @@ FormRadioItem.displayName = "Form.RadioItem";
 * </Form.Root>
 * ```
 */
-function FormRoot({ schema, children, onSubmit, action, method = "POST", formComponent: FormComp = "form", id, name, defaultValues, mode = "onBlur", isSubmitting: externalIsSubmitting, onError, onSuccess, telemetry, className }) {
+function FormRoot({ schema, children, onSubmit, action, method = "POST", formComponent: FormComp = "form", id, name, defaultValues, mode = "onChange", isSubmitting: externalIsSubmitting, onError, onSuccess, telemetry, className }) {
 	const adapter = useAdapter();
 	const [internalIsSubmitting, setInternalIsSubmitting] = React$1.useState(false);
 	const isSubmitting = externalIsSubmitting ?? internalIsSubmitting;
+	const [isSubmitted, setIsSubmitted] = React$1.useState(false);
+	const [submitCount, setSubmitCount] = React$1.useState(0);
 	const formRef = React$1.useRef(null);
 	const wrappedOnSubmit = React$1.useCallback(async (data) => {
 		setInternalIsSubmitting(true);
+		setIsSubmitted(true);
+		setSubmitCount((prev) => prev + 1);
 		try {
 			await onSubmit?.(data);
 			telemetry?.onSuccess?.({
@@ -807,25 +1054,49 @@ function FormRoot({ schema, children, onSubmit, action, method = "POST", formCom
 		onSubmit: onSubmit ? wrappedOnSubmit : void 0,
 		formRef
 	});
+	const { formState } = instance;
 	const contextValue = React$1.useMemo(() => ({
 		form: instance,
 		fields: instance.fields,
 		isSubmitting,
+		isDirty: formState.isDirty,
+		isValid: formState.isValid,
+		isSubmitted,
+		submitCount,
+		dirtyFields: formState.dirtyFields,
+		touchedFields: formState.touchedFields,
+		mode,
+		displayTouchedFields: instance.touchedFields,
+		markFieldTouched: instance.markFieldTouched,
+		markAllFieldsTouched: instance.markAllFieldsTouched,
 		submit: () => formRef.current?.requestSubmit(),
 		reset: () => instance.reset(),
 		formId: instance.id
-	}), [instance, isSubmitting]);
-	const isRenderFunction = typeof children === "function";
-	const renderProps = {
-		form: instance,
-		fields: instance.fields,
+	}), [
+		instance,
 		isSubmitting,
-		submit: () => formRef.current?.requestSubmit(),
-		reset: () => instance.reset()
-	};
+		formState,
+		isSubmitted,
+		submitCount,
+		mode
+	]);
+	const isRenderFunction = typeof children === "function";
 	const renderChildren = () => {
-		if (isRenderFunction) return children(renderProps);
-		return children;
+		if (!isRenderFunction) return children;
+		return children({
+			form: instance,
+			fields: instance.fields,
+			isSubmitting,
+			isDirty: formState.isDirty,
+			isValid: formState.isValid,
+			isSubmitted,
+			submitCount,
+			dirtyFields: formState.dirtyFields,
+			touchedFields: formState.touchedFields,
+			mode,
+			submit: () => formRef.current?.requestSubmit(),
+			reset: () => instance.reset()
+		});
 	};
 	return /* @__PURE__ */ jsx(FormProvider, {
 		value: contextValue,
@@ -840,7 +1111,9 @@ function FormRoot({ schema, children, onSubmit, action, method = "POST", formCom
 				autoComplete: "off",
 				noValidate: true,
 				onSubmit: (e) => {
+					const submitter = e.nativeEvent.submitter;
 					e.stopPropagation();
+					if (submitter && !submitter.hidden) instance.markAllFieldsTouched();
 					telemetry?.onSubmit?.({
 						formName: name ?? "",
 						formId: id
@@ -955,7 +1228,10 @@ function FormSwitch({ label, disabled, className }) {
 		children: [/* @__PURE__ */ jsx(Switch, {
 			id,
 			checked,
-			onCheckedChange: (value) => fieldState?.change(Boolean(value)),
+			onCheckedChange: (value) => {
+				fieldState?.change(Boolean(value));
+				fieldState?.blur();
+			},
 			disabled: isDisabled,
 			"aria-invalid": hasErrors || void 0,
 			"aria-describedby": hasErrors ? `${id}-error` : void 0
@@ -1002,6 +1278,75 @@ function FormTextarea({ ref, className, disabled, rows = 3, ...props }) {
 }
 FormTextarea.displayName = "Form.Textarea";
 //#endregion
+//#region src/components/features/form/components/form-time-picker.tsx
+function FormTimePicker({ min, max, step, placeholder, disabled, className }) {
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	return /* @__PURE__ */ jsx(TimePicker, {
+		id,
+		value: fieldState?.value ?? "",
+		onChange: React$1.useCallback((value) => {
+			fieldState?.change(value || void 0);
+			fieldState?.blur();
+		}, [fieldState]),
+		min,
+		max,
+		step,
+		placeholder,
+		disabled: isDisabled,
+		className: cn(className),
+		"aria-invalid": hasErrors || void 0,
+		"aria-describedby": hasErrors ? `${id}-error` : void 0
+	});
+}
+FormTimePicker.displayName = "Form.TimePicker";
+//#endregion
+//#region src/components/features/form/components/form-transfer.tsx
+/**
+* Form.Transfer - Transfer list component for selecting multiple items
+*
+* Automatically wired to the parent Form.Field context.
+* Displays minItems/maxItems constraints when provided.
+*
+* @example
+* ```tsx
+* <Form.Field name="teams" label="Select Teams">
+*   <Form.Transfer
+*     items={teams}
+*     itemKey="id"
+*     itemLabel="name"
+*     minItems={2}
+*     maxItems={5}
+*   />
+* </Form.Field>
+* ```
+*/
+function FormTransfer({ disabled, minItems, maxItems, ...props }) {
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	const value = Array.isArray(fieldState?.value) ? fieldState.value : [];
+	const handleChange = React$1.useCallback((newValue) => {
+		fieldState?.change(newValue);
+		fieldState?.blur();
+	}, [fieldState]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		"aria-invalid": hasErrors || void 0,
+		"aria-describedby": hasErrors ? `${id}-error` : void 0,
+		children: /* @__PURE__ */ jsx(Transfer, {
+			...props,
+			value,
+			onChange: handleChange,
+			disabled: isDisabled
+		})
+	}), (minItems != null || maxItems != null) && /* @__PURE__ */ jsx("p", {
+		className: "text-ring text-xs text-wrap mt-2",
+		children: minItems != null && maxItems != null ? `Select between ${minItems} and ${maxItems} items` : minItems != null ? `Select at least ${minItems} items` : `Select up to ${maxItems} items`
+	})] });
+}
+FormTransfer.displayName = "Form.Transfer";
+//#endregion
 //#region src/components/features/form/hooks/use-watch.ts
 /**
 * Hook to watch a field's value reactively.
@@ -1078,525 +1423,15 @@ function FormWhen({ field, is, isNot, in: inArray, notIn, children }) {
 }
 FormWhen.displayName = "Form.When";
 //#endregion
-//#region src/components/features/form/components/stepper/form-stepper.tsx
-const FormStepperContext = React$1.createContext(null);
-function useFormStepperContext() {
-	const context = React$1.use(FormStepperContext);
-	if (!context) throw new Error("useFormStepperContext must be used within a Form.Stepper component");
-	return context;
-}
-/**
-* Recursively unwrap ZodIntersection (from .and()) to extract the base ZodObject.
-*
-* Zod v4 schema types use `def.type` as a string discriminant:
-* - "intersection" (from .and()): merge left + right base objects
-* - "object": return directly
-*
-* Note: In Zod v4, .superRefine() and .refine() return `this` (no wrapper),
-* so only ZodIntersection needs unwrapping.
-*/
-function getBaseObject(schema) {
-	if (schema.def.type === "intersection") {
-		const intersectionDef = schema.def;
-		const left = getBaseObject(intersectionDef.left);
-		const right = getBaseObject(intersectionDef.right);
-		return left.merge(right);
-	}
-	if (schema.def.type !== "object") {
-		console.warn(`mergeSchemas: expected ZodObject or ZodIntersection but got "${schema.def.type}". Falling back to empty object.`);
-		return z.object({});
-	}
-	return schema;
-}
-/**
-* Merge multiple zod schemas into one ZodObject for HTML constraint generation.
-* Handles ZodIntersection (.and()) by unwrapping to base ZodObject shapes.
-* Per-step validation still uses the original schemas with all refinements intact.
-*/
-function mergeSchemas(steps) {
-	if (steps.length === 0) throw new Error("Form.Stepper requires at least one step");
-	return steps.reduce((acc, step, index) => {
-		const base = getBaseObject(step.schema);
-		if (index === 0) return base;
-		return acc.merge(base);
-	}, {});
-}
-/**
-* Convert StepConfig[] to Stepperize step format
-*/
-function toStepperizeSteps(steps) {
-	return steps.map((step) => ({
-		id: step.id,
-		label: step.label,
-		description: step.description
-	}));
-}
-/**
-* Form.Stepper - Multi-step form container
-*
-* Uses Stepperize internally for step navigation and a single Conform form
-* instance for all steps. Schemas are auto-merged for unified validation.
-*
-* @example
-* ```tsx
-* const steps = [
-*   { id: 'account', label: 'Account', schema: accountSchema },
-*   { id: 'profile', label: 'Profile', schema: profileSchema },
-* ];
-*
-* <Form.Stepper steps={steps} onComplete={handleComplete}>
-*   <Form.StepperNavigation />
-*
-*   <Form.Step id="account">
-*     <Form.Field name="email" label="Email" required>
-*       <Form.Input type="email" />
-*     </Form.Field>
-*   </Form.Step>
-*
-*   <Form.Step id="profile">
-*     <Form.Field name="name" label="Full Name" required>
-*       <Form.Input />
-*     </Form.Field>
-*   </Form.Step>
-*
-*   <Form.StepperControls />
-* </Form.Stepper>
-* ```
-*/
-function FormStepper({ steps, children, onComplete, onStepChange, initialStep, className, defaultValues, id, formComponent }) {
-	const stepperDef = React$1.useMemo(() => {
-		return defineStepper(...toStepperizeSteps(steps));
-	}, [steps]);
-	const initialStepIndex = React$1.useMemo(() => {
-		if (!initialStep) return void 0;
-		const index = steps.findIndex((s) => s.id === initialStep);
-		return index >= 0 ? steps[index].id : void 0;
-	}, [initialStep, steps]);
-	const { Stepper } = stepperDef;
-	const providerProps = initialStepIndex ? { initialStep: initialStepIndex } : {};
-	return /* @__PURE__ */ jsx(Stepper.Provider, {
-		...providerProps,
-		children: /* @__PURE__ */ jsx(FormStepperContent, {
-			steps,
-			stepperDef,
-			onComplete,
-			onStepChange,
-			className,
-			defaultValues,
-			id,
-			formComponent,
-			children
-		})
-	});
-}
-FormStepper.displayName = "Form.Stepper";
-function FormStepperContent({ steps, stepperDef, children, onComplete, onStepChange, className, defaultValues, id, formComponent }) {
-	const { useStepper } = stepperDef;
-	const stepper = useStepper();
-	return /* @__PURE__ */ jsx(StepForm, {
-		steps,
-		stepper,
-		currentStepConfig: React$1.useMemo(() => steps.find((s) => s.id === stepper.state.current.data.id) ?? steps[0], [steps, stepper.state.current.data.id]),
-		combinedSchema: React$1.useMemo(() => mergeSchemas(steps), [steps]),
-		storedValues: React$1.useMemo(() => {
-			const allMetadata = steps.reduce((acc, step) => ({
-				...acc,
-				...stepper.metadata.get(step.id) || {}
-			}), {});
-			return {
-				...defaultValues,
-				...allMetadata
-			};
-		}, [
-			steps,
-			stepper,
-			defaultValues,
-			stepper.state.current.data.id
-		]),
-		onComplete,
-		onStepChange,
-		className,
-		id,
-		formComponent,
-		children
-	}, stepper.state.current.data.id);
-}
-function StepForm({ steps, stepper, currentStepConfig, combinedSchema: _combinedSchema, storedValues, children, onComplete, onStepChange, className, id, formComponent: FormComp = "form" }) {
-	const adapter = useAdapter();
-	const [isSubmitting, setIsSubmitting] = React$1.useState(false);
-	const formRef = React$1.useRef(null);
-	const currentIndex = stepper.lookup.getIndex(stepper.state.current.data.id);
-	const handleStepSubmit = React$1.useCallback(async (data) => {
-		stepper.metadata.set(stepper.state.current.data.id, data);
-		if (stepper.state.isLast) {
-			setIsSubmitting(true);
-			try {
-				await onComplete({
-					...steps.reduce((acc, step) => ({
-						...acc,
-						...stepper.metadata.get(step.id) || {}
-					}), {}),
-					...data
-				});
-			} catch (error) {
-				console.error("Stepper form completion error:", error);
-			} finally {
-				setIsSubmitting(false);
-			}
-		} else {
-			const nextStepId = stepper.lookup.getNext(stepper.state.current.data.id)?.id;
-			if (nextStepId) {
-				stepper.navigation.goTo(nextStepId);
-				onStepChange?.(nextStepId, "next");
-			}
-		}
-	}, [
-		stepper,
-		steps,
-		onComplete,
-		onStepChange
-	]);
-	const instance = adapter.useCreateForm({
-		schema: currentStepConfig.schema,
-		defaultValues: storedValues,
-		mode: "onSubmit",
-		id: `${id ?? "stepper"}-${currentStepConfig.id}`,
-		onSubmit: handleStepSubmit,
-		formRef
-	});
-	const next = React$1.useCallback(() => {
-		formRef.current?.requestSubmit();
-	}, []);
-	const prev = React$1.useCallback(() => {
-		const currentValues = instance.getValues();
-		if (Object.keys(currentValues).length > 0) stepper.metadata.set(stepper.state.current.data.id, currentValues);
-		const prevStepId = stepper.lookup.getPrev(stepper.state.current.data.id)?.id;
-		if (prevStepId) {
-			stepper.navigation.goTo(prevStepId);
-			onStepChange?.(prevStepId, "prev");
-		}
-	}, [
-		instance,
-		stepper,
-		onStepChange
-	]);
-	const goTo = React$1.useCallback((stepId) => {
-		if (stepper.lookup.getIndex(stepId) < currentIndex) {
-			const currentValues = instance.getValues();
-			if (Object.keys(currentValues).length > 0) stepper.metadata.set(stepper.state.current.data.id, currentValues);
-			stepper.navigation.goTo(stepId);
-			onStepChange?.(stepId, "prev");
-		}
-	}, [
-		instance,
-		stepper,
-		currentIndex,
-		onStepChange
-	]);
-	const getStepData = React$1.useCallback((stepId) => stepper.metadata.get(stepId), [stepper]);
-	const getAllStepData = React$1.useCallback(() => {
-		return steps.reduce((acc, step) => ({
-			...acc,
-			...stepper.metadata.get(step.id) || {}
-		}), {});
-	}, [steps, stepper]);
-	const stepperContextValue = React$1.useMemo(() => ({
-		steps,
-		current: currentStepConfig,
-		currentIndex,
-		next,
-		prev,
-		goTo,
-		isFirst: stepper.state.isFirst,
-		isLast: stepper.state.isLast,
-		getStepData,
-		getAllStepData,
-		utils: { getIndex: (stepId) => stepper.lookup.getIndex(stepId) }
-	}), [
-		steps,
-		currentStepConfig,
-		currentIndex,
-		stepper,
-		next,
-		prev,
-		goTo,
-		getStepData,
-		getAllStepData
-	]);
-	const contextValue = React$1.useMemo(() => ({
-		form: instance,
-		fields: instance.fields,
-		isSubmitting,
-		submit: () => formRef.current?.requestSubmit(),
-		reset: () => instance.reset(),
-		formId: instance.id
-	}), [instance, isSubmitting]);
-	const renderProps = {
-		steps,
-		current: currentStepConfig,
-		currentIndex,
-		next,
-		prev,
-		goTo,
-		isFirst: stepper.state.isFirst,
-		isLast: stepper.state.isLast,
-		getStepData,
-		getAllStepData
-	};
-	const resolvedChildren = typeof children === "function" ? children(renderProps) : children;
-	return /* @__PURE__ */ jsx(FormStepperContext, {
-		value: stepperContextValue,
-		children: /* @__PURE__ */ jsx(FormProvider, {
-			value: contextValue,
-			children: /* @__PURE__ */ jsx(adapter.FormProvider, {
-				instance,
-				children: /* @__PURE__ */ jsx(FormComp, {
-					ref: formRef,
-					...instance.formProps,
-					className: cn("space-y-6", className),
-					autoComplete: "off",
-					noValidate: true,
-					onSubmit: (e) => {
-						e.stopPropagation();
-						const adapterSubmit = instance.formProps.onSubmit;
-						adapterSubmit?.(e);
-					},
-					children: resolvedChildren
-				})
-			})
-		})
-	});
-}
-//#endregion
-//#region src/components/features/form/components/stepper/form-step.tsx
-/**
-* Form.Step - Individual step content container
-*
-* Only renders its children when the step is active.
-* Works with the single-form architecture - fields remain registered
-* even when unmounted, preserving their values.
-*
-* @example
-* ```tsx
-* <Form.Step id="account">
-*   <Form.Field name="email" label="Email" required>
-*     <Form.Input type="email" />
-*   </Form.Field>
-* </Form.Step>
-* ```
-*/
-function FormStep({ id, children }) {
-	const { current } = useFormStepperContext();
-	if (current.id !== id) return null;
-	return /* @__PURE__ */ jsx(Fragment$1, { children });
-}
-FormStep.displayName = "Form.Step";
-//#endregion
-//#region src/components/features/form/components/stepper/stepper-controls.tsx
-/**
-* Form.StepperControls - Navigation buttons (Previous/Next/Submit)
-*
-* Provides Previous and Next/Submit buttons for navigating between steps.
-* The Next button triggers form validation before advancing.
-* The Previous button navigates back without validation.
-*
-* @example
-* ```tsx
-* <Form.StepperControls
-*   prevLabel={(isFirst) => isFirst ? 'Cancel' : 'Previous'}
-*   nextLabel={(isLast) => isLast ? 'Submit' : 'Next'}
-*   loadingText="Creating..."
-*   onCancel={() => setOpen(false)}
-* />
-* ```
-*
-* @example With external loading state
-* ```tsx
-* <Form.StepperControls
-*   loading={fetcher.state === 'submitting'}
-*   disabled={!isValid}
-*   loadingText="Saving..."
-* />
-* ```
-*/
-function StepperControls({ prevLabel = "Previous", nextLabel = (isLast) => isLast ? "Submit" : "Next", loadingText = "Submitting...", showPrev = true, loading, disabled, onPrev, onCancel, className }) {
-	const { prev, isFirst, isLast } = useFormStepperContext();
-	const { isSubmitting: formIsSubmitting } = useFormContext$1();
-	const isLoading = loading ?? formIsSubmitting;
-	const isDisabled = disabled ?? false;
-	const getPrevLabel = () => {
-		if (typeof prevLabel === "function") return prevLabel(isFirst);
-		return prevLabel;
-	};
-	const getNextLabel = () => {
-		if (typeof nextLabel === "function") return nextLabel(isLast);
-		return nextLabel;
-	};
-	const handlePrev = () => {
-		if (isFirst && onCancel) onCancel();
-		else {
-			onPrev?.();
-			prev();
-		}
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-center justify-between gap-3", className),
-		children: [/* @__PURE__ */ jsx("div", { children: showPrev && /* @__PURE__ */ jsx(Button, {
-			htmlType: "button",
-			type: "quaternary",
-			theme: "outline",
-			size: "small",
-			onClick: handlePrev,
-			disabled: isLoading || isDisabled,
-			children: getPrevLabel()
-		}) }), /* @__PURE__ */ jsx(Button, {
-			htmlType: "submit",
-			type: "primary",
-			size: "small",
-			loading: isLoading,
-			disabled: isLoading || isDisabled,
-			children: isLoading && isLast ? loadingText : getNextLabel()
-		})]
-	});
-}
-StepperControls.displayName = "Form.StepperControls";
-//#endregion
-//#region src/components/features/form/components/stepper/stepper-navigation.tsx
-/**
-* Form.StepperNavigation - Step indicators/progress
-*
-* Displays visual step indicators showing current progress through the form.
-* Supports horizontal and vertical variants with optional label orientation.
-*
-* @example
-* ```tsx
-* <Form.StepperNavigation variant="horizontal" labelOrientation="vertical" />
-* ```
-*/
-function StepperNavigation({ variant = "horizontal", labelOrientation = "vertical", className }) {
-	const { steps, currentIndex } = useFormStepperContext();
-	if (variant === "horizontal" && labelOrientation === "vertical") return /* @__PURE__ */ jsx("nav", {
-		"aria-label": "Form steps",
-		className: cn("flex flex-row items-start justify-between", className),
-		children: steps.map((step, index) => {
-			const isActive = index === currentIndex;
-			const isCompleted = index < currentIndex;
-			return /* @__PURE__ */ jsxs("div", {
-				className: "relative flex flex-1 flex-col items-center",
-				children: [
-					!(index === steps.length - 1) && /* @__PURE__ */ jsx("div", { className: "bg-stepper-line absolute top-4 right-[calc(-50%+20px)] left-[calc(50%+20px)] h-0.5" }),
-					/* @__PURE__ */ jsx("div", {
-						className: cn("relative z-10 flex h-8 w-8 items-center justify-center rounded-full border bg-transparent text-sm font-medium transition-colors", isActive && "border-primary bg-primary text-primary-foreground", isCompleted && "border-tertiary-foreground bg-tertiary-foreground text-tertiary", !isActive && !isCompleted && "border-stepper-label text-stepper-label"),
-						"aria-current": isActive ? "step" : void 0,
-						children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-tertiary h-4 w-4" }) : index + 1
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "mt-1",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: cn("text-xs font-medium", isActive && "text-foreground", isCompleted && "text-stepper-label", !isActive && !isCompleted && "text-stepper-label"),
-							children: step.label
-						}), step.description && /* @__PURE__ */ jsx("p", {
-							className: "text-muted-foreground mt-0.5 text-xs",
-							children: step.description
-						})]
-					})
-				]
-			}, step.id);
-		})
-	});
-	if (variant === "horizontal") return /* @__PURE__ */ jsx("nav", {
-		"aria-label": "Form steps",
-		className: cn("flex flex-row items-center", className),
-		children: steps.map((step, index) => {
-			const isActive = index === currentIndex;
-			const isCompleted = index < currentIndex;
-			const isLast = index === steps.length - 1;
-			return /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: cn("flex h-8 w-8 items-center justify-center rounded-full border text-sm font-medium transition-colors", isActive && "border-primary bg-primary text-primary-foreground", isCompleted && "border-tertiary-foreground bg-tertiary-foreground text-tertiary", !isActive && !isCompleted && "border-stepper-label text-stepper-label"),
-					"aria-current": isActive ? "step" : void 0,
-					children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-tertiary size-4" }) : index + 1
-				}), /* @__PURE__ */ jsx("div", {
-					className: "ml-2",
-					children: /* @__PURE__ */ jsx("span", {
-						className: cn("text-sm font-medium", isActive && "text-foreground", isCompleted && "text-stepper-label", !isActive && !isCompleted && "text-stepper-label"),
-						children: step.label
-					})
-				})]
-			}), !isLast && /* @__PURE__ */ jsx("div", { className: "bg-stepper-line mx-4 h-0.5 min-w-8 flex-1" })] }, step.id);
-		})
-	});
-	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": "Form steps",
-		className: cn("flex flex-col", className),
-		children: steps.map((step, index) => {
-			const isActive = index === currentIndex;
-			const isCompleted = index < currentIndex;
-			const isLast = index === steps.length - 1;
-			return /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-row",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col items-center",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: cn("flex h-8 w-8 items-center justify-center rounded-full border text-sm font-medium transition-colors", isActive && "border-primary bg-primary text-primary-foreground", isCompleted && "border-tertiary-foreground bg-tertiary-foreground text-tertiary", !isActive && !isCompleted && "border-stepper-label text-stepper-label"),
-						"aria-current": isActive ? "step" : void 0,
-						children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-tertiary size-4" }) : index + 1
-					}), !isLast && /* @__PURE__ */ jsx("div", { className: "bg-stepper-line my-1 min-h-8 w-0.5 flex-1" })]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "ml-3 pb-8",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: cn("text-sm font-medium", isActive && "text-foreground", isCompleted && "text-stepper-label", !isActive && !isCompleted && "text-stepper-label"),
-						children: step.label
-					}), step.description && /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground mt-0.5 text-xs",
-						children: step.description
-					})]
-				})]
-			}, step.id);
-		})
-	});
-}
-StepperNavigation.displayName = "Form.StepperNavigation";
-//#endregion
-//#region src/components/features/form/components/form-input-group.tsx
-/**
-* Form.InputGroup - Input with leading/trailing addons
-*
-* Automatically wired to the parent Form.Field context.
-*
-* @example
-* ```tsx
-* <Form.Field name="website" label="Website" required>
-*   <Form.InputGroup leading="https://" placeholder="example.com" />
-* </Form.Field>
-* ```
-*/
-function FormInputGroup({ ref, className, disabled, ...props }) {
-	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
-	const isDisabled = disabled ?? fieldDisabled;
-	const hasErrors = errors && errors.length > 0;
-	return /* @__PURE__ */ jsx(InputWithAddons, {
-		...props,
-		ref,
-		id,
-		name: fieldState?.name,
-		value: fieldState?.value ?? "",
-		onChange: (e) => fieldState?.change(e.target.value),
-		onBlur: () => fieldState?.blur(),
-		className: cn("text-xs!", className),
-		disabled: isDisabled,
-		"aria-invalid": hasErrors || void 0,
-		"aria-describedby": hasErrors ? `${id}-error` : void 0
-	});
-}
-FormInputGroup.displayName = "Form.InputGroup";
-//#endregion
 //#region src/components/features/form/hooks/use-field.ts
 /**
 * Hook to access and control a specific field.
 * Delegates to the active adapter's useField implementation.
 *
+* Note: `meta.disabled` is always `false` because this hook operates
+* independently of Form.Field. If you need disabled state, read it
+* from your component props or from the Form.Field context via `useFieldContext()`.
+*
 * @example
 * ```tsx
 * function MyCustomInput({ name }: { name: string }) {
@@ -1682,48 +1517,36 @@ function useFormContext() {
 	return useFormContext$1();
 }
 //#endregion
-//#region src/components/features/form/hooks/use-stepper.ts
+//#region src/components/features/form/hooks/use-form-state.ts
 /**
-* Hook to access the stepper context
-* Must be used within a Form.Stepper component
+* Hook to access form-level state (dirty, valid, submitted, etc.)
 *
 * @example
 * ```tsx
-* function StepContent() {
-*   const {
-*     current,
-*     currentIndex,
-*     steps,
-*     next,
-*     prev,
-*     goTo,
-*     isFirst,
-*     isLast,
-*   } = useStepper();
+* function SaveButton() {
+*   const { isDirty, isSubmitting, isValid } = useFormState()
 *
 *   return (
-*     <div>
-*       <h2>Step {currentIndex + 1}: {current.label}</h2>
-*       <button onClick={prev} disabled={isFirst}>Previous</button>
-*       <button onClick={next} disabled={isLast}>Next</button>
-*     </div>
-*   );
+*     <button
+*       type="submit"
+*       disabled={!isDirty || isSubmitting || !isValid}
+*     >
+*       Save Changes
+*     </button>
+*   )
 * }
 * ```
 */
-function useStepper() {
-	const context = useFormStepperContext();
+function useFormState() {
+	const ctx = useFormContext$1();
 	return {
-		steps: context.steps,
-		current: context.current,
-		currentIndex: context.currentIndex,
-		next: context.next,
-		prev: context.prev,
-		goTo: context.goTo,
-		isFirst: context.isFirst,
-		isLast: context.isLast,
-		getStepData: context.getStepData,
-		getAllStepData: context.getAllStepData
+		isDirty: ctx.isDirty,
+		isValid: ctx.isValid,
+		isSubmitting: ctx.isSubmitting,
+		isSubmitted: ctx.isSubmitted,
+		submitCount: ctx.submitCount,
+		dirtyFields: ctx.dirtyFields,
+		touchedFields: ctx.touchedFields
 	};
 }
 //#endregion
@@ -1774,19 +1597,34 @@ function useStepper() {
 * }
 * ```
 *
-* @example Multi-Step Form
+* @example Multi-Step Form (separate import)
 * ```tsx
+* import { FormStepper, FormStep, StepperNavigation, StepperControls } from '@datum-cloud/datum-ui/form/stepper';
+*
 * const steps = [
 *   { id: 'account', label: 'Account', schema: accountSchema },
 *   { id: 'profile', label: 'Profile', schema: profileSchema },
 * ];
 *
-* <Form.Stepper steps={steps} onComplete={handleComplete}>
-*   <Form.StepperNavigation />
-*   <Form.Step id="account">...</Form.Step>
-*   <Form.Step id="profile">...</Form.Step>
-*   <Form.StepperControls />
-* </Form.Stepper>
+* <FormStepper steps={steps} onComplete={handleComplete}>
+*   <StepperNavigation />
+*   <FormStep id="account">...</FormStep>
+*   <FormStep id="profile">...</FormStep>
+*   <StepperControls />
+* </FormStepper>
+* ```
+*
+* @example Form State
+* ```tsx
+* <Form.Root schema={schema} onSubmit={handleSubmit}>
+*   {({ isDirty, isValid, isSubmitted, submitCount }) => (
+*     <>
+*       <Form.Field name="name"><Form.Input /></Form.Field>
+*       <Form.Submit disabled={!isDirty || !isValid}>Save</Form.Submit>
+*       {isSubmitted && <p>Submitted {submitCount} time(s)</p>}
+*     </>
+*   )}
+* </Form.Root>
 * ```
 *
 * @example Conditional Fields
@@ -1818,13 +1656,15 @@ function useStepper() {
 * - Form.When - Conditional rendering
 * - Form.FieldArray - Dynamic array of fields
 * - Form.Custom - Escape hatch for custom implementations
-* - Form.Stepper, Form.Step, Form.StepperNavigation, Form.StepperControls
 * - Form.Dialog - Form rendered inside a Dialog
 * - Form.Submit, Form.Button, Form.Error, Form.Description
 *
+* Stepper (separate import):
+* - `@datum-cloud/datum-ui/form/stepper` provides FormStepper, FormStep, StepperNavigation, StepperControls, useStepper
+*
 * Hooks:
-* - Form.useFormContext, Form.useFieldContext, Form.useField
-* - Form.useWatch, Form.useWatchAll, Form.useStepper
+* - Form.useFormContext, Form.useFormState, Form.useFieldContext, Form.useField
+* - Form.useWatch, Form.useWatchAll
 */
 const Form = {
 	Root: FormRoot,
@@ -1843,21 +1683,23 @@ const Form = {
 	RadioItem: FormRadioItem,
 	CopyBox: FormCopyBox,
 	Autocomplete: FormAutocomplete,
+	Autosearch: FormAutosearch,
+	Combobox: FormCombobox,
 	InputGroup: FormInputGroup,
+	DatePicker: FormDatePicker,
+	DateTimePicker: FormDateTimePicker,
+	TimePicker: FormTimePicker,
+	Transfer: FormTransfer,
 	When: FormWhen,
 	FieldArray: FormFieldArray,
 	Custom: FormCustom,
-	Stepper: FormStepper,
-	Step: FormStep,
-	StepperNavigation,
-	StepperControls,
 	Dialog: FormDialog,
 	useFormContext,
+	useFormState,
 	useFieldContext,
 	useField,
 	useWatch,
-	useWatchAll,
-	useStepper
+	useWatchAll
 };
 //#endregion
-export { FormButton as A, FormField as C, FormCustom as D, FormDescription as E, FormCopyBox as O, FormFieldArray as S, FormDialog as T, FormSelectItem as _, useField as a, FormRadioItem as b, FormStep as c, useWatch as d, useWatchAll as f, FormSelect as g, FormSubmit as h, useFieldContext as i, FormAutocomplete as j, FormCheckbox as k, FormStepper as l, FormSwitch as m, useStepper as n, StepperNavigation as o, FormTextarea as p, useFormContext as r, StepperControls as s, Form as t, FormWhen as u, FormRoot as v, FormError as w, FormInput as x, FormRadioGroup as y };
+export { FormCheckbox as A, FormDialog as C, FormCustom as D, FormDatePicker as E, FormAutosearch as M, FormAutocomplete as N, FormCopyBox as O, FormError as S, FormDateTimePicker as T, FormRadioGroup as _, useField as a, FormFieldArray as b, useWatchAll as c, FormTextarea as d, FormSwitch as f, FormRoot as g, FormSelectItem as h, useFieldContext as i, FormButton as j, FormCombobox as k, FormTransfer as l, FormSelect as m, useFormState as n, FormWhen as o, FormSubmit as p, useFormContext as r, useWatch as s, Form as t, FormTimePicker as u, FormRadioItem as v, FormDescription as w, FormField as x, FormInput as y };