@gnwebsoft/ui 4.0.2 → 4.0.4

package/dist/wrappers/DatePickerElement/hooks/useDatePickerValidation.d.ts

@@ -0,0 +1,79 @@
+import type { PickerValidDate, DateValidationError } from "@mui/x-date-pickers";
+import type { ReactNode } from "react";
+import type { FieldError, FieldValues, FieldPath, UseControllerReturn } from "react-hook-form";
+import type { DatePickerValidationConfig } from "../types";
+/**
+ * Options for the useDatePickerValidation hook
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TValue - The transformed value type
+ */
+export 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
+ */
+export 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
+ */
+export declare function useDatePickerValidation<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate>(options: UseDatePickerValidationOptions<TFieldValues, TName, TValue>): UseDatePickerValidationReturn;
+export default useDatePickerValidation;
+//# sourceMappingURL=useDatePickerValidation.d.ts.map

package/dist/wrappers/DatePickerElement/hooks/useDatePickerValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatePickerValidation.d.ts","sourceRoot":"","sources":["../../../../src/wrappers/DatePickerElement/hooks/useDatePickerValidation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,SAAS,EACT,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,WAAW,8BAA8B,CAC7C,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,MAAM,SAAS,eAAe,GAAG,eAAe;IAEhD,sDAAsD;IACtD,UAAU,EAAE,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC;IACnE,mDAAmD;IACnD,UAAU,CAAC,EAAE,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAChD,kCAAkC;IAClC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,mBAAmB,KAAK,SAAS,CAAC;IACpE,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,kDAAkD;IAClD,QAAQ,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,KAAK,EAAE,UAAU,GAAG,mBAAmB,GAAG,SAAS,CAAC;IACpD,0CAA0C;IAC1C,YAAY,EAAE,SAAS,CAAC;IACxB,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;CAClB;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,uBAAuB,CACrC,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,MAAM,SAAS,eAAe,GAAG,eAAe,EAEhD,OAAO,EAAE,8BAA8B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,GACnE,6BAA6B,CA8F/B;AAED,eAAe,uBAAuB,CAAC"}

package/dist/wrappers/DatePickerElement/hooks/useDatePickerValue.d.ts

@@ -0,0 +1,73 @@
+import type { PickerValidDate, DateValidationError, PickerChangeHandlerContext } from "@mui/x-date-pickers";
+import { useLocalizationContext } from "@mui/x-date-pickers/internals";
+import type { FieldValues, FieldPath, UseControllerReturn } from "react-hook-form";
+import type { DateTransform } from "../types";
+/**
+ * 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export declare function useDatePickerValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate>(options: UseDatePickerValueOptions<TFieldValues, TName, TValue>): UseDatePickerValueReturn<TValue>;
+export default useDatePickerValue;
+//# sourceMappingURL=useDatePickerValue.d.ts.map

package/dist/wrappers/DatePickerElement/hooks/useDatePickerValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatePickerValue.d.ts","sourceRoot":"","sources":["../../../../src/wrappers/DatePickerElement/hooks/useDatePickerValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,0BAA0B,EAC3B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,OAAO,KAAK,EACV,WAAW,EACX,SAAS,EAET,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,SAAS,eAAe,EACrE,OAAO,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,EAClD,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,GAAG,SAAS,GACvC,KAAK,GAAG,IAAI,CAiBd;AAED;;;;;GAKG;AACH,MAAM,WAAW,yBAAyB,CACxC,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,MAAM,SAAS,eAAe,GAAG,eAAe;IAEhD,gDAAgD;IAChD,KAAK,EAAE,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;IACzD,wCAAwC;IACxC,SAAS,CAAC,EAAE,aAAa,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;CACxD;AAED;;;GAGG;AACH,MAAM,WAAW,wBAAwB,CAAC,MAAM,SAAS,eAAe,GAAG,eAAe;IACxF,sDAAsD;IACtD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,EAAE,CACR,KAAK,EAAE,MAAM,GAAG,IAAI,EACpB,OAAO,EAAE,0BAA0B,CAAC,mBAAmB,CAAC,KACrD,IAAI,CAAC;CACX;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,kBAAkB,CAChC,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,MAAM,SAAS,eAAe,GAAG,eAAe,EAEhD,OAAO,EAAE,yBAAyB,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,GAC9D,wBAAwB,CAAC,MAAM,CAAC,CAmClC;AAED,eAAe,kBAAkB,CAAC"}

package/dist/wrappers/DatePickerElement/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * DatePickerElement - Optimized, type-safe date picker for react-hook-form
+ *
+ * This module provides a comprehensive date picker solution with:
+ * - 🎯 Full TypeScript type inference and safety
+ * - 🔧 Seamless react-hook-form integration
+ * - 🎨 Theme-aware styling with MUI integration
+ * - ♿ WCAG-compliant accessibility features
+ * - 🚀 Performance optimized with memoization
+ * - 📱 Responsive Grid layout support
+ * - 🛡️ Comprehensive validation system
+ * - 🔄 Flexible value transformation
+ * - 📚 Rich developer experience with IntelliSense
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * 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
+ * Tree-shakable imports for optimal bundle size:
+ * ```tsx
+ * // Import only what you need
+ * import { DatePickerElementCore } from '@gnwebsoft/ui/wrappers/DatePickerElement';
+ * import { useDatePickerValue } from '@gnwebsoft/ui/wrappers/DatePickerElement/hooks';
+ * ```
+ */
+export { DatePickerElement } from "./DatePickerElement";
+export { DatePickerElementCore } from "./DatePickerElementCore";
+export { useDatePickerValue, useDatePickerValidation, useDatePickerStyles, readDatePickerValueAsDate, type UseDatePickerValueOptions, type UseDatePickerValueReturn, type UseDatePickerValidationOptions, type UseDatePickerValidationReturn, type UseDatePickerStylesOptions, type UseDatePickerStylesReturn, } from "./hooks";
+export type { DatePickerElementProps, DatePickerElementCoreProps, DatePickerElementGridProps, DateTransform, DatePickerValidationConfig, DatePickerHookReturn, TypedDatePickerSlotProps, ValidatedDate, } from "./types";
+export { isValidDate, isParsableDateString, createDateInputTransform, createDateOutputTransform, createDefaultDatePickerConfig, extractErrorMessage, createStableKey, type BrandedDate, } from "./utils";
+export { DatePickerElement as default } from "./DatePickerElement";
+//# sourceMappingURL=index.d.ts.map

