@react-solutions/inputs 1.0.2 → 1.1.0

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { SliderProps, FormControlProps, FormLabelProps, SwitchProps, FormControlLabelProps, RadioGroupProps, RadioProps, SxProps, Theme, FormControl, CheckboxProps, Box, Stack, ButtonProps, TextFieldProps, AutocompleteProps, AutocompleteChangeReason, AutocompleteInputChangeReason, AutocompleteCloseReason, SelectProps, MenuItemProps, InputLabel, SelectChangeEvent, IconButtonProps, TextFieldPropsSizeOverrides } from '@mui/material';
+import { ToggleButtonGroupProps, ToggleButtonProps, FormControl, FormLabelProps, SliderProps, FormControlProps, SwitchProps, FormControlLabelProps, RadioGroupProps, RadioProps, SxProps, Theme, CheckboxProps, Box, Stack, ButtonProps, TextFieldProps, AutocompleteProps, AutocompleteChangeReason, AutocompleteInputChangeReason, AutocompleteCloseReason, SelectProps, MenuItemProps, InputLabel, SelectChangeEvent, IconButtonProps, TextFieldPropsSizeOverrides } from '@mui/material';
 import * as React from 'react';
 import React__default, { SyntheticEvent, FocusEvent, ChangeEvent } from 'react';
 import { DateCalendarProps, TimeClockProps, TimeView, TimePickerProps, DatePickerProps } from '@mui/x-date-pickers';
@@ -7,6 +7,128 @@ import { FilterOptionsState } from '@mui/material/useAutocomplete';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldValues } from 'react-hook-form';
 
+/**
+ * Base option type for Toggle Button Group
+ */
+type ToggleOption = {
+    name: string;
+    value: string | number;
+    disabled?: boolean;
+    color?: ToggleButtonProps["color"];
+    [key: string]: unknown;
+};
+/**
+ * Error object type
+ */
+type FieldError$k = {
+    message?: string;
+} | null;
+/**
+ * Extended Toggle Button Group Props
+ * Extends MUI ToggleButtonGroupProps with custom form field props
+ */
+interface IToggleButtonFieldProps extends Omit<ToggleButtonGroupProps, "value" | "onChange" | "name" | "children"> {
+    /** Field name for form identification */
+    name?: string;
+    /** Label text for the group */
+    label?: React__default.ReactNode;
+    /** Title text to display when hovering over label */
+    title?: string;
+    /** Current selected value(s) */
+    value: any;
+    /** Options array to display as toggle buttons */
+    options: ToggleOption[];
+    /** Error object with optional message */
+    error?: FieldError$k;
+    /** Helper text to display below the group */
+    helperText?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Full width of the field */
+    fullWidth?: boolean;
+    /** Required field indicator */
+    required?: boolean;
+    /** Toggle size */
+    size?: ToggleButtonGroupProps["size"];
+    /** Toggle orientation */
+    orientation?: ToggleButtonGroupProps["orientation"];
+    /** Whether to allow multiple selection */
+    exclusive?: boolean;
+    /** Custom styles for individual ToggleButton components */
+    buttonStyles?: ToggleButtonProps["sx"];
+    /** Custom styles for FormControl */
+    formControlStyles?: React__default.ComponentProps<typeof FormControl>["sx"];
+    /** Custom styles for FormLabel */
+    formLabelStyles?: FormLabelProps["sx"];
+    /** Custom styles for ToggleButtonGroup */
+    groupStyles?: ToggleButtonGroupProps["sx"];
+    /** Callback fired when the value changes */
+    onChange?: (value: any) => void;
+    /** Custom render function for toggle buttons */
+    renderButton?: (option: ToggleOption, index: number) => React__default.ReactNode;
+}
+/**
+ * Toggle Button Field Component
+ *
+ * A customizable toggle button group field built on top of Material UI ToggleButtonGroup and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a group of flexible toggle buttons for single or multiple selections with support for:
+ * error handling, helper text, custom colors per button, styling overrides, and standard toggle behaviors.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the group
+ * @param {boolean} [title=false] - {boolean} Whether to show label as title
+ * @param {any} value - {any} Current selected value(s) (controlled component)
+ * @param {ToggleOption[]} options - {ToggleOption[]} Array of toggle options
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below the group
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'small'|'medium'|'large'} [size='medium'] - {'small'|'medium'|'large'} Toggle size
+ * @param {'horizontal'|'vertical'} [orientation='horizontal'] - {'horizontal'|'vertical'} Toggle orientation
+ * @param {boolean} [exclusive=true] - {boolean} Whether to allow only single selection
+ * @param {ToggleButtonProps['sx']} [buttonStyles] - {ToggleButtonProps['sx']} Custom styles for individual ToggleButton components
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {ToggleButtonGroupProps['sx']} [groupStyles] - {ToggleButtonGroupProps['sx']} Custom styles for ToggleButtonGroup
+ * @param {(value: any) => void} [onChange] - {(value: any) => void} Callback fired when value changes
+ * @param {(option: ToggleOption, index: number) => React.ReactNode} [renderButton] - {(option: ToggleOption, index: number) => React.ReactNode} Custom render function for toggle buttons
+ *
+ * @returns {JSX.Element} The Toggle Button Field component
+ *
+ * @usage
+ * ```tsx
+ * import ToggleButtonField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [status, setStatus] = useState("ACTIVE");
+ *
+ *   return (
+ *     <ToggleButtonField
+ *       name="status"
+ *       label="Status"
+ *       value={status}
+ *       options={[
+ *         { name: "Active", value: "ACTIVE", color: "success" },
+ *         { name: "Inactive", value: "INACTIVE", color: "error" }
+ *       ]}
+ *       exclusive
+ *       onChange={(val) => setStatus(val)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const ToggleButtonField: React__default.ForwardRefExoticComponent<Omit<IToggleButtonFieldProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
 /**
  * Error object type
  */
@@ -75,6 +197,71 @@ interface ISliderFieldProps extends Omit<SliderProps, "value" | "onChange" | "on
     /** FormLabel props */
     formLabelProps?: Omit<FormLabelProps, "children">;
 }
+/**
+ * Slider Field Component
+ *
+ * A customizable slider field built on top of Material UI Slider and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible slider for range selections with support for: error handling, helper text, custom marks,
+ * styling overrides, orientation (horizontal/vertical), and standard slider behaviors. It integrates seamlessly with form
+ * management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the slider
+ * @param {number | number[]} value - {number | number[]} Current slider value(s) (controlled component)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below slider
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'horizontal'|'vertical'} [orientation='horizontal'] - {'horizontal'|'vertical'} Slider orientation
+ * @param {number} [min=0] - {number} Minimum value
+ * @param {number} [max=100] - {number} Maximum value
+ * @param {number|null} [step=1] - {number|null} Step value
+ * @param {'on'|'auto'|'off'} [valueLabelDisplay='auto'] - {'on'|'auto'|'off'} Whether to show value label
+ * @param {React.ReactNode | ((value: number, index: number) => React.ReactNode)} [valueLabelFormat] - {React.ReactNode} Custom format for value label
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Slider color
+ * @param {'small'|'medium'} [size] - {'small'|'medium'} Slider size
+ * @param {boolean | SliderProps['marks']} [marks] - {boolean | SliderProps['marks']} Marks on the slider
+ * @param {'normal'|'inverted'|false} [track='normal'] - {'normal'|'inverted'|false} Track display mode
+ * @param {SliderProps['sx']} [sliderStyles] - {SliderProps['sx']} Custom styles for the Slider component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {(value: number | number[]) => void} [onChange] - {(value: number | number[]) => void} Callback fired when value changes
+ * @param {(value: number | number[]) => void} [onChangeCommitted] - {(value: number | number[]) => void} Callback fired when value change is committed
+ * @param {(event: SyntheticEvent) => void} [onFocus] - {(event: SyntheticEvent) => void} Callback when focused
+ * @param {(event: SyntheticEvent) => void} [onBlur] - {(event: SyntheticEvent) => void} Callback when blurred
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ *
+ * @returns {JSX.Element} The Slider Field component
+ *
+ * @usage
+ * ```tsx
+ * import SliderField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [val, setVal] = useState(30);
+ *
+ *   return (
+ *     <SliderField
+ *       name="mySlider"
+ *       label="Volume"
+ *       value={val}
+ *       onChange={(newVal) => setVal(newVal as number)}
+ *       min={0}
+ *       max={100}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const SliderField: React__default.ForwardRefExoticComponent<Omit<ISliderFieldProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
 
 /**
@@ -137,6 +324,65 @@ interface ISwitchFieldProps extends Omit<SwitchProps, "checked" | "onChange" | "
     /** FormControlLabel props */
     formControlLabelProps?: Omit<FormControlLabelProps, "control" | "label" | "checked">;
 }
+/**
+ * Switch Field Component
+ *
+ * A customizable switch field built on top of Material UI Switch and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible switch for binary choices with support for: error handling, helper text, custom icons,
+ * styling overrides, label placement, and standard switch behaviors. It integrates seamlessly with form
+ * management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the switch
+ * @param {boolean} value - {boolean} Current checked state (controlled component)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below switch
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Switch color
+ * @param {'small'|'medium'} [size] - {'small'|'medium'} Switch size
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'start'|'end'|'top'|'bottom'} [labelPlacement='end'] - {'start'|'end'|'top'|'bottom'} Label placement relative to switch
+ * @param {'start'|'end'|false} [edge] - {'start'|'end'|false} Edge placement for the switch
+ * @param {React.ReactNode} [checkedIcon] - {React.ReactNode} Custom icon for checked state
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for unchecked state
+ * @param {SwitchProps['sx']} [switchStyles] - {SwitchProps['sx']} Custom styles for the Switch component
+ * @param {FormControlLabelProps['sx']} [labelStyles] - {FormControlLabelProps['sx']} Custom styles for FormControlLabel
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {(checked: boolean) => void} [onChange] - {(checked: boolean) => void} Callback fired when value changes
+ * @param {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - {(event: React.MouseEvent<HTMLButtonElement>) => void} Callback fired when clicked
+ * @param {SwitchProps['onFocus']} [onFocus] - {SwitchProps['onFocus']} Callback when focused
+ * @param {SwitchProps['onBlur']} [onBlur] - {SwitchProps['onBlur']} Callback when blurred
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ *
+ * @returns {JSX.Element} The Switch Field component
+ *
+ * @usage
+ * ```tsx
+ * import SwitchField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [isEnabled, setIsEnabled] = useState(false);
+ *
+ *   return (
+ *     <SwitchField
+ *       name="mySwitch"
+ *       label="Enable notifications"
+ *       value={isEnabled}
+ *       onChange={(checked) => setIsEnabled(checked)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const SwitchField: React__default.ForwardRefExoticComponent<Omit<ISwitchFieldProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 
 /**
@@ -226,6 +472,76 @@ interface IRadioButtonGroupFieldProps extends Omit<RadioGroupProps, "value" | "o
     /** Custom styles for RadioGroup */
     sxProps?: SxProps<Theme>;
 }
+/**
+ * Radio Button Field Group Component
+ *
+ * A customizable group of radio buttons built on top of Material UI RadioGroup and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a group of flexible radio buttons with support for: error handling, helper text, custom icons,
+ * styling overrides, label placement, row/column layout, and standard radio behaviors. It integrates seamlessly with form
+ * management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the radio group
+ * @param {string | number | null | undefined} value - {string | number | null | undefined} Current selected value (controlled component)
+ * @param {RadioOption[]} options - {RadioOption[]} Array of radio options
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below radio group
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Radio color
+ * @param {'small'|'medium'|'large'} [size] - {'small'|'medium'|'large'} Radio size
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'start'|'end'} [labelPlacement='end'] - {'start'|'end'} Label placement relative to each radio button
+ * @param {boolean} [row=false] - {boolean} Row layout (horizontal) or column layout (vertical)
+ * @param {React.ReactNode} [checkedIcon] - {React.ReactNode} Custom icon for checked state
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for unchecked state
+ * @param {RadioProps["sx"]} [radioStyles] - {RadioProps["sx"]} Custom styles for individual Radio components
+ * @param {FormControlLabelProps["sx"]} [labelStyles] - {FormControlLabelProps["sx"]} Custom styles for FormControlLabel components
+ * @param {FormControlProps["sx"]} [formControlStyles] - {FormControlProps["sx"]} Custom styles for FormControl
+ * @param {FormLabelProps["sx"]} [formLabelStyles] - {FormLabelProps["sx"]} Custom styles for FormLabel
+ * @param {RadioGroupProps["sx"]} [radioGroupStyles] - {RadioGroupProps["sx"]} Custom styles for RadioGroup
+ * @param {(value: string | number) => void} [onChange] - {(value: string | number) => void} Callback fired when value changes
+ * @param {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - {(event: React.MouseEvent<HTMLButtonElement>) => void} Callback fired when a radio button is clicked
+ * @param {RadioProps["onFocus"]} [onFocus] - {RadioProps["onFocus"]} Callback when focused
+ * @param {RadioProps["onBlur"]} [onBlur] - {RadioProps["onBlur"]} Callback when blurred
+ * @param {(option: RadioOption, index: number) => React.ReactNode} [renderRadio] - {(option: RadioOption, index: number) => React.ReactNode} Custom render function for radio buttons
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ * @param {SxProps<Theme>} [sxProps] - {SxProps<Theme>} Custom styles for RadioGroup container
+ *
+ * @returns {JSX.Element} The Radio Button Field Group component
+ *
+ * @usage
+ * ```tsx
+ * import RadioButtonFieldGroup from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [value, setValue] = useState("opt1");
+ *   const options = [
+ *     { name: "Option 1", value: "opt1" },
+ *     { name: "Option 2", value: "opt2" }
+ *   ];
+ *
+ *   return (
+ *     <RadioButtonFieldGroup
+ *       name="myRadioGroup"
+ *       label="Select an option"
+ *       value={value}
+ *       options={options}
+ *       onChange={(val) => setValue(val)}
+ *       row
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const RadioButtonFieldGroup: React__default.ForwardRefExoticComponent<Omit<IRadioButtonGroupFieldProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -286,6 +602,64 @@ interface IRadioButtonFieldProps extends Omit<RadioProps, "checked" | "onChange"
     /** FormControlLabel props */
     formControlLabelProps?: Omit<FormControlLabelProps, "control" | "label" | "value">;
 }
+/**
+ * Radio Button Field Component
+ *
+ * A customizable radio button field built on top of Material UI Radio and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible radio button with support for: error handling, helper text, custom icons,
+ * styling overrides, label placement, and standard radio behaviors. It integrates seamlessly with form
+ * management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the radio button
+ * @param {boolean} value - {boolean} Current checked state (controlled component)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below radio button
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Radio color
+ * @param {'small'|'medium'|'large'} [size] - {'small'|'medium'|'large'} Radio size
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'start'|'end'} [labelPlacement='end'] - {'start'|'end'} Label placement relative to radio button
+ * @param {(checked: boolean) => void} [onChange] - {(checked: boolean) => void} Callback fired when value changes
+ * @param {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - {(event: React.MouseEvent<HTMLButtonElement>) => void} Callback fired when clicked
+ * @param {React.FocusEventHandler<HTMLButtonElement>} [onFocus] - {React.FocusEventHandler<HTMLButtonElement>} Callback when focused
+ * @param {React.FocusEventHandler<HTMLButtonElement>} [onBlur] - {React.FocusEventHandler<HTMLButtonElement>} Callback when blurred
+ * @param {React.ReactNode} [checkedIcon] - {React.ReactNode} Custom icon for checked state
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for unchecked state
+ * @param {React.CSSProperties} [radioStyles] - {React.CSSProperties} Custom styles for Radio component
+ * @param {React.CSSProperties} [labelStyles] - {React.CSSProperties} Custom styles for FormControlLabel
+ * @param {React.CSSProperties} [formControlStyles] - {React.CSSProperties} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ *
+ * @returns {JSX.Element} The Radio Button Field component
+ *
+ * @usage
+ * ```tsx
+ * import RadioButtonField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [isSelected, setIsSelected] = useState(false);
+ *
+ *   return (
+ *     <RadioButtonField
+ *       name="myRadio"
+ *       label="Option 1"
+ *       value={isSelected}
+ *       onChange={(checked) => setIsSelected(checked)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const RadioButtonField: React__default.ForwardRefExoticComponent<Omit<IRadioButtonFieldProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 
 /**
@@ -370,6 +744,75 @@ interface ICheckboxFieldGroupProps extends Omit<FormControlProps, "error" | "dis
     /** xsProps */
     sxProps?: SxProps<Theme>;
 }
