pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.51

package/dist/Components/DatePicker/DatePickerProps.d.ts

@@ -1,50 +1,124 @@
+import type { DayStates, RenderDayContent } from "./dayStates";
+/** Governs which UI renders inside the popover — date grid, time selects, or both; inferred from dateFormat when omitted. */
 export type PickerType = "date" | "time" | "datetime";
+/** Fields shared by both picker variants — combined via `&` with Single/RangeDatePickerProps below, never used on its own. */
 export type BaseDatePickerProps = {
     id?: string;
     name?: string;
     label?: string;
+    /** Shows the label asterisk and sets native `required` via FormControl. */
     isRequired?: boolean;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
+    /** Marks the field invalid (error border + `aria-invalid`) and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Shown while `error` is true. Omitting it renders no message and still hides `helperText`. */
     errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
     helperText?: string;
+    /** Field hint text; defaults to one derived from `dateFormat`. */
+    placeholder?: string;
+    /** @deprecated Use `placeholder` — renamed to match every other field; `placeholder` wins when both are set. */
     placeholderText?: string;
+    /** date-fns format; defaults to `dd/MM/yyyy` (`HH:mm` for the time-only picker). Time tokens add time inputs. */
     dateFormat?: string;
+    /** Pass explicitly: inference reads `MM` as minutes, so bare `dd/MM/yyyy` also shows time selects. Ignored when `isRange`. */
     pickerType?: PickerType;
+    /** Earlier days are disabled in the calendar and rejected when typed. */
     minDate?: Date;
+    /** Later days are disabled in the calendar and rejected when typed. */
     maxDate?: Date;
+    /** Blocks every day after today; today stays selectable. */
     disableFutureDates?: boolean;
+    /** Blocks every day before today; today stays selectable. */
     disablePastDates?: boolean;
+    /** Defaults to `"off"` so browser suggestions don't cover the calendar; not read by the time-only picker. */
     autoComplete?: string;
+    /** Disables the field and its calendar/clock trigger. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field; `isDisabled` wins when both are set. */
     disabled?: boolean;
+    /** Width of the whole field; defaults to `"100%"`. */
     width?: string | number;
+    /** Blocks today in the calendar and in typed input; the single picker preselects tomorrow instead. */
     disableToday?: boolean;
-    /** Chakra `Input` / `InputGroup` size for the field and chevron (calendar/clock) scale. */
+    /** Control-scale height: xs 28 · sm 35 · md 40 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
     size?: "xs" | "sm" | "md" | "lg";
 };
-export type SingleDatePickerProps = BaseDatePickerProps & {
+/** Single-date variant, Date API (default) — `isRange` must be false or omitted; this is the discriminant the DatePickerProps union switches on. */
+export type SingleDatePickerDateProps = BaseDatePickerProps & {
     isRange?: false;
+    /** Omit, or set `"date"`, for the default Date-object API; `"iso"` switches value/onChange to ISO strings. */
+    valueFormat?: "date";
+    /** Controlled value; `value` wins when both are set. */
     selectedDate?: Date | null;
     /** Alias for `selectedDate` (legacy / form libraries). */
     value?: Date | null;
+    /** Fires on day click in date-only mode; with time inputs, only on Apply, Clear or closing the popover. */
     onChange: (date: Date | null) => void;
 };
+/** Single-date variant, string API — `yyyy-MM-dd` / `HH:mm` / full local ISO datetime by pickerType; an unparsable incoming string reads as `null`. */
+export type SingleDatePickerStringProps = BaseDatePickerProps & {
+    isRange?: false;
+    /** `"iso"` opts into the string API for this instance. */
+    valueFormat: "iso";
+    /** Controlled ISO value; `value` wins when both are set. */
+    selectedDate?: string | null;
+    /** Alias for `selectedDate` (legacy / form libraries). */
+    value?: string | null;
+    /** Fires with an ISO string (or `null`) on the same triggers as the Date API. */
+    onChange: (value: string | null) => void;
+};
+/** Discriminated on `valueFormat` — `"iso"` narrows to the string-value overload, everything else to the Date overload. */
+export type SingleDatePickerProps = SingleDatePickerDateProps | SingleDatePickerStringProps;
+export declare const isStringValueProps: (props: SingleDatePickerProps) => props is SingleDatePickerStringProps;
+/** A date range's two endpoints, each independently nullable — used for both the controlled value and onChange's payload. */
 export type RangeDate = {
     from: Date | null;
     to: Date | null;
 };
+/** Range variant — `isRange` must be true; adds dayStates/renderDayContent day-marking on top of the shared base fields. */
 export type RangeDatePickerProps = BaseDatePickerProps & {
     isRange: true;
+    /** Controlled range; `value` wins when both are set. */
     selectedDate?: RangeDate | null;
     /** Alias for `selectedDate` (legacy / form libraries). */
     value?: RangeDate | null;
+    /** Only fires via Apply or Escape once both ends are picked — clicking outside the popover discards the pending range instead of committing it. */
     onChange: (range: RangeDate | null) => void;
+    /**
+     * Marks individual days with zero or more state keys — `["weekly-off"]`, `["Onam", "holiday"]`,
+     * `["excluded"]`. The keys in `DAY_STATE_KEYS` (`weekly-off`, `holiday`, `optional-holiday`,
+     * `excluded`, `disabled`) carry built-in, token-driven styling; any other key is announced to a
+     * screen reader but left unstyled, which is how a day gets named without a second prop.
+     *
+     * Marking is not disabling: a marked day stays selectable unless the caller also returns
+     * `"disabled"`, or blocks the day with `minDate`/`maxDate`/`disablePastDates`/`disableFutureDates`.
+     *
+     * Supplying this also spells each day's accessible name out in full — "16 September 2025, Onam,
+     * holiday" instead of "16". Called once per rendered day (42 per month), so keep it cheap and pure.
+     */
+    dayStates?: DayStates;
+    /**
+     * Custom content rendered inside the day cell, centred under the day number — a dot, a short
+     * label, a tooltip trigger. Receives that day's resolved state keys. Returning a node replaces
+     * the built-in marker dot for that day; the number, the accessible name and hit target are
+     * unchanged (the overlay does not take pointer events).
+     */
+    renderDayContent?: RenderDayContent;
 };
+/** Discriminated union consumed by ThemeDatePicker (exported as DatePicker) — `isRange` selects Single vs Range at the type level. */
 export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
+/** Props for the Hour/Minute/AM-PM trio; `dateFormat` only toggles 12h vs 24h display — seconds aren't supported. */
 export type TimePickerProps = {
     date: Date;
     onChange: (date: Date) => void;
+    /** Only picks 12h vs 24h: an `h` followed later by `a` (e.g. `hh:mm a`) means 12h with AM/PM. */
     dateFormat: string;
+    /** Disables the hour/minute/AM-PM selects. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field; `isDisabled` wins when both are set. */
     disabled?: boolean;
 };

package/dist/Components/DatePicker/DatePickerProps.js

@@ -1,2 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStringValueProps = void 0;
+const isStringValueProps = (props) => props.valueFormat === "iso";
+exports.isStringValueProps = isStringValueProps;

package/dist/Components/DatePicker/RangeDatePicker.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { RangeDatePickerProps } from "./DatePickerProps";
+/** Two-endpoint range field; `onChange` fires only via Apply/Escape, never on a bare day click or on outside-click close. */
 export declare const RangeDatePicker: React.FC<RangeDatePickerProps>;
 export default RangeDatePicker;

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -11,26 +11,34 @@ const date_fns_1 = require("date-fns");
 const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const FormLabel_1 = require("../Common/FormLabel");
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const pickerField_1 = require("./pickerField");
 const CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
 const TimePickerInput_1 = require("./TimePickerInput");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 // helper to set time on date while preserving date part
 const setTimeFrom = (base, time) => {
     const b = base ? new Date(base) : new Date();
     return new Date(b.getFullYear(), b.getMonth(), b.getDate(), time.getHours(), time.getMinutes(), time.getSeconds(), 0);
 };
+/** Two-endpoint range field; `onChange` fires only via Apply/Escape, never on a bare day click or on outside-click close. */
 const RangeDatePicker = (props) => {
     var _a, _b, _c, _d;
-    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "dd/MM/yyyy", minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", width = "100%", disableToday = false, size = controlSizes_1.DEFAULT_CONTROL_SIZE, dayStates, renderDayContent, } = props;
+    const { isDisabled: disabled, placeholder: placeholderText } = (0, pickerField_1.resolvePickerAliases)(props);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const sizeKey = typeof size === "string" ? size : "md";
+    const sizeKey = typeof size === "string" ? size : controlSizes_1.DEFAULT_CONTROL_SIZE;
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
     const calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     const calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const calendarLabel = label !== null && label !== void 0 ? label : "Choose date range";
     const inputRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
     const popoverRef = (0, react_1.useRef)(null);
@@ -97,8 +105,20 @@ const RangeDatePicker = (props) => {
         onClose();
     };
     const handleOpen = () => {
+        requestExclusiveOpen();
         onOpen();
     };
+    const handleInputKeyDown = (e) => {
+        if (e.key === "Escape" && isOpen) {
+            e.preventDefault();
+            onClose();
+            return;
+        }
+        if (!isOpen && (e.key === "ArrowDown" || e.key === "Enter")) {
+            e.preventDefault();
+            handleOpen();
+        }
+    };
     const handleDaySelect = (day) => {
         const updated = new Date(day);
         if (selectingStart) {
@@ -143,12 +163,12 @@ const RangeDatePicker = (props) => {
             const insideTrigger = !!triggerEl && triggerEl.contains(target);
             const insidePopover = !!popoverEl && popoverEl.contains(target);
             if (!insideInput && !insideTrigger && !insidePopover) {
-                onClose();
+                requestClose();
             }
         };
         document.addEventListener("mousedown", handleMouseDownOutside, true);
         return () => document.removeEventListener("mousedown", handleMouseDownOutside, true);
-    }, [isOpen, onClose, tempRangeStart, tempRangeEnd]);
+    }, [isOpen, onClose, tempRangeStart, tempRangeEnd]); // eslint-disable-line react-hooks/exhaustive-deps
     const handleClear = () => {
         setTempRangeStart(null);
         setTempRangeEnd(null);
@@ -165,49 +185,50 @@ const RangeDatePicker = (props) => {
             return `${(0, date_fns_1.format)(tempRangeStart, dateFormat)} -`;
         return "";
     }, [inputValue, tempRangeStart, tempRangeEnd, dateFormat]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, autoComplete: autoComplete, onFocus: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, onKeyDown: handleInputKeyDown, onFocus: () => {
                                             if (!isOpen)
                                                 handleOpen();
                                         }, onClick: () => {
                                             if (!isOpen)
                                                 handleOpen();
-                                        }, borderColor: error ? theme.colors.semanticText.error : undefined, _focus: {
-                                            borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                                            boxShadow: error
-                                                ? `0 0 0 1px ${theme.colors.semanticText.error}`
-                                                : `0 0 0 1px ${theme.colors.primary[500]}`,
-                                        }, _hover: {
-                                            borderColor: error ? theme.colors.semanticText.error : undefined,
-                                        }, cursor: "pointer" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: () => (isOpen ? onClose() : handleOpen()), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
+                                        }, sx: (0, pickerField_1.readOnlyTriggerSx)(theme.colors), cursor: "pointer" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
+                                                e.stopPropagation();
+                                                if (!isOpen) {
+                                                    handleOpen();
+                                                }
+                                                else {
+                                                    onClose();
+                                                }
+                                            }, icon: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
                                             const [from, to] = p.getRange();
                                             applyPreset(from, to);
