@gnwebsoft/ui 3.0.1 → 3.0.4

package/dist/wrappers/index.d.ts

@@ -1,125 +1,1113 @@
-import { CheckboxProps, FormControlLabelProps, Grid2Props, ChipTypeMap, AutocompleteProps, TextFieldVariants, SxProps, TextFieldProps, IconButtonProps, FormLabelProps, RadioProps, TextField } from '@mui/material';
-import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, Control, Path, UseControllerProps, FieldError, PathValue } from 'react-hook-form';
-import { A as AsyncSelectPayload } from '../AsyncSelectPayload-Cz4bgak0.js';
-import * as react from 'react';
-import { ReactNode, ChangeEvent } from 'react';
-import { TimePickerProps, TimePickerSlotProps, PickerChangeHandlerContext, TimeValidationError, PickerValidDate as PickerValidDate$1, DateValidationError, DatePickerSlotProps, DatePickerProps } from '@mui/x-date-pickers';
-import { PickerValidDate } from '@mui/x-date-pickers/models';
-
-type CheckboxGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends number[] = number[]> = Omit<CheckboxProps, "name"> & {
-    name: TName;
-    control?: Control<TFieldValues>;
-    label?: FormControlLabelProps["label"];
-    labelProps?: Omit<FormControlLabelProps, "label" | "control">;
-    gridProps?: Grid2Props;
-    options: {
-        Value: number;
-        Label: string;
-    }[];
-};
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldValues, FieldPath, Control, FieldError, PathValue, UseControllerProps, UseControllerReturn } from 'react-hook-form';
+import { GridProps, TextFieldVariants, SxProps, AutocompleteRenderInputParams, CheckboxProps, FormControlLabelProps, Theme, TextFieldProps, IconButtonProps, FormLabelProps, RadioProps, ChipTypeMap, AutocompleteProps, TextField } from '@mui/material';
+import React$1, { ReactNode, ChangeEvent } from 'react';
+import { PickerValidDate, DateValidationError, PickerChangeHandlerContext, DatePickerSlotProps, DatePickerProps, TimeValidationError, TimePickerSlotProps, TimePickerProps } from '@mui/x-date-pickers';
+import { useLocalizationContext } from '@mui/x-date-pickers/internals';
+import { F as FieldType } from '../enhanced-z-I7EHVS.js';
 
-type AsyncSelectElementProps<TOption extends Record<string, any> = Record<string, any>, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = Path<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = Omit<AutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'name' | 'control' | 'ref' | 'multiple' | 'loading' | 'getOptionLabel' | 'getOptionKey' | 'isOptionEqualToValue' | 'options' | 'value' | 'filterSelectedOptions' | 'filterOptions' | 'onChange' | 'onInputChange' | 'renderInput'> & {
+interface AsyncSelect2Payload {
+    query: string | null;
+    initialValues?: Array<string | number> | null;
+}
+interface Option2Item {
+    value: string | number;
+    label: string;
+    [key: string]: unknown;
+}
+interface AsyncMultiSelect2Props<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
     name: TName;
     control?: Control<TFieldValues>;
-    gridProps?: Grid2Props;
+    gridProps?: GridProps;
     placeholder?: string;
     label?: string;
-    initialValue?: string | null;
-    queryFn: (data: AsyncSelectPayload) => Promise<TOption[] | undefined>;
+    initialValues?: Array<string | number> | null;
+    queryFn: (payload: AsyncSelect2Payload) => Promise<Option2Item[]>;
     variant?: TextFieldVariants;
     sx?: SxProps;
-    labelKey?: string;
-    valueKey?: string;
+    disabled?: boolean;
+    debounceMs?: number;
+    loadingText?: string;
+    noOptionsText?: string;
+    renderInput?: (params: AutocompleteRenderInputParams) => React$1.ReactNode;
+}
+
+declare const AsyncMultiSelect2: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ gridProps, ...props }: AsyncMultiSelect2Props<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+    displayName: string;
 };
 
-type SelectCascadeElementProps<TOption, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = Omit<AutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'name' | 'renderInput' | 'isOptionEqualToValue' | 'getOptionLabel' | 'disabled'> & {
-    rules?: UseControllerProps<TFieldValues, TName>['rules'];
+/**
+ * Props for the CheckboxElement component.
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ *
+ * @public
+ */
+interface CheckboxElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<CheckboxProps, "name" | "checked" | "value" | "onChange"> {
+    /**
+     * The field name in the form
+     * @example "acceptTerms" | "user.isActive"
+     */
     name: TName;
-    dependsOn: TName;
+    /**
+     * The form control instance from react-hook-form
+     */
     control?: Control<TFieldValues>;
-    gridProps?: Grid2Props;
-    placeholder?: string;
-    label?: string;
-    variant?: TextFieldVariants;
-    disabled?: boolean;
-    sx?: SxProps;
-    isEdit?: boolean;
-    labelKey?: keyof TOption;
-    valueKey?: keyof TOption;
-    textFieldProps?: Omit<TextFieldProps, 'name'>;
+    /**
+     * Label text to display next to the checkbox
+     * @example "I agree to the terms and conditions"
+     */
+    label?: FormControlLabelProps["label"];
+    /**
+     * Additional props for the FormControlLabel component
+     */
+    labelProps?: Omit<FormControlLabelProps, "label" | "control">;
+    /**
+     * Grid layout props for the wrapper Grid component
+     * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
+     */
+    gridProps?: GridProps;
+    /**
+     * Helper text to display below the checkbox
+     */
+    helperText?: ReactNode;
+    /**
+     * Custom error parser function
+     * @param error - The field error from react-hook-form
+     * @returns Formatted error message
+     */
+    parseError?: (error: FieldError) => ReactNode;
+    /**
+     * Value transformation functions for custom data handling.
+     *
+     * The component expects boolean values by default.
+     * Use transform functions for custom conversion logic when working with non-boolean form data.
+     */
+    transform?: {
+        /**
+         * Transform the field value for display in the checkbox.
+         * If not provided, the value is converted to boolean using !!value.
+         * @param value - The current field value
+         * @returns The transformed boolean value for checkbox display
+         */
+        input?: (value: PathValue<TFieldValues, TName>) => boolean;
+        /**
+         * Transform the checkbox state back to the desired field value.
+         * If not provided, the boolean checked state is used directly.
+         * @param checked - The checkbox checked state
+         * @returns The transformed value to store in the form
+         */
+        output?: (checked: boolean) => PathValue<TFieldValues, TName>;
+    };
+    /**
+     * Custom onChange handler that works alongside the form controller
+     * @param event - The checkbox change event
+     * @param checked - The new checked state
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /**
+     * Custom sx props for styling
+     */
+    sx?: SxProps<Theme>;
+}
+
+/**
+ * A react-hook-form integrated Checkbox component with automatic validation and grid layout.
+ *
+ * This component provides a fully integrated checkbox input that works seamlessly with react-hook-form,
+ * including automatic validation, error handling, value transformation, and optional Grid wrapper for responsive layouts.
+ *
+ * Features:
+ * - Full react-hook-form integration with useController
+ * - Automatic error display with custom parsing support
+ * - Value transformation with useTransform hook for boolean values
+ * - Customizable label and positioning
+ * - Grid layout wrapper with responsive design
+ * - TypeScript type safety with generic constraints
+ * - Disabled state support with proper theming
+ * - Helper text support for additional context
+ * - Custom error parsing for internationalization
+ * - Simple boolean value handling with optional custom transforms
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <CheckboxElement
+ *   control={control}
+ *   name="acceptTerms"
+ *   label="I agree to the terms and conditions"
+ * />
+ * ```
+ *
+ * @example
+ * With validation and helper text:
+ * ```tsx
+ * <CheckboxElement
+ *   control={control}
+ *   name="newsletter"
+ *   label="Subscribe to newsletter"
+ *   helperText="You can unsubscribe at any time"
+ *   rules={{ required: 'Please accept to continue' }}
+ * />
+ * ```
+ *
+ * @example
+ * Custom grid layout and styling:
+ * ```tsx
+ * <CheckboxElement
+ *   control={control}
+ *   name="isPublic"
+ *   label="Make this public"
+ *   gridProps={{ size: { xs: 12, md: 6 } }}
+ *   labelProps={{ sx: { fontWeight: 'bold' } }}
+ *   sx={{ color: 'primary.main' }}
+ * />
+ * ```
+ *
+ * @example
+ * With value transformation (string to boolean):
+ * ```tsx
+ * <CheckboxElement
+ *   control={control}
+ *   name="status"
+ *   label="Active"
+ *   transform={{
+ *     input: (value) => value === 'active',
+ *     output: (checked) => checked ? 'active' : 'inactive'
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * Simple boolean field:
+ * ```tsx
+ * <CheckboxElement
+ *   control={control}
+ *   name="isEnabled"
+ *   label="Enable feature"
+ * />
+ * ```
+ *
+ * @example
+ * Custom error parsing for internationalization:
+ * ```tsx
+ * <CheckboxElement
+ *   control={control}
+ *   name="terms"
+ *   label="Accept Terms"
+ *   parseError={(error) => t(`validation.${error.type}`, { field: 'Terms' })}
+ * />
+ * ```
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ *
+ * @param props - Component props
+ * @returns React element with optional Grid wrapper
+ *
+ * @public
+ */
+declare const CheckboxElement: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ gridProps, ...props }: CheckboxElementProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+    displayName: string;
 };
 