+/**
+ * Checkbox Field Group Component
+ *
+ * A customizable group of checkboxes built on top of Material UI Checkbox and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a group of flexible checkboxes with support for: error handling, helper text, custom icons,
+ * styling overrides, label placement, row/column layout, and standard checkbox behaviors. It integrates seamlessly with form
+ * management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the checkbox group
+ * @param {(string | number)[]} value - {(string | number)[]} Array of selected values (controlled component)
+ * @param {CheckboxOption[]} options - {CheckboxOption[]} Array of checkbox options
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below field
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Checkbox color
+ * @param {'small'|'medium'|'large'} [size] - {'small'|'medium'|'large'} Checkbox size
+ * @param {'start'|'end'} [labelPlacement='end'] - {'start'|'end'} Label placement relative to checkbox
+ * @param {boolean} [row=false] - {boolean} Whether to display checkboxes in a row
+ * @param {React.ReactNode} [checkedIcon] - {React.ReactNode} Custom icon for checked state
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for unchecked state
+ * @param {SxProps<Theme>} [checkboxStyles] - {SxProps<Theme>} Custom styles for individual checkboxes
+ * @param {SxProps<Theme>} [labelStyles] - {SxProps<Theme>} Custom styles for checkbox labels
+ * @param {SxProps<Theme>} [formControlStyles] - {SxProps<Theme>} Custom styles for FormControl container
+ * @param {SxProps<Theme>} [formLabelStyles] - {SxProps<Theme>} Custom styles for FormLabel
+ * @param {(value: (string | number)[]) => void} [onChange] - {(value: (string | number)[]) => void} Callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when focused
+ * @param {Function} [onBlur] - {Function} Callback when blurred
+ * @param {Function} [onClick] - {Function} Callback when clicked
+ * @param {Function} [renderCheckbox] - {Function} Custom render function for checkboxes
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ * @param {SxProps<Theme>} [sxProps] - {SxProps<Theme>} Custom styles for the Box container
+ *
+ * @returns {JSX.Element} The Checkbox Field Group component
+ *
+ * @usage
+ * ```tsx
+ * import CheckboxFieldGroup from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [values, setValues] = useState(["opt1"]);
+ *   const options = [
+ *     { value: "opt1", label: "Option 1" },
+ *     { value: "opt2", label: "Option 2" }
+ *   ];
+ *
+ *   return (
+ *     <CheckboxFieldGroup
+ *       name="myCheckGroup"
+ *       label="Select options"
+ *       value={values}
+ *       options={options}
+ *       onChange={(newValues) => setValues(newValues)}
+ *       row
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const CheckboxFieldGroup: React__default.ForwardRefExoticComponent<Omit<ICheckboxFieldGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -430,6 +873,68 @@ interface ICheckboxFieldProps extends Omit<CheckboxProps, "checked" | "onChange"
     /** Custom slots for MUI v7 */
     slots?: CheckboxProps["slots"];
 }
+/**
+ * Checkbox Field Component
+ *
+ * A customizable checkbox field built on top of Material UI Checkbox and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible checkbox with support for: error handling, helper text, custom icons,
+ * styling overrides, label placement, and standard checkbox behaviors. It integrates seamlessly with form
+ * management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the checkbox
+ * @param {boolean} value - {boolean} Current checked state (controlled component)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below checkbox
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Checkbox color
+ * @param {'small'|'medium'|'large'} [size] - {'small'|'medium'|'large'} Checkbox size (maps to 'medium' for 'large')
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'start'|'end'} [labelPlacement='end'] - {'start'|'end'} Label placement relative to checkbox
+ * @param {(checked: boolean) => void} [onChange] - {(checked: boolean) => void} Callback fired when value changes
+ * @param {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - {(event: React.MouseEvent<HTMLButtonElement>) => void} Callback fired when clicked
+ * @param {React.FocusEventHandler<HTMLButtonElement>} [onFocus] - {React.FocusEventHandler<HTMLButtonElement>} Callback when focused
+ * @param {React.FocusEventHandler<HTMLButtonElement>} [onBlur] - {React.FocusEventHandler<HTMLButtonElement>} Callback when blurred
+ * @param {React.ReactNode} [checkedIcon] - {React.ReactNode} Custom icon for checked state
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for unchecked state
+ * @param {React.CSSProperties} [checkboxStyles] - {React.CSSProperties} Custom styles for Checkbox component
+ * @param {React.CSSProperties} [labelStyles] - {React.CSSProperties} Custom styles for FormControlLabel
+ * @param {React.CSSProperties} [formControlStyles] - {React.CSSProperties} Custom styles for FormControl container
+ * @param {boolean} [indeterminate=false] - {boolean} Indeterminate state
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ *
+ * @returns {JSX.Element} The Checkbox Field component
+ *
+ * @usage
+ * ```tsx
+ * import CheckboxField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [isChecked, setIsChecked] = useState(false);
+ *
+ *   return (
+ *     <CheckboxField
+ *       name="myCheckbox"
+ *       label="Accept terms"
+ *       value={isChecked}
+ *       onChange={(checked) => setIsChecked(checked)}
+ *       error={error}
+ *       helperText={helperText}
+ *       required
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const CheckboxField: React__default.ForwardRefExoticComponent<Omit<ICheckboxFieldProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 
 /**
@@ -442,7 +947,7 @@ type FieldError$d = {
  * Extended Date Calendar Field Props
  * Extends MUI DateCalendarProps with custom form field props
  */
