@am92/react-design-system 2.5.5 → 2.5.6

package/dist/x-datepicker/componentOverrides.d.ts

@@ -0,0 +1,289 @@
+/// <reference types="date-fns" />
+declare const XDatePickerComponentOverrides: {
+    MuiDatePicker: {
+        defaultProps: import("./Components").DsDatePickerProps<Date>;
+    };
+    MuiLocalizationProvider: {
+        defaultProps: {
+            adapterLocale: Locale;
+            localeText: {
+                okButtonLabel: string;
+                previousMonth?: string | undefined;
+                nextMonth?: string | undefined;
+                calendarWeekNumberHeaderLabel?: string | undefined;
+                calendarWeekNumberHeaderText?: string | undefined;
+                calendarWeekNumberAriaLabelText?: ((weekNumber: number) => string) | undefined;
+                calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
+                openPreviousView?: string | undefined;
+                openNextView?: string | undefined;
+                calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers").DateView) => string) | undefined;
+                start?: string | undefined;
+                end?: string | undefined;
+                cancelButtonLabel?: string | undefined;
+                clearButtonLabel?: string | undefined;
+                todayButtonLabel?: string | undefined;
+                clockLabelText?: ((view: import("@mui/x-date-pickers").TimeView, time: any, adapter: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                hoursClockNumberText?: ((hours: string) => string) | undefined;
+                minutesClockNumberText?: ((minutes: string) => string) | undefined;
+                secondsClockNumberText?: ((seconds: string) => string) | undefined;
+                selectViewText?: ((view: import("@mui/x-date-pickers/internals/models").TimeViewWithMeridiem) => string) | undefined;
+                openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                fieldClearLabel?: string | undefined;
+                timeTableLabel?: string | undefined;
+                dateTableLabel?: string | undefined;
+                fieldYearPlaceholder?: ((params: {
+                    digitAmount: number;
+                    format: string;
+                }) => string) | undefined;
+                fieldMonthPlaceholder?: ((params: {
+                    contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                    format: string;
+                }) => string) | undefined;
+                fieldDayPlaceholder?: ((params: {
+                    format: string;
+                }) => string) | undefined;
+                fieldWeekDayPlaceholder?: ((params: {
+                    contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                    format: string;
+                }) => string) | undefined;
+                fieldHoursPlaceholder?: ((params: {
+                    format: string;
+                }) => string) | undefined;
+                fieldMinutesPlaceholder?: ((params: {
+                    format: string;
+                }) => string) | undefined;
+                fieldSecondsPlaceholder?: ((params: {
+                    format: string;
+                }) => string) | undefined;
+                fieldMeridiemPlaceholder?: ((params: {
+                    format: string;
+                }) => string) | undefined;
+                datePickerToolbarTitle?: string | undefined;
+                timePickerToolbarTitle?: string | undefined;
+                dateTimePickerToolbarTitle?: string | undefined;
+                dateRangePickerToolbarTitle?: string | undefined;
+            };
+        };
+    };
+    MuiPickersPopper: {
+        styleOverrides: {
+            root: {
+                ' &[data-popper-placement^="right"]': {
+                    marginLeft: string;
+                };
+                ' &[data-popper-placement^="bottom"]': {
+                    marginTop: string;
+                };
+                ' &[data-popper-placement^="left"]': {
+                    marginRight: string;
+                };
+                ' &[data-popper-placement^="top"]': {
+                    marginBottom: string;
+                };
+            };
+            paper: {
+                borderRadius: string;
+                boxShadow: string;
+            };
+        };
+    };
+    MuiDateCalendar: {
+        styleOverrides: {
+            root: {
+                width: string;
+                maxHeight: string;
+                height: string;
+                paddingTop: string;
+            };
+        };
+    };
+    MuiPickersCalendarHeader: {
+        styleOverrides: {
+            root: {
+                margin: string;
+                marginBottom: string;
+                padding: string;
+            };
+            labelContainer: {
+                position: string;
+                left: string;
+                transform: string;
+                cursor: string;
+                pointerEvents: string;
+            };
+            switchViewButton: {
+                display: string;
+            };
+            label: {
+                marginRight: string;
+            };
+        };
+    };
+    MuiPickersArrowSwitcher: {
+        styleOverrides: {
+            root: {
+                width: string;
+            };
+            spacer: {
+                flexGrow: number;
+            };
+        };
+    };
+    MuiPickersDay: {
+        styleOverrides: {
+            root: {
+                width: string;
+                height: string;
+                margin: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                '&.Mui-selected': {
+                    backgroundColor: string;
+                    color: string;
+                    '&:hover': {
+                        backgroundColor: string;
+                        color: string;
+                    };
+                    '&:focus': {
+                        backgroundColor: string;
+                        color: string;
+                    };
+                };
+            };
+            today: {
+                ':not(.Mui-selected)': {
+                    background: string;
+                    borderWidth: string;
+                    borderStyle: string;
+                    borderColor: string;
+                };
+            };
+        };
+    };
+    MuiPickersMonth: {
+        styleOverrides: {
+            monthButton: {
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                borderRadius: string;
+                '&.Mui-selected': {
+                    backgroundColor: string;
+                    color: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    borderRadius: string;
+                    '&:hover': {
+                        backgroundColor: string;
+                        color: string;
+                    };
+                    '&:focus': {
+                        backgroundColor: string;
+                        color: string;
+                    };
+                };
+            };
+        };
+    };
+    MuiDayCalendar: {
+        styleOverrides: {
+            root: {
+                padding: string;
+                maxHeight: string;
+            };
+            weekDayLabel: {
+                color: string;
+                width: string;
+                height: string;
+                margin: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            weekContainer: {
+                justifyContent: string;
+            };
+            slideTransition: {
+                minHeight: string;
+            };
+            monthContainer: {
+                position: string;
+            };
+            header: {
+                marginBottom: string;
+                justifyContent: string;
+            };
+        };
+    };
+    MuiYearCalendar: {
+        styleOverrides: {
+            root: {
+                paddingLeft: string;
+                paddingRight: string;
+                marginTop: string;
+                marginBottom: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    MuiMonthCalendar: {
+        styleOverrides: {
+            root: {
+                rowGap: string;
+                paddingTop: string;
+                paddingBottom: string;
+                paddingLeft: string;
+                paddingRight: string;
+            };
+        };
+    };
+    MuiPickersYear: {
+        styleOverrides: {
+            root: {
+                flexBasis: string;
+            };
+            yearButton: {
+                width: string;
+                paddingTop: string;
+                paddingBottom: string;
+                height: string;
+                borderRadius: string;
+                marginTop: string;
+                marginBottom: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                color: string;
+                '&:hover': {
+                    backgroundColor: string;
+                };
+                '&:focus': {
+                    backgroundColor: string;
+                };
+                '&.Mui-selected': {
+                    fontWeight: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    color: string;
+                    backgroundColor: string;
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                    '&:focus': {
+                        backgroundColor: string;
+                    };
+                };
+            };
+        };
+    };
+};
+export default XDatePickerComponentOverrides;

package/dist/x-datepicker/componentOverrides.js

@@ -0,0 +1,5 @@
+import { DsDatePickerOverrides } from './Components';
+const XDatePickerComponentOverrides = {
+    ...DsDatePickerOverrides
+};
+export default XDatePickerComponentOverrides;

package/dist/x-datepicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Components';
+export * from './Locale';

package/dist/x-datepicker/index.js

@@ -0,0 +1,2 @@
+export * from './Components';
+export * from './Locale';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@am92/react-design-system",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "description": "ReactJS Design System using Material UI",
   "sideEffects": false,
   "types": "dist/index.d.ts",

package/dist/Components/DsDatePicker/DateCalenderHeader.d.ts

@@ -1,7 +0,0 @@
-import React, { PureComponent } from 'react';
-import { DateView, PickersCalendarHeaderProps } from '@mui/x-date-pickers';
-export declare class DateCalenderHeader extends PureComponent<PickersCalendarHeaderProps<Date>> {
-    handleMonthChange: (direction: 'left' | 'right', numberOfMonths: 1 | -1 | 12 | -12) => () => void;
-    handleViewShow: (view: DateView) => () => void;
-    render(): React.ReactNode;
-}

package/dist/Components/DsDatePicker/DateCalenderHeader.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
-import { format, addMonths } from 'date-fns';
-import { DsButtonBase } from '../DsButtonBase';
-import { DsIconButton } from '../DsIconButton';
-import { DsRemixIcon } from '../DsRemixIcon';
-import { DsStack } from '../DsStack';
-import { DsTypography } from '../DsTypography';
-export class DateCalenderHeader extends PureComponent {
-    handleMonthChange = (direction, numberOfMonths) => () => {
-        const { currentMonth, onMonthChange } = this.props;
-        onMonthChange(addMonths(currentMonth, numberOfMonths), direction);
-    };
-    handleViewShow = (view) => () => {
-        const { onViewChange } = this.props;
-        onViewChange && onViewChange(view);
-    };
-    render() {
-        const { currentMonth, onMonthChange, view } = this.props;
-        const isYearNavigationDisabled = view === 'month';
-        const isMonthNavigationDisabled = view === 'year';
-        return (_jsxs(DsStack, { direction: "row", justifyContent: "space-between", 
-            // spacing='var(--ds-spacing-frostbite)'
-            sx: { p: 'var(--ds-spacing-frostbite)' }, children: [_jsxs(DsStack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: "var(--ds-spacing-frostbite)", children: [_jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: this.handleMonthChange('left', -1), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-left-line" }) }), _jsxs(DsButtonBase, { disabled: isMonthNavigationDisabled, onClick: this.handleViewShow('month'), children: [_jsx(DsTypography, { variant: "bodyBoldSmall", color: isMonthNavigationDisabled ? 'text.disabled' : 'text.primary', children: format(currentMonth, 'MMM') }), _jsx(DsRemixIcon, { className: "ri-arrow-drop-down-fill", color: isMonthNavigationDisabled ? 'iconDisabled' : 'iconDefault', sx: { mr: 'var(--ds-spacing-quickFreeze)' } })] }), _jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: this.handleMonthChange('right', 1), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-right-line" }) })] }), _jsxs(DsStack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: "var(--ds-spacing-frostbite)", children: [_jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: this.handleMonthChange('left', -12), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-left-line" }) }), _jsxs(DsButtonBase, { disabled: isYearNavigationDisabled, onClick: this.handleViewShow('year'), children: [_jsx(DsTypography, { variant: "bodyBoldSmall", color: isYearNavigationDisabled ? 'text.disabled' : 'text.primary', children: format(currentMonth, 'yyyy') }), _jsx(DsRemixIcon, { className: "ri-arrow-drop-down-fill", color: isYearNavigationDisabled ? 'iconDisabled' : 'iconDefault', sx: { mr: 'var(--ds-spacing-quickFreeze)' } })] }), _jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: this.handleMonthChange('right', 12), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-right-line" }) })] })] }));
-    }
-}