-type BaseAutocompleteProps<TOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType> = Omit<AutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'name' | 'renderInput' | 'multiple' | 'onChange' | 'value'>;
-type SelectMultiElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends Record<string, any> = Record<string, any>, Multiple extends boolean | undefined = true, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = BaseAutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
-    rules?: UseControllerProps<TFieldValues, TName>['rules'];
+type CheckboxGroupProps$1<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends number[] = number[]> = Omit<CheckboxProps, "name"> & {
     name: TName;
     control?: Control<TFieldValues>;
-    gridProps?: Grid2Props;
-    placeholder?: string;
-    label?: string;
-    variant?: TextFieldVariants;
-    sx?: SxProps;
-    labelKey?: keyof TOption;
-    valueKey?: keyof TOption;
+    label?: FormControlLabelProps["label"];
+    labelProps?: Omit<FormControlLabelProps, "label" | "control">;
+    gridProps?: GridProps;
+    options: Array<{
+        Value: number;
+        Label: string;
+    }>;
+};
+declare const CheckboxGroup: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends number[] = number[]>({ gridProps, ...props }: CheckboxGroupProps$1<TFieldValues, TName, TValue>): react_jsx_runtime.JSX.Element;
+    displayName: string;
 };
 
-type SelectElementProps<TOption, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]> = Omit<AutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>, "name" | "renderInput" | "isOptionEqualToValue" | "getOptionLabel" | "disabled"> & {
-    rules?: UseControllerProps<TFieldValues, TName>["rules"];
+type PrimitiveValue$1 = string | number | boolean;
+type OptionObject$1<TValueKey extends string = string, TLabelKey extends string = string, TDisabledKey extends string = string> = Record<TValueKey, PrimitiveValue$1> & Record<TLabelKey, string> & Partial<Record<TDisabledKey, boolean>> & Record<string, unknown>;
+/**
+ * Props for the CheckboxGroup component.
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TOption - The option object type
+ * @template TValueKey - The key for option values
+ * @template TLabelKey - The key for option labels
+ * @template TDisabledKey - The key for option disabled state
+ *
+ * @public
+ */
+interface CheckboxGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends OptionObject$1<TValueKey, TLabelKey, TDisabledKey> = OptionObject$1, TValueKey extends keyof TOption & string = "Value", TLabelKey extends keyof TOption & string = "Label", TDisabledKey extends keyof TOption & string = "disabled"> extends Omit<CheckboxProps, "name" | "checked" | "value" | "onChange"> {
+    /**
+     * The field name in the form
+     * @example "selectedItems" | "user.preferences"
+     */
     name: TName;
+    /**
+     * The form control instance from react-hook-form
+     */
     control?: Control<TFieldValues>;
-    gridProps?: Grid2Props;
-    placeholder?: string;
-    label?: string;
-    variant?: TextFieldVariants;
-    sx?: SxProps;
-    isEdit?: boolean;
-    disabled?: boolean;
-    labelKey?: string;
-    valueKey?: keyof TOption;
-    textFieldProps?: Omit<TextFieldProps, "name">;
-};
+    /**
+     * Array of options to display as checkboxes
+     */
+    options: TOption[];
+    /**
+     * Label text to display above the checkbox group
+     * @example "Select your preferences"
+     */
+    label?: ReactNode;
+    /**
+     * Additional props for each FormControlLabel component
+     */
+    labelProps?: Omit<FormControlLabelProps, "label" | "control">;
+    /**
+     * Grid layout props for the wrapper Grid component
+     * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
+     */
+    gridProps?: GridProps;
+    /**
+     * Helper text to display below the checkbox group
+     */
+    helperText?: ReactNode;
+    /**
+     * Custom error parser function
+     * @param error - The field error from react-hook-form
+     * @returns Formatted error message
+     */
+    parseError?: (error: FieldError) => ReactNode;
+    /**
+     * Key in the option object that contains the value
+     * @defaultValue "Value"
+     */
+    valueKey?: TValueKey;
+    /**
+     * Key in the option object that contains the label
+     * @defaultValue "Label"
+     */
+    labelKey?: TLabelKey;
+    /**
+     * Key in the option object that contains the disabled state
+     * @defaultValue "disabled"
+     */
+    disabledKey?: TDisabledKey;
+    /**
+     * Whether to display checkboxes in a single row
+     * @defaultValue false
+     */
+    row?: boolean;
+    /**
+     * Value transformation functions for custom data handling
+     * Supports arrays of string, boolean, or number values
+     */
+    transform?: {
+        /**
+         * Transform the field value for display in the checkboxes
+         * @param value - The current field value (array of values)
+         * @returns The transformed value to display
+         */
+        input?: (value: PathValue<TFieldValues, TName>) => Array<TOption[TValueKey]>;
+        /**
+         * Transform the checkbox selections back to the field value
+         * @param selectedValues - Array of selected option values
+         * @returns The transformed value to store in the form
+         */
+        output?: (selectedValues: Array<TOption[TValueKey]>) => PathValue<TFieldValues, TName>;
+    };
+    /**
+     * Custom onChange handler that works alongside the form controller
+     * @param selectedValues - Array of selected option values
+     * @param selectedOptions - Array of selected option objects
+     */
+    onChange?: (selectedValues: Array<TOption[TValueKey]>, selectedOptions: TOption[]) => void;
+    /**
+     * Custom sx props for styling
+     */
+    sx?: SxProps<Theme>;
+}
 
