pixelize-design-library 2.3.7 → 2.3.8

package/dist/Components/DatePicker/DatePicker.js

@@ -1,55 +1,23 @@
 "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");
+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 FormLabel_1 = require("../Common/FormLabel");
+const TimePicker_1 = __importDefault(require("./TimePicker"));
+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)
@@ -57,38 +25,49 @@ var inferPickerTypeFromFormat = function (formatStr) {
     return "date";
 };
 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;
+    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;
+    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 : 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
+        ? (_b = ((_a = singleProps.value) !== null && _a !== void 0 ? _a : singleProps.selectedDate)) !== null && _b !== void 0 ? _b : null
+        : null;
     // const [currentMonth, setCurrentMonth] = useState<Date>(
     //   isRange ? new Date() : selectedDate ?? new Date()
     // );
-    var _h = (0, react_1.useState)(isRange ? new Date() :
+    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];
+            : (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 [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() &&
+    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());
@@ -101,7 +80,7 @@ function CustomDatePicker(props) {
         }
         onOpen();
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (!isRange) {
             if (selectedDate instanceof Date) {
                 setTempDate(new Date(selectedDate));
@@ -116,9 +95,9 @@ function CustomDatePicker(props) {
             }
         }
     }, [selectedDate, isRange, disableToday]);
-    var handleDaySelect = function (day) {
+    const handleDaySelect = (day) => {
         // const updated = new Date(day);
-        var updated = new Date(day);
+        let updated = new Date(day);
         // 👇 Redirect selection from today → tomorrow
         if (disableToday && (0, date_fns_1.isSameDay)(updated, today)) {
             updated = tomorrow;
@@ -130,85 +109,82 @@ 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) {
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (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
+                    emitSingle(tempDate); // commit latest temp on outside click
                 }
                 onClose();
             }
@@ -219,85 +195,64 @@ function CustomDatePicker(props) {
         else {
             document.removeEventListener("mousedown", handleClickOutside);
         }
-        return function () {
+        return () => {
             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"))))))));
+    }, [isOpen, onClose, tempDate, props, emitSingle]);
+    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.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { onClick: handleOpen, 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 }) }) }), (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, 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", 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", { 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", { 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: "0.75rem", px: 2 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", 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: "bold", 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 ?? 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) => {
+                                            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);
+                                                    // setTempDate(disableToday ? tomorrow : 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" })] })] }) }) })] })] }));
 }

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

@@ -26,6 +26,8 @@ export type BaseDatePickerProps = {
 export type SingleDatePickerProps = BaseDatePickerProps & {
     isRange?: false;
     selectedDate?: Date | null;
+    /** Alias for `selectedDate` (legacy / form libraries). */
+    value?: Date | null;
     onChange: (date: Date | null) => void;
 };
 export type RangeDate = {
@@ -35,6 +37,8 @@ export type RangeDate = {
 export type RangeDatePickerProps = BaseDatePickerProps & {
     isRange: true;
     selectedDate?: RangeDate | null;
+    /** Alias for `selectedDate` (legacy / form libraries). */
+    value?: RangeDate | null;
     onChange: (range: RangeDate | null) => void;
 };
 export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
@@ -44,3 +48,4 @@ export type TimePickerProps = {
     dateFormat: string;
     disabled?: boolean;
 };
+//# sourceMappingURL=DatePickerProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerProps.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/DatePickerProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG;IACxD,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,0DAA0D;IAC1D,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,EAAE,EAAE,IAAI,GAAG,IAAI,CAAC;CACjB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG;IACvD,OAAO,EAAE,IAAI,CAAC;IACd,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,oBAAoB,CAAC;AAE3E,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAA"}

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

@@ -2,3 +2,4 @@ import React from "react";
 import { RangeDatePickerProps } from "./DatePickerProps";
 export declare const RangeDatePicker: React.FC<RangeDatePickerProps>;
 export default RangeDatePicker;
+//# sourceMappingURL=RangeDatePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeDatePicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/RangeDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAmBpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAwBzD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiY1D,CAAC;AAEF,eAAe,eAAe,CAAC"}