@classytic/fluid 0.4.2 → 0.5.0

package/dist/forms.d.mts

@@ -1,318 +1,190 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { n as PhoneCountry } from "./phone-input-CLH_UjQZ.mjs";
 import * as React$1 from "react";
 import { ComponentType, InputHTMLAttributes, ReactNode, Ref } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 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;
+//#region src/components/form/async-combobox.d.ts
+interface AsyncComboboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
 }
-interface FormInputProps<TFieldValues extends FieldValues = FieldValues> {
-  control?: Control<TFieldValues>;
-  name: FieldPath<TFieldValues> | string;
+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;
-  readOnly?: boolean;
-  type?: string;
+  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;
-  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"];
+  renderOption?: (option: AsyncComboboxOption) => ReactNode;
 }
 /**
- * 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
+ * AsyncCombobox - Searchable select with debounced async search
  *
  * @example
  * ```tsx
- * // With react-hook-form
- * <FormInput
- *   control={form.control}
- *   name="email"
- *   type="email"
- *   label="Email"
- *   placeholder="user@example.com"
- *   required
- * />
- *
- * // With icon
- * <FormInput
+ * <AsyncCombobox
  *   control={form.control}
- *   name="search"
- *   iconLeft={<SearchIcon />}
- *   placeholder="Search..."
+ *   name="city"
+ *   label="City"
+ *   onSearch={async (q) => {
+ *     const res = await fetch(`/api/cities?search=${q}`);
+ *     return res.json();
+ *   }}
+ *   placeholder="Search cities..."
  * />
  * ```
  */
