@gnwebsoft/ui 4.0.2 → 4.0.4

package/dist/wrappers/CheckboxGroup/enhanced-types.d.ts

@@ -0,0 +1,171 @@
+import type { CheckboxProps, FormControlLabelProps, GridProps, SxProps, Theme } from "@mui/material";
+import type { ReactNode } from "react";
+import type { Control, FieldError, FieldPath, FieldValues, PathValue } from "react-hook-form";
+import type { EventOrValue } from "../../types/events";
+/**
+ * Supported primitive value types for checkbox options
+ */
+export type CheckboxValue = string | number;
+/**
+ * Base constraint for option objects with flexible key structure
+ *
+ * @template TValue - The type of values (string | number)
+ * @template TValueKey - Key for accessing the value property
+ * @template TLabelKey - Key for accessing the label property
+ * @template TDisabledKey - Key for accessing the disabled property
+ */
+export type OptionConstraint<TValue extends CheckboxValue = CheckboxValue, TValueKey extends string = string, TLabelKey extends string = string, TDisabledKey extends string = string> = Record<TValueKey, TValue> & Record<TLabelKey, string> & Partial<Record<TDisabledKey, boolean>> & Record<string, unknown>;
+/**
+ * Utility type to extract the value type from an option array
+ * This ensures the field value array type matches the option value type
+ */
+export type ExtractOptionValue<TOption extends OptionConstraint<CheckboxValue, TValueKey>, TValueKey extends keyof TOption & string> = TOption[TValueKey];
+/**
+ * Utility type to create the expected array type for the form field
+ * This creates TValue[] where TValue matches the option value type
+ */
+export type CheckboxGroupValue<TOption extends OptionConstraint<CheckboxValue, TValueKey>, TValueKey extends keyof TOption & string> = Array<ExtractOptionValue<TOption, TValueKey>>;
+/**
+ * Enhanced CheckboxGroup props with full type safety and inference
+ *
+ * @template TFieldValues - The form values type
+ * @template TName - The field name type
+ * @template TOption - The option object type (constrained to have value of string | number)
+ * @template TValueKey - The key for option values (must exist on TOption)
+ * @template TLabelKey - The key for option labels (must exist on TOption)
+ * @template TDisabledKey - The key for option disabled state (must exist on TOption)
+ *
+ * Key insight: TOption[TValueKey] must extend CheckboxValue (string | number)
+ * and PathValue<TFieldValues, TName> must be assignable from TOption[TValueKey][]
+ */
+export interface EnhancedCheckboxGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends OptionConstraint<CheckboxValue, TValueKey, TLabelKey, TDisabledKey> = OptionConstraint, 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
+     * The field value must be compatible with Array<TOption[TValueKey]>
+     */
+    name: TName;
+    /**
+     * Form control instance
+     */
+    control?: Control<TFieldValues>;
+    /**
+     * Array of options - the value type is automatically inferred
+     * Each option must have TValueKey property of type string | number
+     */
+    options: readonly TOption[];
+    /**
+     * Key for accessing option values (must exist on TOption)
+     * @default "value"
+     */
+    valueField?: TValueKey;
+    /**
+     * Key for accessing option labels (must exist on TOption)
+     * @default "label"
+     */
+    labelField?: TLabelKey;
+    /**
+     * Key for accessing option disabled state (must exist on TOption)
+     * @default "disabled"
+     */
+    disabledKey?: TDisabledKey;
+    /**
+     * Label for the entire checkbox group
+     */
+    label?: ReactNode;
+    /**
+     * Helper text displayed below the group
+     */
+    helperText?: ReactNode;
+    /**
+     * Display checkboxes in a row layout
+     * @default false
+     */
+    row?: boolean;
+    /**
+     * Custom error parser
+     */
+    parseError?: (error: FieldError) => ReactNode;
+    /**
+     * Props for individual FormControlLabel components
+     */
+    labelProps?: Omit<FormControlLabelProps, "label" | "control">;
+    /**
+     * Grid wrapper properties
+     */
+    gridProps?: GridProps;
+    /**
+     * Value transformation functions with proper type constraints
+     * Input/output types are automatically inferred from TOption[TValueKey]
+     */
+    transform?: {
+        /**
+         * Transform field value to display format
+         * Input: PathValue<TFieldValues, TName>
+         * Output: Array<TOption[TValueKey]>
+         */
+        input?: (value: PathValue<TFieldValues, TName>) => Array<ExtractOptionValue<TOption, TValueKey>>;
+        /**
+         * Transform selected values back to field format
+         * Input: Array<TOption[TValueKey]>
+         * Output: PathValue<TFieldValues, TName>
+         */
+        output?: (eventOrValue: EventOrValue<PathValue<TFieldValues, TName>>, value?: PathValue<TFieldValues, TName>) => PathValue<TFieldValues, TName>;
+    };
+    /**
+     * Change handler with properly typed parameters
+     * Both selected values and full option objects are provided
+     */
+    onChange?: (selectedValues: Array<ExtractOptionValue<TOption, TValueKey>>, selectedOptions: readonly TOption[]) => void;
+    /**
+     * Custom styling
+     */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Type-safe helper function for creating checkbox group options
+ * This provides better IDE experience and catches type mismatches early
+ */
+export declare function createCheckboxOption<TValue extends CheckboxValue, TValueKey extends string = "value", TLabelKey extends string = "label", TDisabledKey extends string = "disabled">(value: TValue, label: string, options?: {
+    disabled?: boolean;
+    valueField?: TValueKey;
+    labelField?: TLabelKey;
+    disabledKey?: TDisabledKey;
+}): Record<TValueKey, TValue> & Record<TLabelKey, string> & Partial<Record<TDisabledKey, boolean>> & Record<string, unknown>;
+/**
+ * Type-safe helper function for creating arrays of checkbox options
+ * Provides excellent IDE intellisense and type checking
+ */
+export declare function createCheckboxOptions<TValue extends CheckboxValue, TValueKey extends string = "value", TLabelKey extends string = "label", TDisabledKey extends string = "disabled">(items: Array<{
+    value: TValue;
+    label: string;
+    disabled?: boolean;
+}>, keys?: {
+    valueField?: TValueKey;
+    labelField?: TLabelKey;
+    disabledKey?: TDisabledKey;
+}): Array<Record<TValueKey, TValue> & Record<TLabelKey, string> & Partial<Record<TDisabledKey, boolean>> & Record<string, unknown>>;
+/**
+ * Example: String-based options
+ */
+export interface StringOption {
+    id: string;
+    name: string;
+    disabled?: boolean;
+}
+/**
+ * Example: Number-based options
+ */
+export interface NumberOption {
+    value: number;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Example: Mixed usage with proper type constraints
+ */
+export interface ExampleFormData {
+    categories: string[];
+    priorities: number[];
+    tags: Array<string | number>;
+}
+//# sourceMappingURL=enhanced-types.d.ts.map

package/dist/wrappers/CheckboxGroup/enhanced-types.d.ts.map

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

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

@@ -0,0 +1,3 @@
+export { CheckboxGroup } from "./CheckboxGroup";
+export type { CheckboxGroupProps, OptionObject } from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wrappers/CheckboxGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,106 @@
+import type { CheckboxProps, FormControlLabelProps, GridProps } from "@mui/material";
+import type { ReactNode } from "react";
+import type { Control, FieldError, FieldPath, FieldValues, PathValue } from "react-hook-form";
+type PrimitiveValue = string | number | boolean;
+export 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>;
+/**
+ * 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
+ */
+export interface CheckboxGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends OptionObject<TValueKey, TLabelKey, TDisabledKey> = OptionObject, 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>;
+    /**
+     * 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"
+     */
+    valueField?: TValueKey;
+    /**
+     * Key in the option object that contains the label
+     * @defaultValue "Label"
+     */
+    labelField?: 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?: (eventOrValue: PathValue<TFieldValues, TName> | {
+            target: {
+                value: PathValue<TFieldValues, TName>;
+            };
+        }, value?: PathValue<TFieldValues, TName>) => 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;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

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

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

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

@@ -0,0 +1,131 @@
+import React from "react";
+import type { DatePickerElementProps } from "./types";
+/**
+ * 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.ForwardRefExoticComponent<DatePickerElementProps<any, any, any, any> & React.RefAttributes<HTMLDivElement>>;
+export { DatePickerElement };
+export default DatePickerElement;
+//# sourceMappingURL=DatePickerElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerElement.d.ts","sourceRoot":"","sources":["../../../src/wrappers/DatePickerElement/DatePickerElement.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4HG;AACH,QAAA,MAAM,iBAAiB,mHAsCrB,CAAC;AAKH,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { DatePickerElementCoreProps } from './types';
+/**
+ * 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.ForwardRefExoticComponent<DatePickerElementCoreProps<any, any, any, any> & React.RefAttributes<HTMLDivElement>>;
+export { DatePickerElementCore };
+export default DatePickerElementCore;
+//# sourceMappingURL=DatePickerElementCore.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerElementCore.d.ts","sourceRoot":"","sources":["../../../src/wrappers/DatePickerElement/DatePickerElementCore.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAShE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,QAAA,MAAM,qBAAqB,uHAoM1B,CAAC;AAKF,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,eAAe,qBAAqB,CAAC"}

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

@@ -0,0 +1,24 @@
+/**
+ * Barrel export for DatePickerElement hooks
+ *
+ * This module provides reusable hooks for date picker functionality:
+ * - `useDatePickerValue`: Value transformation and management
+ * - `useDatePickerValidation`: Comprehensive validation handling
+ * - `useDatePickerStyles`: Theme-aware styling and visual states
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   useDatePickerValue,
+ *   useDatePickerValidation,
+ *   useDatePickerStyles
+ * } from './hooks';
+ * ```
+ */
+export { useDatePickerValue, readDatePickerValueAsDate, type UseDatePickerValueOptions, type UseDatePickerValueReturn, } from "./useDatePickerValue";
+export { useDatePickerValidation, type UseDatePickerValidationOptions, type UseDatePickerValidationReturn, } from "./useDatePickerValidation";
+export { useDatePickerStyles, type UseDatePickerStylesOptions, type UseDatePickerStylesReturn, } from "./useDatePickerStyles";
+export { default as useDatePickerValueDefault } from "./useDatePickerValue";
+export { default as useDatePickerValidationDefault } from "./useDatePickerValidation";
+export { default as useDatePickerStylesDefault } from "./useDatePickerStyles";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/wrappers/DatePickerElement/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EACL,kBAAkB,EAClB,yBAAyB,EACzB,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,GAC9B,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EACL,uBAAuB,EACvB,KAAK,8BAA8B,EACnC,KAAK,6BAA6B,GACnC,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EACL,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,GAC/B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,2BAA2B,CAAC;AAEtF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -0,0 +1,63 @@
+import type { SxProps, Theme } from "@mui/material";
+/**
+ * Options for the useDatePickerStyles hook
+ */
+export 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;
+    /** Custom styles to merge with defaults */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Return type for the useDatePickerStyles hook
+ */
+export 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
+ */
+export declare function useDatePickerStyles(options?: UseDatePickerStylesOptions): UseDatePickerStylesReturn;
+export default useDatePickerStyles;
+//# sourceMappingURL=useDatePickerStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDatePickerStyles.d.ts","sourceRoot":"","sources":["../../../../src/wrappers/DatePickerElement/hooks/useDatePickerStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIpD;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2CAA2C;IAC3C,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,oDAAoD;IACpD,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,0BAA+B,GACvC,yBAAyB,CA6I3B;AAED,eAAe,mBAAmB,CAAC"}