package/dist/wrappers/DatePickerElement/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wrappers/DatePickerElement/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,yBAAyB,EACzB,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,8BAA8B,EACnC,KAAK,6BAA6B,EAClC,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,GAC/B,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,sBAAsB,EACtB,0BAA0B,EAC1B,0BAA0B,EAC1B,aAAa,EACb,0BAA0B,EAC1B,oBAAoB,EACpB,wBAAwB,EACxB,aAAa,GACd,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,wBAAwB,EACxB,yBAAyB,EACzB,6BAA6B,EAC7B,mBAAmB,EACnB,eAAe,EACf,KAAK,WAAW,GACjB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,iBAAiB,IAAI,OAAO,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/wrappers/DatePickerElement/types.d.ts

@@ -0,0 +1,183 @@
+import type { GridProps, TextFieldProps, TextFieldVariants } from "@mui/material";
+import type { PickerValidDate, DatePickerProps, DatePickerSlotProps, DateValidationError, PickerChangeHandlerContext } from "@mui/x-date-pickers";
+import type { ReactNode } from "react";
+import type { Control, FieldPath, PathValue, FieldError, FieldValues } from "react-hook-form";
+/**
+ * Branded type for validated date values to ensure type safety
+ * @template TDate - The date type (from date adapter)
+ */
+export 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
+ */
+export 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)
+ */
+export 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
+ */
+export 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
+ */
+export 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;
+    /**
+     * The form control instance from useForm() hook
+     */
+    control?: Control<TFieldValues>;
+    /**
+     * 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;
+    /**
+     * 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
+ */
+export 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
+ */
+export 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
+ */
+export 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;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/wrappers/DatePickerElement/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/wrappers/DatePickerElement/types.ts"],"names":[],"mappings":"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"}

package/dist/wrappers/DatePickerElement/utils.d.ts

@@ -0,0 +1,89 @@
+import type { PickerValidDate } from "@mui/x-date-pickers";
+import type { useLocalizationContext } from "@mui/x-date-pickers/internals";
+import type { FieldValues, FieldPath, PathValue } from "react-hook-form";
+/**
+ * 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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";
+        };
+    };
+};
+/**
+ * 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
+ */
+export 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
+ */
+export declare function createStableKey<T extends Record<string, unknown>>(config: T): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/wrappers/DatePickerElement/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/wrappers/DatePickerElement/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEzE;;;;GAIG;AACH,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,eAAe,EAAE,MAAM,SAAS,MAAM,IAC1E,KAAK,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvC;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,eAAe,CAwBpE;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAgBpE;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CACtC,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,EACrC,KAAK,SAAS,eAAe,GAAG,eAAe,EAC/C,OAAO,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,IAC1C,OAAO,SAAS,CAAC,YAAY,EAAE,KAAK,CAAC,KAAG,KAAK,GAAG,IAAI,CAyB7D;AAED;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CACvC,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,EACrC,KAAK,SAAS,eAAe,GAAG,eAAe,EAC/C,MAAM,CAAC,EAAE,MAAM,IACP,OAAO,KAAK,GAAG,IAAI,KAAG,SAAS,CAAC,YAAY,EAAE,KAAK,CAAC,CA+C7D;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,KAAK,SAAS,eAAe,GAAG,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4B5F;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAmC1D;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,MAAM,CAoBpF"}

