@paratco/rhf-mui-form/dist/index.d.ts

MUI + React Hook Form Reusable Form Components

import { AutocompleteProps } from '@mui/material';
import { CheckboxProps } from '@mui/material';
import { Control } from 'react-hook-form';
import { DateFieldProps } from '@mui/x-date-pickers';
import { DatePickerProps } from '@mui/x-date-pickers';
import { DateTimeFieldProps } from '@mui/x-date-pickers';
import { DateTimePickerProps } from '@mui/x-date-pickers';
import { FieldValues } from 'react-hook-form';
import { FormLabel } from '@mui/material';
import { Path } from 'react-hook-form';
import { RadioGroupProps } from '@mui/material';
import { ReactElement } from 'react';
import { ReactMaskOpts } from 'react-imask';
import { ReactNode } from 'react';
import { SelectProps } from '@mui/material';
import { SwitchProps } from '@mui/material';
import { TextFieldProps } from '@mui/material';

declare interface Category {
    label: string;
    value: string;
}

declare type NotUndefined = object | string | number | boolean | null | NotUndefined[];

declare interface OptionItem extends SelectOptionBase {
    value: string;
}

declare interface OptionItem_2 {
    label: string;
    value: string;
    disabled?: boolean;
}

/**
 * Interface defining the structure of an option item in the select field.
 * @extends SelectOptionBase - Base interface for the select options.
 */
declare interface OptionItem_3 extends SelectOptionBase {
    /** The value of the option, which is used as the key */
    value: string;
    category?: Category;
}

/**
 * Interface defining the structure of an option item in the select field.
 * @extends SelectOptionBase - Base interface for the select options.
 */
declare interface OptionItem_4 extends SelectOptionBase {
    /** The value of the option, which can be any type */
    value: NotUndefined;
}

declare type Props<T extends FieldValues, Value extends OptionItem, Multiple extends boolean, DisableClearable extends boolean, FreeSolo extends boolean> = Omit<AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>, "name" | "renderInput" | "multiple"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** The label for the input field, which will be displayed as a floating label. */
    readonly label: ReactNode;
    /** The options to be displayed in the autocomplete dropdown. */
    readonly options: OptionItem[];
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
    /** Optional: Props to be passed to the underlying `TextField` component used in the `renderInput` function. */
    readonly renderInputProps?: Omit<TextFieldProps, "name">;
    /** Optional: To support single or multiple selections */
    readonly multiple?: boolean;
};

declare type Props_10<T extends FieldValues> = Omit<TextFieldProps, "name"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** Masking options for the input, following `react-imask` options */
    readonly maskOptions: ReactMaskOpts;
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
    /** Direction of the text input (left-to-right or right-to-left) */
    readonly inputDir?: "ltr" | "rtl";
    /** Whether the field is read-only */
    readonly isReadOnly?: boolean;
};

declare type Props_11<T extends FieldValues> = Omit<DateFieldProps, "name"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
    /** Whether the field is read-only */
    readonly isReadOnly?: boolean;
};

declare type Props_12<T extends FieldValues> = Omit<DateTimeFieldProps, "name"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
    /** Whether the field is read-only */
    readonly isReadOnly?: boolean;
};

declare type Props_2<T extends FieldValues> = Omit<CheckboxProps, "name"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** The label that will appear next to the checkbox */
    readonly label: ReactNode;
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
};

declare type Props_3<T extends FieldValues> = Omit<DatePickerProps, "name"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
    /** Whether the field is read-only */
    readonly isReadOnly?: boolean;
};

declare type Props_4<T extends FieldValues> = Omit<DateTimePickerProps, "name"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
    /** Whether the field is read-only */
    readonly isReadOnly?: boolean;
};

declare type Props_5<T extends FieldValues> = Omit<RadioGroupProps, "name"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** An array of options for the radio buttons, each having a label and value */
    readonly options: OptionItem_2[];
    /** A FormLabel component to be displayed above the radio buttons */
    readonly formLabel?: ReactElement<typeof FormLabel>;
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
};

declare type Props_6<T extends FieldValues> = Omit<SelectProps, "name"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** An array of option items to be displayed in the select dropdown */
    readonly options: OptionItem_3[];
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
    /** The direction of the text input, either left-to-right (ltr) or right-to-left (rtl) */
    readonly inputDir?: "ltr" | "rtl";
    /** The maximum height of the select input */
    readonly maxHeight?: number;
    /** The maximum height of the dropdown menu */
    readonly dropDownMaxHeight?: number;
    /** If true, the options will be grouped by category */
    readonly categorized?: boolean;
    /** A string representing the label for items that do not belong to any category when categorized is enabled */
    readonly uncategorizedText?: string;
};