-type TimePickerElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> = Omit<TimePickerProps<TValue>, "value" | "renderInput"> & {
+/**
+ * Branded type for validated date values to ensure type safety
+ * @template TDate - The date type (from date adapter)
+ */
+type ValidatedDate<TDate extends PickerValidDate = PickerValidDate> = TDate & {
+    readonly __brand: 'ValidatedDate';
+};
+/**
+ * Transformation functions for date values with strict typing
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ */
+interface DateTransform<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate> {
+    /**
+     * Transform the stored field value for display in the date picker
+     * @param value - The current field value from react-hook-form
+     * @returns The transformed value to display in the picker
+     */
+    input?: (value: PathValue<TFieldValues, TName>) => TValue | null;
+    /**
+     * Transform the picker value back to the form field value
+     * @param value - The selected date value from the picker
+     * @param context - Additional context from the picker change handler
+     * @returns The transformed value to store in the form
+     */
+    output?: (value: TValue | null, context: PickerChangeHandlerContext<DateValidationError>) => PathValue<TFieldValues, TName>;
+}
+/**
+ * Configuration options for date picker validation
+ * @template TDate - The date type (from date adapter)
+ */
+interface DatePickerValidationConfig<TDate extends PickerValidDate = PickerValidDate> {
+    /** Minimum allowed date */
+    minDate?: TDate;
+    /** Maximum allowed date */
+    maxDate?: TDate;
+    /** Function to disable specific dates */
+    shouldDisableDate?: (date: TDate) => boolean;
+    /** Custom validation error messages */
+    errorMessages?: {
+        invalidDate?: string;
+        minDate?: string;
+        maxDate?: string;
+        disabledDate?: string;
+    };
+}
+/**
+ * Slot props for customizing date picker subcomponents with strict typing
+ * @template TEnableAccessibleFieldDOMStructure - Whether accessible field DOM structure is enabled
+ */
+interface TypedDatePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean = false> extends Omit<DatePickerSlotProps<TEnableAccessibleFieldDOMStructure>, "textField"> {
+    textField?: Partial<TextFieldProps> & {
+        /** Custom input component */
+        InputComponent?: React.ComponentType<any>;
+        /** Additional input props with type safety */
+        inputProps?: TextFieldProps["inputProps"] & Record<string, unknown>;
+    };
+}
+/**
+ * Core props for the DatePickerElement component with enhanced type safety
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ * @template TEnableAccessibleFieldDOMStructure - Whether accessible field DOM structure is enabled
+ */
+interface DatePickerElementCoreProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> {
+    /**
+     * The field name in the form - must be a valid path in TFieldValues
+     * @example "birthDate" | "user.dateOfBirth" | "settings.startDate"
+     */
     name: TName;
+    /**
+     * Whether the field is required for form validation
+     * @defaultValue false
+     */
     required?: boolean;
-    isDate?: boolean;
-    parseError?: (error: FieldError) => ReactNode;
+    /**
+     * Validation rules for react-hook-form with type-safe field reference
+     */
     rules?: UseControllerProps<TFieldValues, TName>["rules"];
+    /**
+     * The form control instance from useForm() hook
+     */
     control?: Control<TFieldValues>;
-    inputProps?: TextFieldProps;
+    /**
+     * Custom error message parser with proper typing for both form and date validation errors
+     * @param error - The validation error (either from react-hook-form or date picker)
+     * @returns Custom error message or React component
+     */
+    parseError?: (error: FieldError | DateValidationError) => ReactNode;
+    /**
+     * Value transformation functions for converting between form and picker formats
+     */
+    transform?: DateTransform<TFieldValues, TName, TValue>;
+    /**
+     * Validation configuration specific to date selection
+     */
+    validation?: DatePickerValidationConfig<TValue>;
+    /**
+     * The input label with support for React nodes
+     * @example "Select Date" | <span>Birth Date <em>(required)</em></span>
+     */
+    label?: ReactNode;
+    /**
+     * Placeholder text for the input field
+     * @example "MM/DD/YYYY" | "Select a date..."
+     */
+    placeholder?: string;
+    /**
+     * Whether the text input should be read-only (picker interaction only)
+     * @defaultValue false
+     */
+    textReadOnly?: boolean;
+    /**
+     * Helper text to display below the input field
+     */
     helperText?: TextFieldProps["helperText"];
+    /**
+     * Props for the underlying TextField component
+     */
+    inputProps?: Omit<TextFieldProps, "name" | "value" | "onChange" | "error" | "helperText">;
+    /**
+     * Props for customizing date picker slots and subcomponents
+     */
+    slotProps?: TypedDatePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+    /**
+     * Props for the underlying DatePicker component
+     */
+    datePickerProps?: Omit<DatePickerProps<TEnableAccessibleFieldDOMStructure>, "value" | "onChange" | "slotProps" | "name">;
+    /**
+     * The TextField variant to use
+     * @defaultValue "outlined"
+     */
+    variant?: TextFieldVariants;
+    /**
+     * Custom styles for the date picker with theme-aware typing
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Whether the component is in a loading state
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /**
+     * Custom loading indicator component
+     */
+    LoadingComponent?: React.ComponentType;
+}
+/**
+ * Props for the grid wrapper functionality
+ */
+interface DatePickerElementGridProps {
+    /**
+     * Grid layout configuration for the wrapper Grid component
+     * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
+     */
+    gridProps?: GridProps | false;
+}
+/**
+ * Complete props interface for DatePickerElement combining core and grid props
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ * @template TEnableAccessibleFieldDOMStructure - Whether accessible field DOM structure is enabled
+ */
+interface DatePickerElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DatePickerElementCoreProps<TFieldValues, TName, TValue, TEnableAccessibleFieldDOMStructure>, DatePickerElementGridProps {
+}
+/**
+ * Return type for date picker hooks with strict typing
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ */
+interface DatePickerHookReturn<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate> {
+    /** The current transformed value for the picker */
+    value: TValue | null;
+    /** Change handler with proper typing */
+    onChange: (value: TValue | null, context: PickerChangeHandlerContext<DateValidationError>) => void;
+    /** Current validation error if any */
+    error: FieldError | DateValidationError | undefined;
+    /** Whether the field has an error */
+    hasError: boolean;
+    /** Formatted error message for display */
+    errorMessage: ReactNode;
+}
+
+/**
+ * A fully-featured, type-safe DatePickerElement component for react-hook-form integration.
+ *
+ * This component combines the core date picker functionality with optional Grid layout wrapping,
+ * providing a complete solution for form-based date selection with comprehensive TypeScript support.
+ *
+ * Key Features:
+ * - 🎯 **Type Safety**: Full TypeScript inference for form field types and date values
+ * - 🔧 **React Hook Form Integration**: Seamless integration with react-hook-form validation
+ * - 🎨 **Theming**: Automatic adaptation to MUI theme with customizable styles
+ * - ♿ **Accessibility**: WCAG-compliant with proper ARIA attributes and keyboard navigation
+ * - 🚀 **Performance**: Optimized with memoization and efficient re-rendering
+ * - 📱 **Responsive**: Built-in Grid layout with configurable breakpoints
+ * - 🛡️ **Validation**: Comprehensive validation with custom error messages
+ * - 🔄 **Transformation**: Flexible value transformation between form and picker formats
+ * - 📚 **Developer Experience**: Rich TypeScript IntelliSense and comprehensive documentation
+ *
+ * @example
+ * Basic usage with automatic Grid wrapper:
+ * ```tsx
+ * import { useForm } from 'react-hook-form';
+ * import { DatePickerElement } from '@gnwebsoft/ui/wrappers';
+ *
+ * function MyForm() {
+ *   const { control } = useForm<{ birthDate: string }>();
+ *
+ *   return (
+ *     <DatePickerElement
+ *       name="birthDate"
+ *       control={control}
+ *       label="Date of Birth"
+ *       required
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Advanced usage with custom transformation and validation:
+ * ```tsx
+ * function AdvancedForm() {
+ *   const { control } = useForm<{ startDate: Date }>();
+ *
+ *   return (
+ *     <DatePickerElement
+ *       name="startDate"
+ *       control={control}
+ *       label="Project Start Date"
+ *       transform={{
+ *         input: (dateString) => dateString ? new Date(dateString) : null,
+ *         output: (date) => date ? date.toISOString() : null
+ *       }}
+ *       validation={{
+ *         minDate: new Date(),
+ *         maxDate: addYears(new Date(), 2),
+ *         errorMessages: {
+ *           minDate: 'Start date must be today or later',
+ *           maxDate: 'Start date cannot be more than 2 years in the future'
+ *         }
+ *       }}
+ *       gridProps={{ size: { xs: 12, md: 6 } }}
+ *       sx={{
+ *         '& .MuiInputLabel-root': {
+ *           fontWeight: 'bold'
+ *         }
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Without Grid wrapper for custom layouts:
+ * ```tsx
+ * function CustomLayout() {
+ *   const { control } = useForm<{ eventDate: string }>();
+ *
+ *   return (
+ *     <Box display="flex" gap={2}>
+ *       <DatePickerElement
+ *         name="eventDate"
+ *         control={control}
+ *         label="Event Date"
+ *         gridProps={false} // Disables Grid wrapper
+ *       />
+ *       <Button type="submit">Submit</Button>
+ *     </Box>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * With loading state and custom error handling:
+ * ```tsx
+ * function LoadingForm() {
+ *   const { control } = useForm();
+ *   const [isValidating, setIsValidating] = useState(false);
+ *
+ *   return (
+ *     <DatePickerElement
+ *       name="appointmentDate"
+ *       control={control}
+ *       label="Appointment Date"
+ *       loading={isValidating}
+ *       LoadingComponent={() => <CircularProgress size={20} />}
+ *       parseError={(error) => {
+ *         if (typeof error === 'object' && error?.type === 'custom') {
+ *           return 'This date conflicts with another appointment';
+ *         }
+ *         return error.message || 'Please select a valid date';
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @template TFieldValues - The form values type (inferred from control)
+ * @template TName - The field name type (inferred from name prop)
+ * @template TValue - The transformed value type (inferred from transform functions)
+ * @template TEnableAccessibleFieldDOMStructure - Whether accessible field DOM structure is enabled
+ *
+ * @param props - Component props with full TypeScript inference
+ * @param ref - Forward ref for the root element (Grid or DatePicker container)
+ * @returns Rendered DatePickerElement component with optional Grid wrapper
+ */
+declare const DatePickerElement: React$1.ForwardRefExoticComponent<DatePickerElementProps<any, any, any, any> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * The core DatePickerElement component without Grid wrapper.
+ *
+ * This is a lightweight, performant date picker component that integrates seamlessly
+ * with react-hook-form while providing comprehensive TypeScript support and
+ * accessibility features.
+ *
+ * Features:
+ * - Full TypeScript inference for form field types
+ * - Automatic value transformation between form and picker formats
+ * - Comprehensive validation with custom error messages
+ * - Theme-aware styling with accessibility support
+ * - Performance optimized with proper memoization
+ * - Forward ref support for advanced use cases
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <DatePickerElementCore
+ *   name="birthDate"
+ *   control={control}
+ *   label="Date of Birth"
+ *   required
+ * />
+ * ```
+ *
+ * @example
+ * With custom transformation:
+ * ```tsx
+ * <DatePickerElementCore
+ *   name="startDate"
+ *   control={control}
+ *   label="Start Date"
+ *   transform={{
+ *     input: (dateString) => dateString ? new Date(dateString) : null,
+ *     output: (date) => date ? date.toISOString() : null
+ *   }}
+ *   validation={{
+ *     minDate: new Date(),
+ *     errorMessages: {
+ *       minDate: 'Start date must be today or later'
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ * @template TEnableAccessibleFieldDOMStructure - Whether accessible field DOM structure is enabled
+ */
+declare const DatePickerElementCore: React$1.ForwardRefExoticComponent<DatePickerElementCoreProps<any, any, any, any> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Type-safe date value reader that handles string to date conversion
+ * @template TDate - The date type from the date adapter
+ * @param adapter - The localization context from MUI date pickers
+ * @param value - The value to convert (string, date, or null)
+ * @returns Properly typed date value or null
+ */
+declare function readDatePickerValueAsDate<TDate extends PickerValidDate>(adapter: ReturnType<typeof useLocalizationContext>, value: string | null | TDate | undefined): TDate | null;
+/**
+ * Options for the useDatePickerValue hook
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ */
+interface UseDatePickerValueOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate> {
+    /** The field controller from react-hook-form */
+    field: UseControllerReturn<TFieldValues, TName>["field"];
+    /** Optional transformation functions */
+    transform?: DateTransform<TFieldValues, TName, TValue>;
+}
+/**
+ * Return type for the useDatePickerValue hook
+ * @template TValue - The transformed value type
+ */
+interface UseDatePickerValueReturn<TValue extends PickerValidDate = PickerValidDate> {
+    /** The transformed value for display in the picker */
+    value: TValue | null;
+    /** Change handler for picker value updates */
+    onChange: (value: TValue | null, context: PickerChangeHandlerContext<DateValidationError>) => void;
+}
+/**
+ * Hook for managing date picker value transformations with type safety
+ *
+ * This hook handles the conversion between form field values and date picker values,
+ * applying custom transformations while maintaining strict TypeScript typing.
+ *
+ * @example
+ * Basic usage with string to date conversion:
+ * ```tsx
+ * const { value, onChange } = useDatePickerValue({
+ *   field,
+ *   transform: {
+ *     input: (dateString) => dateString ? new Date(dateString) : null,
+ *     output: (date) => date ? date.toISOString() : null
+ *   }
+ * });
+ * ```
+ *
+ * @example
+ * Usage with Day.js dates:
+ * ```tsx
+ * const { value, onChange } = useDatePickerValue({
+ *   field,
+ *   transform: {
+ *     input: (dateString) => dateString ? dayjs(dateString) : null,
+ *     output: (date) => date ? date.format('YYYY-MM-DD') : null
+ *   }
+ * });
+ * ```
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ * @param options - Configuration options for value transformation
+ * @returns Object with transformed value and change handler
+ */
+declare function useDatePickerValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate>(options: UseDatePickerValueOptions<TFieldValues, TName, TValue>): UseDatePickerValueReturn<TValue>;
+
+/**
+ * Options for the useDatePickerValidation hook
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ */
+interface UseDatePickerValidationOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate> {
+    /** The field state from react-hook-form controller */
+    fieldState: UseControllerReturn<TFieldValues, TName>["fieldState"];
+    /** Validation configuration for the date picker */
+    validation?: DatePickerValidationConfig<TValue>;
+    /** Custom error message parser */
+    parseError?: (error: FieldError | DateValidationError) => ReactNode;
+    /** The current date value for validation */
+    value?: TValue | null;
+}
+/**
+ * Return type for the useDatePickerValidation hook
+ */
+interface UseDatePickerValidationReturn {
+    /** Whether the field has any validation errors */
+    hasError: boolean;
+    /** The current validation error (form or date-specific) */
+    error: FieldError | DateValidationError | undefined;
+    /** Formatted error message for display */
+    errorMessage: ReactNode;
+    /** Whether the field is in an invalid state */
+    invalid: boolean;
+}
+/**
+ * Hook for managing date picker validation with comprehensive error handling
+ *
+ * This hook centralizes validation logic for date pickers, handling both
+ * react-hook-form validation errors and date-specific validation errors
+ * from MUI date pickers.
+ *
+ * @example
+ * Basic usage with form validation:
+ * ```tsx
+ * const { hasError, errorMessage, invalid } = useDatePickerValidation({
+ *   fieldState,
+ *   validation: {
+ *     minDate: dayjs().subtract(1, 'year'),
+ *     maxDate: dayjs().add(1, 'year'),
+ *     errorMessages: {
+ *       minDate: 'Date must be within the last year',
+ *       maxDate: 'Date cannot be more than 1 year in the future'
+ *     }
+ *   }
+ * });
+ * ```
+ *
+ * @example
+ * Usage with custom error parser:
+ * ```tsx
+ * const { hasError, errorMessage } = useDatePickerValidation({
+ *   fieldState,
+ *   parseError: (error) => {
+ *     if (typeof error === 'string') {
+ *       return `Date Error: ${error}`;
+ *     }
+ *     return error.message || 'Invalid date';
+ *   }
+ * });
+ * ```
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ * @param options - Validation configuration options
+ * @returns Validation state and error information
+ */
+declare function useDatePickerValidation<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate>(options: UseDatePickerValidationOptions<TFieldValues, TName, TValue>): UseDatePickerValidationReturn;
+
+/**
+ * Options for the useDatePickerStyles hook
+ */
+interface UseDatePickerStylesOptions {
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Whether the component has a validation error */
+    hasError?: boolean;
+    /** Whether the component is in loading state */
+    loading?: boolean;
+    /** Whether the text input is read-only */
     textReadOnly?: boolean;
-    slotProps?: Omit<TimePickerSlotProps<TValue, TEnableAccessibleFieldDOMStructure>, "textField">;
-    transform?: {
-        input?: (value: PathValue<TFieldValues, TName>) => TValue | null;
-        output?: (value: TValue | null, context: PickerChangeHandlerContext<TimeValidationError>) => PathValue<TFieldValues, TName>;
+    /** Custom styles to merge with defaults */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Return type for the useDatePickerStyles hook
+ */
+interface UseDatePickerStylesReturn {
+    /** Computed styles for the date picker component */
+    sx: SxProps<Theme>;
+    /** Additional class names for styling */
+    className?: string;
+}
+/**
+ * Hook for managing theme-aware date picker styles with consistent design system integration
+ *
+ * This hook provides optimized, memoized styles for date picker components that automatically
+ * adapt to the current MUI theme and component state (disabled, error, loading, etc.).
+ * It ensures consistent styling across all date picker instances while allowing customization.
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * const { sx } = useDatePickerStyles({
+ *   disabled: isDisabled,
+ *   hasError: !!error,
+ *   loading: isLoading
+ * });
+ *
+ * return <DatePicker sx={sx} ... />;
+ * ```
+ *
+ * @example
+ * With custom styles:
+ * ```tsx
+ * const { sx } = useDatePickerStyles({
+ *   hasError: !!error,
+ *   sx: {
+ *     '& .MuiInputLabel-root': {
+ *       color: 'primary.main'
+ *     }
+ *   }
+ * });
+ * ```
+ *
+ * @param options - Style configuration options
+ * @returns Computed styles and class names
+ */
+declare function useDatePickerStyles(options?: UseDatePickerStylesOptions): UseDatePickerStylesReturn;
+
+/**
+ * Utility type for creating branded date types to prevent mixing different date formats
+ * @template TDate - The base date type
+ * @template TBrand - The brand string for type safety
+ */
+type BrandedDate<TDate extends PickerValidDate, TBrand extends string> = TDate & {
+    readonly __brand: TBrand;
+};
+/**
+ * Type guard to check if a value is a valid date
+ * @param value - The value to check
+ * @returns True if the value is a valid date-like object
+ */
+declare function isValidDate(value: unknown): value is PickerValidDate;
+/**
+ * Type guard to check if a value is a string that can be parsed as a date
+ * @param value - The value to check
+ * @returns True if the value is a parseable date string
+ */
+declare function isParsableDateString(value: unknown): value is string;
+/**
+ * Creates a type-safe date transformation function that converts form values to date picker values
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TDate - The date type used by the picker
+ * @param adapter - The date adapter from MUI localization context
+ * @returns A transformation function that safely converts form values to dates
+ */
+declare function createDateInputTransform<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TDate extends PickerValidDate = PickerValidDate>(adapter: ReturnType<typeof useLocalizationContext>): (value: PathValue<TFieldValues, TName>) => TDate | null;
+/**
+ * Creates a type-safe date transformation function that converts date picker values back to form values
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TDate - The date type used by the picker
+ * @param format - The format to use for string conversion (optional)
+ * @returns A transformation function that safely converts dates to form values
+ */
+declare function createDateOutputTransform<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TDate extends PickerValidDate = PickerValidDate>(format?: string): (value: TDate | null) => PathValue<TFieldValues, TName>;
+/**
+ * Utility function to create default date picker configuration
+ * @template TDate - The date type
+ * @returns Default configuration object
+ */
+declare function createDefaultDatePickerConfig<TDate extends PickerValidDate = PickerValidDate>(): {
+    readonly slotProps: {
+        readonly actionBar: {
+            readonly actions: readonly ["clear", "today", "cancel", "accept"];
+        };
+        readonly textField: {
+            readonly fullWidth: true;
+            readonly variant: "outlined";
+        };
+    };
+    readonly gridProps: {
+        readonly size: {
+            readonly xs: 12;
+            readonly sm: 12;
+            readonly md: 12;
+            readonly lg: 12;
+            readonly xl: 12;
+        };
+    };
+    readonly validation: {
+        readonly errorMessages: {
+            readonly invalidDate: "Please enter a valid date";
+            readonly minDate: "Date must be after the minimum allowed date";
+            readonly maxDate: "Date must be before the maximum allowed date";
+            readonly disabledDate: "This date is not allowed";
+        };
     };
-    gridProps?: Grid2Props;
 };
+/**
+ * Utility to safely extract error message from various error types
+ * @param error - The error object (could be from react-hook-form or MUI date picker)
+ * @returns A user-friendly error message string
+ */
+declare function extractErrorMessage(error: unknown): string;
+/**
+ * Performance utility to create stable references for complex props
+ * This helps prevent unnecessary re-renders when using complex configuration objects
+ * @template T - The type of the configuration object
+ * @param config - The configuration object
+ * @returns A JSON string that can be used as a dependency in useMemo/useCallback
+ */
+declare function createStableKey<T extends Record<string, unknown>>(config: T): string;
 
+/**
+ * Props for the PasswordElement component.
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The value type
+ *
+ * @public
+ */
 type PasswordElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown> = Omit<TextFieldProps, "name"> & {
+    /**
+     * The field name in the form
+     * @example "password" | "user.currentPassword"
+     */
     name: TName;
+    /**
+     * The form control instance from react-hook-form
+     */
     control?: Control<TFieldValues>;
+    /**
+     * Color of the visibility toggle icon button
+     * @defaultValue "default"
+     */
     iconColor?: IconButtonProps["color"];
+    /**
+     * Custom render function for the visibility toggle icon
+     * @param password - Whether password is currently hidden
+     * @returns ReactNode to render as the icon
+     * @defaultValue Default visibility/visibility-off icons
+     */
     renderIcon?: (password: boolean) => ReactNode;
-    gridProps?: Grid2Props;
+    /**
+     * Grid layout props for the wrapper Grid component
+     * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
+     */
+    gridProps?: GridProps;
+};
+/**
+ * A react-hook-form integrated password TextField with show/hide functionality.
+ *
+ * This component provides a fully integrated password input that works seamlessly with react-hook-form,
+ * including automatic validation, error handling, and a built-in visibility toggle button. The password
+ * can be shown or hidden by clicking the eye icon in the input's end adornment.
+ *
+ * Features:
+ * - Full react-hook-form integration
+ * - Password visibility toggle
+ * - Automatic error display
+ * - Customizable visibility icons
+ * - Grid layout wrapper
+ * - TypeScript type safety
+ * - Disabled state support
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <PasswordElement
+ *   control={control}
+ *   name="password"
+ *   label="Password"
+ *   rules={{
+ *     required: 'Password is required',
+ *     minLength: { value: 8, message: 'Minimum 8 characters' }
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * With custom icon color:
+ * ```tsx
+ * <PasswordElement
+ *   control={control}
+ *   name="confirmPassword"
+ *   label="Confirm Password"
+ *   iconColor="primary"
+ *   placeholder="Re-enter your password"
+ * />
+ * ```
+ *
+ * @example
+ * Custom grid layout:
+ * ```tsx
+ * <PasswordElement
+ *   control={control}
+ *   name="newPassword"
+ *   label="New Password"
+ *   gridProps={{ size: { xs: 12, md: 6 } }}
+ *   renderIcon={(hidden) => hidden ? <CustomHideIcon /> : <CustomShowIcon />}
+ * />
+ * ```
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The value type
+ *
+ * @param props - Component props
+ * @returns React element with optional Grid wrapper
+ *
+ * @public
+ */
+declare const PasswordElement: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown>({ gridProps, ...props }: PasswordElementProps<TFieldValues, TName, TValue>): react_jsx_runtime.JSX.Element;
+    displayName: string;
 };
 
-type RadioButtonGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown> = {
-    rules?: UseControllerProps<TFieldValues, TName>["rules"];
-    options: TValue[];
+type PrimitiveValue = string | number | boolean;
+type OptionObject<TValueKey extends string = string, TLabelKey extends string = string, TDisabledKey extends string = string> = Record<TValueKey, PrimitiveValue> & Record<TLabelKey, string> & Partial<Record<TDisabledKey, boolean>> & Record<string, unknown>;
+interface RadioButtonGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends OptionObject<TValueKey, TLabelKey, TDisabledKey> = OptionObject, TValueKey extends keyof TOption & string = "id", TLabelKey extends keyof TOption & string = "label", TDisabledKey extends keyof TOption & string = "disabled"> {
+    options: TOption[];
     helperText?: ReactNode;
     name: TName;
     required?: boolean;
     parseError?: (error: FieldError) => ReactNode;
     label?: string;
-    labelKey?: string;
-    valueKey?: string;
-    disabledKey?: string;
-    type?: "number" | "string";
+    labelKey?: TLabelKey;
+    valueKey?: TValueKey;
+    disabledKey?: TDisabledKey;
+    type?: "number" | "string" | "boolean";
     emptyOptionLabel?: string;
-    onChange?: (value: TValue | string | undefined) => void;
+    onChange?: (value: TOption[TValueKey] | TOption | undefined) => void;
     returnObject?: boolean;
     row?: boolean;
     control?: Control<TFieldValues>;
@@ -128,74 +1116,569 @@ type RadioButtonGroupProps<TFieldValues extends FieldValues = FieldValues, TName
     radioProps?: RadioProps;
     disabled?: boolean;
     transform?: {
-        input?: (value: PathValue<TFieldValues, TName>) => TValue;
-        output?: (value: TValue | string | undefined) => PathValue<TFieldValues, TName>;
+        input?: (value: PathValue<TFieldValues, TName>) => TOption[TValueKey];
+        output?: (value: TOption[TValueKey] | TOption | undefined) => PathValue<TFieldValues, TName>;
     };
-    gridProps?: Grid2Props;
+    gridProps?: GridProps;
+}
+declare const RadioButtonGroup: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends OptionObject<TValueKey, TLabelKey, TDisabledKey> = OptionObject<string, string, string>, TValueKey extends keyof TOption & string = "id", TLabelKey extends keyof TOption & string = "label", TDisabledKey extends keyof TOption & string = "disabled">({ gridProps, ...props }: RadioButtonGroupProps<TFieldValues, TName, TOption, TValueKey, TLabelKey, TDisabledKey>): react_jsx_runtime.JSX.Element;
+    displayName: string;
 };
 
-type DatePickerElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate$1 = PickerValidDate$1, TEnableAccessibleFieldDOMStructure extends boolean = false> = {
+type SelectCascadeElementProps<TOption, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = Omit<AutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'name' | 'renderInput' | 'isOptionEqualToValue' | 'getOptionLabel' | 'disabled'> & {
+    rules?: UseControllerProps<TFieldValues, TName>['rules'];
     name: TName;
-    required?: boolean;
-    isDate?: boolean;
-    parseError?: (error: FieldError | DateValidationError) => ReactNode;
+    dependsOn: TName;
+    control?: Control<TFieldValues>;
+    gridProps?: GridProps;
+    placeholder?: string;
+    label?: string;
+    variant?: TextFieldVariants;
+    disabled?: boolean;
+    sx?: SxProps;
+    isEdit?: boolean;
+    labelKey?: keyof TOption;
+    valueKey?: keyof TOption;
+    textFieldProps?: Omit<TextFieldProps, 'name'>;
+};
+declare const SelectCascadeElement: {
+    <TOption, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ gridProps, ...props }: SelectCascadeElementProps<TOption, TFieldValues, TName>): React.ReactElement;
+    displayName: string;
+};
+
+/**
+ * Props for the SelectElement component.
+ *
+ * @template TOption - The option object type
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template Multiple - Whether multiple selection is enabled
+ * @template DisableClearable - Whether the clear button is disabled
+ * @template FreeSolo - Whether free text input is allowed
+ * @template ChipComponent - The chip component type for multiple selection
+ *
+ * @public
+ */
+type SelectElementProps<TOption, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]> = Omit<AutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>, "name" | "renderInput" | "isOptionEqualToValue" | "getOptionLabel" | "disabled"> & {
+    /**
+     * Validation rules for the field
+     * @example { required: 'Please select an option' }
+     */
     rules?: UseControllerProps<TFieldValues, TName>["rules"];
+    /**
+     * The field name in the form
+     * @example "category" | "user.department"
+     */
+    name: TName;
+    /**
+     * The form control instance from react-hook-form
+     */
     control?: Control<TFieldValues>;
-    inputProps?: TextFieldProps;
-    helperText?: TextFieldProps["helperText"];
-    label?: ReactNode;
+    /**
+     * Grid layout props for the wrapper Grid component
+     * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
+     */
+    gridProps?: GridProps;
+    /**
+     * Placeholder text for the select input
+     * @example "Choose an option..."
+     */
     placeholder?: string;
-    textReadOnly?: boolean;
-    slotProps?: Omit<DatePickerSlotProps<TValue, TEnableAccessibleFieldDOMStructure>, "textField">;
-    transform?: {
-        input?: (value: PathValue<TFieldValues, TName>) => TValue | null;
-        output?: (value: TValue | null, context: PickerChangeHandlerContext<DateValidationError>) => PathValue<TFieldValues, TName>;
-    };
-    gridProps?: Grid2Props;
-    datePickerProps?: Omit<DatePickerProps<TValue, TEnableAccessibleFieldDOMStructure>, "value" | "slotProps">;
+    /**
+     * The input label text
+     * @example "Category"
+     */
+    label?: string;
+    /**
+     * The TextField variant
+     * @defaultValue "outlined"
+     */
     variant?: TextFieldVariants;
+    /**
+     * Custom styles for the component
+     */
     sx?: SxProps;
+    /**
+     * Whether the component is in edit mode (affects auto-selection behavior)
+     * When false and only one option exists, that option is auto-selected
+     * @defaultValue false
+     */
+    isEdit?: boolean;
+    /**
+     * Whether the select is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The property name in option objects to use as display label
+     * @defaultValue "Label"
+     * @example "name" | "title"
+     */
+    labelKey?: string;
+    /**
+     * The property name in option objects to use as the value
+     * @defaultValue "Value"
+     * @example "id" | "code"
+     */
+    valueKey?: keyof TOption;
+    /**
+     * Additional props for the underlying TextField component
+     */
+    textFieldProps?: Omit<TextFieldProps, "name">;
+};
+/**
+ * A react-hook-form integrated Autocomplete component for selecting from predefined options.
+ *
+ * This component provides a fully integrated select/autocomplete input that works seamlessly
+ * with react-hook-form, including automatic validation, error handling, and optional Grid wrapper
+ * for responsive layouts. It supports both single and multiple selection modes.
+ *
+ * Features:
+ * - Full react-hook-form integration
+ * - Autocomplete with filtering
+ * - Single and multiple selection support
+ * - Automatic error display
+ * - Customizable option display (labelKey/valueKey)
+ * - Auto-selection when only one option exists
+ * - Grid layout wrapper
+ * - TypeScript type safety
+ * - Disabled state styling
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <SelectElement
+ *   control={control}
+ *   name="category"
+ *   label="Category"
+ *   options={[
+ *     { Label: 'Technology', Value: 'tech' },
+ *     { Label: 'Finance', Value: 'finance' }
+ *   ]}
+ *   rules={{ required: 'Please select a category' }}
+ * />
+ * ```
+ *
+ * @example
+ * With custom keys:
+ * ```tsx
+ * <SelectElement
+ *   control={control}
+ *   name="userId"
+ *   label="Assign to User"
+ *   options={users}
+ *   labelKey="fullName"
+ *   valueKey="id"
+ *   placeholder="Choose a user..."
+ * />
+ * ```
+ *
+ * @example
+ * Multiple selection:
+ * ```tsx
+ * <SelectElement
+ *   control={control}
+ *   name="tags"
+ *   label="Tags"
+ *   options={availableTags}
+ *   multiple
+ *   gridProps={{ size: { xs: 12, md: 8 } }}
+ * />
+ * ```
+ *
+ * @template TOption - The option object type
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template Multiple - Whether multiple selection is enabled
+ * @template DisableClearable - Whether the clear button is disabled
+ * @template FreeSolo - Whether free text input is allowed
+ * @template ChipComponent - The chip component type for multiple selection
+ *
+ * @param props - Component props
+ * @returns React element with optional Grid wrapper
+ *
+ * @public
+ */
+declare const SelectElement: {
+    <TOption extends Record<string, any> = Record<string, any>, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ gridProps, ...props }: SelectElementProps<TOption, TFieldValues, TName, Multiple, DisableClearable, FreeSolo, ChipComponent>): React.ReactElement;
+    displayName: string;
 };
 
-type CheckboxElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown> = Omit<CheckboxProps, "name"> & {
+type BaseAutocompleteProps<TOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType> = Omit<AutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'name' | 'renderInput' | 'multiple' | 'onChange' | 'value'>;
+type SelectMultiElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends Record<string, any> = Record<string, any>, Multiple extends boolean | undefined = true, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = BaseAutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
+    rules?: UseControllerProps<TFieldValues, TName>['rules'];
     name: TName;
     control?: Control<TFieldValues>;
-    label?: FormControlLabelProps["label"];
-    labelProps?: Omit<FormControlLabelProps, "label" | "control">;
-    gridProps?: Grid2Props;
+    gridProps?: GridProps;
+    placeholder?: string;
+    label?: string;
+    variant?: TextFieldVariants;
+    sx?: SxProps;
+    labelKey?: keyof TOption;
+    valueKey?: keyof TOption;
+};
+declare const SelectMultiElement: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends Record<string, any> = Record<string, any>>({ gridProps, ...props }: SelectMultiElementProps<TFieldValues, TName, TOption>): React.ReactElement;
+    displayName: string;
+};
+
+/**
+ * Props for the TextFieldElement component.
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ *
+ * @public
+ */
+interface TextFieldElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown> {
+    /**
+     * Validation rules for the field
+     * @example { required: 'This field is required', minLength: { value: 3, message: 'Minimum 3 characters' } }
+     */
+    rules?: UseControllerProps<TFieldValues, TName>["rules"];
+    /**
+     * The field name in the form
+     * @example "firstName" | "user.email"
+     */
+    name: TName;
+    /**
+     * Custom error message parser
+     * @param error - The field error object
+     * @returns Custom error message or component
+     */
+    parseError?: (error: FieldError) => ReactNode;
+    /**
+     * The form control instance from react-hook-form
+     */
+    control?: Control<TFieldValues>;
+    /**
+     * Custom TextField component to use instead of default MUI TextField
+     */
+    component?: typeof TextField;
+    /**
+     * Value transformation functions for input/output
+     */
+    transform?: {
+        /** Transform value before displaying in input */
+        input?: (value: PathValue<TFieldValues, TName>) => TValue;
+        /** Transform input event to form value */
+        output?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => PathValue<TFieldValues, TName>;
+    };
+    /**
+     * The input label text
+     * @example "Email Address"
+     */
+    label?: string;
+    /**
+     * Placeholder text for the input
+     * @example "Enter your email"
+     */
+    placeholder?: string;
+    /**
+     * Additional props for the underlying TextField component
+     */
+    textFieldProps?: Omit<TextFieldProps, "name">;
+    /**
+     * Grid layout props for the wrapper Grid component
+     * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
+     */
+    gridProps?: GridProps;
+    /**
+     * The TextField variant
+     * @defaultValue "outlined"
+     */
+    variant?: TextFieldVariants;
+    /**
+     * Custom styles for the TextField
+     */
+    sx?: SxProps;
+}
+/**
+ * A react-hook-form integrated TextField component with automatic validation and grid layout.
+ *
+ * This component provides a fully integrated TextField that works seamlessly with react-hook-form,
+ * including automatic validation, error handling, and optional Grid wrapper for responsive layouts.
+ *
+ * Features:
+ * - Full react-hook-form integration
+ * - Automatic error display
+ * - Value transformation support
+ * - Grid layout wrapper
+ * - TypeScript type safety
+ * - Number input handling
+ * - Disabled state styling
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <TextFieldElement
+ *   control={control}
+ *   name="firstName"
+ *   label="First Name"
+ *   rules={{ required: 'First name is required' }}
+ * />
+ * ```
+ *
+ * @example
+ * With custom grid layout:
+ * ```tsx
+ * <TextFieldElement
+ *   control={control}
+ *   name="email"
+ *   label="Email"
+ *   type="email"
+ *   gridProps={{ size: { xs: 12, md: 6 } }}
+ *   rules={{
+ *     required: 'Email is required',
+ *     pattern: { value: /\S+@\S+\.\S+/, message: 'Invalid email' }
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * Number input with transformation:
+ * ```tsx
+ * <TextFieldElement
+ *   control={control}
+ *   name="age"
+ *   label="Age"
+ *   textFieldProps={{ type: 'number' }}
+ *   transform={{
+ *     input: (value) => value?.toString() || '',
+ *     output: (event) => parseInt(event.target.value) || null
+ *   }}
+ * />
+ * ```
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ *
+ * @param props - Component props
+ * @returns React element with optional Grid wrapper
+ *
+ * @public
+ */
+declare const TextFieldElement: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown>({ gridProps, ...props }: TextFieldElementProps<TFieldValues, TName, TValue>): React$1.ReactElement;
+    displayName: string;
 };
 