-                                        }, children: p.label }, p.label))) }), (0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }), formatHasTime && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: startTimeBaseDate, onChange: (updated) => {
+                                        }, children: p.label }, p.label))) }), (0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect, dayStates: dayStates, renderDayContent: renderDayContent }), formatHasTime && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: startTimeBaseDate, onChange: (updated) => {
                                                         if (!tempRangeStart) {
                                                             setTempRangeStart(updated);
                                                             return;
                                                         }
                                                         const withStartDate = new Date(tempRangeStart.getFullYear(), tempRangeStart.getMonth(), tempRangeStart.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
                                                         setTempRangeStart(withStartDate);
-                                                    }, dateFormat: dateFormat, disabled: disabled || !tempRangeStart })) : ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempRangeStart, onChange: (t) => {
+                                                    }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeStart })) : ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempRangeStart, onChange: (t) => {
                                                         if (!t) {
                                                             setTempRangeStart(null);
                                                             return;
                                                         }
                                                         setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart, size: sizeKey }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: endTimeBaseDate, onChange: (updated) => {
+                                                    }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeStart, size: sizeKey }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: endTimeBaseDate, onChange: (updated) => {
                                                         if (!tempRangeEnd) {
                                                             setTempRangeEnd(updated);
                                                             return;
                                                         }
                                                         const withEndDate = new Date(tempRangeEnd.getFullYear(), tempRangeEnd.getMonth(), tempRangeEnd.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
                                                         setTempRangeEnd(withEndDate);
-                                                    }, dateFormat: dateFormat, disabled: disabled || !tempRangeEnd })) : ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempRangeEnd, onChange: (t) => {
+                                                    }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeEnd })) : ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempRangeEnd, onChange: (t) => {
                                                         if (!t) {
                                                             setTempRangeEnd(null);
                                                             return;
                                                         }
                                                         setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+                                                    }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 exports.RangeDatePicker = RangeDatePicker;
 exports.default = exports.RangeDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
