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

package/dist/form-C6AOB2f4.mjs

@@ -0,0 +1,1397 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Button } from "./button-BllvE9Lm.mjs";
+import { t as Icon } from "./icon-wrapper-DuLp3RM1.mjs";
+import { t as Checkbox } from "./checkbox-I5BvrMPe.mjs";
+import { t as Dialog } from "./dialog-Bm2H9lrx.mjs";
+import { t as Input } from "./input-FKGqZypx.mjs";
+import { t as Label } from "./label-cnAhY-ej.mjs";
+import { n as RadioGroupItem, t as RadioGroup } from "./radio-group-CiITR0LO.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-CiLR_DiQ.mjs";
+import { t as Tooltip } from "./tooltip-Cruvl5F6.mjs";
+import { t as Switch } from "./switch-DQJQhPIQ.mjs";
+import { t as Textarea } from "./textarea-BwD-MmTV.mjs";
+import { t as Autocomplete } from "./autocomplete-V5-qslzS.mjs";
+import { t as toast } from "./toast-BWnN5fax.mjs";
+import { n as useFormContext$1, t as FormProvider } from "./form-context-Ccxm-wqL.mjs";
+import { t as useCopyToClipboard } from "./use-copy-to-clipboard-C2IEmhDn.mjs";
+import { n as useAdapter } from "./adapter-context-BFqfq4Io.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";
+//#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 { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	const value = fieldState?.value != null ? String(fieldState.value) : "";
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		...props,
+		name: fieldState?.name,
+		id,
+		value,
+		onValueChange: (val) => fieldState?.change(val),
+		disabled: isDisabled,
+		triggerClassName: cn(hasErrors && "border-destructive", props.triggerClassName),
+		className
+	});
+}
+FormAutocomplete.displayName = "Form.Autocomplete";
+//#endregion
+//#region src/components/features/form/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 { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	const checked = Boolean(fieldState?.value);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center space-x-2", className),
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			id,
+			checked,
+			onCheckedChange: (value) => fieldState?.change(Boolean(value)),
+			disabled: isDisabled,
+			"aria-invalid": hasErrors || void 0,
+			"aria-describedby": hasErrors ? `${id}-error` : void 0
+		}), label && /* @__PURE__ */ jsx(Label, {
+			htmlFor: id,
+			className: cn("cursor-pointer text-sm font-normal", isDisabled && "cursor-not-allowed opacity-70"),
+			children: label
+		})]
+	});
+}
+FormCheckbox.displayName = "Form.Checkbox";
+//#endregion
+//#region src/components/features/form/components/form-copy-box.tsx
+/**
+* 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 { fieldState } = useFieldContext$1();
+	const [copied, copy] = useCopyToClipboard();
+	const value = fieldState?.value != null ? String(fieldState.value) : "";
+	const displayValue = value || placeholder;
+	const copyToClipboard = () => {
+		if (!value) return;
+		copy(value).then(() => {
+			toast.success("Copied to clipboard");
+		});
+	};
+	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: displayValue
+			})
+		}), /* @__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 ctx = useFormContext$1();
+	return /* @__PURE__ */ jsx(Fragment$1, { children: children({
+		form: ctx.form,
+		fields: ctx.fields,
+		isSubmitting: ctx.isSubmitting,
+		isDirty: ctx.isDirty,
+		isValid: ctx.isValid,
+		isSubmitted: ctx.isSubmitted,
+		submitCount: ctx.submitCount,
+		dirtyFields: ctx.dirtyFields,
+		touchedFields: ctx.touchedFields,
+		submit: ctx.submit,
+		reset: ctx.reset
+	}) });
+}
+FormCustom.displayName = "Form.Custom";
+//#endregion
+//#region src/components/features/form/components/form-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
+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 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" required>
+*   <Form.Input type="email" />
+* </Form.Field>
+* ```
+*
+* @example Render function for custom components
+* ```tsx
+* <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 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,
+		id: fieldId,
+		errors,
+		required: fieldRequired,
+		disabled,
+		fieldState
+	}), [
+		name,
+		fieldId,
+		errors,
+		fieldRequired,
+		disabled,
+		fieldState
+	]);
+	const isRenderFunction = typeof children === "function";
+	const renderContent = () => {
+		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
+		});
+		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: fieldRequired,
+					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))
+				})
+			]
+		})
+	});
+}
+FormField.displayName = "Form.Field";
+//#endregion
+//#region src/components/features/form/components/form-field-array.tsx
+/**
+* Form.FieldArray - Dynamic array of fields with append/remove/move helpers.
+*
+* @example
+* ```tsx
+* <Form.FieldArray name="members">
+*   {({ fields, append, remove }) => (
+*     <>
+*       {fields.map((field, index) => (
+*         <div key={field.key}>
+*           <Form.Field name={`members.${index}.email`} label="Email">
+*             <Form.Input type="email" />
+*           </Form.Field>
+*           <button onClick={() => remove(index)}>Remove</button>
+*         </div>
+*       ))}
+*       <button onClick={() => append({})}>Add Member</button>
+*     </>
+*   )}
+* </Form.FieldArray>
+* ```
+*/
+function FormFieldArray({ name, children }) {
+	const fieldArray = useAdapter().useFieldArray(name);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: children({
+		fields: fieldArray.items,
+		append: fieldArray.append,
+		remove: fieldArray.remove,
+		move: fieldArray.move
+	}) });
+}
+FormFieldArray.displayName = "Form.FieldArray";
+//#endregion
+//#region src/components/features/form/components/form-input.tsx
+/**
+* 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 { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	return /* @__PURE__ */ jsx(Input, {
+		...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 ? `${id}-error` : void 0
+	});
+}
+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 { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		value: fieldState?.value != null ? String(fieldState.value) : void 0,
+		onValueChange: (val) => fieldState?.change(val),
+		disabled: isDisabled,
+		"aria-invalid": hasErrors || 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
+	});
+}
+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 - Root form container that integrates with the active adapter.
+*
+* @example Standard usage
+* ```tsx
+* <Form.Root schema={schema} onSubmit={handleSubmit}>
+*   <Form.Field name="email" label="Email">
+*     <Form.Input type="email" />
+*   </Form.Field>
+*   <Form.Submit>Save</Form.Submit>
+* </Form.Root>
+* ```
+*
+* @example Render function for form state access
+* ```tsx
+* <Form.Root schema={schema}>
+*   {({ form, fields, isSubmitting }) => (
+*     <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 [isSubmitted, setIsSubmitted] = React$1.useState(false);
+	const [submitCount, setSubmitCount] = React$1.useState(0);
+	const formRef = React$1.useRef(null);
+	const wrappedOnSubmit = React$1.useCallback(async (data) => {
+		setInternalIsSubmitting(true);
+		setIsSubmitted(true);
+		setSubmitCount((prev) => prev + 1);
+		try {
+			await onSubmit?.(data);
+			telemetry?.onSuccess?.({
+				formName: name ?? "",
+				formId: id
+			});
+			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 { formState } = instance;
+	const contextValue = React$1.useMemo(() => ({
+		form: instance,
+		fields: instance.fields,
+		isSubmitting,
+		isDirty: formState.isDirty,
+		isValid: formState.isValid,
+		isSubmitted,
+		submitCount,
+		dirtyFields: formState.dirtyFields,
+		touchedFields: formState.touchedFields,
+		submit: () => formRef.current?.requestSubmit(),
+		reset: () => instance.reset(),
+		formId: instance.id
+	}), [
+		instance,
+		isSubmitting,
+		formState,
+		isSubmitted,
+		submitCount
+	]);
+	const isRenderFunction = typeof children === "function";
+	const renderProps = {
+		form: instance,
+		fields: instance.fields,
+		isSubmitting,
+		isDirty: formState.isDirty,
+		isValid: formState.isValid,
+		isSubmitted,
+		submitCount,
+		dirtyFields: formState.dirtyFields,
+		touchedFields: formState.touchedFields,
+		submit: () => formRef.current?.requestSubmit(),
+		reset: () => instance.reset()
+	};
+	const renderChildren = () => {
+		if (isRenderFunction) return children(renderProps);
+		return children;
+	};
+	return /* @__PURE__ */ jsx(FormProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(adapter.FormProvider, {
+			instance,
+			children: /* @__PURE__ */ jsx(FormComp, {
+				ref: formRef,
+				...instance.formProps,
+				method,
+				action,
+				className: cn("space-y-6", className),
+				autoComplete: "off",
+				noValidate: true,
+				onSubmit: (e) => {
+					e.stopPropagation();
+					telemetry?.onSubmit?.({
+						formName: name ?? "",
+						formId: id
+					});
+					const adapterSubmit = instance.formProps.onSubmit;
+					adapterSubmit?.(e);
+				},
+				children: renderChildren()
+			})
+		})
+	});
+}
+FormRoot.displayName = "Form.Root";
+//#endregion
+//#region src/components/features/form/components/form-select.tsx
+/**
+* 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 { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	return /* @__PURE__ */ jsxs(Select, {
+		value: fieldState?.value != null ? String(fieldState.value) : void 0,
+		onValueChange: (val) => fieldState?.change(val),
+		disabled: isDisabled,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			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 })]
+	});
+}
+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 { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	const checked = Boolean(fieldState?.value);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center space-x-2", className),
+		children: [/* @__PURE__ */ jsx(Switch, {
+			id,
+			checked,
+			onCheckedChange: (value) => fieldState?.change(Boolean(value)),
+			disabled: isDisabled,
+			"aria-invalid": hasErrors || void 0,
+			"aria-describedby": hasErrors ? `${id}-error` : void 0
+		}), label && /* @__PURE__ */ jsx(Label, {
+			htmlFor: id,
+			className: cn("cursor-pointer text-sm font-normal", isDisabled && "cursor-not-allowed opacity-70"),
+			children: label
+		})]
+	});
+}
+FormSwitch.displayName = "Form.Switch";
+//#endregion
+//#region src/components/features/form/components/form-textarea.tsx
+/**
+* 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 { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	return /* @__PURE__ */ jsx(Textarea, {
+		...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 ? `${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 reactively.
+* Delegates to the active adapter's useWatch implementation.
+*
+* @example
+* ```tsx
+* function ConditionalField() {
+*   const contactMethod = useWatch('contactMethod')
+*   if (contactMethod === 'email') {
+*     return <Form.Field name="email"><Form.Input type="email" /></Form.Field>
+*   }
+*   return null
+* }
+* ```
+*/
+function useWatch(name) {
+	return useAdapter().useWatch(name);
+}
+/**
+* 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}</div>
+* }
+* ```
+*/
+function useWatchAll(names) {
+	return useAdapter().useWatchAll(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/form-input-group.tsx
+/**
+* Form.InputGroup - Input with leading/trailing addons
+*
+* Automatically wired to the parent Form.Field context.
+*
+* @example
+* ```tsx
+* <Form.Field name="website" label="Website" required>
+*   <Form.InputGroup leading="https://" placeholder="example.com" />
+* </Form.Field>
+* ```
+*/
+function FormInputGroup({ ref, className, disabled, ...props }) {
+	const { id, errors, disabled: fieldDisabled, fieldState } = useFieldContext$1();
+	const isDisabled = disabled ?? fieldDisabled;
+	const hasErrors = errors && errors.length > 0;
+	return /* @__PURE__ */ jsx(InputWithAddons, {
+		...props,
+		ref,
+		id,
+		name: fieldState?.name,
+		value: fieldState?.value ?? "",
+		onChange: (e) => fieldState?.change(e.target.value),
+		onBlur: () => fieldState?.blur(),
+		className: cn("text-xs!", className),
+		disabled: isDisabled,
+		"aria-invalid": hasErrors || void 0,
+		"aria-describedby": hasErrors ? `${id}-error` : void 0
+	});
+}
+FormInputGroup.displayName = "Form.InputGroup";
+//#endregion
+//#region src/components/features/form/hooks/use-field.ts
+/**
+* Hook to access and control a specific field.
+* Delegates to the active adapter's useField implementation.
+*
+* @example
+* ```tsx
+* function MyCustomInput({ name }: { name: string }) {
+*   const { field, control, meta, errors } = useField(name)
+*   return (
+*     <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 fieldState = useAdapter().useField(name);
+	return {
+		field: fieldState,
+		control: {
+			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
+		},
+		errors: fieldState.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-form-state.ts
+/**
+* Hook to access form-level state (dirty, valid, submitted, etc.)
+*
+* @example
+* ```tsx
+* function SaveButton() {
+*   const { isDirty, isSubmitting, isValid } = useFormState()
+*
+*   return (
+*     <button
+*       type="submit"
+*       disabled={!isDirty || isSubmitting || !isValid}
+*     >
+*       Save Changes
+*     </button>
+*   )
+* }
+* ```
+*/
+function useFormState() {
+	const ctx = useFormContext$1();
+	return {
+		isDirty: ctx.isDirty,
+		isValid: ctx.isValid,
+		isSubmitting: ctx.isSubmitting,
+		isSubmitted: ctx.isSubmitted,
+		submitCount: ctx.submitCount,
+		dirtyFields: ctx.dirtyFields,
+		touchedFields: ctx.touchedFields
+	};
+}
+//#endregion
+//#region src/components/features/form/index.ts
+/**
+* Datum Form Library
+*
+* A compound component pattern form library with pluggable adapter support.
+* Choose between Conform.js or React Hook Form as your form backend,
+* with Zod for schema validation.
+*
+* ## Adapter Setup
+*
+* Wrap your app with an adapter provider:
+*
+* ```tsx
+* // Conform adapter
+* import { ConformAdapter } from '@datum-cloud/datum-ui/form/adapters/conform'
+* <ConformAdapter><App /></ConformAdapter>
+*
+* // React Hook Form adapter
+* import { RHFAdapter } from '@datum-cloud/datum-ui/form/adapters/rhf'
+* <RHFAdapter><App /></RHFAdapter>
+* ```
+*
+* @example Basic Usage
+* ```tsx
+* import { Form } from '@datum-cloud/datum-ui/form';
+* import { z } from 'zod';
+*
+* const userSchema = z.object({
+*   name: z.string().min(2),
+*   email: z.string().email(),
+* });
+*
+* function UserForm() {
+*   return (
+*     <Form.Root schema={userSchema} onSubmit={(data) => console.log(data)}>
+*       <Form.Field name="name" label="Name" required>
+*         <Form.Input />
+*       </Form.Field>
+*       <Form.Field name="email" label="Email" required>
+*         <Form.Input type="email" />
+*       </Form.Field>
+*       <Form.Submit>Save</Form.Submit>
+*     </Form.Root>
+*   );
+* }
+* ```
+*
+* @example Multi-Step Form (separate import)
+* ```tsx
+* import { FormStepper, FormStep, StepperNavigation, StepperControls } from '@datum-cloud/datum-ui/form/stepper';
+*
+* const steps = [
+*   { id: 'account', label: 'Account', schema: accountSchema },
+*   { id: 'profile', label: 'Profile', schema: profileSchema },
+* ];
+*
+* <FormStepper steps={steps} onComplete={handleComplete}>
+*   <StepperNavigation />
+*   <FormStep id="account">...</FormStep>
+*   <FormStep id="profile">...</FormStep>
+*   <StepperControls />
+* </FormStepper>
+* ```
+*
+* @example Form State
+* ```tsx
+* <Form.Root schema={schema} onSubmit={handleSubmit}>
+*   {({ isDirty, isValid, isSubmitted, submitCount }) => (
+*     <>
+*       <Form.Field name="name"><Form.Input /></Form.Field>
+*       <Form.Submit disabled={!isDirty || !isValid}>Save</Form.Submit>
+*       {isSubmitted && <p>Submitted {submitCount} time(s)</p>}
+*     </>
+*   )}
+* </Form.Root>
+* ```
+*
+* @example Conditional Fields
+* ```tsx
+* <Form.Field name="contactMethod">
+*   <Form.Select>
+*     <Form.SelectItem value="email">Email</Form.SelectItem>
+*     <Form.SelectItem value="phone">Phone</Form.SelectItem>
+*   </Form.Select>
+* </Form.Field>
+*
+* <Form.When field="contactMethod" is="email">
+*   <Form.Field name="email"><Form.Input type="email" /></Form.Field>
+* </Form.When>
+* ```
+*/
+/**
+* Form compound component
+*
+* Requires an adapter provider at the application root:
+* - `<ConformAdapter>` from `@datum-cloud/datum-ui/form/adapters/conform`
+* - `<RHFAdapter>` from `@datum-cloud/datum-ui/form/adapters/rhf`
+*
+* Components:
+* - Form.Root - Main form container
+* - Form.Field - Field wrapper with label and error handling
+* - Form.Input, Form.Textarea, Form.Select, Form.Checkbox, Form.Switch, Form.RadioGroup
+* - Form.Autocomplete, Form.CopyBox, Form.InputGroup
+* - Form.When - Conditional rendering
+* - Form.FieldArray - Dynamic array of fields
+* - Form.Custom - Escape hatch for custom implementations
+* - Form.Dialog - Form rendered inside a Dialog
+* - Form.Submit, Form.Button, Form.Error, Form.Description
+*
+* Stepper (separate import):
+* - `@datum-cloud/datum-ui/form/stepper` provides FormStepper, FormStep, StepperNavigation, StepperControls, useStepper
+*
+* Hooks:
+* - Form.useFormContext, Form.useFormState, Form.useFieldContext, Form.useField
+* - Form.useWatch, Form.useWatchAll
+*/
+const Form = {
+	Root: FormRoot,
+	Field: FormField,
+	Submit: FormSubmit,
+	Button: FormButton,
+	Error: FormError,
+	Description: FormDescription,
+	Input: FormInput,
+	Textarea: FormTextarea,
+	Select: FormSelect,
+	SelectItem: FormSelectItem,
+	Checkbox: FormCheckbox,
+	Switch: FormSwitch,
+	RadioGroup: FormRadioGroup,
+	RadioItem: FormRadioItem,
+	CopyBox: FormCopyBox,
+	Autocomplete: FormAutocomplete,
+	InputGroup: FormInputGroup,
+	When: FormWhen,
+	FieldArray: FormFieldArray,
+	Custom: FormCustom,
+	Dialog: FormDialog,
+	useFormContext,
+	useFormState,
+	useFieldContext,
+	useField,
+	useWatch,
+	useWatchAll
+};
+//#endregion
+export { FormCustom as C, FormAutocomplete as D, FormButton as E, FormDescription as S, FormCheckbox as T, FormInput as _, useField as a, FormError as b, useWatchAll as c, FormSubmit as d, FormSelect as f, FormRadioItem as g, FormRadioGroup as h, useFieldContext as i, FormTextarea as l, FormRoot as m, useFormState as n, FormWhen as o, FormSelectItem as p, useFormContext as r, useWatch as s, Form as t, FormSwitch as u, FormFieldArray as v, FormCopyBox as w, FormDialog as x, FormField as y };