package/dist/wrappers/DateTimePickerElement/index.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=index.d.ts.map

package/dist/wrappers/DateTimePickerElement/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wrappers/DateTimePickerElement/index.ts"],"names":[],"mappings":""}

package/dist/wrappers/DateTimePickerElement/types.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=types.d.ts.map

package/dist/wrappers/DateTimePickerElement/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/wrappers/DateTimePickerElement/types.ts"],"names":[],"mappings":""}

package/dist/wrappers/Field/index.d.ts

@@ -0,0 +1,42 @@
+declare const Field: {
+    Text: <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>, TValue = import("react-hook-form").PathValue<TFieldValues, TName>>({ gridProps, ...props }: import("..").TextFieldElementProps<TFieldValues, TName, TValue>) => import("react").ReactElement;
+    Number: <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>, TValue = import("react-hook-form").PathValue<TFieldValues, TName>>({ gridProps, ...props }: import("../NumberFieldElement").NumberFieldElementProps<TFieldValues, TName, TValue>) => import("react").ReactElement;
+    Checkbox: <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>>({ gridProps, ...props }: import("..").CheckboxElementProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+    Date: import("react").ForwardRefExoticComponent<import("..").DatePickerElementProps<any, any, any, any> & import("react").RefAttributes<HTMLDivElement>>;
+    RadioGroup: {
+        <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>, TOption extends Record<TValueKey, string | number | boolean> & Record<TLabelKey, string> & Partial<Record<TDisabledKey, boolean>> = Record<string, string | number | boolean> & Record<string, string> & Partial<Record<string, boolean>>, TValueKey extends string = "id", TLabelKey extends string = "label", TDisabledKey extends string = "disabled">({ gridProps, ...props }: import("../RadioButtonGroup/RadioButtonGroup").RadioButtonGroupProps<TFieldValues, TName, TOption, TValueKey, TLabelKey, TDisabledKey>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Password: <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>>({ gridProps, ...props }: import("../PasswordElement/PasswordElement").PasswordElementProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+    Time: {
+        <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>, TValue extends unknown = any>({ gridProps, ...props }: import("../TimePickerElement/TimePickerElement").TimePickerElementProps<TFieldValues, TName, TValue>): React.ReactElement;
+        displayName: string;
+    };
+    Select: {
+        <TOption extends import("..").FlexibleOption = import("..").FlexibleOption, TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("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">({ gridProps, ...props }: import("../SelectElement/SelectElement").SelectElementProps<TOption, TFieldValues, TName, Multiple, DisableClearable, FreeSolo, ChipComponent>): React.ReactElement;
+        displayName: string;
+    };
+    SelectMulti: {
+        <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>, TOption extends import("..").FlexibleOption = import("..").FlexibleOption>({ gridProps, ...props }: import("../SelectMultiElement/SelectMultiElement").SelectMultiElementProps<TFieldValues, TName, TOption>): React.ReactElement;
+        displayName: string;
+    };
+    SelectCascade: {
+        <TOption, TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>>({ gridProps, ...props }: import("../SelectCascadeElement/SelectCascadeElement").SelectCascadeElementProps<TOption, TFieldValues, TName>): React.ReactElement;
+        displayName: string;
+    };
+    AsyncSelect: {
+        <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>, TValueKey extends string = "Value", TLabelKey extends string = "Label", TOption extends import("../AsyncSelect/types").OptionObject<TValueKey, TLabelKey> = import("../AsyncSelect/types").OptionObject<TValueKey, TLabelKey>>({ gridProps, ...props }: import("../AsyncSelect/types").AsyncSelectElementProps<TFieldValues, TName, TValueKey, TLabelKey, TOption>): React.ReactElement;
+        displayName: string;
+    };
+    AsyncMultiSelect: {
+        <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>>({ gridProps, ...props }: import("..").AsyncMultiSelect2Props<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    CheckboxGroup: {
+        <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>>({ gridProps, ...props }: import("../CheckboxGroup/CheckboxGroup").CheckboxGroupProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    OTPInput: <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").FieldPath<TFieldValues> = import("react-hook-form").FieldPath<TFieldValues>>({ gridProps, ...props }: import("../OTPInputElement").OTPInputElementProps<TFieldValues, TName>) => import("react").ReactElement;
+};
+export { Field };
+//# sourceMappingURL=index.d.ts.map

package/dist/wrappers/Field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wrappers/Field/index.ts"],"names":[],"mappings":"AAeA,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAeV,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}