-import { SingleDatePickerProps } from "./DatePickerProps";
-export declare const SingleDatePicker: React.FC<SingleDatePickerProps>;
+import { SingleDatePickerDateProps, SingleDatePickerStringProps } from "./DatePickerProps";
+/** Date/datetime field with typed-mask input + calendar popover. Import via `DatePicker` (ThemeDatePicker) — direct import bypasses its isRange/pickerType routing. */
+export declare function SingleDatePicker(props: SingleDatePickerDateProps): React.ReactElement;
+/** `valueFormat="iso"` overload — value/onChange carry ISO strings instead of Date objects. */
+export declare function SingleDatePicker(props: SingleDatePickerStringProps): React.ReactElement;
 export default SingleDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SingleDatePicker = void 0;
+exports.SingleDatePicker = SingleDatePicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
@@ -11,13 +11,18 @@ const date_fns_1 = require("date-fns");
 const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
+const DatePickerProps_1 = require("./DatePickerProps");
+const valueFormat_1 = require("./valueFormat");
 const FormLabel_1 = require("../Common/FormLabel");
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const pickerField_1 = require("./pickerField");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
 const TimePickerInput_1 = require("./TimePickerInput");
 const CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const TOKEN_CHARS = /[dMyHhmsaAm]/;
 const getPlaceholderForToken = (token, length) => {
     const lower = token.toLowerCase();
@@ -111,16 +116,6 @@ const buildTimeSegments = (format) => {
     }
     return segments;
 };