declare type Props_7<T extends FieldValues> = Omit<SelectProps, "name"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** An array of option items to be displayed in the select dropdown */
    readonly options: OptionItem_4[];
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
    /** The direction of the text input, either left-to-right (ltr) or right-to-left (rtl) */
    readonly inputDir?: "ltr" | "rtl";
    /** The maximum height of the select input */
    readonly maxHeight?: number;
    /** The maximum height of the dropdown menu */
    readonly dropDownMaxHeight?: number;
};

declare type Props_8<T extends FieldValues> = Omit<SwitchProps, "name"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** The label that will appear next to the switch */
    readonly label: ReactNode;
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
};

declare type Props_9<T extends FieldValues> = Omit<TextFieldProps, "name"> & {
    /** The name of the field in the form state */
    readonly name: Path<T>;
    /** The control object from React Hook Form, optional if useFormContext is used */
    readonly control?: Control<T>;
    /** Direction of the text input (left-to-right or right-to-left) */
    readonly inputDir?: "ltr" | "rtl";
    /** Whether the field is read-only */
    readonly isReadOnly?: boolean;
};

/**
 * `RHFAutoComplete` is a reusable autocomplete component integrated with React Hook Form.
 * It allows for form-controlled selection of options via React Hook Form's `Controller` component.
 *
 * - Supports single or multiple option selections based on the `Autocomplete` component.
 * - Handles various input props such as `inputDir`, dropdown height, and form validation.
 * - Uses `useMemo` to optimize the rendering of option values in the dropdown.
 *
 * @template T - A generic type for the form's field values, extending `FieldValues`.
 * @template Value - A generic type for the selected value in the autocomplete, defaults to `OptionItem`.
 * @template Multiple - A boolean type to handle multiple selections.
 * @template DisableClearable - A boolean to disable the clear button.
 * @template FreeSolo - A boolean to allow free-form input text.
 *
 * @param {Path<T>} name - The name of the field in the form state.
 * @param {string} label - The label to be displayed for the input field.
 * @param {OptionItem[]} options - The list of options to be shown in the autocomplete dropdown.
 * @param {Control<T>} [control] - The React Hook Form control object. If not provided, `useFormContext` is used to access the form control.
 * @param {TextFieldProps} [renderInputProps] - Additional props to pass to the underlying MUI `TextField`.
 * @param {boolean} [multiple] - To support single or multiple selections.
 * @param {AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>} props - Additional props passed to the `Autocomplete` component.
 *
 * @returns {ReactElement} A controlled `Autocomplete` component integrated with React Hook Form.
 *
 * @example
 * ```tsx
 * <RHFAutoComplete
 *   name="category"
 *   label="Category"
 *   options={categoryOptions}
 *   control={control}
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFAutoComplete
 *   name="tags"
 *   label="Tags"
 *   options={tagOptions}
 *   control={control}
 *   multiple
 * />
 * ```
 */
export declare function RHFAutoComplete<T extends FieldValues, Value extends OptionItem = OptionItem, Multiple extends boolean = false, DisableClearable extends boolean = false, FreeSolo extends boolean = false>({ name, label, options, control, renderInputProps, multiple, ...props }: Props<T, Value, Multiple, DisableClearable, FreeSolo>): ReactElement;

/**
 * `RHFCheckBox` is a wrapper around MIUI's `Checkbox` component that integrates with React Hook Form.
 * It manages the checkbox state and error handling, allowing seamless integration into forms.
 *
 * - The component can either receive the RHF control as a prop or use `useFormContext` to automatically access the form control.
 *
 * @template T - A generic type for the form's field values, extending `FieldValues`.
 *
 * @param {Path<T>} name - The name of the field in the form state.
 * @param {string} label - The label for the checkbox.
 * @param {Control<T>} [control] - The React Hook Form control object. If not provided, the form context will be used.
 * @param {CheckboxProps} props - Additional props passed to the underlying MUI `Checkbox`.
 *
 * @returns {ReactElement} A controlled checkbox component integrated with React Hook Form.
 *
 * @example
 * ```tsx
 * <RHFCheckBox
 *   name="termsAndConditions"
 *   label="I agree to the terms and conditions"
 *   control={control} // Optional, if useFormContext is not used
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFCheckBox
 *   name="newsletter"
 *   label="Subscribe to newsletter"
 *   color="primary"
 * />
 * ```
 */