-interface IDateCalendarFieldProps extends Omit<DateCalendarProps, 'value' | 'onChange' | 'defaultValue' | 'slots' | 'slotProps'> {
+interface IDateCalendarFieldProps extends Omit<DateCalendarProps<Date>, "value" | "onChange" | "defaultValue" | "slots" | "slotProps"> {
     /** Field name for form identification */
     name?: string;
     /** Label text for the calendar */
@@ -472,25 +977,25 @@ interface IDateCalendarFieldProps extends Omit<DateCalendarProps, 'value' | 'onC
     /** Function to disable specific years */
     shouldDisableYear?: (year: Date) => boolean;
     /** Custom styles for the DateCalendar */
-    calendarStyles?: DateCalendarProps['sx'];
+    calendarStyles?: DateCalendarProps<Date>["sx"];
     /** Custom styles for FormControl */
-    formControlStyles?: React__default.ComponentProps<typeof FormControl>['sx'];
+    formControlStyles?: React__default.ComponentProps<typeof FormControl>["sx"];
     /** Custom styles for FormLabel */
-    formLabelStyles?: FormLabelProps['sx'];
+    formLabelStyles?: FormLabelProps["sx"];
     /** Custom styles for the container Box */
-    containerStyles?: React__default.ComponentProps<typeof Box>['sx'];
+    containerStyles?: React__default.ComponentProps<typeof Box>["sx"];
     /** Callback fired when the date changes */
     onChange?: (value: Date | null) => void;
     /** Callback fired when a view change is requested */
-    onViewChange?: (view: 'day' | 'month' | 'year') => void;
+    onViewChange?: (view: "day" | "month" | "year") => void;
     /** Callback fired when a month change is requested */
     onMonthChange?: (month: Date) => void;
     /** Callback fired when a year change is requested */
     onYearChange?: (year: Date) => void;
     /** Custom slot props for MUI v7 */
-    slotProps?: DateCalendarProps['slotProps'];
+    slotProps?: DateCalendarProps<Date>["slotProps"];
     /** Custom slots for MUI v7 */
-    slots?: DateCalendarProps['slots'];
+    slots?: DateCalendarProps<Date>["slots"];
     /** Date adapter to use (defaults to AdapterDateFns) */
     dateAdapter?: typeof AdapterDateFns;
     /** Whether to show days outside current month */
@@ -502,8 +1007,74 @@ interface IDateCalendarFieldProps extends Omit<DateCalendarProps, 'value' | 'onC
     /** Reference date for the calendar */
     referenceDate?: Date;
     /** Controlled view state */
-    view?: 'day' | 'month' | 'year';
+    view?: "day" | "month" | "year";
 }
+/**
+ * Date Calendar Field Component
+ *
+ * A customizable inline date calendar field built on top of Material UI X DateCalendar and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides an inline calendar for date selection with support for: error handling, helper text,
+ * date constraints (min/max), disabling specific dates/months/years, and standard calendar behaviors.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the calendar
+ * @param {Date | null} value - {Date | null} Current selected date value (controlled component)
+ * @param {Date | null} [defaultValue] - {Date | null} Default date value
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below calendar
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {Date} [minDate] - {Date} Minimum selectable date
+ * @param {Date} [maxDate] - {Date} Maximum selectable date
+ * @param {(date: Date) => boolean} [shouldDisableDate] - {(date: Date) => boolean} Function to disable specific dates
+ * @param {(month: Date) => boolean} [shouldDisableMonth] - {(month: Date) => boolean} Function to disable specific months
+ * @param {(year: Date) => boolean} [shouldDisableYear] - {(year: Date) => boolean} Function to disable specific years
+ * @param {DateCalendarProps['sx']} [calendarStyles] - {DateCalendarProps['sx']} Custom styles for the DateCalendar component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {BoxProps['sx']} [containerStyles] - {BoxProps['sx']} Custom styles for the container Box
+ * @param {(value: Date | null) => void} [onChange] - {(value: Date | null) => void} Callback fired when the date changes
+ * @param {(view: 'day' | 'month' | 'year') => void} [onViewChange] - {Function} Callback fired when a view change is requested
+ * @param {(month: Date) => void} [onMonthChange] - {Function} Callback fired when a month change is requested
+ * @param {(year: Date) => void} [onYearChange] - {Function} Callback fired when a year change is requested
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI X v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI X v7
+ * @param {typeof AdapterDateFns} [dateAdapter=AdapterDateFns] - {Type} Date adapter to use
+ * @param {boolean} [showDaysOutsideCurrentMonth=false] - {boolean} Whether to show days outside current month
+ * @param {boolean} [disablePast=false] - {boolean} Whether to disable past dates
+ * @param {boolean} [disableFuture=false] - {boolean} Whether to disable future dates
+ * @param {Date} [referenceDate] - {Date} Reference date for the calendar
+ * @param {'day' | 'month' | 'year'} [view] - {'day' | 'month' | 'year'} Controlled view state
+ *
+ * @returns {JSX.Element} The Date Calendar Field component
+ *
+ * @usage
+ * ```tsx
+ * import DateCalendarField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+ *
+ *   return (
+ *     <DateCalendarField
+ *       name="myCalendar"
+ *       label="Select Date"
+ *       value={selectedDate}
+ *       onChange={(date) => setSelectedDate(date)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const DateCalendarField: React__default.ForwardRefExoticComponent<IDateCalendarFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -516,7 +1087,7 @@ type FieldError$c = {
  * Extended Time Clock Field Props
  * Extends MUI TimeClockProps with custom form field props
  */
-interface ITimeClockFieldProps extends Omit<TimeClockProps<TimeView>, 'value' | 'onChange' | 'defaultValue' | 'slots' | 'slotProps' | 'view' | 'onViewChange'> {
+interface ITimeClockFieldProps extends Omit<TimeClockProps<Date>, "value" | "onChange" | "defaultValue" | "slots" | "slotProps" | "view" | "onViewChange"> {
     /** Field name for form identification */
     name?: string;
     /** Label text for the time clock */
@@ -552,19 +1123,19 @@ interface ITimeClockFieldProps extends Omit<TimeClockProps<TimeView>, 'value' |
     /** Function to disable specific times */
     shouldDisableTime?: (time: Date, view: TimeView) => boolean;
     /** Custom styles for the TimeClock */
-    clockStyles?: TimeClockProps<TimeView>['sx'];
+    clockStyles?: TimeClockProps<Date>["sx"];
     /** Custom styles for FormControl */
-    formControlStyles?: React__default.ComponentProps<typeof FormControl>['sx'];
+    formControlStyles?: React__default.ComponentProps<typeof FormControl>["sx"];
     /** Custom styles for FormLabel */
-    formLabelStyles?: FormLabelProps['sx'];
+    formLabelStyles?: FormLabelProps["sx"];
     /** Custom styles for the container Box */
-    containerStyles?: React__default.ComponentProps<typeof Box>['sx'];
+    containerStyles?: React__default.ComponentProps<typeof Box>["sx"];
     /** Custom styles for the view buttons Stack */
-    buttonsStackStyles?: React__default.ComponentProps<typeof Stack>['sx'];
+    buttonsStackStyles?: React__default.ComponentProps<typeof Stack>["sx"];
     /** Custom styles for view buttons */
-    buttonStyles?: ButtonProps['sx'];
+    buttonStyles?: ButtonProps["sx"];
     /** Custom styles for active view button */
-    activeButtonStyles?: ButtonProps['sx'];
+    activeButtonStyles?: ButtonProps["sx"];
     /** Whether to show view selector buttons */
     showViewButtons?: boolean;
     /** Initial view */
@@ -576,14 +1147,83 @@ interface ITimeClockFieldProps extends Omit<TimeClockProps<TimeView>, 'value' |
     /** Callback fired when a view change is requested */
     onViewChange?: (view: TimeView) => void;
     /** Custom slot props for MUI v7 */
-    slotProps?: TimeClockProps<TimeView>['slotProps'];
+    slotProps?: TimeClockProps<Date>["slotProps"];
     /** Custom slots for MUI v7 */
-    slots?: TimeClockProps<TimeView>['slots'];
+    slots?: TimeClockProps<Date>["slots"];
     /** Date adapter to use (defaults to AdapterDateFns) */
     dateAdapter?: typeof AdapterDateFns;
     /** Auto focus */
     autoFocus?: boolean;
 }
+/**
+ * Time Clock Field Component
+ *
+ * A customizable inline time clock field built on top of Material UI X TimeClock and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides an inline clock for time selection with support for: error handling, helper text,
+ * AM/PM support, time constraints (min/max), and standard clock behaviors.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the time clock
+ * @param {Date | null} value - {Date | null} Current selected time value (controlled component)
+ * @param {Date | null} [defaultValue] - {Date | null} Default time value
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below time clock
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {TimeView[]} [views=['hours', 'minutes']] - {TimeView[]} Available views (hours, minutes, seconds)
+ * @param {boolean} [ampmInClock=false] - {boolean} Whether to show AM/PM in the clock
+ * @param {boolean} [ampm=true] - {boolean} Whether to use 12-hour format
+ * @param {boolean} [disablePast=false] - {boolean} Whether to disable past times
+ * @param {boolean} [disableFuture=false] - {boolean} Whether to disable future times
+ * @param {Date} [minTime] - {Date} Minimum selectable time
+ * @param {Date} [maxTime] - {Date} Maximum selectable time
+ * @param {(time: Date, view: TimeView) => boolean} [shouldDisableTime] - {Function} Function to disable specific times
+ * @param {TimeClockProps<TimeView>['sx']} [clockStyles] - {TimeClockProps<TimeView>['sx']} Custom styles for the TimeClock component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {BoxProps['sx']} [containerStyles] - {BoxProps['sx']} Custom styles for the container Box
+ * @param {StackProps['sx']} [buttonsStackStyles] - {StackProps['sx']} Custom styles for the view buttons Stack
+ * @param {ButtonProps['sx']} [buttonStyles] - {ButtonProps['sx']} Custom styles for view buttons
+ * @param {ButtonProps['sx']} [activeButtonStyles] - {ButtonProps['sx']} Custom styles for active view button
+ * @param {boolean} [showViewButtons=true] - {boolean} Whether to show view selector buttons
+ * @param {TimeView} [initialView='hours'] - {TimeView} Initial view
+ * @param {TimeView} [view] - {TimeView} Controlled view state
+ * @param {(value: Date | null) => void} [onChange] - {(value: Date | null) => void} Callback fired when value changes
+ * @param {(view: TimeView) => void} [onViewChange] - {Function} Callback fired when a view change is requested
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI X v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI X v7
+ * @param {typeof AdapterDateFns} [dateAdapter=AdapterDateFns] - {Type} Date adapter to use
+ * @param {boolean} [autoFocus=false] - {boolean} Auto focus
+ *
+ * @returns {JSX.Element} The Time Clock Field component
+ *
+ * @usage
+ * ```tsx
+ * import TimeClockField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [time, setTime] = useState<Date | null>(new Date());
+ *
+ *   return (
+ *     <TimeClockField
+ *       name="myTimeClock"
+ *       label="Select Time"
+ *       value={time}
+ *       onChange={(newTime) => setTime(newTime)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const TimeClockField: React__default.ForwardRefExoticComponent<ITimeClockFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -596,7 +1236,7 @@ type FieldError$b = {
  * Extended Time Picker Field Props
  * Extends MUI TimePickerProps with custom form field props
  */
-interface ITimePickerFieldProps extends Omit<TimePickerProps, "value" | "onChange" | "defaultValue" | "slots" | "slotProps" | "renderInput" | "onViewChange"> {
+interface ITimePickerFieldProps extends Omit<TimePickerProps<Date>, "value" | "onChange" | "defaultValue" | "slots" | "slotProps" | "renderInput" | "onViewChange"> {
     /** Field name for form identification */
     name?: string;
     /** Label text for the time picker */
@@ -650,7 +1290,7 @@ interface ITimePickerFieldProps extends Omit<TimePickerProps, "value" | "onChang
     /** Format for displaying the time */
     format?: string;
     /** Custom styles for the TimePicker */
-    pickerStyles?: TimePickerProps["sx"];
+    pickerStyles?: TimePickerProps<Date>["sx"];
     /** Custom styles for FormControl */
     formControlStyles?: React__default.ComponentProps<typeof FormControl>["sx"];
     /** Custom styles for FormLabel */
@@ -672,14 +1312,91 @@ interface ITimePickerFieldProps extends Omit<TimePickerProps, "value" | "onChang
     /** Callback fired when the picker closes */
     onClose?: () => void;
     /** Custom slot props for MUI v7 */
-    slotProps?: TimePickerProps["slotProps"];
+    slotProps?: TimePickerProps<Date>["slotProps"];
     /** Custom slots for MUI v7 */
-    slots?: TimePickerProps["slots"];
+    slots?: TimePickerProps<Date>["slots"];
     /** Date adapter to use (defaults to AdapterDateFns) */
     dateAdapter?: typeof AdapterDateFns;
     /** Auto focus the input */
     autoFocus?: boolean;
 }
+/**
+ * Time Picker Field Component
+ *
+ * A customizable time picker field built on top of Material UI X TimePicker and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible time picker with support for: error handling, helper text, clear button,
+ * AM/PM support, time constraints (min/max), and standard time picker behaviors.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the time picker
+ * @param {Date | null} value - {Date | null} Current selected time value (controlled component)
+ * @param {Date | null} [defaultValue] - {Date | null} Default time value
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below field
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [title=false] - {boolean} Whether to show label as a separate title above the picker
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {Date} [minTime] - {Date} Minimum selectable time
+ * @param {Date} [maxTime] - {Date} Maximum selectable time
+ * @param {(time: Date, view: string) => boolean} [shouldDisableTime] - {Function} Function to disable specific times
+ * @param {TextFieldProps['size']} [size='medium'] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {boolean} [readOnly=false] - {boolean} Whether the field is read-only
+ * @param {boolean} [showClearButton=true] - {boolean} Whether to show clear button
+ * @param {boolean} [disablePast=false] - {boolean} Whether to disable past times
+ * @param {boolean} [disableFuture=false] - {boolean} Whether to disable future times
+ * @param {boolean} [ampm=true] - {boolean} Whether to use 12-hour format
+ * @param {string[]} [views] - {string[]} Available views (hours, minutes, seconds)
+ * @param {string} [view] - {string} Controlled view state
+ * @param {string} [openTo='hours'] - {string} Default view to open
+ * @param {string} [format] - {string} Format for displaying the time
+ * @param {TimePickerProps['sx']} [pickerStyles] - {TimePickerProps['sx']} Custom styles for the TimePicker component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {BoxProps['sx']} [containerStyles] - {BoxProps['sx']} Custom styles for the container Box
+ * @param {TextFieldProps['sx']} [textFieldStyles] - {TextFieldProps['sx']} Custom styles for the internal TextField
+ * @param {(value: Date | null) => void} [onChange] - {(value: Date | null) => void} Callback fired when value changes
+ * @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onFocus] - {Function} Callback when field receives focus
+ * @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onViewChange] - {Function} Callback fired when a view change is requested
+ * @param {Function} [onOpen] - {Function} Callback fired when the picker opens
+ * @param {Function} [onClose] - {Function} Callback fired when the picker closes
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI X v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI X v7
+ * @param {typeof AdapterDateFns} [dateAdapter=AdapterDateFns] - {Type} Date adapter to use
+ * @param {boolean} [autoFocus=false] - {boolean} Auto focus the input
+ *
+ * @returns {JSX.Element} The Time Picker Field component
+ *
+ * @usage
+ * ```tsx
+ * import TimePickerField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [time, setTime] = useState<Date | null>(null);
+ *
+ *   return (
+ *     <TimePickerField
+ *       name="myTimePicker"
+ *       label="Select Time"
+ *       value={time}
+ *       onChange={(newTime) => setTime(newTime)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const TimePickerField: React__default.ForwardRefExoticComponent<ITimePickerFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -692,7 +1409,7 @@ type FieldError$a = {
  * Extended Date Picker Field Props
  * Extends MUI DatePickerProps with custom form field props
  */
-interface IDatePickerFieldProps extends Omit<DatePickerProps, "value" | "onChange" | "defaultValue" | "slots" | "slotProps" | "renderInput"> {
+interface IDatePickerFieldProps extends Omit<DatePickerProps<Date>, "value" | "onChange" | "defaultValue" | "slots" | "slotProps" | "renderInput"> {
     /** Field name for form identification */
     name?: string;
     /** Label text for the date picker */
@@ -747,7 +1464,7 @@ interface IDatePickerFieldProps extends Omit<DatePickerProps, "value" | "onChang
     /** Whether to open the calendar on focus */
     openTo?: "day" | "month" | "year";
     /** Custom styles for the DatePicker */
-    pickerStyles?: DatePickerProps["sx"];
+    pickerStyles?: DatePickerProps<Date>["sx"];
     /** Custom styles for FormControl */
     formControlStyles?: React__default.ComponentProps<typeof FormControl>["sx"];
     /** Custom styles for FormLabel */
@@ -773,9 +1490,9 @@ interface IDatePickerFieldProps extends Omit<DatePickerProps, "value" | "onChang
     /** Callback fired when the calendar closes */
     onClose?: () => void;
     /** Custom slot props for MUI v7 */
-    slotProps?: DatePickerProps["slotProps"];
+    slotProps?: DatePickerProps<Date>["slotProps"];
     /** Custom slots for MUI v7 */
-    slots?: DatePickerProps["slots"];
+    slots?: DatePickerProps<Date>["slots"];
     /** Date adapter to use (defaults to AdapterDateFns) */
     dateAdapter?: typeof AdapterDateFns;
     /** Whether to reduce animations */
@@ -783,6 +1500,87 @@ interface IDatePickerFieldProps extends Omit<DatePickerProps, "value" | "onChang
     /** Auto focus the input */
     autoFocus?: boolean;
 }
+/**
+ * Date Picker Field Component
+ *
+ * A customizable date picker field built on top of Material UI X DatePicker and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible date picker with support for: error handling, helper text, clear button,
+ * custom formatting, date constraints (min/max), and standard date picker behaviors.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the date picker
+ * @param {boolean} [title=false] - {boolean} Whether to show label as a separate title above the picker
+ * @param {Date | null} value - {Date | null} Current selected date value (controlled component)
+ * @param {Date | null} [defaultValue] - {Date | null} Default date value
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below field
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {Date} [minDate] - {Date} Minimum selectable date
+ * @param {Date} [maxDate] - {Date} Maximum selectable date
+ * @param {(date: Date) => boolean} [shouldDisableDate] - {Function} Function to disable specific dates
+ * @param {(month: Date) => boolean} [shouldDisableMonth] - {Function} Function to disable specific months
+ * @param {(year: Date) => boolean} [shouldDisableYear] - {Function} Function to disable specific years
+ * @param {TextFieldProps['size']} [size='medium'] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {boolean} [readOnly=false] - {boolean} Whether the field is read-only
+ * @param {boolean} [showClearButton=true] - {boolean} Whether to show clear button
+ * @param {boolean} [disablePast=false] - {boolean} Whether to disable past dates
+ * @param {boolean} [disableFuture=false] - {boolean} Whether to disable future dates
+ * @param {Date} [referenceDate] - {Date} Reference date for the calendar
+ * @param {'day' | 'month' | 'year'} [view] - {'day' | 'month' | 'year'} Controlled view state
+ * @param {string} [format] - {string} Format for displaying the date
+ * @param {'day' | 'month' | 'year'} [openTo='day'] - {string} Whether to open the calendar on focus
+ * @param {DatePickerProps['sx']} [pickerStyles] - {DatePickerProps['sx']} Custom styles for the DatePicker component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {BoxProps['sx']} [containerStyles] - {BoxProps['sx']} Custom styles for the container Box
+ * @param {TextFieldProps['sx']} [textFieldStyles] - {TextFieldProps['sx']} Custom styles for the internal TextField
+ * @param {(value: Date | null) => void} [onChange] - {(value: Date | null) => void} Callback fired when value changes
+ * @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onFocus] - {Function} Callback when field receives focus
+ * @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onViewChange] - {Function} Callback fired when a view change is requested
+ * @param {Function} [onMonthChange] - {Function} Callback fired when a month change is requested
+ * @param {Function} [onYearChange] - {Function} Callback fired when a year change is requested
+ * @param {Function} [onOpen] - {Function} Callback fired when the calendar opens
+ * @param {Function} [onClose] - {Function} Callback fired when the calendar closes
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI X v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI X v7
+ * @param {typeof AdapterDateFns} [dateAdapter=AdapterDateFns] - {Type} Date adapter to use
+ * @param {boolean} [reduceAnimations=false] - {boolean} Whether to reduce animations
+ * @param {boolean} [autoFocus=false] - {boolean} Auto focus the input
+ *
+ * @returns {JSX.Element} The Date Picker Field component
+ *
+ * @usage
+ * ```tsx
+ * import DatePickerField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [date, setDate] = useState<Date | null>(null);
+ *
+ *   return (
+ *     <DatePickerField
+ *       name="myDatePicker"
+ *       label="Select Date"
+ *       value={date}
+ *       onChange={(newDate) => setDate(newDate)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const DatePickerField: React__default.ForwardRefExoticComponent<IDatePickerFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -869,6 +1667,79 @@ interface IFileUploadFieldProps extends Omit<TextFieldProps, "value" | "onChange
     /** Custom slots for MUI v7 */
     slots?: TextFieldProps["slots"];
 }
+/**
+ * File Upload Field Component
+ *
+ * A versatile file upload field built on top of Material UI TextField and native file input.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a file selection interface with support for: single/multiple files,
+ * drag and drop, file validation (size, type), file preview, clear functionality, and standard form field behaviors.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string} [label] - {string} Label text for the file upload field
+ * @param {File | File[] | { name: string } | null} [value] - {File | File[] | { name: string } | null} Current file(s)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below field
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [accept] - {string} File types to accept (e.g., "image/*", ".pdf")
+ * @param {boolean} [multiple=false] - {boolean} Whether to allow multiple file selection
+ * @param {number} [maxSize] - {number} Maximum file size in bytes
+ * @param {number} [minSize] - {number} Minimum file size in bytes
+ * @param {string[]} [allowedTypes] - {string[]} Allowed file types (MIME types or extensions)
+ * @param {boolean} [showPreview=true] - {boolean} Whether to show file name preview
+ * @param {boolean} [enableDragDrop=false] - {boolean} Whether to enable drag and drop
+ * @param {string} [placeholder='No file chosen'] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {string} [buttonText='Upload'] - {string} Upload button text
+ * @param {ButtonProps['variant']} [buttonVariant='contained'] - {ButtonProps['variant']} Upload button variant
+ * @param {ButtonProps['color']} [buttonColor='primary'] - {ButtonProps['color']} Upload button color
+ * @param {ButtonProps['size']} [buttonSize] - {ButtonProps['size']} Upload button size
+ * @param {React.ReactNode} [uploadIcon] - {React.ReactNode} Custom upload icon
+ * @param {(file: File | File[] | undefined) => void} [onChange] - {(file: File | File[] | undefined) => void} Callback fired when files change
+ * @param {Function} [onFileSelect] - {Function} Callback fired when file is selected
+ * @param {Function} [onFileRemove] - {Function} Callback fired when file is removed
+ * @param {(error: string) => void} [onValidationError] - {(error: string) => void} Callback fired on validation error
+ * @param {(files: FileList) => void} [onDrop] - {(files: FileList) => void} Callback fired when file is dropped
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the internal TextField
+ * @param {ButtonProps['sx']} [buttonStyles] - {ButtonProps['sx']} Custom styles for the Upload button
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {React.CSSProperties} [containerStyles] - {React.CSSProperties} Custom styles for the container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The File Upload Field component
+ *
+ * @usage
+ * ```tsx
+ * import FileUploadField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [file, setFile] = useState<File | File[] | undefined>(null);
+ *
+ *   return (
+ *     <FileUploadField
+ *       name="resume"
+ *       label="Upload Resume"
+ *       value={file}
+ *       onChange={(newFile) => setFile(newFile)}
+ *       accept=".pdf,.doc,.docx"
+ *       enableDragDrop
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const FileUploadField: React__default.ForwardRefExoticComponent<Omit<IFileUploadFieldProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
 /**
@@ -880,11 +1751,11 @@ type FieldError$8 = {
 /**
  * Color format types
  */
-type ColorFormat = 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
+type ColorFormat = "hex" | "rgb" | "rgba" | "hsl" | "hsla";
 /**
  * Extended Color Picker Field Props
  */
-interface IColorPickerFieldProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'name' | 'type' | 'error' | 'inputRef' | 'multiline' | 'variant' | 'size'> {
+interface IColorPickerFieldProps extends Omit<TextFieldProps, "value" | "onChange" | "name" | "type" | "error" | "inputRef" | "multiline" | "variant" | "size"> {
     /** Field name for form identification */
     name?: string;
     /** Label text for the color picker field */
@@ -900,11 +1771,11 @@ interface IColorPickerFieldProps extends Omit<TextFieldProps, 'value' | 'onChang
     /** Placeholder text */
     placeholder?: string;
     /** TextField variant */
-    variant?: TextFieldProps['variant'];
+    variant?: TextFieldProps["variant"];
     /** TextField size */
-    size?: TextFieldProps['size'];
+    size?: TextFieldProps["size"];
     /** TextField color */
-    color?: TextFieldProps['color'];
+    color?: TextFieldProps["color"];
     /** Full width of the field */
     fullWidth?: boolean;
     /** Required field indicator */
@@ -932,14 +1803,73 @@ interface IColorPickerFieldProps extends Omit<TextFieldProps, 'value' | 'onChang
     /** Custom styles for the color preview swatch */
     previewStyles?: React__default.CSSProperties;
     /** Custom styles for FormControl */
-    formControlStyles?: FormControlProps['sx'];
+    formControlStyles?: FormControlProps["sx"];
     /** Custom styles for TextField */
-    inputStyles?: TextFieldProps['sx'];
+    inputStyles?: TextFieldProps["sx"];
     /** Custom slot props for MUI v7 */
-    slotProps?: TextFieldProps['slotProps'];
+    slotProps?: TextFieldProps["slotProps"];
     /** Custom slots for MUI v7 */
-    slots?: TextFieldProps['slots'];
+    slots?: TextFieldProps["slots"];
 }
+/**
+ * Color Picker Field Component
+ *
+ * A customizable color picker field built on top of Material UI TextField and native color input.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a color selection input with support for: hex values, color preview swatch,
+ * native color picker integration, error handling, helper text, and standard text field behaviors.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string} [label] - {string} Label text for the color picker field
+ * @param {string} value - {string} Current color value (hex string)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below field
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder='#000000'] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']|'primary'} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {ColorFormat} [format='hex'] - {ColorFormat} Color format (currently hex supported)
+ * @param {boolean} [showPreview=true] - {boolean} Whether to show color preview swatch
+ * @param {(value: string) => void} [onChange] - {(value: string) => void} Callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {React.CSSProperties} [previewStyles] - {React.CSSProperties} Custom styles for the color preview swatch
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for TextField
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Color Picker Field component
+ *
+ * @usage
+ * ```tsx
+ * import ColorPickerField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [color, setColor] = useState("#3f51b5");
+ *
+ *   return (
+ *     <ColorPickerField
+ *       name="brandColor"
+ *       label="Choose Brand Color"
+ *       value={color}
+ *       onChange={(newColor) => setColor(newColor)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const ColorPickerField: React__default.NamedExoticComponent<Omit<IColorPickerFieldProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 type AutoCompleteOption = {
@@ -1032,6 +1962,77 @@ interface IAutoCompleteInputProps<T extends AutoCompleteOption = AutoCompleteOpt
     /** Custom slots for MUI v7 */
     slots?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>["slots"];
 }
+/**
+ * AutoComplete Field Component
+ *
+ * A highly customizable autocomplete search and dropdown field built on top of Material UI Autocomplete and TextField.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a searchable dropdown with support for: single/multiple selection, remote/local options,
+ * error handling, helper text, custom option rendering, and standard autocomplete behaviors.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string} [label] - {string} Label text for the input field
+ * @param {T | T[] | null} value - {T | T[] | null} Current selected value(s) (controlled component)
+ * @param {T[]} options - {T[]} Array of options to display in dropdown
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below input
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {Function} [getOptionLabel] - {Function} Custom function to get option label
+ * @param {Function} [isOptionEqualToValue] - {Function} Custom function to check option equality
+ * @param {Function} [renderOption] - {Function} Custom render function for options
+ * @param {Function} [onChange] - {Function} Callback fired when value changes
+ * @param {Function} [onInputChange] - {Function} Callback fired when input value changes
+ * @param {Function} [onOpen] - {Function} Callback fired when popup opens
+ * @param {Function} [onClose] - {Function} Callback fired when popup closes
+ * @param {React.ReactNode} [popupIcon] - {React.ReactNode} Custom icon for popup indicator
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the internal TextField
+ * @param {AutocompleteProps['sx']} [autocompleteStyles] - {AutocompleteProps['sx']} Custom styles for the Autocomplete component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {boolean} [loading=false] - {boolean} Whether to show loading state
+ * @param {React.ReactNode} [loadingText='Loading...'] - {React.ReactNode} Text to show when loading
+ * @param {React.ReactNode} [noOptionsText='No options'] - {React.ReactNode} Text to show when no options available
+ * @param {Function} [filterOptions] - {Function} Custom filter options function
+ * @param {boolean} [autoHighlight=true] - {boolean} Whether to highlight the first option
+ * @param {boolean} [autoSelect=false] - {boolean} Whether to select the first option on highlight
+ * @param {boolean} [disablePortal=false] - {boolean} Whether to disable portal rendering
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The AutoComplete Field component
+ *
+ * @usage
+ * ```tsx
+ * import AutoCompleteField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [val, setVal] = useState(null);
+ *   const options = [{ name: "Option 1", value: 1 }, { name: "Option 2", value: 2 }];
+ *
+ *   return (
+ *     <AutoCompleteField
+ *       name="myAutocomplete"
+ *       label="Select Option"
+ *       value={val}
+ *       options={options}
+ *       onChange={(e, newVal) => setVal(newVal)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const AutoCompleteField: React__default.NamedExoticComponent<Omit<IAutoCompleteInputProps<AutoCompleteOption, boolean, boolean, boolean>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -1113,6 +2114,73 @@ interface ISelectInputFieldProps extends Omit<SelectProps<string | number | (str
     /** Menu props */
     MenuProps?: SelectProps["MenuProps"];
 }
+/**
+ * Select Input Field Component
+ *
+ * A customizable dropdown selection field built on top of Material UI Select and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible dropdown with support for: single/multiple selection,
+ * error handling, helper text, custom menu item rendering, and standard select behaviors.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string} [label] - {string} Label text for the select field
+ * @param {string | number | (string | number)[] | ''} value - {string | number | (string | number)[] | ''} Current selected value(s) (controlled component)
+ * @param {SelectOption[]} options - {SelectOption[]} Array of options to display in dropdown
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below select
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {SelectProps['variant']} [variant='outlined'] - {SelectProps['variant']} Select variant
+ * @param {SelectProps['size']} [size] - {SelectProps['size']} Select size
+ * @param {SelectProps['color']} [color] - {SelectProps['color']} Select color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {boolean} [multiple=false] - {boolean} Whether to allow multiple selections
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for dropdown indicator
+ * @param {SelectProps['renderValue']} [renderValue] - {Function} Custom render function for selected value(s)
+ * @param {Function} [renderMenuItem] - {Function} Custom render function for menu items
+ * @param {MenuItemProps['sx'] | Function} [menuItemStyles] - {Object|Function} Custom styles for MenuItem
+ * @param {SelectProps['sx']} [selectStyles] - {SelectProps['sx']} Custom styles for the Select component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {InputLabelProps['sx']} [labelStyles] - {InputLabelProps['sx']} Custom styles for InputLabel
+ * @param {Function} [onChange] - {Function} Callback fired when value changes
+ * @param {Function} [onOpen] - {Function} Callback fired when menu opens
+ * @param {Function} [onClose] - {Function} Callback fired when menu closes
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ * @param {boolean} [displayEmpty=false] - {boolean} Whether to display empty value
+ * @param {boolean} [autoWidth=false] - {boolean} Whether the menu should have auto width
+ * @param {boolean} [native=false] - {boolean} Whether to use native select element
+ * @param {SelectProps['MenuProps']} [MenuProps] - {Object} Custom Menu props
+ *
+ * @returns {JSX.Element} The Select Input Field component
+ *
+ * @usage
+ * ```tsx
+ * import SelectInputField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [val, setVal] = useState("");
+ *   const options = [{ name: "Option 1", value: "1" }, { name: "Option 2", value: "2" }];
+ *
+ *   return (
+ *     <SelectInputField
+ *       name="mySelect"
+ *       label="Select Option"
+ *       value={val}
+ *       options={options}
+ *       onChange={(e) => setVal(e.target.value)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const SelectInputField: React__default.ForwardRefExoticComponent<Omit<ISelectInputFieldProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
 /**
@@ -1176,6 +2244,69 @@ interface IOTPInputFieldProps extends Omit<TextFieldProps, "value" | "onChange"
     /** Custom slots for MUI v7 */
     slots?: TextFieldProps["slots"];
 }
+/**
+ * OTP Field Component
+ *
+ * A specialized multi-box input field for One-Time Passwords (OTP) built on top of Material UI TextField.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a series of individual input boxes for OTP entry with support for:
+ * automatic focus shifting, backspace handling, pasting multiple digits, error handling, and completion callbacks.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string} [label] - {string} Label text for the OTP field
+ * @param {string} value - {string} Current OTP value (string of digits)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below field
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {number} [length=6] - {number} Number of OTP input boxes
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {number} [spacing=1] - {number} Spacing between OTP boxes
+ * @param {boolean} [autoFocus=false] - {boolean} Whether to auto-focus first input on mount
+ * @param {boolean} [autoSubmit=false] - {boolean} Whether to auto-submit when all boxes are filled
+ * @param {(value: string) => void} [onChange] - {(value: string) => void} Callback fired when value changes
+ * @param {(value: string) => void} [onComplete] - {(value: string) => void} Callback fired when all boxes are filled
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {React.CSSProperties} [containerStyles] - {React.CSSProperties} Custom styles for the OTP container
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for individual OTP input boxes
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The OTP Field component
+ *
+ * @usage
+ * ```tsx
+ * import OTPField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [otp, setOtp] = useState("");
+ *
+ *   return (
+ *     <OTPField
+ *       name="otp"
+ *       label="Enter Verification Code"
+ *       value={otp}
+ *       length={6}
+ *       onChange={(val) => setOtp(val)}
+ *       onComplete={(val) => console.log("OTP Complete:", val)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const OTPField: React__default.ForwardRefExoticComponent<Omit<IOTPInputFieldProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -1254,6 +2385,75 @@ interface ISearchInputFieldProps extends Omit<TextFieldProps, "value" | "onChang
     /** Custom slots for MUI v7 */
     slots?: TextFieldProps["slots"];
 }
