pixelize-design-library 2.2.53 → 2.2.55

package/dist/Components/DatePicker/CalendarPanel.js

@@ -42,25 +42,25 @@ var CalendarPanel = function (_a) {
                     (disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
                     (disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
                     (disableToday && isToday);
-                days.push(react_1.default.createElement(Button_1.default, { key: thisDay.toString(), size: "sm", variant: isStart || isEnd || isSelected ? "solid" : isInRange ? "outline" : "ghost", colorScheme: isStart || isEnd || isInRange || isSelected ? "primary" : "gray", opacity: isInCurrentMonth ? 1 : 0.4, onClick: function () { return !disabled && onDaySelect(new Date(thisDay)); }, isDisabled: disabled, border: isToday ? "0.125rem solid ".concat(theme.colors.primary[500]) : undefined, borderRadius: "full" }, (0, date_fns_1.format)(thisDay, "d")));
+                days.push(react_1.default.createElement(Button_1.default, { key: thisDay.toString(), size: "xs", variant: isStart || isEnd || isSelected ? "solid" : isInRange ? "outline" : "ghost", colorScheme: isStart || isEnd || isInRange || isSelected ? "primary" : "gray", opacity: isInCurrentMonth ? 1 : 0.45, onClick: function () { return !disabled && onDaySelect(new Date(thisDay)); }, isDisabled: disabled, border: isToday ? "0.125rem solid ".concat(theme.colors.primary[500]) : undefined, borderRadius: "md" }, (0, date_fns_1.format)(thisDay, "d")));
                 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(react_1.default.createElement(react_2.Grid, { key: day.toString(), templateColumns: "repeat(7, 1fr)", gap: 0.5 }, days));
         }
         return rows;
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 4 },
-            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() - 1, 1); }); }, "aria-label": "Previous month" },
-                react_1.default.createElement(lucide_react_1.ChevronLeftIcon, { size: 20 })),
+        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 3 },
+            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() - 1, 1); }); }, "aria-label": "Previous month" },
+                react_1.default.createElement(lucide_react_1.ChevronLeftIcon, { size: 18 })),
             react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
                 react_1.default.createElement(react_2.Box, { as: "select", value: currentMonth.getMonth(), onChange: function (e) {
                         var newMonth = parseInt(e.target.value, 10);
                         setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), newMonth, 1); });
-                    }, border: "1px solid", borderColor: "gray.300", borderRadius: "md", px: 2, py: 1, fontSize: "sm", fontWeight: "medium", cursor: "pointer", bg: "white", outline: "none", _hover: {
+                    }, border: "1px solid", borderColor: "gray.300", borderRadius: "md", px: 1.5, py: 0.5, fontSize: "xs", fontWeight: "semibold", cursor: "pointer", bg: "white", outline: "none", _hover: {
                         borderColor: "gray.400",
                         borderWidth: "1px",
                         borderStyle: "solid",
@@ -72,6 +72,8 @@ var CalendarPanel = function (_a) {
                         boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
                     }, style: {
                         border: "1px solid #CBD5E0",
+                        fontSize: "12px",
+                        lineHeight: "1.25rem",
                         WebkitAppearance: "menulist",
                         MozAppearance: "menulist",
                         appearance: "menulist",
@@ -79,7 +81,7 @@ var CalendarPanel = function (_a) {
                 react_1.default.createElement(react_2.Box, { as: "select", value: currentMonth.getFullYear(), onChange: function (e) {
                         var newYear = parseInt(e.target.value, 10);
                         setCurrentMonth(function (prev) { return new Date(newYear, prev.getMonth(), 1); });
-                    }, border: "1px solid", borderColor: "gray.300", borderRadius: "md", px: 2, py: 1, fontSize: "sm", fontWeight: "medium", cursor: "pointer", bg: "white", outline: "none", _hover: {
+                    }, border: "1px solid", borderColor: "gray.300", borderRadius: "md", px: 1.5, py: 0.5, fontSize: "xs", fontWeight: "semibold", cursor: "pointer", bg: "white", outline: "none", _hover: {
                         borderColor: "gray.400",
                         borderWidth: "1px",
                         borderStyle: "solid",
@@ -91,6 +93,8 @@ var CalendarPanel = function (_a) {
                         boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
                     }, style: {
                         border: "1px solid #CBD5E0",
+                        fontSize: "12px",
+                        lineHeight: "1.25rem",
                         WebkitAppearance: "menulist",
                         MozAppearance: "menulist",
                         appearance: "menulist",
@@ -99,14 +103,14 @@ var CalendarPanel = function (_a) {
                     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 () {
+                !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", onClick: function () {
                         setCurrentMonth(function (_prev) { return new Date(today.getFullYear(), today.getMonth(), 1); });
                         if (!disableToday) {
                             onDaySelect(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 new Date(prev.getFullYear(), prev.getMonth() + 1, 1); }); }, "aria-label": "Next month" },
-                    react_1.default.createElement(lucide_react_1.ChevronRightIcon, { size: 20 })))), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 2 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day, fontSize: "sm", color: "gray.600", py: 2 }, day)); }))),
+                    }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2 }, isDisabled: disableToday }, "Today")),
+                react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() + 1, 1); }); }, "aria-label": "Next month" },
+                    react_1.default.createElement(lucide_react_1.ChevronRightIcon, { size: 18 })))), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0.5, fontWeight: "semibold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day, fontSize: "xs", color: "gray.600", py: 1 }, day)); }))),
         renderDays()));
 };
 exports.CalendarPanel = CalendarPanel;

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