export declare function RHFCheckBox<T extends FieldValues>({ name, label, control, ...props }: Props_2<T>): ReactElement;

/**
 * `RHFDateFieldJalali` is a date field component integrated with React Hook Form
 * using the Jalali calendar system. It wraps MIUI's `DateField` component and provides
 * seamless integration with React Hook Form.
 *
 * - The component allows you to select a date with the keyboard format using the `AdapterDateFnsJalali` adapter.
 * - It works with both controlled and uncontrolled forms using React Hook Form.
 * - You can pass a `control` object or use `useFormContext` to access the form control automatically.
 * - It supports a `readOnly` mode and displays validation errors automatically.
 *
 * @template T - A generic type for the form's field values, extending `FieldValues`.
 *
 * @param {Path<T>} name - The name of the field in the form state.
 * @param {Control<T>} [control] - The React Hook Form control object. If not provided, the form context will be used.
 * @param {boolean} [isReadOnly] - Specifies whether the input is read-only.
 * @param {DateFieldProps} props - Additional props passed to the underlying MUI `DateField`.
 *
 * @returns {ReactElement} A controlled `DateField` component with Jalali calendar integration and React Hook Form support.
 *
 * @example
 * ```tsx
 * <RHFDateFieldJalali
 *   name="birthDate"
 *   label="Birth Date"
 *   control={control} // Optional if useFormContext is used
 *   isReadOnly={false}
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFDateFieldJalali
 *   name="startDate"
 *   label="Start Date"
 *   isReadOnly
 * />
 * ```
 */
export declare function RHFDateFieldJalali<T extends FieldValues>({ name, control, isReadOnly, ...props }: Props_11<T>): ReactElement;

/**
 * `RHFDatePickerJalali` is a date picker component integrated with React Hook Form
 * using the Jalali calendar system. It wraps MIUI's `DatePicker` component and provides
 * seamless integration with React Hook Form.
 *
 * - The component allows you to select dates in the Jalali calendar format using the `AdapterDateFnsJalali` adapter.
 * - It works with both controlled and uncontrolled forms using React Hook Form.
 * - You can pass a `control` object or use `useFormContext` to access the form control automatically.
 * - It supports a `readOnly` mode and displays validation errors automatically.
 *
 * @template T - A generic type for the form's field values, extending `FieldValues`.
 *
 * @param {Path<T>} name - The name of the field in the form state.
 * @param {Control<T>} [control] - The React Hook Form control object. If not provided, the form context will be used.
 * @param {boolean} [isReadOnly] - Specifies whether the input is read-only.
 * @param {DatePickerProps} props - Additional props passed to the underlying MUI `DatePicker`.
 *
 * @returns {ReactElement} A controlled `DatePicker` component with Jalali calendar integration and React Hook Form support.
 *
 * @example
 * ```tsx
 * <RHFDatePickerJalali
 *   name="birthDate"
 *   label="Birth Date"
 *   control={control} // Optional if useFormContext is used
 *   isReadOnly={false}
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFDatePickerJalali
 *   name="startDate"
 *   label="Start Date"
 *   isReadOnly
 * />
 * ```
 */
export declare function RHFDatePickerJalali<T extends FieldValues>({ name, control, isReadOnly, ...props }: Props_3<T>): ReactElement;

/**
 * `DateTimeFieldProps` is a date field component integrated with React Hook Form
 * using the Jalali calendar system. It wraps MIUI's `DateField` component and provides
 * seamless integration with React Hook Form.
 *
 * - The component allows you to select a date with the keyboard format using the `AdapterDateFnsJalali` adapter.
 * - It works with both controlled and uncontrolled forms using React Hook Form.
 * - You can pass a `control` object or use `useFormContext` to access the form control automatically.
 * - It supports a `readOnly` mode and displays validation errors automatically.
 *
 * @template T - A generic type for the form's field values, extending `FieldValues`.
 *
 * @param {Path<T>} name - The name of the field in the form state.
 * @param {Control<T>} [control] - The React Hook Form control object. If not provided, the form context will be used.
 * @param {boolean} [isReadOnly] - Specifies whether the input is read-only.
 * @param {DateTimeFieldProps} props - Additional props passed to the underlying MUI `DateField`.
 *
 * @returns {ReactElement} A controlled `DateField` component with Jalali calendar integration and React Hook Form support.
 *
 * @example
 * ```tsx
 * <RHFDateTimeFieldJalali
 *   name="birthDate"
 *   label="Birth Date"
 *   control={control} // Optional if useFormContext is used
 *   isReadOnly={false}
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFDateTimeFieldJalali
 *   name="startDate"
 *   label="Start Date"
 *   isReadOnly
 * />
 * ```
 */