-type TextFieldElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown> = {
+/**
+ * Props for the EnhancedTextFieldElement component.
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ *
+ * @public
+ */
+interface EnhancedTextFieldElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = PathValue<TFieldValues, TName>> {
+    /**
+     * Validation rules for the field
+     * @example { required: 'This field is required', minLength: { value: 3, message: 'Minimum 3 characters' } }
+     */
     rules?: UseControllerProps<TFieldValues, TName>["rules"];
+    /**
+     * The field name in the form
+     * @example "firstName" | "user.email"
+     */
     name: TName;
+    /**
+     * Custom error message parser
+     * @param error - The field error object
+     * @returns Custom error message or component
+     */
     parseError?: (error: FieldError) => ReactNode;
+    /**
+     * The form control instance from react-hook-form
+     */
     control?: Control<TFieldValues>;
+    /**
+     * Custom TextField component to use instead of default MUI TextField
+     */
     component?: typeof TextField;
+    /**
+     * Value transformation functions for input/output
+     * @deprecated Use fieldType for common patterns or custom transforms for complex cases
+     */
     transform?: {
+        /** Transform value before displaying in input */
         input?: (value: PathValue<TFieldValues, TName>) => TValue;
+        /** Transform input event to form value */
         output?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => PathValue<TFieldValues, TName>;
     };
+    /**
+     * Built-in field type for automatic transformation
+     * @example 'text' | 'number' | 'date' | 'time' | 'select'
+     */
+    fieldType?: FieldType;
+    /**
+     * Default value to display when field value is null/undefined
+     * @example ""
+     */
+    defaultValue?: TValue;
+    /**
+     * The input label text
+     * @example "Email Address"
+     */
     label?: string;
+    /**
+     * Placeholder text for the input
+     * @example "Enter your email"
+     */
     placeholder?: string;
+    /**
+     * Additional props for the underlying TextField component
+     */
     textFieldProps?: Omit<TextFieldProps, "name">;
-    gridProps?: Grid2Props;
+    /**
+     * Grid layout props for the wrapper Grid component
+     * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
+     */
+    gridProps?: GridProps;
+    /**
+     * The TextField variant
+     * @defaultValue "outlined"
+     */
     variant?: TextFieldVariants;
+    /**
+     * Custom styles for the TextField
+     */
     sx?: SxProps;
+    /**
+     * Custom onChange handler called after transformation
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Enable development warnings for debugging transformation issues
+     * @defaultValue process.env.NODE_ENV === 'development'
+     */
+    enableWarnings?: boolean;
+}
+/**
+ * An enhanced react-hook-form integrated TextField component with automatic validation,
+ * performance optimizations, and built-in field type handling.
+ *
+ * This enhanced version provides all the functionality of the original TextFieldElement
+ * plus additional features:
+ * - Performance optimizations with memoized transformations
+ * - Built-in field type handling (number, text, etc.)
+ * - Better TypeScript inference and type safety
+ * - Development warnings for debugging
+ * - Stable references to prevent unnecessary re-renders
+ * - Enhanced error handling with custom parseError support
+ *
+ * Features:
+ * - Full react-hook-form integration
+ * - Automatic error display with custom parsing
+ * - Value transformation support (backward compatible)
+ * - Built-in field types for common patterns
+ * - Grid layout wrapper
+ * - Enhanced TypeScript type safety
+ * - Optimized number input handling
+ * - Disabled state styling
+ * - Performance optimizations
+ *
+ * @example
+ * Basic usage with built-in number handling:
+ * ```tsx
+ * <EnhancedTextFieldElement
+ *   control={control}
+ *   name="age"
+ *   label="Age"
+ *   fieldType="number"
+ *   rules={{ required: 'Age is required', min: { value: 0, message: 'Age must be positive' } }}
+ * />
+ * ```
+ *
+ * @example
+ * Advanced usage with custom grid layout:
+ * ```tsx
+ * <EnhancedTextFieldElement
+ *   control={control}
+ *   name="email"
+ *   label="Email"
+ *   fieldType="text"
+ *   placeholder="Enter your email address"
+ *   gridProps={{ size: { xs: 12, md: 6 } }}
+ *   rules={{
+ *     required: 'Email is required',
+ *     pattern: { value: /\S+@\S+\.\S+/, message: 'Invalid email' }
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * Custom transformation (backward compatible):
+ * ```tsx
+ * <EnhancedTextFieldElement
+ *   control={control}
+ *   name="price"
+ *   label="Price"
+ *   transform={{
+ *     input: (value) => value ? `$${value}` : '',
+ *     output: (event) => parseFloat(event.target.value.replace('$', '')) || null
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * With custom error parsing:
+ * ```tsx
+ * <EnhancedTextFieldElement
+ *   control={control}
+ *   name="username"
+ *   label="Username"
+ *   fieldType="text"
+ *   parseError={(error) => (
+ *     <span style={{ color: 'red' }}>
+ *       ⚠️ {error.message}
+ *     </span>
+ *   )}
+ * />
+ * ```
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ *
+ * @param props - Component props
+ * @returns React element with optional Grid wrapper
+ *
+ * @public
+ */
+declare const EnhancedTextFieldElement: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = PathValue<TFieldValues, TName>>({ gridProps, ...props }: EnhancedTextFieldElementProps<TFieldValues, TName, TValue>): React$1.ReactElement;
+    displayName: string;
 };
 