@@ -40,4 +40,5 @@ export type TimePickerProps = {
     date: Date;
     onChange: (date: Date) => void;
     dateFormat: string;
+    disabled?: boolean;
 };

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -37,6 +37,7 @@ var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var TimePicker_1 = __importDefault(require("./TimePicker"));
 var TimePickerInput_1 = require("./TimePickerInput");
 // helper to set time on date while preserving date part
 var setTimeFrom = function (base, time) {
@@ -59,10 +60,24 @@ var RangeDatePicker = function (props) {
     var _v = (0, react_1.useState)((_d = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) !== null && _d !== void 0 ? _d : null), tempRangeEnd = _v[0], setTempRangeEnd = _v[1];
     var _w = (0, react_1.useState)(true), selectingStart = _w[0], setSelectingStart = _w[1];
     var _x = (0, react_1.useState)(""), inputValue = _x[0], setInputValue = _x[1];
-    var formatHasTime = (0, react_1.useMemo)(function () {
-        var lower = dateFormat.toLowerCase();
-        return lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
+    var formatHasTime = (0, react_1.useMemo)(function () { return /(h{1,2}|H{1,2})/.test(dateFormat); }, [dateFormat]);
+    var formatHasSeconds = (0, react_1.useMemo)(function () { return /s{1,2}/i.test(dateFormat); }, [dateFormat]);
+    var shouldUseSelectTimePicker = formatHasTime && !formatHasSeconds;
+    var timePickerFormat = (0, react_1.useMemo)(function () {
+        var has24Hour = /H{1,2}/.test(dateFormat);
+        var has12Hour = !has24Hour && /h{1,2}/.test(dateFormat);
+        var hasMeridiem = /a/i.test(dateFormat);
+        if (has24Hour) {
+            return "HH:mm";
+        }
+        if (has12Hour) {
+            var base = "hh:mm";
+            return hasMeridiem ? "".concat(base, " a") : base;
+        }
+        return "HH:mm";
     }, [dateFormat]);
+    var startTimeBaseDate = (0, react_1.useMemo)(function () { var _a; return (_a = tempRangeStart !== null && tempRangeStart !== void 0 ? tempRangeStart : tempRangeEnd) !== null && _a !== void 0 ? _a : new Date(); }, [tempRangeStart, tempRangeEnd]);
+    var endTimeBaseDate = (0, react_1.useMemo)(function () { var _a; return (_a = tempRangeEnd !== null && tempRangeEnd !== void 0 ? tempRangeEnd : tempRangeStart) !== null && _a !== void 0 ? _a : new Date(); }, [tempRangeEnd, tempRangeStart]);
     (0, react_1.useEffect)(function () {
         if ((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to)) {
             var start = new Date(selectedRange.from);
@@ -176,25 +191,39 @@ var RangeDatePicker = function (props) {
             react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg" },
                 react_1.default.createElement(react_2.PopoverBody, null,
                     react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonthState(function (prev) { return updater(prev); }); }, today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }),
-                    formatHasTime && (react_1.default.createElement(react_2.Box, { mt: 4, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3 },
+                    formatHasTime && (react_1.default.createElement(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 },
                         react_1.default.createElement(react_2.Box, null,
-                            react_1.default.createElement(react_2.Box, { fontSize: "sm", color: "gray.600", mb: 1 }, "Start time"),
-                            react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempRangeStart, onChange: function (t) {
+                            react_1.default.createElement(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1 }, "Start time"),
+                            shouldUseSelectTimePicker ? (react_1.default.createElement(TimePicker_1.default, { date: startTimeBaseDate, onChange: function (updated) {
+                                    if (!tempRangeStart) {
+                                        setTempRangeStart(updated);
+                                        return;
+                                    }
+                                    var withStartDate = new Date(tempRangeStart.getFullYear(), tempRangeStart.getMonth(), tempRangeStart.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
+                                    setTempRangeStart(withStartDate);
+                                }, dateFormat: dateFormat, disabled: disabled || !tempRangeStart })) : (react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempRangeStart, onChange: function (t) {
                                     if (!t) {
                                         setTempRangeStart(null);
                                         return;
                                     }
-                                    setTempRangeStart(setTimeFrom(tempRangeStart, t));
-                                }, dateFormat: dateFormat.includes("HH") || dateFormat.includes("hh") ? "HH:mm" : "hh:mm a", disabled: disabled })),
+                                    setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
+                                }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart }))),
                         react_1.default.createElement(react_2.Box, null,
-                            react_1.default.createElement(react_2.Box, { fontSize: "sm", color: "gray.600", mb: 1 }, "End time"),
-                            react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempRangeEnd, onChange: function (t) {
+                            react_1.default.createElement(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1 }, "End time"),
+                            shouldUseSelectTimePicker ? (react_1.default.createElement(TimePicker_1.default, { date: endTimeBaseDate, onChange: function (updated) {
+                                    if (!tempRangeEnd) {
+                                        setTempRangeEnd(updated);
+                                        return;
+                                    }
+                                    var withEndDate = new Date(tempRangeEnd.getFullYear(), tempRangeEnd.getMonth(), tempRangeEnd.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
+                                    setTempRangeEnd(withEndDate);
+                                }, dateFormat: dateFormat, disabled: disabled || !tempRangeEnd })) : (react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempRangeEnd, onChange: function (t) {
                                     if (!t) {
                                         setTempRangeEnd(null);
                                         return;
                                     }
-                                    setTempRangeEnd(setTimeFrom(tempRangeEnd, t));
-                                }, dateFormat: dateFormat.includes("HH") || dateFormat.includes("hh") ? "HH:mm" : "hh:mm a", disabled: disabled })))),
+                                    setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
+                                }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd }))))),
                     react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: "gray.200" },
                         react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: handleClear }, "Clear"),
                         react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: requestClose }, "OK"))))),

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -966,7 +966,7 @@ var SingleDatePicker = function (props) {
             react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg" },
                 react_1.default.createElement(react_2.PopoverBody, null,
                     showDate && (react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonth(function (prev) { return updater(prev); }); }, today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })),