export declare function RHFDateTimeFieldJalali<T extends FieldValues>({ name, control, isReadOnly, ...props }: Props_12<T>): ReactElement;

/**
 * `RHFDateTimePickerJalali` is a date and time picker component integrated with React Hook Form
 * using the Jalali calendar system. It wraps MIUI's `DateTimePicker` component to provide a unified
 * experience for working with date and time selection.
 *
 * - It uses `AdapterDateFnsJalali` for Jalali (Persian) calendar support.
 * - The component supports both controlled and uncontrolled forms with React Hook Form.
 * - It allows for customization of the time view using the `renderTimeViewClock`.
 * - You can pass a `control` object or use `useFormContext` to access the form control automatically.
 * - It supports a `readOnly` mode and handles validation errors automatically.
 *
 * @template T - A generic type for the form's field values, extending `FieldValues`.
 *
 * @param {Path<T>} name - The name of the field in the form state.
 * @param {Control<T>} [control] - The React Hook Form control object. If not provided, the form context will be used.
 * @param {boolean} [isReadOnly] - Specifies whether the input is read-only.
 * @param {DateTimePickerProps} props - Additional props passed to the underlying MUI `DateTimePicker`.
 *
 * @returns {ReactElement} A controlled `DateTimePicker` component with Jalali calendar integration and React Hook Form support.
 *
 * @example
 * ```tsx
 * <RHFDateTimePickerJalali
 *   name="appointmentTime"
 *   label="Appointment Time"
 *   control={control} // Optional if useFormContext is used
 *   isReadOnly={false}
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFDateTimePickerJalali
 *   name="eventDate"
 *   label="Event Date"
 *   isReadOnly
 * />
 * ```
 */
export declare function RHFDateTimePickerJalali<T extends FieldValues>({ name, control, isReadOnly, ...props }: Props_4<T>): ReactElement;

/**
 * `RHFRadioGroup` is a wrapper around MIUI's `RadioGroup` component that integrates with React Hook Form.
 * It renders a group of radio buttons based on the provided options and manages the form state.
 *
 * - The component can either receive the RHF control as a prop or use `useFormContext` to automatically access the form control.
 * - The `formLabel` prop allows for an optional MUI `FormLabel` component to be displayed above the radio buttons.
 *
 * @template T - A generic type for the form's field values, extending `FieldValues`.
 *
 * @param {Path<T>} name - The name of the field in the form state.
 * @param {OptionItem[]} options - An array of options for the radio buttons, each having a label and value.
 * @param {ReactElement<typeof FormLabel>} [formLabel] - A FormLabel component to be displayed above the radio buttons.
 * @param {Control<T>} [control] - The React Hook Form control object. If not provided, the form context will be used.
 * @param {RadioGroupProps} props - Additional props passed to the underlying MUI `RadioGroup`.
 *
 * @returns {ReactElement} A controlled `RadioGroup` component integrated with React Hook Form.
 *
 * @example
 * ```tsx
 * <RHFRadioGroup
 *   name="gender"
 *   options={[
 *     { label: "Male", value: "male" },
 *     { label: "Female", value: "female" },
 *   ]}
 *   formLabel={<FormLabel>Gender</FormLabel>} // Optional FormLabel
 *   control={control} // Optional, if useFormContext is not used
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFRadioGroup
 *   name="subscription"
 *   options={[
 *     { label: "Monthly", value: "monthly" },
 *     { label: "Yearly", value: "yearly" },
 *   ]}
 * />
 * ```
 */
export declare function RHFRadioGroup<T extends FieldValues>({ name, options, formLabel, control, ...props }: Props_5<T>): ReactElement;