package/dist/Components/DsDatePicker/DatePickerTextField.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { DsTextField } from '../DsTextField';
-export const DatePickerTextField = React.forwardRef((props, inputRef) => {
-    const { setOpen, ref, InputProps, focused, ownerState, ...other } = props;
-    const { readOnly } = InputProps || {};
-    return _jsx(DsTextField, { readOnly: readOnly, ...other });
-});

package/dist/Components/DsDatePicker/DefaultActionBar.d.ts

@@ -1,7 +0,0 @@
-import React, { PureComponent } from 'react';
-import { PickersActionBarProps } from '@mui/x-date-pickers';
-export declare class DefaultActionBar extends PureComponent<PickersActionBarProps & {
-    ownerState?: any;
-}> {
-    render(): React.ReactNode;
-}

package/dist/Components/DsDatePicker/DefaultActionBar.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
-import { DsButton } from '../DsButton';
-import { DsButtonGroup } from '../DsButtonGroup';
-export class DefaultActionBar extends PureComponent {
-    render() {
-        const { onAccept, onClear, ownerState, actions } = this.props;
-        const { value } = ownerState || {};
-        if (!actions?.length) {
-            return;
-        }
-        const isClearVisible = actions.includes('clear');
-        const isConfirmVisible = actions.includes('accept');
-        return (_jsxs(DsButtonGroup, { sx: {
-                gridArea: '3 / 1 / auto / 4',
-                backgroundColor: 'var(--ds-colour-surfaceSecondary)',
-                px: 'var(--ds-spacing-mild)',
-                borderTop: '1px solid var(--ds-colour-strokeDefault)',
-                borderRadius: '0px 0px 16px 16px '
-            }, justifyContent: "space-between", size: "medium", children: [isClearVisible && (_jsx(DsButton, { sx: {
-                        py: 'var(--ds-spacing-glacial)',
-                        px: 'var(--ds-spacing-pleasant)'
-                    }, variant: "text", size: "medium", color: "secondary", onClick: onClear, disabled: !value, children: "Clear" })), isConfirmVisible && (_jsx(DsButton, { sx: {
-                        py: 'var(--ds-spacing-glacial)',
-                        px: 'var(--ds-spacing-pleasant)'
-                    }, variant: "text", size: "medium", color: "secondary", onClick: onAccept, disabled: !value, children: "Confrim" }))] }));
-    }
-}