-                    showTime && (react_1.default.createElement(react_2.Box, { mt: showDate ? 4 : 0 }, resolvedPickerType === "time" ? (react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: function (updatedDate) {
+                    showTime && (react_1.default.createElement(react_2.Box, { mt: showDate ? 3 : 0 }, resolvedPickerType === "time" ? (react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: function (updatedDate) {
                             setTempDate(updatedDate);
                             setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
                             setIsTyping(false);
@@ -974,7 +974,7 @@ var SingleDatePicker = function (props) {
                             setTempDate(updatedDate);
                             setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
                             setIsTyping(false);
-                        } })))),
+                        }, disabled: disabled })))),
                     react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: "gray.200" },
                         react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
                                 setTempDate(null);

package/dist/Components/DatePicker/TimePicker.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var TimePicker = function (_a) {
-    var date = _a.date, onChange = _a.onChange, dateFormat = _a.dateFormat;
+    var date = _a.date, onChange = _a.onChange, dateFormat = _a.dateFormat, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
     var is12HourFormat = /(hh|h).*a/i.test(dateFormat);
     var deriveDisplayHour = function (rawHour) {
         if (!is12HourFormat)
@@ -35,9 +35,9 @@ var TimePicker = function (_a) {
         return mod === 0 ? 12 : mod;
     };
     var initialHour = deriveDisplayHour(date.getHours());
-    var _b = (0, react_1.useState)(initialHour), hour = _b[0], setHour = _b[1];
-    var _c = (0, react_1.useState)(date.getMinutes()), minute = _c[0], setMinute = _c[1];
-    var _d = (0, react_1.useState)(is12HourFormat ? (date.getHours() >= 12 ? "PM" : "AM") : ""), ampm = _d[0], setAmpm = _d[1];
+    var _c = (0, react_1.useState)(initialHour), hour = _c[0], setHour = _c[1];
+    var _d = (0, react_1.useState)(date.getMinutes()), minute = _d[0], setMinute = _d[1];
+    var _e = (0, react_1.useState)(is12HourFormat ? (date.getHours() >= 12 ? "PM" : "AM") : ""), ampm = _e[0], setAmpm = _e[1];
     (0, react_1.useEffect)(function () {
         var rawHour = date.getHours();
         setHour(deriveDisplayHour(rawHour));
@@ -75,13 +75,13 @@ var TimePicker = function (_a) {
         updateTime(hour, minute, newMeridiem);
     };
     var displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
-    return (react_1.default.createElement(react_2.HStack, { spacing: 2, mt: 4 },
-        react_1.default.createElement(react_2.Select, { value: displayHour, onChange: handleHourChange, w: "4rem" }, Array.from({ length: is12HourFormat ? 12 : 24 }, function (_, i) {
+    return (react_1.default.createElement(react_2.HStack, { spacing: 1.5, mt: 3 },
+        react_1.default.createElement(react_2.Select, { value: displayHour, onChange: handleHourChange, w: "3.5rem", size: "sm", isDisabled: disabled }, Array.from({ length: is12HourFormat ? 12 : 24 }, function (_, i) {
             var value = is12HourFormat ? i + 1 : i;
             return (react_1.default.createElement("option", { key: value, value: value }, value.toString().padStart(2, "0")));
         })),
-        react_1.default.createElement(react_2.Select, { value: minute, onChange: handleMinuteChange, w: "4rem" }, Array.from({ length: 60 }, function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, i.toString().padStart(2, "0"))); })),
-        is12HourFormat && (react_1.default.createElement(react_2.Select, { value: ampm, onChange: handleAmpmChange, w: "5rem" },
+        react_1.default.createElement(react_2.Select, { value: minute, onChange: handleMinuteChange, w: "3.5rem", size: "sm", isDisabled: disabled }, Array.from({ length: 60 }, function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, i.toString().padStart(2, "0"))); })),
+        is12HourFormat && (react_1.default.createElement(react_2.Select, { value: ampm, onChange: handleAmpmChange, w: "3.8rem", size: "sm", isDisabled: disabled },
             react_1.default.createElement("option", { value: "AM" }, "AM"),
             react_1.default.createElement("option", { value: "PM" }, "PM")))));
 };

package/dist/Components/DatePicker/TimePickerInput.js

@@ -126,7 +126,7 @@ var TimePickerInput = function (_a) {
     var is12Hour = (0, react_1.useMemo)(function () { return /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat); }, [dateFormat]);
     var placeholderText = (0, react_1.useMemo)(function () { return placeholder || formatToPlaceholder(dateFormat); }, [placeholder, dateFormat]);
     var ampmRef = (0, react_1.useRef)("AM");
-    var _f = (0, react_1.useState)(""), ampm = _f[0], setAmpm = _f[1];
+    var _f = (0, react_1.useState)("AM"), ampm = _f[0], setAmpm = _f[1];
     var setInputValueAndCaret = (0, react_1.useCallback)(function (formatted, caretDigitIndex) {
         requestAnimationFrame(function () {
             var el = inputRef.current;
@@ -156,6 +156,38 @@ var TimePickerInput = function (_a) {
         }
         return { digits: clamped, nextDigitIndex: nextDigitIndex };
     }, [dateFormat, is12Hour, onChange, setInputValueAndCaret]);
+    var updateAmpmValue = (0, react_1.useCallback)(function (next) {
+        if (!is12Hour)
+            return;
+        var upperNext = next.toUpperCase() === "PM" ? "PM" : "AM";
+        var formattedDigits = formatDigits(digitsRef.current);
+        ampmRef.current = upperNext;
+        setAmpm(upperNext);
+        if (digitsRef.current.length === 4) {
+            var parsed = (0, date_fns_1.parse)("".concat(formattedDigits, " ").concat(upperNext), dateFormat, new Date());
+            if ((0, date_fns_1.isValid)(parsed))
+                onChange(parsed);
+        }
+        var el = inputRef.current;
+        if (!el)
+            return;
+        if (isFocusedRef.current) {
+            el.value = formattedDigits;
+        }
+        else {
+            el.value = formattedDigits ? "".concat(formattedDigits, " ").concat(upperNext) : "";
+        }
+    }, [dateFormat, is12Hour, onChange]);
+    var toggleAmpm = (0, react_1.useCallback)(function () {
+        if (!is12Hour)
+            return;
+        var current = (ampmRef.current || ampm || "AM").toUpperCase();
+        var next = current === "AM" ? "PM" : "AM";
+        updateAmpmValue(next);
+    }, [ampm, is12Hour, updateAmpmValue]);
+    var setAmpmFromKey = (0, react_1.useCallback)(function (next) {
+        updateAmpmValue(next);
+    }, [updateAmpmValue]);
     var handleDigitInput = (0, react_1.useCallback)(function (digit) {
         var _a, _b;
         var el = inputRef.current;
@@ -274,11 +306,21 @@ var TimePickerInput = function (_a) {
             handleArrow("right");
             return;
         }
+        if (is12Hour && (key === "ArrowUp" || key === "ArrowDown")) {
+            e.preventDefault();
+            toggleAmpm();
+            return;
+        }
+        if (is12Hour && (key.toLowerCase() === "a" || key.toLowerCase() === "p")) {
+            e.preventDefault();
+            setAmpmFromKey(key.toLowerCase() === "a" ? "AM" : "PM");
+            return;
+        }
         if (key === "Tab" || key === "Shift" || key === "Enter" || key === "Escape") {
             return;
         }
         e.preventDefault();
-    }, [disabled, handleDigitInput, handleBackspace, handleDelete, handleArrow]);
+    }, [disabled, handleDigitInput, handleBackspace, handleDelete, handleArrow, is12Hour, toggleAmpm, setAmpmFromKey]);
     var handleFocus = (0, react_1.useCallback)(function () {
         setIsFocused(true);
         isFocusedRef.current = true;

package/dist/index.d.ts

@@ -9,7 +9,6 @@ import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
 import Card from "./Components/Card/Card";
 import Checkbox from "./Components/Checkbox/Checkbox";
 import ContactForm from "./Components/ContactForm/ContactForm";
-import DatePicker from "./Components/DatePicker/DatePicker";
 import Drawer, { DrawerHeader, DrawerBody, DrawerFooter } from "./Components/Drawer/Drawer";
 import Dropdown from "./Components/Dropdown/DropDown";
 import Editor from "./Components/Editor/Editor";
@@ -59,6 +58,6 @@ import { InputSwitch } from "./Components/Input/Switch/InputSwitch";
 import PaymentCard from "./Components/Card/PaymentCard/PaymentCard";
 import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart";
 import Notification from "./Components/Notification/Notification";
-import ThemeDatePicker from "./Components/DatePicker/ThemeDatePicker";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, ThemeDatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FileUploader, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+import DatePicker from "./Components/DatePicker/ThemeDatePicker";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FileUploader, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUploader = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.ThemeDatePicker = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = void 0;
+exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUploader = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -51,8 +51,7 @@ var Checkbox_1 = __importDefault(require("./Components/Checkbox/Checkbox"));
 exports.Checkbox = Checkbox_1.default;
 var ContactForm_1 = __importDefault(require("./Components/ContactForm/ContactForm"));
 exports.ContactForm = ContactForm_1.default;
-var DatePicker_1 = __importDefault(require("./Components/DatePicker/DatePicker"));
-exports.DatePicker = DatePicker_1.default;
+// import DatePicker from "./Components/DatePicker/DatePicker";
 var Drawer_1 = __importStar(require("./Components/Drawer/Drawer"));
 exports.Drawer = Drawer_1.default;
 Object.defineProperty(exports, "DrawerHeader", { enumerable: true, get: function () { return Drawer_1.DrawerHeader; } });
@@ -162,5 +161,5 @@ exports.ApexLineChart = ApexLineChart_1.default;
 var Notification_1 = __importDefault(require("./Components/Notification/Notification"));
 exports.Notification = Notification_1.default;
 var ThemeDatePicker_1 = __importDefault(require("./Components/DatePicker/ThemeDatePicker"));
-exports.ThemeDatePicker = ThemeDatePicker_1.default;
+exports.DatePicker = ThemeDatePicker_1.default;
 exports.default = withTheme_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.53",
+  "version": "2.2.55",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",