/**
 * `RHFSelect` is a wrapper around MIUI's `Select` component that integrates with React Hook Form.
 * It supports both single and multiple selections and handles validation and error messages.
 *
 * - This component automatically handles the form control via React Hook Form and provides seamless integration.
 * - The `options` prop allows for dynamic option generation, including support for disabling options.
 *
 * @template T - A generic type for the form's field values, extending `FieldValues`.
 *
 * @param {Path<T>} name - The name of the field in the form state.
 * @param {OptionItem[]} options - An array of option items to be displayed in the select dropdown.
 * @param {Control<T>} [control] - The React Hook Form control object. If not provided, the form context will be used.
 * @param {"ltr" | "rtl"} [inputDir] - The direction of the text input, either left-to-right or right-to-left.
 * @param {number} [maxHeight] - The maximum height of the select input.
 * @param {number} [dropDownMaxHeight] - The maximum height of the dropdown menu.
 * @param {boolean} [categorized] - If true, the options will be grouped by category.
 * @param {string} [uncategorizedText] - A string representing the label for items that do not belong to any category when categorized is enabled.
 * @param {SelectProps} props - Additional props passed to the underlying MUI `Select`.
 *
 * @returns {ReactElement} A controlled select component integrated with React Hook Form.
 *
 * @example
 * ```tsx
 * <RHFSelect
 *   name="favoriteFruits"
 *   options={[
 *     { label: "Apple", value: "apple" },
 *     { label: "Banana", value: "banana" },
 *     { label: "Cherry", value: "cherry", disabled: true },
 *   ]}
 *   control={control} // Optional, if useFormContext is not used
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFSelect
 *   name="selectedColors"
 *   options={[
 *     { label: "Red", value: "red" },
 *     { label: "Green", value: "green" },
 *     { label: "Blue", value: "blue" },
 *   ]}
 *   multiple
 *   inputDir="ltr"
 * />
 * ```
 */
export declare function RHFSelect<T extends FieldValues>({ name, options, control, inputDir, maxHeight, dropDownMaxHeight, categorized, uncategorizedText, ...props }: Props_6<T>): ReactElement;

/**
 * `RHFSelectPro` is a wrapper around MIUI's `Select` component that integrates with React Hook Form.
 * It supports both single and multiple selections and handles validation and error messages.
 *
 * - This component automatically handles the form control via React Hook Form and provides seamless integration.
 * - The `options` prop allows for dynamic option generation, including support for disabling options.
 *
 * @template T - A generic type for the form's field values, extending `FieldValues`.
 *
 * @param {Path<T>} name - The name of the field in the form state.
 * @param {OptionItem[]} options - An array of option items to be displayed in the select dropdown.
 * @param {Control<T>} [control] - The React Hook Form control object. If not provided, the form context will be used.
 * @param {"ltr" | "rtl"} [inputDir] - The direction of the text input, either left-to-right or right-to-left.
 * @param {number} [maxHeight] - The maximum height of the select input.
 * @param {number} [dropDownMaxHeight] - The maximum height of the dropdown menu.
 * @param {SelectProps} props - Additional props passed to the underlying MUI `Select`.
 *
 * @returns {ReactElement} A controlled select component integrated with React Hook Form.
 *
 * @example
 * ```tsx
 * <RHFSelectPro
 *   name="favoriteFruits"
 *   options={[
 *     { label: "Apple", value: "apple" },
 *     { label: "Banana", value: "banana" },
 *     { label: "Cherry", value: "cherry", disabled: true },
 *   ]}
 *   control={control} // Optional, if useFormContext is not used
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFSelectPro
 *   name="selectedColors"
 *   options={[
 *     { label: "Red", value: "red" },
 *     { label: "Green", value: "green" },
 *     { label: "Blue", value: "blue" },
 *   ]}
 *   multiple
 *   inputDir="ltr"
 * />
 * ```
 */
export declare function RHFSelectPro<T extends FieldValues>({ name, options, control, inputDir, maxHeight, dropDownMaxHeight, ...props }: Props_7<T>): ReactElement;

/**
 * `RHFSwitch` is a wrapper around MIUI's `Switch` component that integrates with React Hook Form.
 * It manages the form state for a boolean field and displays an optional label and error message.
 *
 * @template T - A generic type extending `FieldValues`, representing the structure of form fields.
 *
 * @param name - The name of the field in the form state. This is required to connect the `Switch` to the form.
 * @param label - The label that will be displayed alongside the switch.
 * @param control - The control object provided by React Hook Form. If omitted, it uses `useFormContext` to retrieve it.
 * @param props - Additional props to pass down to the `Switch` component.
 *
 * @returns A `ReactElement` rendering the controlled `Switch` component within a `FormControl` with validation support.
 *
 * @example
 * ```tsx
 * <RHFSwitch
 *   name="notifications"
 *   label="Enable Notifications"
 *   control={control} // Optional, if useFormContext is not used
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFSwitch
 *   name="darkMode"
 *   label="Enable Dark Mode"
 *   control={control}
 *   checked={true}
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFSwitch
 *   name="termsAccepted"
 *   label="Accept Terms and Conditions"
 *   control={control} // Optional
 * />
 * ```
 */
