pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Components/DatePicker/DatePicker.js

@@ -1,125 +1,99 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = CustomDatePicker;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var date_fns_1 = require("date-fns");
-var lucide_react_1 = require("lucide-react");
-var Button_1 = __importDefault(require("../Button/Button"));
-var TextInput_1 = __importDefault(require("../Input/TextInput"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var FormLabel_1 = require("../Common/FormLabel");
-var TimePicker_1 = __importDefault(require("./TimePicker"));
-var inferPickerTypeFromFormat = function (formatStr) {
-    var lower = formatStr.toLowerCase();
-    var hasTime = lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
-    var hasDate = lower.includes("d") && lower.includes("m") && lower.includes("y");
-    if (hasTime && hasDate)
-        return "datetime";
-    if (hasTime)
-        return "time";
-    return "date";
-};
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const date_fns_1 = require("date-fns");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const TextInput_1 = __importDefault(require("../Input/TextInput"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const FormLabel_1 = require("../Common/FormLabel");
+const TimePicker_1 = __importDefault(require("./TimePicker"));
+const pickerField_1 = require("./pickerField");
+const useOutsideMouseDown_1 = require("../../Hooks/useOutsideMouseDown");
 function CustomDatePicker(props) {
-    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, _a = props.placeholderText, placeholderText = _a === void 0 ? "Select a date" : _a, _b = props.dateFormat, dateFormat = _b === void 0 ? "dd/MM/yyyy" : _b, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, isRange = props.isRange, _c = props.autoComplete, autoComplete = _c === void 0 ? "off" : _c, disabled = props.disabled, _d = props.width, width = _d === void 0 ? "100%" : _d, _e = props.disableToday, disableToday = _e === void 0 ? false : _e, _f = props.size, size = _f === void 0 ? "md" : _f;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _g = (0, react_2.useDisclosure)(), isOpen = _g.isOpen, onOpen = _g.onOpen, onClose = _g.onClose;
-    var resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
-    var inputRef = (0, react_1.useRef)(null);
-    var today = new Date();
-    var tomorrow = (0, date_fns_1.addDays)(today, 1);
-    var showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
-    var showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
-    var selectedDate = !isRange ? props.selectedDate : null;
-    // const [currentMonth, setCurrentMonth] = useState<Date>(
-    //   isRange ? new Date() : selectedDate ?? new Date()
-    // );
-    var _h = (0, react_1.useState)(isRange ? new Date() :
+    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 = controlSizes_1.DEFAULT_CONTROL_SIZE, } = props;
+    const aliases = (0, pickerField_1.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 = (0, react_1.useCallback)((date) => {
+        singleProps === null || singleProps === void 0 ? void 0 : singleProps.onChange(date);
+    }, [singleProps]);
+    const emitRange = (range) => {
+        rangeProps === null || rangeProps === void 0 ? void 0 : rangeProps.onChange(range);
+    };
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : (0, pickerField_1.inferPickerTypeFromFormat)(dateFormat);
+    const inputRef = (0, react_1.useRef)(null);
+    const today = new Date();
+    const tomorrow = (0, date_fns_1.addDays)(today, 1);
+    const showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
+    const showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
+    const selectedDate = singleProps !== null
+        ? (_c = ((_b = singleProps.value) !== null && _b !== void 0 ? _b : singleProps.selectedDate)) !== null && _c !== void 0 ? _c : null
+        : null;
+    const [currentMonth, setCurrentMonth] = (0, react_1.useState)(isRange ? new Date() :
         selectedDate
             ? (disableToday && (0, date_fns_1.isSameDay)(selectedDate, today) ? tomorrow : selectedDate)
-            : (disableToday ? tomorrow : today)), currentMonth = _h[0], setCurrentMonth = _h[1];
-    var _j = (0, react_1.useState)(null), rangeStart = _j[0], setRangeStart = _j[1];
-    var _k = (0, react_1.useState)(null), rangeEnd = _k[0], setRangeEnd = _k[1];
-    var _l = (0, react_1.useState)(true), selectingStart = _l[0], setSelectingStart = _l[1];
-    var _m = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _m[0], setTempDate = _m[1];
-    //   const [tempDate, setTempDate] = useState<Date | null>(
-    //   selectedDate
-    //     ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
-    //     : (disableToday ? tomorrow : null)
-    // );
-    var _o = (0, react_1.useState)(rangeStart), tempRangeStart = _o[0], setTempRangeStart = _o[1];
-    var _p = (0, react_1.useState)(rangeEnd), tempRangeEnd = _p[0], setTempRangeEnd = _p[1];
-    var popoverRef = (0, react_1.useRef)(null);
-    var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+            : (disableToday ? tomorrow : today));
+    const [rangeStart, setRangeStart] = (0, react_1.useState)(null);
+    const [rangeEnd, setRangeEnd] = (0, react_1.useState)(null);
+    const [selectingStart, setSelectingStart] = (0, react_1.useState)(true);
+    const [tempDate, setTempDate] = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
+    const [tempRangeStart, setTempRangeStart] = (0, react_1.useState)(rangeStart);
+    const [tempRangeEnd, setTempRangeEnd] = (0, react_1.useState)(rangeEnd);
+    const popoverRef = (0, react_1.useRef)(null);
+    const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
         currentMonth.getMonth() === today.getMonth();
-    var handleOpen = function () {
+    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();
     };
-    (0, react_1.useEffect)(function () {
+    const openAtPress = (0, react_1.useRef)(false);
+    const handleTriggerClick = () => {
+        const wasOpen = openAtPress.current;
+        openAtPress.current = false;
+        if (wasOpen)
+            onClose();
+        else
+            handleOpen();
+    };
+    const handleTriggerKeyDown = (event) => {
+        if (isOpen && event.key === "Escape") {
+            onClose();
+            return;
+        }
+        if (isOpen || (event.key !== "Enter" && event.key !== "ArrowDown"))
+            return;
+        event.preventDefault();
+        handleOpen();
+    };
+    (0, react_1.useEffect)(() => {
         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]);
-    var handleDaySelect = function (day) {
-        // const updated = new Date(day);
-        var updated = new Date(day);
-        // 👇 Redirect selection from today → tomorrow
+    const handleDaySelect = (day) => {
+        let updated = new Date(day);
         if (disableToday && (0, date_fns_1.isSameDay)(updated, today)) {
             updated = tomorrow;
         }
@@ -130,174 +104,122 @@ function CustomDatePicker(props) {
                 setSelectingStart(false);
             }
             else {
-                var finalStart = tempRangeStart && updated < tempRangeStart ? updated : tempRangeStart;
-                var finalEnd = tempRangeStart && updated < tempRangeStart ? tempRangeStart : updated;
-                var safeStart = finalStart !== null && finalStart !== void 0 ? finalStart : updated;
+                const finalStart = tempRangeStart && updated < tempRangeStart ? updated : tempRangeStart;
+                const finalEnd = tempRangeStart && updated < tempRangeStart ? tempRangeStart : updated;
+                const safeStart = finalStart !== null && finalStart !== void 0 ? finalStart : updated;
                 setTempRangeStart(safeStart);
                 setTempRangeEnd(finalEnd);
                 setSelectingStart(true);
                 if (safeStart && finalEnd) {
-                    props.onChange({ from: safeStart, to: finalEnd });
+                    emitRange({ from: safeStart, to: finalEnd });
                 }
             }
         }
         else {
-            var updatedDate = tempDate
+            const updatedDate = tempDate
                 ? new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds())
                 : updated;
             setTempDate(updatedDate);
-            props.onChange(updatedDate);
+            emitSingle(updatedDate);
         }
     };
-    var renderDays = function () {
-        var monthStart = (0, date_fns_1.startOfMonth)(currentMonth);
-        var monthEnd = (0, date_fns_1.endOfMonth)(currentMonth);
-        var startDate = (0, date_fns_1.startOfWeek)(monthStart);
-        var endDate = (0, date_fns_1.endOfWeek)(monthEnd);
-        var rows = [];
-        var day = startDate;
+    const renderDays = () => {
+        const monthStart = (0, date_fns_1.startOfMonth)(currentMonth);
+        const monthEnd = (0, date_fns_1.endOfMonth)(currentMonth);
+        const startDate = (0, date_fns_1.startOfWeek)(monthStart);
+        const endDate = (0, date_fns_1.endOfWeek)(monthEnd);
+        const rows = [];
+        let day = startDate;
         while (day <= endDate) {
-            var days = [];
-            var _loop_1 = function (i) {
-                var thisDay = day;
-                var isInCurrentMonth = thisDay.getMonth() === currentMonth.getMonth();
-                var isToday = (0, date_fns_1.isSameDay)(thisDay, today);
-                var isStart = isRange && tempRangeStart && (0, date_fns_1.isSameDay)(thisDay, tempRangeStart);
-                var isEnd = isRange && tempRangeEnd && (0, date_fns_1.isSameDay)(thisDay, tempRangeEnd);
-                var isInRange = isRange &&
+            const days = [];
+            for (let i = 0; i < 7; i++) {
+                const thisDay = day;
+                const isInCurrentMonth = thisDay.getMonth() === currentMonth.getMonth();
+                const isToday = (0, date_fns_1.isSameDay)(thisDay, today);
+                const isStart = isRange && tempRangeStart && (0, date_fns_1.isSameDay)(thisDay, tempRangeStart);
+                const isEnd = isRange && tempRangeEnd && (0, date_fns_1.isSameDay)(thisDay, tempRangeEnd);
+                const isInRange = isRange &&
                     tempRangeStart &&
                     tempRangeEnd &&
                     (0, date_fns_1.isAfter)(thisDay, tempRangeStart) &&
                     (0, date_fns_1.isBefore)(thisDay, tempRangeEnd);
-                var isSelected = !isRange && tempDate && (0, date_fns_1.isSameDay)(thisDay, tempDate);
-                var disabled_1 = !isInCurrentMonth ||
+                const isSelected = !isRange && tempDate && (0, date_fns_1.isSameDay)(thisDay, tempDate);
+                const disabled = !isInCurrentMonth ||
                     (minDate && (0, date_fns_1.isBefore)(thisDay, minDate)) ||
                     (maxDate && (0, date_fns_1.isAfter)(thisDay, maxDate)) ||
                     (disablePastDates && (0, date_fns_1.isBefore)(thisDay, today) && !(0, date_fns_1.isSameDay)(thisDay, today)) ||
                     (disableFutureDates && (0, date_fns_1.isAfter)(thisDay, today) && !(0, date_fns_1.isSameDay)(thisDay, today)) ||
                     (disableToday && isToday);
-                days.push(react_1.default.createElement(Button_1.default, { key: thisDay.toString(), size: "sm", variant: isStart || isEnd
+                days.push((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: isStart || isEnd
                         ? "solid"
                         : isInRange
                             ? "outline"
                             : isSelected
                                 ? "solid"
-                                : "ghost", colorScheme: isStart || isEnd || isInRange || isSelected ? "primary" : "gray", opacity: isInCurrentMonth ? 1 : 0.4, onClick: function () { return !disabled_1 && handleDaySelect(new Date(thisDay)); }, isDisabled: disabled_1, border: isToday ? "0.125rem solid ".concat(theme.colors.primary[500]) : undefined, borderRadius: "md" }, (0, date_fns_1.format)(thisDay, "d")));
+                                : "ghost", colorScheme: isStart || isEnd || isInRange || isSelected ? "primary" : "gray", opacity: isInCurrentMonth ? 1 : 0.4, onClick: () => !disabled && handleDaySelect(new Date(thisDay)), isDisabled: disabled, border: isToday ? `0.125rem solid ${theme.colors.primary[500]}` : undefined, borderRadius: "md", children: (0, date_fns_1.format)(thisDay, "d") }, thisDay.toString()));
                 day = (0, date_fns_1.addDays)(day, 1);
-            };
-            for (var i = 0; i < 7; i++) {
-                _loop_1(i);
             }
-            rows.push(react_1.default.createElement(react_2.Grid, { key: day.toString(), templateColumns: "repeat(7, 1fr)", gap: 1 }, days));
+            rows.push((0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, children: days }, day.toString()));
         }
         return rows;
     };
-    var displayValue = isRange
+    const displayValue = isRange
         ? tempRangeStart && tempRangeEnd
-            ? "".concat((0, date_fns_1.format)(tempRangeStart, dateFormat), " - ").concat((0, date_fns_1.format)(tempRangeEnd, dateFormat))
+            ? `${(0, date_fns_1.format)(tempRangeStart, dateFormat)} - ${(0, date_fns_1.format)(tempRangeEnd, dateFormat)}`
             : tempRangeStart
-                ? "".concat((0, date_fns_1.format)(tempRangeStart, dateFormat), " -")
+                ? `${(0, date_fns_1.format)(tempRangeStart, dateFormat)} -`
                 : ""
         : tempDate
             ? (0, date_fns_1.format)(tempDate, dateFormat)
             : "";
-    (0, react_1.useEffect)(function () {
-        var handleClickOutside = function (event) {
-            var _a;
-            if (popoverRef.current &&
-                !popoverRef.current.contains(event.target) &&
-                !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                if (tempDate) {
-                    props.onChange(tempDate); // commit latest temp on outside click
-                }
-                onClose();
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        else {
-            document.removeEventListener("mousedown", handleClickOutside);
-        }
-        return function () {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen, onClose, tempDate, props]);
-    return (react_1.default.createElement(react_2.Box, { width: width, position: "relative" },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true },
-            react_1.default.createElement(react_2.PopoverTrigger, null,
-                react_1.default.createElement(react_2.Box, { onClick: handleOpen },
-                    react_1.default.createElement(TextInput_1.default, { 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 }))),
-            react_1.default.createElement(react_2.Portal, { appendToParentPortal: false },
-                react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600 },
-                    react_1.default.createElement(react_2.PopoverBody, null,
-                        showDate && (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 },
-                                react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.subMonths)(prev, 1); }); } },
-                                    react_1.default.createElement(lucide_react_1.ChevronLeftIcon, null)),
-                                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
-                                    react_1.default.createElement("select", { value: currentMonth.getMonth(), onChange: function (e) {
-                                            var newMonth = parseInt(e.target.value, 10);
-                                            setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), newMonth, 1); });
-                                        } }, Array.from({ length: 12 }).map(function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM"))); })),
-                                    react_1.default.createElement("select", { value: currentMonth.getFullYear(), onChange: function (e) {
-                                            var newYear = parseInt(e.target.value, 10);
-                                            setCurrentMonth(function (prev) { return new Date(newYear, prev.getMonth(), 1); });
-                                        } }, Array.from({ length: 100 }).map(function (_, i) {
-                                        var year = new Date().getFullYear() - 50 + i;
-                                        return (react_1.default.createElement("option", { key: year, value: year }, year));
-                                    }))),
-                                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1 },
-                                    !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () {
-                                            setCurrentMonth(new Date(today.getFullYear(), today.getMonth(), 1));
-                                            if (!disableToday && !isRange) {
-                                                handleDaySelect(new Date(today));
-                                            }
-                                        }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday }, "Today")),
-                                    react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.addMonths)(prev, 1); }); } },
-                                        react_1.default.createElement(lucide_react_1.ChevronRightIcon, null)))),
-                            react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day }, day)); })),
-                            renderDays())),
-                        !isRange && showTime && (react_1.default.createElement(TimePicker_1.default
-                        // 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);
-                            //   (props as any).onChange(corrected);
-                            // }}
-                            onChange: function (updatedDate) {
-                                setTempDate(updatedDate);
-                                props.onChange(updatedDate);
-                            } })),
-                        react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3 },
-                            react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
-                                    setTempDate(null);
-                                    // setTempDate(disableToday ? tomorrow : null);
-                                    setTempRangeStart(null);
-                                    setTempRangeEnd(null);
-                                    setRangeStart(null);
-                                    setRangeEnd(null);
-                                    setSelectingStart(true);
-                                    props.onChange(null);
-                                    // (props as any).onChange(disableToday ? tomorrow : null);
-                                    onClose();
-                                } }, "Clear"),
-                            react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: function () {
-                                    if (isRange && tempRangeStart && tempRangeEnd) {
-                                        setRangeStart(tempRangeStart);
-                                        setRangeEnd(tempRangeEnd);
-                                        props.onChange({ from: tempRangeStart, to: tempRangeEnd });
-                                    }
-                                    else if (!isRange && tempDate) {
-                                        props.onChange(tempDate);
-                                    }
-                                    onClose();
-                                } }, "OK"))))))));
+    (0, useOutsideMouseDown_1.useOutsideMouseDown)([popoverRef, inputRef], () => {
+        if (!popoverRef.current)
+            return;
+        if (tempDate)
+            emitSingle(tempDate);
+        onClose();
+    }, { enabled: isOpen });
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, position: "relative", 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: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { onMouseDown: () => { openAtPress.current = isOpen; }, onClick: handleTriggerClick, onKeyDown: handleTriggerKeyDown, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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, "aria-haspopup": "dialog" }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { appendToParentPortal: false, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [showDate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", "aria-label": "Previous month", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.subMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, {}) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)("select", { "aria-label": "Month", 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) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM") }, i))) }), (0, jsx_runtime_1.jsx)("select", { "aria-label": "Year", value: currentMonth.getFullYear(), onChange: (e) => {
+                                                                    const newYear = parseInt(e.target.value, 10);
+                                                                    setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
+                                                                }, children: Array.from({ length: 100 }).map((_, i) => {
+                                                                    const year = new Date().getFullYear() - 50 + i;
+                                                                    return ((0, jsx_runtime_1.jsx)("option", { value: year, children: year }, year));
+                                                                }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 1, children: [!isViewingCurrentMonth && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => {
+                                                                    setCurrentMonth(new Date(today.getFullYear(), today.getMonth(), 1));
+                                                                    if (!disableToday && !isRange) {
+                                                                        handleDaySelect(new Date(today));
+                                                                    }
+                                                                }, "aria-label": "Today", sx: { fontSize: "xs", px: 2 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", "aria-label": "Next month", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.addMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, {}) })] })] }), (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: 700, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_2.Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: (updatedDate) => {
+                                            setTempDate(updatedDate);
+                                            emitSingle(updatedDate);
+                                        } })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", onClick: () => {
+                                                    setTempDate(null);
+                                                    setTempRangeStart(null);
+                                                    setTempRangeEnd(null);
+                                                    setRangeStart(null);
+                                                    setRangeEnd(null);
+                                                    setSelectingStart(true);
+                                                    if (isRange) {
+                                                        emitRange(null);
+                                                    }
+                                                    else {
+                                                        emitSingle(null);
+                                                    }
+                                                    onClose();
+                                                }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", colorScheme: "primary", onClick: () => {
+                                                    if (isRange && tempRangeStart && tempRangeEnd) {
+                                                        setRangeStart(tempRangeStart);
+                                                        setRangeEnd(tempRangeEnd);
+                                                        emitRange({ from: tempRangeStart, to: tempRangeEnd });
+                                                    }
+                                                    else if (!isRange && tempDate) {
+                                                        emitSingle(tempDate);
+                                                    }
+                                                    onClose();
+                                                }, children: "OK" })] })] }) }) })] })] }));
 }
+exports.default = CustomDatePicker;

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

@@ -1,46 +1,138 @@
+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 above the field; also the calendar popover's accessible name (falls back to "Choose date" / "Choose date range"). */
     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;
+    /** Inferred from `dateFormat` when omitted: `H`/`h`/`mm`/`ss` mean time, so a lowercase `dd/mm/yyyy` is read as minutes and shows time selects while `dd/MM/yyyy` stays date-only. 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 32 · sm 38 · 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 & {
+    /** Omit or false for a single-date picker; the discriminant `DatePickerProps` switches on. */
     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 & {
+    /** Omit or false for a single-date picker; the discriminant `DatePickerProps` switches on. */
+    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 = {
+    /** Range start, `null` until picked. */
     from: Date | null;
+    /** Range end, `null` until picked. */
     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 & {
+    /** Must be true to render the range picker. */
     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;
+    /** Shortcut buttons above the calendar; each applies `range` to the pending selection (Apply still commits). Defaults to Today, Yesterday, Last 7 days, Last 30 days, This month; `[]` hides the row. */
+    presets?: {
+        label: string;
+        range: {
+            from: Date;
+            to: Date;
+        };
+    }[];
 };
+/** 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;