package/dist/Components/DsDatePicker/DefaultToolbar.d.ts

@@ -1,7 +0,0 @@
-import React, { Component } from 'react';
-import { DatePickerToolbarProps } from '@mui/x-date-pickers';
-export declare class DefaultToolbar extends Component<DatePickerToolbarProps<Date> & {
-    ownerState?: any;
-}> {
-    render(): React.ReactNode;
-}

package/dist/Components/DsDatePicker/DefaultToolbar.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Component } from 'react';
-import { DsIconButton } from '../DsIconButton';
-import { DsRemixIcon } from '../DsRemixIcon';
-import { DsStack } from '../DsStack';
-import { DsTypography } from '../DsTypography';
-export class DefaultToolbar extends Component {
-    render() {
-        const { value, ownerState } = this.props;
-        const { onCancel } = ownerState;
-        const formatOptions = {
-            day: 'numeric',
-            month: 'short',
-            year: 'numeric'
-        };
-        const currentDateAndDay = value && value.toLocaleDateString('en-GB', formatOptions);
-        return (_jsx(DsStack, { sx: {
-                backgroundColor: 'var(--ds-colour-surfaceSecondary)',
-                padding: 'var(--ds-spacing-cool) var(--ds-spacing-bitterCold)',
-                gridArea: '1 / 2 / auto / 4',
-                borderRadius: '16px 16px 0px 0px',
-                borderBottom: '1px solid var(--ds-colour-strokeDefault)'
-            }, children: _jsxs(DsTypography, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between'
-                }, variant: "headingBoldExtraSmall", children: [value ? `Selected date: ${currentDateAndDay}` : 'Select a date', _jsx(DsIconButton, { onClick: onCancel, children: _jsx(DsRemixIcon, { className: "ri-close-line" }) })] }) }));
-    }
-}

