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

package/dist/{use-stepper-DigoyHhX.mjs → form-BE1xBne4.mjs}

@@ -1,28 +1,25 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
-import { t as Button } from "./button-0N61fmAR.mjs";
-import { t as Icon } from "./icon-wrapper-BBK4z4tj.mjs";
-import { t as Checkbox } from "./checkbox-CQrjygFt.mjs";
-import { t as Dialog } from "./dialog-B0B3Kbfk.mjs";
-import { t as Input } from "./input-CYFN0Ap2.mjs";
-import { t as Label } from "./label-mOg07fuQ.mjs";
-import { n as RadioGroupItem, t as RadioGroup } from "./radio-group-_gMymwnb.mjs";
-import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-BZOKWjlH.mjs";
-import { t as Tooltip } from "./tooltip-CuX2jQA9.mjs";
-import { t as Switch } from "./switch-C60FpEal.mjs";
-import { t as Textarea } from "./textarea-CZF5n57i.mjs";
-import { t as Autocomplete } from "./autocomplete-DRB_kSVx.mjs";
-import { r as toast } from "./use-toast-By9HuFwP.mjs";
-import { t as useCopyToClipboard } from "./use-copy-to-clipboard-n29wJwvW.mjs";
-import { t as defineStepper } from "./stepper-BMsn7I78.mjs";
-import { t as InputWithAddons } from "./input-with-addons-B8rzNhpq.mjs";
-import { Form } from "./form/index.mjs";
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Button } from "./button-BllvE9Lm.mjs";
+import { t as Icon } from "./icon-wrapper-DuLp3RM1.mjs";
+import { t as Checkbox } from "./checkbox-I5BvrMPe.mjs";
+import { t as Dialog } from "./dialog-Bm2H9lrx.mjs";
+import { t as Input } from "./input-FKGqZypx.mjs";
+import { t as Label } from "./label-cnAhY-ej.mjs";
+import { n as RadioGroupItem, t as RadioGroup } from "./radio-group-CiITR0LO.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-CiLR_DiQ.mjs";
+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 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 { InputWithAddons } from "./input-with-addons/index.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 { FormProvider, getFormProps, getInputProps, getTextareaProps, useForm, useFormMetadata, useInputControl } from "@conform-to/react";
-import { getZodConstraint, parseWithZod } from "@conform-to/zod/v4";
 import { z } from "zod";
