@classytic/fluid 0.2.4 → 0.3.3

package/dist/forms.mjs

@@ -0,0 +1,3740 @@
+"use client";
+
+import { t as cn } from "./utils-DQ5SCVoW.mjs";
+import { n as useDebouncedCallback } from "./use-debounce-xmZucz5e.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CalendarIcon, Check, ChevronDown, Eye, EyeOff, FileIcon, FileImage, FileVideo, Loader2, Minus, Plus, Tag, Trash2, Upload, Wand2, X } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupTextarea } from "@/components/ui/input-group";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { format, isValid, set } from "date-fns";
+import { Controller } from "react-hook-form";
+import { Field, FieldContent, FieldDescription, FieldError as FieldError$1, FieldLabel } from "@/components/ui/field";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Switch } from "@/components/ui/switch";
+import { Calendar } from "@/components/ui/calendar";
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput as ComboboxInput$1, ComboboxItem, ComboboxLabel, ComboboxList, useComboboxAnchor } from "@/components/ui/combobox";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+
+//#region src/components/form/form-input.tsx
+/**
+* FormInput - Text input with react-hook-form integration
+*
+* Features:
+* - Works with react-hook-form Controller
+* - Supports input groups with icons/addons
+* - Value transformation (input/output)
+* - Can be used standalone without form
+*
+* @example
+* ```tsx
+* // With react-hook-form
+* <FormInput
+*   control={form.control}
+*   name="email"
+*   type="email"
+*   label="Email"
+*   placeholder="user@example.com"
+*   required
+* />
+*
+* // With icon
+* <FormInput
+*   control={form.control}
+*   name="search"
+*   iconLeft={<SearchIcon />}
+*   placeholder="Search..."
+* />
+* ```
+*/
+function FormInput({ control, name, label, placeholder, description, helperText, required, disabled, readOnly, type = "text", className, labelClassName, inputClassName, inputGroupClassName, iconLeft, iconRight, addonLeft, addonRight, onValueChange, transform, value, onChange, min, max, step, minLength, maxLength, pattern, autoComplete, autoFocus, inputMode, enterKeyHint }) {
+	const descriptionText = description || helperText;
+	const handleChange = (e, field) => {
+		const newValue = transform?.output ? transform.output(e.target.value) : e.target.value;
+		if (field) field.onChange(newValue);
+		else if (onChange) onChange(newValue);
+		onValueChange?.(newValue);
+	};
+	const hasInputGroup = iconLeft || iconRight || addonLeft || addonRight;
+	const renderInput = (field, isDisabled, fieldState) => {
+		const safeValue = (field ? transform?.input ? transform.input(field.value) : field.value : transform?.input ? transform.input(value) : value) ?? "";
+		const inputProps = {
+			id: name,
+			name: field?.name || name,
+			type,
+			disabled: isDisabled,
+			readOnly,
+			placeholder,
+			value: safeValue,
+			onChange: (e) => handleChange(e, field),
+			onBlur: field?.onBlur,
+			"aria-invalid": fieldState?.invalid || void 0,
+			"aria-describedby": [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0
+		};
+		if (min !== void 0) inputProps.min = min;
+		if (max !== void 0) inputProps.max = max;
+		if (step !== void 0) inputProps.step = step;
+		if (minLength !== void 0) inputProps.minLength = minLength;
+		if (maxLength !== void 0) inputProps.maxLength = maxLength;
+		if (pattern !== void 0) inputProps.pattern = pattern;
+		if (autoComplete !== void 0) inputProps.autoComplete = autoComplete;
+		if (autoFocus !== void 0) inputProps.autoFocus = autoFocus;
+		if (inputMode !== void 0) inputProps.inputMode = inputMode;
+		if (enterKeyHint !== void 0) inputProps.enterKeyHint = enterKeyHint;
+		if (field?.ref) inputProps.ref = field.ref;
+		if (hasInputGroup) return /* @__PURE__ */ jsxs(InputGroup, {
+			className: cn(inputGroupClassName),
+			"data-disabled": isDisabled,
+			children: [
+				(addonLeft || iconLeft) && /* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-start",
+					children: addonLeft || iconLeft
+				}),
+				/* @__PURE__ */ jsx(InputGroupInput, {
+					...inputProps,
+					className: inputClassName
+				}),
+				(addonRight || iconRight) && /* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-end",
+					children: addonRight || iconRight
+				})
+			]
+		});
+		return /* @__PURE__ */ jsx(Input, {
+			...inputProps,
+			className: inputClassName
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderInput(void 0, disabled, void 0),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderInput(field, disabled, fieldState),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/form-textarea.tsx
+/**
+* FormTextarea - Textarea with react-hook-form integration
+*
+* @example
+* ```tsx
+* <FormTextarea
+*   control={form.control}
+*   name="bio"
+*   label="Biography"
+*   placeholder="Tell us about yourself..."
+*   rows={5}
+* />
+* ```
+*/
+function FormTextarea({ control, name, label, description, helperText, required, disabled, readOnly, placeholder, value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, textareaClassName, inputGroupClassName, iconLeft, iconRight, addonLeft, addonRight, rows = 3, minLength, maxLength, autoComplete, autoFocus }) {
+	const descriptionText = description || helperText;
+	const hasInputGroup = iconLeft || iconRight || addonLeft || addonRight;
+	const [localValue, setLocalValue] = useState(propValue || "");
+	useEffect(() => {
+		if (propValue !== void 0) setLocalValue(propValue);
+	}, [propValue]);
+	const handleDirectValueChange = (value) => {
+		setLocalValue(value);
+		propOnChange?.(value);
+		onValueChange?.(value);
+	};
+	const renderTextarea = (field, isDisabled, fieldState) => {
+		const value = field ? field.value : localValue;
+		const handleChange = (e) => {
+			const newValue = e.target.value;
+			if (field) field.onChange(e);
+			else handleDirectValueChange(newValue);
+			onValueChange?.(newValue);
+		};
+		const textareaProps = {
+			id: name,
+			name: field?.name || name,
+			value: value ?? "",
+			placeholder,
+			disabled: isDisabled,
+			readOnly,
+			rows,
+			onChange: handleChange,
+			onBlur: field?.onBlur,
+			"aria-invalid": fieldState?.invalid || void 0,
+			"aria-describedby": [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0
+		};
+		if (minLength !== void 0) textareaProps.minLength = minLength;
+		if (maxLength !== void 0) textareaProps.maxLength = maxLength;
+		if (autoComplete !== void 0) textareaProps.autoComplete = autoComplete;
+		if (autoFocus !== void 0) textareaProps.autoFocus = autoFocus;
+		if (field?.ref) textareaProps.ref = field.ref;
+		if (hasInputGroup) return /* @__PURE__ */ jsxs(InputGroup, {
+			className: cn(inputGroupClassName),
+			"data-disabled": isDisabled,
+			children: [
+				(addonLeft || iconLeft) && /* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-start",
+					children: addonLeft || iconLeft
+				}),
+				/* @__PURE__ */ jsx(InputGroupTextarea, {
+					...textareaProps,
+					className: cn("overflow-auto resize-none", textareaClassName)
+				}),
+				(addonRight || iconRight) && /* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-end",
+					children: addonRight || iconRight
+				})
+			]
+		});
+		return /* @__PURE__ */ jsx(Textarea, {
+			...textareaProps,
+			className: cn("overflow-auto resize-none", textareaClassName)
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderTextarea(void 0, disabled, void 0),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderTextarea(field, disabled, fieldState),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/select-input.tsx
+/**
+* SelectInput - Select dropdown with react-hook-form integration
+*
+* Features:
+* - Flat and grouped options
+* - Custom placeholder
+* - Optional "All" option (use placeholder text to match)
+* - Custom styling
+*
+* Note: For "All" options with value="", the placeholder will be shown when selected.
+* Make sure your placeholder text matches what you want to display for "All".
+*
+* @example
+* ```tsx
+* // Basic usage
+* <SelectInput
+*   control={form.control}
+*   name="role"
+*   label="Role"
+*   items={[
+*     { value: "admin", label: "Admin" },
+*     { value: "user", label: "User" },
+*   ]}
+* />
+*
+* // With "All" option - placeholder shows when "All" is selected
+* <SelectInput
+*   name="status"
+*   label="Status"
+*   items={[
+*     { value: "", label: "All" },  // This will show placeholder when selected
+*     { value: "active", label: "Active" },
+*   ]}
+*   placeholder="All"  // Make sure this matches the "All" label
+* />
+* ```
+*/
+function SelectInput({ control, items = [], groups = [], name, label, placeholder = "Select option", allOption, description, helperText, required, disabled, className, labelClassName, triggerClassName, contentClassName, itemClassName, Icon, onValueChange, value: propValue, defaultOpen, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0 }) {
+	const descriptionText = description || helperText;
+	const CLEAR_VALUE = "__CLEAR__";
+	const displayItems = useMemo(() => {
+		const filtered = items.filter((item) => item.value !== void 0 && item.value !== null);
+		return allOption ? [allOption, ...filtered] : filtered;
+	}, [items, allOption]);
+	const filteredGroups = useMemo(() => {
+		return groups.map((group) => ({
+			...group,
+			items: group.items.filter((item) => item.value !== void 0 && item.value !== null)
+		})).filter((group) => group.items.length > 0);
+	}, [groups]);
+	const [localValue, setLocalValue] = useState(propValue?.toString() || "");
+	useEffect(() => {
+		if (propValue !== void 0) setLocalValue(propValue.toString());
+	}, [propValue]);
+	const labelMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const item of displayItems) map.set(item.value?.toString() ?? "", item.label);
+		for (const group of filteredGroups) for (const item of group.items) map.set(item.value?.toString() ?? "", item.label);
+		return map;
+	}, [displayItems, filteredGroups]);
+	const renderSelect = (field, isDisabled, fieldState) => {
+		const rawValue = field ? field.value?.toString() : localValue;
+		const handleChange = (newValue) => {
+			const actualValue = newValue === CLEAR_VALUE ? "" : newValue;
+			if (field) field.onChange(actualValue);
+			else setLocalValue(actualValue);
+			onValueChange?.(actualValue);
+		};
+		const getItemValue = (item, fallback) => {
+			const val = item.value !== void 0 && item.value !== null ? item.value.toString() : fallback;
+			return val === "" ? CLEAR_VALUE : val;
+		};
+		const getItemLabel = (item) => {
+			return item.label;
+		};
+		const getUniqueReactKey = (item, fallback, seen) => {
+			const baseKey = `${getItemValue(item, fallback)}::${getItemLabel(item)}`;
+			const nextCount = (seen.get(baseKey) ?? 0) + 1;
+			seen.set(baseKey, nextCount);
+			return nextCount === 1 ? baseKey : `${baseKey}::${nextCount}`;
+		};
+		const renderGroupedContent = () => {
+			if (filteredGroups.length === 0) return null;
+			return filteredGroups.map((group, groupIdx) => {
+				const seenKeys = /* @__PURE__ */ new Map();
+				return /* @__PURE__ */ jsxs(SelectGroup, { children: [group.label && /* @__PURE__ */ jsx(SelectLabel, { children: group.label }), group.items.map((item, idx) => {
+					return /* @__PURE__ */ jsx(SelectItem, {
+						value: getItemValue(item, `item-${groupIdx}-${idx}`),
+						className: cn("cursor-pointer", itemClassName),
+						disabled: item.disabled,
+						children: getItemLabel(item)
+					}, getUniqueReactKey(item, `item-${groupIdx}-${idx}`, seenKeys));
+				})] }, `group-${groupIdx}`);
+			});
+		};
+		const renderFlatContent = () => {
+			if (displayItems.length === 0) return /* @__PURE__ */ jsx("div", {
+				className: "py-6 text-center text-sm text-muted-foreground",
+				children: "No options available"
+			});
+			const seenKeys = /* @__PURE__ */ new Map();
+			return displayItems.map((item, idx) => {
+				return /* @__PURE__ */ jsx(SelectItem, {
+					value: getItemValue(item, `item-${idx}`),
+					className: cn("cursor-pointer", itemClassName),
+					disabled: item.disabled,
+					children: getItemLabel(item)
+				}, getUniqueReactKey(item, `item-${idx}`, seenKeys));
+			});
+		};
+		const selectValue = rawValue === "" ? CLEAR_VALUE : rawValue ? rawValue : void 0;
+		const selectedLabel = (() => {
+			if (!rawValue && rawValue !== "") return void 0;
+			return labelMap.get(rawValue ?? "");
+		})();
+		return /* @__PURE__ */ jsxs(Select, {
+			onValueChange: handleChange,
+			value: selectValue,
+			disabled: isDisabled,
+			defaultOpen,
+			children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+				className: cn("w-full", triggerClassName),
+				"aria-invalid": fieldState?.invalid || void 0,
+				"aria-describedby": [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0,
+				children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "mr-2 h-4 w-4 text-primary" }), /* @__PURE__ */ jsx(SelectValue, {
+					placeholder,
+					children: selectedLabel || null
+				})]
+			}), /* @__PURE__ */ jsx(SelectContent, {
+				className: cn(contentClassName),
+				side,
+				sideOffset,
+				align,
+				alignOffset,
+				children: filteredGroups.length > 0 ? renderGroupedContent() : renderFlatContent()
+			})]
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderSelect(void 0, disabled, void 0),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderSelect(field, disabled, fieldState),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/checkbox-input.tsx
+/**
+* CheckboxInput - Checkbox group with react-hook-form integration
+*
+* Features:
+* - Multiple checkbox items
+* - Array value support
+* - Can be used standalone
+*
+* @example
+* ```tsx
+* <CheckboxInput
+*   control={form.control}
+*   name="features"
+*   label="Features"
+*   items={[
+*     { id: "wifi", label: "WiFi" },
+*     { id: "parking", label: "Parking" },
+*     { id: "pool", label: "Pool" },
+*   ]}
+* />
+* ```
+*/
+function CheckboxInput({ control, name, label, description, helperText, required, disabled, items = [], value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, checkboxClassName, itemClassName, itemLabelClassName }) {
+	const descriptionText = description || helperText;
+	const [localValues, setLocalValues] = useState(propValue || []);
+	useEffect(() => {
+		if (propValue !== void 0) setLocalValues(propValue);
+	}, [propValue]);
+	const handleDirectValueChange = (newValues) => {
+		setLocalValues(newValues);
+		propOnChange?.(newValues);
+		onValueChange?.(newValues);
+	};
+	const renderCheckboxes = (field, isDisabled, fieldState) => {
+		const values = field?.value || localValues || [];
+		const handleCheckedChange = (itemId, checked) => {
+			const newValues = checked ? [...values, itemId] : values.filter((value) => value !== itemId);
+			if (field) {
+				field.onChange(newValues);
+				onValueChange?.(newValues);
+			} else handleDirectValueChange(newValues);
+		};
+		return /* @__PURE__ */ jsx("div", {
+			"data-slot": "checkbox-group",
+			className: "space-y-2",
+			role: "group",
+			"aria-describedby": [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0,
+			children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-2", itemClassName),
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					id: `${name}-${item.id}`,
+					className: checkboxClassName,
+					checked: values.includes(item.id),
+					disabled: isDisabled || item.disabled,
+					onCheckedChange: (checked) => handleCheckedChange(item.id, checked),
+					"aria-invalid": fieldState?.invalid || void 0
+				}), /* @__PURE__ */ jsx("label", {
+					htmlFor: `${name}-${item.id}`,
+					className: cn("text-sm font-normal cursor-pointer leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", itemLabelClassName),
+					children: item.label
+				})]
+			}, item.id))
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderCheckboxes(void 0, disabled, void 0),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderCheckboxes(field, disabled, fieldState),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/radio-input.tsx
+/**
+* RadioInput - Radio group with react-hook-form integration
+*
+* @example
+* ```tsx
+* <RadioInput
+*   control={form.control}
+*   name="plan"
+*   label="Select Plan"
+*   choices={[
+*     { value: "free", label: "Free" },
+*     { value: "pro", label: "Pro" },
+*     { value: "enterprise", label: "Enterprise" },
+*   ]}
+*   orientation="horizontal"
+* />
+* ```
+*/
+function RadioInput({ control, name, label, description, helperText, required, disabled, choices = [], items, orientation = "vertical", value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, radioGroupClassName, radioItemClassName, radioLabelClassName }) {
+	const descriptionText = description || helperText;
+	const radioOptions = items || choices;
+	const [localValue, setLocalValue] = useState(propValue || "");
+	useEffect(() => {
+		if (propValue !== void 0) setLocalValue(propValue);
+	}, [propValue]);
+	const handleDirectValueChange = (newValue) => {
+		setLocalValue(newValue);
+		propOnChange?.(newValue);
+		onValueChange?.(newValue);
+	};
+	const renderRadioGroup = (field, isDisabled, fieldState) => {
+		const value = field ? field.value : localValue;
+		const handleValueChange = (newValue) => {
+			if (field) {
+				field.onChange(newValue);
+				onValueChange?.(newValue);
+			} else handleDirectValueChange(newValue);
+		};
+		return /* @__PURE__ */ jsx(RadioGroup, {
+			value,
+			onValueChange: handleValueChange,
+			disabled: isDisabled,
+			"aria-invalid": fieldState?.invalid || void 0,
+			"aria-describedby": [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0,
+			className: cn(orientation === "horizontal" ? "flex flex-row flex-wrap gap-4" : "flex flex-col gap-3", radioGroupClassName),
+			children: radioOptions.map((choice) => /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-2", radioItemClassName),
+				children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+					id: `${name}-${choice.value}`,
+					value: choice.value,
+					disabled: isDisabled || choice.disabled
+				}), /* @__PURE__ */ jsx("label", {
+					htmlFor: `${name}-${choice.value}`,
+					className: cn("text-sm font-normal cursor-pointer leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", radioLabelClassName),
+					children: choice.label
+				})]
+			}, choice.value))
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderRadioGroup(void 0, disabled, void 0),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderRadioGroup(field, disabled, fieldState),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/switch-input.tsx
+/**
+* SwitchInput - Toggle switch with react-hook-form integration
+*
+* @example
+* ```tsx
+* <SwitchInput
+*   control={form.control}
+*   name="notifications"
+*   label="Enable notifications"
+*   description="Receive email updates"
+* />
+* ```
+*/
+function SwitchInput({ control, name, label, description, helperText, required, disabled, orientation = "horizontal", value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, switchClassName }) {
+	const descriptionText = description || helperText;
+	const [localValue, setLocalValue] = useState(propValue || false);
+	useEffect(() => {
+		if (propValue !== void 0) setLocalValue(propValue);
+	}, [propValue]);
+	const handleDirectValueChange = (newValue) => {
+		setLocalValue(newValue);
+		propOnChange?.(newValue);
+		onValueChange?.(newValue);
+	};
+	const renderSwitch = (field, isDisabled, fieldState) => {
+		const value = field ? field.value ?? false : localValue ?? false;
+		const handleCheckedChange = (checked) => {
+			if (field) {
+				field.onChange(checked);
+				onValueChange?.(checked);
+			} else handleDirectValueChange(checked);
+		};
+		return /* @__PURE__ */ jsx(Switch, {
+			id: name,
+			checked: value,
+			onCheckedChange: handleCheckedChange,
+			disabled: isDisabled,
+			className: switchClassName,
+			"aria-invalid": fieldState?.invalid || void 0,
+			"aria-describedby": [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		orientation,
+		children: [renderSwitch(void 0, disabled, void 0), /* @__PURE__ */ jsxs(FieldContent, { children: [label && /* @__PURE__ */ jsxs(FieldLabel, {
+			htmlFor: name,
+			className: labelClassName,
+			children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "text-destructive ml-1",
+				"aria-hidden": "true",
+				children: "*"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "(required)"
+			})] })]
+		}), descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+			id: `${name}-description`,
+			children: descriptionText
+		})] })]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			orientation,
+			children: [renderSwitch(field, disabled, fieldState), /* @__PURE__ */ jsxs(FieldContent, { children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			] })]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/date-input.tsx
+/**
+* Convert various date formats to Date object
+*/
+function toDate(val) {
+	if (!val) return void 0;
+	if (val instanceof Date) return val;
+	if (typeof val === "string" && /^\d{4}-\d{2}-\d{2}$/.test(val)) {
+		const [y, m, d] = val.split("-").map(Number);
+		const dt = new Date(y, (m || 1) - 1, d || 1);
+		return isNaN(dt.getTime()) ? void 0 : dt;
+	}
+	const dt = new Date(val);
+	return isNaN(dt.getTime()) ? void 0 : dt;
+}
+/**
+* DateInput - Date picker with react-hook-form integration
+*
+* @example
+* ```tsx
+* <DateInput
+*   control={form.control}
+*   name="birthDate"
+*   label="Date of Birth"
+*   minDate="1900-01-01"
+*   maxDate={new Date()}
+* />
+* ```
+*/
+function DateInput({ control, name, label, description, helperText, placeholder = "Pick a date", required, disabled, className, labelClassName, inputClassName, minDate, maxDate, onValueChange, value: propValue, onChange: propOnChange, Icon = CalendarIcon, allowClear = true }) {
+	const descriptionText = description || helperText;
+	const isDateDisabled = (date) => {
+		if (!date) return false;
+		const minDateObj = toDate(minDate);
+		const maxDateObj = toDate(maxDate);
+		if (minDateObj && date < minDateObj) return true;
+		if (maxDateObj && date > maxDateObj) return true;
+		return false;
+	};
+	const renderDateInput = (field, isDisabled, fieldState) => {
+		const ariaDescribedBy = [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0;
+		const selected = toDate(field ? field.value : propValue);
+		const [open, setOpen] = useState(false);
+		const handleSelect = (date) => {
+			if (field) field.onChange(date);
+			else if (propOnChange) propOnChange(date);
+			onValueChange?.(date);
+			setOpen(false);
+		};
+		const handleClear = (e) => {
+			e?.stopPropagation?.();
+			if (field) field.onChange(void 0);
+			else if (propOnChange) propOnChange(void 0);
+			onValueChange?.(void 0);
+		};
+		const displayText = selected ? selected.toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric",
+			year: "numeric"
+		}) : placeholder;
+		return /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				className: cn("w-full justify-start text-left font-normal", !selected && "text-muted-foreground", fieldState?.invalid && "border-destructive", inputClassName),
+				disabled: isDisabled,
+				"aria-invalid": fieldState?.invalid || void 0,
+				"aria-describedby": ariaDescribedBy,
+				children: [
+					/* @__PURE__ */ jsx(Icon, { className: "mr-2 h-4 w-4" }),
+					displayText,
+					allowClear && selected && !isDisabled && /* @__PURE__ */ jsx(X, {
+						className: "ml-auto h-4 w-4 opacity-50 hover:opacity-100",
+						onClick: handleClear
+					})
+				]
+			}) }), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-auto p-0",
+				align: "start",
+				children: /* @__PURE__ */ jsx(Calendar, {
+					mode: "single",
+					defaultMonth: selected,
+					selected,
+					onSelect: handleSelect,
+					disabled: isDateDisabled,
+					initialFocus: true
+				})
+			})]
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderDateInput(void 0, disabled),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderDateInput(field, disabled, fieldState),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/tag-input.tsx
+/**
+* TagInput - Tag/chip input with react-hook-form integration
+*
+* @example
+* ```tsx
+* <TagInput
+*   control={form.control}
+*   name="tags"
+*   label="Tags"
+*   placeholder="Add tags..."
+*   maxTags={10}
+*   suggestions={["react", "typescript", "nextjs"]}
+* />
+* ```
+*/
+function TagInput({ control, name, label, description, helperText, placeholder = "Add tag...", required, disabled, className, labelClassName, inputClassName, maxTags, allowDuplicates = false, suggestions = [], suggestionLimit = 8, value: propValue = [], onChange: propOnChange, onValueChange, delimiter = ",", validateTag, transformTag, formatTag, ...props }) {
+	const descriptionText = description || helperText;
+	const [inputValue, setInputValue] = useState("");
+	const inputRef = useRef(null);
+	const parseMultipleTags = useCallback((input) => {
+		if (!input.trim()) return [];
+		return input.split(delimiter).map((tag) => tag.trim()).filter((tag) => tag.length > 0).map((tag) => transformTag ? transformTag(tag) : tag).filter((tag) => !validateTag || validateTag(tag));
+	}, [
+		delimiter,
+		validateTag,
+		transformTag
+	]);
+	const handleAddMultipleTags = useCallback((tags, newTags, field) => {
+		if (!newTags || newTags.length === 0) return tags;
+		const updatedTags = [...tags];
+		let addedCount = 0;
+		for (const newTag of newTags) {
+			if (!newTag.trim()) continue;
+			const trimmedTag = newTag.trim();
+			if (!allowDuplicates && updatedTags.includes(trimmedTag)) continue;
+			if (maxTags && updatedTags.length >= maxTags) break;
+			updatedTags.push(trimmedTag);
+			addedCount++;
+		}
+		if (addedCount > 0) {
+			if (field) field.onChange(updatedTags);
+			else if (propOnChange) propOnChange(updatedTags);
+			onValueChange?.(updatedTags);
+		}
+		return updatedTags;
+	}, [
+		allowDuplicates,
+		maxTags,
+		propOnChange,
+		onValueChange
+	]);
+	const handleAddTag = useCallback((tags, newTag, field) => {
+		const updatedTags = handleAddMultipleTags(tags, parseMultipleTags(newTag), field);
+		setInputValue("");
+		return updatedTags;
+	}, [parseMultipleTags, handleAddMultipleTags]);
+	const handleRemoveTag = useCallback((tags, indexToRemove, field) => {
+		const updatedTags = tags.filter((_, index) => index !== indexToRemove);
+		if (field) field.onChange(updatedTags);
+		else if (propOnChange) propOnChange(updatedTags);
+		onValueChange?.(updatedTags);
+		return updatedTags;
+	}, [propOnChange, onValueChange]);
+	const handleInputChange = useCallback((e, tags, field) => {
+		const value = e.target.value;
+		if (value.includes(delimiter)) {
+			const parts = value.split(delimiter);
+			const completeTags = parts.slice(0, -1);
+			const remainingInput = parts[parts.length - 1] || "";
+			if (completeTags.length > 0) handleAddMultipleTags(tags, completeTags.map((t) => t.trim()).filter((t) => t), field);
+			setInputValue(remainingInput);
+		} else setInputValue(value);
+	}, [delimiter, handleAddMultipleTags]);
+	const handlePaste = useCallback((e, tags, field) => {
+		e.preventDefault();
+		const pastedTags = parseMultipleTags(e.clipboardData.getData("text"));
+		if (pastedTags.length > 0) {
+			handleAddMultipleTags(tags, pastedTags, field);
+			setInputValue("");
+		}
+	}, [parseMultipleTags, handleAddMultipleTags]);
+	const handleKeyDown = useCallback((e, tags, field) => {
+		if (e.key === "Enter" || e.key === delimiter) {
+			e.preventDefault();
+			handleAddTag(tags, inputValue, field);
+		} else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
+			e.preventDefault();
+			handleRemoveTag(tags, tags.length - 1, field);
+		}
+	}, [
+		delimiter,
+		inputValue,
+		handleAddTag,
+		handleRemoveTag
+	]);
+	const getPlaceholder = useCallback((tagsCount) => {
+		if (tagsCount === 0) return placeholder.includes("comma") ? placeholder : `${placeholder} (separate with ${delimiter} for multiple)`;
+		return "Add another...";
+	}, [placeholder, delimiter]);
+	const canAddMoreTags = useCallback((tagsLength) => {
+		return !maxTags || tagsLength < maxTags;
+	}, [maxTags]);
+	const renderTagInput = ({ field, disabled: isDisabled, error }) => {
+		const tags = field ? field.value || [] : propValue || [];
+		const showInput = !isDisabled && canAddMoreTags(tags.length);
+		const normalizedInputRaw = (inputValue || "").trim();
+		const normalizedInput = (transformTag ? transformTag(normalizedInputRaw) : normalizedInputRaw).toLowerCase().trim();
+		const filteredSuggestions = useMemo(() => {
+			if (!normalizedInput) return [];
+			const existingSet = new Set(tags.map((t) => t.toLowerCase()));
+			return suggestions.filter(Boolean).map((s) => transformTag ? transformTag(s) : s).filter((s) => s.toLowerCase().includes(normalizedInput)).filter((s) => allowDuplicates || !existingSet.has(s.toLowerCase())).slice(0, suggestionLimit);
+		}, [
+			normalizedInput,
+			tags,
+			suggestions,
+			transformTag,
+			allowDuplicates,
+			suggestionLimit
+		]);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			tags.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: cn("flex flex-wrap gap-1.5 mb-3", "p-2.5 rounded-md bg-muted/30 border border-border/50"),
+				children: tags.map((tag, index) => {
+					const displayTag = formatTag ? formatTag(tag) : tag;
+					return /* @__PURE__ */ jsxs(Badge, {
+						variant: "secondary",
+						className: cn("group flex items-center gap-1.5 px-2.5 py-1", "bg-background border border-border shadow-sm", "hover:border-primary/50 transition-all duration-200", "animate-in fade-in-0 zoom-in-95", isDisabled && "opacity-60"),
+						children: [
+							/* @__PURE__ */ jsx(Tag, { className: "h-3 w-3 text-muted-foreground" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "max-w-[200px] truncate text-sm font-medium",
+								title: displayTag,
+								children: displayTag
+							}),
+							!isDisabled && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "sm",
+								className: cn("h-4 w-4 p-0 ml-0.5", "text-muted-foreground/60 hover:text-destructive", "hover:bg-destructive/10 rounded-sm", "transition-colors"),
+								onClick: (e) => {
+									e.stopPropagation();
+									handleRemoveTag(tags, index, field);
+								},
+								"aria-label": `Remove ${displayTag}`,
+								children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+							})
+						]
+					}, `${tag}-${index}`);
+				})
+			}),
+			showInput && /* @__PURE__ */ jsxs("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ jsxs(InputGroup, {
+					className: cn(error && "border-destructive"),
+					children: [
+						/* @__PURE__ */ jsx(InputGroupAddon, {
+							align: "inline-start",
+							children: /* @__PURE__ */ jsx(Tag, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ jsx(InputGroupInput, {
+							ref: inputRef,
+							type: "text",
+							value: inputValue,
+							onChange: (e) => handleInputChange(e, tags, field),
+							onKeyDown: (e) => handleKeyDown(e, tags, field),
+							onPaste: (e) => handlePaste(e, tags, field),
+							placeholder: getPlaceholder(tags.length),
+							disabled: isDisabled,
+							"aria-label": "Add new tag",
+							"aria-invalid": !!error,
+							"aria-describedby": [descriptionText ? `${name}-description` : void 0, error ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0,
+							className: inputClassName,
+							...props
+						}),
+						inputValue.trim() && /* @__PURE__ */ jsx(InputGroupAddon, {
+							align: "inline-end",
+							children: /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon",
+								className: "h-6 w-6 text-primary hover:text-primary hover:bg-primary/10",
+								onClick: () => handleAddTag(tags, inputValue, field),
+								"aria-label": "Add tag",
+								children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+							})
+						})
+					]
+				}), filteredSuggestions.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap gap-1.5 p-2 rounded-md bg-muted/30 border border-dashed",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground font-medium w-full mb-1",
+						children: "Suggestions:"
+					}), filteredSuggestions.map((sug) => /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						className: cn("h-7 px-2.5 text-xs", "hover:border-primary/50 hover:bg-primary/5", "transition-all duration-200"),
+						onClick: (e) => {
+							e.stopPropagation();
+							handleAddMultipleTags(tags, [sug], field);
+							setInputValue("");
+						},
+						"aria-label": `Add ${formatTag ? formatTag(sug) : sug}`,
+						children: [formatTag ? formatTag(sug) : sug, /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 ml-1.5 opacity-70" })]
+					}, sug))]
+				})]
+			}),
+			maxTags && /* @__PURE__ */ jsxs("div", {
+				className: cn("text-xs font-medium mt-2 flex items-center gap-1.5", tags.length >= maxTags ? "text-destructive" : "text-muted-foreground"),
+				children: [
+					/* @__PURE__ */ jsx("div", { className: cn("h-1.5 w-1.5 rounded-full", tags.length >= maxTags ? "bg-destructive" : "bg-muted-foreground/50") }),
+					tags.length,
+					"/",
+					maxTags,
+					" tags"
+				]
+			})
+		] });
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [label && /* @__PURE__ */ jsxs(FieldLabel, {
+			htmlFor: name,
+			className: labelClassName,
+			children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "text-destructive ml-1",
+				"aria-hidden": "true",
+				children: "*"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "(required)"
+			})] })]
+		}), /* @__PURE__ */ jsxs(FieldContent, { children: [renderTagInput({
+			field: null,
+			disabled,
+			error: null
+		}), descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+			id: `${name}-description`,
+			children: descriptionText
+		})] })]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}), /* @__PURE__ */ jsxs(FieldContent, { children: [
+				renderTagInput({
+					field,
+					disabled,
+					error: fieldState?.error?.message
+				}),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			] })]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/tag-choice-input.tsx
+function TagChoiceInputInternal({ name, label, description, placeholder = "Select...", required, disabled, className, items = [], value = [], onValueChange, error }) {
+	const [open, setOpen] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const searchRef = useRef(null);
+	const selectedValues = value || [];
+	useEffect(() => {
+		if (open) {
+			const t = setTimeout(() => searchRef.current?.focus(), 50);
+			return () => clearTimeout(t);
+		} else setSearchQuery("");
+	}, [open]);
+	const handleSelect = (itemValue) => {
+		const newValue = selectedValues.includes(itemValue) ? selectedValues.filter((v) => v !== itemValue) : [...selectedValues, itemValue];
+		onValueChange?.(newValue);
+	};
+	const handleRemove = (e, valueToRemove) => {
+		e.preventDefault();
+		e.stopPropagation();
+		onValueChange?.(selectedValues.filter((v) => v !== valueToRemove));
+	};
+	const filteredItems = items.filter((item) => item.label.toLowerCase().includes(searchQuery.toLowerCase()));
+	return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		"data-invalid": !!error,
+		children: [label && /* @__PURE__ */ jsxs(FieldLabel, { children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-destructive ml-1",
+			"aria-hidden": "true",
+			children: "*"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "(required)"
+		})] })] }), /* @__PURE__ */ jsxs(FieldContent, { children: [
+			/* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: setOpen,
+				modal: true,
+				children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+					render: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "combobox",
+						"aria-expanded": open,
+						"aria-invalid": !!error || void 0,
+						"aria-describedby": [description ? `${name}-description` : void 0, error ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0,
+						disabled,
+						className: cn("flex w-full min-h-10 items-center rounded-md border border-input bg-background text-left", "ring-offset-background transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "hover:bg-accent/50", error && "border-destructive", disabled && "opacity-50 cursor-not-allowed")
+					}),
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex flex-1 flex-wrap items-center gap-1 px-3 py-1.5 min-h-[2.25rem]",
+						children: selectedValues.length > 0 ? selectedValues.map((val) => {
+							const item = items.find((i) => i.value === val);
+							return /* @__PURE__ */ jsxs(Badge, {
+								variant: "secondary",
+								className: "flex items-center gap-1 px-2 py-0.5 text-xs font-medium shrink-0",
+								children: [item?.label || val, !disabled && /* @__PURE__ */ jsx("span", {
+									role: "button",
+									tabIndex: -1,
+									className: "ml-0.5 rounded-sm hover:bg-foreground/20 cursor-pointer",
+									onPointerDown: (e) => handleRemove(e, val),
+									"aria-label": `Remove ${item?.label || val}`,
+									children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+								})]
+							}, val);
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "text-sm text-muted-foreground",
+							children: placeholder
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex items-center px-2 shrink-0",
+						children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-transform duration-200", open && "rotate-180") })
+					})]
+				}), /* @__PURE__ */ jsxs(PopoverContent, {
+					className: "w-(--anchor-width) p-0",
+					align: "start",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "p-2 border-b",
+							children: /* @__PURE__ */ jsx("input", {
+								ref: searchRef,
+								placeholder: "Search options...",
+								value: searchQuery,
+								onChange: (e) => setSearchQuery(e.target.value),
+								className: "flex h-8 w-full rounded-md bg-transparent px-2 py-1 text-sm outline-none placeholder:text-muted-foreground"
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "max-h-[200px] overflow-y-auto p-1",
+							children: filteredItems.length === 0 ? /* @__PURE__ */ jsx("div", {
+								className: "py-4 text-center text-sm text-muted-foreground",
+								children: "No options found"
+							}) : filteredItems.map((item) => {
+								const isSelected = selectedValues.includes(item.value);
+								return /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: () => handleSelect(item.value),
+									disabled: item.disabled,
+									className: cn("w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-sm cursor-pointer", "hover:bg-accent hover:text-accent-foreground transition-colors", isSelected && "bg-accent/50 font-medium", item.disabled && "opacity-50 cursor-not-allowed"),
+									children: [/* @__PURE__ */ jsx("div", {
+										className: cn("flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border", isSelected ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground/30"),
+										children: isSelected && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" })
+									}), /* @__PURE__ */ jsx("span", { children: item.label })]
+								}, item.value);
+							})
+						}),
+						selectedValues.length > 0 && /* @__PURE__ */ jsxs("div", {
+							className: "border-t px-2 py-1.5 text-xs text-muted-foreground",
+							children: [selectedValues.length, " selected"]
+						})
+					]
+				})]
+			}),
+			description && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: description
+			}),
+			error && /* @__PURE__ */ jsx(FieldError$1, {
+				id: `${name}-error`,
+				errors: [{ message: error }]
+			})
+		] })]
+	});
+}
+TagChoiceInputInternal.displayName = "TagChoiceInputInternal";
+/**
+* TagChoiceInput - Multi-select with inline tag display
+*
+* Selected items appear as badges inside the trigger area.
+* The popover dropdown stays anchored without layout jumps.
+*/
+function TagChoiceInput({ control, name, label, description, helperText, placeholder = "Select...", required, disabled, className, items = [], value: propValue = [], onValueChange }) {
+	const descriptionText = description || helperText;
+	if (control) return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsx(TagChoiceInputInternal, {
+			name,
+			label,
+			description: descriptionText,
+			placeholder,
+			required,
+			disabled,
+			className,
+			items,
+			value: field.value || [],
+			onValueChange: (val) => {
+				field.onChange(val);
+				onValueChange?.(val);
+			},
+			error: fieldState?.error?.message
+		})
+	});
+	return /* @__PURE__ */ jsx(TagChoiceInputInternal, {
+		name,
+		label,
+		description: descriptionText,
+		placeholder,
+		required,
+		disabled,
+		className,
+		items,
+		value: propValue,
+		onValueChange
+	});
+}
+TagChoiceInput.displayName = "TagChoiceInput";
+
+//#endregion
+//#region src/components/form/combobox-input.tsx
+/**
+* ComboboxInput - Searchable select with react-hook-form integration using Base UI
+*
+* Passes `{ value, label }` objects to Base UI Combobox so it auto-resolves
+* labels for display and filtering. The form value is always the string `value`.
+*
+* @example
+* ```tsx
+* // With react-hook-form
+* <ComboboxInput
+*   control={form.control}
+*   name="country"
+*   label="Country"
+*   items={[
+*     { value: "us", label: "United States" },
+*     { value: "uk", label: "United Kingdom" },
+*   ]}
+*   placeholder="Select a country..."
+* />
+*
+* // Standalone
+* <ComboboxInput
+*   name="country"
+*   label="Country"
+*   items={items}
+*   value={selectedCountry}
+*   onValueChange={setSelectedCountry}
+* />
+* ```
+*/
+function ComboboxInput({ control, name, label, placeholder = "Select...", emptyText = "No items found.", description, helperText, required, disabled, items = [], className, labelClassName, inputClassName, onValueChange, renderOption, value: propValue, onChange: propOnChange }) {
+	const descriptionText = description || helperText;
+	const handleValueChange = useCallback((newItem, field) => {
+		const safeValue = newItem?.value || "";
+		if (field) field.onChange(safeValue);
+		else if (propOnChange) propOnChange(safeValue);
+		onValueChange?.(safeValue);
+	}, [propOnChange, onValueChange]);
+	const renderCombobox = (currentValue, field, isDisabled, fieldState) => {
+		const ariaDescribedBy = [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0;
+		return /* @__PURE__ */ jsxs(Combobox, {
+			items,
+			value: currentValue ? items.find((item) => item.value === currentValue) ?? null : null,
+			onValueChange: (item) => handleValueChange(item, field),
+			disabled: isDisabled,
+			children: [/* @__PURE__ */ jsx(ComboboxInput$1, {
+				placeholder,
+				className: cn(inputClassName),
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": fieldState?.invalid || void 0
+			}), /* @__PURE__ */ jsxs(ComboboxContent, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyText }), /* @__PURE__ */ jsx(ComboboxList, { children: (item) => {
+				if (!item) return null;
+				return /* @__PURE__ */ jsx(ComboboxItem, {
+					value: item,
+					disabled: item.disabled,
+					children: renderOption ? renderOption(item) : item.label
+				}, item.value);
+			} })] })]
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderCombobox(propValue, void 0, disabled),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderCombobox(field.value, field, disabled, fieldState),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/slug-field.tsx
+/**
+* Generates a URL-friendly slug from a string
+*/
+function generateSlug(text) {
+	if (!text) return "";
+	return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
+}
+/**
+* SlugField - URL slug input with auto-generation
+*
+* @example
+* ```tsx
+* <SlugField
+*   control={form.control}
+*   name="slug"
+*   label="URL Slug"
+*   sourceValue={form.watch("title")}
+*   description="This will be used in the page URL"
+*   required
+* />
+* ```
+*/
+function SlugField({ control, name, description, helperText, required, label, placeholder = "my-page-slug", disabled, sourceValue, onGenerate, className, inputClassName, labelClassName, onValueChange, value, onChange, error, ref }) {
+	const descriptionText = description || helperText;
+	const handleGenerate = (_currentValue, fieldOnChange) => {
+		const newSlug = onGenerate ? onGenerate(sourceValue || "") : generateSlug(sourceValue);
+		fieldOnChange?.(newSlug);
+		onValueChange?.(newSlug);
+	};
+	const renderInput = (fieldValue, fieldOnChange, isDisabled, fieldState) => {
+		return /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			ref,
+			id: name,
+			type: "text",
+			disabled: isDisabled,
+			placeholder,
+			value: fieldValue || "",
+			onChange: (e) => {
+				const newValue = e.target.value;
+				fieldOnChange?.(newValue);
+				onValueChange?.(newValue);
+			},
+			"aria-invalid": fieldState?.invalid,
+			"aria-describedby": [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0,
+			className: inputClassName
+		}), /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-end",
+			children: /* @__PURE__ */ jsxs(InputGroupButton, {
+				type: "button",
+				size: "sm",
+				onClick: () => handleGenerate(fieldValue, fieldOnChange),
+				disabled: isDisabled || !sourceValue,
+				title: "Generate slug from source",
+				children: [/* @__PURE__ */ jsx(Wand2, { className: "h-4 w-4" }), "Generate"]
+			})
+		})] });
+	};
+	if (control && name) return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderInput(field.value, field.onChange, disabled, fieldState),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+	const handleDirectChange = (newValue) => {
+		onChange?.({ target: { value: newValue } });
+		onValueChange?.(newValue);
+	};
+	return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderInput(value, handleDirectChange, disabled, { error }),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			}),
+			error && /* @__PURE__ */ jsx(FieldError$1, {
+				id: `${name}-error`,
+				errors: [error]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/form/form-error-summary.tsx
+const flattenErrors = (errors, prefix = "") => {
+	const flattened = [];
+	Object.entries(errors).forEach(([key, value]) => {
+		const path = prefix ? `${prefix}.${key}` : key;
+		if (value && typeof value === "object" && "message" in value) flattened.push({
+			field: path,
+			message: String(value.message)
+		});
+		else if (value && typeof value === "object") flattened.push(...flattenErrors(value, path));
+	});
+	return flattened;
+};
+/**
+* FormErrorSummary - Displays a summary of form validation errors
+*
+* Takes react-hook-form errors object and displays all errors in a list.
+* Automatically flattens nested errors for complex form structures.
+*/
+function FormErrorSummary({ errors, className, title = "Please fix the following errors:" }) {
+	if (!errors || Object.keys(errors).length === 0) return null;
+	const errorList = flattenErrors(errors);
+	if (errorList.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("bg-destructive/15 p-3 rounded-md border border-destructive/20", className),
+		children: [/* @__PURE__ */ jsx("h4", {
+			className: "text-sm font-medium text-destructive mb-2",
+			children: title
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "text-sm text-destructive space-y-1",
+			children: errorList.map(({ field, message }, index) => /* @__PURE__ */ jsxs("li", {
+				className: "flex items-start gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive",
+					children: "•"
+				}), /* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsxs("strong", { children: [field, ":"] }),
+					" ",
+					message
+				] })]
+			}, `${field}-${index}`))
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/form/date-range-filter.tsx
+/**
+* DateRangeFilter - A date range picker for filtering
+*
+* Features:
+* - Only applies filter when explicitly submitted
+* - Supports clearing filters
+* - Uses Popover to show calendar on click
+* - Configurable min/max dates
+*/
+function DateRangeFilter({ initialStartDate, initialEndDate, onFilter, onClear, className, buttonClassName, placeholder = "Pick a date range", minDate, maxDate, alignRight = true, numberOfMonths = 1 }) {
+	const [dateRange, setDateRange] = React$1.useState(initialStartDate || initialEndDate ? {
+		from: initialStartDate,
+		to: initialEndDate
+	} : void 0);
+	const [appliedRange, setAppliedRange] = React$1.useState(dateRange);
+	const [open, setOpen] = React$1.useState(false);
+	React$1.useEffect(() => {
+		const newRange = initialStartDate || initialEndDate ? {
+			from: initialStartDate,
+			to: initialEndDate
+		} : void 0;
+		setDateRange(newRange);
+		setAppliedRange(newRange);
+	}, [initialStartDate, initialEndDate]);
+	const handleApplyFilter = () => {
+		setAppliedRange(dateRange);
+		onFilter?.(dateRange?.from || null, dateRange?.to || null);
+		setOpen(false);
+	};
+	const handleClearFilter = (e) => {
+		e?.stopPropagation?.();
+		setDateRange(void 0);
+		setAppliedRange(void 0);
+		onClear?.();
+		setOpen(false);
+	};
+	const getDisplayText = () => {
+		if (!appliedRange?.from && !appliedRange?.to) return placeholder;
+		const formatDate = (date) => {
+			return date.toLocaleDateString("en-US", {
+				month: "short",
+				day: "numeric",
+				year: "numeric"
+			});
+		};
+		if (appliedRange.from && appliedRange.to) return `${formatDate(appliedRange.from)} - ${formatDate(appliedRange.to)}`;
+		if (appliedRange.from) return `From ${formatDate(appliedRange.from)}`;
+		if (appliedRange.to) return `Until ${formatDate(appliedRange.to)}`;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				className: cn("w-full justify-start font-normal", !(appliedRange?.from || appliedRange?.to) && "text-muted-foreground", buttonClassName),
+				children: [
+					/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+					getDisplayText(),
+					(appliedRange?.from || appliedRange?.to) && /* @__PURE__ */ jsx(X, {
+						className: "ml-auto h-4 w-4 opacity-50 hover:opacity-100",
+						onClick: handleClearFilter
+					})
+				]
+			}) }), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-auto p-0",
+				align: alignRight ? "end" : "start",
+				side: "bottom",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "p-3 space-y-4",
+					children: [/* @__PURE__ */ jsx(Calendar, {
+						mode: "range",
+						defaultMonth: dateRange?.from,
+						selected: dateRange,
+						onSelect: setDateRange,
+						disabled: (date) => {
+							if (minDate && date < minDate) return true;
+							if (maxDate && date > maxDate) return true;
+							return false;
+						},
+						numberOfMonths,
+						initialFocus: true
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between gap-2 pt-2 border-t",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							onClick: () => handleClearFilter(),
+							children: "Clear"
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "sm",
+							onClick: handleApplyFilter,
+							disabled: !dateRange?.from && !dateRange?.to,
+							children: "Apply Filter"
+						})]
+					})]
+				})
+			})]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/date-range-input.tsx
+function DateRangePopover({ dateRange, placeholder, disabled, buttonClassName, calendarClassName, allowClear, showBadge, Icon, formatDateRange, isDateDisabled, handleDateRangeSelect, handleClear, minDate, maxDate, ariaDescribedBy, ariaInvalid }) {
+	const hasValue = dateRange?.from || dateRange?.to;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full",
+		children: [/* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			disabled,
+			variant: "outline",
+			"aria-invalid": ariaInvalid || void 0,
+			"aria-describedby": ariaDescribedBy,
+			className: cn("w-full justify-start gap-2 font-normal", !hasValue && "text-muted-foreground", hasValue && allowClear && "pr-10", ariaInvalid && "border-destructive", buttonClassName),
+			children: [/* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }), hasValue ? /* @__PURE__ */ jsxs("span", {
+				className: "flex-1 truncate text-left",
+				children: [formatDateRange(dateRange), showBadge && dateRange?.from && dateRange?.to && (() => {
+					const from = dateRange.from instanceof Date ? dateRange.from : new Date(dateRange.from);
+					const to = dateRange.to instanceof Date ? dateRange.to : new Date(dateRange.to);
+					const days = Math.ceil((to.getTime() - from.getTime()) / (1e3 * 60 * 60 * 24)) + 1;
+					return /* @__PURE__ */ jsxs("span", {
+						className: "ml-2 text-xs bg-secondary text-secondary-foreground py-0.5 px-2 rounded-full",
+						children: [
+							days,
+							" ",
+							days === 1 ? "day" : "days"
+						]
+					});
+				})()]
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "text-left",
+				children: placeholder
+			})]
+		}) }), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: cn("w-auto p-0", calendarClassName),
+			align: "start",
+			children: [/* @__PURE__ */ jsx(Calendar, {
+				mode: "range",
+				selected: dateRange,
+				onSelect: handleDateRangeSelect,
+				disabled: isDateDisabled,
+				initialFocus: true,
+				...minDate && { fromDate: minDate },
+				...maxDate && { toDate: maxDate }
+			}), /* @__PURE__ */ jsx("div", {
+				className: "p-3 border-t border-border",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: handleClear,
+					disabled: !hasValue,
+					className: "w-full",
+					type: "button",
+					children: "Clear Date Range"
+				})
+			})]
+		})] }), hasValue && allowClear && !disabled && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleClear,
+			className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-sm hover:bg-muted transition-colors",
+			"aria-label": "Clear date range",
+			children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-muted-foreground hover:text-foreground" })
+		})]
+	});
+}
+const defaultTransform = {
+	input: (value) => value ? {
+		from: value.from ? new Date(value.from) : void 0,
+		to: value.to ? new Date(value.to) : void 0
+	} : {
+		from: void 0,
+		to: void 0
+	},
+	output: (range) => ({
+		from: range?.from ? range.from instanceof Date ? range.from.toISOString() : range.from : void 0,
+		to: range?.to ? range.to instanceof Date ? range.to.toISOString() : range.to : void 0
+	})
+};
+/**
+* DateRangeInput - Date range picker with react-hook-form integration
+*
+* @example
+* ```tsx
+* <DateRangeInput
+*   control={control}
+*   name="dateRange"
+*   label="Select Dates"
+*   placeholder="Pick a date range"
+* />
+* ```
+*/
+function DateRangeInput({ control, name, label, description, placeholder = "Select date range", required, disabled, className, labelClassName, buttonClassName, calendarClassName, minDate, maxDate, disabledDates, disabledDays, onValueChange, validateDateRange, clearErrors, descriptionComponent, allowClear = true, showBadge = false, Icon = CalendarIcon, transform = defaultTransform }) {
+	const [localDateRange, setLocalDateRange] = useState({
+		from: void 0,
+		to: void 0
+	});
+	const formatDateRange = (range) => {
+		if (!range || !range.from && !range.to) return "";
+		const fromDate = range.from instanceof Date ? range.from : range.from ? new Date(range.from) : null;
+		const toDate = range.to instanceof Date ? range.to : range.to ? new Date(range.to) : null;
+		const fromFormatted = fromDate && isValid(fromDate) ? format(fromDate, "MMM d") : "";
+		const toFormatted = toDate && isValid(toDate) ? format(toDate, "MMM d") : "";
+		if (fromFormatted && toFormatted) return `${fromFormatted} - ${toFormatted}`;
+		else if (fromFormatted) return `From ${fromFormatted}`;
+		else if (toFormatted) return `Until ${toFormatted}`;
+		return "";
+	};
+	const isDateDisabled = (date) => {
+		if (!date || !isValid(date)) return true;
+		if (disabled) return true;
+		if (minDate && date < minDate) return true;
+		if (maxDate && date > maxDate) return true;
+		if (disabledDates?.some((d) => d.getTime() === date.getTime())) return true;
+		if (disabledDays?.includes(date.getDay())) return true;
+		return false;
+	};
+	const handleDateRangeSelect = (range, field) => {
+		if (disabled) return;
+		const safeRange = range || {
+			from: void 0,
+			to: void 0
+		};
+		if (validateDateRange && !validateDateRange(safeRange)) return;
+		if (field) {
+			const transformedValue = transform.output(safeRange);
+			field.onChange(transformedValue);
+		} else setLocalDateRange(safeRange);
+		onValueChange?.(safeRange);
+		if (clearErrors && name) clearErrors(name);
+	};
+	const handleClear = (field, e) => {
+		e.stopPropagation();
+		const emptyRange = {
+			from: void 0,
+			to: void 0
+		};
+		if (field) field.onChange(emptyRange);
+		else setLocalDateRange(emptyRange);
+		onValueChange?.(emptyRange);
+		if (clearErrors && name) clearErrors(name);
+	};
+	if (control) return /* @__PURE__ */ jsx(Controller, {
+		control,
+		name,
+		render: ({ field, fieldState }) => {
+			const dateRange = transform.input(field.value);
+			return /* @__PURE__ */ jsxs(Field, {
+				className: cn("w-full", className),
+				"data-invalid": !!fieldState.error,
+				children: [
+					label && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 mb-2",
+						children: [/* @__PURE__ */ jsxs(FieldLabel, {
+							className: cn("grow", labelClassName),
+							children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+								className: "text-destructive ml-1",
+								"aria-hidden": "true",
+								children: "*"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "(required)"
+							})] })]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground shrink-0",
+							children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+						})]
+					}),
+					/* @__PURE__ */ jsx(DateRangePopover, {
+						dateRange,
+						placeholder,
+						disabled,
+						buttonClassName,
+						calendarClassName,
+						allowClear,
+						showBadge,
+						Icon,
+						formatDateRange,
+						isDateDisabled,
+						handleDateRangeSelect: (range) => handleDateRangeSelect(range, field),
+						handleClear: (e) => handleClear(field, e),
+						minDate,
+						maxDate,
+						ariaDescribedBy: [description ? `${name}-description` : void 0, fieldState.error ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0,
+						ariaInvalid: !!fieldState.error
+					}),
+					description && !descriptionComponent && /* @__PURE__ */ jsx(FieldDescription, {
+						id: `${name}-description`,
+						children: description
+					}),
+					descriptionComponent && /* @__PURE__ */ jsx("div", {
+						className: "text-sm text-muted-foreground",
+						children: descriptionComponent
+					}),
+					/* @__PURE__ */ jsx(FieldError$1, {
+						id: `${name}-error`,
+						errors: fieldState.error ? [fieldState.error] : void 0
+					})
+				]
+			});
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full", className),
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 mb-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cn("text-sm font-medium grow", labelClassName),
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground shrink-0",
+					children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" })
+				})]
+			}),
+			/* @__PURE__ */ jsx(DateRangePopover, {
+				dateRange: localDateRange,
+				placeholder,
+				disabled,
+				buttonClassName,
+				calendarClassName,
+				allowClear,
+				showBadge,
+				Icon,
+				formatDateRange,
+				isDateDisabled,
+				handleDateRangeSelect: (range) => handleDateRangeSelect(range),
+				handleClear: (e) => handleClear(null, e),
+				minDate,
+				maxDate
+			}),
+			description && /* @__PURE__ */ jsx("div", {
+				className: "text-sm text-muted-foreground mt-1",
+				children: description
+			}),
+			descriptionComponent && /* @__PURE__ */ jsx("div", {
+				className: "text-sm text-muted-foreground",
+				children: descriptionComponent
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/form/otp-input.tsx
+const DEFAULT_SEPARATORS = {
+	4: [1],
+	6: [2],
+	8: [3]
+};
+function buildGroups(length, separatorAfter) {
+	const separatorSet = new Set(separatorAfter);
+	const groups = [];
+	let current = [];
+	for (let i = 0; i < length; i++) {
+		current.push(i);
+		if (separatorSet.has(i) && i < length - 1) {
+			groups.push(current);
+			current = [];
+		}
+	}
+	if (current.length > 0) groups.push(current);
+	return groups;
+}
+/**
+* OTPInput - OTP/PIN code input with react-hook-form integration
+*
+* @example
+* ```tsx
+* <OTPInput
+*   control={form.control}
+*   name="otp"
+*   label="Verification Code"
+*   length={6}
+*   autoSubmit
+*   onComplete={(code) => verify(code)}
+* />
+* ```
+*/
+function OTPInput({ control, name, label, description, required, disabled, length = 6, separatorAfter, pattern, autoSubmit, value: propValue, onChange: propOnChange, onComplete, className, slotClassName }) {
+	const groups = buildGroups(length, separatorAfter ?? DEFAULT_SEPARATORS[length] ?? []);
+	const handleChange = useCallback((newValue, field) => {
+		if (field) field.onChange(newValue);
+		else propOnChange?.(newValue);
+		if (autoSubmit && newValue.length === length) onComplete?.(newValue);
+	}, [
+		propOnChange,
+		onComplete,
+		autoSubmit,
+		length
+	]);
+	const renderOTP = (currentValue, field, isDisabled, fieldState) => {
+		const ariaDescribedBy = [description ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0;
+		return /* @__PURE__ */ jsx(InputOTP, {
+			maxLength: length,
+			value: currentValue ?? "",
+			onChange: (v) => handleChange(v, field),
+			disabled: isDisabled,
+			pattern,
+			"aria-invalid": fieldState?.invalid || void 0,
+			"aria-describedby": ariaDescribedBy,
+			children: groups.map((group, gi) => /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1",
+				children: [gi > 0 && /* @__PURE__ */ jsx(InputOTPSeparator, {}), /* @__PURE__ */ jsx(InputOTPGroup, { children: group.map((idx) => /* @__PURE__ */ jsx(InputOTPSlot, {
+					index: idx,
+					className: slotClassName
+				}, idx)) })]
+			}, gi))
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderOTP(propValue, void 0, disabled),
+			description && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: description
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderOTP(field.value, field, disabled, fieldState),
+				description && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: description
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/multi-select.tsx
+/**
+* MultiSelect - Chips-based multi-select with Base UI Combobox
+*
+* @example
+* ```tsx
+* <MultiSelect
+*   control={form.control}
+*   name="tags"
+*   label="Tags"
+*   items={[
+*     { value: "react", label: "React" },
+*     { value: "vue", label: "Vue" },
+*   ]}
+*   maxSelections={5}
+* />
+* ```
+*/
+function MultiSelect({ control, name, label, placeholder = "Select...", emptyText = "No items found.", description, helperText, required, disabled, items = [], groups, maxSelections, clearable = true, className, labelClassName, inputClassName, renderOption, value: propValue, onChange: propOnChange, onValueChange }) {
+	const descriptionText = description || helperText;
+	const allItems = useMemo(() => {
+		if (groups) return groups.flatMap((g) => g.items);
+		return items;
+	}, [items, groups]);
+	const lookup = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const item of allItems) map.set(item.value, item);
+		return map;
+	}, [allItems]);
+	const handleValueChange = useCallback((newItems, field) => {
+		const values = newItems.map((i) => i.value);
+		if (field) field.onChange(values);
+		else propOnChange?.(values);
+		onValueChange?.(values);
+	}, [propOnChange, onValueChange]);
+	const renderMultiSelect = (currentValue, field, isDisabled, error) => {
+		const selectedValues = currentValue ?? [];
+		const selectedItems = selectedValues.map((v) => lookup.get(v)).filter(Boolean);
+		const atMax = maxSelections != null && selectedValues.length >= maxSelections;
+		return /* @__PURE__ */ jsxs(Combobox, {
+			multiple: true,
+			items: allItems,
+			value: selectedItems,
+			onValueChange: (items) => handleValueChange(items, field),
+			disabled: isDisabled,
+			children: [/* @__PURE__ */ jsx(MultiSelectChips, {
+				selectedItems,
+				placeholder,
+				inputClassName,
+				disabled: isDisabled,
+				atMax,
+				clearable,
+				onClear: () => handleValueChange([], field),
+				error,
+				ariaDescribedBy: [descriptionText ? `${name}-description` : void 0, error ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0
+			}), /* @__PURE__ */ jsx(MultiSelectDropdown, {
+				groups,
+				items,
+				emptyText,
+				renderOption,
+				selectedValues,
+				atMax
+			})]
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderMultiSelect(propValue, void 0, disabled),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderMultiSelect(field.value, field, disabled, fieldState.invalid),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+function MultiSelectChips({ selectedItems, placeholder, inputClassName, disabled, atMax, clearable, onClear, error, ariaDescribedBy }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs(ComboboxChips, {
+			ref: useComboboxAnchor(),
+			"aria-describedby": ariaDescribedBy,
+			className: cn("min-h-[2.5rem] flex-wrap", error && "border-destructive", inputClassName),
+			children: [selectedItems.map((item) => /* @__PURE__ */ jsx(ComboboxChip, {
+				value: item,
+				showRemove: true,
+				children: item.label
+			}, item.value)), /* @__PURE__ */ jsx(ComboboxChipsInput, {
+				placeholder: selectedItems.length === 0 ? placeholder : "",
+				disabled: disabled || atMax
+			})]
+		}), clearable && selectedItems.length > 0 && !disabled && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onClear,
+			className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground/60 hover:text-foreground transition-colors",
+			"aria-label": "Clear all",
+			children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+		})]
+	});
+}
+function MultiSelectDropdown({ groups, items, emptyText, renderOption, selectedValues, atMax }) {
+	return /* @__PURE__ */ jsxs(ComboboxContent, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyText }), /* @__PURE__ */ jsx(ComboboxList, { children: groups ? groups.map((group) => /* @__PURE__ */ jsxs(ComboboxGroup, { children: [/* @__PURE__ */ jsx(ComboboxLabel, { children: group.label }), group.items.map((item) => /* @__PURE__ */ jsx(ComboboxItem, {
+		value: item,
+		disabled: item.disabled || atMax && !selectedValues.includes(item.value),
+		children: renderOption ? renderOption(item) : item.label
+	}, item.value))] }, group.label)) : (item) => {
+		if (!item) return null;
+		return /* @__PURE__ */ jsx(ComboboxItem, {
+			value: item,
+			disabled: item.disabled || atMax && !selectedValues.includes(item.value),
+			children: renderOption ? renderOption(item) : item.label
+		}, item.value);
+	} })] });
+}
+
+//#endregion
+//#region src/components/form/async-combobox.tsx
+const noFilter$1 = (items) => items;
+/**
+* AsyncCombobox - Searchable select with debounced async search
+*
+* @example
+* ```tsx
+* <AsyncCombobox
+*   control={form.control}
+*   name="city"
+*   label="City"
+*   onSearch={async (q) => {
+*     const res = await fetch(`/api/cities?search=${q}`);
+*     return res.json();
+*   }}
+*   placeholder="Search cities..."
+* />
+* ```
+*/
+function AsyncCombobox({ control, name, label, placeholder = "Search...", emptyText = "No results found.", description, helperText, required, disabled, onSearch, debounceMs = 300, minChars = 1, initialItems = [], isLoading: externalLoading, hasMore, onLoadMore, className, labelClassName, inputClassName, renderOption, value: propValue, onChange: propOnChange, onValueChange }) {
+	const descriptionText = description || helperText;
+	const [items, setItems] = useState(initialItems);
+	const [internalLoading, setInternalLoading] = useState(false);
+	const resolvedMapRef = useRef(/* @__PURE__ */ new Map());
+	const requestIdRef = useRef(0);
+	useEffect(() => {
+		for (const item of initialItems) resolvedMapRef.current.set(item.value, item);
+	}, [initialItems]);
+	const loading = internalLoading || externalLoading;
+	const debouncedSearch = useDebouncedCallback(async (query) => {
+		if (query.length < minChars) {
+			setItems(initialItems);
+			setInternalLoading(false);
+			return;
+		}
+		const id = ++requestIdRef.current;
+		try {
+			const results = await onSearch(query);
+			if (id !== requestIdRef.current) return;
+			for (const item of results) resolvedMapRef.current.set(item.value, item);
+			setItems(results);
+		} catch {
+			if (id !== requestIdRef.current) return;
+			setItems([]);
+		} finally {
+			if (id === requestIdRef.current) setInternalLoading(false);
+		}
+	}, debounceMs);
+	const handleInputChange = useCallback((e) => {
+		const query = e.target.value;
+		if (query.length >= minChars) {
+			setInternalLoading(true);
+			debouncedSearch(query);
+		} else setItems(initialItems);
+	}, [
+		minChars,
+		debouncedSearch,
+		initialItems
+	]);
+	const handleValueChange = useCallback((newItem, field) => {
+		const val = newItem?.value ?? "";
+		if (field) field.onChange(val);
+		else propOnChange?.(val);
+		onValueChange?.(val);
+	}, [propOnChange, onValueChange]);
+	const renderCombobox = (currentValue, field, isDisabled, fieldState) => {
+		const ariaDescribedBy = [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0;
+		return /* @__PURE__ */ jsxs(Combobox, {
+			items,
+			value: currentValue ? resolvedMapRef.current.get(currentValue) ?? items.find((i) => i.value === currentValue) ?? null : null,
+			onValueChange: (item) => handleValueChange(item, field),
+			disabled: isDisabled,
+			filter: noFilter$1,
+			children: [/* @__PURE__ */ jsx(ComboboxInput$1, {
+				placeholder,
+				className: cn(inputClassName),
+				onInput: handleInputChange,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": fieldState?.invalid || void 0
+			}), /* @__PURE__ */ jsx(ComboboxContent, { children: loading ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center py-6",
+				children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" })
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyText }),
+				/* @__PURE__ */ jsx(ComboboxList, { children: (item) => {
+					if (!item) return null;
+					return /* @__PURE__ */ jsx(ComboboxItem, {
+						value: item,
+						disabled: item.disabled,
+						children: renderOption ? renderOption(item) : item.label
+					}, item.value);
+				} }),
+				hasMore && onLoadMore && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onLoadMore,
+					className: "w-full py-2 text-center text-sm text-primary hover:bg-accent transition-colors",
+					children: "Load more..."
+				})
+			] }) })]
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderCombobox(propValue, void 0, disabled),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderCombobox(field.value, field, disabled, fieldState),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/async-multi-select.tsx
+const noFilter = (items) => items;
+/**
+* AsyncMultiSelect - Async search + chips-based multi-select
+*
+* @example
+* ```tsx
+* <AsyncMultiSelect
+*   control={form.control}
+*   name="teamMembers"
+*   label="Team Members"
+*   onSearch={async (q) => {
+*     const res = await fetch(`/api/users?search=${q}`);
+*     const users = await res.json();
+*     return users.map(u => ({ value: u.id, label: u.name }));
+*   }}
+*   maxSelections={5}
+* />
+* ```
+*/
+function AsyncMultiSelect({ control, name, label, placeholder = "Search...", emptyText = "No results found.", description, helperText, required, disabled, onSearch, debounceMs = 300, minChars = 1, initialItems = [], isLoading: externalLoading, maxSelections, clearable = true, className, labelClassName, inputClassName, renderOption, value: propValue, onChange: propOnChange, onValueChange }) {
+	const descriptionText = description || helperText;
+	const [items, setItems] = useState(initialItems);
+	const [internalLoading, setInternalLoading] = useState(false);
+	const resolvedMapRef = useRef(/* @__PURE__ */ new Map());
+	const requestIdRef = useRef(0);
+	useEffect(() => {
+		for (const item of initialItems) resolvedMapRef.current.set(item.value, item);
+	}, [initialItems]);
+	const loading = internalLoading || externalLoading;
+	const debouncedSearch = useDebouncedCallback(async (query) => {
+		if (query.length < minChars) {
+			setItems(initialItems);
+			setInternalLoading(false);
+			return;
+		}
+		const id = ++requestIdRef.current;
+		try {
+			const results = await onSearch(query);
+			if (id !== requestIdRef.current) return;
+			for (const item of results) resolvedMapRef.current.set(item.value, item);
+			setItems(results);
+		} catch {
+			if (id !== requestIdRef.current) return;
+			setItems([]);
+		} finally {
+			if (id === requestIdRef.current) setInternalLoading(false);
+		}
+	}, debounceMs);
+	const handleInputChange = useCallback((e) => {
+		const query = e.target.value;
+		if (query.length >= minChars) {
+			setInternalLoading(true);
+			debouncedSearch(query);
+		} else setItems(initialItems);
+	}, [
+		minChars,
+		debouncedSearch,
+		initialItems
+	]);
+	const handleValueChange = useCallback((newItems, field) => {
+		const values = newItems.map((i) => i.value);
+		if (field) field.onChange(values);
+		else propOnChange?.(values);
+		onValueChange?.(values);
+	}, [propOnChange, onValueChange]);
+	const renderMultiSelect = (currentValue, field, isDisabled, error) => {
+		const selectedValues = currentValue ?? [];
+		const selectedItems = selectedValues.map((v) => resolvedMapRef.current.get(v)).filter(Boolean);
+		const atMax = maxSelections != null && selectedValues.length >= maxSelections;
+		return /* @__PURE__ */ jsxs(Combobox, {
+			multiple: true,
+			items,
+			value: selectedItems,
+			onValueChange: (items) => handleValueChange(items, field),
+			disabled: isDisabled,
+			filter: noFilter,
+			children: [/* @__PURE__ */ jsx(AsyncChipsArea, {
+				selectedItems,
+				placeholder,
+				inputClassName,
+				disabled: isDisabled,
+				atMax,
+				clearable,
+				onClear: () => handleValueChange([], field),
+				onInputChange: handleInputChange,
+				error,
+				ariaDescribedBy: [descriptionText ? `${name}-description` : void 0, error ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0
+			}), /* @__PURE__ */ jsx(ComboboxContent, { children: loading ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center py-6",
+				children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" })
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyText }), /* @__PURE__ */ jsx(ComboboxList, { children: (item) => {
+				if (!item) return null;
+				return /* @__PURE__ */ jsx(ComboboxItem, {
+					value: item,
+					disabled: item.disabled || atMax && !selectedValues.includes(item.value),
+					children: renderOption ? renderOption(item) : item.label
+				}, item.value);
+			} })] }) })]
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderMultiSelect(propValue, void 0, disabled),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderMultiSelect(field.value, field, disabled, fieldState.invalid),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+function AsyncChipsArea({ selectedItems, placeholder, inputClassName, disabled, atMax, clearable, onClear, onInputChange, error, ariaDescribedBy }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs(ComboboxChips, {
+			ref: useComboboxAnchor(),
+			"aria-describedby": ariaDescribedBy,
+			className: cn("min-h-[2.5rem] flex-wrap", error && "border-destructive", inputClassName),
+			children: [selectedItems.map((item) => /* @__PURE__ */ jsx(ComboboxChip, {
+				value: item,
+				showRemove: true,
+				children: item.label
+			}, item.value)), /* @__PURE__ */ jsx(ComboboxChipsInput, {
+				placeholder: selectedItems.length === 0 ? placeholder : "",
+				disabled: disabled || atMax,
+				onInput: onInputChange
+			})]
+		}), clearable && selectedItems.length > 0 && !disabled && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onClear,
+			className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground/60 hover:text-foreground transition-colors",
+			"aria-label": "Clear all",
+			children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/form/file-upload-input.tsx
+function formatFileSize(bytes) {
+	if (bytes === 0) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(1024));
+	return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+function validateFile(file, opts) {
+	if (opts.accept) {
+		if (!opts.accept.split(",").map((t) => t.trim()).some((type) => {
+			if (type.endsWith("/*")) return file.type.startsWith(type.replace("/*", "/"));
+			return file.type === type || file.name.endsWith(type);
+		})) return `File type ${file.type || "unknown"} not accepted`;
+	}
+	if (opts.maxFileSize && file.size > opts.maxFileSize) return `File too large (max ${formatFileSize(opts.maxFileSize)})`;
+	if (opts.minFileSize && file.size < opts.minFileSize) return `File too small (min ${formatFileSize(opts.minFileSize)})`;
+	return null;
+}
+function getFileIcon(file) {
+	if (file.type.startsWith("image/")) return FileImage;
+	if (file.type.startsWith("video/")) return FileVideo;
+	return FileIcon;
+}
+/**
+* FileUploadInput - Drag-and-drop file input with validation and preview
+*
+* @example
+* ```tsx
+* <FileUploadInput
+*   control={form.control}
+*   name="avatar"
+*   label="Profile Picture"
+*   accept="image/*"
+*   maxFileSize={5 * 1024 * 1024}
+*   onFilesAdded={(files) => startUpload(files)}
+*   uploadProgress={uploadProgress}
+* />
+* ```
+*/
+function FileUploadInput({ control, name, label, description, required, disabled, multiple = false, accept, maxFiles, maxFileSize, minFileSize, uploadProgress, uploadErrors, dropzoneText, dropzoneHint, showPreview = true, compact = false, onFilesAdded, onFileRemoved, className, dropzoneClassName, value: propValue, onChange: propOnChange, onValueChange }) {
+	const descriptionText = description;
+	const renderUpload = (currentFiles, fieldOnChange, isDisabled, error) => {
+		const ariaDescribedBy = [descriptionText ? `${name}-description` : void 0, error ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0;
+		return /* @__PURE__ */ jsx(FileUploadInternal, {
+			name,
+			disabled: isDisabled,
+			multiple,
+			accept,
+			maxFiles,
+			maxFileSize,
+			minFileSize,
+			uploadProgress,
+			uploadErrors,
+			dropzoneText,
+			dropzoneHint,
+			showPreview,
+			compact,
+			onFilesAdded,
+			onFileRemoved,
+			dropzoneClassName,
+			files: currentFiles ?? [],
+			onChange: (files) => {
+				if (fieldOnChange) fieldOnChange(files);
+				else propOnChange?.(files);
+				onValueChange?.(files);
+			},
+			error,
+			ariaDescribedBy
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderUpload(propValue, void 0, disabled),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderUpload(field.value, field.onChange, disabled, fieldState.invalid),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+function FileUploadInternal({ name, disabled, multiple, accept, maxFiles, maxFileSize, minFileSize, uploadProgress, uploadErrors, dropzoneText, dropzoneHint, showPreview, compact, onFilesAdded, onFileRemoved, dropzoneClassName, files, onChange, error, ariaDescribedBy }) {
+	const [isDragOver, setIsDragOver] = useState(false);
+	const inputRef = useRef(null);
+	const previewUrlsRef = useRef(/* @__PURE__ */ new Map());
+	useEffect(() => {
+		return () => {
+			for (const url of previewUrlsRef.current.values()) URL.revokeObjectURL(url);
+		};
+	}, []);
+	const getPreviewUrl = (file) => {
+		const key = `${file.name}-${file.size}-${file.lastModified}`;
+		if (!previewUrlsRef.current.has(key)) previewUrlsRef.current.set(key, URL.createObjectURL(file));
+		return previewUrlsRef.current.get(key);
+	};
+	const addFiles = useCallback((newFiles) => {
+		const validFiles = newFiles.filter((f) => !validateFile(f, {
+			accept,
+			maxFileSize,
+			minFileSize
+		}));
+		const maxAllowed = maxFiles ? maxFiles - files.length : validFiles.length;
+		const filesToAdd = validFiles.slice(0, Math.max(0, maxAllowed));
+		if (filesToAdd.length > 0) {
+			onChange(multiple ? [...files, ...filesToAdd] : filesToAdd.slice(0, 1));
+			onFilesAdded?.(filesToAdd);
+		}
+	}, [
+		files,
+		accept,
+		maxFileSize,
+		minFileSize,
+		maxFiles,
+		multiple,
+		onChange,
+		onFilesAdded
+	]);
+	const removeFile = useCallback((index) => {
+		const file = files[index];
+		onChange(files.filter((_, i) => i !== index));
+		if (file) onFileRemoved?.(file, index);
+	}, [
+		files,
+		onChange,
+		onFileRemoved
+	]);
+	const handleDrop = (e) => {
+		e.preventDefault();
+		setIsDragOver(false);
+		if (disabled) return;
+		addFiles(Array.from(e.dataTransfer.files));
+	};
+	const handleFileInput = (e) => {
+		if (e.target.files) {
+			addFiles(Array.from(e.target.files));
+			e.target.value = "";
+		}
+	};
+	const defaultText = multiple ? "Drop files here or click to browse" : "Drop a file here or click to browse";
+	const defaultHint = [
+		accept && `Accepted: ${accept}`,
+		maxFileSize && `Max: ${formatFileSize(maxFileSize)}`,
+		maxFiles && `Up to ${maxFiles} file${maxFiles > 1 ? "s" : ""}`
+	].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			role: "button",
+			tabIndex: disabled ? -1 : 0,
+			onClick: () => !disabled && inputRef.current?.click(),
+			onKeyDown: (e) => {
+				if ((e.key === "Enter" || e.key === " ") && !disabled) {
+					e.preventDefault();
+					inputRef.current?.click();
+				}
+			},
+			onDragOver: (e) => {
+				e.preventDefault();
+				if (!disabled) setIsDragOver(true);
+			},
+			onDragLeave: () => setIsDragOver(false),
+			onDrop: handleDrop,
+			className: cn("relative border-2 border-dashed rounded-lg transition-colors cursor-pointer", "hover:border-primary/50 hover:bg-muted/50", isDragOver && "border-primary bg-primary/5", error && "border-destructive", disabled && "opacity-50 cursor-not-allowed", compact ? "px-4 py-3" : "px-6 py-8", dropzoneClassName),
+			children: [/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "file",
+				accept,
+				multiple,
+				onChange: handleFileInput,
+				className: "sr-only",
+				disabled,
+				"aria-label": name,
+				"aria-invalid": error || void 0,
+				"aria-describedby": ariaDescribedBy
+			}), compact ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ jsx(Upload, { className: "h-4 w-4 text-muted-foreground shrink-0" }), /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-muted-foreground",
+					children: dropzoneText || defaultText
+				})]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-2 text-center",
+				children: [
+					/* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-muted-foreground" }),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium",
+						children: dropzoneText || defaultText
+					}),
+					(dropzoneHint || defaultHint) && /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: dropzoneHint || defaultHint
+					})
+				]
+			})]
+		}), files.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "space-y-2",
+			children: files.map((file, i) => {
+				const FileTypeIcon = getFileIcon(file);
+				const progress = uploadProgress?.[file.name];
+				const fileError = uploadErrors?.[file.name];
+				const isImage = showPreview && file.type.startsWith("image/");
+				return /* @__PURE__ */ jsxs("div", {
+					className: cn("flex items-center gap-3 rounded-md border p-2.5", fileError && "border-destructive/50 bg-destructive/5"),
+					children: [
+						isImage ? /* @__PURE__ */ jsx("img", {
+							src: getPreviewUrl(file),
+							alt: file.name,
+							className: "h-10 w-10 rounded object-cover shrink-0"
+						}) : /* @__PURE__ */ jsx(FileTypeIcon, { className: "h-8 w-8 text-muted-foreground shrink-0" }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex-1 min-w-0",
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "text-sm font-medium truncate",
+									children: file.name
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "text-xs text-muted-foreground",
+									children: formatFileSize(file.size)
+								}),
+								progress != null && /* @__PURE__ */ jsx(Progress, {
+									value: progress,
+									className: "mt-1.5 h-1"
+								}),
+								fileError && /* @__PURE__ */ jsx("p", {
+									className: "text-xs text-destructive mt-1",
+									children: fileError
+								})
+							]
+						}),
+						!disabled && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-sm",
+							className: "shrink-0 text-muted-foreground hover:text-destructive",
+							onClick: (e) => {
+								e.stopPropagation();
+								removeFile(i);
+							},
+							"aria-label": `Remove ${file.name}`,
+							children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+						})
+					]
+				}, `${file.name}-${file.size}-${i}`);
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/form/date-time-input.tsx
+function generateHourOptions(hourFormat) {
+	const hours = [];
+	if (hourFormat === 24) for (let h = 0; h < 24; h++) hours.push(String(h).padStart(2, "0"));
+	else for (let h = 1; h <= 12; h++) hours.push(String(h).padStart(2, "0"));
+	return hours;
+}
+function generateMinuteOptions(interval) {
+	const minutes = [];
+	for (let m = 0; m < 60; m += interval) minutes.push(String(m).padStart(2, "0"));
+	return minutes;
+}
+function getHour12(hour24) {
+	const period = hour24 >= 12 ? "PM" : "AM";
+	let hour12 = hour24 % 12;
+	if (hour12 === 0) hour12 = 12;
+	return {
+		hour12,
+		period
+	};
+}
+function toHour24(hour12, period) {
+	if (period === "AM") return hour12 === 12 ? 0 : hour12;
+	return hour12 === 12 ? 12 : hour12 + 12;
+}
+/**
+* DateTimeInput - Date + time picker with Popover and Calendar
+*
+* @example
+* ```tsx
+* <DateTimeInput
+*   control={form.control}
+*   name="scheduledAt"
+*   label="Schedule Date"
+*   mode="datetime"
+*   minDate={new Date()}
+*   timeSlotInterval={15}
+* />
+* ```
+*/
+function DateTimeInput({ control, name, label, description, required, disabled, placeholder, mode = "datetime", minDate, maxDate, timeSlotInterval = 30, hourFormat = 24, clearable = true, className, labelClassName, value: propValue, onChange: propOnChange, onValueChange }) {
+	const descriptionText = description;
+	const defaultPlaceholder = mode === "datetime" ? "Pick a date and time" : "Pick a date";
+	const renderDateTimePicker = (currentValue, fieldOnChange, isDisabled, error) => {
+		const ariaDescribedBy = [descriptionText ? `${name}-description` : void 0, error ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0;
+		return /* @__PURE__ */ jsx(DateTimePickerInternal, {
+			value: currentValue,
+			onChange: (v) => {
+				if (fieldOnChange) fieldOnChange(v);
+				else propOnChange?.(v);
+				onValueChange?.(v);
+			},
+			disabled: isDisabled,
+			placeholder: placeholder || defaultPlaceholder,
+			mode,
+			minDate,
+			maxDate,
+			timeSlotInterval,
+			hourFormat,
+			clearable,
+			error,
+			ariaDescribedBy
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderDateTimePicker(propValue, void 0, disabled),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderDateTimePicker(field.value, field.onChange, disabled, fieldState.invalid),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+function DateTimePickerInternal({ value, onChange, disabled, placeholder, mode, minDate, maxDate, timeSlotInterval, hourFormat, clearable, error, ariaDescribedBy }) {
+	const [open, setOpen] = useState(false);
+	const hourOptions = useMemo(() => generateHourOptions(hourFormat), [hourFormat]);
+	const minuteOptions = useMemo(() => generateMinuteOptions(timeSlotInterval), [timeSlotInterval]);
+	const handleDateSelect = useCallback((date) => {
+		if (!date) {
+			onChange(void 0);
+			if (mode === "date") setOpen(false);
+			return;
+		}
+		if (mode === "datetime" && value) onChange(set(date, {
+			hours: value.getHours(),
+			minutes: value.getMinutes(),
+			seconds: 0,
+			milliseconds: 0
+		}));
+		else if (mode === "datetime") onChange(set(date, {
+			hours: 12,
+			minutes: 0,
+			seconds: 0,
+			milliseconds: 0
+		}));
+		else {
+			onChange(date);
+			setOpen(false);
+		}
+	}, [
+		mode,
+		value,
+		onChange
+	]);
+	const handleHourChange = useCallback((hourStr) => {
+		if (!value) return;
+		const hour = parseInt(hourStr, 10);
+		onChange(set(value, { hours: hourFormat === 12 ? toHour24(hour, getHour12(value.getHours()).period) : hour }));
+	}, [
+		value,
+		hourFormat,
+		onChange
+	]);
+	const handleMinuteChange = useCallback((minuteStr) => {
+		if (!value) return;
+		onChange(set(value, { minutes: parseInt(minuteStr, 10) }));
+	}, [value, onChange]);
+	const handlePeriodChange = useCallback((period) => {
+		if (!value || hourFormat !== 12) return;
+		const { hour12 } = getHour12(value.getHours());
+		onChange(set(value, { hours: toHour24(hour12, period) }));
+	}, [
+		value,
+		hourFormat,
+		onChange
+	]);
+	const handleClear = (e) => {
+		e.stopPropagation();
+		onChange(void 0);
+	};
+	const disabledDates = useMemo(() => {
+		const constraints = [];
+		if (minDate) constraints.push({ before: minDate });
+		if (maxDate) constraints.push({ after: maxDate });
+		return constraints.length > 0 ? constraints : void 0;
+	}, [minDate, maxDate]);
+	const displayText = value ? mode === "datetime" ? format(value, hourFormat === 12 ? "MMM d, yyyy hh:mm a" : "MMM d, yyyy HH:mm") : format(value, "MMM d, yyyy") : null;
+	const currentHour = value ? hourFormat === 12 ? String(getHour12(value.getHours()).hour12).padStart(2, "0") : String(value.getHours()).padStart(2, "0") : void 0;
+	const currentMinute = value ? String(value.getMinutes()).padStart(2, "0") : void 0;
+	const currentPeriod = value ? getHour12(value.getHours()).period : void 0;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "outline",
+			disabled,
+			"aria-invalid": error || void 0,
+			"aria-describedby": ariaDescribedBy,
+			className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground", error && "border-destructive"),
+			children: [
+				/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+				displayText || placeholder,
+				clearable && value && !disabled && /* @__PURE__ */ jsx(X, {
+					className: "ml-auto h-4 w-4 opacity-50 hover:opacity-100",
+					onClick: handleClear
+				})
+			]
+		}) }), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-auto p-0",
+			align: "start",
+			children: [/* @__PURE__ */ jsx(Calendar, {
+				mode: "single",
+				selected: value,
+				onSelect: handleDateSelect,
+				defaultMonth: value,
+				disabled: disabledDates
+			}), mode === "datetime" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 p-3",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-sm text-muted-foreground shrink-0",
+						children: "Time:"
+					}),
+					/* @__PURE__ */ jsxs(Select, {
+						value: currentHour,
+						onValueChange: handleHourChange,
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							className: "w-[70px] h-8",
+							children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "HH" })
+						}), /* @__PURE__ */ jsx(SelectContent, { children: hourOptions.map((h) => /* @__PURE__ */ jsx(SelectItem, {
+							value: h,
+							children: h
+						}, h)) })]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-sm font-medium",
+						children: ":"
+					}),
+					/* @__PURE__ */ jsxs(Select, {
+						value: currentMinute,
+						onValueChange: handleMinuteChange,
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							className: "w-[70px] h-8",
+							children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "MM" })
+						}), /* @__PURE__ */ jsx(SelectContent, { children: minuteOptions.map((m) => /* @__PURE__ */ jsx(SelectItem, {
+							value: m,
+							children: m
+						}, m)) })]
+					}),
+					hourFormat === 12 && /* @__PURE__ */ jsxs(Select, {
+						value: currentPeriod,
+						onValueChange: handlePeriodChange,
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							className: "w-[70px] h-8",
+							children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "AM" })
+						}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
+							value: "AM",
+							children: "AM"
+						}), /* @__PURE__ */ jsx(SelectItem, {
+							value: "PM",
+							children: "PM"
+						})] })]
+					})
+				]
+			})] })]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/form/password-input.tsx
+/**
+* PasswordInput - Password field with visibility toggle
+*
+* Thin wrapper around FormInput. Inherits all FormInput features
+* (RHF integration, InputGroup, validation, transforms).
+*
+* @example
+* ```tsx
+* <PasswordInput
+*   control={form.control}
+*   name="password"
+*   label="Password"
+*   placeholder="Enter password"
+*   required
+* />
+* ```
+*/
+function PasswordInput({ showToggle = true, autoComplete = "current-password", ...props }) {
+	const [visible, setVisible] = useState(false);
+	return /* @__PURE__ */ jsx(FormInput, {
+		...props,
+		type: visible ? "text" : "password",
+		autoComplete,
+		addonRight: showToggle ? /* @__PURE__ */ jsx(InputGroupButton, {
+			type: "button",
+			size: "icon-xs",
+			"aria-label": visible ? "Hide password" : "Show password",
+			onClick: () => setVisible((v) => !v),
+			children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" })
+		}) : void 0
+	});
+}
+
+//#endregion
+//#region src/components/form/number-input.tsx
+/**
+* NumberInput - Numeric input with optional stepper buttons
+*
+* Features:
+* - +/- stepper buttons with min/max clamping
+* - Works with react-hook-form Controller
+* - Can be used standalone without form
+* - Native spinner hidden when stepper is shown
+*
+* @example
+* ```tsx
+* <NumberInput
+*   control={form.control}
+*   name="quantity"
+*   label="Quantity"
+*   min={1}
+*   max={100}
+*   step={1}
+* />
+* ```
+*/
+function NumberInput({ control, name, label, placeholder, description, helperText, required, disabled, min, max, step = 1, showStepper = true, value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, inputClassName }) {
+	const descriptionText = description || helperText;
+	const clamp = useCallback((val) => {
+		let result = val;
+		if (min !== void 0 && result < min) result = min;
+		if (max !== void 0 && result > max) result = max;
+		return result;
+	}, [min, max]);
+	const parseValue = (raw) => {
+		if (raw === "" || raw === null || raw === void 0) return void 0;
+		const n = Number(raw);
+		return isNaN(n) ? void 0 : n;
+	};
+	const emitChange = (value, fieldOnChange) => {
+		if (fieldOnChange) fieldOnChange(value);
+		else propOnChange?.(value);
+		onValueChange?.(value);
+	};
+	const handleInputChange = (e, fieldOnChange) => {
+		const raw = e.target.value;
+		if (raw === "" || raw === "-") {
+			if (raw === "") emitChange(void 0, fieldOnChange);
+			return;
+		}
+		const num = parseFloat(raw);
+		if (!isNaN(num)) emitChange(num, fieldOnChange);
+	};
+	const handleStep = (direction, currentValue, fieldOnChange) => {
+		emitChange(clamp((parseValue(currentValue) ?? min ?? 0) + direction * step), fieldOnChange);
+	};
+	const renderNumberInput = (currentValue, fieldOnChange, isDisabled, fieldState) => {
+		const displayValue = currentValue !== void 0 && currentValue !== null ? String(currentValue) : "";
+		const numValue = parseValue(currentValue);
+		const atMin = min !== void 0 && numValue !== void 0 && numValue <= min;
+		const atMax = max !== void 0 && numValue !== void 0 && numValue >= max;
+		const ariaDescribedBy = [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0;
+		const commonProps = {
+			id: name,
+			type: "number",
+			inputMode: "numeric",
+			value: displayValue,
+			onChange: (e) => handleInputChange(e, fieldOnChange),
+			disabled: isDisabled,
+			placeholder,
+			min,
+			max,
+			step,
+			"aria-invalid": fieldState?.invalid || void 0,
+			"aria-describedby": ariaDescribedBy
+		};
+		if (!showStepper) return /* @__PURE__ */ jsx(Input, {
+			...commonProps,
+			className: inputClassName
+		});
+		return /* @__PURE__ */ jsxs(InputGroup, {
+			"data-disabled": isDisabled,
+			children: [
+				/* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-start",
+					children: /* @__PURE__ */ jsx(InputGroupButton, {
+						type: "button",
+						size: "icon-xs",
+						disabled: isDisabled || atMin,
+						onClick: () => handleStep(-1, currentValue, fieldOnChange),
+						"aria-label": "Decrease",
+						children: /* @__PURE__ */ jsx(Minus, { className: "h-3.5 w-3.5" })
+					})
+				}),
+				/* @__PURE__ */ jsx(InputGroupInput, {
+					...commonProps,
+					className: cn("text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", inputClassName)
+				}),
+				/* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-end",
+					children: /* @__PURE__ */ jsx(InputGroupButton, {
+						type: "button",
+						size: "icon-xs",
+						disabled: isDisabled || atMax,
+						onClick: () => handleStep(1, currentValue, fieldOnChange),
+						"aria-label": "Increase",
+						children: /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" })
+					})
+				})
+			]
+		});
+	};
+	if (!control) return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-disabled": disabled,
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: name,
+				className: labelClassName,
+				children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-destructive ml-1",
+					"aria-hidden": "true",
+					children: "*"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "(required)"
+				})] })]
+			}),
+			renderNumberInput(propValue, void 0, disabled),
+			descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+				id: `${name}-description`,
+				children: descriptionText
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Controller, {
+		name,
+		control,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsxs(Field, {
+			className,
+			"data-disabled": disabled,
+			"data-invalid": fieldState.invalid,
+			children: [
+				label && /* @__PURE__ */ jsxs(FieldLabel, {
+					htmlFor: name,
+					className: labelClassName,
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-destructive ml-1",
+						"aria-hidden": "true",
+						children: "*"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "(required)"
+					})] })]
+				}),
+				renderNumberInput(field.value, field.onChange, disabled, fieldState),
+				descriptionText && /* @__PURE__ */ jsx(FieldDescription, {
+					id: `${name}-description`,
+					children: descriptionText
+				}),
+				fieldState.invalid && fieldState.error && /* @__PURE__ */ jsx(FieldError$1, {
+					id: `${name}-error`,
+					errors: [fieldState.error]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/form/form-section.tsx
+function renderIcon(icon) {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	if (typeof icon === "function") return /* @__PURE__ */ jsx(icon, { className: "h-4 w-4" });
+	return icon;
+}
+/**
+* FormSection - Organizes form fields into logical groups with variants
+*
+* @example
+* ```tsx
+* <FormSection title="Personal Info" variant="card" collapsible>
+*   <FormInput name="name" label="Name" />
+*   <FormInput name="email" label="Email" />
+* </FormSection>
+* ```
+*/
+function FormSection({ title, description, children, variant = "default", collapsible = false, defaultOpen = true, icon, className }) {
+	const iconEl = renderIcon(icon);
+	const header = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [iconEl && /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: iconEl
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 space-y-0.5",
+			children: [title && /* @__PURE__ */ jsx("h3", {
+				className: "text-base font-semibold",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: description
+			})]
+		})]
+	});
+	if (variant === "card") {
+		if (collapsible) return /* @__PURE__ */ jsxs("details", {
+			open: defaultOpen,
+			className: cn("group border rounded-lg", className),
+			children: [/* @__PURE__ */ jsxs("summary", {
+				className: "flex cursor-pointer list-none items-center justify-between px-6 py-4 [&::-webkit-details-marker]:hidden",
+				children: [header, /* @__PURE__ */ jsx("svg", {
+					className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180",
+					xmlns: "http://www.w3.org/2000/svg",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "px-6 pb-4",
+				children
+			})]
+		});
+		return /* @__PURE__ */ jsxs(Card, {
+			className: cn("border-muted", className),
+			children: [/* @__PURE__ */ jsxs(CardHeader, {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsxs(CardTitle, {
+					className: "text-lg flex items-center gap-2",
+					children: [iconEl && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: iconEl
+					}), title]
+				}), description && /* @__PURE__ */ jsx(CardDescription, {
+					className: "text-sm",
+					children: description
+				})]
+			}), /* @__PURE__ */ jsx(CardContent, { children })]
+		});
+	}
+	if (variant === "subtle") {
+		if (collapsible) return /* @__PURE__ */ jsxs("details", {
+			open: defaultOpen,
+			className: cn("group", className),
+			children: [/* @__PURE__ */ jsxs("summary", {
+				className: "flex cursor-pointer list-none items-center justify-between rounded-md px-0 py-2 hover:bg-muted/50 [&::-webkit-details-marker]:hidden",
+				children: [header, /* @__PURE__ */ jsx("svg", {
+					className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180",
+					xmlns: "http://www.w3.org/2000/svg",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "py-4",
+				children
+			})]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("space-y-4", className),
+			children: [(title || description) && /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [title && /* @__PURE__ */ jsxs("h3", {
+					className: "text-base font-semibold flex items-center gap-2",
+					children: [iconEl && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: iconEl
+					}), title]
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: description
+				})]
+			}), children]
+		});
+	}
+	if (collapsible) return /* @__PURE__ */ jsxs("details", {
+		open: defaultOpen,
+		className: cn("group border rounded-lg", className),
+		children: [/* @__PURE__ */ jsxs("summary", {
+			className: "flex cursor-pointer list-none items-center justify-between p-4 [&::-webkit-details-marker]:hidden",
+			children: [header, /* @__PURE__ */ jsx("svg", {
+				className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180",
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "p-4 pt-0",
+			children
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-4", className),
+		children: [(title || description) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "space-y-1.5",
+			children: [title && /* @__PURE__ */ jsxs("h3", {
+				className: "text-base font-semibold flex items-center gap-2",
+				children: [iconEl && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: iconEl
+				}), title]
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground leading-relaxed",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx(Separator, { className: "my-4" })] }), children]
+	});
+}
+const COLS_CLASS = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 md:grid-cols-2",
+	3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+	4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+};
+/**
+* FormGrid - Responsive grid layout for form fields
+*
+* @example
+* ```tsx
+* <FormGrid cols={2}>
+*   <FormInput name="firstName" label="First Name" />
+*   <FormInput name="lastName" label="Last Name" />
+* </FormGrid>
+* ```
+*/
+function FormGrid({ children, cols = 2, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-4", COLS_CLASS[cols] ?? COLS_CLASS[2], className),
+		children
+	});
+}
+
+//#endregion
+//#region src/components/form/form-field-array.tsx
+/**
+* FormFieldArray - Container for dynamic field arrays with add/remove
+*
+* @example
+* ```tsx
+* <FormFieldArray
+*   title="Team Members"
+*   onAdd={() => append({ name: "", role: "" })}
+*   itemCount={fields.length}
+*   maxItems={10}
+* >
+*   {fields.map((field, index) => (
+*     <FormFieldArrayItem
+*       key={field.id}
+*       title={`Member ${index + 1}`}
+*       onRemove={() => remove(index)}
+*     >
+*       <FormInput control={control} name={`members.${index}.name`} label="Name" />
+*     </FormFieldArrayItem>
+*   ))}
+* </FormFieldArray>
+* ```
+*/
+function FormFieldArray({ title, description, children, onAdd, addLabel = "Add Item", emptyMessage = "No items yet.", itemCount = 0, maxItems, className }) {
+	const canAdd = maxItems == null || itemCount < maxItems;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [title && /* @__PURE__ */ jsx("h4", {
+					className: "text-sm font-medium",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: description
+				})]
+			}), onAdd && canAdd && /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				onClick: onAdd,
+				children: [/* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }), addLabel]
+			})]
+		}), itemCount === 0 && emptyMessage ? /* @__PURE__ */ jsx("div", {
+			className: "text-center py-8 text-sm text-muted-foreground border border-dashed rounded-lg",
+			children: emptyMessage
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "space-y-3",
+			children
+		})]
+	});
+}
+/**
+* FormFieldArrayItem - Individual item within a FormFieldArray
+*/
+function FormFieldArrayItem({ children, onRemove, title, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative border rounded-lg p-4 space-y-4 bg-muted/20 hover:bg-muted/30 transition-colors", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-4 mb-2",
+			children: [title && /* @__PURE__ */ jsx("h5", {
+				className: "text-sm font-medium text-muted-foreground",
+				children: title
+			}), onRemove && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				className: "shrink-0 text-destructive hover:bg-destructive/10",
+				onClick: onRemove,
+				"aria-label": "Remove item",
+				children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+			})]
+		}), children]
+	});
+}
+
+//#endregion
+export { AsyncCombobox, AsyncMultiSelect, CheckboxInput, ComboboxInput, DateInput, DateRangeFilter, DateRangeInput, DateTimeInput, FileUploadInput, FormErrorSummary, FormFieldArray, FormFieldArrayItem, FormGrid, FormInput, FormSection, FormTextarea, MultiSelect, NumberInput, OTPInput, PasswordInput, RadioInput, SelectInput, SlugField, SwitchInput, TagChoiceInput, TagInput, generateSlug };