-declare const Field: {
-    Text: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TValue = unknown>(props: TextFieldElementProps<TFieldValues, TName, TValue>) => JSX.Element;
-    Checkbox: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TValue = unknown>(props: CheckboxElementProps<TFieldValues, TName, TValue>) => JSX.Element;
-    Date: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TValue extends unknown = any>(props: DatePickerElementProps<TFieldValues, TName, TValue>) => JSX.Element;
-    RadioGroup: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TValue = unknown>(props: RadioButtonGroupProps<TFieldValues, TName, TValue>) => JSX.Element;
-    Password: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>>(props: PasswordElementProps<TFieldValues, TName>) => JSX.Element;
-    Time: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TValue extends unknown = any>(props: TimePickerElementProps<TFieldValues, TName, TValue>) => JSX.Element;
-    Select: <TOption extends Record<string, any> = Record<string, any>, TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">(props: SelectElementProps<TOption, TFieldValues, TName, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react.JSX.Element;
-    SelectMulti: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.Path<TFieldValues>, TOption extends Record<string, any> = Record<string, any>, Multiple extends boolean | undefined = true, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">(props: SelectMultiElementProps<TFieldValues, TName, TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react.JSX.Element;
-    SelectCascade: <TOption, TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">(props: SelectCascadeElementProps<TOption, TFieldValues, TName, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react.JSX.Element;
-    AsyncSelect: <TOption extends Record<string, any> = Record<string, any>, TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.Path<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">(props: AsyncSelectElementProps<TOption, TFieldValues, TName, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react.JSX.Element;
-    AsyncMultiSelect: any;
-    CheckboxGroup: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TValue extends number[] = number[]>(props: CheckboxGroupProps<TFieldValues, TName, TValue>) => JSX.Element;
+interface TimePickerElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> {
+    name: TName;
+    required?: boolean;
+    isDate?: boolean;
+    parseError?: (error: FieldError | TimeValidationError) => ReactNode;
+    rules?: UseControllerProps<TFieldValues, TName>["rules"];
+    control?: Control<TFieldValues>;
+    inputProps?: TextFieldProps;
+    helperText?: TextFieldProps["helperText"];
+    label?: ReactNode;
+    placeholder?: string;
+    textReadOnly?: boolean;
+    slotProps?: Omit<TimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, "textField">;
+    transform?: {
+        input?: (value: PathValue<TFieldValues, TName>) => TValue | null;
+        output?: (value: TValue | null, context: PickerChangeHandlerContext<TimeValidationError>) => PathValue<TFieldValues, TName>;
+    };
+    gridProps?: GridProps;
+    timePickerProps?: Omit<TimePickerProps<TEnableAccessibleFieldDOMStructure>, "value" | "slotProps">;
+    variant?: TextFieldVariants;
+    sx?: SxProps;
+}
+declare const TimePickerElement: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends unknown = any>({ gridProps, ...props }: TimePickerElementProps<TFieldValues, TName, TValue>): React$1.ReactElement;
+    displayName: string;
 };
 