+/**
+ * Search Input Field Component
+ *
+ * A specialized search input field built on top of Material UI TextField with search and clear functionality.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a robust search interface with support for: debounced/throttled search callbacks,
+ * clear button, search button, Enter key handling, error handling, and helper text.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string} [label] - {string} Label text for the search field
+ * @param {string} value - {string} Current search value (controlled component)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below field
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {boolean} [showClearButton=true] - {boolean} Whether to show clear button when input has value
+ * @param {boolean} [showSearchButton=true] - {boolean} Whether to show search button icon
+ * @param {React.ReactNode} [clearIcon] - {React.ReactNode} Custom clear icon
+ * @param {React.ReactNode} [searchIcon] - {React.ReactNode} Custom search icon
+ * @param {IconButtonProps} [clearButtonProps] - {IconButtonProps} Custom props for clear button
+ * @param {IconButtonProps} [searchButtonProps] - {IconButtonProps} Custom props for search button
+ * @param {Function} [onChange] - {Function} Callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {(value: string) => void} [onSearch] - {(value: string) => void} Callback fired for search (can be debounced/throttled)
+ * @param {Function} [onClear] - {Function} Callback fired when clear button is clicked
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {boolean} [enableDebounce=true] - {boolean} Enable debounce for search callback
+ * @param {number} [debounceDelay=300] - {number} Debounce delay in milliseconds
+ * @param {boolean} [enableThrottle=false] - {boolean} Enable throttle for search callback
+ * @param {number} [throttleDelay=300] - {number} Throttle delay in milliseconds
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the TextField
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Search Input Field component
+ *
+ * @usage
+ * ```tsx
+ * import SearchField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [search, setSearch] = useState("");
+ *
+ *   return (
+ *     <SearchField
+ *       name="userSearch"
+ *       label="Search Users"
+ *       value={search}
+ *       onSearch={(val) => console.log("Searching for:", val)}
+ *       onChange={(e) => setSearch(e.target.value)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const SearchField: React__default.NamedExoticComponent<Omit<ISearchInputFieldProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
 /**
@@ -1322,6 +2522,72 @@ interface ITelInputFieldProps extends Omit<TextFieldProps, "value" | "onChange"
     /** Custom slots for MUI v7 */
     slots?: TextFieldProps["slots"];
 }
+/**
+ * Telephone Input Field Component
+ *
+ * A specialized telephone number input field built on top of Material UI TextField with pattern formatting.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a telephone input with support for: automatic pattern-based formatting,
+ * country code prefix, digits-only value management, error handling, helper text, and standard text field behaviors.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string} [label] - {string} Label text for the tel field
+ * @param {string} value - {string} Current tel value (digits only, controlled component)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below field
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text (auto-generated from pattern if not provided)
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {string} [pattern='XXXXXXXXXX'] - {string} Pattern string (e.g., 'XXX-XXXX' where X represents digits)
+ * @param {number} [maxLength] - {number} Maximum digits allowed
+ * @param {string} [countryCode='+1'] - {string} Country code prefix text
+ * @param {boolean} [showCountryCode=false] - {boolean} Whether to show country code as start adornment
+ * @param {React.ReactNode} [startAdornment] - {React.ReactNode} Adornment before input
+ * @param {React.ReactNode} [endAdornment] - {React.ReactNode} Adornment after input
+ * @param {Function} [onChange] - {Function} Callback fired when value changes (returns digits only)
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the TextField
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {React.CSSProperties} [countryCodeStyles] - {React.CSSProperties} Custom styles for country code display
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Telephone Input Field component
+ *
+ * @usage
+ * ```tsx
+ * import TeliField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [phone, setPhone] = useState("");
+ *
+ *   return (
+ *     <TeliField
+ *       name="mobile"
+ *       label="Mobile Number"
+ *       value={phone}
+ *       pattern="XXX-XXX-XXXX"
+ *       showCountryCode
+ *       countryCode="+91"
+ *       onChange={(e) => setPhone(e.target.value)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const TeliField: React__default.NamedExoticComponent<Omit<ITelInputFieldProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -1400,6 +2666,73 @@ interface INumberInputFieldProps extends Omit<TextFieldProps, "value" | "onChang
     /** Custom slots for MUI v7 */
     slots?: TextFieldProps["slots"];
 }
+/**
+ * Number Field Component
+ *
+ * A highly customizable numeric input field built on top of Material UI TextField and FormControl.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a numeric input with advanced formatting support for: phone numbers,
+ * credit cards, currency, SSN, ZIP codes, percentages, decimals, and custom patterns.
+ * It handles input validation, automatic formatting, and integrates seamlessly with React Hook Form.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string} [label] - {string} Label text for the number field
+ * @param {string} value - {string} Current number value (controlled component)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below field
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {NumberPattern | string} [pattern='integer'] - {NumberPattern | string} Number pattern type or custom pattern string
+ * @param {RegExp} [customPattern] - {RegExp} Custom regex pattern (for pattern="custom")
+ * @param {(value: string) => string} [customFormatter] - {Function} Custom formatter function
+ * @param {number} [min] - {number} Minimum value
+ * @param {number} [max] - {number} Maximum value
+ * @param {number} [step] - {number} Step value for number input
+ * @param {boolean} [allowDecimals=true] - {boolean} Whether to allow decimal numbers
+ * @param {number} [decimalPlaces=2] - {number} Number of decimal places allowed
+ * @param {React.ReactNode} [startAdornment] - {React.ReactNode} Adornment before input
+ * @param {React.ReactNode} [endAdornment] - {React.ReactNode} Adornment after input
+ * @param {Function} [onChange] - {Function} Callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the TextField
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Number Field component
+ *
+ * @usage
+ * ```tsx
+ * import NumberField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [phone, setPhone] = useState("");
+ *
+ *   return (
+ *     <NumberField
+ *       name="phone"
+ *       label="Phone Number"
+ *       value={phone}
+ *       pattern="phone"
+ *       onChange={(e) => setPhone(e.target.value)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const NumberField: React__default.NamedExoticComponent<Omit<INumberInputFieldProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -1474,6 +2807,71 @@ interface IPasswordFieldProps extends Omit<TextFieldProps, "value" | "onChange"
     /** Custom slots for MUI v7 */
     slots?: TextFieldProps["slots"];
 }
