@classytic/fluid 0.2.1 → 0.3.2

package/dist/forms.d.mts

@@ -0,0 +1,1549 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { ComponentType, InputHTMLAttributes, ReactNode, Ref } from "react";
+import { LucideIcon } from "lucide-react";
+import { Control, FieldError, FieldPath, FieldValues } from "react-hook-form";
+
+//#region src/components/form/form-input.d.ts
+interface TransformFunctions {
+  input?: (value: unknown) => string;
+  output?: (value: string) => unknown;
+}
+interface FormInputProps<TFieldValues extends FieldValues = FieldValues> {
+  control?: Control<TFieldValues>;
+  name: FieldPath<TFieldValues> | string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  type?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  inputGroupClassName?: string;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  addonLeft?: ReactNode;
+  addonRight?: ReactNode;
+  transform?: TransformFunctions;
+  onValueChange?: (value: unknown) => void;
+  value?: string | number;
+  onChange?: (value: unknown) => void;
+  min?: number | string;
+  max?: number | string;
+  step?: number | string;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  autoComplete?: string;
+  autoFocus?: boolean;
+  inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
+  enterKeyHint?: InputHTMLAttributes<HTMLInputElement>["enterKeyHint"];
+}
+/**
+ * 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..."
+ * />
+ * ```
+ */
+declare function FormInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  description,
+  helperText,
+  required,
+  disabled,
+  readOnly,
+  type,
+  className,
+  labelClassName,
+  inputClassName,
+  inputGroupClassName,
+  iconLeft,
+  iconRight,
+  addonLeft,
+  addonRight,
+  onValueChange,
+  transform,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  minLength,
+  maxLength,
+  pattern,
+  autoComplete,
+  autoFocus,
+  inputMode,
+  enterKeyHint
+}: FormInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/form-textarea.d.ts
+interface FormTextareaProps<TFieldValues extends FieldValues = FieldValues> {
+  control?: Control<TFieldValues>;
+  name: FieldPath<TFieldValues> | string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  rows?: number;
+  value?: string;
+  onChange?: (value: string) => void;
+  onValueChange?: (value: string) => void;
+  className?: string;
+  labelClassName?: string;
+  textareaClassName?: string;
+  inputGroupClassName?: string;
+  iconLeft?: React$1.ReactNode;
+  iconRight?: React$1.ReactNode;
+  addonLeft?: React$1.ReactNode;
+  addonRight?: React$1.ReactNode;
+  minLength?: number;
+  maxLength?: number;
+  autoComplete?: string;
+  autoFocus?: boolean;
+}
+/**
+ * FormTextarea - Textarea with react-hook-form integration
+ *
+ * @example
+ * ```tsx
+ * <FormTextarea
+ *   control={form.control}
+ *   name="bio"
+ *   label="Biography"
+ *   placeholder="Tell us about yourself..."
+ *   rows={5}
+ * />
+ * ```
+ */
+declare function FormTextarea<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  helperText,
+  required,
+  disabled,
+  readOnly,
+  placeholder,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange,
+  className,
+  labelClassName,
+  textareaClassName,
+  inputGroupClassName,
+  iconLeft,
+  iconRight,
+  addonLeft,
+  addonRight,
+  rows,
+  minLength,
+  maxLength,
+  autoComplete,
+  autoFocus
+}: FormTextareaProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/select-input.d.ts
+interface SelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+}
+interface SelectOptionGroup {
+  label: string;
+  items: SelectOption[];
+}
+interface SelectInputProps<TFieldValues extends FieldValues = FieldValues> {
+  control?: Control<TFieldValues>;
+  name: FieldPath<TFieldValues> | string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  items?: SelectOption[];
+  groups?: SelectOptionGroup[];
+  allOption?: SelectOption;
+  valueKey?: string;
+  displayKey?: string;
+  value?: string | number;
+  onValueChange?: (value: string) => void;
+  className?: string;
+  labelClassName?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+  itemClassName?: string;
+  Icon?: React$1.ComponentType<{
+    className?: string;
+  }>;
+  defaultOpen?: boolean;
+  side?: "top" | "bottom" | "left" | "right";
+  sideOffset?: number;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+}
+/**
+ * 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
+ * />
+ * ```
+ */
+declare function SelectInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  items,
+  groups,
+  name,
+  label,
+  placeholder,
+  allOption,
+  description,
+  helperText,
+  required,
+  disabled,
+  className,
+  labelClassName,
+  triggerClassName,
+  contentClassName,
+  itemClassName,
+  Icon,
+  onValueChange,
+  value: propValue,
+  defaultOpen,
+  side,
+  sideOffset,
+  align,
+  alignOffset
+}: SelectInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/checkbox-input.d.ts
+interface CheckboxItem {
+  id: string;
+  label: string;
+  disabled?: boolean;
+}
+interface CheckboxInputProps<TFieldValues extends FieldValues = FieldValues> {
+  control?: Control<TFieldValues>;
+  name: FieldPath<TFieldValues> | string;
+  label?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  items?: CheckboxItem[];
+  value?: string[];
+  onChange?: (values: string[]) => void;
+  onValueChange?: (values: string[]) => void;
+  className?: string;
+  labelClassName?: string;
+  checkboxClassName?: string;
+  itemClassName?: string;
+  itemLabelClassName?: string;
+}
+/**
+ * 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" },
+ *   ]}
+ * />
+ * ```
+ */
+declare function CheckboxInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  helperText,
+  required,
+  disabled,
+  items,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange,
+  className,
+  labelClassName,
+  checkboxClassName,
+  itemClassName,
+  itemLabelClassName
+}: CheckboxInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/radio-input.d.ts
+interface RadioChoice {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+interface RadioInputProps<TFieldValues extends FieldValues = FieldValues> {
+  control?: Control<TFieldValues>;
+  name: FieldPath<TFieldValues> | string;
+  label?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  choices?: RadioChoice[];
+  items?: RadioChoice[];
+  orientation?: "vertical" | "horizontal";
+  value?: string;
+  onChange?: (value: string) => void;
+  onValueChange?: (value: string) => void;
+  className?: string;
+  labelClassName?: string;
+  radioGroupClassName?: string;
+  radioItemClassName?: string;
+  radioLabelClassName?: string;
+}
+/**
+ * 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"
+ * />
+ * ```
+ */
+declare function RadioInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  helperText,
+  required,
+  disabled,
+  choices,
+  items,
+  orientation,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange,
+  className,
+  labelClassName,
+  radioGroupClassName,
+  radioItemClassName,
+  radioLabelClassName
+}: RadioInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/switch-input.d.ts
+interface SwitchInputProps<TFieldValues extends FieldValues = FieldValues> {
+  control?: Control<TFieldValues>;
+  name: FieldPath<TFieldValues> | string;
+  label?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  orientation?: "horizontal" | "vertical";
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  onValueChange?: (value: boolean) => void;
+  className?: string;
+  labelClassName?: string;
+  switchClassName?: string;
+}
+/**
+ * SwitchInput - Toggle switch with react-hook-form integration
+ *
+ * @example
+ * ```tsx
+ * <SwitchInput
+ *   control={form.control}
+ *   name="notifications"
+ *   label="Enable notifications"
+ *   description="Receive email updates"
+ * />
+ * ```
+ */
+declare function SwitchInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  helperText,
+  required,
+  disabled,
+  orientation,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange,
+  className,
+  labelClassName,
+  switchClassName
+}: SwitchInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/date-input.d.ts
+type DateValue = Date | string | null | undefined;
+interface DateInputProps<TFieldValues extends FieldValues = FieldValues> {
+  control?: Control<TFieldValues>;
+  name: FieldPath<TFieldValues> | string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  minDate?: DateValue;
+  maxDate?: DateValue;
+  value?: DateValue;
+  onChange?: (date: Date | undefined) => void;
+  onValueChange?: (date: Date | undefined) => void;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  Icon?: React$1.ComponentType<{
+    className?: string;
+  }>;
+  allowClear?: boolean;
+}
+/**
+ * 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()}
+ * />
+ * ```
+ */
+declare function DateInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  helperText,
+  placeholder,
+  required,
+  disabled,
+  className,
+  labelClassName,
+  inputClassName,
+  minDate,
+  maxDate,
+  onValueChange,
+  value: propValue,
+  onChange: propOnChange,
+  Icon,
+  allowClear
+}: DateInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/tag-input.d.ts
+interface TagInputProps {
+  control?: Control<FieldValues>;
+  name: string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  maxTags?: number;
+  allowDuplicates?: boolean;
+  delimiter?: string;
+  suggestions?: string[];
+  suggestionLimit?: number;
+  value?: string[];
+  onChange?: (tags: string[]) => void;
+  onValueChange?: (tags: string[]) => void;
+  validateTag?: (tag: string) => boolean;
+  transformTag?: (tag: string) => string;
+  formatTag?: (tag: string) => string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  [key: string]: unknown;
+}
+/**
+ * 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"]}
+ * />
+ * ```
+ */
+declare function TagInput({
+  control,
+  name,
+  label,
+  description,
+  helperText,
+  placeholder,
+  required,
+  disabled,
+  className,
+  labelClassName,
+  inputClassName,
+  maxTags,
+  allowDuplicates,
+  suggestions,
+  suggestionLimit,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange,
+  delimiter,
+  validateTag,
+  transformTag,
+  formatTag,
+  ...props
+}: TagInputProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/tag-choice-input.d.ts
+interface TagChoiceItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+interface TagChoiceInputProps<TFieldValues extends FieldValues = FieldValues> {
+  control?: Control<TFieldValues>;
+  name: FieldPath<TFieldValues> | string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  items?: TagChoiceItem[];
+  value?: string[];
+  onValueChange?: (values: string[]) => void;
+  className?: string;
+}
+/**
+ * TagChoiceInput - Multi-select with inline tag display
+ *
+ * Selected items appear as badges inside the trigger area.
+ * The popover dropdown stays anchored without layout jumps.
+ */
+declare function TagChoiceInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  helperText,
+  placeholder,
+  required,
+  disabled,
+  className,
+  items,
+  value: propValue,
+  onValueChange
+}: TagChoiceInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+declare namespace TagChoiceInput {
+  var displayName: string;
+}
+//#endregion
+//#region src/components/form/combobox-input.d.ts
+interface ComboboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+interface ComboboxInputProps<TFieldValues extends FieldValues = FieldValues> {
+  control?: Control<TFieldValues>;
+  name: FieldPath<TFieldValues> | string;
+  label?: string;
+  placeholder?: string;
+  emptyText?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  items?: ComboboxOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  onValueChange?: (value: string) => void;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  renderOption?: (option: ComboboxOption) => ReactNode;
+}
+/**
+ * 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}
+ * />
+ * ```
+ */
+declare function ComboboxInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  emptyText,
+  description,
+  helperText,
+  required,
+  disabled,
+  items,
+  className,
+  labelClassName,
+  inputClassName,
+  onValueChange,
+  renderOption,
+  value: propValue,
+  onChange: propOnChange
+}: ComboboxInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/slug-field.d.ts
+interface SlugFieldProps {
+  control?: Control<FieldValues>;
+  name: string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  sourceValue?: string;
+  onGenerate?: (sourceValue: string) => string;
+  value?: string;
+  onChange?: (e: {
+    target: {
+      value: string;
+    };
+  }) => void;
+  onValueChange?: (value: string) => void;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  error?: FieldError;
+  ref?: Ref<HTMLInputElement>;
+}
+/**
+ * Generates a URL-friendly slug from a string
+ */
+declare function generateSlug(text: string | undefined): string;
+/**
+ * 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
+ * />
+ * ```
+ */
+declare function SlugField({
+  control,
+  name,
+  description,
+  helperText,
+  required,
+  label,
+  placeholder,
+  disabled,
+  sourceValue,
+  onGenerate,
+  className,
+  inputClassName,
+  labelClassName,
+  onValueChange,
+  value,
+  onChange,
+  error,
+  ref
+}: SlugFieldProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/form-error-summary.d.ts
+interface FormErrorSummaryProps {
+  /** Form errors object from react-hook-form */
+  errors?: Record<string, unknown>;
+  /** Additional CSS classes */
+  className?: string;
+  /** Custom title text */
+  title?: string;
+}
+/**
+ * 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.
+ */
+declare function FormErrorSummary({
+  errors,
+  className,
+  title
+}: FormErrorSummaryProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/components/form/date-range-filter.d.ts
+interface DateRange {
+  from?: Date;
+  to?: Date;
+}
+interface DateRangeFilterProps {
+  /** Initial start date */
+  initialStartDate?: Date;
+  /** Initial end date */
+  initialEndDate?: Date;
+  /** Callback when filter is applied (receives startDate, endDate) */
+  onFilter?: (startDate: Date | null, endDate: Date | null) => void;
+  /** Callback when filter is cleared */
+  onClear?: () => void;
+  /** Additional classes for the container */
+  className?: string;
+  /** Additional classes for trigger button */
+  buttonClassName?: string;
+  /** Placeholder text when no date selected */
+  placeholder?: string;
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Align popover to the right */
+  alignRight?: boolean;
+  /** Number of months to display */
+  numberOfMonths?: number;
+}
+/**
+ * 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
+ */
+declare function DateRangeFilter({
+  initialStartDate,
+  initialEndDate,
+  onFilter,
+  onClear,
+  className,
+  buttonClassName,
+  placeholder,
+  minDate,
+  maxDate,
+  alignRight,
+  numberOfMonths
+}: DateRangeFilterProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/date-range-input.d.ts
+interface DateRangeValue {
+  from?: Date | string;
+  to?: Date | string;
+}
+interface DateRangeInputProps<TFieldValues extends FieldValues = FieldValues> {
+  /** React Hook Form control */
+  control?: Control<TFieldValues>;
+  /** Field name for form registration */
+  name: FieldPath<TFieldValues> | string;
+  /** Field label */
+  label?: string;
+  /** Description text below the input */
+  description?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Additional className for the wrapper */
+  className?: string;
+  /** Additional className for the label */
+  labelClassName?: string;
+  /** Additional className for the button */
+  buttonClassName?: string;
+  /** Additional className for the calendar popover */
+  calendarClassName?: string;
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Array of disabled dates */
+  disabledDates?: Date[];
+  /** Array of disabled days (0-6, where 0 is Sunday) */
+  disabledDays?: number[];
+  /** Callback when value changes */
+  onValueChange?: (range: DateRangeValue) => void;
+  /** Custom validation function for date range */
+  validateDateRange?: (range: DateRangeValue) => boolean;
+  /** Function to clear form errors */
+  clearErrors?: (name: string) => void;
+  /** Custom description component */
+  descriptionComponent?: ReactNode;
+  /** Whether to show clear button */
+  allowClear?: boolean;
+  /** Whether to show badge with date range */
+  showBadge?: boolean;
+  /** Custom icon component */
+  Icon?: LucideIcon;
+  /** Transform functions for input/output */
+  transform?: {
+    input: (value: any) => DateRangeValue;
+    output: (range: DateRangeValue) => any;
+  };
+}
+/**
+ * DateRangeInput - Date range picker with react-hook-form integration
+ *
+ * @example
+ * ```tsx
+ * <DateRangeInput
+ *   control={control}
+ *   name="dateRange"
+ *   label="Select Dates"
+ *   placeholder="Pick a date range"
+ * />
+ * ```
+ */
+declare function DateRangeInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  placeholder,
+  required,
+  disabled,
+  className,
+  labelClassName,
+  buttonClassName,
+  calendarClassName,
+  minDate,
+  maxDate,
+  disabledDates,
+  disabledDays,
+  onValueChange,
+  validateDateRange,
+  clearErrors,
+  descriptionComponent,
+  allowClear,
+  showBadge,
+  Icon,
+  transform
+}: DateRangeInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/otp-input.d.ts
+interface OTPInputProps<T extends FieldValues = FieldValues> {
+  control?: Control<T>;
+  name: FieldPath<T> | string;
+  label?: string;
+  description?: string;
+  required?: boolean;
+  disabled?: boolean;
+  length?: 4 | 6 | 8;
+  separatorAfter?: number[];
+  pattern?: string;
+  autoSubmit?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+  className?: string;
+  slotClassName?: string;
+}
+/**
+ * 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)}
+ * />
+ * ```
+ */
+declare function OTPInput<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  required,
+  disabled,
+  length,
+  separatorAfter,
+  pattern,
+  autoSubmit,
+  value: propValue,
+  onChange: propOnChange,
+  onComplete,
+  className,
+  slotClassName
+}: OTPInputProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/multi-select.d.ts
+interface MultiSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+interface MultiSelectOptionGroup {
+  label: string;
+  items: MultiSelectOption[];
+}
+interface MultiSelectProps<T extends FieldValues = FieldValues> {
+  control?: Control<T>;
+  name: FieldPath<T> | string;
+  label?: string;
+  placeholder?: string;
+  emptyText?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  items?: MultiSelectOption[];
+  groups?: MultiSelectOptionGroup[];
+  maxSelections?: number;
+  clearable?: boolean;
+  value?: string[];
+  onChange?: (v: string[]) => void;
+  onValueChange?: (v: string[]) => void;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  renderOption?: (option: MultiSelectOption) => ReactNode;
+}
+/**
+ * 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}
+ * />
+ * ```
+ */
+declare function MultiSelect<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  emptyText,
+  description,
+  helperText,
+  required,
+  disabled,
+  items,
+  groups,
+  maxSelections,
+  clearable,
+  className,
+  labelClassName,
+  inputClassName,
+  renderOption,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange
+}: MultiSelectProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/async-combobox.d.ts
+interface AsyncComboboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+interface AsyncComboboxProps<T extends FieldValues = FieldValues> {
+  control?: Control<T>;
+  name: FieldPath<T> | string;
+  label?: string;
+  placeholder?: string;
+  emptyText?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  onSearch: (query: string) => Promise<AsyncComboboxOption[]>;
+  debounceMs?: number;
+  minChars?: number;
+  initialItems?: AsyncComboboxOption[];
+  isLoading?: boolean;
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+  value?: string;
+  onChange?: (v: string) => void;
+  onValueChange?: (v: string) => void;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  renderOption?: (option: AsyncComboboxOption) => ReactNode;
+}
+/**
+ * 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..."
+ * />
+ * ```
+ */
+declare function AsyncCombobox<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  emptyText,
+  description,
+  helperText,
+  required,
+  disabled,
+  onSearch,
+  debounceMs,
+  minChars,
+  initialItems,
+  isLoading: externalLoading,
+  hasMore,
+  onLoadMore,
+  className,
+  labelClassName,
+  inputClassName,
+  renderOption,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange
+}: AsyncComboboxProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/async-multi-select.d.ts
+interface AsyncMultiSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+interface AsyncMultiSelectProps<T extends FieldValues = FieldValues> {
+  control?: Control<T>;
+  name: FieldPath<T> | string;
+  label?: string;
+  placeholder?: string;
+  emptyText?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  onSearch: (query: string) => Promise<AsyncMultiSelectOption[]>;
+  debounceMs?: number;
+  minChars?: number;
+  initialItems?: AsyncMultiSelectOption[];
+  isLoading?: boolean;
+  maxSelections?: number;
+  clearable?: boolean;
+  value?: string[];
+  onChange?: (v: string[]) => void;
+  onValueChange?: (v: string[]) => void;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  renderOption?: (option: AsyncMultiSelectOption) => ReactNode;
+}
+/**
+ * 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}
+ * />
+ * ```
+ */
+declare function AsyncMultiSelect<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  emptyText,
+  description,
+  helperText,
+  required,
+  disabled,
+  onSearch,
+  debounceMs,
+  minChars,
+  initialItems,
+  isLoading: externalLoading,
+  maxSelections,
+  clearable,
+  className,
+  labelClassName,
+  inputClassName,
+  renderOption,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange
+}: AsyncMultiSelectProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/file-upload-input.d.ts
+interface FileUploadInputProps<T extends FieldValues = FieldValues> {
+  control?: Control<T>;
+  name: FieldPath<T> | string;
+  label?: string;
+  description?: string;
+  required?: boolean;
+  disabled?: boolean;
+  multiple?: boolean;
+  accept?: string;
+  maxFiles?: number;
+  maxFileSize?: number;
+  minFileSize?: number;
+  uploadProgress?: Record<string, number>;
+  uploadErrors?: Record<string, string>;
+  dropzoneText?: string;
+  dropzoneHint?: string;
+  showPreview?: boolean;
+  compact?: boolean;
+  onFilesAdded?: (files: File[]) => void;
+  onFileRemoved?: (file: File, index: number) => void;
+  value?: File[];
+  onChange?: (files: File[]) => void;
+  onValueChange?: (files: File[]) => void;
+  className?: string;
+  dropzoneClassName?: string;
+}
+/**
+ * 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}
+ * />
+ * ```
+ */
+declare function FileUploadInput<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  required,
+  disabled,
+  multiple,
+  accept,
+  maxFiles,
+  maxFileSize,
+  minFileSize,
+  uploadProgress,
+  uploadErrors,
+  dropzoneText,
+  dropzoneHint,
+  showPreview,
+  compact,
+  onFilesAdded,
+  onFileRemoved,
+  className,
+  dropzoneClassName,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange
+}: FileUploadInputProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/date-time-input.d.ts
+interface DateTimeInputProps<T extends FieldValues = FieldValues> {
+  control?: Control<T>;
+  name: FieldPath<T> | string;
+  label?: string;
+  description?: string;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  mode?: "date" | "datetime";
+  minDate?: Date;
+  maxDate?: Date;
+  timeSlotInterval?: 15 | 30 | 60;
+  hourFormat?: 12 | 24;
+  clearable?: boolean;
+  value?: Date;
+  onChange?: (v: Date | undefined) => void;
+  onValueChange?: (v: Date | undefined) => void;
+  className?: string;
+  labelClassName?: string;
+}
+/**
+ * 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}
+ * />
+ * ```
+ */
+declare function DateTimeInput<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  description,
+  required,
+  disabled,
+  placeholder,
+  mode,
+  minDate,
+  maxDate,
+  timeSlotInterval,
+  hourFormat,
+  clearable,
+  className,
+  labelClassName,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange
+}: DateTimeInputProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/password-input.d.ts
+interface PasswordInputProps<TFieldValues extends FieldValues = FieldValues> extends Omit<FormInputProps<TFieldValues>, "type" | "iconRight" | "addonRight"> {
+  /** Show eye toggle button (default: true) */
+  showToggle?: boolean;
+}
+/**
+ * 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
+ * />
+ * ```
+ */
+declare function PasswordInput<TFieldValues extends FieldValues = FieldValues>({
+  showToggle,
+  autoComplete,
+  ...props
+}: PasswordInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/number-input.d.ts
+interface NumberInputProps<TFieldValues extends FieldValues = FieldValues> {
+  control?: Control<TFieldValues>;
+  name: FieldPath<TFieldValues> | string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  showStepper?: boolean;
+  value?: number | string;
+  onChange?: (value: number | undefined) => void;
+  onValueChange?: (value: number | undefined) => void;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+}
+/**
+ * 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}
+ * />
+ * ```
+ */
+declare function NumberInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
+  placeholder,
+  description,
+  helperText,
+  required,
+  disabled,
+  min,
+  max,
+  step,
+  showStepper,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange,
+  className,
+  labelClassName,
+  inputClassName
+}: NumberInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/form-section.d.ts
+interface FormSectionProps {
+  title?: string;
+  description?: string;
+  children: ReactNode;
+  variant?: "default" | "card" | "subtle";
+  collapsible?: boolean;
+  defaultOpen?: boolean;
+  icon?: ReactNode | ComponentType<{
+    className?: string;
+  }>;
+  className?: string;
+}
+interface FormGridProps {
+  children: ReactNode;
+  cols?: 1 | 2 | 3 | 4;
+  className?: string;
+}
+/**
+ * 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>
+ * ```
+ */
+declare function FormSection({
+  title,
+  description,
+  children,
+  variant,
+  collapsible,
+  defaultOpen,
+  icon,
+  className
+}: FormSectionProps): react_jsx_runtime0.JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function FormGrid({
+  children,
+  cols,
+  className
+}: FormGridProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/form/form-field-array.d.ts
+interface FormFieldArrayProps {
+  title?: string;
+  description?: string;
+  children: ReactNode;
+  onAdd?: () => void;
+  addLabel?: string;
+  emptyMessage?: string;
+  itemCount?: number;
+  maxItems?: number;
+  className?: string;
+}
+interface FormFieldArrayItemProps {
+  children: ReactNode;
+  onRemove?: () => void;
+  index?: number;
+  title?: string;
+  className?: string;
+}
+/**
+ * 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>
+ * ```
+ */
+declare function FormFieldArray({
+  title,
+  description,
+  children,
+  onAdd,
+  addLabel,
+  emptyMessage,
+  itemCount,
+  maxItems,
+  className
+}: FormFieldArrayProps): react_jsx_runtime0.JSX.Element;
+/**
+ * FormFieldArrayItem - Individual item within a FormFieldArray
+ */
+declare function FormFieldArrayItem({
+  children,
+  onRemove,
+  title,
+  className
+}: FormFieldArrayItemProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AsyncCombobox, type AsyncComboboxOption, type AsyncComboboxProps, AsyncMultiSelect, type AsyncMultiSelectOption, type AsyncMultiSelectProps, CheckboxInput, type CheckboxInputProps, type CheckboxItem, ComboboxInput, type ComboboxInputProps, type ComboboxOption, DateInput, type DateInputProps, type DateRange, DateRangeFilter, type DateRangeFilterProps, DateRangeInput, type DateRangeInputProps, type DateRangeValue, DateTimeInput, type DateTimeInputProps, FileUploadInput, type FileUploadInputProps, FormErrorSummary, type FormErrorSummaryProps, FormFieldArray, FormFieldArrayItem, type FormFieldArrayItemProps, type FormFieldArrayProps, FormGrid, type FormGridProps, FormInput, type FormInputProps, FormSection, type FormSectionProps, FormTextarea, type FormTextareaProps, MultiSelect, type MultiSelectOption, type MultiSelectOptionGroup, type MultiSelectProps, NumberInput, type NumberInputProps, OTPInput, type OTPInputProps, PasswordInput, type PasswordInputProps, type RadioChoice, RadioInput, type RadioInputProps, SelectInput, type SelectInputProps, type SelectOption, type SelectOptionGroup, SlugField, type SlugFieldProps, SwitchInput, type SwitchInputProps, TagChoiceInput, type TagChoiceInputProps, type TagChoiceItem, TagInput, type TagInputProps, generateSlug };