package/dist/Components/DsDatePicker/DsDatePicker.Component.d.ts

@@ -1,16 +0,0 @@
-import React, { PureComponent } from 'react';
-import { DateValidationError, DateView } from '@mui/x-date-pickers';
-import { DsDatePickerProps, DsDatePickerState } from './DsDatePicker.Types';
-import { PickerChangeHandlerContext } from '@mui/x-date-pickers/models';
-export declare class DsDatePicker extends PureComponent<DsDatePickerProps<Date>, DsDatePickerState> {
-    static defaultProps: DsDatePickerProps<Date>;
-    state: DsDatePickerState;
-    ref: React.RefObject<HTMLInputElement>;
-    setOpen: (open: boolean) => void;
-    onOpen: () => void;
-    onClose: () => void;
-    handleChange: (value: Date | null, context: PickerChangeHandlerContext<DateValidationError>) => void;
-    handleError: (error: DateValidationError, value: Date | null) => void;
-    handleViewChange: (value: DateView) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}

package/dist/Components/DsDatePicker/DsDatePicker.Component.js

@@ -1,94 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { PureComponent } from 'react';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker } from '@mui/x-date-pickers';
-import { DefaultActionBar } from './DefaultActionBar';
-import { DefaultToolbar } from './DefaultToolbar';
-import { DsDatePickerDefaultProps, DsDatePickerDefaultState } from './DsDatePicker.Types';
-import { DateCalenderHeader } from './DateCalenderHeader';
-import { DsIconButton } from '../DsIconButton';
-import { DsInputAdornment } from '../DsInputAdornment';
-import { DsRemixIcon } from '../DsRemixIcon';
-import { DatePickerTextField } from './DatePickerTextField';
-import { getDateFromValue, getErrorFromErrorMap, getValueTypeFromValue } from './utils';
-export class DsDatePicker extends PureComponent {
-    static defaultProps = DsDatePickerDefaultProps;
-    state = DsDatePickerDefaultState;
-    ref = React.createRef();
-    setOpen = (open) => this.setState({ open });
-    onOpen = () => this.setOpen(true);
-    onClose = () => this.setOpen(false);
-    handleChange = (value, context) => {
-        const { onChange, onError, errorMap, name, valueType, format: formatType, views } = this.props;
-        if (!views)
-            this.setState({ views: ['day'] });
-        if (context.validationError && typeof onError === 'function') {
-            const error = getErrorFromErrorMap(errorMap, context.validationError, value);
-            onError(name, error, context.validationError, getValueTypeFromValue(value, valueType, formatType));
-            return;
-        }
-        if (typeof onChange === 'function' && formatType) {
-            onChange(name, getValueTypeFromValue(value, valueType, formatType));
-        }
-    };
-    handleError = (error, value) => {
-        const { onError, errorMap, name } = this.props;
-        if (error && typeof onError === 'function') {
-            const errorMsg = getErrorFromErrorMap(errorMap, error, value);
-            onError(name, errorMsg, error, value);
-        }
-    };
-    handleViewChange = (value) => {
-        this.setState({ views: [value, 'day'] });
-    };
-    render() {
-        const { onChange, onError, defaultValue, value, valueType, format, onViewChange, views: propViews, disabled, readOnly = false, required, fullWidth, onBlur, onFocus, label, InputLabelProps, labelSupportText, helperText, HelperTextProps, FormControlProps, success, error, ...restProps } = this.props;
-        const { open, views } = this.state;
-        return (_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DatePicker, { ...restProps, slots: {
-                    actionBar: DefaultActionBar,
-                    toolbar: DefaultToolbar,
-                    textField: DatePickerTextField,
-                    calendarHeader: DateCalenderHeader,
-                    ...this.props.slots
-                }, slotProps: {
-                    ...this.props.slotProps,
-                    day: {
-                        //commented to show current day border highlight
-                        // disableHighlightToday: true,
-                        ...this.props.slotProps?.day
-                    },
-                    textField: {
-                        required,
-                        fullWidth,
-                        onBlur,
-                        onFocus,
-                        label,
-                        InputLabelProps,
-                        labelSupportText,
-                        helperText,
-                        HelperTextProps,
-                        FormControlProps,
-                        success,
-                        error,
-                        readOnly,
-                        ...this.props.slotProps?.textField,
-                        endAdornment: (_jsx(DsInputAdornment, { position: "end", disablePointerEvents: disabled, children: _jsx(DsIconButton, { disabled: disabled, onClick: this.onOpen, children: _jsx(DsRemixIcon, { className: "ri-calendar-line", fontSize: "bitterCold" }) }) }))
-                    },
-                    actionBar: ownerState => ({
-                        actions: ownerState.view === 'day' ? ['clear', 'accept'] : [],
-                        ...this.props.slotProps?.actionBar
-                    }),
-                    popper: {
-                        anchorEl: this.ref.current,
-                        //style to unset fixed width
-                        sx: {
-                            '.MuiMonthCalendar-root': {
-                                width: '100%'
-                            }
-                        },
-                        ...this.props.slotProps?.popper
-                    }
-                }, readOnly: readOnly, disabled: disabled, format: format, open: open, reduceAnimations: true, onOpen: this.onOpen, onClose: this.onClose, onChange: this.handleChange, onViewChange: this.handleViewChange, onError: this.handleError, views: propViews || views, value: getDateFromValue(value, valueType, format), defaultValue: getDateFromValue(defaultValue, valueType, format), inputRef: this.ref }) }));
-    }
-}