-declare function FormInput<TFieldValues extends FieldValues = FieldValues>({
+declare function AsyncCombobox<T extends FieldValues = FieldValues>({
   control,
   name,
   label,
   placeholder,
+  emptyText,
   description,
   helperText,
   required,
   disabled,
-  readOnly,
-  type,
+  onSearch,
+  debounceMs,
+  minChars,
+  initialItems,
+  isLoading: externalLoading,
+  hasMore,
+  onLoadMore,
   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;
+  renderOption,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange
+}: AsyncComboboxProps<T>): 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;
+//#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;
-  readOnly?: boolean;
-  rows?: number;
-  value?: string;
-  onChange?: (value: string) => void;
-  onValueChange?: (value: string) => void;
+  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;
-  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;
+  inputClassName?: string;
+  renderOption?: (option: AsyncMultiSelectOption) => ReactNode;
 }
 /**
- * FormTextarea - Textarea with react-hook-form integration
+ * AsyncMultiSelect - Async search + chips-based multi-select
  *
  * @example
  * ```tsx
- * <FormTextarea
+ * <AsyncMultiSelect
  *   control={form.control}
- *   name="bio"
- *   label="Biography"
- *   placeholder="Tell us about yourself..."
- *   rows={5}
+ *   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 FormTextarea<TFieldValues extends FieldValues = FieldValues>({
+declare function AsyncMultiSelect<T extends FieldValues = FieldValues>({
   control,
   name,
   label,
+  placeholder,
+  emptyText,
   description,
   helperText,
   required,
   disabled,
-  readOnly,
-  placeholder,
-  value: propValue,
-  onChange: propOnChange,
-  onValueChange,
+  onSearch,
+  debounceMs,
+  minChars,
+  initialItems,
+  isLoading: externalLoading,
+  maxSelections,
+  clearable,
   className,
   labelClassName,
-  textareaClassName,
-  inputGroupClassName,
-  iconLeft,
-  iconRight,
-  addonLeft,
-  addonRight,
-  rows,
-  minLength,
-  maxLength,
-  autoComplete,
-  autoFocus
-}: FormTextareaProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+  inputClassName,
+  renderOption,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange
+}: AsyncMultiSelectProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/form/select-input.d.ts
-interface SelectOption {
-  value: string | number;
+//#region src/components/form/checkbox-input.d.ts
+interface CheckboxItem {
+  id: string;
   label: string;
   disabled?: boolean;
 }
-interface SelectOptionGroup {
-  label: string;
-  items: SelectOption[];
-}
-interface SelectInputProps<TFieldValues extends FieldValues = FieldValues> {
+interface CheckboxInputProps<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;
+  items?: CheckboxItem[];
+  value?: string[];
+  onChange?: (values: string[]) => void;
+  onValueChange?: (values: string[]) => void;
   className?: string;
   labelClassName?: string;
-  triggerClassName?: string;
-  contentClassName?: string;
+  checkboxClassName?: string;
   itemClassName?: string;
-  Icon?: React$1.ComponentType<{
-    className?: string;
-  }>;
-  defaultOpen?: boolean;
-  side?: "top" | "bottom" | "left" | "right";
-  sideOffset?: number;
-  align?: "start" | "center" | "end";
-  alignOffset?: number;
+  itemLabelClassName?: string;
 }
 /**
- * SelectInput - Select dropdown with react-hook-form integration
+ * CheckboxInput - Checkbox group 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
+ * - Multiple checkbox items
+ * - Array value support
+ * - Can be used standalone
  *
  * @example
  * ```tsx
@@ -347,117 +219,80 @@ declare function CheckboxInput<TFieldValues extends FieldValues = FieldValues>({
   itemLabelClassName
 }: CheckboxInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/form/radio-input.d.ts
-interface RadioChoice {
+//#region src/components/form/combobox-input.d.ts
+interface ComboboxOption {
   value: string;
   label: string;
   disabled?: boolean;
 }
-interface RadioInputProps<TFieldValues extends FieldValues = FieldValues> {
+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;
-  choices?: RadioChoice[];
-  items?: RadioChoice[];
-  orientation?: "vertical" | "horizontal";
+  items?: ComboboxOption[];
   value?: string;
   onChange?: (value: string) => void;
   onValueChange?: (value: string) => void;
   className?: string;
   labelClassName?: string;
-  radioGroupClassName?: string;
-  radioItemClassName?: string;
-  radioLabelClassName?: string;
+  inputClassName?: string;
+  renderOption?: (option: ComboboxOption) => ReactNode;
 }
 /**
- * RadioInput - Radio group with react-hook-form integration
+ * 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
- * <RadioInput
+ * // With react-hook-form
+ * <ComboboxInput
  *   control={form.control}
- *   name="plan"
- *   label="Select Plan"
- *   choices={[
- *     { value: "free", label: "Free" },
- *     { value: "pro", label: "Pro" },
- *     { value: "enterprise", label: "Enterprise" },
+ *   name="country"
+ *   label="Country"
+ *   items={[
+ *     { value: "us", label: "United States" },
+ *     { value: "uk", label: "United Kingdom" },
  *   ]}
- *   orientation="horizontal"
+ *   placeholder="Select a country..."
  * />
- * ```
- */
-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"
+ * // Standalone
+ * <ComboboxInput
+ *   name="country"
+ *   label="Country"
+ *   items={items}
+ *   value={selectedCountry}
+ *   onValueChange={setSelectedCountry}
  * />
  * ```
  */
-declare function SwitchInput<TFieldValues extends FieldValues = FieldValues>({
+declare function ComboboxInput<TFieldValues extends FieldValues = FieldValues>({
   control,
   name,
   label,
+  placeholder,
+  emptyText,
   description,
   helperText,
   required,
   disabled,
-  orientation,
-  value: propValue,
-  onChange: propOnChange,
-  onValueChange,
+  items,
   className,
   labelClassName,
-  switchClassName
-}: SwitchInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+  inputClassName,
+  onValueChange,
+  renderOption,
+  value: propValue,
+  onChange: propOnChange
+}: ComboboxInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form/date-input.d.ts
 type DateValue = Date | string | null | undefined;
@@ -518,256 +353,281 @@ declare function DateInput<TFieldValues extends FieldValues = FieldValues>({
   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;
+//#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;
-  labelClassName?: string;
-  inputClassName?: string;
-  [key: string]: unknown;
+  /** 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;
 }
 /**
- * TagInput - Tag/chip input with react-hook-form integration
+ * DateRangeFilter - A date range picker for filtering
  *
- * @example
- * ```tsx
- * <TagInput
- *   control={form.control}
- *   name="tags"
- *   label="Tags"
- *   placeholder="Add tags..."
- *   maxTags={10}
- *   suggestions={["react", "typescript", "nextjs"]}
- * />
- * ```
+ * Features:
+ * - Only applies filter when explicitly submitted
+ * - Supports clearing filters
+ * - Uses Popover to show calendar on click
+ * - Configurable min/max dates
  */
-declare function TagInput({
-  control,
-  name,
-  label,
-  description,
-  helperText,
-  placeholder,
-  required,
-  disabled,
+declare function DateRangeFilter({
+  initialStartDate,
+  initialEndDate,
+  onFilter,
+  onClear,
   className,
-  labelClassName,
-  inputClassName,
-  maxTags,
-  allowDuplicates,
-  suggestions,
-  suggestionLimit,
-  value: propValue,
-  onChange: propOnChange,
-  onValueChange,
-  delimiter,
-  validateTag,
-  transformTag,
-  formatTag,
-  ...props
-}: TagInputProps): react_jsx_runtime0.JSX.Element;
+  buttonClassName,
+  placeholder,
+  minDate,
+  maxDate,
+  alignRight,
+  numberOfMonths
+}: DateRangeFilterProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/form/tag-choice-input.d.ts
-interface TagChoiceItem {
-  value: string;
-  label: string;
-  disabled?: boolean;
+//#region src/components/form/date-range-input.d.ts
+interface DateRangeValue {
+  from?: Date | string;
+  to?: Date | string;
 }
-interface TagChoiceInputProps<TFieldValues extends FieldValues = FieldValues> {
+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;
-  placeholder?: string;
+  /** Description text below the input */
   description?: string;
-  helperText?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the field is required */
   required?: boolean;
+  /** Whether the field is disabled */
   disabled?: boolean;
-  items?: TagChoiceItem[];
-  value?: string[];
-  onValueChange?: (values: string[]) => void;
+  /** 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;
+  };
 }
 /**
- * TagChoiceInput - Multi-select with inline tag display
+ * DateRangeInput - Date range picker with react-hook-form integration
  *
- * Selected items appear as badges inside the trigger area.
- * The popover dropdown stays anchored without layout jumps.
+ * @example
+ * ```tsx
+ * <DateRangeInput
+ *   control={control}
+ *   name="dateRange"
+ *   label="Select Dates"
+ *   placeholder="Pick a date range"
+ * />
+ * ```
  */
-declare function TagChoiceInput<TFieldValues extends FieldValues = FieldValues>({
+declare function DateRangeInput<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;
-}
+  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/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;
+//#region src/components/form/date-time-input.d.ts
+interface DateTimeInputProps<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?: ComboboxOption[];
-  value?: string;
-  onChange?: (value: string) => void;
-  onValueChange?: (value: string) => void;
+  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;
-  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`.
+ * DateTimeInput - Date + time picker with Popover and Calendar
  *
  * @example
  * ```tsx
- * // With react-hook-form
- * <ComboboxInput
+ * <DateTimeInput
  *   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}
+ *   name="scheduledAt"
+ *   label="Schedule Date"
+ *   mode="datetime"
+ *   minDate={new Date()}
+ *   timeSlotInterval={15}
  * />
  * ```
  */
-declare function ComboboxInput<TFieldValues extends FieldValues = FieldValues>({
+declare function DateTimeInput<T extends FieldValues = FieldValues>({
   control,
   name,
   label,
-  placeholder,
-  emptyText,
   description,
-  helperText,
   required,
   disabled,
-  items,
+  placeholder,
+  mode,
+  minDate,
+  maxDate,
+  timeSlotInterval,
+  hourFormat,
+  clearable,
   className,
   labelClassName,
-  inputClassName,
-  onValueChange,
-  renderOption,
   value: propValue,
-  onChange: propOnChange
-}: ComboboxInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+  onChange: propOnChange,
+  onValueChange
+}: DateTimeInputProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/form/slug-field.d.ts
-interface SlugFieldProps {
-  control?: Control<FieldValues>;
-  name: string;
+//#region src/components/form/file-upload-input/types.d.ts
+interface FileUploadInputProps<T extends FieldValues = FieldValues> {
+  control?: Control<T>;
+  name: FieldPath<T> | 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
+  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;
+}
+//#endregion
+//#region src/components/form/file-upload-input/file-upload-input.d.ts
+/**
+ * FileUploadInput - Drag-and-drop file input with validation and preview
+ *
+ * @example
+ * ```tsx
+ * <FileUploadInput
  *   control={form.control}
- *   name="slug"
- *   label="URL Slug"
- *   sourceValue={form.watch("title")}
- *   description="This will be used in the page URL"
- *   required
+ *   name="avatar"
+ *   label="Profile Picture"
+ *   accept="image/*"
+ *   maxFileSize={5 * 1024 * 1024}
+ *   onFilesAdded={(files) => startUpload(files)}
+ *   uploadProgress={uploadProgress}
  * />
  * ```
  */
-declare function SlugField({
+declare function FileUploadInput<T extends FieldValues = FieldValues>({
   control,
   name,
+  label,
   description,
-  helperText,
   required,
-  label,
-  placeholder,
   disabled,
-  sourceValue,
-  onGenerate,
+  multiple,
+  accept,
+  maxFiles,
+  maxFileSize,
+  minFileSize,
+  uploadProgress,
+  uploadErrors,
+  dropzoneText,
+  dropzoneHint,
+  showPreview,
+  compact,
+  onFilesAdded,
+  onFileRemoved,
   className,
-  inputClassName,
-  labelClassName,
-  onValueChange,
-  value,
-  onChange,
-  error,
-  ref
-}: SlugFieldProps): react_jsx_runtime0.JSX.Element;
+  dropzoneClassName,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange
+}: FileUploadInputProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form/form-error-summary.d.ts
 interface FormErrorSummaryProps {
@@ -790,203 +650,298 @@ declare function FormErrorSummary({
   title
 }: FormErrorSummaryProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
-//#region src/components/form/date-range-filter.d.ts
-interface DateRange {
-  from?: Date;
-  to?: Date;
+//#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 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 */
+interface FormFieldArrayItemProps {
+  children: ReactNode;
+  onRemove?: () => void;
+  index?: number;
+  title?: string;
   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
+ * FormFieldArray - Container for dynamic field arrays with add/remove
  *
- * Features:
- * - Only applies filter when explicitly submitted
- * - Supports clearing filters
- * - Uses Popover to show calendar on click
- * - Configurable min/max dates
+ * @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 DateRangeFilter({
-  initialStartDate,
-  initialEndDate,
-  onFilter,
-  onClear,
-  className,
-  buttonClassName,
-  placeholder,
-  minDate,
-  maxDate,
-  alignRight,
-  numberOfMonths
-}: DateRangeFilterProps): react_jsx_runtime0.JSX.Element;
+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
-//#region src/components/form/date-range-input.d.ts
-interface DateRangeValue {
-  from?: Date | string;
-  to?: Date | string;
+//#region src/components/form/form-input.d.ts
+interface TransformFunctions {
+  input?: (value: unknown) => string;
+  output?: (value: string) => unknown;
 }
-interface DateRangeInputProps<TFieldValues extends FieldValues = FieldValues> {
-  /** React Hook Form control */
+interface FormInputProps<TFieldValues extends FieldValues = FieldValues> {
   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 */
+  description?: string;
+  helperText?: string;
   required?: boolean;
-  /** Whether the field is disabled */
   disabled?: boolean;
-  /** Additional className for the wrapper */
+  readOnly?: boolean;
+  type?: string;
   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;
-  };
+  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"];
 }
 /**
- * DateRangeInput - Date range picker with react-hook-form integration
+ * 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
- * <DateRangeInput
- *   control={control}
- *   name="dateRange"
- *   label="Select Dates"
- *   placeholder="Pick a date range"
+ * // 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 DateRangeInput<TFieldValues extends FieldValues = FieldValues>({
+declare function FormInput<TFieldValues extends FieldValues = FieldValues>({
   control,
   name,
   label,
-  description,
   placeholder,
+  description,
+  helperText,
   required,
   disabled,
+  readOnly,
+  type,
   className,
   labelClassName,
-  buttonClassName,
-  calendarClassName,
-  minDate,
-  maxDate,
-  disabledDates,
-  disabledDays,
+  inputClassName,
+  inputGroupClassName,
+  iconLeft,
+  iconRight,
+  addonLeft,
+  addonRight,
   onValueChange,
-  validateDateRange,
-  clearErrors,
-  descriptionComponent,
-  allowClear,
-  showBadge,
-  Icon,
-  transform
-}: DateRangeInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+  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/otp-input.d.ts
-interface OTPInputProps<T extends FieldValues = FieldValues> {
-  control?: Control<T>;
-  name: FieldPath<T> | string;
+//#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-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;
-  length?: 4 | 6 | 8;
-  separatorAfter?: number[];
-  pattern?: string;
-  autoSubmit?: boolean;
+  readOnly?: boolean;
+  rows?: number;
   value?: string;
   onChange?: (value: string) => void;
-  onComplete?: (value: string) => void;
+  onValueChange?: (value: string) => void;
   className?: string;
-  slotClassName?: 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;
 }
 /**
- * OTPInput - OTP/PIN code input with react-hook-form integration
+ * FormTextarea - Textarea with react-hook-form integration
  *
  * @example
  * ```tsx
- * <OTPInput
+ * <FormTextarea
  *   control={form.control}
- *   name="otp"
- *   label="Verification Code"
- *   length={6}
- *   autoSubmit
- *   onComplete={(code) => verify(code)}
+ *   name="bio"
+ *   label="Biography"
+ *   placeholder="Tell us about yourself..."
+ *   rows={5}
  * />
  * ```
  */
-declare function OTPInput<T extends FieldValues = FieldValues>({
+declare function FormTextarea<TFieldValues extends FieldValues = FieldValues>({
   control,
   name,
   label,
   description,
+  helperText,
   required,
   disabled,
-  length,
-  separatorAfter,
-  pattern,
-  autoSubmit,
+  readOnly,
+  placeholder,
   value: propValue,
   onChange: propOnChange,
-  onComplete,
+  onValueChange,
   className,
-  slotClassName
-}: OTPInputProps<T>): react_jsx_runtime0.JSX.Element;
+  labelClassName,
+  textareaClassName,
+  inputGroupClassName,
+  iconLeft,
+  iconRight,
+  addonLeft,
+  addonRight,
+  rows,
+  minLength,
+  maxLength,
+  autoComplete,
+  autoFocus
+}: FormTextareaProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/form/multi-select.d.ts
 interface MultiSelectOption {
@@ -1060,281 +1015,119 @@ declare function MultiSelect<T extends FieldValues = FieldValues>({
   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;
+//#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;
-  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;
+  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;
-  renderOption?: (option: AsyncComboboxOption) => ReactNode;
 }
 /**
- * AsyncCombobox - Searchable select with debounced async search
+ * 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
- * <AsyncCombobox
+ * <NumberInput
  *   control={form.control}
- *   name="city"
- *   label="City"
- *   onSearch={async (q) => {
- *     const res = await fetch(`/api/cities?search=${q}`);
- *     return res.json();
- *   }}
- *   placeholder="Search cities..."
+ *   name="quantity"
+ *   label="Quantity"
+ *   min={1}
+ *   max={100}
+ *   step={1}
  * />
  * ```
  */
-declare function AsyncCombobox<T extends FieldValues = FieldValues>({
+declare function NumberInput<TFieldValues 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,
+  min,
+  max,
+  step,
+  showStepper,
+  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,
+  onValueChange,
   className,
   labelClassName,
-  inputClassName,
-  renderOption,
-  value: propValue,
-  onChange: propOnChange,
-  onValueChange
-}: AsyncMultiSelectProps<T>): react_jsx_runtime0.JSX.Element;
+  inputClassName
+}: NumberInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/form/file-upload-input.d.ts
-interface FileUploadInputProps<T extends FieldValues = FieldValues> {
+//#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;
-  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;
+  length?: 4 | 6 | 8;
+  separatorAfter?: number[];
+  pattern?: string;
+  autoSubmit?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
   className?: string;
-  dropzoneClassName?: string;
+  slotClassName?: string;
 }
 /**
- * FileUploadInput - Drag-and-drop file input with validation and preview
+ * OTPInput - OTP/PIN code input with react-hook-form integration
  *
  * @example
  * ```tsx
- * <FileUploadInput
+ * <OTPInput
  *   control={form.control}
- *   name="avatar"
- *   label="Profile Picture"
- *   accept="image/*"
- *   maxFileSize={5 * 1024 * 1024}
- *   onFilesAdded={(files) => startUpload(files)}
- *   uploadProgress={uploadProgress}
+ *   name="otp"
+ *   label="Verification Code"
+ *   length={6}
+ *   autoSubmit
+ *   onComplete={(code) => verify(code)}
  * />
  * ```
  */
-declare function FileUploadInput<T extends FieldValues = FieldValues>({
+declare function OTPInput<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,
+  length,
+  separatorAfter,
+  pattern,
+  autoSubmit,
   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,
+  onComplete,
   className,
-  labelClassName,
-  value: propValue,
-  onChange: propOnChange,
-  onValueChange
-}: DateTimeInputProps<T>): react_jsx_runtime0.JSX.Element;
+  slotClassName
+}: OTPInputProps<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"> {
@@ -1364,186 +1157,458 @@ declare function PasswordInput<TFieldValues extends FieldValues = FieldValues>({
   ...props
 }: PasswordInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/components/form/number-input.d.ts
-interface NumberInputProps<TFieldValues extends FieldValues = FieldValues> {
+//#region src/components/form/phone-input.d.ts
+interface FormPhoneInputProps<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;
+  defaultCountry?: string;
+  countries?: PhoneCountry[];
   className?: string;
   labelClassName?: string;
   inputClassName?: string;
+  value?: string;
+  onChange?: (value: string) => void;
 }
 /**
- * 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
+ * FormPhoneInput - Phone input with Field integration and react-hook-form support
  *
  * @example
  * ```tsx
- * <NumberInput
+ * // With react-hook-form
+ * <FormPhoneInput
  *   control={form.control}
- *   name="quantity"
- *   label="Quantity"
- *   min={1}
- *   max={100}
- *   step={1}
+ *   name="phone"
+ *   label="Phone Number"
+ *   required
+ * />
+ *
+ * // Standalone
+ * <FormPhoneInput
+ *   name="phone"
+ *   label="Phone Number"
+ *   value={phone}
+ *   onChange={setPhone}
  * />
  * ```
  */
-declare function NumberInput<TFieldValues extends FieldValues = FieldValues>({
+declare function FormPhoneInput<TFieldValues extends FieldValues = FieldValues>({
   control,
   name,
   label,
   placeholder,
   description,
-  helperText,
   required,
   disabled,
-  min,
-  max,
-  step,
-  showStepper,
-  value: propValue,
-  onChange: propOnChange,
-  onValueChange,
+  defaultCountry,
+  countries,
   className,
   labelClassName,
-  inputClassName
-}: NumberInputProps<TFieldValues>): react_jsx_runtime0.JSX.Element;
+  inputClassName,
+  value,
+  onChange
+}: FormPhoneInputProps<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;
+//#region src/components/form/radio-input.d.ts
+interface RadioChoice {
+  value: string;
+  label: string;
+  disabled?: boolean;
 }
-interface FormGridProps {
-  children: ReactNode;
-  cols?: 1 | 2 | 3 | 4;
+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;
 }
 /**
- * FormSection - Organizes form fields into logical groups with variants
+ * RadioInput - Radio group with react-hook-form integration
  *
  * @example
  * ```tsx
- * <FormSection title="Personal Info" variant="card" collapsible>
- *   <FormInput name="name" label="Name" />
- *   <FormInput name="email" label="Email" />
- * </FormSection>
+ * <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 FormSection({
-  title,
+declare function RadioInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
   description,
-  children,
-  variant,
-  collapsible,
-  defaultOpen,
-  icon,
-  className
-}: FormSectionProps): react_jsx_runtime0.JSX.Element;
+  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/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[];
+  /** Explicit "all/clear" option prepended to items */
+  allOption?: SelectOption;
+  /** When true, auto-adds a clear option using the placeholder text as its label */
+  clearable?: boolean;
+  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;
+}
 /**
- * FormGrid - Responsive grid layout for form fields
+ * 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
- * <FormGrid cols={2}>
- *   <FormInput name="firstName" label="First Name" />
- *   <FormInput name="lastName" label="Last Name" />
- * </FormGrid>
+ * // 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 FormGrid({
-  children,
-  cols,
-  className
-}: FormGridProps): react_jsx_runtime0.JSX.Element;
+declare function SelectInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  items,
+  groups,
+  name,
+  label,
+  placeholder,
+  allOption,
+  clearable,
+  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/form-field-array.d.ts
-interface FormFieldArrayProps {
-  title?: string;
+//#region src/components/form/slug-field.d.ts
+interface SlugFieldProps {
+  control?: Control<FieldValues>;
+  name: string;
+  label?: string;
+  placeholder?: string;
   description?: string;
-  children: ReactNode;
-  onAdd?: () => void;
-  addLabel?: string;
-  emptyMessage?: string;
-  itemCount?: number;
-  maxItems?: number;
+  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>;
 }
-interface FormFieldArrayItemProps {
-  children: ReactNode;
-  onRemove?: () => void;
-  index?: number;
-  title?: string;
+/**
+ * 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/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;
 }
 /**
- * FormFieldArray - Container for dynamic field arrays with add/remove
+ * SwitchInput - Toggle switch with react-hook-form integration
  *
  * @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>
+ * <SwitchInput
+ *   control={form.control}
+ *   name="notifications"
+ *   label="Enable notifications"
+ *   description="Receive email updates"
+ * />
  * ```
  */
-declare function FormFieldArray({
-  title,
+declare function SwitchInput<TFieldValues extends FieldValues = FieldValues>({
+  control,
+  name,
+  label,
   description,
-  children,
-  onAdd,
-  addLabel,
-  emptyMessage,
-  itemCount,
-  maxItems,
-  className
-}: FormFieldArrayProps): react_jsx_runtime0.JSX.Element;
+  helperText,
+  required,
+  disabled,
+  orientation,
+  value: propValue,
+  onChange: propOnChange,
+  onValueChange,
+  className,
+  labelClassName,
+  switchClassName
+}: SwitchInputProps<TFieldValues>): 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;
+}
 /**
- * FormFieldArrayItem - Individual item within a FormFieldArray
+ * 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 FormFieldArrayItem({
-  children,
-  onRemove,
-  title,
-  className
-}: FormFieldArrayItemProps): react_jsx_runtime0.JSX.Element;
+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/tag-input/types.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;
+}
+//#endregion
+//#region src/components/form/tag-input/tag-input.d.ts
+/**
+ * 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
-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 };
+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, FormPhoneInput, type FormPhoneInputProps, 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 };