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

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

@@ -13,14 +13,13 @@ 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 { z } from "zod";
-import { FormProvider, getFormProps, getInputProps, getTextareaProps, useForm, useFormMetadata, useInputControl } from "@conform-to/react";
-import { getZodConstraint, parseWithZod } from "@conform-to/zod/v4";
 //#region src/components/features/form/context/field-context.tsx
 const FieldContext = React$1.createContext(null);
 function FieldProvider({ children, value }) {
@@ -82,17 +81,16 @@ 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
@@ -102,7 +100,7 @@ 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
@@ -161,27 +159,21 @@ 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
 		})]
@@ -218,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", {
@@ -240,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",
@@ -493,9 +479,6 @@ 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", {
@@ -522,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;
 	};
@@ -621,7 +581,7 @@ function FormField({ name, children, label, description, tooltip, required = fal
 					htmlFor: fieldId,
 					label,
 					hasErrors,
-					required,
+					required: fieldRequired,
 					tooltip,
 					className: labelClassName
 				}),
@@ -645,46 +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
@@ -692,78 +617,26 @@ 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";
@@ -782,19 +655,22 @@ 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";
@@ -817,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
 	});
@@ -868,21 +741,12 @@ 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>
@@ -891,146 +755,99 @@ 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()
 			})
 		})
@@ -1056,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 })]
 	});
@@ -1131,27 +946,21 @@ 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
 		})]
@@ -1173,99 +982,59 @@ 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>;
+*     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 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
@@ -1452,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) => ({
@@ -1527,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,
@@ -1535,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,
@@ -1546,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,
@@ -1573,16 +1346,21 @@ 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
 				})
 			})
@@ -1783,110 +1561,77 @@ 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
@@ -1986,12 +1731,27 @@ function useStepper() {
 /**
 * Datum Form Library
 *
-* A compound component pattern form library built on top of Conform.js and Zod
-* for easy form creation with built-in validation, error handling, and accessibility features.
+* 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 './';
+* import { Form } from '@datum-cloud/datum-ui/form';
 * import { z } from 'zod';
 *
 * const userSchema = z.object({
@@ -2046,36 +1806,25 @@ function useStepper() {
 /**
 * Form compound component
 *
-* Contains all form-related components as properties:
+* 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 - Text input
-* - Form.Textarea - Multi-line text input
-* - Form.Select - Dropdown select
-* - Form.SelectItem - Select option
-* - Form.Checkbox - Checkbox input
-* - Form.Switch - Toggle switch
-* - Form.RadioGroup - Radio button group
-* - Form.RadioItem - Radio button option
-* - Form.Submit - Submit button with loading state
-* - Form.Error - Error display
-* - Form.Description - Helper text
-* - Form.Autocomplete - Searchable select with virtualization
+* - 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 - Multi-step form container
-* - Form.Step - Individual step content
-* - Form.StepperNavigation - Step progress indicators
-* - Form.StepperControls - Previous/Next/Submit buttons
-*
-* Hooks available:
-* - Form.useFormContext - Access form context
-* - Form.useFieldContext - Access field context
-* - Form.useField - Access and control a specific field
-* - Form.useWatch - Watch a field's value
-* - Form.useWatchAll - Watch multiple fields
-* - Form.useStepper - Access stepper context
+* - 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,