-
 //#region src/components/features/form/context/field-context.tsx
 const FieldContext = React$1.createContext(null);
 function FieldProvider({ children, value }) {
@@ -43,7 +40,6 @@ function useFieldContext$1() {
 function useOptionalFieldContext() {
 	return React$1.use(FieldContext);
 }
-
 //#endregion
 //#region src/components/features/form/components/form-autocomplete.tsx
 /**
@@ -85,28 +81,26 @@ function useOptionalFieldContext() {
 * ```
 */
 function FormAutocomplete({ disabled, className, ...props }) {
-	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
-	const control = useInputControl(fieldMeta);
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
 	const isDisabled = disabled ?? fieldDisabled;
 	const hasErrors = errors && errors.length > 0;
-	const selectValue = Array.isArray(control.value) ? control.value[0] : control.value;
+	const value = fieldState?.value != null ? String(fieldState.value) : "";
 	return /* @__PURE__ */ jsx(Autocomplete, {
 		...props,
-		name: fieldMeta.name,
-		id: fieldMeta.id,
-		value: selectValue ?? "",
-		onValueChange: control.change,
+		name: fieldState?.name,
+		id,
+		value,
+		onValueChange: (val) => fieldState?.change(val),
 		disabled: isDisabled,
 		triggerClassName: cn(hasErrors && "border-destructive", props.triggerClassName),
 		className
 	});
 }
 FormAutocomplete.displayName = "Form.Autocomplete";
-
 //#endregion
 //#region src/components/features/form/context/form-context.tsx
 const FormContext = React$1.createContext(null);
-function FormProvider$1({ children, value }) {
+function FormProvider({ children, value }) {
 	return /* @__PURE__ */ jsx(FormContext, {
 		value,
 		children
@@ -117,7 +111,6 @@ function useFormContext$1() {
 	if (!context) throw new Error("useFormContext must be used within a Form.Root component");
 	return context;
 }
-
 //#endregion
 //#region src/components/features/form/components/form-button.tsx
 /**
@@ -151,7 +144,6 @@ function FormButton({ children, onClick, type = "quaternary", theme = "borderles
 	});
 }
 FormButton.displayName = "Form.Button";
-
 //#endregion
 //#region src/components/features/form/components/form-checkbox.tsx
 /**
@@ -167,34 +159,27 @@ FormButton.displayName = "Form.Button";
 * ```
 */
 function FormCheckbox({ label, disabled, className }) {
-	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
-	const control = useInputControl(fieldMeta);
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
 	const isDisabled = disabled ?? fieldDisabled;
 	const hasErrors = errors && errors.length > 0;
-	const isChecked = control.value === "on" || control.value === "true";
-	const handleCheckedChange = (checked) => {
-		control.change(checked ? "on" : "");
-	};
-	const checkboxId = fieldMeta.id;
+	const checked = Boolean(fieldState?.value);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center space-x-2", className),
 		children: [/* @__PURE__ */ jsx(Checkbox, {
-			id: checkboxId,
-			name: fieldMeta.name,
-			checked: isChecked,
-			onCheckedChange: handleCheckedChange,
+			id,
+			checked,
+			onCheckedChange: (value) => fieldState?.change(Boolean(value)),
 			disabled: isDisabled,
 			"aria-invalid": hasErrors || void 0,
-			"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0
+			"aria-describedby": hasErrors ? `${id}-error` : void 0
 		}), label && /* @__PURE__ */ jsx(Label, {
-			htmlFor: checkboxId,
+			htmlFor: id,
 			className: cn("cursor-pointer text-sm font-normal", isDisabled && "cursor-not-allowed opacity-70"),
 			children: label
 		})]
 	});
 }
 FormCheckbox.displayName = "Form.Checkbox";
-
 //#endregion
 //#region src/components/features/form/components/form-copy-box.tsx
 /**
@@ -225,20 +210,14 @@ FormCheckbox.displayName = "Form.Checkbox";
 * ```
 */
 function FormCopyBox({ variant = "default", className, contentClassName, buttonClassName, placeholder = "" }) {
-	const { fieldMeta } = useFieldContext$1();
-	const control = useInputControl(fieldMeta);
-	const [_, copy] = useCopyToClipboard();
-	const [copied, setCopied] = React$1.useState(false);
-	const value = control.value ?? placeholder;
+	const { fieldState } = useFieldContext$1();
+	const [copied, copy] = useCopyToClipboard();
+	const value = fieldState?.value != null ? String(fieldState.value) : "";
+	const displayValue = value || placeholder;
 	const copyToClipboard = () => {
-		const stringValue = String(value);
-		if (!stringValue) return;
-		copy(stringValue).then(() => {
+		if (!value) return;
+		copy(value).then(() => {
 			toast.success("Copied to clipboard");
-			setCopied(true);
-			setTimeout(() => {
-				setCopied(false);
-			}, 2e3);
 		});
 	};
 	return /* @__PURE__ */ jsxs("div", {
@@ -247,7 +226,7 @@ function FormCopyBox({ variant = "default", className, contentClassName, buttonC
 			className: cn("flex w-full items-center overflow-hidden px-3 py-2 text-xs opacity-50", contentClassName),
 			children: /* @__PURE__ */ jsx("span", {
 				className: "truncate",
-				children: String(value)
+				children: displayValue
 			})
 		}), /* @__PURE__ */ jsx("div", {
 			className: "flex items-center py-2 pr-3",
@@ -267,7 +246,6 @@ function FormCopyBox({ variant = "default", className, contentClassName, buttonC
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/features/form/components/form-custom.tsx
 /**
@@ -302,7 +280,6 @@ function FormCustom({ children }) {
 	}) });
 }
 FormCustom.displayName = "Form.Custom";
-
 //#endregion
 //#region src/components/features/form/components/form-description.tsx
 /**
@@ -327,7 +304,6 @@ function FormDescription({ children, className }) {
 	});
 }
 FormDescription.displayName = "Form.Description";
-
 //#endregion
 //#region src/components/features/form/components/form-dialog.tsx
 /**
@@ -461,7 +437,6 @@ function FormDialog({ open, onOpenChange, defaultOpen, title, description, trigg
 	});
 }
 FormDialog.displayName = "Form.Dialog";
-
 //#endregion
 //#region src/components/features/form/components/form-error.tsx
 /**
@@ -502,12 +477,8 @@ function FormError({ children, className }) {
 	});
 }
 FormError.displayName = "Form.Error";
-
 //#endregion
 //#region src/components/features/form/components/form-field.tsx
-/**
-* Internal FieldLabel component with hover-reveal tooltip
-*/
 function FieldLabel({ htmlFor, label, hasErrors, required, tooltip, className }) {
 	const [isTooltipVisible, setIsTooltipVisible] = React$1.useState(false);
 	return /* @__PURE__ */ jsxs("div", {
@@ -534,93 +505,70 @@ function FieldLabel({ htmlFor, label, hasErrors, required, tooltip, className })
 	});
 }
 /**
-* Form.Field - Field wrapper component
-*
-* Provides field context to children with:
-* - Automatic label rendering
-* - Error display
-* - Description text
-* - Required indicator
-* - Accessibility attributes
-*
-* Supports two patterns:
-* 1. ReactNode children - for standard Form inputs
-* 2. Render function - for custom components needing field access
+* Form.Field - Field wrapper that provides label, errors, and description.
+* Uses the active adapter to resolve field state by name.
 *
 * @example Standard usage
 * ```tsx
-* <Form.Field name="email" label="Email Address" required>
+* <Form.Field name="email" label="Email" required>
 *   <Form.Input type="email" />
 * </Form.Field>
 * ```
 *
 * @example Render function for custom components
 * ```tsx
-* <Form.Field name="role" label="Role" required>
-*   {({ control, meta, fields }) => (
-*     <CustomSelect
-*       name={meta.name}
-*       value={control.value}
-*       onChange={control.change}
-*     />
+* <Form.Field name="role" label="Role">
+*   {({ control, meta }) => (
+*     <CustomSelect value={control.value} onChange={control.change} />
 *   )}
 * </Form.Field>
 * ```
 */
 function FormField({ name, children, label, description, tooltip, required = false, disabled = false, className, labelClassName }) {
-	const { fields, form, isSubmitting } = useFormContext$1();
-	const fieldMeta = React$1.useMemo(() => {
-		const parts = name.split(".");
-		let current = fields;
-		for (let i = 0; i < parts.length; i++) {
-			const part = parts[i];
-			if (!current) break;
-			if (/^\d+$/.test(part)) {
-				const fieldList = current.getFieldList?.();
-				if (fieldList) {
-					const item = fieldList[Number.parseInt(part, 10)];
-					if (i < parts.length - 1 && item?.getFieldset) current = item.getFieldset();
-					else current = item;
-				} else current = current[part];
-			} else if (current[part] !== void 0) current = current[part];
-			else if (typeof current.getFieldset === "function") current = current.getFieldset()[part];
-			else current = void 0;
-		}
-		return current;
-	}, [fields, name]);
-	const errors = fieldMeta?.errors;
-	const hasErrors = errors && errors.length > 0;
-	const fieldId = fieldMeta?.id ?? "";
+	const adapter = useAdapter();
+	const { fields, isSubmitting, form } = useFormContext$1();
+	const fieldState = adapter.useField(name);
+	const errors = fieldState.errors;
+	const hasErrors = errors.length > 0;
+	const fieldId = fieldState.id;
 	const descriptionId = description ? `${fieldId}-description` : void 0;
 	const errorId = hasErrors ? `${fieldId}-error` : void 0;
+	const fieldRequired = required || fieldState.required;
 	const contextValue = React$1.useMemo(() => ({
-		name: fieldMeta?.name ?? "",
+		name,
 		id: fieldId,
 		errors,
-		required,
+		required: fieldRequired,
 		disabled,
-		fieldMeta
+		fieldState
 	}), [
-		fieldMeta,
+		name,
 		fieldId,
 		errors,
-		required,
-		disabled
+		fieldRequired,
+		disabled,
+		fieldState
 	]);
-	if (!fieldMeta) {
-		console.warn(`Form.Field: Field "${name}" not found in form schema`);
-		return null;
-	}
 	const isRenderFunction = typeof children === "function";
 	const renderContent = () => {
-		if (isRenderFunction) return /* @__PURE__ */ jsx(FormFieldRenderContent, {
-			fieldMeta,
+		if (isRenderFunction) return children({
+			field: fieldState,
+			control: {
+				value: fieldState.value,
+				change: fieldState.change,
+				blur: fieldState.blur,
+				focus: fieldState.focus
+			},
+			meta: {
+				name,
+				id: fieldId,
+				errors,
+				required: fieldRequired,
+				disabled
+			},
 			fields,
 			form,
-			isSubmitting,
-			required,
-			disabled,
-			children
+			isSubmitting
 		});
 		return children;
 	};
@@ -633,7 +581,7 @@ function FormField({ name, children, label, description, tooltip, required = fal
 					htmlFor: fieldId,
 					label,
 					hasErrors,
-					required,
+					required: fieldRequired,
 					tooltip,
 					className: labelClassName
 				}),
@@ -657,47 +605,11 @@ function FormField({ name, children, label, description, tooltip, required = fal
 		})
 	});
 }
-/**
-* Internal component to handle render function pattern
-* This is needed because hooks (useInputControl) must be called unconditionally
-*/
-function FormFieldRenderContent({ fieldMeta, fields, form, isSubmitting, required, disabled, children }) {
-	const control = useInputControl(fieldMeta);
-	const meta = React$1.useMemo(() => ({
-		name: fieldMeta.name,
-		id: fieldMeta.id,
-		errors: fieldMeta.errors,
-		required,
-		disabled
-	}), [
-		fieldMeta.name,
-		fieldMeta.id,
-		fieldMeta.errors,
-		required,
-		disabled
-	]);
-	return /* @__PURE__ */ jsx(Fragment$1, { children: children({
-		field: fieldMeta,
-		control: {
-			value: control.value,
-			change: control.change,
-			blur: control.blur,
-			focus: control.focus
-		},
-		meta,
-		fields,
-		form,
-		isSubmitting
-	}) });
-}
 FormField.displayName = "Form.Field";
-
 //#endregion
 //#region src/components/features/form/components/form-field-array.tsx
 /**
-* Form.FieldArray - Dynamic array of fields
-*
-* Provides helpers for managing arrays of form fields.
+* Form.FieldArray - Dynamic array of fields with append/remove/move helpers.
 *
 * @example
 * ```tsx
@@ -705,82 +617,29 @@ FormField.displayName = "Form.Field";
 *   {({ fields, append, remove }) => (
 *     <>
 *       {fields.map((field, index) => (
-*         <div key={field.key} className="flex gap-2">
+*         <div key={field.key}>
 *           <Form.Field name={`members.${index}.email`} label="Email">
 *             <Form.Input type="email" />
 *           </Form.Field>
-*           <Form.Field name={`members.${index}.role`} label="Role">
-*             <Form.Select>
-*               <Form.SelectItem value="admin">Admin</Form.SelectItem>
-*               <Form.SelectItem value="user">User</Form.SelectItem>
-*             </Form.Select>
-*           </Form.Field>
-*           <button type="button" onClick={() => remove(index)}>
-*             Remove
-*           </button>
+*           <button onClick={() => remove(index)}>Remove</button>
 *         </div>
 *       ))}
-*       <button type="button" onClick={() => append({ email: '', role: 'user' })}>
-*         Add Member
-*       </button>
+*       <button onClick={() => append({})}>Add Member</button>
 *     </>
 *   )}
 * </Form.FieldArray>
 * ```
 */
 function FormFieldArray({ name, children }) {
-	const { fields, formId } = useFormContext$1();
-	const form = useFormMetadata(formId);
-	const arrayField = React$1.useMemo(() => {
-		const parts = name.split(".");
-		let current = fields;
-		for (const part of parts) {
-			if (!current) break;
-			if (typeof current.getFieldset === "function") current = current.getFieldset()[part];
-			else current = current[part];
-		}
-		return current;
-	}, [fields, name]);
-	const arrayFieldName = arrayField?.name ?? "";
-	const append = React$1.useCallback((value = {}) => {
-		if (!arrayFieldName) return;
-		form.insert({
-			name: arrayFieldName,
-			defaultValue: value
-		});
-	}, [form, arrayFieldName]);
-	const remove = React$1.useCallback((index) => {
-		if (!arrayFieldName) return;
-		form.remove({
-			name: arrayFieldName,
-			index
-		});
-	}, [form, arrayFieldName]);
-	const move = React$1.useCallback((from, to) => {
-		if (!arrayFieldName) return;
-		form.reorder({
-			name: arrayFieldName,
-			from,
-			to
-		});
-	}, [form, arrayFieldName]);
-	if (!arrayField) {
-		console.warn(`Form.FieldArray: Field "${name}" not found in form schema`);
-		return null;
-	}
+	const fieldArray = useAdapter().useFieldArray(name);
 	return /* @__PURE__ */ jsx(Fragment$1, { children: children({
-		fields: (arrayField.getFieldList?.() ?? []).map((field, index) => ({
-			id: field.id,
-			key: field.key,
-			name: `${name}.${index}`
-		})),
-		append,
-		remove,
-		move
+		fields: fieldArray.items,
+		append: fieldArray.append,
+		remove: fieldArray.remove,
+		move: fieldArray.move
 	}) });
 }
 FormFieldArray.displayName = "Form.FieldArray";
-
 //#endregion
 //#region src/components/features/form/components/form-input.tsx
 /**
@@ -796,23 +655,25 @@ FormFieldArray.displayName = "Form.FieldArray";
 * ```
 */
 function FormInput({ ref, type = "text", className, disabled, ...props }) {
-	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
-	const inputProps = getInputProps(fieldMeta, { type });
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
 	const isDisabled = disabled ?? fieldDisabled;
 	const hasErrors = errors && errors.length > 0;
 	return /* @__PURE__ */ jsx(Input, {
-		ref,
-		...inputProps,
 		...props,
+		ref,
+		id,
+		name: fieldState?.name,
 		type,
+		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 ? `${fieldMeta.id}-error` : void 0,
-		className: cn("!text-xs", className)
+		"aria-describedby": hasErrors ? `${id}-error` : void 0
 	});
 }
 FormInput.displayName = "Form.Input";
-
 //#endregion
 //#region src/components/features/form/components/form-radio-group.tsx
 /**
@@ -832,18 +693,15 @@ FormInput.displayName = "Form.Input";
 * ```
 */
 function FormRadioGroup({ orientation = "vertical", disabled, className, children }) {
-	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
-	const control = useInputControl(fieldMeta);
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
 	const isDisabled = disabled ?? fieldDisabled;
 	const hasErrors = errors && errors.length > 0;
-	const radioValue = Array.isArray(control.value) ? control.value[0] : control.value;
 	return /* @__PURE__ */ jsx(RadioGroup, {
-		name: fieldMeta.name,
-		value: radioValue ?? "",
-		onValueChange: control.change,
+		value: fieldState?.value != null ? String(fieldState.value) : void 0,
+		onValueChange: (val) => fieldState?.change(val),
 		disabled: isDisabled,
 		"aria-invalid": hasErrors || void 0,
-		"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0,
+		"aria-describedby": hasErrors ? `${id}-error` : void 0,
 		className: cn(orientation === "horizontal" ? "flex flex-row space-x-4" : "flex flex-col space-y-2", className),
 		children
 	});
@@ -880,25 +738,15 @@ function FormRadioItem({ value, label, description, disabled }) {
 	});
 }
 FormRadioItem.displayName = "Form.RadioItem";
-
 //#endregion
 //#region src/components/features/form/components/form-root.tsx
 /**
-* Form.Root - The root form component
-*
-* Provides form context to all children with built-in:
-* - Zod schema validation
-* - Conform integration
-* - Optional telemetry callbacks
-*
-* Supports two patterns:
-* 1. ReactNode children - for standard forms
-* 2. Render function - for forms needing access to form state
+* Form.Root - Root form container that integrates with the active adapter.
 *
 * @example Standard usage
 * ```tsx
-* <Form.Root schema={userSchema} onSubmit={handleSubmit}>
-*   <Form.Field name="email" label="Email" required>
+* <Form.Root schema={schema} onSubmit={handleSubmit}>
+*   <Form.Field name="email" label="Email">
 *     <Form.Input type="email" />
 *   </Form.Field>
 *   <Form.Submit>Save</Form.Submit>
@@ -907,153 +755,105 @@ FormRadioItem.displayName = "Form.RadioItem";
 *
 * @example Render function for form state access
 * ```tsx
-* <Form.Root schema={userSchema} onSubmit={handleSubmit}>
+* <Form.Root schema={schema}>
 *   {({ form, fields, isSubmitting }) => (
-*     <>
-*       <Form.Field name="email" label="Email" required>
-*         <Form.Input type="email" />
-*       </Form.Field>
-*       <Button
-*         disabled={isSubmitting}
-*         onClick={() => form.update({ value: { email: '' } })}
-*       >
-*         Cancel
-*       </Button>
-*       <Form.Submit>Save</Form.Submit>
-*     </>
+*     <Form.Field name="email"><Form.Input /></Form.Field>
 *   )}
 * </Form.Root>
 * ```
 */
 function FormRoot({ schema, children, onSubmit, action, method = "POST", formComponent: FormComp = "form", id, name, defaultValues, mode = "onBlur", isSubmitting: externalIsSubmitting, onError, onSuccess, telemetry, className }) {
+	const adapter = useAdapter();
 	const [internalIsSubmitting, setInternalIsSubmitting] = React$1.useState(false);
 	const isSubmitting = externalIsSubmitting ?? internalIsSubmitting;
 	const formRef = React$1.useRef(null);
-	const shouldValidate = mode === "onChange" ? "onInput" : mode;
-	const [form, fields] = useForm({
-		id,
-		constraint: getZodConstraint(schema),
-		shouldValidate,
-		shouldRevalidate: mode === "onSubmit" ? "onSubmit" : "onInput",
-		defaultValue: defaultValues,
-		onValidate({ formData }) {
-			return parseWithZod(formData, { schema });
-		},
-		async onSubmit(event, { submission }) {
-			const formName = name || id || "unnamed-form";
-			telemetry?.onSubmit?.({
-				formName,
+	const wrappedOnSubmit = React$1.useCallback(async (data) => {
+		setInternalIsSubmitting(true);
+		try {
+			await onSubmit?.(data);
+			telemetry?.onSuccess?.({
+				formName: name ?? "",
 				formId: id
 			});
-			if (!onSubmit) {
-				setInternalIsSubmitting(true);
-				return;
-			}
-			event.preventDefault();
-			if (submission?.status === "success") {
-				setInternalIsSubmitting(true);
-				try {
-					await onSubmit(submission.value);
-					onSuccess?.(submission.value);
-					telemetry?.onSuccess?.({
-						formName,
-						formId: id
-					});
-				} catch (error) {
-					telemetry?.onError?.({
-						formName,
-						formId: id,
-						error
-					});
-					telemetry?.captureError?.(error, {
-						message: `Form submission error: ${formName}`,
-						tags: {
-							"form.name": formName,
-							"form.id": id || "unknown"
-						}
-					});
-					onError?.(error);
-				} finally {
-					setInternalIsSubmitting(false);
-				}
-			} else if (submission?.status === "error") {
-				telemetry?.onValidationError?.({
-					formName,
-					formId: id,
-					fieldErrors: submission.error ?? {}
-				});
-				if (onError) {
-					const { ZodError } = await import("zod");
-					onError(new ZodError(Object.entries(submission.error ?? {}).flatMap(([path, messages]) => (messages ?? []).map((message) => ({
-						code: "custom",
-						path: path.split("."),
-						message
-					})))));
-				}
-			}
+			onSuccess?.(data);
+		} catch (error) {
+			const err = error instanceof Error ? error : new Error(String(error));
+			telemetry?.onError?.({
+				formName: name ?? "",
+				formId: id,
+				error: err
+			});
+			telemetry?.captureError?.(err, {
+				formName: name ?? "",
+				formId: id
+			});
+			onError?.(error);
+		} finally {
+			setInternalIsSubmitting(false);
 		}
+	}, [
+		onSubmit,
+		onSuccess,
+		onError,
+		telemetry,
+		name,
+		id
+	]);
+	const instance = adapter.useCreateForm({
+		schema,
+		defaultValues,
+		mode,
+		id,
+		onSubmit: onSubmit ? wrappedOnSubmit : void 0,
+		formRef
 	});
-	const submit = React$1.useCallback(() => {
-		formRef.current?.requestSubmit();
-	}, []);
-	const reset = React$1.useCallback(() => {
-		form.reset();
-	}, [form]);
 	const contextValue = React$1.useMemo(() => ({
-		form,
-		fields,
-		isSubmitting,
-		submit,
-		reset,
-		formId: form.id
-	}), [
-		form,
-		fields,
+		form: instance,
+		fields: instance.fields,
 		isSubmitting,
-		submit,
-		reset
-	]);
+		submit: () => formRef.current?.requestSubmit(),
+		reset: () => instance.reset(),
+		formId: instance.id
+	}), [instance, isSubmitting]);
 	const isRenderFunction = typeof children === "function";
-	const renderProps = React$1.useMemo(() => ({
-		form,
-		fields,
-		isSubmitting,
-		submit,
-		reset
-	}), [
-		form,
-		fields,
+	const renderProps = {
+		form: instance,
+		fields: instance.fields,
 		isSubmitting,
-		submit,
-		reset
-	]);
+		submit: () => formRef.current?.requestSubmit(),
+		reset: () => instance.reset()
+	};
 	const renderChildren = () => {
 		if (isRenderFunction) return children(renderProps);
 		return children;
 	};
-	const { onSubmit: conformOnSubmit, ...conformFormProps } = getFormProps(form);
-	return /* @__PURE__ */ jsx(FormProvider$1, {
+	return /* @__PURE__ */ jsx(FormProvider, {
 		value: contextValue,
-		children: /* @__PURE__ */ jsx(FormProvider, {
-			context: form.context,
+		children: /* @__PURE__ */ jsx(adapter.FormProvider, {
+			instance,
 			children: /* @__PURE__ */ jsx(FormComp, {
 				ref: formRef,
-				...conformFormProps,
-				onSubmit: (e) => {
-					e.stopPropagation();
-					conformOnSubmit(e);
-				},
+				...instance.formProps,
 				method,
 				action,
 				className: cn("space-y-6", className),
 				autoComplete: "off",
+				noValidate: true,
+				onSubmit: (e) => {
+					e.stopPropagation();
+					telemetry?.onSubmit?.({
+						formName: name ?? "",
+						formId: id
+					});
+					const adapterSubmit = instance.formProps.onSubmit;
+					adapterSubmit?.(e);
+				},
 				children: renderChildren()
 			})
 		})
 	});
 }
 FormRoot.displayName = "Form.Root";
-
 //#endregion
 //#region src/components/features/form/components/form-select.tsx
 /**
@@ -1073,21 +873,19 @@ FormRoot.displayName = "Form.Root";
 * ```
 */
 function FormSelect({ placeholder, disabled, className, children }) {
-	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
-	const control = useInputControl(fieldMeta);
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
 	const isDisabled = disabled ?? fieldDisabled;
 	const hasErrors = errors && errors.length > 0;
-	const selectValue = Array.isArray(control.value) ? control.value[0] : control.value;
 	return /* @__PURE__ */ jsxs(Select, {
-		name: fieldMeta.name,
-		value: selectValue ?? "",
-		onValueChange: control.change,
+		value: fieldState?.value != null ? String(fieldState.value) : void 0,
+		onValueChange: (val) => fieldState?.change(val),
 		disabled: isDisabled,
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
-			id: fieldMeta.id,
-			"aria-invalid": hasErrors || void 0,
-			"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0,
+			id,
 			className: cn(className),
+			"aria-invalid": hasErrors || void 0,
+			"aria-describedby": hasErrors ? `${id}-error` : void 0,
+			onBlur: () => fieldState?.blur(),
 			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
 		}), /* @__PURE__ */ jsx(SelectContent, { children })]
 	});
@@ -1109,7 +907,6 @@ function FormSelectItem({ value, children, disabled }) {
 	});
 }
 FormSelectItem.displayName = "Form.SelectItem";
-
 //#endregion
 //#region src/components/features/form/components/form-submit.tsx
 /**
@@ -1134,7 +931,6 @@ function FormSubmit({ children, loadingText, loading = false, ...props }) {
 	});
 }
 FormSubmit.displayName = "Form.Submit";
-
 //#endregion
 //#region src/components/features/form/components/form-switch.tsx
 /**
@@ -1150,34 +946,27 @@ FormSubmit.displayName = "Form.Submit";
 * ```
 */
 function FormSwitch({ label, disabled, className }) {
-	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
-	const control = useInputControl(fieldMeta);
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
 	const isDisabled = disabled ?? fieldDisabled;
 	const hasErrors = errors && errors.length > 0;
-	const isChecked = control.value === "on" || control.value === "true";
-	const handleCheckedChange = (checked) => {
-		control.change(checked ? "on" : "");
-	};
-	const switchId = fieldMeta.id;
+	const checked = Boolean(fieldState?.value);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center space-x-2", className),
 		children: [/* @__PURE__ */ jsx(Switch, {
-			id: switchId,
-			name: fieldMeta.name,
-			checked: isChecked,
-			onCheckedChange: handleCheckedChange,
+			id,
+			checked,
+			onCheckedChange: (value) => fieldState?.change(Boolean(value)),
 			disabled: isDisabled,
 			"aria-invalid": hasErrors || void 0,
-			"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0
+			"aria-describedby": hasErrors ? `${id}-error` : void 0
 		}), label && /* @__PURE__ */ jsx(Label, {
-			htmlFor: switchId,
+			htmlFor: id,
 			className: cn("cursor-pointer text-sm font-normal", isDisabled && "cursor-not-allowed opacity-70"),
 			children: label
 		})]
 	});
 }
 FormSwitch.displayName = "Form.Switch";
-
 //#endregion
 //#region src/components/features/form/components/form-textarea.tsx
 /**
@@ -1193,102 +982,60 @@ FormSwitch.displayName = "Form.Switch";
 * ```
 */
 function FormTextarea({ ref, className, disabled, rows = 3, ...props }) {
-	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
-	const textareaProps = getTextareaProps(fieldMeta);
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
 	const isDisabled = disabled ?? fieldDisabled;
 	const hasErrors = errors && errors.length > 0;
 	return /* @__PURE__ */ jsx(Textarea, {
-		ref,
-		...textareaProps,
 		...props,
+		ref,
+		id,
+		name: fieldState?.name,
+		value: fieldState?.value ?? "",
+		onChange: (e) => fieldState?.change(e.target.value),
+		onBlur: () => fieldState?.blur(),
 		rows,
+		className: cn(className),
 		disabled: isDisabled,
 		"aria-invalid": hasErrors || void 0,
-		"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0,
-		className: cn(className)
+		"aria-describedby": hasErrors ? `${id}-error` : void 0
 	});
 }
 FormTextarea.displayName = "Form.Textarea";
-
 //#endregion
 //#region src/components/features/form/hooks/use-watch.ts
 /**
-* Hook to watch a field's value
-* Triggers re-render when the watched field value changes
+* Hook to watch a field's value reactively.
+* Delegates to the active adapter's useWatch implementation.
 *
 * @example
 * ```tsx
 * function ConditionalField() {
-*   const contactMethod = useWatch('contactMethod');
-*
+*   const contactMethod = useWatch('contactMethod')
 *   if (contactMethod === 'email') {
-*     return <Form.Field name="email"><Form.Input type="email" /></Form.Field>;
-*   }
-*
-*   if (contactMethod === 'phone') {
-*     return <Form.Field name="phone"><Form.Input type="tel" /></Form.Field>;
+*     return <Form.Field name="email"><Form.Input type="email" /></Form.Field>
 *   }
-*
-*   return null;
+*   return null
 * }
 * ```
 */
 function useWatch(name) {
-	const { fields } = useFormContext$1();
-	return useInputControl(React$1.useMemo(() => {
-		const parts = name.split(".");
-		let current = fields;
-		for (const part of parts) {
-			if (!current) break;
-			if (/^\d+$/.test(part)) {
-				const fieldList = current.getFieldList?.();
-				if (fieldList) current = fieldList[Number.parseInt(part, 10)]?.getFieldset?.();
-				else current = current[part];
-			} else if (typeof current.getFieldset === "function") current = current.getFieldset()[part];
-			else current = current[part];
-		}
-		return current;
-	}, [fields, name])).value;
+	return useAdapter().useWatch(name);
 }
 /**
-* Hook to watch multiple fields at once
+* Hook to watch multiple fields at once.
+* Delegates to the active adapter's useWatchAll implementation.
 *
 * @example
 * ```tsx
 * function Summary() {
-*   const values = useWatchAll(['firstName', 'lastName', 'email']);
-*
-*   return (
-*     <div>
-*       Name: {values.firstName} {values.lastName}
-*       Email: {values.email}
-*     </div>
-*   );
+*   const values = useWatchAll(['firstName', 'lastName', 'email'])
+*   return <div>Name: {values.firstName} {values.lastName}</div>
 * }
 * ```
 */
 function useWatchAll(names) {
-	const { fields } = useFormContext$1();
-	return React$1.useMemo(() => {
-		const result = {};
-		for (const name of names) {
-			const parts = name.split(".");
-			let current = fields;
-			for (const part of parts) {
-				if (!current) break;
-				if (/^\d+$/.test(part)) {
-					const fieldList = current.getFieldList?.();
-					if (fieldList) current = fieldList[Number.parseInt(part, 10)]?.getFieldset?.();
-					else current = current[part];
-				} else if (typeof current.getFieldset === "function") current = current.getFieldset()[part];
-				else current = current[part];
-			}
-			if (current) result[name] = current.value;
-		}
-		return result;
-	}, [fields, names]);
+	return useAdapter().useWatchAll(names);
 }
-
 //#endregion
 //#region src/components/features/form/components/form-when.tsx
 /**
@@ -1330,7 +1077,6 @@ function FormWhen({ field, is, isNot, in: inArray, notIn, children }) {
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
 FormWhen.displayName = "Form.When";
-
 //#endregion
 //#region src/components/features/form/components/stepper/form-stepper.tsx
 const FormStepperContext = React$1.createContext(null);
@@ -1475,71 +1221,78 @@ function FormStepperContent({ steps, stepperDef, children, onComplete, onStepCha
 		children
 	}, stepper.state.current.data.id);
 }
-function StepForm({ steps, stepper, currentStepConfig, combinedSchema, storedValues, children, onComplete, onStepChange, className, id, formComponent: FormComp = "form" }) {
+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 [form, fields] = useForm({
-		id: id ?? "stepper-form",
-		constraint: getZodConstraint(combinedSchema),
-		shouldValidate: "onBlur",
-		shouldRevalidate: "onInput",
-		defaultValue: storedValues,
-		onValidate({ formData }) {
-			return parseWithZod(formData, { schema: currentStepConfig.schema });
-		},
-		async onSubmit(event, { submission }) {
-			event.preventDefault();
-			if (submission?.status !== "success") return;
-			if (submission.value) stepper.metadata.set(stepper.state.current.data.id, submission.value);
-			if (stepper.state.isLast) {
-				setIsSubmitting(true);
-				try {
-					await onComplete({
-						...steps.reduce((acc, step) => ({
-							...acc,
-							...stepper.metadata.get(step.id) || {}
-						}), {}),
-						...submission.value
-					});
-				} 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");
-				}
+	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(() => {
-		if (formRef.current) {
-			const formData = new FormData(formRef.current);
-			const currentData = {};
-			formData.forEach((value, key) => {
-				if (!key.startsWith("$")) currentData[key] = value;
-			});
-			if (Object.keys(currentData).length > 0) stepper.metadata.set(stepper.state.current.data.id, currentData);
-		}
+		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");
 		}
-	}, [stepper, onStepChange]);
+	}, [
+		instance,
+		stepper,
+		onStepChange
+	]);
 	const goTo = React$1.useCallback((stepId) => {
-		const currentIndex = stepper.lookup.getIndex(stepper.state.current.data.id);
 		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");
 		}
-	}, [stepper, onStepChange]);
+	}, [
+		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) => ({
@@ -1550,7 +1303,7 @@ function StepForm({ steps, stepper, currentStepConfig, combinedSchema, storedVal
 	const stepperContextValue = React$1.useMemo(() => ({
 		steps,
 		current: currentStepConfig,
-		currentIndex: stepper.lookup.getIndex(stepper.state.current.data.id),
+		currentIndex,
 		next,
 		prev,
 		goTo,
@@ -1558,10 +1311,11 @@ function StepForm({ steps, stepper, currentStepConfig, combinedSchema, storedVal
 		isLast: stepper.state.isLast,
 		getStepData,
 		getAllStepData,
-		utils: { getIndex: (id) => stepper.lookup.getIndex(id) }
+		utils: { getIndex: (stepId) => stepper.lookup.getIndex(stepId) }
 	}), [
 		steps,
 		currentStepConfig,
+		currentIndex,
 		stepper,
 		next,
 		prev,
@@ -1569,22 +1323,18 @@ function StepForm({ steps, stepper, currentStepConfig, combinedSchema, storedVal
 		getStepData,
 		getAllStepData
 	]);
-	const formContextValue = React$1.useMemo(() => ({
-		form,
-		fields,
+	const contextValue = React$1.useMemo(() => ({
+		form: instance,
+		fields: instance.fields,
 		isSubmitting,
 		submit: () => formRef.current?.requestSubmit(),
-		reset: () => form.reset(),
-		formId: form.id
-	}), [
-		form,
-		fields,
-		isSubmitting
-	]);
+		reset: () => instance.reset(),
+		formId: instance.id
+	}), [instance, isSubmitting]);
 	const renderProps = {
 		steps,
 		current: currentStepConfig,
-		currentIndex: stepper.lookup.getIndex(stepper.state.current.data.id),
+		currentIndex,
 		next,
 		prev,
 		goTo,
@@ -1596,23 +1346,27 @@ function StepForm({ steps, stepper, currentStepConfig, combinedSchema, storedVal
 	const resolvedChildren = typeof children === "function" ? children(renderProps) : children;
 	return /* @__PURE__ */ jsx(FormStepperContext, {
 		value: stepperContextValue,
-		children: /* @__PURE__ */ jsx(FormProvider$1, {
-			value: formContextValue,
-			children: /* @__PURE__ */ jsx(FormProvider, {
-				context: form.context,
+		children: /* @__PURE__ */ jsx(FormProvider, {
+			value: contextValue,
+			children: /* @__PURE__ */ jsx(adapter.FormProvider, {
+				instance,
 				children: /* @__PURE__ */ jsx(FormComp, {
 					ref: formRef,
-					...getFormProps(form),
-					method: "POST",
+					...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
 /**
@@ -1637,7 +1391,6 @@ function FormStep({ id, children }) {
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
 FormStep.displayName = "Form.Step";
-
 //#endregion
 //#region src/components/features/form/components/stepper/stepper-controls.tsx
 /**
@@ -1707,7 +1460,6 @@ function StepperControls({ prevLabel = "Previous", nextLabel = (isLast) => isLas
 	});
 }
 StepperControls.displayName = "Form.StepperControls";
-
 //#endregion
 //#region src/components/features/form/components/stepper/stepper-navigation.tsx
 /**
@@ -1806,118 +1558,82 @@ function StepperNavigation({ variant = "horizontal", labelOrientation = "vertica
 	});
 }
 StepperNavigation.displayName = "Form.StepperNavigation";
-
 //#endregion
 //#region src/components/features/form/components/form-input-group.tsx
 /**
-* Form.Input - Text input component
+* Form.InputGroup - Input with leading/trailing addons
 *
 * Automatically wired to the parent Form.Field context.
 *
 * @example
 * ```tsx
-* <Form.Field name="email" label="Email" required>
-*   <Form.Input type="email" placeholder="john@example.com" />
+* <Form.Field name="website" label="Website" required>
+*   <Form.InputGroup leading="https://" placeholder="example.com" />
 * </Form.Field>
 * ```
 */
-function FormInputGroup({ ref, type = "text", className, disabled, ...props }) {
-	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
-	const inputProps = getInputProps(fieldMeta, { type });
+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, {
-		ref,
-		...inputProps,
 		...props,
-		type,
+		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 ? `${fieldMeta.id}-error` : void 0,
-		className: cn("text-xs!", className)
+		"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
-* Provides field metadata, control methods, and errors
+* Hook to access and control a specific field.
+* Delegates to the active adapter's useField implementation.
 *
 * @example
 * ```tsx
 * function MyCustomInput({ name }: { name: string }) {
-*   const { field, control, meta, errors } = useField(name);
-*
+*   const { field, control, meta, errors } = useField(name)
 *   return (
-*     <div>
-*       <input
-*         name={meta.name}
-*         id={meta.id}
-*         value={control.value ?? ''}
-*         onChange={(e) => control.change(e.target.value)}
-*         onBlur={control.blur}
-*         aria-invalid={!!errors?.length}
-*       />
-*       {errors?.map((error) => (
-*         <span key={error} className="text-red-500">{error}</span>
-*       ))}
-*     </div>
-*   );
+*     <input
+*       name={meta.name}
+*       id={meta.id}
+*       value={control.value ?? ''}
+*       onChange={(e) => control.change(e.target.value)}
+*       onBlur={control.blur}
+*       aria-invalid={!!errors?.length}
+*     />
+*   )
 * }
 * ```
 */
 function useField(name) {
-	const { fields } = useFormContext$1();
-	const field = React$1.useMemo(() => {
-		const parts = name.split(".");
-		let current = fields;
-		for (let i = 0; i < parts.length; i++) {
-			const part = parts[i];
-			if (!current) break;
-			if (/^\d+$/.test(part)) {
-				const fieldList = current.getFieldList?.();
-				if (fieldList) {
-					const item = fieldList[Number.parseInt(part, 10)];
-					if (i < parts.length - 1 && item?.getFieldset) current = item.getFieldset();
-					else current = item;
-				} else current = current[part];
-			} else if (current[part] !== void 0) current = current[part];
-			else if (typeof current.getFieldset === "function") current = current.getFieldset()[part];
-			else current = void 0;
-		}
-		return current;
-	}, [fields, name]);
-	if (!field) throw new Error(`Field "${name}" not found in form. Make sure the field name matches your schema.`);
-	const control = useInputControl(field);
-	const controlValue = Array.isArray(control.value) ? control.value[0] : control.value;
-	const meta = React$1.useMemo(() => ({
-		name: field.name,
-		id: field.id,
-		errors: field.errors,
-		required: field.required ?? false,
-		disabled: field.disabled ?? false
-	}), [
-		field.name,
-		field.id,
-		field.errors,
-		field.required,
-		field.disabled
-	]);
+	const fieldState = useAdapter().useField(name);
 	return {
-		field,
+		field: fieldState,
 		control: {
-			value: controlValue,
-			change: control.change,
-			blur: control.blur,
-			focus: control.focus
+			value: fieldState.value,
+			change: fieldState.change,
+			blur: fieldState.blur,
+			focus: fieldState.focus
+		},
+		meta: {
+			name: fieldState.name,
+			id: fieldState.id,
+			errors: fieldState.errors,
+			required: fieldState.required,
+			disabled: false
 		},
-		meta,
-		errors: field.errors
+		errors: fieldState.errors
 	};
 }
-
 //#endregion
 //#region src/components/features/form/hooks/use-field-context.ts
 /**
@@ -1944,7 +1660,6 @@ function useField(name) {
 function useFieldContext() {
 	return useFieldContext$1();
 }
-
 //#endregion
 //#region src/components/features/form/hooks/use-form-context.ts
 /**
@@ -1966,7 +1681,6 @@ function useFieldContext() {
 function useFormContext() {
 	return useFormContext$1();
 }
-
 //#endregion
 //#region src/components/features/form/hooks/use-stepper.ts
 /**
@@ -2012,6 +1726,138 @@ function useStepper() {
 		getAllStepData: context.getAllStepData
 	};
 }
-
 //#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 _, FormInputGroup as a, FormRadioItem as b, FormStep as c, useWatch as d, useWatchAll as f, FormSelect as g, FormSubmit as h, useField as i, FormAutocomplete as j, FormCheckbox as k, FormStepper as l, FormSwitch as m, useFormContext as n, StepperNavigation as o, FormTextarea as p, useFieldContext as r, StepperControls as s, useStepper as t, FormWhen as u, FormRoot as v, FormError as w, FormInput as x, FormRadioGroup as y };
+//#region src/components/features/form/index.ts
+/**
+* Datum Form Library
+*
+* A compound component pattern form library with pluggable adapter support.
+* Choose between Conform.js or React Hook Form as your form backend,
+* with Zod for schema validation.
+*
+* ## Adapter Setup
+*
+* Wrap your app with an adapter provider:
+*
+* ```tsx
+* // Conform adapter
+* import { ConformAdapter } from '@datum-cloud/datum-ui/form/adapters/conform'
+* <ConformAdapter><App /></ConformAdapter>
+*
+* // React Hook Form adapter
+* import { RHFAdapter } from '@datum-cloud/datum-ui/form/adapters/rhf'
+* <RHFAdapter><App /></RHFAdapter>
+* ```
+*
+* @example Basic Usage
+* ```tsx
+* import { Form } from '@datum-cloud/datum-ui/form';
+* import { z } from 'zod';
+*
+* const userSchema = z.object({
+*   name: z.string().min(2),
+*   email: z.string().email(),
+* });
+*
+* function UserForm() {
+*   return (
+*     <Form.Root schema={userSchema} onSubmit={(data) => console.log(data)}>
+*       <Form.Field name="name" label="Name" required>
+*         <Form.Input />
+*       </Form.Field>
+*       <Form.Field name="email" label="Email" required>
+*         <Form.Input type="email" />
+*       </Form.Field>
+*       <Form.Submit>Save</Form.Submit>
+*     </Form.Root>
+*   );
+* }
+* ```
+*
+* @example Multi-Step Form
+* ```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.Step>
+*   <Form.Step id="profile">...</Form.Step>
+*   <Form.StepperControls />
+* </Form.Stepper>
+* ```
+*
+* @example Conditional Fields
+* ```tsx
+* <Form.Field name="contactMethod">
+*   <Form.Select>
+*     <Form.SelectItem value="email">Email</Form.SelectItem>
+*     <Form.SelectItem value="phone">Phone</Form.SelectItem>
+*   </Form.Select>
+* </Form.Field>
+*
+* <Form.When field="contactMethod" is="email">
+*   <Form.Field name="email"><Form.Input type="email" /></Form.Field>
+* </Form.When>
+* ```
+*/
+/**
+* Form compound component
+*
+* Requires an adapter provider at the application root:
+* - `<ConformAdapter>` from `@datum-cloud/datum-ui/form/adapters/conform`
+* - `<RHFAdapter>` from `@datum-cloud/datum-ui/form/adapters/rhf`
+*
+* Components:
+* - Form.Root - Main form container
+* - Form.Field - Field wrapper with label and error handling
+* - Form.Input, Form.Textarea, Form.Select, Form.Checkbox, Form.Switch, Form.RadioGroup
+* - Form.Autocomplete, Form.CopyBox, Form.InputGroup
+* - 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
+*
+* Hooks:
+* - Form.useFormContext, Form.useFieldContext, Form.useField
+* - Form.useWatch, Form.useWatchAll, Form.useStepper
+*/
+const Form = {
+	Root: FormRoot,
+	Field: FormField,
+	Submit: FormSubmit,
+	Button: FormButton,
+	Error: FormError,
+	Description: FormDescription,
+	Input: FormInput,
+	Textarea: FormTextarea,
+	Select: FormSelect,
+	SelectItem: FormSelectItem,
+	Checkbox: FormCheckbox,
+	Switch: FormSwitch,
+	RadioGroup: FormRadioGroup,
+	RadioItem: FormRadioItem,
+	CopyBox: FormCopyBox,
+	Autocomplete: FormAutocomplete,
+	InputGroup: FormInputGroup,
+	When: FormWhen,
+	FieldArray: FormFieldArray,
+	Custom: FormCustom,
+	Stepper: FormStepper,
+	Step: FormStep,
+	StepperNavigation,
+	StepperControls,
+	Dialog: FormDialog,
+	useFormContext,
+	useFieldContext,
+	useField,
+	useWatch,
+	useWatchAll,
+	useStepper
+};
+//#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 };