+/**
+ * Password Field Component
+ *
+ * A specialized password input field built on top of Material UI TextField with visibility toggle.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a secure password input with support for: visibility toggling,
+ * password strength indicator, error handling, helper text, and length validation.
+ * It integrates seamlessly with form management libraries like React Hook Form through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string} [label] - {string} Label text for the password field
+ * @param {string} value - {string} Current password value (controlled component)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below field
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {boolean} [showPasswordStrength=false] - {boolean} Whether to show password strength indicator
+ * @param {number} [minLength] - {number} Minimum password length
+ * @param {number} [maxLength] - {number} Maximum password length
+ * @param {boolean} [defaultShowPassword=false] - {boolean} Whether to show password by default
+ * @param {React.ReactNode} [visibilityIcon] - {React.ReactNode} Custom visibility icon
+ * @param {React.ReactNode} [visibilityOffIcon] - {React.ReactNode} Custom visibility off icon
+ * @param {IconButtonProps} [iconButtonProps] - {IconButtonProps} Custom icon button props
+ * @param {Function} [onChange] - {Function} Callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onVisibilityToggle] - {Function} Callback when visibility toggles
+ * @param {Function} [getPasswordStrength] - {Function} Custom strength calculation function
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the TextField
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Password Field component
+ *
+ * @usage
+ * ```tsx
+ * import PasswordField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [pwd, setPwd] = useState("");
+ *
+ *   return (
+ *     <PasswordField
+ *       name="password"
+ *       label="Password"
+ *       value={pwd}
+ *       showPasswordStrength
+ *       onChange={(e) => setPwd(e.target.value)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const PasswordField: React__default.NamedExoticComponent<Omit<IPasswordFieldProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
 /**
@@ -1560,8 +2958,82 @@ interface ITextInputFieldProps extends Omit<TextFieldProps, "value" | "onChange"
     /** Text transformation option */
     textTransform?: TextTransformOption;
 }
+/**
+ * Text Input Field Component
+ *
+ * A versatile text input field built on top of Material UI TextField with support for various text types and transformations.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible text input with support for: single-line and multiline (textarea),
+ * text transformations (uppercase, lowercase, capitalize), error handling, helper text, custom adornments,
+ * and standard text field behaviors. It integrates seamlessly with form management libraries like React Hook Form
+ * through the use of `forwardRef`.
+ *
+ * @param {string} [name] - {string} Field name for form identification
+ * @param {string} [label] - {string} Label text for the text field
+ * @param {string} value - {string} Current text value (controlled component)
+ * @param {FieldError} [error] - {FieldError} Error object with optional message
+ * @param {string} [helperText] - {string} Helper text to display below field
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {boolean} [multiline=false] - {boolean} Whether to enable multiline input (textarea)
+ * @param {number} [rows] - {number} Number of rows for multiline input
+ * @param {number} [minRows] - {number} Minimum number of rows for multiline input
+ * @param {number} [maxRows] - {number} Maximum number of rows for multiline input
+ * @param {ResizeOption} [resize='both'] - {ResizeOption} Resize option for textarea
+ * @param {number} [maxLength] - {number} Maximum length of input
+ * @param {number} [minLength] - {number} Minimum length of input
+ * @param {string} [type='text'] - {string} Input type (text, email, url, etc.)
+ * @param {string} [autoComplete='off'] - {string} Auto complete attribute
+ * @param {React.ReactNode} [startAdornment] - {React.ReactNode} Adornment before input
+ * @param {React.ReactNode} [endAdornment] - {React.ReactNode} Adornment after input
+ * @param {Function} [onChange] - {Function} Callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the TextField
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ * @param {TextTransformOption} [textTransform] - {TextTransformOption} Text transformation option
+ *
+ * @returns {JSX.Element} The Text Input Field component
+ *
+ * @usage
+ * ```tsx
+ * import TextInputField from "@react-solutions/inputs";
+ * import { useState } from "react";
+ *
+ * function MyForm() {
+ *   const [name, setName] = useState("");
+ *
+ *   return (
+ *     <TextInputField
+ *       name="fullName"
+ *       label="Full Name"
+ *       value={name}
+ *       textTransform="capitalize"
+ *       onChange={(e) => setName(e.target.value)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const TextInputField: React__default.NamedExoticComponent<Omit<ITextInputFieldProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
+declare const NormalForm: () => react_jsx_runtime.JSX.Element;
+
+declare const ReactHookForm: () => react_jsx_runtime.JSX.Element;
+
 /**
  * Base option type for dropdown fields
  */
@@ -1644,7 +3116,7 @@ interface IFormInputDateFields<TFieldValues extends FieldValues = FieldValues> e
     /** Whether to use 12-hour format (AM/PM) */
     ampm?: boolean;
     /** Views to show in picker */
-    views?: TimeView[];
+    views?: any[];
     /** Whether to show AM/PM in clock */
     ampmInClock?: boolean;
     /** Whether to disable past dates */
@@ -1705,55 +3177,1637 @@ interface IFormInputCheckBoxGroupFields<TFieldValues extends FieldValues = Field
     labelPlacement?: "end" | "start" | "top" | "bottom";
 }
 
-declare const FormInputTextField: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input Number Component
+ *
+ * A highly customizable numeric input field built on top of Material UI TextField and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a numeric input with advanced formatting support for: phone numbers,
+ * credit cards, currency, SSN, ZIP codes, percentages, decimals, and custom patterns.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the number field
+ * @param {string} [defaultValue=''] - {string} Default number value
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {string} [pattern='integer'] - {string} Number pattern type or custom pattern string
+ * @param {RegExp} [customPattern] - {RegExp} Custom regex pattern (for pattern="custom")
+ * @param {(value: string) => string} [customFormatter] - {Function} Custom formatter function
+ * @param {number} [min] - {number} Minimum value
+ * @param {number} [max] - {number} Maximum value
+ * @param {number} [step] - {number} Step value for number input
+ * @param {boolean} [allowDecimals=true] - {boolean} Whether to allow decimal numbers
+ * @param {number} [decimalPlaces=2] - {number} Number of decimal places allowed
+ * @param {React.ReactNode} [startAdornment] - {React.ReactNode} Adornment before input
+ * @param {React.ReactNode} [endAdornment] - {React.ReactNode} Adornment after input
+ * @param {(value: string) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the TextField
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Form Input Number component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputNumberField } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputNumberField
+ *       name="phone"
+ *       label="Phone Number"
+ *       control={control}
+ *       pattern="phone"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputNumberField: React__default.MemoExoticComponent<({ name, label, control, pattern, min, max, step, allowDecimals, decimalPlaces, defaultValue, onChange, ...props }: IFormInputNumberFields) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputTextArea: React__default.MemoExoticComponent<({ name, label, control, rows, minRows, maxRows, resize, defaultValue, onChange, ...props }: IFormInputTextAreaFields) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input OTP Component
+ *
+ * A specialized multi-box input field for One-Time Passwords (OTP) built on top of Material UI TextField,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a series of individual input boxes for OTP entry with support for:
+ * automatic focus shifting, backspace handling, pasting multiple digits, error handling, and completion callbacks.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the OTP field
+ * @param {string} [defaultValue=''] - {string} Default OTP value
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {number} [length=6] - {number} Number of OTP input boxes
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {number} [spacing=1] - {number} Spacing between OTP boxes
+ * @param {boolean} [autoFocus=false] - {boolean} Whether to auto-focus first input on mount
+ * @param {boolean} [autoSubmit=false] - {boolean} Whether to auto-submit when all boxes are filled
+ * @param {(value: string) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {(value: string) => void} [onComplete] - {Function} Callback fired when all boxes are filled
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {React.CSSProperties} [containerStyles] - {React.CSSProperties} Custom styles for the OTP container
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for individual OTP input boxes
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Form Input OTP component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputOTPField } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputOTPField
+ *       name="otpCode"
+ *       label="Enter Verification Code"
+ *       control={control}
+ *       length={6}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputOTPField: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
 
