@datum-cloud/datum-ui 0.2.0-alpha.3 → 0.2.0-alpha.4

package/dist/use-stepper-BaToCYMs.mjs

@@ -0,0 +1,2017 @@
+import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { t as Button } from "./button-C1wRfGtT.mjs";
+import { t as Icon } from "./icon-wrapper-9ticVbRL.mjs";
+import { t as Checkbox } from "./checkbox-LG1OKTpG.mjs";
+import { t as Dialog } from "./dialog-bnMMf9GD.mjs";
+import { t as Input } from "./input-fzXBheCN.mjs";
+import { t as Label } from "./label-_ste_Re3.mjs";
+import { n as RadioGroupItem, t as RadioGroup } from "./radio-group-Oshv0b-U.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-DVlEzD2W.mjs";
+import { t as Switch } from "./switch-Calk7Gyw.mjs";
+import { t as Textarea } from "./textarea-CxE3YbC7.mjs";
+import { t as Tooltip } from "./tooltip-Dd3ActSS.mjs";
+import { t as Autocomplete } from "./autocomplete-DZtI97HP.mjs";
+import { r as toast } from "./use-toast-mdn_CqRY.mjs";
+import { t as useCopyToClipboard } from "./use-copy-to-clipboard-ki-WoTml.mjs";
+import { t as defineStepper } from "./stepper-SWB-u_nM.mjs";
+import { t as InputWithAddons } from "./input-with-addons-BQn7KCTU.mjs";
+import { Form } from "./form/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 }) {
+	return /* @__PURE__ */ jsx(FieldContext, {
+		value,
+		children
+	});
+}
+function useFieldContext$1() {
+	const context = React$1.use(FieldContext);
+	if (!context) throw new Error("useFieldContext must be used within a Form.Field component. Make sure your input component is wrapped with Form.Field.");
+	return context;
+}
+/**
+* Optional field context - returns null if not within a Form.Field
+* Useful for components that can work both inside and outside Form.Field
+*/
+function useOptionalFieldContext() {
+	return React$1.use(FieldContext);
+}
+
+//#endregion
+//#region src/components/features/form/components/form-autocomplete.tsx
+/**
+* Form.Autocomplete - Searchable select component
+*
+* Automatically wired to the parent Form.Field context.
+* Supports flat/grouped options, virtualization, custom rendering, and async search.
+*
+* @example Basic usage
+* ```tsx
+* <Form.Field name="timezone" label="Timezone" required>
+*   <Form.Autocomplete
+*     options={timezones}
+*     placeholder="Select timezone..."
+*   />
+* </Form.Field>
+* ```
+*
+* @example Async search
+* ```tsx
+* <Form.Field name="userId" label="User">
+*   <Form.Autocomplete
+*     options={users ?? []}
+*     onSearchChange={setSearch}
+*     loading={isLoading}
+*     placeholder="Search users..."
+*   />
+* </Form.Field>
+* ```
+*
+* @example Grouped options
+* ```tsx
+* <Form.Field name="role" label="Role" required>
+*   <Form.Autocomplete
+*     options={roleGroups}
+*     placeholder="Select a role..."
+*   />
+* </Form.Field>
+* ```
+*/
+function FormAutocomplete({ disabled, className, ...props }) {
+	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
+	const control = useInputControl(fieldMeta);
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	const selectValue = Array.isArray(control.value) ? control.value[0] : control.value;
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		...props,
+		name: fieldMeta.name,
+		id: fieldMeta.id,
+		value: selectValue ?? "",
+		onValueChange: control.change,
+		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 }) {
+	return /* @__PURE__ */ jsx(FormContext, {
+		value,
+		children
+	});
+}
+function useFormContext$1() {
+	const context = React$1.use(FormContext);
+	if (!context) throw new Error("useFormContext must be used within a Form.Root component");
+	return context;
+}
+
+//#endregion
+//#region src/components/features/form/components/form-button.tsx
+/**
+* Form.Button - A button for non-submit actions within a form
+*
+* Automatically gets disabled when the form is submitting.
+* Use this for cancel buttons, reset buttons, or other actions.
+*
+* @example
+* ```tsx
+* <Form.Button onClick={() => navigate(-1)}>
+*   Cancel
+* </Form.Button>
+*
+* <Form.Button onClick={() => form.reset()} type="secondary">
+*   Reset
+* </Form.Button>
+* ```
+*/
+function FormButton({ children, onClick, type = "quaternary", theme = "borderless", size, disabled, className, disableOnSubmit = true }) {
+	const { isSubmitting } = useFormContext$1();
+	return /* @__PURE__ */ jsx(Button, {
+		htmlType: "button",
+		type,
+		theme,
+		size,
+		disabled: disabled || disableOnSubmit && isSubmitting,
+		className,
+		onClick,
+		children
+	});
+}
+FormButton.displayName = "Form.Button";
+
+//#endregion
+//#region src/components/features/form/components/form-checkbox.tsx
+/**
+* Form.Checkbox - Checkbox input component
+*
+* Automatically wired to the parent Form.Field context.
+*
+* @example
+* ```tsx
+* <Form.Field name="terms">
+*   <Form.Checkbox label="I agree to the terms and conditions" />
+* </Form.Field>
+* ```
+*/
+function FormCheckbox({ label, disabled, className }) {
+	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
+	const control = useInputControl(fieldMeta);
+	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;
+	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,
+			disabled: isDisabled,
+			"aria-invalid": hasErrors || void 0,
+			"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0
+		}), label && /* @__PURE__ */ jsx(Label, {
+			htmlFor: checkboxId,
+			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
+/**
+* Form.CopyBox - Read-only field with copy-to-clipboard functionality
+*
+* Displays field value in a read-only box with a copy button.
+* Automatically gets value from Form.Field context.
+*
+* @example Basic usage
+* ```tsx
+* <Form.Field name="organizationId" label="Organization ID">
+*   <Form.CopyBox />
+* </Form.Field>
+* ```
+*
+* @example With icon-only button
+* ```tsx
+* <Form.Field name="apiKey" label="API Key">
+*   <Form.CopyBox variant="icon-only" />
+* </Form.Field>
+* ```
+*
+* @example With placeholder
+* ```tsx
+* <Form.Field name="webhookUrl" label="Webhook URL">
+*   <Form.CopyBox placeholder="Not configured" />
+* </Form.Field>
+* ```
+*/
+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 copyToClipboard = () => {
+		const stringValue = String(value);
+		if (!stringValue) return;
+		copy(stringValue).then(() => {
+			toast.success("Copied to clipboard");
+			setCopied(true);
+			setTimeout(() => {
+				setCopied(false);
+			}, 2e3);
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group border-input flex h-10 w-full overflow-hidden rounded-lg border bg-[#F6F6F580] text-xs focus-within:outline-hidden", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			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)
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex items-center py-2 pr-3",
+			children: variant === "icon-only" ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("text-muted-foreground hover:text-foreground flex size-7 items-center justify-center rounded-sm transition-colors", buttonClassName),
+				onClick: copyToClipboard,
+				children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "size-4" })
+			}) : /* @__PURE__ */ jsxs(Button, {
+				type: "quaternary",
+				theme: "outline",
+				size: "small",
+				className: cn("h-7 w-fit gap-1 px-2 text-xs", buttonClassName),
+				onClick: copyToClipboard,
+				children: [/* @__PURE__ */ jsx(CopyIcon, { className: "size-3!" }), copied ? "Copied" : "Copy"]
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/features/form/components/form-custom.tsx
+/**
+* Form.Custom - Escape hatch for custom implementations
+*
+* Provides access to the underlying form context for complex use cases
+* that don't fit the standard component patterns.
+*
+* @example
+* ```tsx
+* <Form.Custom>
+*   {({ form, fields, submit, reset }) => (
+*     <MyCustomComponent
+*       fields={fields}
+*       onCustomAction={() => {
+*         // Do something custom
+*         submit();
+*       }}
+*     />
+*   )}
+* </Form.Custom>
+* ```
+*/
+function FormCustom({ children }) {
+	const { form, fields, isSubmitting, submit, reset } = useFormContext$1();
+	return /* @__PURE__ */ jsx(Fragment$1, { children: children({
+		form,
+		fields,
+		isSubmitting,
+		submit,
+		reset
+	}) });
+}
+FormCustom.displayName = "Form.Custom";
+
+//#endregion
+//#region src/components/features/form/components/form-description.tsx
+/**
+* Form.Description - Display field description/helper text
+*
+* @example
+* ```tsx
+* <Form.Field name="password">
+*   <Form.Input type="password" />
+*   <Form.Description>
+*     Must be at least 8 characters with one uppercase letter
+*   </Form.Description>
+* </Form.Field>
+* ```
+*/
+function FormDescription({ children, className }) {
+	const fieldContext = useOptionalFieldContext();
+	return /* @__PURE__ */ jsx("p", {
+		id: fieldContext ? `${fieldContext.id}-description` : void 0,
+		className: cn("text-muted-foreground text-xs text-wrap", className),
+		children
+	});
+}
+FormDescription.displayName = "Form.Description";
+
+//#endregion
+//#region src/components/features/form/components/form-dialog.tsx
+/**
+* Form.Dialog - A dialog with an integrated form
+*
+* Combines Dialog and Form.Root into a single component with:
+* - Automatic dialog state management (controlled or uncontrolled)
+* - Built-in header with title and description
+* - Built-in footer with submit and cancel buttons
+* - Auto-close on successful submission
+* - Prevents accidental close during submission
+* - Supports render function pattern for form state access
+*
+* @example Basic usage
+* ```tsx
+* <Form.Dialog
+*   title="Add User"
+*   description="Enter user details"
+*   schema={userSchema}
+*   onSubmit={handleSubmit}
+*   trigger={<Button>Add User</Button>}
+* >
+*   <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.Dialog>
+* ```
+*
+* @example With render function for form state access
+* ```tsx
+* <Form.Dialog
+*   title="Edit User"
+*   schema={userSchema}
+*   defaultValues={user}
+*   onSubmit={handleSubmit}
+*   trigger={<Button>Edit</Button>}
+* >
+*   {({ form, fields, isSubmitting, reset }) => (
+*     <>
+*       <Form.Field name="name" label="Name">
+*         <Form.Input />
+*       </Form.Field>
+*       <Button variant="ghost" onClick={reset} disabled={isSubmitting}>
+*         Reset
+*       </Button>
+*     </>
+*   )}
+* </Form.Dialog>
+* ```
+*/
+function FormDialog({ open, onOpenChange, defaultOpen, title, description, trigger, schema, defaultValues, onSubmit, onSuccess, onError, submitText = "Submit", submitTextLoading = "Submitting...", cancelText = "Cancel", showCancel = true, submitType = "primary", loading, formComponent, telemetry, className, formClassName, children }) {
+	const [internalOpen, setInternalOpen] = React$1.useState(defaultOpen ?? false);
+	const [internalIsSubmitting, setInternalIsSubmitting] = React$1.useState(false);
+	const isSubmitting = loading ?? internalIsSubmitting;
+	const isControlled = open !== void 0;
+	const isOpen = isControlled ? open : internalOpen;
+	const handleOpenChange = React$1.useCallback((value) => {
+		if (!value && isSubmitting) return;
+		if (!isControlled) setInternalOpen(value);
+		onOpenChange?.(value);
+	}, [
+		isControlled,
+		isSubmitting,
+		onOpenChange
+	]);
+	const handleSubmit = React$1.useCallback(async (data) => {
+		if (loading === void 0) setInternalIsSubmitting(true);
+		try {
+			await onSubmit?.(data);
+			onSuccess?.(data);
+		} catch (error) {
+			console.error("Form submission error:", error);
+			throw error;
+		} finally {
+			if (loading === void 0) setInternalIsSubmitting(false);
+		}
+	}, [
+		onSubmit,
+		onSuccess,
+		loading
+	]);
+	const handleCancel = React$1.useCallback(() => {
+		handleOpenChange(false);
+	}, [handleOpenChange]);
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		children: [trigger && /* @__PURE__ */ jsx(Dialog.Trigger, { children: trigger }), /* @__PURE__ */ jsx(Dialog.Content, {
+			className,
+			children: /* @__PURE__ */ jsx(Form.Root, {
+				schema,
+				defaultValues,
+				onSubmit: handleSubmit,
+				onError,
+				isSubmitting,
+				mode: "onSubmit",
+				formComponent,
+				telemetry,
+				className: cn("space-y-0", formClassName),
+				children: (renderProps) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(Dialog.Header, {
+						title,
+						description,
+						onClose: handleCancel,
+						className: "border-b",
+						descriptionClassName: "text-foreground/80"
+					}),
+					/* @__PURE__ */ jsx(Dialog.Body, {
+						className: "space-y-0",
+						children: typeof children === "function" ? children(renderProps) : children
+					}),
+					/* @__PURE__ */ jsxs(Dialog.Footer, {
+						className: "border-t",
+						children: [showCancel && /* @__PURE__ */ jsx(Form.Button, {
+							type: "quaternary",
+							theme: "outline",
+							onClick: handleCancel,
+							disableOnSubmit: true,
+							children: cancelText
+						}), /* @__PURE__ */ jsx(Form.Submit, {
+							type: submitType,
+							children: isSubmitting ? submitTextLoading : submitText
+						})]
+					})
+				] })
+			})
+		})]
+	});
+}
+FormDialog.displayName = "Form.Dialog";
+
+//#endregion
+//#region src/components/features/form/components/form-error.tsx
+/**
+* Form.Error - Display field errors
+*
+* Can be used inside Form.Field to display errors automatically,
+* or standalone with custom rendering.
+*
+* @example
+* ```tsx
+* // Inside Form.Field - displays field errors automatically
+* <Form.Field name="email">
+*   <Form.Input />
+*   <Form.Error />
+* </Form.Field>
+*
+* // Custom rendering
+* <Form.Field name="email">
+*   <Form.Input />
+*   <Form.Error>
+*     {(errors) => errors.map(e => <span key={e}>{e}</span>)}
+*   </Form.Error>
+* </Form.Field>
+* ```
+*/
+function FormError({ children, className }) {
+	const errors = useOptionalFieldContext()?.errors;
+	if (!errors || errors.length === 0) return null;
+	if (typeof children === "function") return /* @__PURE__ */ jsx(Fragment$1, { children: children(errors) });
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn("text-destructive space-y-1 text-sm font-medium", errors.length > 1 && "list-disc pl-4", className),
+		role: "alert",
+		"aria-live": "polite",
+		children: errors.map((error) => /* @__PURE__ */ jsx("li", {
+			className: "text-wrap",
+			children: error
+		}, error))
+	});
+}
+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", {
+		className: "relative flex w-fit items-center space-x-2",
+		children: [/* @__PURE__ */ jsxs(Label, {
+			htmlFor,
+			className: cn("text-foreground/80 gap-0 text-xs font-semibold", hasErrors && "text-destructive", className),
+			children: [label, required && /* @__PURE__ */ jsx("span", {
+				className: "text-destructive/80 align-super text-sm leading-0",
+				"aria-hidden": "true",
+				children: "*"
+			})]
+		}), tooltip && /* @__PURE__ */ jsx(Tooltip, {
+			message: tooltip,
+			open: isTooltipVisible,
+			onOpenChange: setIsTooltipVisible,
+			side: "bottom",
+			contentClassName: "max-w-xs text-wrap",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: CircleHelp,
+				className: cn("text-ring absolute top-0.5 -right-3 size-3.5 cursor-pointer transition-opacity duration-400")
+			})
+		})]
+	});
+}
+/**
+* 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
+*
+* @example Standard usage
+* ```tsx
+* <Form.Field name="email" label="Email Address" 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>
+* ```
+*/
+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 descriptionId = description ? `${fieldId}-description` : void 0;
+	const errorId = hasErrors ? `${fieldId}-error` : void 0;
+	const contextValue = React$1.useMemo(() => ({
+		name: fieldMeta?.name ?? "",
+		id: fieldId,
+		errors,
+		required,
+		disabled,
+		fieldMeta
+	}), [
+		fieldMeta,
+		fieldId,
+		errors,
+		required,
+		disabled
+	]);
+	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,
+			fields,
+			form,
+			isSubmitting,
+			required,
+			disabled,
+			children
+		});
+		return children;
+	};
+	return /* @__PURE__ */ jsx(FieldProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col space-y-2", className),
+			children: [
+				label && /* @__PURE__ */ jsx(FieldLabel, {
+					htmlFor: fieldId,
+					label,
+					hasErrors,
+					required,
+					tooltip,
+					className: labelClassName
+				}),
+				renderContent(),
+				description && /* @__PURE__ */ jsx("p", {
+					id: descriptionId,
+					className: "text-ring text-xs text-wrap",
+					children: description
+				}),
+				hasErrors && /* @__PURE__ */ jsx("ul", {
+					id: errorId,
+					className: cn("text-destructive space-y-1 text-xs font-medium", errors.length > 1 && "list-disc pl-4"),
+					role: "alert",
+					"aria-live": "polite",
+					children: errors.map((error) => /* @__PURE__ */ jsx("li", {
+						className: "text-wrap",
+						children: error
+					}, error))
+				})
+			]
+		})
+	});
+}
+/**
+* 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.
+*
+* @example
+* ```tsx
+* <Form.FieldArray name="members">
+*   {({ fields, append, remove }) => (
+*     <>
+*       {fields.map((field, index) => (
+*         <div key={field.key} className="flex gap-2">
+*           <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>
+*         </div>
+*       ))}
+*       <button type="button" onClick={() => append({ email: '', role: 'user' })}>
+*         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;
+	}
+	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
+	}) });
+}
+FormFieldArray.displayName = "Form.FieldArray";
+
+//#endregion
+//#region src/components/features/form/components/form-input.tsx
+/**
+* Form.Input - Text input component
+*
+* 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>
+* ```
+*/
+function FormInput({ ref, type = "text", className, disabled, ...props }) {
+	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
+	const inputProps = getInputProps(fieldMeta, { type });
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		...inputProps,
+		...props,
+		type,
+		disabled: isDisabled,
+		"aria-invalid": hasErrors || void 0,
+		"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0,
+		className: cn("!text-xs", className)
+	});
+}
+FormInput.displayName = "Form.Input";
+
+//#endregion
+//#region src/components/features/form/components/form-radio-group.tsx
+/**
+* Form.RadioGroup - Radio button group component
+*
+* Automatically wired to the parent Form.Field context.
+*
+* @example
+* ```tsx
+* <Form.Field name="plan" label="Select Plan" required>
+*   <Form.RadioGroup orientation="vertical">
+*     <Form.RadioItem value="free" label="Free" description="Basic features" />
+*     <Form.RadioItem value="pro" label="Pro" description="Advanced features" />
+*     <Form.RadioItem value="enterprise" label="Enterprise" description="Custom solutions" />
+*   </Form.RadioGroup>
+* </Form.Field>
+* ```
+*/
+function FormRadioGroup({ orientation = "vertical", disabled, className, children }) {
+	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
+	const control = useInputControl(fieldMeta);
+	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,
+		disabled: isDisabled,
+		"aria-invalid": hasErrors || void 0,
+		"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0,
+		className: cn(orientation === "horizontal" ? "flex flex-row space-x-4" : "flex flex-col space-y-2", className),
+		children
+	});
+}
+FormRadioGroup.displayName = "Form.RadioGroup";
+/**
+* Form.RadioItem - Individual radio button option
+*
+* @example
+* ```tsx
+* <Form.RadioItem value="option1" label="Option 1" />
+* ```
+*/
+function FormRadioItem({ value, label, description, disabled }) {
+	const radioId = `radio-${value}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start space-x-2",
+		children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+			id: radioId,
+			value,
+			disabled,
+			className: "mt-1"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ jsx(Label, {
+				htmlFor: radioId,
+				className: cn("cursor-pointer text-sm font-normal", disabled && "cursor-not-allowed opacity-70"),
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: description
+			})]
+		})]
+	});
+}
+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
+*
+* @example Standard usage
+* ```tsx
+* <Form.Root schema={userSchema} onSubmit={handleSubmit}>
+*   <Form.Field name="email" label="Email" required>
+*     <Form.Input type="email" />
+*   </Form.Field>
+*   <Form.Submit>Save</Form.Submit>
+* </Form.Root>
+* ```
+*
+* @example Render function for form state access
+* ```tsx
+* <Form.Root schema={userSchema} onSubmit={handleSubmit}>
+*   {({ 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.Root>
+* ```
+*/
+function FormRoot({ schema, children, onSubmit, action, method = "POST", formComponent: FormComp = "form", id, name, defaultValues, mode = "onBlur", isSubmitting: externalIsSubmitting, onError, onSuccess, telemetry, className }) {
+	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,
+				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
+					})))));
+				}
+			}
+		}
+	});
+	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,
+		isSubmitting,
+		submit,
+		reset
+	]);
+	const isRenderFunction = typeof children === "function";
+	const renderProps = React$1.useMemo(() => ({
+		form,
+		fields,
+		isSubmitting,
+		submit,
+		reset
+	}), [
+		form,
+		fields,
+		isSubmitting,
+		submit,
+		reset
+	]);
+	const renderChildren = () => {
+		if (isRenderFunction) return children(renderProps);
+		return children;
+	};
+	const { onSubmit: conformOnSubmit, ...conformFormProps } = getFormProps(form);
+	return /* @__PURE__ */ jsx(FormProvider$1, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(FormProvider, {
+			context: form.context,
+			children: /* @__PURE__ */ jsx(FormComp, {
+				ref: formRef,
+				...conformFormProps,
+				onSubmit: (e) => {
+					e.stopPropagation();
+					conformOnSubmit(e);
+				},
+				method,
+				action,
+				className: cn("space-y-6", className),
+				autoComplete: "off",
+				children: renderChildren()
+			})
+		})
+	});
+}
+FormRoot.displayName = "Form.Root";
+
+//#endregion
+//#region src/components/features/form/components/form-select.tsx
+/**
+* Form.Select - Select dropdown component
+*
+* Automatically wired to the parent Form.Field context.
+*
+* @example
+* ```tsx
+* <Form.Field name="country" label="Country" required>
+*   <Form.Select placeholder="Select a country">
+*     <Form.SelectItem value="us">United States</Form.SelectItem>
+*     <Form.SelectItem value="uk">United Kingdom</Form.SelectItem>
+*     <Form.SelectItem value="ca">Canada</Form.SelectItem>
+*   </Form.Select>
+* </Form.Field>
+* ```
+*/
+function FormSelect({ placeholder, disabled, className, children }) {
+	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
+	const control = useInputControl(fieldMeta);
+	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,
+		disabled: isDisabled,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			id: fieldMeta.id,
+			"aria-invalid": hasErrors || void 0,
+			"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0,
+			className: cn(className),
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+		}), /* @__PURE__ */ jsx(SelectContent, { children })]
+	});
+}
+FormSelect.displayName = "Form.Select";
+/**
+* Form.SelectItem - Individual select option
+*
+* @example
+* ```tsx
+* <Form.SelectItem value="option1">Option 1</Form.SelectItem>
+* ```
+*/
+function FormSelectItem({ value, children, disabled }) {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		value,
+		disabled,
+		children
+	});
+}
+FormSelectItem.displayName = "Form.SelectItem";
+
+//#endregion
+//#region src/components/features/form/components/form-submit.tsx
+/**
+* Form.Submit - Submit button with automatic loading state
+*
+* @example
+* ```tsx
+* <Form.Submit loadingText="Saving...">
+*   Save Changes
+* </Form.Submit>
+* ```
+*/
+function FormSubmit({ children, loadingText, loading = false, ...props }) {
+	const { isSubmitting } = useFormContext$1();
+	const isLoading = loading || isSubmitting;
+	return /* @__PURE__ */ jsx(Button, {
+		htmlType: "submit",
+		disabled: props.disabled || isLoading,
+		loading: isLoading,
+		...props,
+		children: isLoading && loadingText ? loadingText : children
+	});
+}
+FormSubmit.displayName = "Form.Submit";
+
+//#endregion
+//#region src/components/features/form/components/form-switch.tsx
+/**
+* Form.Switch - Toggle switch component
+*
+* Automatically wired to the parent Form.Field context.
+*
+* @example
+* ```tsx
+* <Form.Field name="notifications">
+*   <Form.Switch label="Enable email notifications" />
+* </Form.Field>
+* ```
+*/
+function FormSwitch({ label, disabled, className }) {
+	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
+	const control = useInputControl(fieldMeta);
+	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;
+	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,
+			disabled: isDisabled,
+			"aria-invalid": hasErrors || void 0,
+			"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0
+		}), label && /* @__PURE__ */ jsx(Label, {
+			htmlFor: switchId,
+			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
+/**
+* Form.Textarea - Multi-line text input component
+*
+* Automatically wired to the parent Form.Field context.
+*
+* @example
+* ```tsx
+* <Form.Field name="bio" label="Bio">
+*   <Form.Textarea rows={4} placeholder="Tell us about yourself..." />
+* </Form.Field>
+* ```
+*/
+function FormTextarea({ ref, className, disabled, rows = 3, ...props }) {
+	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
+	const textareaProps = getTextareaProps(fieldMeta);
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	return /* @__PURE__ */ jsx(Textarea, {
+		ref,
+		...textareaProps,
+		...props,
+		rows,
+		disabled: isDisabled,
+		"aria-invalid": hasErrors || void 0,
+		"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0,
+		className: cn(className)
+	});
+}
+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
+*
+* @example
+* ```tsx
+* function ConditionalField() {
+*   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 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;
+}
+/**
+* Hook to watch multiple fields at once
+*
+* @example
+* ```tsx
+* function Summary() {
+*   const values = useWatchAll(['firstName', 'lastName', 'email']);
+*
+*   return (
+*     <div>
+*       Name: {values.firstName} {values.lastName}
+*       Email: {values.email}
+*     </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]);
+}
+
+//#endregion
+//#region src/components/features/form/components/form-when.tsx
+/**
+* Form.When - Conditional rendering based on field values
+*
+* Renders children only when the specified field matches the condition.
+*
+* @example
+* ```tsx
+* // Render when field equals value
+* <Form.When field="contactMethod" is="email">
+*   <Form.Field name="email"><Form.Input type="email" /></Form.Field>
+* </Form.When>
+*
+* // Render when field does not equal value
+* <Form.When field="contactMethod" isNot="none">
+*   <Form.Field name="contact"><Form.Input /></Form.Field>
+* </Form.When>
+*
+* // Render when field value is in array
+* <Form.When field="role" in={['admin', 'moderator']}>
+*   <Form.Field name="permissions"><Form.Input /></Form.Field>
+* </Form.When>
+*
+* // Render when field value is not in array
+* <Form.When field="status" notIn={['archived', 'deleted']}>
+*   <Form.Field name="actions"><Form.Input /></Form.Field>
+* </Form.When>
+* ```
+*/
+function FormWhen({ field, is, isNot, in: inArray, notIn, children }) {
+	const value = useWatch(field);
+	let shouldRender = true;
+	if (is !== void 0) shouldRender = value === is;
+	if (isNot !== void 0 && shouldRender) shouldRender = value !== isNot;
+	if (inArray !== void 0 && shouldRender) shouldRender = inArray.includes(value);
+	if (notIn !== void 0 && shouldRender) shouldRender = !notIn.includes(value);
+	if (!shouldRender) return null;
+	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);
+function useFormStepperContext() {
+	const context = React$1.use(FormStepperContext);
+	if (!context) throw new Error("useFormStepperContext must be used within a Form.Stepper component");
+	return context;
+}
+/**
+* Recursively unwrap ZodIntersection (from .and()) to extract the base ZodObject.
+*
+* Zod v4 schema types use `def.type` as a string discriminant:
+* - "intersection" (from .and()): merge left + right base objects
+* - "object": return directly
+*
+* Note: In Zod v4, .superRefine() and .refine() return `this` (no wrapper),
+* so only ZodIntersection needs unwrapping.
+*/
+function getBaseObject(schema) {
+	if (schema.def.type === "intersection") {
+		const intersectionDef = schema.def;
+		const left = getBaseObject(intersectionDef.left);
+		const right = getBaseObject(intersectionDef.right);
+		return left.merge(right);
+	}
+	if (schema.def.type !== "object") {
+		console.warn(`mergeSchemas: expected ZodObject or ZodIntersection but got "${schema.def.type}". Falling back to empty object.`);
+		return z.object({});
+	}
+	return schema;
+}
+/**
+* Merge multiple zod schemas into one ZodObject for HTML constraint generation.
+* Handles ZodIntersection (.and()) by unwrapping to base ZodObject shapes.
+* Per-step validation still uses the original schemas with all refinements intact.
+*/
+function mergeSchemas(steps) {
+	if (steps.length === 0) throw new Error("Form.Stepper requires at least one step");
+	return steps.reduce((acc, step, index) => {
+		const base = getBaseObject(step.schema);
+		if (index === 0) return base;
+		return acc.merge(base);
+	}, {});
+}
+/**
+* Convert StepConfig[] to Stepperize step format
+*/
+function toStepperizeSteps(steps) {
+	return steps.map((step) => ({
+		id: step.id,
+		label: step.label,
+		description: step.description
+	}));
+}
+/**
+* Form.Stepper - Multi-step form container
+*
+* Uses Stepperize internally for step navigation and a single Conform form
+* instance for all steps. Schemas are auto-merged for unified validation.
+*
+* @example
+* ```tsx
+* const steps = [
+*   { id: 'account', label: 'Account', schema: accountSchema },
+*   { id: 'profile', label: 'Profile', schema: profileSchema },
+* ];
+*
+* <Form.Stepper steps={steps} onComplete={handleComplete}>
+*   <Form.StepperNavigation />
+*
+*   <Form.Step id="account">
+*     <Form.Field name="email" label="Email" required>
+*       <Form.Input type="email" />
+*     </Form.Field>
+*   </Form.Step>
+*
+*   <Form.Step id="profile">
+*     <Form.Field name="name" label="Full Name" required>
+*       <Form.Input />
+*     </Form.Field>
+*   </Form.Step>
+*
+*   <Form.StepperControls />
+* </Form.Stepper>
+* ```
+*/
+function FormStepper({ steps, children, onComplete, onStepChange, initialStep, className, defaultValues, id, formComponent }) {
+	const stepperDef = React$1.useMemo(() => {
+		return defineStepper(...toStepperizeSteps(steps));
+	}, [steps]);
+	const initialStepIndex = React$1.useMemo(() => {
+		if (!initialStep) return void 0;
+		const index = steps.findIndex((s) => s.id === initialStep);
+		return index >= 0 ? steps[index].id : void 0;
+	}, [initialStep, steps]);
+	const { Stepper } = stepperDef;
+	const providerProps = initialStepIndex ? { initialStep: initialStepIndex } : {};
+	return /* @__PURE__ */ jsx(Stepper.Provider, {
+		...providerProps,
+		children: /* @__PURE__ */ jsx(FormStepperContent, {
+			steps,
+			stepperDef,
+			onComplete,
+			onStepChange,
+			className,
+			defaultValues,
+			id,
+			formComponent,
+			children
+		})
+	});
+}
+FormStepper.displayName = "Form.Stepper";
+function FormStepperContent({ steps, stepperDef, children, onComplete, onStepChange, className, defaultValues, id, formComponent }) {
+	const { useStepper } = stepperDef;
+	const stepper = useStepper();
+	return /* @__PURE__ */ jsx(StepForm, {
+		steps,
+		stepper,
+		currentStepConfig: React$1.useMemo(() => steps.find((s) => s.id === stepper.state.current.data.id) ?? steps[0], [steps, stepper.state.current.data.id]),
+		combinedSchema: React$1.useMemo(() => mergeSchemas(steps), [steps]),
+		storedValues: React$1.useMemo(() => {
+			const allMetadata = steps.reduce((acc, step) => ({
+				...acc,
+				...stepper.metadata.get(step.id) || {}
+			}), {});
+			return {
+				...defaultValues,
+				...allMetadata
+			};
+		}, [
+			steps,
+			stepper,
+			defaultValues,
+			stepper.state.current.data.id
+		]),
+		onComplete,
+		onStepChange,
+		className,
+		id,
+		formComponent,
+		children
+	}, stepper.state.current.data.id);
+}
+function StepForm({ steps, stepper, currentStepConfig, combinedSchema, storedValues, children, onComplete, onStepChange, className, id, formComponent: FormComp = "form" }) {
+	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 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 prevStepId = stepper.lookup.getPrev(stepper.state.current.data.id)?.id;
+		if (prevStepId) {
+			stepper.navigation.goTo(prevStepId);
+			onStepChange?.(prevStepId, "prev");
+		}
+	}, [stepper, onStepChange]);
+	const goTo = React$1.useCallback((stepId) => {
+		const currentIndex = stepper.lookup.getIndex(stepper.state.current.data.id);
+		if (stepper.lookup.getIndex(stepId) < currentIndex) {
+			stepper.navigation.goTo(stepId);
+			onStepChange?.(stepId, "prev");
+		}
+	}, [stepper, onStepChange]);
+	const getStepData = React$1.useCallback((stepId) => stepper.metadata.get(stepId), [stepper]);
+	const getAllStepData = React$1.useCallback(() => {
+		return steps.reduce((acc, step) => ({
+			...acc,
+			...stepper.metadata.get(step.id) || {}
+		}), {});
+	}, [steps, stepper]);
+	const stepperContextValue = React$1.useMemo(() => ({
+		steps,
+		current: currentStepConfig,
+		currentIndex: stepper.lookup.getIndex(stepper.state.current.data.id),
+		next,
+		prev,
+		goTo,
+		isFirst: stepper.state.isFirst,
+		isLast: stepper.state.isLast,
+		getStepData,
+		getAllStepData,
+		utils: { getIndex: (id) => stepper.lookup.getIndex(id) }
+	}), [
+		steps,
+		currentStepConfig,
+		stepper,
+		next,
+		prev,
+		goTo,
+		getStepData,
+		getAllStepData
+	]);
+	const formContextValue = React$1.useMemo(() => ({
+		form,
+		fields,
+		isSubmitting,
+		submit: () => formRef.current?.requestSubmit(),
+		reset: () => form.reset(),
+		formId: form.id
+	}), [
+		form,
+		fields,
+		isSubmitting
+	]);
+	const renderProps = {
+		steps,
+		current: currentStepConfig,
+		currentIndex: stepper.lookup.getIndex(stepper.state.current.data.id),
+		next,
+		prev,
+		goTo,
+		isFirst: stepper.state.isFirst,
+		isLast: stepper.state.isLast,
+		getStepData,
+		getAllStepData
+	};
+	const resolvedChildren = typeof children === "function" ? children(renderProps) : children;
+	return /* @__PURE__ */ jsx(FormStepperContext, {
+		value: stepperContextValue,
+		children: /* @__PURE__ */ jsx(FormProvider$1, {
+			value: formContextValue,
+			children: /* @__PURE__ */ jsx(FormProvider, {
+				context: form.context,
+				children: /* @__PURE__ */ jsx(FormComp, {
+					ref: formRef,
+					...getFormProps(form),
+					method: "POST",
+					className: cn("space-y-6", className),
+					autoComplete: "off",
+					children: resolvedChildren
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/features/form/components/stepper/form-step.tsx
+/**
+* Form.Step - Individual step content container
+*
+* Only renders its children when the step is active.
+* Works with the single-form architecture - fields remain registered
+* even when unmounted, preserving their values.
+*
+* @example
+* ```tsx
+* <Form.Step id="account">
+*   <Form.Field name="email" label="Email" required>
+*     <Form.Input type="email" />
+*   </Form.Field>
+* </Form.Step>
+* ```
+*/
+function FormStep({ id, children }) {
+	const { current } = useFormStepperContext();
+	if (current.id !== id) return null;
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+FormStep.displayName = "Form.Step";
+
+//#endregion
+//#region src/components/features/form/components/stepper/stepper-controls.tsx
+/**
+* Form.StepperControls - Navigation buttons (Previous/Next/Submit)
+*
+* Provides Previous and Next/Submit buttons for navigating between steps.
+* The Next button triggers form validation before advancing.
+* The Previous button navigates back without validation.
+*
+* @example
+* ```tsx
+* <Form.StepperControls
+*   prevLabel={(isFirst) => isFirst ? 'Cancel' : 'Previous'}
+*   nextLabel={(isLast) => isLast ? 'Submit' : 'Next'}
+*   loadingText="Creating..."
+*   onCancel={() => setOpen(false)}
+* />
+* ```
+*
+* @example With external loading state
+* ```tsx
+* <Form.StepperControls
+*   loading={fetcher.state === 'submitting'}
+*   disabled={!isValid}
+*   loadingText="Saving..."
+* />
+* ```
+*/
+function StepperControls({ prevLabel = "Previous", nextLabel = (isLast) => isLast ? "Submit" : "Next", loadingText = "Submitting...", showPrev = true, loading, disabled, onPrev, onCancel, className }) {
+	const { prev, isFirst, isLast } = useFormStepperContext();
+	const { isSubmitting: formIsSubmitting } = useFormContext$1();
+	const isLoading = loading ?? formIsSubmitting;
+	const isDisabled = disabled ?? false;
+	const getPrevLabel = () => {
+		if (typeof prevLabel === "function") return prevLabel(isFirst);
+		return prevLabel;
+	};
+	const getNextLabel = () => {
+		if (typeof nextLabel === "function") return nextLabel(isLast);
+		return nextLabel;
+	};
+	const handlePrev = () => {
+		if (isFirst && onCancel) onCancel();
+		else {
+			onPrev?.();
+			prev();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-between gap-3", className),
+		children: [/* @__PURE__ */ jsx("div", { children: showPrev && /* @__PURE__ */ jsx(Button, {
+			htmlType: "button",
+			type: "quaternary",
+			theme: "outline",
+			size: "small",
+			onClick: handlePrev,
+			disabled: isLoading || isDisabled,
+			children: getPrevLabel()
+		}) }), /* @__PURE__ */ jsx(Button, {
+			htmlType: "submit",
+			type: "primary",
+			size: "small",
+			loading: isLoading,
+			disabled: isLoading || isDisabled,
+			children: isLoading && isLast ? loadingText : getNextLabel()
+		})]
+	});
+}
+StepperControls.displayName = "Form.StepperControls";
+
+//#endregion
+//#region src/components/features/form/components/stepper/stepper-navigation.tsx
+/**
+* Form.StepperNavigation - Step indicators/progress
+*
+* Displays visual step indicators showing current progress through the form.
+* Supports horizontal and vertical variants with optional label orientation.
+*
+* @example
+* ```tsx
+* <Form.StepperNavigation variant="horizontal" labelOrientation="vertical" />
+* ```
+*/
+function StepperNavigation({ variant = "horizontal", labelOrientation = "vertical", className }) {
+	const { steps, currentIndex } = useFormStepperContext();
+	if (variant === "horizontal" && labelOrientation === "vertical") return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Form steps",
+		className: cn("flex flex-row items-start justify-between", className),
+		children: steps.map((step, index) => {
+			const isActive = index === currentIndex;
+			const isCompleted = index < currentIndex;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "relative flex flex-1 flex-col items-center",
+				children: [
+					!(index === steps.length - 1) && /* @__PURE__ */ jsx("div", { className: "bg-stepper-line absolute top-4 right-[calc(-50%+20px)] left-[calc(50%+20px)] h-0.5" }),
+					/* @__PURE__ */ jsx("div", {
+						className: cn("relative z-10 flex h-8 w-8 items-center justify-center rounded-full border bg-transparent text-sm font-medium transition-colors", isActive && "border-primary bg-primary text-primary-foreground", isCompleted && "border-tertiary-foreground bg-tertiary-foreground text-tertiary", !isActive && !isCompleted && "border-stepper-label text-stepper-label"),
+						"aria-current": isActive ? "step" : void 0,
+						children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-tertiary h-4 w-4" }) : index + 1
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "mt-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("text-xs font-medium", isActive && "text-foreground", isCompleted && "text-stepper-label", !isActive && !isCompleted && "text-stepper-label"),
+							children: step.label
+						}), step.description && /* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground mt-0.5 text-xs",
+							children: step.description
+						})]
+					})
+				]
+			}, step.id);
+		})
+	});
+	if (variant === "horizontal") return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Form steps",
+		className: cn("flex flex-row items-center", className),
+		children: steps.map((step, index) => {
+			const isActive = index === currentIndex;
+			const isCompleted = index < currentIndex;
+			const isLast = index === steps.length - 1;
+			return /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn("flex h-8 w-8 items-center justify-center rounded-full border text-sm font-medium transition-colors", isActive && "border-primary bg-primary text-primary-foreground", isCompleted && "border-tertiary-foreground bg-tertiary-foreground text-tertiary", !isActive && !isCompleted && "border-stepper-label text-stepper-label"),
+					"aria-current": isActive ? "step" : void 0,
+					children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-tertiary size-4" }) : index + 1
+				}), /* @__PURE__ */ jsx("div", {
+					className: "ml-2",
+					children: /* @__PURE__ */ jsx("span", {
+						className: cn("text-sm font-medium", isActive && "text-foreground", isCompleted && "text-stepper-label", !isActive && !isCompleted && "text-stepper-label"),
+						children: step.label
+					})
+				})]
+			}), !isLast && /* @__PURE__ */ jsx("div", { className: "bg-stepper-line mx-4 h-0.5 min-w-8 flex-1" })] }, step.id);
+		})
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Form steps",
+		className: cn("flex flex-col", className),
+		children: steps.map((step, index) => {
+			const isActive = index === currentIndex;
+			const isCompleted = index < currentIndex;
+			const isLast = index === steps.length - 1;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: cn("flex h-8 w-8 items-center justify-center rounded-full border text-sm font-medium transition-colors", isActive && "border-primary bg-primary text-primary-foreground", isCompleted && "border-tertiary-foreground bg-tertiary-foreground text-tertiary", !isActive && !isCompleted && "border-stepper-label text-stepper-label"),
+						"aria-current": isActive ? "step" : void 0,
+						children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-tertiary size-4" }) : index + 1
+					}), !isLast && /* @__PURE__ */ jsx("div", { className: "bg-stepper-line my-1 min-h-8 w-0.5 flex-1" })]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "ml-3 pb-8",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("text-sm font-medium", isActive && "text-foreground", isCompleted && "text-stepper-label", !isActive && !isCompleted && "text-stepper-label"),
+						children: step.label
+					}), step.description && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground mt-0.5 text-xs",
+						children: step.description
+					})]
+				})]
+			}, step.id);
+		})
+	});
+}
+StepperNavigation.displayName = "Form.StepperNavigation";
+
+//#endregion
+//#region src/components/features/form/components/form-input-group.tsx
+/**
+* Form.Input - Text input component
+*
+* 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>
+* ```
+*/
+function FormInputGroup({ ref, type = "text", className, disabled, ...props }) {
+	const { fieldMeta, disabled: fieldDisabled, errors } = useFieldContext$1();
+	const inputProps = getInputProps(fieldMeta, { type });
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	return /* @__PURE__ */ jsx(InputWithAddons, {
+		ref,
+		...inputProps,
+		...props,
+		type,
+		disabled: isDisabled,
+		"aria-invalid": hasErrors || void 0,
+		"aria-describedby": hasErrors ? `${fieldMeta.id}-error` : void 0,
+		className: cn("text-xs!", className)
+	});
+}
+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
+*
+* @example
+* ```tsx
+* function MyCustomInput({ name }: { name: string }) {
+*   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>
+*   );
+* }
+* ```
+*/
+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
+	]);
+	return {
+		field,
+		control: {
+			value: controlValue,
+			change: control.change,
+			blur: control.blur,
+			focus: control.focus
+		},
+		meta,
+		errors: field.errors
+	};
+}
+
+//#endregion
+//#region src/components/features/form/hooks/use-field-context.ts
+/**
+* Hook to access the current field context
+* Must be used within a Form.Field component
+*
+* @example
+* ```tsx
+* function MyInput() {
+*   const { name, id, errors, required, disabled, fieldMeta } = useFieldContext();
+*
+*   return (
+*     <input
+*       name={name}
+*       id={id}
+*       required={required}
+*       disabled={disabled}
+*       aria-invalid={!!errors?.length}
+*     />
+*   );
+* }
+* ```
+*/
+function useFieldContext() {
+	return useFieldContext$1();
+}
+
+//#endregion
+//#region src/components/features/form/hooks/use-form-context.ts
+/**
+* Hook to access the form context
+*
+* @example
+* ```tsx
+* function MyComponent() {
+*   const { form, fields, isSubmitting, submit, reset } = useFormContext();
+*
+*   return (
+*     <button onClick={submit} disabled={isSubmitting}>
+*       Submit
+*     </button>
+*   );
+* }
+* ```
+*/
+function useFormContext() {
+	return useFormContext$1();
+}
+
+//#endregion
+//#region src/components/features/form/hooks/use-stepper.ts
+/**
+* Hook to access the stepper context
+* Must be used within a Form.Stepper component
+*
+* @example
+* ```tsx
+* function StepContent() {
+*   const {
+*     current,
+*     currentIndex,
+*     steps,
+*     next,
+*     prev,
+*     goTo,
+*     isFirst,
+*     isLast,
+*   } = useStepper();
+*
+*   return (
+*     <div>
+*       <h2>Step {currentIndex + 1}: {current.label}</h2>
+*       <button onClick={prev} disabled={isFirst}>Previous</button>
+*       <button onClick={next} disabled={isLast}>Next</button>
+*     </div>
+*   );
+* }
+* ```
+*/
+function useStepper() {
+	const context = useFormStepperContext();
+	return {
+		steps: context.steps,
+		current: context.current,
+		currentIndex: context.currentIndex,
+		next: context.next,
+		prev: context.prev,
+		goTo: context.goTo,
+		isFirst: context.isFirst,
+		isLast: context.isLast,
+		getStepData: context.getStepData,
+		getAllStepData: context.getAllStepData
+	};
+}
+
+//#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 };