export declare function RHFSwitch<T extends FieldValues>({ name, label, control, ...props }: Props_8<T>): ReactElement;

/**
 * `RHFTextField` is a wrapper around MIUI's `TextField` component that integrates with React Hook Form.
 * It only works with controlled fields in React Hook Form (RHF).
 * Default value should be an empty string.
 *
 * - The component can either receive the RHF control as a prop or use `useFormContext` to automatically access the form control.
 * - It supports optional `inputDir` to set the text direction (`ltr` or `rtl`), and the `isReadOnly` prop to make the input read-only.
 *
 * @template T - A generic type for the form's field values, extending `FieldValues`.
 *
 * @param {Path<T>} name - The name of the field in the form state.
 * @param {Control<T>} [control] - The React Hook Form control object. If not provided, the form context will be used.
 * @param {"ltr" | "rtl"} [inputDir] - The text direction for the input. Can be "ltr" (left-to-right) or "rtl" (right-to-left).
 * @param {boolean} [isReadOnly] - Specifies whether the input is read-only.
 * @param {TextFieldProps} props - Additional props passed to the underlying MUI `TextField`.
 *
 * @returns {ReactElement} A controlled `TextField` component integrated with React Hook Form.
 *
 * @example
 * ```tsx
 * <RHFTextField
 *   name="firstName"
 *   label="First Name"
 *   control={control} // Optional, if useFormContext is not used
 *   inputDir="ltr"
 *   isReadOnly={false}
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFTextField
 *   name="email"
 *   label="Email Address"
 *   isReadOnly
 *   inputDir="rtl"
 * />
 * ```
 */
export declare function RHFTextField<T extends FieldValues>({ name, control, inputDir, isReadOnly, ...props }: Props_9<T>): ReactElement;

/**
 * `RHFTextMasked` is a React Hook Form integrated `TextField` component that supports input masking via `react-imask`.
 * This component also provides support for read-only fields and input direction (LTR or RTL).
 * Default value should be an empty string.
 *
 * - It is integrated with `react-hook-form` using `Controller` to manage form state.
 * - It supports custom masking options via the `maskOptions` prop and can handle right-to-left (RTL) or left-to-right (LTR) input direction.
 * - The component allows setting fields as read-only using the `isReadOnly` prop.
 * - You can pass a `control` object or rely on `useFormContext` for form control.
 *
 * @template T - A generic type for the form's field values, extending `FieldValues`.
 *
 * @param {Path<T>} name - The name of the field in the form state.
 * @param {Control<T>} [control] - The React Hook Form control object. If not provided, the form context will be used.
 * @param {ReactMaskOpts} [maskOptions] - The options for input masking, as defined by `react-imask`.
 * @param {"ltr" | "rtl"} [inputDir] - The text direction for the input field, either left-to-right (ltr) or right-to-left (rtl).
 * @param {boolean} [isReadOnly] - If true, the input will be read-only.
 * @param {TextFieldProps} props - Additional props passed to the underlying MUI `TextField`.
 *
 * @returns {ReactElement} A controlled `TextField` component integrated with React Hook Form and supporting input masking and read-only fields.
 *
 * @example
 * ```tsx
 * <RHFTextMasked
 *   name="phoneNumber"
 *   label="Phone Number"
 *   maskOptions={{ mask: "(000) 000-0000" }}
 *   control={control}
 *   inputDir="ltr"
 *   isReadOnly={true}
 * />
 * ```
 *
 * @example
 * ```tsx
 * <RHFTextMasked
 *   name="creditCard"
 *   label="Credit Card"
 *   maskOptions={{ mask: "0000-0000-0000-0000" }}
 *   inputDir="rtl"
 * />
 * ```
 */
export declare function RHFTextMasked<T extends FieldValues>({ name, control, maskOptions, inputDir, isReadOnly, ...props }: Props_10<T>): ReactElement;

declare interface SelectOptionBase {
    label: string;
    value: unknown;
    disabled?: boolean;
}

export { }