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

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

@@ -11,15 +11,19 @@ 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 CalendarDatePicker } from "./calendar-date-picker-DWK94_DC.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 { n as useFormContext$1, t as FormProvider } from "./form-context-Ccxm-wqL.mjs";
+import { t as Combobox } from "./combobox-cKTFK4uN.mjs";
+import { t as useCopyToClipboard } from "./use-copy-to-clipboard-uNeeVHC4.mjs";
+import { t as DateTimePicker } from "./date-time-picker-Dy2jrJoN.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-B2n8pgEQ.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 }) {
@@ -98,19 +102,27 @@ 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, {
-		value,
-		children
-	});
-}
-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;
+//#region src/components/features/form/components/form-autosearch.tsx
+/**
+* Form.Autosearch - Alias to Form.Autocomplete with search-first focus
+*
+* This is a convenience wrapper around Form.Autocomplete that emphasizes
+* the search functionality. It's functionally identical to Form.Autocomplete.
+*
+* @example Basic usage
+* ```tsx
+* <Form.Field name="search" label="Search">
+*   <Form.Autosearch
+*     options={options}
+*     placeholder="Type to search..."
+*   />
+* </Form.Field>
+* ```
+*/
+function FormAutosearch(props) {
+	return /* @__PURE__ */ jsx(FormAutocomplete, { ...props });
 }
+FormAutosearch.displayName = "Form.Autosearch";
 //#endregion
 //#region src/components/features/form/components/form-button.tsx
 /**
@@ -181,6 +193,34 @@ 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 }) {
+	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]);
+	return /* @__PURE__ */ jsx(Combobox, {
+		id,
+		options,
+		value: fieldState?.value ?? "",
+		onChange: handleChange,
+		placeholder,
+		searchPlaceholder,
+		emptyMessage,
+		disabled: isDisabled,
+		searchable,
+		showDropdownArrow,
+		clearable,
+		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 +286,7 @@ function FormCopyBox({ variant = "default", className, contentClassName, buttonC
 		})]
 	});
 }
+FormCopyBox.displayName = "Form.CopyBox";
 //#endregion
 //#region src/components/features/form/components/form-custom.tsx
 /**
@@ -270,17 +311,114 @@ 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 }) {
+	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);
+				return;
+			}
+			if (numberOfMonths === 1) fieldState?.change(range.from.toISOString());
+			else fieldState?.change({
+				from: range.from.toISOString(),
+				to: range.to?.toISOString()
+			});
+		}, [fieldState, numberOfMonths]),
+		numberOfMonths,
+		placeholder,
+		disabled: isDisabled,
+		minDate,
+		maxDate,
+		disableFuture,
+		disablePast,
+		variant: "outline",
+		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 }) {
+	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]),
+		minDate,
+		maxDate,
+		disabledDates,
+		timezone,
+		showTimezoneIndicator,
+		placeholder,
+		disabled: isDisabled,
+		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 +515,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);
 		}
@@ -675,6 +810,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
@@ -716,7 +884,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, {
@@ -766,9 +935,13 @@ function FormRoot({ schema, children, onSubmit, action, method = "POST", formCom
 	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,22 +980,47 @@ 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,
 		submit: () => formRef.current?.requestSubmit(),
 		reset: () => instance.reset(),
 		formId: instance.id
-	}), [instance, isSubmitting]);
+	}), [
+		instance,
+		isSubmitting,
+		formState,
+		isSubmitted,
+		submitCount
+	]);
 	const isRenderFunction = typeof children === "function";
-	const renderProps = {
+	const renderProps = React$1.useMemo(() => ({
 		form: instance,
 		fields: instance.fields,
 		isSubmitting,
+		isDirty: formState.isDirty,
+		isValid: formState.isValid,
+		isSubmitted,
+		submitCount,
+		dirtyFields: formState.dirtyFields,
+		touchedFields: formState.touchedFields,
 		submit: () => formRef.current?.requestSubmit(),
 		reset: () => instance.reset()
-	};
+	}), [
+		instance,
+		isSubmitting,
+		formState,
+		isSubmitted,
+		submitCount
+	]);
 	const renderChildren = () => {
 		if (isRenderFunction) return children(renderProps);
 		return children;
@@ -1002,6 +1200,73 @@ 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]),
+		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]);
+	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-sm text-muted-foreground 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,520 +1343,6 @@ 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.
@@ -1682,48 +1433,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 +1513,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 +1572,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 +1599,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 };