package/dist/Components/DsDatePicker/DsDatePicker.Types.d.ts

@@ -1,20 +0,0 @@
-import { DatePickerProps, DateValidationError, DateView } from '@mui/x-date-pickers';
-import { DsTextFieldProps } from '../DsTextField';
-export type TErrorMapKeys = Exclude<DateValidationError, null>;
-export type TValue = string | Date | undefined | null;
-export type TValueType = 'date' | 'formattedValue' | 'ISO' | undefined;
-export interface DsDatePickerProps<TDate> extends Omit<DatePickerProps<TDate>, 'open' | 'onOpen' | 'onClose' | 'yearsPerRow' | 'monthsPerRow' | 'onChange' | 'onError' | 'value' | 'defaultValue'>, Pick<DsTextFieldProps, 'required' | 'fullWidth' | 'label' | 'InputLabelProps' | 'labelSupportText' | 'helperText' | 'HelperTextProps' | 'FormControlProps' | 'success' | 'error' | 'onFocus' | 'onBlur'> {
-    onChange?: (name: string, value: TValue) => void;
-    onError?: (name: string, error: string, errorCode: DateValidationError, value: TValue | null) => void;
-    name: string;
-    value?: TValue;
-    defaultValue?: TValue;
-    valueType?: TValueType;
-    errorMap?: Partial<Record<TErrorMapKeys, string>>;
-}
-export declare const DsDatePickerDefaultProps: DsDatePickerProps<Date>;
-export interface DsDatePickerState {
-    open: boolean;
-    views: readonly DateView[];
-}
-export declare const DsDatePickerDefaultState: DsDatePickerState;