@react-solutions/inputs 0.1.3

package/dist/index.d.ts

@@ -0,0 +1,1333 @@
+import { FieldValues, Control, FieldErrors } from 'react-hook-form';
+import { ComponentType } from 'react';
+
+/**
+ * @module @react-solutions/input
+ * @description A comprehensive React form input library with React Hook Form integration and Material-UI components.
+ * Provides both standalone FormFields and React Hook Form integrated HookFormFields.
+ * @version 0.0.0
+ * @author React Solutions
+ *
+ * @example
+ * ```typescript
+ * import { FormInputTextField, useForm } from '@react-solutions/input';
+ * import { useForm } from 'react-hook-form';
+ *
+ * function MyForm() {
+ *   const { control, handleSubmit, formState: { errors } } = useForm();
+ *
+ *   const onSubmit = (data) => {
+ *     console.log(data);
+ *   };
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <FormInputTextField
+ *         name="username"
+ *         label="Username"
+ *         control={control}
+ *         errors={errors}
+ *       />
+ *       <button type="submit">Submit</button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+
+// ============================================================================
+// HOOK FORM FIELDS - Text Inputs
+// ============================================================================
+
+/**
+ * @component FormInputTextField
+ * @description React Hook Form integrated text input field component.
+ * Wraps TextInputField with React Hook Form Controller for form state management.
+ *
+ * @example
+ * ```typescript
+ * import { FormInputTextField } from '@react-solutions/input';
+ * import { useForm } from 'react-hook-form';
+ *
+ * function LoginForm() {
+ *   const { control, formState: { errors } } = useForm({
+ *     defaultValues: { email: '' }
+ *   });
+ *
+ *   return (
+ *     <FormInputTextField
+ *       name="email"
+ *       label="Email Address"
+ *       control={control}
+ *       errors={errors}
+ *       placeholder="Enter your email"
+ *       required
+ *       type="email"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With validation
+ * <FormInputTextField
+ *   name="username"
+ *   label="Username"
+ *   control={control}
+ *   errors={errors}
+ *   defaultValue=""
+ *   onChange={(value) => console.log('Changed:', value)}
+ *   disabled={false}
+ *   fullWidth
+ *   size="medium"
+ * />
+ * ```
+ *
+ * @props {IFormInputFields} props - Component props
+ * @props {string} props.name - Field name for form identification (required)
+ * @props {string} [props.label] - Label text for the field
+ * @props {Control} props.control - React Hook Form control object (required)
+ * @props {FieldErrors} props.errors - React Hook Form errors object (required)
+ * @props {string} [props.defaultValue=""] - Default value for the field
+ * @props {string} [props.placeholder] - Placeholder text
+ * @props {"small"|"medium"} [props.size] - Field size
+ * @props {boolean} [props.disabled] - Whether the field is disabled
+ * @props {boolean} [props.required] - Whether the field is required
+ * @props {boolean} [props.fullWidth] - Full width of the field
+ * @props {function} [props.onChange] - Callback fired when value changes: (value: any) => void
+ */
+declare const FormInputTextField: ComponentType<any>;
+
+/**
+ * @component FormInputTextArea
+ * @description React Hook Form integrated textarea field component.
+ * Supports multiline text input with customizable rows and resize options.
+ *
+ * @example
+ * ```typescript
+ * import { FormInputTextArea } from '@react-solutions/input';
+ *
+ * <FormInputTextArea
+ *   name="description"
+ *   label="Description"
+ *   control={control}
+ *   errors={errors}
+ *   placeholder="Enter description"
+ *   rows={4}
+ *   minRows={3}
+ *   maxRows={10}
+ *   resize="vertical"
+ * />
+ * ```
+ *
+ * @props {IFormInputTextAreaFields} props - Component props
+ * @props {string} props.name - Field name (required)
+ * @props {Control} props.control - React Hook Form control (required)
+ * @props {FieldErrors} props.errors - React Hook Form errors (required)
+ * @props {number} [props.rows] - Number of rows
+ * @props {number} [props.minRows] - Minimum number of rows
+ * @props {number} [props.maxRows] - Maximum number of rows
+ * @props {"none"|"both"|"horizontal"|"vertical"} [props.resize] - Resize option
+ */
+declare const FormInputTextArea: ComponentType<any>;
+
+/**
+ * @component FormInputPasswordField
+ * @description React Hook Form integrated password input field with secure text masking.
+ *
+ * @example
+ * ```typescript
+ * <FormInputPasswordField
+ *   name="password"
+ *   label="Password"
+ *   control={control}
+ *   errors={errors}
+ *   placeholder="Enter password"
+ *   required
+ *   autoComplete="current-password"
+ * />
+ * ```
+ */
+declare const FormInputPasswordField: ComponentType<any>;
+
+/**
+ * @component FormInputNumberField
+ * @description React Hook Form integrated number input field with validation.
+ * Supports min/max values, decimal places, and custom patterns.
+ *
+ * @example
+ * ```typescript
+ * <FormInputNumberField
+ *   name="age"
+ *   label="Age"
+ *   control={control}
+ *   errors={errors}
+ *   min={0}
+ *   max={120}
+ *   step={1}
+ *   allowDecimals={false}
+ * />
+ * ```
+ *
+ * @props {IFormInputNumberFields} props - Component props
+ * @props {number} [props.min] - Minimum value
+ * @props {number} [props.max] - Maximum value
+ * @props {number} [props.step] - Step value
+ * @props {boolean} [props.allowDecimals] - Allow decimal numbers
+ * @props {number} [props.decimalPlaces] - Number of decimal places
+ */
+declare const FormInputNumberField: ComponentType<any>;
+
+/**
+ * @component FormInputTelField
+ * @description React Hook Form integrated telephone number input field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputTelField
+ *   name="phone"
+ *   label="Phone Number"
+ *   control={control}
+ *   errors={errors}
+ *   placeholder="+1 (555) 123-4567"
+ * />
+ * ```
+ */
+declare const FormInputTelField: ComponentType<any>;
+
+/**
+ * @component FormInputSearchField
+ * @description React Hook Form integrated search input field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputSearchField
+ *   name="search"
+ *   label="Search"
+ *   control={control}
+ *   errors={errors}
+ *   placeholder="Search..."
+ *   onEnterPress={(value) => handleSearch(value)}
+ * />
+ * ```
+ */
+declare const FormInputSearchField: ComponentType<any>;
+
+/**
+ * @component FormInputOTPField
+ * @description React Hook Form integrated OTP (One-Time Password) input field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputOTPField
+ *   name="otp"
+ *   label="Enter OTP"
+ *   control={control}
+ *   errors={errors}
+ *   length={6}
+ * />
+ * ```
+ */
+declare const FormInputOTPField: ComponentType<any>;
+
+// ============================================================================
+// HOOK FORM FIELDS - Dropdown Inputs
+// ============================================================================
+
+/**
+ * @component FormInputSelect
+ * @description React Hook Form integrated select dropdown field.
+ * Supports single and multiple selection with custom options.
+ *
+ * @example
+ * ```typescript
+ * const options = [
+ *   { name: 'Option 1', value: '1' },
+ *   { name: 'Option 2', value: '2' },
+ *   { name: 'Option 3', value: '3' }
+ * ];
+ *
+ * <FormInputSelect
+ *   name="category"
+ *   label="Category"
+ *   control={control}
+ *   errors={errors}
+ *   options={options}
+ *   defaultValue=""
+ * />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Multiple selection
+ * <FormInputSelect
+ *   name="tags"
+ *   label="Tags"
+ *   control={control}
+ *   errors={errors}
+ *   options={options}
+ *   multiple
+ *   limitTags={3}
+ * />
+ * ```
+ *
+ * @props {IFormInputFieldsWithOptions} props - Component props
+ * @props {Option[]} [props.options=[]] - Options array for dropdown
+ * @props {number} [props.limitTags] - Limit number of tags displayed (for multi-select)
+ * @props {boolean} [props.multiple] - Allow multiple selections
+ */
+declare const FormInputSelect: ComponentType<any>;
+
+/**
+ * @component FormInputMultiSelect
+ * @description React Hook Form integrated multi-select dropdown field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputMultiSelect
+ *   name="skills"
+ *   label="Skills"
+ *   control={control}
+ *   errors={errors}
+ *   options={skillOptions}
+ *   limitTags={5}
+ *   filterSelectedOptions
+ * />
+ * ```
+ */
+declare const FormInputMultiSelect: ComponentType<any>;
+
+/**
+ * @component FormInputAutoComplete
+ * @description React Hook Form integrated autocomplete field with search functionality.
+ *
+ * @example
+ * ```typescript
+ * const countries = [
+ *   { name: 'United States', value: 'US' },
+ *   { name: 'Canada', value: 'CA' },
+ *   { name: 'Mexico', value: 'MX' }
+ * ];
+ *
+ * <FormInputAutoComplete
+ *   name="country"
+ *   label="Country"
+ *   control={control}
+ *   errors={errors}
+ *   options={countries}
+ *   placeholder="Select or type country"
+ * />
+ * ```
+ *
+ * @props {IFormInputFieldsWithOptions} props - Component props
+ * @props {Option[]} [props.options=[]] - Options array
+ * @props {function} [props.getOptionLabel] - Custom function to get option label
+ * @props {function} [props.renderOption] - Custom render function for options
+ */
+declare const FormInputAutoComplete: ComponentType<any>;
+
+/**
+ * @component FormInputMultiAutoComplete
+ * @description React Hook Form integrated multi-select autocomplete field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputMultiAutoComplete
+ *   name="ingredients"
+ *   label="Ingredients"
+ *   control={control}
+ *   errors={errors}
+ *   options={ingredientOptions}
+ *   limitTags={3}
+ *   disableCheckBox={false}
+ * />
+ * ```
+ */
+declare const FormInputMultiAutoComplete: ComponentType<any>;
+
+/**
+ * @component FormInputColorPicker
+ * @description React Hook Form integrated color picker field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputColorPicker
+ *   name="themeColor"
+ *   label="Theme Color"
+ *   control={control}
+ *   errors={errors}
+ *   defaultValue="#000000"
+ * />
+ * ```
+ */
+declare const FormInputColorPicker: ComponentType<any>;
+
+/**
+ * @component FormInputFileUpload
+ * @description React Hook Form integrated file upload field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputFileUpload
+ *   name="avatar"
+ *   label="Upload Avatar"
+ *   control={control}
+ *   errors={errors}
+ *   accept="image/*"
+ *   multiple={false}
+ * />
+ * ```
+ */
+declare const FormInputFileUpload: ComponentType<any>;
+
+// ============================================================================
+// HOOK FORM FIELDS - Date/Time Inputs
+// ============================================================================
+
+/**
+ * @component FormInputDatePicker
+ * @description React Hook Form integrated date picker field.
+ * Uses MUI X Date Pickers with date-fns adapter.
+ *
+ * @example
+ * ```typescript
+ * import { useForm } from 'react-hook-form';
+ *
+ * <FormInputDatePicker
+ *   name="birthDate"
+ *   label="Birth Date"
+ *   control={control}
+ *   errors={errors}
+ *   minDate={new Date('1900-01-01')}
+ *   maxDate={new Date()}
+ *   disablePast
+ * />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With custom date validation
+ * <FormInputDatePicker
+ *   name="appointmentDate"
+ *   label="Appointment Date"
+ *   control={control}
+ *   errors={errors}
+ *   shouldDisableDate={(date) => {
+ *     // Disable weekends
+ *     return date.getDay() === 0 || date.getDay() === 6;
+ *   }}
+ * />
+ * ```
+ *
+ * @props {IFormInputDateFields} props - Component props
+ * @props {Date|null} [props.defaultValue=null] - Default date value
+ * @props {Date} [props.minDate] - Minimum selectable date
+ * @props {Date} [props.maxDate] - Maximum selectable date
+ * @props {boolean} [props.readOnly] - Whether the field is read-only
+ * @props {boolean} [props.disablePast] - Whether to disable past dates
+ * @props {function} [props.shouldDisableDate] - Custom function to disable specific dates: (date: Date) => boolean
+ */
+declare const FormInputDatePicker: ComponentType<any>;
+
+/**
+ * @component FormInputTimePicker
+ * @description React Hook Form integrated time picker field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputTimePicker
+ *   name="appointmentTime"
+ *   label="Appointment Time"
+ *   control={control}
+ *   errors={errors}
+ *   ampm={true}
+ *   views={['hours', 'minutes']}
+ * />
+ * ```
+ *
+ * @props {IFormInputDateFields} props - Component props
+ * @props {boolean} [props.ampm] - Whether to use 12-hour format (AM/PM)
+ * @props {TimeView[]} [props.views] - Views to show in picker
+ */
+declare const FormInputTimePicker: ComponentType<any>;
+
+/**
+ * @component FormInputTimeClock
+ * @description React Hook Form integrated time clock field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputTimeClock
+ *   name="alarmTime"
+ *   label="Alarm Time"
+ *   control={control}
+ *   errors={errors}
+ *   ampm={true}
+ *   ampmInClock={true}
+ * />
+ * ```
+ */
+declare const FormInputTimeClock: ComponentType<any>;
+
+/**
+ * @component FormInputCalendar
+ * @description React Hook Form integrated calendar field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputCalendar
+ *   name="selectedDate"
+ *   label="Select Date"
+ *   control={control}
+ *   errors={errors}
+ *   defaultValue={new Date()}
+ * />
+ * ```
+ */
+declare const FormInputCalendar: ComponentType<any>;
+
+// ============================================================================
+// HOOK FORM FIELDS - Box Inputs
+// ============================================================================
+
+/**
+ * @component FormInputCheckBox
+ * @description React Hook Form integrated single checkbox field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputCheckBox
+ *   name="agreeToTerms"
+ *   label="I agree to the terms and conditions"
+ *   control={control}
+ *   errors={errors}
+ *   defaultValue={false}
+ *   color="primary"
+ *   labelPlacement="end"
+ * />
+ * ```
+ *
+ * @props {IFormInputFields} props - Component props
+ * @props {boolean} [props.defaultValue=false] - Default checked state
+ */
+declare const FormInputCheckBox: ComponentType<any>;
+
+/**
+ * @component FormInputCheckBoxGroup
+ * @description React Hook Form integrated checkbox group field.
+ * Supports multiple selections from a list of options.
+ *
+ * @example
+ * ```typescript
+ * const interests = [
+ *   { name: 'Sports', value: 'sports' },
+ *   { name: 'Music', value: 'music' },
+ *   { name: 'Reading', value: 'reading' }
+ * ];
+ *
+ * <FormInputCheckBoxGroup
+ *   name="interests"
+ *   label="Interests"
+ *   control={control}
+ *   errors={errors}
+ *   options={interests}
+ *   row={true}
+ *   color="primary"
+ * />
+ * ```
+ *
+ * @props {IFormInputCheckBoxGroupFields} props - Component props
+ * @props {Option[]} [props.options=[]] - Options array
+ * @props {boolean} [props.row] - Whether to display checkboxes in a row
+ * @props {"default"|"primary"|"secondary"|"error"|"info"|"success"|"warning"} [props.color] - Checkbox color
+ */
+declare const FormInputCheckBoxGroup: ComponentType<any>;
+
+/**
+ * @component FormInputSwitch
+ * @description React Hook Form integrated switch/toggle field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputSwitch
+ *   name="notifications"
+ *   label="Enable Notifications"
+ *   control={control}
+ *   errors={errors}
+ *   defaultValue={false}
+ *   color="primary"
+ * />
+ * ```
+ */
+declare const FormInputSwitch: ComponentType<any>;
+
+/**
+ * @component FormInputSlider
+ * @description React Hook Form integrated slider/range field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputSlider
+ *   name="volume"
+ *   label="Volume"
+ *   control={control}
+ *   errors={errors}
+ *   defaultValue={50}
+ *   min={0}
+ *   max={100}
+ *   step={1}
+ *   marks
+ * />
+ * ```
+ */
+declare const FormInputSlider: ComponentType<any>;
+
+/**
+ * @component FormInputSingleRadio
+ * @description React Hook Form integrated single radio button field.
+ *
+ * @example
+ * ```typescript
+ * <FormInputSingleRadio
+ *   name="gender"
+ *   label="Male"
+ *   control={control}
+ *   errors={errors}
+ *   value="male"
+ *   checked={watch('gender') === 'male'}
+ * />
+ * ```
+ */
+declare const FormInputSingleRadio: ComponentType<any>;
+
+/**
+ * @component FormInputRadioButtonGroup
+ * @description React Hook Form integrated radio button group field.
+ * Supports single selection from a list of options.
+ *
+ * @example
+ * ```typescript
+ * const genderOptions = [
+ *   { name: 'Male', value: 'male' },
+ *   { name: 'Female', value: 'female' },
+ *   { name: 'Other', value: 'other' }
+ * ];
+ *
+ * <FormInputRadioButtonGroup
+ *   name="gender"
+ *   label="Gender"
+ *   control={control}
+ *   errors={errors}
+ *   options={genderOptions}
+ *   row={true}
+ *   color="primary"
+ * />
+ * ```
+ *
+ * @props {IFormInputFieldsWithOptions} props - Component props
+ * @props {Option[]} [props.options=[]] - Options array
+ * @props {boolean} [props.row] - Whether to display radio buttons in a row
+ */
+declare const FormInputRadioButtonGroup: ComponentType<any>;
+
+// ============================================================================
+// FORM FIELDS - Text Inputs (Standalone)
+// ============================================================================
+
+/**
+ * @component TextInputField
+ * @description Standalone text input field component without React Hook Form integration.
+ * Use this when you need direct control over the input value and onChange handler.
+ *
+ * @example
+ * ```typescript
+ * import { TextInputField } from '@react-solutions/input';
+ * import { useState } from 'react';
+ *
+ * function MyComponent() {
+ *   const [value, setValue] = useState('');
+ *
+ *   return (
+ *     <TextInputField
+ *       name="username"
+ *       label="Username"
+ *       value={value}
+ *       onChange={(e) => setValue(e.target.value)}
+ *       placeholder="Enter username"
+ *       required
+ *       fullWidth
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Multiline textarea
+ * <TextInputField
+ *   name="description"
+ *   label="Description"
+ *   value={description}
+ *   onChange={(e) => setDescription(e.target.value)}
+ *   multiline
+ *   rows={4}
+ *   minRows={3}
+ *   maxRows={10}
+ *   resize="vertical"
+ * />
+ * ```
+ *
+ * @props {ITextInputFieldProps} props - Component props
+ * @props {string} props.value - Current text value (required)
+ * @props {function} props.onChange - Callback fired when value changes: (event: ChangeEvent) => void (required)
+ * @props {string} [props.name] - Field name
+ * @props {string} [props.label] - Label text
+ * @props {FieldError} [props.error] - Error object with optional message
+ * @props {string} [props.helperText] - Helper text to display below field
+ * @props {boolean} [props.disabled=false] - Whether the field is disabled
+ * @props {string} [props.placeholder] - Placeholder text
+ * @props {"outlined"|"filled"|"standard"} [props.variant="outlined"] - TextField variant
+ * @props {"small"|"medium"} [props.size] - TextField size
+ * @props {boolean} [props.fullWidth=true] - Full width of the field
+ * @props {boolean} [props.multiline=false] - Whether to enable multiline input (textarea)
+ * @props {number} [props.rows] - Number of rows for multiline input
+ * @props {number} [props.minRows] - Minimum number of rows
+ * @props {number} [props.maxRows] - Maximum number of rows
+ * @props {"none"|"both"|"horizontal"|"vertical"} [props.resize="both"] - Resize option for textarea
+ * @props {number} [props.maxLength] - Maximum length of input
+ * @props {string} [props.type="text"] - Input type (text, email, number, tel, url, etc.)
+ * @props {React.ReactNode} [props.startAdornment] - Start adornment (icon or element before input)
+ * @props {React.ReactNode} [props.endAdornment] - End adornment (icon or element after input)
+ * @props {function} [props.onEnterPress] - Callback fired on Enter key press: (value: string) => void
+ */
+declare const TextInputField: ComponentType<any>;
+
+/**
+ * @component PasswordField
+ * @description Standalone password input field with secure text masking.
+ *
+ * @example
+ * ```typescript
+ * <PasswordField
+ *   name="password"
+ *   label="Password"
+ *   value={password}
+ *   onChange={(e) => setPassword(e.target.value)}
+ *   placeholder="Enter password"
+ *   showPasswordToggle
+ * />
+ * ```
+ */
+declare const PasswordField: ComponentType<any>;
+
+/**
+ * @component NumberField
+ * @description Standalone number input field with validation.
+ *
+ * @example
+ * ```typescript
+ * <NumberField
+ *   name="age"
+ *   label="Age"
+ *   value={age}
+ *   onChange={(e) => setAge(e.target.value)}
+ *   min={0}
+ *   max={120}
+ *   step={1}
+ * />
+ * ```
+ */
+declare const NumberField: ComponentType<any>;
+
+/**
+ * @component TelInputField
+ * @description Standalone telephone number input field.
+ *
+ * @example
+ * ```typescript
+ * <TelInputField
+ *   name="phone"
+ *   label="Phone Number"
+ *   value={phone}
+ *   onChange={(e) => setPhone(e.target.value)}
+ *   placeholder="+1 (555) 123-4567"
+ * />
+ * ```
+ */
+declare const TelInputField: ComponentType<any>;
+
+/**
+ * @component SearchInputField
+ * @description Standalone search input field.
+ *
+ * @example
+ * ```typescript
+ * <SearchInputField
+ *   name="search"
+ *   label="Search"
+ *   value={searchTerm}
+ *   onChange={(e) => setSearchTerm(e.target.value)}
+ *   onEnterPress={(value) => handleSearch(value)}
+ * />
+ * ```
+ */
+declare const SearchInputField: ComponentType<any>;
+
+/**
+ * @component OTPField
+ * @description Standalone OTP (One-Time Password) input field.
+ *
+ * @example
+ * ```typescript
+ * <OTPField
+ *   name="otp"
+ *   label="Enter OTP"
+ *   value={otp}
+ *   onChange={setOtp}
+ *   length={6}
+ * />
+ * ```
+ */
+declare const OTPField: ComponentType<any>;
+
+// ============================================================================
+// FORM FIELDS - Dropdown Inputs (Standalone)
+// ============================================================================
+
+/**
+ * @component SelectInputField
+ * @description Standalone select dropdown field without React Hook Form integration.
+ *
+ * @example
+ * ```typescript
+ * const options = [
+ *   { name: 'Option 1', value: '1' },
+ *   { name: 'Option 2', value: '2' }
+ * ];
+ *
+ * <SelectInputField
+ *   name="category"
+ *   label="Category"
+ *   value={selectedValue}
+ *   onChange={(e) => setSelectedValue(e.target.value)}
+ *   options={options}
+ *   fullWidth
+ * />
+ * ```
+ *
+ * @props {ISelectInputFieldProps} props - Component props
+ * @props {string|number|(string|number)[]|""} props.value - Current selected value(s) (required)
+ * @props {function} props.onChange - Callback fired when value changes: (event: SelectChangeEvent) => void (required)
+ * @props {SelectOption[]} props.options - Options array to display in dropdown (required)
+ * @props {boolean} [props.multiple] - Whether to allow multiple selections
+ * @props {function} [props.renderValue] - Custom render function for selected value(s)
+ * @props {function} [props.renderMenuItem] - Custom render function for menu items
+ */
+declare const SelectInputField: ComponentType<any>;
+
+/**
+ * @component AutoCompleteField
+ * @description Standalone autocomplete field with search functionality.
+ *
+ * @example
+ * ```typescript
+ * const countries = [
+ *   { name: 'United States', value: 'US' },
+ *   { name: 'Canada', value: 'CA' }
+ * ];
+ *
+ * <AutoCompleteField
+ *   name="country"
+ *   label="Country"
+ *   value={selectedCountry}
+ *   onChange={(_, newValue) => setSelectedCountry(newValue)}
+ *   options={countries}
+ *   placeholder="Select or type country"
+ * />
+ * ```
+ */
+declare const AutoCompleteField: ComponentType<any>;
+
+/**
+ * @component ColorPickerField
+ * @description Standalone color picker field.
+ *
+ * @example
+ * ```typescript
+ * <ColorPickerField
+ *   name="themeColor"
+ *   label="Theme Color"
+ *   value={color}
+ *   onChange={setColor}
+ *   defaultValue="#000000"
+ * />
+ * ```
+ */
+declare const ColorPickerField: ComponentType<any>;
+
+/**
+ * @component FileUploadField
+ * @description Standalone file upload field.
+ *
+ * @example
+ * ```typescript
+ * <FileUploadField
+ *   name="avatar"
+ *   label="Upload Avatar"
+ *   value={file}
+ *   onChange={setFile}
+ *   accept="image/*"
+ *   multiple={false}
+ * />
+ * ```
+ */
+declare const FileUploadField: ComponentType<any>;
+
+// ============================================================================
+// FORM FIELDS - Date/Time Inputs (Standalone)
+// ============================================================================
+
+/**
+ * @component DatePickerField
+ * @description Standalone date picker field without React Hook Form integration.
+ * Uses MUI X Date Pickers with date-fns adapter.
+ *
+ * @example
+ * ```typescript
+ * <DatePickerField
+ *   name="birthDate"
+ *   label="Birth Date"
+ *   value={date}
+ *   onChange={setDate}
+ *   minDate={new Date('1900-01-01')}
+ *   maxDate={new Date()}
+ *   disablePast
+ * />
+ * ```
+ *
+ * @props {IDatePickerFieldProps} props - Component props
+ * @props {Date|null} props.value - Current selected date value (required)
+ * @props {function} props.onChange - Callback fired when date changes: (newValue: Date | null) => void (required)
+ * @props {Date} [props.minDate] - Minimum selectable date
+ * @props {Date} [props.maxDate] - Maximum selectable date
+ * @props {boolean} [props.disablePast] - Whether to disable past dates
+ * @props {function} [props.shouldDisableDate] - Custom function to disable specific dates: (date: Date) => boolean
+ */
+declare const DatePickerField: ComponentType<any>;
+
+/**
+ * @component TimePickerField
+ * @description Standalone time picker field.
+ *
+ * @example
+ * ```typescript
+ * <TimePickerField
+ *   name="appointmentTime"
+ *   label="Appointment Time"
+ *   value={time}
+ *   onChange={setTime}
+ *   ampm={true}
+ *   views={['hours', 'minutes']}
+ * />
+ * ```
+ */
+declare const TimePickerField: ComponentType<any>;
+
+/**
+ * @component TimeClockField
+ * @description Standalone time clock field.
+ *
+ * @example
+ * ```typescript
+ * <TimeClockField
+ *   name="alarmTime"
+ *   label="Alarm Time"
+ *   value={time}
+ *   onChange={setTime}
+ *   ampm={true}
+ *   ampmInClock={true}
+ * />
+ * ```
+ */
+declare const TimeClockField: ComponentType<any>;
+
+/**
+ * @component DateCalendarField
+ * @description Standalone calendar field.
+ *
+ * @example
+ * ```typescript
+ * <DateCalendarField
+ *   name="selectedDate"
+ *   label="Select Date"
+ *   value={date}
+ *   onChange={setDate}
+ *   defaultValue={new Date()}
+ * />
+ * ```
+ */
+declare const DateCalendarField: ComponentType<any>;
+
+// ============================================================================
+// FORM FIELDS - Box Inputs (Standalone)
+// ============================================================================
+
+/**
+ * @component CheckBoxField
+ * @description Standalone single checkbox field without React Hook Form integration.
+ *
+ * @example
+ * ```typescript
+ * <CheckBoxField
+ *   name="agreeToTerms"
+ *   label="I agree to the terms and conditions"
+ *   value={checked}
+ *   onChange={setChecked}
+ *   color="primary"
+ *   labelPlacement="end"
+ * />
+ * ```
+ *
+ * @props {ICheckboxFieldProps} props - Component props
+ * @props {boolean} props.value - Current checked state (required)
+ * @props {function} props.onChange - Callback fired when checked state changes: (checked: boolean) => void (required)
+ * @props {React.ReactNode} [props.label] - Label text or element
+ * @props {"default"|"primary"|"secondary"|"error"|"info"|"success"|"warning"} [props.color] - Checkbox color
+ * @props {"end"|"start"|"top"|"bottom"} [props.labelPlacement] - Label placement
+ */
+declare const CheckBoxField: ComponentType<any>;
+
+/**
+ * @component CheckBoxFieldGroup
+ * @description Standalone checkbox group field.
+ * Supports multiple selections from a list of options.
+ *
+ * @example
+ * ```typescript
+ * const interests = [
+ *   { name: 'Sports', value: 'sports' },
+ *   { name: 'Music', value: 'music' }
+ * ];
+ *
+ * <CheckBoxFieldGroup
+ *   name="interests"
+ *   label="Interests"
+ *   value={selectedInterests}
+ *   onChange={setSelectedInterests}
+ *   options={interests}
+ *   row={true}
+ *   color="primary"
+ * />
+ * ```
+ */
+declare const CheckBoxFieldGroup: ComponentType<any>;
+
+/**
+ * @component RadioButtonField
+ * @description Standalone single radio button field.
+ *
+ * @example
+ * ```typescript
+ * <RadioButtonField
+ *   name="gender"
+ *   label="Male"
+ *   value={selectedGender === 'male'}
+ *   onChange={() => setSelectedGender('male')}
+ *   color="primary"
+ * />
+ * ```
+ */
+declare const RadioButtonField: ComponentType<any>;
+
+/**
+ * @component RadioButtonFieldGroup
+ * @description Standalone radio button group field.
+ * Supports single selection from a list of options.
+ *
+ * @example
+ * ```typescript
+ * const genderOptions = [
+ *   { name: 'Male', value: 'male' },
+ *   { name: 'Female', value: 'female' }
+ * ];
+ *
+ * <RadioButtonFieldGroup
+ *   name="gender"
+ *   label="Gender"
+ *   value={selectedGender}
+ *   onChange={setSelectedGender}
+ *   options={genderOptions}
+ *   row={true}
+ *   color="primary"
+ * />
+ * ```
+ */
+declare const RadioButtonFieldGroup: ComponentType<any>;
+
+/**
+ * @component SwitchField
+ * @description Standalone switch/toggle field.
+ *
+ * @example
+ * ```typescript
+ * <SwitchField
+ *   name="notifications"
+ *   label="Enable Notifications"
+ *   value={enabled}
+ *   onChange={setEnabled}
+ *   color="primary"
+ * />
+ * ```
+ */
+declare const SwitchField: ComponentType<any>;
+
+/**
+ * @component SliderField
+ * @description Standalone slider/range field.
+ *
+ * @example
+ * ```typescript
+ * <SliderField
+ *   name="volume"
+ *   label="Volume"
+ *   value={volume}
+ *   onChange={setVolume}
+ *   min={0}
+ *   max={100}
+ *   step={1}
+ *   marks
+ * />
+ * ```
+ */
+declare const SliderField: ComponentType<any>;
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+/**
+ * @typedef {Object} Option
+ * @description Base option type for dropdown fields
+ * @property {string} name - Display name of the option
+ * @property {string|number} value - Value of the option
+ * @property {boolean} [disabled] - Whether the option is disabled
+ * @property {*} [key] - Additional properties
+ */
+type Option = {
+	name: string;
+	value: number | string;
+	disabled?: boolean;
+	[key: string]: unknown;
+};
+
+/**
+ * @typedef {Object} IFormInputFields
+ * @description Base interface for all HookForm field components
+ * @property {string} name - Field name for form identification (required)
+ * @property {string} [label] - Label text for the field
+ * @property {Control} control - React Hook Form control object (required)
+ * @property {FieldErrors} errors - React Hook Form errors object (required)
+ * @property {*} [defaultValue] - Default value for the field
+ * @property {string} [placeholder] - Placeholder text
+ * @property {"small"|"medium"} [size] - Field size
+ * @property {boolean} [disabled] - Whether the field is disabled
+ * @property {boolean} [required] - Whether the field is required
+ * @property {boolean} [fullWidth] - Full width of the field
+ * @property {SxProps} [inputStyles] - Custom styles for input
+ * @property {SxProps} [sx] - Custom styles
+ * @property {*} [slotProps] - Custom slot props for MUI v7
+ * @property {*} [slots] - Custom slots for MUI v7
+ * @property {function} [onChange] - Callback fired when the value changes: (value: any) => void
+ */
+interface IFormInputFields<TFieldValues extends FieldValues = FieldValues> {
+	name: string;
+	label?: string;
+	control: Control<TFieldValues>;
+	errors: FieldErrors<TFieldValues>;
+	defaultValue?: any;
+	placeholder?: string;
+	size?: "small" | "medium";
+	disabled?: boolean;
+	required?: boolean;
+	fullWidth?: boolean;
+	inputStyles?: any;
+	sx?: any;
+	slotProps?: any;
+	slots?: any;
+	onChange?: (value: any) => void;
+	[key: string]: any;
+}
+
+/**
+ * @typedef {Object} IFormInputFieldsWithOptions
+ * @description Interface for fields with options (Select, AutoComplete, etc.)
+ * @extends {IFormInputFields}
+ * @property {Option[]} [options] - Options array for dropdown fields
+ * @property {number} [limitTags] - Limit number of tags displayed (for multi-select)
+ * @property {function} [renderOption] - Custom render function for options
+ * @property {function} [getOptionLabel] - Custom function to get option label
+ * @property {boolean} [isRenderSingle] - Whether to render single option
+ * @property {function} [renderOptionValue] - Custom render function for option value
+ * @property {boolean} [disableCheckBox] - Whether to disable checkbox in multi-select
+ * @property {boolean} [filterSelectedOptions] - Whether to filter selected options
+ */
+interface IFormInputFieldsWithOptions<TFieldValues extends FieldValues = FieldValues>
+	extends IFormInputFields<TFieldValues> {
+	options?: Option[];
+	limitTags?: number;
+	renderOption?: any;
+	getOptionLabel?: any;
+	isRenderSingle?: boolean;
+	renderOptionValue?: any;
+	disableCheckBox?: boolean;
+	filterSelectedOptions?: boolean;
+}
+
+/**
+ * @typedef {Object} IFormInputDateFields
+ * @description Interface for date/time picker fields
+ * @extends {IFormInputFields}
+ * @property {Date|null} [defaultValue] - Default date value
+ * @property {Date} [minDate] - Minimum selectable date
+ * @property {Date} [maxDate] - Maximum selectable date
+ * @property {boolean} [readOnly] - Whether the field is read-only
+ * @property {*} [timezone] - Timezone setting
+ * @property {boolean} [ampm] - Whether to use 12-hour format (AM/PM)
+ * @property {TimeView[]} [views] - Views to show in picker
+ * @property {boolean} [ampmInClock] - Whether to show AM/PM in clock
+ * @property {boolean} [disablePast] - Whether to disable past dates
+ * @property {function} [shouldDisableDate] - Custom function to disable specific dates: (date: Date) => boolean
+ */
+interface IFormInputDateFields<TFieldValues extends FieldValues = FieldValues>
+	extends IFormInputFields<TFieldValues> {
+	defaultValue?: Date | null;
+	minDate?: Date;
+	maxDate?: Date;
+	readOnly?: boolean;
+	timezone?: any;
+	ampm?: boolean;
+	views?: any[];
+	ampmInClock?: boolean;
+	disablePast?: boolean;
+	shouldDisableDate?: (date: Date) => boolean;
+}
+
+/**
+ * @typedef {Object} IFormInputNumberFields
+ * @description Interface for number input fields
+ * @extends {IFormInputFields}
+ * @property {string} [pattern] - Number pattern type or custom pattern string
+ * @property {number} [min] - Minimum value
+ * @property {number} [max] - Maximum value
+ * @property {number} [step] - Step value
+ * @property {boolean} [allowDecimals] - Allow decimal numbers
+ * @property {number} [decimalPlaces] - Number of decimal places
+ */
+interface IFormInputNumberFields<TFieldValues extends FieldValues = FieldValues>
+	extends IFormInputFields<TFieldValues> {
+	pattern?: string;
+	min?: number;
+	max?: number;
+	step?: number;
+	allowDecimals?: boolean;
+	decimalPlaces?: number;
+}
+
+/**
+ * @typedef {Object} IFormInputTextAreaFields
+ * @description Interface for text area fields
+ * @extends {IFormInputFields}
+ * @property {number} [rows] - Number of rows
+ * @property {number} [minRows] - Minimum number of rows
+ * @property {number} [maxRows] - Maximum number of rows
+ * @property {"none"|"both"|"horizontal"|"vertical"} [resize] - Resize option
+ */
+interface IFormInputTextAreaFields<TFieldValues extends FieldValues = FieldValues>
+	extends IFormInputFields<TFieldValues> {
+	rows?: number;
+	minRows?: number;
+	maxRows?: number;
+	resize?: "none" | "both" | "horizontal" | "vertical";
+}
+
+/**
+ * @typedef {Object} IFormInputRadioFields
+ * @description Interface for radio button fields (single)
+ * @extends {IFormInputFields}
+ * @property {boolean} [checked] - Current checked state
+ * @property {"default"|"primary"|"secondary"|"error"|"info"|"success"|"warning"} [color] - Radio color
+ * @property {"end"|"start"|"top"|"bottom"} [labelPlacement] - Label placement
+ */
+interface IFormInputRadioFields<TFieldValues extends FieldValues = FieldValues>
+	extends IFormInputFields<TFieldValues> {
+	checked?: boolean;
+	color?: "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
+	labelPlacement?: "end" | "start" | "top" | "bottom";
+}
+
+/**
+ * @typedef {Object} IFormInputCheckBoxGroupFields
+ * @description Interface for checkbox group fields
+ * @extends {IFormInputFieldsWithOptions}
+ * @property {boolean} [row] - Whether to display checkboxes in a row
+ * @property {"default"|"primary"|"secondary"|"error"|"info"|"success"|"warning"} [color] - Checkbox color
+ * @property {"end"|"start"|"top"|"bottom"} [labelPlacement] - Label placement
+ */
+interface IFormInputCheckBoxGroupFields<TFieldValues extends FieldValues = FieldValues>
+	extends IFormInputFieldsWithOptions<TFieldValues> {
+	row?: boolean;
+	color?: "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
+	labelPlacement?: "end" | "start" | "top" | "bottom";
+}
+
+// Default export
+declare const _default: {
+	// HookFormFields
+	FormInputTextField: ComponentType<any>;
+	FormInputTextArea: ComponentType<any>;
+	FormInputPasswordField: ComponentType<any>;
+	FormInputNumberField: ComponentType<any>;
+	FormInputTelField: ComponentType<any>;
+	FormInputSearchField: ComponentType<any>;
+	FormInputOTPField: ComponentType<any>;
+	FormInputSelect: ComponentType<any>;
+	FormInputMultiSelect: ComponentType<any>;
+	FormInputAutoComplete: ComponentType<any>;
+	FormInputMultiAutoComplete: ComponentType<any>;
+	FormInputColorPicker: ComponentType<any>;
+	FormInputFileUpload: ComponentType<any>;
+	FormInputDatePicker: ComponentType<any>;
+	FormInputTimePicker: ComponentType<any>;
+	FormInputTimeClock: ComponentType<any>;
+	FormInputCalendar: ComponentType<any>;
+	FormInputCheckBox: ComponentType<any>;
+	FormInputCheckBoxGroup: ComponentType<any>;
+	FormInputSwitch: ComponentType<any>;
+	FormInputSlider: ComponentType<any>;
+	FormInputSingleRadio: ComponentType<any>;
+	FormInputRadioButtonGroup: ComponentType<any>;
+	// FormFields
+	TextInputField: ComponentType<any>;
+	PasswordField: ComponentType<any>;
+	NumberField: ComponentType<any>;
+	TelInputField: ComponentType<any>;
+	SearchInputField: ComponentType<any>;
+	OTPField: ComponentType<any>;
+	SelectInputField: ComponentType<any>;
+	AutoCompleteField: ComponentType<any>;
+	ColorPickerField: ComponentType<any>;
+	FileUploadField: ComponentType<any>;
+	DatePickerField: ComponentType<any>;
+	TimePickerField: ComponentType<any>;
+	TimeClockField: ComponentType<any>;
+	DateCalendarField: ComponentType<any>;
+	CheckBoxField: ComponentType<any>;
+	CheckBoxFieldGroup: ComponentType<any>;
+	RadioButtonField: ComponentType<any>;
+	RadioButtonFieldGroup: ComponentType<any>;
+	SwitchField: ComponentType<any>;
+	SliderField: ComponentType<any>;
+};
+
+export { AutoCompleteField, CheckBoxField, CheckBoxFieldGroup, ColorPickerField, DateCalendarField, DatePickerField, FileUploadField, FormInputAutoComplete, FormInputCalendar, FormInputCheckBox, FormInputCheckBoxGroup, FormInputColorPicker, FormInputDatePicker, FormInputFileUpload, FormInputMultiAutoComplete, FormInputMultiSelect, FormInputNumberField, FormInputOTPField, FormInputPasswordField, FormInputRadioButtonGroup, FormInputSearchField, FormInputSelect, 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, SearchInputField, SelectInputField, SliderField, SwitchField, TelInputField, TextInputField, TimeClockField, TimePickerField, _default as default };