-export { Field };
+export { AsyncMultiSelect2, type AsyncMultiSelect2Props, type AsyncSelect2Payload, type BrandedDate, CheckboxElement, type CheckboxElementProps, CheckboxGroup, type CheckboxGroupProps, DatePickerElement, DatePickerElementCore, type DatePickerElementCoreProps, type DatePickerElementGridProps, type DatePickerElementProps, type DatePickerHookReturn, type DatePickerValidationConfig, type DateTransform, EnhancedTextFieldElement, type EnhancedTextFieldElementProps, type Option2Item, type OptionObject$1 as OptionObject, PasswordElement, RadioButtonGroup, SelectCascadeElement, SelectElement, SelectMultiElement, TextFieldElement, TimePickerElement, type TypedDatePickerSlotProps, type UseDatePickerStylesOptions, type UseDatePickerStylesReturn, type UseDatePickerValidationOptions, type UseDatePickerValidationReturn, type UseDatePickerValueOptions, type UseDatePickerValueReturn, type ValidatedDate, createDateInputTransform, createDateOutputTransform, createDefaultDatePickerConfig, createStableKey, extractErrorMessage, isParsableDateString, isValidDate, readDatePickerValueAsDate, useDatePickerStyles, useDatePickerValidation, useDatePickerValue };