-const inferPickerTypeFromFormat = (formatStr) => {
-    const lower = formatStr.toLowerCase();
-    const hasTime = lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
-    const hasDate = lower.includes("d") && lower.includes("m") && lower.includes("y");
-    if (hasTime && hasDate)
-        return "datetime";
-    if (hasTime)
-        return "time";
-    return "date";
-};
 const formatToPlaceholder = (format) => format;
 const filterNumericInput = (value, format) => {
     const separators = format.match(/[^dDmMyYhHsSaA]/g) || [];
@@ -224,18 +219,22 @@ const normalizeTimeBuffer = (tokenChar, rawBuffer, segmentLength, is12Hour) => {
     }
     return { value: buf, completed: buf.length >= segmentLength };
 };
-const SingleDatePicker = (props) => {
-    var _a, _b;
-    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
+function SingleDatePicker(props) {
+    var _a, _b, _c, _d;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", width = "100%", disableToday = false, size = controlSizes_1.DEFAULT_CONTROL_SIZE, } = props;
+    const { isDisabled: disabled, placeholder: placeholderText } = (0, pickerField_1.resolvePickerAliases)(props);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const sizeKey = typeof size === "string" ? size : "md";
+    const sizeKey = typeof size === "string" ? size : controlSizes_1.DEFAULT_CONTROL_SIZE;
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
     const calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     const calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const calendarLabel = label !== null && label !== void 0 ? label : "Choose date";
     const inputRef = (0, react_1.useRef)(null);
     const popoverRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
-    const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
+    const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : (0, pickerField_1.inferPickerTypeFromFormat)(dateFormat);
     const resolvedDateFormat = getFormatForPickerType(pickerType, dateFormat);
     const enableMask = resolvedPickerType !== "time";
     const basePlaceholder = (0, react_1.useMemo)(() => formatToPlaceholder(dateFormat), [dateFormat]);
@@ -285,10 +284,13 @@ const SingleDatePicker = (props) => {
     const tomorrow = (0, date_fns_1.addDays)(today, 1);
     const showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
     const showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
-    const formatHasTime = resolvedDateFormat.toLowerCase().includes("hh") ||
-        resolvedDateFormat.toLowerCase().includes("mm") ||
-        resolvedDateFormat.toLowerCase().includes("ss");
-    const selectedDate = (_b = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate)) !== null && _b !== void 0 ? _b : null;
+    const resolvedFormatHasTime = (0, pickerField_1.formatHasTime)(resolvedDateFormat);
+    const rawIsoValue = (0, DatePickerProps_1.isStringValueProps)(props) ? (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate) !== null && _b !== void 0 ? _b : null : null;
+    // Memoized: parseIsoValue would otherwise return a new Date identity every render, looping the effect below.
+    const parsedIsoValue = (0, react_1.useMemo)(() => (rawIsoValue ? (0, valueFormat_1.parseIsoValue)(rawIsoValue, resolvedPickerType) : null), [rawIsoValue, resolvedPickerType]);
+    const selectedDate = (0, DatePickerProps_1.isStringValueProps)(props)
+        ? parsedIsoValue
+        : (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.selectedDate) !== null && _d !== void 0 ? _d : null;
     const [currentMonth, setCurrentMonth] = (0, react_1.useState)(selectedDate
         ? disableToday && (0, date_fns_1.isSameDay)(selectedDate, today)
             ? tomorrow
@@ -311,7 +313,12 @@ const SingleDatePicker = (props) => {
         if (didCommitRef.current)
             return;
         didCommitRef.current = true;
-        props.onChange(value);
+        if ((0, DatePickerProps_1.isStringValueProps)(props)) {
+            props.onChange(value ? (0, valueFormat_1.formatIsoValue)(value, resolvedPickerType) : null);
+        }
+        else {
+            props.onChange(value);
+        }
     };
     const finalize = (overrideValue) => {
         if (enableMask) {
@@ -393,6 +400,7 @@ const SingleDatePicker = (props) => {
         }
     }, [inputValue, tokenSegments, enableMask, isMaskActive]);
     const handleOpen = () => {
+        requestExclusiveOpen();
         if (!selectedDate && showDate) {
             setTempDate(disableToday ? tomorrow : new Date());
         }
@@ -419,7 +427,7 @@ const SingleDatePicker = (props) => {
             const parsed = (0, date_fns_1.parse)(value, resolvedDateFormat, new Date());
             if ((0, date_fns_1.isValid)(parsed)) {
                 let finalDate = parsed;
-                if (showTime && tempDate && !formatHasTime) {
+                if (showTime && tempDate && !resolvedFormatHasTime) {
                     finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
                 }
                 setTempDate(finalDate);
@@ -435,11 +443,7 @@ const SingleDatePicker = (props) => {
         if (enableMask && isMaskActive) {
             setIsMaskActive(false);
             segmentInputBufferRef.current = "";
-            // isMaskComplete() can't recognise text month tokens (e.g. "MMM"), so a
-            // valid, externally-set value like "Jun 10, 2026" is judged "incomplete"
-            // and was being cleared on blur (data loss). Only clear when the value is
-            // empty or genuinely can't be parsed into a valid date; otherwise fall
-            // through and let the parse path below commit it.
+            // NOTE: isMaskComplete() can't read text month tokens, so only clear when the value truly can't be parsed.
             const hasParsableDate = parseValidatedValue(value) !== null;
             if (!value || !value.trim() || (!isMaskComplete(value) && !hasParsableDate)) {
                 setInputValue("");
@@ -636,15 +640,12 @@ const SingleDatePicker = (props) => {
         if (disableToday && (0, date_fns_1.isSameDay)(parsed, today))
             return null;
         let finalDate = parsed;
-        if (showTime && tempDate && !formatHasTime) {
+        if (showTime && tempDate && !resolvedFormatHasTime) {
             finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
         }
         return finalDate;
     };
-    // Returns the validated Date for a fully-typed value, or null when the value
-    // is empty / not a parseable, in-range date. Used by blur handling so an
-    // already-valid value is never discarded just because the mask-completeness
-    // heuristic doesn't understand text month tokens.
+    // Validated Date for a fully-typed value, or null — lets blur handling keep an already-valid value.
     const parseValidatedValue = (value) => {
         if (!value || !value.trim())
             return null;
@@ -686,9 +687,7 @@ const SingleDatePicker = (props) => {
             return;
         setIsMaskActive(true);
         setIsTyping(true);
-        // Never blank an already-valid value on focus. The mask placeholder is built
-        // with padded tokens (e.g. "MMM dd, yyyy"), so a valid but shorter value such
-        // as "Jun 5, 2026" would otherwise be replaced by the empty mask and lost.
+        // NOTE: never blank an already-valid shorter value on focus — the padded mask placeholder would replace it.
         const hasValidValue = parseValidatedValue(inputValue) !== null;
         if (!hasValidValue && (!inputValue || inputValue.length !== maskPlaceholder.length)) {
             setInputValue(maskPlaceholder);
@@ -783,14 +782,28 @@ const SingleDatePicker = (props) => {
         }
         if (key === "Escape") {
             e.preventDefault();
-            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+            if (isOpen) {
+                onClose();
+            }
+            else {
+                (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+            }
             return;
         }
         if (key === "Enter") {
             e.preventDefault();
+            if (!isOpen && showDate) {
+                handleOpen();
+                return;
+            }
             handleInputBlur();
             return;
         }
+        if (key === "ArrowDown" && !isOpen && showDate) {
+            e.preventDefault();
+            handleOpen();
+            return;
+        }
         if (key === "Backspace" || key === "Delete") {
             e.preventDefault();
             const baseValue = ensureMaskValue();
@@ -932,48 +945,53 @@ const SingleDatePicker = (props) => {
     };
     const handleInputFocusMask = enableMask ? handleInputFocus : undefined;
     const handleInputClickMask = enableMask ? handleInputClick : undefined;
-    const handleKeyDownMask = enableMask ? handleKeyDown : undefined;
     const handlePasteMask = enableMask ? handlePaste : undefined;
+    const handleInputKeyDown = (e) => {
+        if (!enableMask) {
+            if (e.key === "Escape" && isOpen) {
+                e.preventDefault();
+                onClose();
+                return;
+            }
+            if (!isOpen && showDate && (e.key === "ArrowDown" || e.key === "Enter")) {
+                e.preventDefault();
+                handleOpen();
+                return;
+            }
+            return;
+        }
+        handleKeyDown(e);
+    };
     const displayValue = isTyping
         ? inputValue
         : tempDate
             ? (0, date_fns_1.format)(tempDate, resolvedDateFormat)
             : "";
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isDisabled: disabled, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: () => {
                     if (suppressOnCloseFinalizeRef.current) {
                         suppressOnCloseFinalizeRef.current = false;
                         return;
                     }
                     finalize();
-                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, bg: theme.colors.gray[50], borderColor: error
-                                            ? theme.colors.semanticText.error
-                                            : theme.colors.boxborder[500], _focus: {
-                                            borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                                            boxShadow: error
-                                                ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
-                                                : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                                        }, _hover: {
-                                            borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                                        }, cursor: "text", boxShadow: error ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}` : `` }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: (e) => {
-                                            e.stopPropagation();
-                                            if (!isOpen) {
-                                                handleOpen();
-                                            }
-                                            else {
-                                                onClose();
-                                            }
-                                        }, style: { cursor: "pointer" }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showDate && ((0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
+                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, cursor: "text" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
+                                                e.stopPropagation();
+                                                if (!isOpen) {
+                                                    handleOpen();
+                                                }
+                                                else {
+                                                    onClose();
+                                                }
+                                            }, icon: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showDate && ((0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
                                             setIsTyping(false);
-                                        }, dateFormat: resolvedDateFormat, disabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: (updatedDate) => {
+                                        }, dateFormat: resolvedDateFormat, isDisabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
                                             setIsTyping(false);
-                                        }, disabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                        }, isDisabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
                                                 setTempDate(null);
                                                 requestClose(null);
-                                            }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
-};
-exports.SingleDatePicker = SingleDatePicker;
-exports.default = exports.SingleDatePicker;
+                                            }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+}
+exports.default = SingleDatePicker;

package/dist/Components/DatePicker/ThemeDatePicker.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
-import { DatePickerProps } from "./DatePickerProps";
-declare const ThemeDatePicker: React.FC<DatePickerProps>;
+import { RangeDatePickerProps, SingleDatePickerProps } from "./DatePickerProps";
+/** Public DatePicker entry — routes to Range/TimeOnly/Single by `isRange`/`pickerType`; `pickerType` is silently ignored whenever `isRange` is true. */
+export declare function ThemeDatePicker(props: RangeDatePickerProps): React.ReactElement;
+export declare function ThemeDatePicker(props: SingleDatePickerProps): React.ReactElement;
 export default ThemeDatePicker;