pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.45

package/dist/esm/Components/DatePicker/CalendarPanel.js

@@ -5,6 +5,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import Button from "../Button/Button.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
 import { DAY_CLASS, dayAccessibleName, dayStateClassName, resolveDayStateVisual, } from "./dayStates.js";
 /** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
 export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, dayStates, renderDayContent, }) => {
@@ -35,11 +36,7 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
         bg: theme.colors.background[50],
         outline: "none",
         _hover: { borderColor: theme.colors.primary[300] },
-        _focus: {
-            outline: "none",
-            borderColor: theme.colors.primary[500],
-            boxShadow: `0 0 0 1px ${theme.colors.primary[500]}`,
-        },
+        _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) },
         style: {
             WebkitAppearance: "menulist",
             MozAppearance: "menulist",
@@ -93,9 +90,7 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                 // Selection feedback outranks a state tint — the band is what tells the user what they picked.
                 if (!cellBg && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.cellBg))
                     cellBg = stateVisual.cellBg;
-                // Solid fill (selected/range-endpoint) needs the ink checked against that
-                // specific fill — `primary[500]` doesn't reliably clear AA for white text on
-                // every brand/mode (same gap the solid Button variant already accounts for).
+                // NOTE: primary[500] doesn't reliably clear AA for white text on every brand — same gap Button accounts for.
                 const primarySolid = resolveFilledSurface(theme.colors.primary, theme.colors);
                 const solidFill = primarySolid.fill;
                 const solidHoverFill = primarySolid.hoverFill;
@@ -110,7 +105,8 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                     : isTentativeEnd
                         ? `1px solid ${theme.colors.primary[400]}`
                         : isToday
-                            ? `1px solid ${theme.colors.primary[300]}`
+                            // primary[300] falls under 3:1 against surfaceRaised in several dark palettes; 500 clears it everywhere.
+                            ? `1px solid ${theme.colors.primary[500]}`
                             : "1px solid transparent";
                 // A filled circle owns its own ink (checked against that fill by `onFilled`), so a state
                 // never repaints a selected day — it would undo that contrast guarantee.

package/dist/esm/Components/DatePicker/DatePicker.js

@@ -6,22 +6,16 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { TextLabel } from "../Common/FormLabel.js";
 import TimePicker from "./TimePicker.js";
-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";
-};
-/** Legacy pre-split implementation, still used internally by Table's filter pane — new code should use ThemeDatePicker (exported as DatePicker). */
-export default function CustomDatePicker(props) {
-    var _a, _b;
-    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText = "Select a date", dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
+import { inferPickerTypeFromFormat, resolvePickerAliases } from "./pickerField.js";
+function CustomDatePicker(props) {
+    var _a, _b, _c;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", width = "100%", disableToday = false, size = DEFAULT_CONTROL_SIZE, } = props;
+    const aliases = resolvePickerAliases(props);
+    const disabled = aliases.isDisabled;
+    const placeholderText = (_a = aliases.placeholder) !== null && _a !== void 0 ? _a : "Select a date";
     const singleProps = !isRange ? props : null;
     const rangeProps = isRange ? props : null;
     const emitSingle = useCallback((date) => {
@@ -39,11 +33,8 @@ export default function CustomDatePicker(props) {
     const showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
     const showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
     const selectedDate = singleProps !== null
-        ? (_b = ((_a = singleProps.value) !== null && _a !== void 0 ? _a : singleProps.selectedDate)) !== null && _b !== void 0 ? _b : null
+        ? (_c = ((_b = singleProps.value) !== null && _b !== void 0 ? _b : singleProps.selectedDate)) !== null && _c !== void 0 ? _c : null
         : null;
-    // const [currentMonth, setCurrentMonth] = useState<Date>(
-    //   isRange ? new Date() : selectedDate ?? new Date()
-    // );
     const [currentMonth, setCurrentMonth] = useState(isRange ? new Date() :
         selectedDate
             ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
@@ -52,11 +43,6 @@ export default function CustomDatePicker(props) {
     const [rangeEnd, setRangeEnd] = useState(null);
     const [selectingStart, setSelectingStart] = useState(true);
     const [tempDate, setTempDate] = useState(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
-    //   const [tempDate, setTempDate] = useState<Date | null>(
-    //   selectedDate
-    //     ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
-    //     : (disableToday ? tomorrow : null)
-    // );
     const [tempRangeStart, setTempRangeStart] = useState(rangeStart);
     const [tempRangeEnd, setTempRangeEnd] = useState(rangeEnd);
     const popoverRef = useRef(null);
@@ -64,13 +50,9 @@ export default function CustomDatePicker(props) {
         currentMonth.getMonth() === today.getMonth();
     const handleOpen = () => {
         if (!isRange && !selectedDate) {
-            // setTempDate(new Date());
             setTempDate(disableToday ? tomorrow : new Date());
         }
         if (showTime) {
-            // setTempDate(new Date()); // add new
-            //  setTempDate(disableToday ? tomorrow : new Date());
-            // console.log(selectedDate,"selectedDateselectedDate")
             setTempDate(disableToday ? tomorrow : selectedDate ? selectedDate : new Date());
         }
         onOpen();
@@ -79,21 +61,14 @@ export default function CustomDatePicker(props) {
         if (!isRange) {
             if (selectedDate instanceof Date) {
                 setTempDate(new Date(selectedDate));
-                // const corrected = disableToday && isSameDay(selectedDate, today)
-                //   ? tomorrow
-                //   : selectedDate;
-                // setTempDate(new Date(corrected));
             }
             else {
                 setTempDate(null);
-                // setTempDate(disableToday ? tomorrow : null);
             }
         }
     }, [selectedDate, isRange, disableToday]);
     const handleDaySelect = (day) => {
-        // const updated = new Date(day);
         let updated = new Date(day);
-        // 👇 Redirect selection from today → tomorrow
         if (disableToday && isSameDay(updated, today)) {
             updated = tomorrow;
         }
@@ -194,7 +169,7 @@ export default function CustomDatePicker(props) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen, onClose, tempDate, props, emitSingle]);
-    return (_jsxs(Box, { width: width, position: "relative", children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { onClick: handleOpen, children: _jsx(TextInput, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), _jsx(Portal, { appendToParentPortal: false, children: _jsx(PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.background[50], children: _jsxs(PopoverBody, { children: [showDate && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => subMonths(prev, 1)), children: _jsx(ChevronLeftIcon, {}) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx("select", { value: currentMonth.getMonth(), onChange: (e) => {
+    return (_jsxs(Box, { width: width, position: "relative", children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { onClick: handleOpen, children: _jsx(TextInput, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), _jsx(Portal, { appendToParentPortal: false, children: _jsx(PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsxs(PopoverBody, { children: [showDate && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => subMonths(prev, 1)), children: _jsx(ChevronLeftIcon, {}) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx("select", { value: currentMonth.getMonth(), onChange: (e) => {
                                                                     const newMonth = parseInt(e.target.value, 10);
                                                                     setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
                                                                 }, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx("select", { value: currentMonth.getFullYear(), onChange: (e) => {
@@ -208,20 +183,7 @@ export default function CustomDatePicker(props) {
                                                                     if (!disableToday && !isRange) {
                                                                         handleDaySelect(new Date(today));
                                                                     }
-                                                                }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => addMonths(prev, 1)), children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && (_jsx(TimePicker
-                                    // date={tempDate ?? new Date()}
-                                    , { 
-                                        // date={tempDate ?? new Date()}
-                                        date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, 
-                                        // onChange={(updatedDate) => {
-                                        // 👇 Redirect time change if today
-                                        //   const corrected = disableToday && isSameDay(updatedDate, today)
-                                        //     ? tomorrow
-                                        //     : updatedDate;
-                                        //   setTempDate(corrected);
-                                        //   emitSingle(corrected);
-                                        // }}
-                                        onChange: (updatedDate) => {
+                                                                }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => addMonths(prev, 1)), children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && (_jsx(TimePicker, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             emitSingle(updatedDate);
                                         } })), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
@@ -251,3 +213,4 @@ export default function CustomDatePicker(props) {
                                                     onClose();
                                                 }, children: "OK" })] })] }) }) })] })] }));
 }
+export default CustomDatePicker;

package/dist/esm/Components/DatePicker/DatePickerProps.js

@@ -1 +1 @@
-export {};
+export const isStringValueProps = (props) => props.valueFormat === "iso";

package/dist/esm/Components/DatePicker/RangeDatePicker.js

@@ -5,10 +5,12 @@ import { format, isAfter, isBefore, isSameDay, subDays, startOfMonth, endOfMonth
 import { CalendarIcon } from "lucide-react";
 import Button from "../Button/Button.js";
 import { TextLabel } from "../Common/FormLabel.js";
-import HelperText from "../Common/HelperText.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { readOnlyTriggerSx, resolvePickerAliases } from "./pickerField.js";
 import CalendarPanel from "./CalendarPanel.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { getTextInputIconSizePx, getTextInputIconWrapperSx, } from "../Input/textInputIconSize.js";
 import TimePicker from "./TimePicker.js";
 import { TimePickerInput } from "./TimePickerInput.js";
@@ -21,14 +23,15 @@ const setTimeFrom = (base, time) => {
 /** Two-endpoint range field; `onChange` fires only via Apply/Escape, never on a bare day click or on outside-click close. */
 export 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", dayStates, renderDayContent, } = 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 = DEFAULT_CONTROL_SIZE, dayStates, renderDayContent, } = props;
+    const { isDisabled: disabled, placeholder: placeholderText } = resolvePickerAliases(props);
     const theme = useCustomTheme();
-    const sizeKey = typeof size === "string" ? size : "md";
+    const sizeKey = typeof size === "string" ? size : DEFAULT_CONTROL_SIZE;
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
     const calendarIconPx = getTextInputIconSizePx(sizeKey);
     const calendarIconWrapperSx = getTextInputIconWrapperSx(sizeKey);
     const { isOpen, onOpen, onClose } = useDisclosure();
     const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
-    const errorFieldId = id ? `${id}-error` : undefined;
     const calendarLabel = label !== null && label !== void 0 ? label : "Choose date range";
     const inputRef = useRef(null);
     const triggerRef = useRef(null);
@@ -154,12 +157,12 @@ export 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);
@@ -176,20 +179,13 @@ export const RangeDatePicker = (props) => {
             return `${format(tempRangeStart, dateFormat)} -`;
         return "";
     }, [inputValue, tempRangeStart, tempRangeEnd, dateFormat]);
-    return (_jsxs(FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && (_jsx(TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, isInvalid: error, isRequired: isRequired, "aria-describedby": error && errorMessage ? errorFieldId : undefined, autoComplete: autoComplete, onKeyDown: handleInputKeyDown, onFocus: () => {
+    return (_jsxs(FormControl, { id: ids.inputId, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(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" }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: _jsx(IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
+                                        }, sx: readOnlyTriggerSx(theme.colors), cursor: "pointer" }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: _jsx(IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
                                                 e.stopPropagation();
                                                 if (!isOpen) {
                                                     handleOpen();
@@ -197,7 +193,7 @@ export const RangeDatePicker = (props) => {
                                                 else {
                                                     onClose();
                                                 }
-                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.background[50], role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
+                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { 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))) }), _jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect, dayStates: dayStates, renderDayContent: renderDayContent }), formatHasTime && (_jsxs(Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [_jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: startTimeBaseDate, onChange: (updated) => {
@@ -207,25 +203,25 @@ export const RangeDatePicker = (props) => {
                                                         }
                                                         const withStartDate = new Date(tempRangeStart.getFullYear(), tempRangeStart.getMonth(), tempRangeStart.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
                                                         setTempRangeStart(withStartDate);
-                                                    }, dateFormat: dateFormat, disabled: disabled || !tempRangeStart })) : (_jsx(TimePickerInput, { value: tempRangeStart, onChange: (t) => {
+                                                    }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeStart })) : (_jsx(TimePickerInput, { value: tempRangeStart, onChange: (t) => {
                                                         if (!t) {
                                                             setTempRangeStart(null);
                                                             return;
                                                         }
                                                         setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart, size: sizeKey }))] }), _jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: endTimeBaseDate, onChange: (updated) => {
+                                                    }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeStart, size: sizeKey }))] }), _jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { 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 })) : (_jsx(TimePickerInput, { value: tempRangeEnd, onChange: (t) => {
+                                                    }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeEnd })) : (_jsx(TimePickerInput, { value: tempRangeEnd, onChange: (t) => {
                                                         if (!t) {
                                                             setTempRangeEnd(null);
                                                             return;
                                                         }
                                                         setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && (_jsx(ErrorMessage, { id: errorFieldId, errorMessage: errorMessage })), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+                                                    }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 export default RangeDatePicker;

package/dist/esm/Components/DatePicker/SingleDatePicker.js

@@ -5,10 +5,14 @@ import { format, parse, isValid, isSameDay, isBefore, isAfter, addDays, } from "
 import { CalendarIcon } from "lucide-react";
 import Button from "../Button/Button.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { getTextInputIconSizePx, getTextInputIconWrapperSx, } from "../Input/textInputIconSize.js";
+import { isStringValueProps, } from "./DatePickerProps.js";
+import { parseIsoValue, formatIsoValue } from "./valueFormat.js";
 import { TextLabel } from "../Common/FormLabel.js";
-import HelperText from "../Common/HelperText.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { formatHasTime, inferPickerTypeFromFormat, resolvePickerAliases } from "./pickerField.js";
 import TimePicker from "./TimePicker.js";
 import { TimePickerInput } from "./TimePickerInput.js";
 import CalendarPanel from "./CalendarPanel.js";
@@ -106,16 +110,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) || [];
@@ -219,17 +213,17 @@ const normalizeTimeBuffer = (tokenChar, rawBuffer, segmentLength, is12Hour) => {
     }
     return { value: buf, completed: buf.length >= segmentLength };
 };
-/** Date/datetime field with typed-mask input + calendar popover. Import via `DatePicker` (ThemeDatePicker) — direct import bypasses its isRange/pickerType routing. */
-export 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;
+export 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 = DEFAULT_CONTROL_SIZE, } = props;
+    const { isDisabled: disabled, placeholder: placeholderText } = resolvePickerAliases(props);
     const theme = useCustomTheme();
-    const sizeKey = typeof size === "string" ? size : "md";
+    const sizeKey = typeof size === "string" ? size : DEFAULT_CONTROL_SIZE;
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
     const calendarIconPx = getTextInputIconSizePx(sizeKey);
     const calendarIconWrapperSx = getTextInputIconWrapperSx(sizeKey);
     const { isOpen, onOpen, onClose } = useDisclosure();
     const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
-    const errorFieldId = id ? `${id}-error` : undefined;
     const calendarLabel = label !== null && label !== void 0 ? label : "Choose date";
     const inputRef = useRef(null);
     const popoverRef = useRef(null);
@@ -284,10 +278,13 @@ export const SingleDatePicker = (props) => {
     const tomorrow = 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 = formatHasTime(resolvedDateFormat);
+    const rawIsoValue = 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 = useMemo(() => (rawIsoValue ? parseIsoValue(rawIsoValue, resolvedPickerType) : null), [rawIsoValue, resolvedPickerType]);
+    const selectedDate = isStringValueProps(props)
+        ? parsedIsoValue
+        : (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.selectedDate) !== null && _d !== void 0 ? _d : null;
     const [currentMonth, setCurrentMonth] = useState(selectedDate
         ? disableToday && isSameDay(selectedDate, today)
             ? tomorrow
@@ -310,7 +307,12 @@ export const SingleDatePicker = (props) => {
         if (didCommitRef.current)
             return;
         didCommitRef.current = true;
-        props.onChange(value);
+        if (isStringValueProps(props)) {
+            props.onChange(value ? formatIsoValue(value, resolvedPickerType) : null);
+        }
+        else {
+            props.onChange(value);
+        }
     };
     const finalize = (overrideValue) => {
         if (enableMask) {
@@ -419,7 +421,7 @@ export const SingleDatePicker = (props) => {
             const parsed = parse(value, resolvedDateFormat, new Date());
             if (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 +437,7 @@ export 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 +634,12 @@ export const SingleDatePicker = (props) => {
         if (disableToday && 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 +681,7 @@ export 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);
@@ -968,22 +961,13 @@ export const SingleDatePicker = (props) => {
         : tempDate
             ? format(tempDate, resolvedDateFormat)
             : "";
-    return (_jsxs(FormControl, { id: id, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: () => {
+    return (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: () => {
                     if (suppressOnCloseFinalizeRef.current) {
                         suppressOnCloseFinalizeRef.current = false;
                         return;
                     }
                     finalize();
-                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, id: id, 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, "aria-describedby": error && errorMessage ? errorFieldId : undefined, autoComplete: autoComplete, bg: theme.colors.background[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}` : `` }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: _jsx(IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
+                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(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" }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: _jsx(IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
                                                 e.stopPropagation();
                                                 if (!isOpen) {
                                                     handleOpen();
@@ -991,17 +975,17 @@ export const SingleDatePicker = (props) => {
                                                 else {
                                                     onClose();
                                                 }
-                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.background[50], role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [showDate && (_jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && (_jsx(Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? (_jsx(TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
+                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [showDate && (_jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && (_jsx(Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? (_jsx(TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             setInputValue(updatedDate ? format(updatedDate, resolvedDateFormat) : "");
                                             setIsTyping(false);
-                                        }, dateFormat: resolvedDateFormat, disabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : (_jsx(TimePicker, { 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 })) : (_jsx(TimePicker, { 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(format(updatedDate, resolvedDateFormat));
                                             setIsTyping(false);
-                                        }, disabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                        }, isDisabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
                                                 setTempDate(null);
                                                 requestClose(null);
-                                            }, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), error && errorMessage && (_jsx(ErrorMessage, { id: errorFieldId, errorMessage: errorMessage })), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
-};
+                                            }, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+}
 export default SingleDatePicker;

package/dist/esm/Components/DatePicker/ThemeDatePicker.js

@@ -1,28 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { isStringValueProps, } from "./DatePickerProps.js";
 import { RangeDatePicker } from "./RangeDatePicker.js";
 import { SingleDatePicker } from "./SingleDatePicker.js";
 import { TimeOnlyPicker } from "./TimeOnlyPicker.js";
-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";
-};
-/** Public DatePicker entry — routes to Range/TimeOnly/Single by `isRange`/`pickerType`; `pickerType` is silently ignored whenever `isRange` is true. */
-const ThemeDatePicker = (props) => {
+import { inferPickerTypeFromFormat } from "./pickerField.js";
+export function ThemeDatePicker(props) {
     var _a, _b;
     if (props.isRange) {
         return _jsx(RangeDatePicker, { ...props });
     }
-    const dateFormat = (_a = props.dateFormat) !== null && _a !== void 0 ? _a : "dd/MM/yyyy";
-    const pickerType = (_b = props.pickerType) !== null && _b !== void 0 ? _b : inferPickerTypeFromFormat(dateFormat);
-    if (pickerType === "time") {
-        return _jsx(TimeOnlyPicker, { ...props });
+    const singleProps = props;
+    const dateFormat = (_a = singleProps.dateFormat) !== null && _a !== void 0 ? _a : "dd/MM/yyyy";
+    const pickerType = (_b = singleProps.pickerType) !== null && _b !== void 0 ? _b : inferPickerTypeFromFormat(dateFormat);
+    const isTime = pickerType === "time";
+    if (isStringValueProps(singleProps)) {
+        return isTime ? _jsx(TimeOnlyPicker, { ...singleProps }) : _jsx(SingleDatePicker, { ...singleProps });
     }
-    return _jsx(SingleDatePicker, { ...props });
-};
+    return isTime ? _jsx(TimeOnlyPicker, { ...singleProps }) : _jsx(SingleDatePicker, { ...singleProps });
+}
 export default ThemeDatePicker;