+/**
+ * Form Input Password Component
+ *
+ * A specialized password input field built on top of Material UI TextField with visibility toggle,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a secure password input with support for: visibility toggling,
+ * password strength indicator, error handling, helper text, and length validation.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the password field
+ * @param {string} [defaultValue=''] - {string} Default password value
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {boolean} [showPasswordStrength=false] - {boolean} Whether to show password strength indicator
+ * @param {number} [minLength] - {number} Minimum password length
+ * @param {number} [maxLength] - {number} Maximum password length
+ * @param {boolean} [defaultShowPassword=false] - {boolean} Whether to show password by default
+ * @param {React.ReactNode} [visibilityIcon] - {React.ReactNode} Custom visibility icon
+ * @param {React.ReactNode} [visibilityOffIcon] - {React.ReactNode} Custom visibility off icon
+ * @param {IconButtonProps} [iconButtonProps] - {IconButtonProps} Custom icon button props
+ * @param {(value: string) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onVisibilityToggle] - {Function} Callback when visibility toggles
+ * @param {Function} [getPasswordStrength] - {Function} Custom strength calculation function
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the TextField
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Form Input Password component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputPasswordField } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputPasswordField
+ *       name="userPassword"
+ *       label="Password"
+ *       control={control}
+ *       showPasswordStrength
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const FormInputPasswordField: React__default.MemoExoticComponent<({ name, label, control, size, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputNumberField: React__default.MemoExoticComponent<({ name, label, control, pattern, min, max, step, allowDecimals, decimalPlaces, defaultValue, onChange, ...props }: IFormInputNumberFields) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input Search Component
+ *
+ * A specialized search input field built on top of Material UI TextField with search and clear functionality,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a robust search interface with support for: debounced/throttled search callbacks,
+ * clear button, search button, Enter key handling, error handling, and helper text.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the search field
+ * @param {string} [defaultValue=''] - {string} Default search value
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {boolean} [showClearButton=true] - {boolean} Whether to show clear button when input has value
+ * @param {boolean} [showSearchButton=true] - {boolean} Whether to show search button icon
+ * @param {React.ReactNode} [clearIcon] - {React.ReactNode} Custom clear icon
+ * @param {React.ReactNode} [searchIcon] - {React.ReactNode} Custom search icon
+ * @param {IconButtonProps} [clearButtonProps] - {IconButtonProps} Custom props for clear button
+ * @param {IconButtonProps} [searchButtonProps] - {IconButtonProps} Custom props for search button
+ * @param {(value: string) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {(value: string) => void} [onSearch] - {Function} Callback fired for search (can be debounced/throttled)
+ * @param {Function} [onClear] - {Function} Callback fired when clear button is clicked
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {boolean} [enableDebounce=true] - {boolean} Enable debounce for search callback
+ * @param {number} [debounceDelay=300] - {number} Debounce delay in milliseconds
+ * @param {boolean} [enableThrottle=false] - {boolean} Enable throttle for search callback
+ * @param {number} [throttleDelay=300] - {number} Throttle delay in milliseconds
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the TextField
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Form Input Search component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputSearchField } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputSearchField
+ *       name="userSearch"
+ *       label="Search Users"
+ *       control={control}
+ *       onSearch={(val) => console.log("Searching for:", val)}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputSearchField: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
 
+/**
+ * Form Input Tel Component
+ *
+ * A specialized telephone number input field built on top of Material UI TextField with pattern formatting,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a telephone input with support for: automatic pattern-based formatting,
+ * country code prefix, digits-only value management, error handling, helper text, and standard text field behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the tel field
+ * @param {string} [defaultValue=''] - {string} Default tel value (digits only)
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text (auto-generated from pattern if not provided)
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {string} [pattern='XXXXXXXXXX'] - {string} Pattern string (e.g., 'XXX-XXXX' where X represents digits)
+ * @param {number} [maxLength] - {number} Maximum digits allowed
+ * @param {string} [countryCode='+1'] - {string} Country code prefix text
+ * @param {boolean} [showCountryCode=false] - {boolean} Whether to show country code as start adornment
+ * @param {React.ReactNode} [startAdornment] - {React.ReactNode} Adornment before input
+ * @param {React.ReactNode} [endAdornment] - {React.ReactNode} Adornment after input
+ * @param {(value: string) => void} [onChange] - {Function} Optional additional callback fired when value changes (returns digits only)
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the TextField
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {React.CSSProperties} [countryCodeStyles] - {React.CSSProperties} Custom styles for country code display
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Form Input Tel component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputTelField } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputTelField
+ *       name="phoneNumber"
+ *       label="Phone Number"
+ *       control={control}
+ *       pattern="XXX-XXX-XXXX"
+ *       showCountryCode
+ *       countryCode="+91"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const FormInputTelField: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputSearchField: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input Text Area Component
+ *
+ * A specialized multi-line text input field built on top of Material UI TextField,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a dedicated textarea interface with support for:
+ * adjustable rows, dynamic resizing, error handling, helper text, and standard text field behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the textarea
+ * @param {string} [defaultValue=''] - {string} Default text value
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {number} [rows] - {number} Fixed number of rows
+ * @param {number} [minRows] - {number} Minimum number of rows
+ * @param {number} [maxRows] - {number} Maximum number of rows
+ * @param {ResizeOption} [resize='both'] - {ResizeOption} CSS resize property for the textarea
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {(value: string) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the TextField
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ *
+ * @returns {JSX.Element} The Form Input Text Area component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputTextArea } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputTextArea
+ *       name="description"
+ *       label="Project Description"
+ *       control={control}
+ *       minRows={3}
+ *       maxRows={10}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputTextArea: React.MemoExoticComponent<({ name, label, control, rows, minRows, maxRows, resize, defaultValue, onChange, ...props }: IFormInputTextAreaFields) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputOTPField: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input Text Component
+ *
+ * A versatile text input field built on top of Material UI TextField with support for various text types and transformations,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible text input with support for: single-line and multiline (textarea),
+ * text transformations (uppercase, lowercase, capitalize), error handling, helper text, custom adornments,
+ * and standard text field behaviors. It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the text field
+ * @param {string} [defaultValue=''] - {string} Default text value
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {boolean} [multiline=false] - {boolean} Whether to enable multiline input (textarea)
+ * @param {number} [rows] - {number} Number of rows for multiline input
+ * @param {number} [minRows] - {number} Minimum number of rows for multiline input
+ * @param {number} [maxRows] - {number} Maximum number of rows for multiline input
+ * @param {ResizeOption} [resize='both'] - {ResizeOption} Resize option for textarea
+ * @param {number} [maxLength] - {number} Maximum length of input
+ * @param {number} [minLength] - {number} Minimum length of input
+ * @param {string} [type='text'] - {string} Input type (text, email, url, etc.)
+ * @param {string} [autoComplete='off'] - {string} Auto complete attribute
+ * @param {React.ReactNode} [startAdornment] - {React.ReactNode} Adornment before input
+ * @param {React.ReactNode} [endAdornment] - {React.ReactNode} Adornment after input
+ * @param {(value: string) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the TextField
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ * @param {TextTransformOption} [textTransform] - {TextTransformOption} Text transformation option
+ *
+ * @returns {JSX.Element} The Form Input Text component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputTextField } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputTextField
+ *       name="fullName"
+ *       label="Full Name"
+ *       control={control}
+ *       textTransform="capitalize"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputTextField: React.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputSelect: React__default.MemoExoticComponent<({ name, label, control, options, defaultValue, onChange, ...props }: IFormInputFieldsWithOptions) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input AutoComplete Component
+ *
+ * A highly customizable autocomplete search and dropdown field built on top of Material UI Autocomplete and TextField,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a searchable dropdown with support for: single/multiple selection, remote/local options,
+ * error handling, helper text, custom option rendering, and standard autocomplete behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the input field
+ * @param {any} [defaultValue=null] - {any} Default selected value(s)
+ * @param {any[]} options - {any[]} Array of options to display in dropdown
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {Function} [getOptionLabel] - {Function} Custom function to get option label
+ * @param {Function} [isOptionEqualToValue] - {Function} Custom function to check option equality
+ * @param {Function} [renderOption] - {Function} Custom render function for options
+ * @param {(value: any) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onInputChange] - {Function} Callback fired when input value changes
+ * @param {Function} [onOpen] - {Function} Callback fired when popup opens
+ * @param {Function} [onClose] - {Function} Callback fired when popup closes
+ * @param {React.ReactNode} [popupIcon] - {React.ReactNode} Custom icon for popup indicator
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the internal TextField
+ * @param {AutocompleteProps['sx']} [autocompleteStyles] - {AutocompleteProps['sx']} Custom styles for the Autocomplete component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {boolean} [loading=false] - {boolean} Whether to show loading state
+ * @param {React.ReactNode} [loadingText='Loading...'] - {React.ReactNode} Text to show when loading
+ * @param {React.ReactNode} [noOptionsText='No options'] - {React.ReactNode} Text to show when no options available
+ * @param {Function} [filterOptions] - {Function} Custom filter options function
+ * @param {boolean} [autoHighlight=true] - {boolean} Whether to highlight the first option
+ * @param {boolean} [autoSelect=false] - {boolean} Whether to select the first option on highlight
+ * @param {boolean} [disablePortal=false] - {boolean} Whether to disable portal rendering
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Form Input AutoComplete component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputAutoComplete } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *   const options = [{ name: "Option 1", value: 1 }, { name: "Option 2", value: 2 }];
+ *
+ *   return (
+ *     <FormInputAutoComplete
+ *       name="myAutocomplete"
+ *       label="Select Option"
+ *       control={control}
+ *       options={options}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputAutoComplete: React.MemoExoticComponent<({ name, label, control, options, disabled, placeholder, defaultValue, onChange, ...props }: IFormInputFieldsWithOptions) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputMultiSelect: React__default.MemoExoticComponent<({ name, label, control, options, defaultValue, onChange, ...props }: IFormInputFieldsWithOptions) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input Color Picker Component
+ *
+ * A customizable color picker field built on top of Material UI TextField and native color input,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a color selection input with support for: hex values, color preview swatch,
+ * native color picker integration, error handling, helper text, and standard text field behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the color picker field
+ * @param {string} [defaultValue='#000000'] - {string} Default color value (hex string)
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder='#000000'] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']|'primary'} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {string} [format='hex'] - {string} Color format (currently hex supported)
+ * @param {boolean} [showPreview=true] - {boolean} Whether to show color preview swatch
+ * @param {(value: string) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when field receives focus
+ * @param {Function} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onEnterPress] - {Function} Callback fired on Enter key press
+ * @param {React.CSSProperties} [previewStyles] - {React.CSSProperties} Custom styles for the color preview swatch
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for TextField
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Form Input Color Picker component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputColorPicker } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputColorPicker
+ *       name="themeColor"
+ *       label="Theme Color"
+ *       control={control}
+ *       defaultValue="#3f51b5"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputColorPicker: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputAutoComplete: React__default.MemoExoticComponent<({ name, label, control, options, disabled, placeholder, defaultValue, onChange, ...props }: IFormInputFieldsWithOptions) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input File Upload Component
+ *
+ * A versatile file upload field built on top of Material UI TextField and native file input,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a file selection interface with support for: single/multiple files,
+ * drag and drop, file validation (size, type), file preview, clear functionality, and standard form field behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the file upload field
+ * @param {any} [defaultValue=null] - {any} Default selected file(s)
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [accept] - {string} File types to accept (e.g., "image/*", ".pdf")
+ * @param {boolean} [multiple=false] - {boolean} Whether to allow multiple file selection
+ * @param {number} [maxSize] - {number} Maximum file size in bytes
+ * @param {number} [minSize] - {number} Minimum file size in bytes
+ * @param {string[]} [allowedTypes] - {string[]} Allowed file types (MIME types or extensions)
+ * @param {boolean} [showPreview=true] - {boolean} Whether to show file name preview
+ * @param {boolean} [enableDragDrop=false] - {boolean} Whether to enable drag and drop
+ * @param {string} [placeholder='No file chosen'] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {string} [buttonText='Upload'] - {string} Upload button text
+ * @param {ButtonProps['variant']} [buttonVariant='contained'] - {ButtonProps['variant']} Upload button variant
+ * @param {ButtonProps['color']} [buttonColor='primary'] - {ButtonProps['color']} Upload button color
+ * @param {ButtonProps['size']} [buttonSize] - {ButtonProps['size']} Upload button size
+ * @param {React.ReactNode} [uploadIcon] - {React.ReactNode} Custom upload icon
+ * @param {(file: File | File[] | undefined) => void} [onChange] - {Function} Optional additional callback fired when files change
+ * @param {Function} [onFileSelect] - {Function} Callback fired when file is selected
+ * @param {Function} [onFileRemove] - {Function} Callback fired when file is removed
+ * @param {(error: string) => void} [onValidationError] - {Function} Callback fired on validation error
+ * @param {(files: FileList) => void} [onDrop] - {Function} Callback fired when file is dropped
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the internal TextField
+ * @param {ButtonProps['sx']} [buttonStyles] - {ButtonProps['sx']} Custom styles for the Upload button
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {React.CSSProperties} [containerStyles] - {React.CSSProperties} Custom styles for the container
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Form Input File Upload component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputFileUpload } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputFileUpload
+ *       name="resume"
+ *       label="Upload Resume"
+ *       control={control}
+ *       accept=".pdf,.doc,.docx"
+ *       enableDragDrop
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputFileUpload: React__default.MemoExoticComponent<({ name, label, control, size, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
 
+/**
+ * Form Input Multi AutoComplete Component
+ *
+ * A highly customizable multi-select autocomplete field built on top of Material UI Autocomplete and TextField,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a searchable multi-select dropdown with support for: remote/local options,
+ * error handling, helper text, custom option rendering, and standard autocomplete behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the input field
+ * @param {any[]} [defaultValue=[]] - {any[]} Default selected values
+ * @param {any[]} options - {any[]} Array of options to display in dropdown
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['size']} [size] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['color']} [color] - {TextFieldProps['color']} TextField color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {Function} [getOptionLabel] - {Function} Custom function to get option label
+ * @param {Function} [isOptionEqualToValue] - {Function} Custom function to check option equality
+ * @param {Function} [renderOption] - {Function} Custom render function for options
+ * @param {(value: any[]) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onInputChange] - {Function} Callback fired when input value changes
+ * @param {Function} [onOpen] - {Function} Callback fired when popup opens
+ * @param {Function} [onClose] - {Function} Callback fired when popup closes
+ * @param {React.ReactNode} [popupIcon] - {React.ReactNode} Custom icon for popup indicator
+ * @param {TextFieldProps['sx']} [inputStyles] - {TextFieldProps['sx']} Custom styles for the internal TextField
+ * @param {AutocompleteProps['sx']} [autocompleteStyles] - {AutocompleteProps['sx']} Custom styles for the Autocomplete component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {boolean} [loading=false] - {boolean} Whether to show loading state
+ * @param {React.ReactNode} [loadingText='Loading...'] - {React.ReactNode} Text to show when loading
+ * @param {React.ReactNode} [noOptionsText='No options'] - {React.ReactNode} Text to show when no options available
+ * @param {Function} [filterOptions] - {Function} Custom filter options function
+ * @param {boolean} [autoHighlight=true] - {boolean} Whether to highlight the first option
+ * @param {boolean} [autoSelect=false] - {boolean} Whether to select the first option on highlight
+ * @param {boolean} [disablePortal=false] - {boolean} Whether to disable portal rendering
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ *
+ * @returns {JSX.Element} The Form Input Multi AutoComplete component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputMultiAutoComplete } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *   const options = [{ name: "Red", value: "red" }, { name: "Blue", value: "blue" }];
+ *
+ *   return (
+ *     <FormInputMultiAutoComplete
+ *       name="colors"
+ *       label="Select Colors"
+ *       control={control}
+ *       options={options}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const FormInputMultiAutoComplete: React__default.MemoExoticComponent<({ name, label, control, options, disabled, placeholder, defaultValue, onChange, ...props }: IFormInputFieldsWithOptions) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputColorPicker: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input Multi Select Component
+ *
+ * A customizable multi-select dropdown field built on top of Material UI Select and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible multi-select dropdown with support for:
+ * error handling, helper text, custom menu item rendering, and standard select behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the select field
+ * @param {any[]} [defaultValue=[]] - {any[]} Default selected values
+ * @param {Option[]} options - {Option[]} Array of options to display in dropdown
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {SelectProps['variant']} [variant='outlined'] - {SelectProps['variant']} Select variant
+ * @param {SelectProps['size']} [size] - {SelectProps['size']} Select size
+ * @param {SelectProps['color']} [color] - {SelectProps['color']} Select color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {boolean} [multiple=true] - {boolean} Whether to allow multiple selections
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for dropdown indicator
+ * @param {SelectProps['renderValue']} [renderValue] - {Function} Custom render function for selected value(s)
+ * @param {Function} [renderMenuItem] - {Function} Custom render function for menu items
+ * @param {MenuItemProps['sx'] | Function} [menuItemStyles] - {Object|Function} Custom styles for MenuItem
+ * @param {SelectProps['sx']} [selectStyles] - {SelectProps['sx']} Custom styles for the Select component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {InputLabelProps['sx']} [labelStyles] - {InputLabelProps['sx']} Custom styles for InputLabel
+ * @param {(value: any) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onOpen] - {Function} Callback fired when menu opens
+ * @param {Function} [onClose] - {Function} Callback fired when menu closes
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ * @param {boolean} [displayEmpty=false] - {boolean} Whether to display empty value
+ * @param {boolean} [autoWidth=false] - {boolean} Whether the menu should have auto width
+ * @param {boolean} [native=false] - {boolean} Whether to use native select element
+ * @param {SelectProps['MenuProps']} [MenuProps] - {Object} Custom Menu props
+ *
+ * @returns {JSX.Element} The Form Input Multi Select component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputMultiSelect } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *   const options = [
+ *     { value: "1", name: "Option 1" },
+ *     { value: "2", name: "Option 2" }
+ *   ];
+ *
+ *   return (
+ *     <FormInputMultiSelect
+ *       name="mySelect"
+ *       label="Select Options"
+ *       control={control}
+ *       options={options}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputMultiSelect: React__default.MemoExoticComponent<({ name, label, control, options, defaultValue, onChange, ...props }: IFormInputFieldsWithOptions) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputFileUpload: React__default.MemoExoticComponent<({ name, label, control, size, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input Select Component
+ *
+ * A customizable dropdown selection field built on top of Material UI Select and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible dropdown with support for: single selection,
+ * error handling, helper text, custom menu item rendering, and standard select behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string} [label] - {string} Label text for the select field
+ * @param {any} [defaultValue=''] - {any} Default selected value
+ * @param {Option[]} options - {Option[]} Array of options to display in dropdown
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {SelectProps['variant']} [variant='outlined'] - {SelectProps['variant']} Select variant
+ * @param {SelectProps['size']} [size] - {SelectProps['size']} Select size
+ * @param {SelectProps['color']} [color] - {SelectProps['color']} Select color
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {boolean} [multiple=false] - {boolean} Whether to allow multiple selections
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for dropdown indicator
+ * @param {SelectProps['renderValue']} [renderValue] - {Function} Custom render function for selected value(s)
+ * @param {Function} [renderMenuItem] - {Function} Custom render function for menu items
+ * @param {MenuItemProps['sx'] | Function} [menuItemStyles] - {Object|Function} Custom styles for MenuItem
+ * @param {SelectProps['sx']} [selectStyles] - {SelectProps['sx']} Custom styles for the Select component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {InputLabelProps['sx']} [labelStyles] - {InputLabelProps['sx']} Custom styles for InputLabel
+ * @param {(value: any) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onOpen] - {Function} Callback fired when menu opens
+ * @param {Function} [onClose] - {Function} Callback fired when menu closes
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI v7
+ * @param {boolean} [displayEmpty=false] - {boolean} Whether to display empty value
+ * @param {boolean} [autoWidth=false] - {boolean} Whether the menu should have auto width
+ * @param {boolean} [native=false] - {boolean} Whether to use native select element
+ * @param {SelectProps['MenuProps']} [MenuProps] - {Object} Custom Menu props
+ *
+ * @returns {JSX.Element} The Form Input Select component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputSelect } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *   const options = [
+ *     { value: "1", name: "Option 1" },
+ *     { value: "2", name: "Option 2" }
+ *   ];
+ *
+ *   return (
+ *     <FormInputSelect
+ *       name="category"
+ *       label="Select Category"
+ *       control={control}
+ *       options={options}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputSelect: React__default.MemoExoticComponent<({ name, label, control, options, defaultValue, onChange, ...props }: IFormInputFieldsWithOptions) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputDatePicker: React__default.MemoExoticComponent<({ name, label, control, size, readOnly, shouldDisableDate, disabled, placeholder, defaultValue, onChange, ...props }: IFormInputDateFields) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input Date Calendar Component
+ *
+ * A customizable inline date calendar field built on top of Material UI X DateCalendar and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides an inline calendar for date selection with support for: error handling, helper text,
+ * date constraints (min/max), disabling specific dates/months/years, and standard calendar behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the calendar
+ * @param {Date | null} [defaultValue=null] - {Date | null} Default date value
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {Date} [minDate] - {Date} Minimum selectable date
+ * @param {Date} [maxDate] - {Date} Maximum selectable date
+ * @param {(date: Date) => boolean} [shouldDisableDate] - {Function} Function to disable specific dates
+ * @param {(month: Date) => boolean} [shouldDisableMonth] - {Function} Function to disable specific months
+ * @param {(year: Date) => boolean} [shouldDisableYear] - {Function} Function to disable specific years
+ * @param {DateCalendarProps['sx']} [calendarStyles] - {DateCalendarProps['sx']} Custom styles for the DateCalendar component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {BoxProps['sx']} [containerStyles] - {BoxProps['sx']} Custom styles for the container Box
+ * @param {(value: Date | null) => void} [onChange] - {Function} Optional additional callback fired when the date changes
+ * @param {(view: 'day' | 'month' | 'year') => void} [onViewChange] - {Function} Callback fired when a view change is requested
+ * @param {(month: Date) => void} [onMonthChange] - {Function} Callback fired when a month change is requested
+ * @param {(year: Date) => void} [onYearChange] - {Function} Callback fired when a year change is requested
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI X v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI X v7
+ * @param {typeof AdapterDateFns} [dateAdapter=AdapterDateFns] - {Type} Date adapter to use
+ * @param {boolean} [showDaysOutsideCurrentMonth=false] - {boolean} Whether to show days outside current month
+ * @param {boolean} [disablePast=false] - {boolean} Whether to disable past dates
+ * @param {boolean} [disableFuture=false] - {boolean} Whether to disable future dates
+ * @param {Date} [referenceDate] - {Date} Reference date for the calendar
+ * @param {'day' | 'month' | 'year'} [view] - {'day' | 'month' | 'year'} Controlled view state
+ *
+ * @returns {JSX.Element} The Form Input Date Calendar component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputCalendar } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputCalendar
+ *       name="myCalendar"
+ *       label="Select Date"
+ *       control={control}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputCalendar: React__default.MemoExoticComponent<({ name, label, control, readOnly, disabled, defaultValue, onChange, ...props }: IFormInputDateFields) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputTimePicker: React__default.MemoExoticComponent<({ name, label, control, ampm, timezone, defaultValue, onChange, ...props }: IFormInputDateFields) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input Date Picker Component
+ *
+ * A customizable date picker field built on top of Material UI X DatePicker and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible date picker with support for: error handling, helper text, clear button,
+ * custom formatting, date constraints (min/max), and standard date picker behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the date picker
+ * @param {boolean} [title=false] - {boolean} Whether to show label as a separate title above the picker
+ * @param {Date | null} [defaultValue=null] - {Date | null} Default date value
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {Date} [minDate] - {Date} Minimum selectable date
+ * @param {Date} [maxDate] - {Date} Maximum selectable date
+ * @param {(date: Date) => boolean} [shouldDisableDate] - {Function} Function to disable specific dates
+ * @param {(month: Date) => boolean} [shouldDisableMonth] - {Function} Function to disable specific months
+ * @param {(year: Date) => boolean} [shouldDisableYear] - {Function} Function to disable specific years
+ * @param {TextFieldProps['size']} [size='medium'] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {boolean} [readOnly=false] - {boolean} Whether the field is read-only
+ * @param {boolean} [showClearButton=true] - {boolean} Whether to show clear button
+ * @param {boolean} [disablePast=false] - {boolean} Whether to disable past dates
+ * @param {boolean} [disableFuture=false] - {boolean} Whether to disable future dates
+ * @param {Date} [referenceDate] - {Date} Reference date for the calendar
+ * @param {'day' | 'month' | 'year'} [view] - {'day' | 'month' | 'year'} Controlled view state
+ * @param {string} [format] - {string} Format for displaying the date
+ * @param {'day' | 'month' | 'year'} [openTo='day'] - {string} Whether to open the calendar on focus
+ * @param {DatePickerProps['sx']} [pickerStyles] - {DatePickerProps['sx']} Custom styles for the DatePicker component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {BoxProps['sx']} [containerStyles] - {BoxProps['sx']} Custom styles for the container Box
+ * @param {TextFieldProps['sx']} [textFieldStyles] - {TextFieldProps['sx']} Custom styles for the internal TextField
+ * @param {(value: Date | null) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onFocus] - {Function} Callback when field receives focus
+ * @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onViewChange] - {Function} Callback fired when a view change is requested
+ * @param {Function} [onMonthChange] - {Function} Callback fired when a month change is requested
+ * @param {Function} [onYearChange] - {Function} Callback fired when a year change is requested
+ * @param {Function} [onOpen] - {Function} Callback fired when the calendar opens
+ * @param {Function} [onClose] - {Function} Callback fired when the calendar closes
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI X v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI X v7
+ * @param {typeof AdapterDateFns} [dateAdapter=AdapterDateFns] - {Type} Date adapter to use
+ * @param {boolean} [reduceAnimations=false] - {boolean} Whether to reduce animations
+ * @param {boolean} [autoFocus=false] - {boolean} Auto focus the input
+ *
+ * @returns {JSX.Element} The Form Input Date Picker component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputDatePicker } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputDatePicker
+ *       name="birthday"
+ *       label="Birthday"
+ *       control={control}
+ *       showClearButton
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputDatePicker: React__default.MemoExoticComponent<({ name, label, control, size, readOnly, shouldDisableDate, disabled, placeholder, defaultValue, onChange, ...props }: IFormInputDateFields) => react_jsx_runtime.JSX.Element>;
 
+/**
+ * Form Input Time Clock Component
+ *
+ * A customizable inline time clock field built on top of Material UI X TimeClock and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides an inline clock for time selection with support for: error handling, helper text,
+ * AM/PM support, time constraints (min/max), and standard clock behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the time clock
+ * @param {Date | null} [defaultValue=null] - {Date | null} Default time value
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {string[]} [views=['hours', 'minutes']] - {string[]} Available views (hours, minutes, seconds)
+ * @param {boolean} [ampmInClock=false] - {boolean} Whether to show AM/PM in the clock
+ * @param {boolean} [ampm=true] - {boolean} Whether to use 12-hour format
+ * @param {boolean} [disablePast=false] - {boolean} Whether to disable past times
+ * @param {boolean} [disableFuture=false] - {boolean} Whether to disable future times
+ * @param {Date} [minTime] - {Date} Minimum selectable time
+ * @param {Date} [maxTime] - {Date} Maximum selectable time
+ * @param {Function} [shouldDisableTime] - {Function} Function to disable specific times
+ * @param {TimeClockProps['sx']} [clockStyles] - {TimeClockProps['sx']} Custom styles for the TimeClock component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {BoxProps['sx']} [containerStyles] - {BoxProps['sx']} Custom styles for the container Box
+ * @param {StackProps['sx']} [buttonsStackStyles] - {StackProps['sx']} Custom styles for the view buttons Stack
+ * @param {ButtonProps['sx']} [buttonStyles] - {ButtonProps['sx']} Custom styles for view buttons
+ * @param {ButtonProps['sx']} [activeButtonStyles] - {ButtonProps['sx']} Custom styles for active view button
+ * @param {boolean} [showViewButtons=true] - {boolean} Whether to show view selector buttons
+ * @param {string} [initialView='hours'] - {string} Initial view
+ * @param {string} [view] - {string} Controlled view state
+ * @param {(value: Date | null) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onViewChange] - {Function} Callback fired when a view change is requested
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI X v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI X v7
+ * @param {any} [dateAdapter] - {any} Date adapter to use
+ * @param {boolean} [autoFocus=false] - {boolean} Auto focus
+ *
+ * @returns {JSX.Element} The Form Input Time Clock component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputTimeClock } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputTimeClock
+ *       name="shiftStart"
+ *       label="Shift Start Time"
+ *       control={control}
+ *       ampm={true}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const FormInputTimeClock: React__default.MemoExoticComponent<({ name, label, control, readOnly, disabled, ampm, views, ampmInClock, disablePast, defaultValue, onChange, ...props }: IFormInputDateFields) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputCalendar: React__default.MemoExoticComponent<({ name, label, control, readOnly, disabled, defaultValue, onChange, ...props }: IFormInputDateFields) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input Time Picker Component
+ *
+ * A customizable time picker field built on top of Material UI X TimePicker and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible time picker with support for: error handling, helper text, clear button,
+ * AM/PM support, time constraints (min/max), and standard time picker behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the time picker
+ * @param {Date | null} [defaultValue=null] - {Date | null} Default time value
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [title=false] - {boolean} Whether to show label as a separate title above the picker
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {Date} [minTime] - {Date} Minimum selectable time
+ * @param {Date} [maxTime] - {Date} Maximum selectable time
+ * @param {(time: Date, view: string) => boolean} [shouldDisableTime] - {Function} Function to disable specific times
+ * @param {TextFieldProps['size']} [size='medium'] - {TextFieldProps['size']} TextField size
+ * @param {TextFieldProps['variant']} [variant='outlined'] - {TextFieldProps['variant']} TextField variant
+ * @param {TextFieldProps['color']} [color='primary'] - {TextFieldProps['color']} TextField color
+ * @param {string} [placeholder] - {string} Placeholder text
+ * @param {boolean} [readOnly=false] - {boolean} Whether the field is read-only
+ * @param {boolean} [showClearButton=true] - {boolean} Whether to show clear button
+ * @param {boolean} [disablePast=false] - {boolean} Whether to disable past times
+ * @param {boolean} [disableFuture=false] - {boolean} Whether to disable future times
+ * @param {boolean} [ampm=true] - {boolean} Whether to use 12-hour format
+ * @param {string[]} [views] - {string[]} Available views (hours, minutes, seconds)
+ * @param {string} [view] - {string} Controlled view state
+ * @param {string} [openTo='hours'] - {string} Default view to open
+ * @param {string} [format] - {string} Format for displaying the time
+ * @param {TimePickerProps['sx']} [pickerStyles] - {TimePickerProps['sx']} Custom styles for the TimePicker component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {BoxProps['sx']} [containerStyles] - {BoxProps['sx']} Custom styles for the container Box
+ * @param {TextFieldProps['sx']} [textFieldStyles] - {TextFieldProps['sx']} Custom styles for the internal TextField
+ * @param {(value: Date | null) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onFocus] - {Function} Callback when field receives focus
+ * @param {(event: React.FocusEvent<HTMLInputElement>) => void} [onBlur] - {Function} Callback when field loses focus
+ * @param {Function} [onViewChange] - {Function} Callback fired when a view change is requested
+ * @param {Function} [onOpen] - {Function} Callback fired when the picker opens
+ * @param {Function} [onClose] - {Function} Callback fired when the picker closes
+ * @param {Object} [slotProps] - {Object} Custom slot props for MUI X v7
+ * @param {Object} [slots] - {Object} Custom slots for MUI X v7
+ * @param {any} [dateAdapter] - {any} Date adapter to use
+ * @param {boolean} [autoFocus=false] - {boolean} Auto focus the input
+ * @param {string} [timezone] - {string} Timezone for the picker
+ *
+ * @returns {JSX.Element} The Form Input Time Picker component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputTimePicker } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputTimePicker
+ *       name="appointmentTime"
+ *       label="Select Time"
+ *       control={control}
+ *       ampm={true}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputTimePicker: React__default.MemoExoticComponent<({ name, label, control, ampm, timezone, defaultValue, onChange, ...props }: IFormInputDateFields) => react_jsx_runtime.JSX.Element>;
 
+/**
+ * Form Input CheckBox Component
+ *
+ * A customizable checkbox field built on top of Material UI Checkbox and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible checkbox with support for: error handling, helper text, custom icons,
+ * styling overrides, label placement, and standard checkbox behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the checkbox
+ * @param {boolean} [defaultValue=false] - {boolean} Default checked state
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Checkbox color
+ * @param {'small'|'medium'|'large'} [size] - {'small'|'medium'|'large'} Checkbox size
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'start'|'end'} [labelPlacement='end'] - {'start'|'end'} Label placement relative to checkbox
+ * @param {(checked: boolean) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - {Function} Callback fired when clicked
+ * @param {React.FocusEventHandler<HTMLButtonElement>} [onFocus] - {Function} Callback when focused
+ * @param {React.FocusEventHandler<HTMLButtonElement>} [onBlur] - {Function} Callback when blurred
+ * @param {React.ReactNode} [checkedIcon] - {React.ReactNode} Custom icon for checked state
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for unchecked state
+ * @param {React.CSSProperties} [checkboxStyles] - {React.CSSProperties} Custom styles for Checkbox component
+ * @param {React.CSSProperties} [labelStyles] - {React.CSSProperties} Custom styles for FormControlLabel
+ * @param {React.CSSProperties} [formControlStyles] - {React.CSSProperties} Custom styles for FormControl container
+ * @param {boolean} [indeterminate=false] - {boolean} Indeterminate state
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ *
+ * @returns {JSX.Element} The Form Input CheckBox component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputCheckBox } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputCheckBox
+ *       name="agreeTerms"
+ *       label="I agree to terms"
+ *       control={control}
+ *       required
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const FormInputCheckBox: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
 
+/**
+ * Form Input CheckBox Group Component
+ *
+ * A customizable group of checkboxes built on top of Material UI Checkbox and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a group of flexible checkboxes with support for: error handling, helper text, custom icons,
+ * styling overrides, label placement, row/column layout, and standard checkbox behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the checkbox group
+ * @param {any[]} [defaultValue=[]] - {any[]} Default selected values
+ * @param {Option[]} options - {Option[]} Array of checkbox options
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Checkbox color
+ * @param {'small'|'medium'|'large'} [size] - {'small'|'medium'|'large'} Checkbox size
+ * @param {'start'|'end'} [labelPlacement='end'] - {'start'|'end'} Label placement relative to checkbox
+ * @param {boolean} [row=false] - {boolean} Whether to display checkboxes in a row
+ * @param {React.ReactNode} [checkedIcon] - {React.ReactNode} Custom icon for checked state
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for unchecked state
+ * @param {SxProps<Theme>} [checkboxStyles] - {SxProps<Theme>} Custom styles for individual checkboxes
+ * @param {SxProps<Theme>} [labelStyles] - {SxProps<Theme>} Custom styles for checkbox labels
+ * @param {SxProps<Theme>} [formControlStyles] - {SxProps<Theme>} Custom styles for FormControl container
+ * @param {SxProps<Theme>} [formLabelStyles] - {SxProps<Theme>} Custom styles for FormLabel
+ * @param {(value: any[]) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {Function} [onFocus] - {Function} Callback when focused
+ * @param {Function} [onBlur] - {Function} Callback when blurred
+ * @param {Function} [onClick] - {Function} Callback when clicked
+ * @param {Function} [renderCheckbox] - {Function} Custom render function for checkboxes
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ * @param {SxProps<Theme>} [sxProps] - {SxProps<Theme>} Custom styles for the Box container
+ *
+ * @returns {JSX.Element} The Form Input CheckBox Group component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputCheckBoxGroup } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *   const options = [
+ *     { value: "opt1", name: "Option 1" },
+ *     { value: "opt2", name: "Option 2" }
+ *   ];
+ *
+ *   return (
+ *     <FormInputCheckBoxGroup
+ *       name="myCheckGroup"
+ *       label="Select options"
+ *       control={control}
+ *       options={options}
+ *       row
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const FormInputCheckBoxGroup: React__default.MemoExoticComponent<({ name, label, control, options, defaultValue, onChange, row, color, labelPlacement, ...props }: IFormInputCheckBoxGroupFields) => react_jsx_runtime.JSX.Element>;
 
-declare const FormInputSwitch: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
-
-declare const FormInputSlider: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
-
-declare const FormInputRadioButton: React__default.MemoExoticComponent<({ name, label, control, checked, defaultValue, onChange, color, labelPlacement, ...props }: IFormInputRadioFields) => react_jsx_runtime.JSX.Element>;
+/**
+ * Form Input Radio Button Component
+ *
+ * A customizable radio button field built on top of Material UI Radio and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible radio button with support for: error handling, helper text, custom icons,
+ * styling overrides, label placement, and standard radio behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the radio button
+ * @param {boolean} [defaultValue=false] - {boolean} Default checked state
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Radio color
+ * @param {'small'|'medium'|'large'} [size] - {'small'|'medium'|'large'} Radio size
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'start'|'end'} [labelPlacement='end'] - {'start'|'end'} Label placement relative to radio button
+ * @param {(checked: boolean) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - {Function} Callback fired when clicked
+ * @param {React.FocusEventHandler<HTMLButtonElement>} [onFocus] - {Function} Callback when focused
+ * @param {React.FocusEventHandler<HTMLButtonElement>} [onBlur] - {Function} Callback when blurred
+ * @param {React.ReactNode} [checkedIcon] - {React.ReactNode} Custom icon for checked state
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for unchecked state
+ * @param {React.CSSProperties} [radioStyles] - {React.CSSProperties} Custom styles for Radio component
+ * @param {React.CSSProperties} [labelStyles] - {React.CSSProperties} Custom styles for FormControlLabel
+ * @param {React.CSSProperties} [formControlStyles] - {React.CSSProperties} Custom styles for FormControl container
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ *
+ * @returns {JSX.Element} The Form Input Radio Button component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputRadioButton } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputRadioButton
+ *       name="option1"
+ *       label="Option 1"
+ *       control={control}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputRadioButton: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, color, labelPlacement, ...props }: IFormInputRadioFields) => react_jsx_runtime.JSX.Element>;
 
+/**
+ * Form Input Radio Button Group Component
+ *
+ * A customizable group of radio buttons built on top of Material UI RadioGroup and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a group of flexible radio buttons with support for: error handling, helper text, custom icons,
+ * styling overrides, label placement, row/column layout, and standard radio behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the radio group
+ * @param {any} [defaultValue=""] - {any} Default selected value
+ * @param {Option[]} options - {Option[]} Array of radio options
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Radio color
+ * @param {'small'|'medium'|'large'} [size] - {'small'|'medium'|'large'} Radio size
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'start'|'end'} [labelPlacement='end'] - {'start'|'end'} Label placement relative to each radio button
+ * @param {boolean} [row=false] - {boolean} Row layout (horizontal) or column layout (vertical)
+ * @param {React.ReactNode} [checkedIcon] - {React.ReactNode} Custom icon for checked state
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for unchecked state
+ * @param {RadioProps["sx"]} [radioStyles] - {RadioProps["sx"]} Custom styles for individual Radio components
+ * @param {FormControlLabelProps["sx"]} [labelStyles] - {FormControlLabelProps["sx"]} Custom styles for FormControlLabel components
+ * @param {FormControlProps["sx"]} [formControlStyles] - {FormControlProps["sx"]} Custom styles for FormControl
+ * @param {FormLabelProps["sx"]} [formLabelStyles] - {FormLabelProps["sx"]} Custom styles for FormLabel
+ * @param {RadioGroupProps["sx"]} [radioGroupStyles] - {RadioGroupProps["sx"]} Custom styles for RadioGroup
+ * @param {(value: any) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - {Function} Callback fired when a radio button is clicked
+ * @param {RadioProps["onFocus"]} [onFocus] - {RadioProps["onFocus"]} Callback when focused
+ * @param {RadioProps["onBlur"]} [onBlur] - {RadioProps["onBlur"]} Callback when blurred
+ * @param {(option: Option, index: number) => React.ReactNode} [renderRadio] - {Function} Custom render function for radio buttons
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ * @param {SxProps<Theme>} [sxProps] - {SxProps<Theme>} Custom styles for RadioGroup container
+ *
+ * @returns {JSX.Element} The Form Input Radio Button Group component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputRadioButtonGroup } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *   const options = [
+ *     { name: "Option 1", value: "opt1" },
+ *     { name: "Option 2", value: "opt2" }
+ *   ];
+ *
+ *   return (
+ *     <FormInputRadioButtonGroup
+ *       name="choice"
+ *       label="Select an option"
+ *       control={control}
+ *       options={options}
+ *       row
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
 declare const FormInputRadioButtonGroup: React__default.MemoExoticComponent<({ name, label, control, options, defaultValue, onChange, ...props }: IFormInputFieldsWithOptions) => react_jsx_runtime.JSX.Element>;
 
-declare const NormalForm: () => react_jsx_runtime.JSX.Element;
+/**
+ * Form Input Slider Component
+ *
+ * A customizable slider field built on top of Material UI Slider and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible slider for range selections with support for: error handling, helper text, custom marks,
+ * styling overrides, orientation (horizontal/vertical), and standard slider behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the slider
+ * @param {number | number[]} [defaultValue=0] - {number | number[]} Default slider value(s)
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=true] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'horizontal'|'vertical'} [orientation='horizontal'] - {'horizontal'|'vertical'} Slider orientation
+ * @param {number} [min=0] - {number} Minimum value
+ * @param {number} [max=100] - {number} Maximum value
+ * @param {number|null} [step=1] - {number|null} Step value
+ * @param {'on'|'auto'|'off'} [valueLabelDisplay='auto'] - {'on'|'auto'|'off'} Whether to show value label
+ * @param {React.ReactNode | ((value: number, index: number) => React.ReactNode)} [valueLabelFormat] - {React.ReactNode} Custom format for value label
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Slider color
+ * @param {'small'|'medium'} [size] - {'small'|'medium'} Slider size
+ * @param {boolean | SliderProps['marks']} [marks] - {boolean | SliderProps['marks']} Marks on the slider
+ * @param {'normal'|'inverted'|false} [track='normal'] - {'normal'|'inverted'|false} Track display mode
+ * @param {SliderProps['sx']} [sliderStyles] - {SliderProps['sx']} Custom styles for the Slider component
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {(value: number | number[]) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {(value: number | number[]) => void} [onChangeCommitted] - {Function} Callback fired when value change is committed
+ * @param {(event: SyntheticEvent) => void} [onFocus] - {Function} Callback when focused
+ * @param {(event: SyntheticEvent) => void} [onBlur] - {Function} Callback when blurred
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ *
+ * @returns {JSX.Element} The Form Input Slider component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputSlider } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputSlider
+ *       name="volume"
+ *       label="Volume"
+ *       control={control}
+ *       min={0}
+ *       max={100}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputSlider: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
 
-declare const ReactHookForm: () => react_jsx_runtime.JSX.Element;
+/**
+ * Form Input Switch Component
+ *
+ * A customizable switch field built on top of Material UI Switch and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a flexible switch for binary choices with support for: error handling, helper text, custom icons,
+ * styling overrides, label placement, and standard switch behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the switch
+ * @param {boolean} [defaultValue=false] - {boolean} Default checked state
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {'primary'|'secondary'|'success'|'error'|'info'|'warning'} [color='primary'] - {'primary'|'secondary'|'success'|'error'|'info'|'warning'} Switch color
+ * @param {'small'|'medium'} [size] - {'small'|'medium'} Switch size
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'start'|'end'|'top'|'bottom'} [labelPlacement='end'] - {'start'|'end'|'top'|'bottom'} Label placement relative to switch
+ * @param {'start'|'end'|false} [edge] - {'start'|'end'|false} Edge placement for the switch
+ * @param {React.ReactNode} [checkedIcon] - {React.ReactNode} Custom icon for checked state
+ * @param {React.ReactNode} [icon] - {React.ReactNode} Custom icon for unchecked state
+ * @param {SwitchProps['sx']} [switchStyles] - {SwitchProps['sx']} Custom styles for the Switch component
+ * @param {FormControlLabelProps['sx']} [labelStyles] - {FormControlLabelProps['sx']} Custom styles for FormControlLabel
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {(checked: boolean) => void} [onChange] - {Function} Optional additional callback fired when value changes
+ * @param {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - {Function} Callback fired when clicked
+ * @param {SwitchProps['onFocus']} [onFocus] - {Function} Callback when focused
+ * @param {SwitchProps['onBlur']} [onBlur] - {Function} Callback when blurred
+ * @param {Object} [slotProps] - {Object} Custom slot props
+ * @param {Object} [slots] - {Object} Custom slots
+ *
+ * @returns {JSX.Element} The Form Input Switch component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputSwitch } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm();
+ *
+ *   return (
+ *     <FormInputSwitch
+ *       name="notifications"
+ *       label="Enable Notifications"
+ *       control={control}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputSwitch: React__default.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
+
+/**
+ * Form Input Toggle Button Component
+ *
+ * A customizable toggle button group field built on top of Material UI ToggleButtonGroup and FormControl,
+ * integrated with React Hook Form.
+ *
+ * @component
+ * @version 2.x.x
+ * @author call-max
+ *
+ * @description This component provides a group of flexible toggle buttons for single or multiple selections with support for:
+ * error handling, helper text, custom colors per button, styling overrides, and standard toggle behaviors.
+ * It integrates seamlessly with react-hook-form using the `Controller` component.
+ *
+ * @param {string} name - {string} Unique name for form identification
+ * @param {Control<any>} control - {Control<any>} React Hook Form control object
+ * @param {string | React.ReactNode} [label] - {string | React.ReactNode} Label text for the group
+ * @param {any} [defaultValue=""] - {any} Default selected value(s)
+ * @param {ToggleOption[]} options - {ToggleOption[]} Array of toggle options
+ * @param {boolean} [title=false] - {boolean} Whether to show label as title
+ * @param {boolean} [disabled=false] - {boolean} Whether the field is disabled
+ * @param {boolean} [fullWidth=false] - {boolean} Whether the field should take full width
+ * @param {boolean} [required] - {boolean} Required field indicator
+ * @param {'small'|'medium'|'large'} [size='medium'] - {'small'|'medium'|'large'} Toggle size
+ * @param {'horizontal'|'vertical'} [orientation='horizontal'] - {'horizontal'|'vertical'} Toggle orientation
+ * @param {boolean} [exclusive=true] - {boolean} Whether to allow only single selection
+ * @param {ToggleButtonProps['sx']} [buttonStyles] - {ToggleButtonProps['sx']} Custom styles for individual ToggleButton components
+ * @param {FormControlProps['sx']} [formControlStyles] - {FormControlProps['sx']} Custom styles for FormControl container
+ * @param {FormLabelProps['sx']} [formLabelStyles] - {FormLabelProps['sx']} Custom styles for FormLabel
+ * @param {ToggleButtonGroupProps['sx']} [groupStyles] - {ToggleButtonGroupProps['sx']} Custom styles for ToggleButtonGroup
+ * @param {(value: any) => void} [onChange] - {(value: any) => void} Optional additional callback fired when value changes
+ * @param {(option: ToggleOption, index: number) => React.ReactNode} [renderButton] - {Function} Custom render function for toggle buttons
+ *
+ * @returns {JSX.Element} The Form Input Toggle Button component
+ *
+ * @usage
+ * ```tsx
+ * import { FormInputToggleButton } from "@react-solutions/inputs";
+ * import { useForm } from "react-hook-form";
+ *
+ * function MyForm() {
+ *   const { control } = useForm({
+ *     defaultValues: { status: "ACTIVE" }
+ *   });
+ *
+ *   return (
+ *     <FormInputToggleButton
+ *       name="status"
+ *       label="Status"
+ *       control={control}
+ *       options={[
+ *         { name: "Active", value: "ACTIVE", color: "success" },
+ *         { name: "Inactive", value: "INACTIVE", color: "error" }
+ *       ]}
+ *       exclusive
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ */
+declare const FormInputToggleButton: React__default.MemoExoticComponent<({ name, label, control, options, defaultValue, onChange, ...props }: IFormInputFieldsWithOptions) => react_jsx_runtime.JSX.Element>;
 
 declare const FormFields: {
     FormInputTextField: React.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
@@ -1777,8 +4831,9 @@ declare const FormFields: {
     FormInputCheckBoxGroup: React.MemoExoticComponent<({ name, label, control, options, defaultValue, onChange, row, color, labelPlacement, ...props }: IFormInputCheckBoxGroupFields) => react_jsx_runtime.JSX.Element>;
     FormInputSwitch: React.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
     FormInputSlider: React.MemoExoticComponent<({ name, label, control, defaultValue, onChange, ...props }: IFormInputFields) => react_jsx_runtime.JSX.Element>;
-    FormInputSingleRadio: React.MemoExoticComponent<({ name, label, control, checked, defaultValue, onChange, color, labelPlacement, ...props }: IFormInputRadioFields) => react_jsx_runtime.JSX.Element>;
+    FormInputSingleRadio: React.MemoExoticComponent<({ name, label, control, defaultValue, onChange, color, labelPlacement, ...props }: IFormInputRadioFields) => react_jsx_runtime.JSX.Element>;
     FormInputRadioButtonGroup: React.MemoExoticComponent<({ name, label, control, options, defaultValue, onChange, ...props }: IFormInputFieldsWithOptions) => react_jsx_runtime.JSX.Element>;
+    FormInputToggleButton: React.MemoExoticComponent<({ name, label, control, options, defaultValue, onChange, ...props }: IFormInputFieldsWithOptions) => react_jsx_runtime.JSX.Element>;
     TextInputField: React.NamedExoticComponent<Omit<ITextInputFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     PasswordField: React.NamedExoticComponent<Omit<IPasswordFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
     NumberField: React.NamedExoticComponent<Omit<INumberInputFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -1799,6 +4854,7 @@ declare const FormFields: {
     RadioButtonFieldGroup: React.ForwardRefExoticComponent<Omit<IRadioButtonGroupFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     SwitchField: React.ForwardRefExoticComponent<Omit<ISwitchFieldProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     SliderField: React.ForwardRefExoticComponent<Omit<ISliderFieldProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    ToggleButtonField: React.ForwardRefExoticComponent<Omit<IToggleButtonFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 
-export { AutoCompleteField, CheckboxField as CheckBoxField, CheckboxFieldGroup as CheckBoxFieldGroup, ColorPickerField, DateCalendarField, DatePickerField, NormalForm as DemoForm, ReactHookForm as DemoHookForm, FileUploadField, FormInputAutoComplete, FormInputCalendar, FormInputCheckBox, FormInputCheckBoxGroup, FormInputColorPicker, FormInputDatePicker, FormInputFileUpload, FormInputMultiAutoComplete, FormInputMultiSelect, FormInputNumberField, FormInputOTPField, FormInputPasswordField, FormInputRadioButtonGroup, FormInputSearchField, FormInputSelect, FormInputRadioButton as FormInputSingleRadio, FormInputSlider, FormInputSwitch, FormInputTelField, FormInputTextArea, FormInputTextField, FormInputTimeClock, FormInputTimePicker, type IFormInputCheckBoxGroupFields, type IFormInputDateFields, type IFormInputFields, type IFormInputFieldsWithOptions, type IFormInputNumberFields, type IFormInputRadioFields, type IFormInputTextAreaFields, NumberField, OTPField, type Option, PasswordField, RadioButtonField, RadioButtonFieldGroup, SearchField as SearchInputField, SelectInputField, SliderField, SwitchField, TeliField as TelInputField, TextInputField, TimeClockField, TimePickerField, FormFields as default };
+export { AutoCompleteField, CheckboxField as CheckBoxField, CheckboxFieldGroup as CheckBoxFieldGroup, ColorPickerField, DateCalendarField, DatePickerField, NormalForm as DemoForm, ReactHookForm as DemoHookForm, FileUploadField, FormInputAutoComplete, FormInputCalendar, FormInputCheckBox, FormInputCheckBoxGroup, FormInputColorPicker, FormInputDatePicker, FormInputFileUpload, FormInputMultiAutoComplete, FormInputMultiSelect, FormInputNumberField, FormInputOTPField, FormInputPasswordField, FormInputRadioButtonGroup, FormInputSearchField, FormInputSelect, FormInputRadioButton as FormInputSingleRadio, FormInputSlider, FormInputSwitch, FormInputTelField, FormInputTextArea, FormInputTextField, FormInputTimeClock, FormInputTimePicker, FormInputToggleButton, type IFormInputCheckBoxGroupFields, type IFormInputDateFields, type IFormInputFields, type IFormInputFieldsWithOptions, type IFormInputNumberFields, type IFormInputRadioFields, type IFormInputTextAreaFields, NumberField, OTPField, type Option, PasswordField, RadioButtonField, RadioButtonFieldGroup, SearchField as SearchInputField, SelectInputField, SliderField, SwitchField, TeliField as TelInputField, TextInputField, TimeClockField, TimePickerField, ToggleButtonField, FormFields as default };