pixelize-design-library 2.2.52 → 2.2.54

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+const DefaultLogo = () => {
+  const theme = useCustomTheme();
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill={theme.colors.black}
+      />
+    </svg>
+
+  )
+};
+
+export default DefaultLogo;

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ApexBarChart from './ApexBarChart';
+// import { ApexBarChartProps } from './ApexBarChartProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChart.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ApexDonutChartProps } from "./ApexDonutChartProps";
+declare const ApexDonutChart: ({ data, labels, title, titlePosition, height, width, donutColors, chartColor, titleStyle, legendStyle, }: ApexDonutChartProps) => React.JSX.Element;
+export default ApexDonutChart;

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChart.js

@@ -0,0 +1,58 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+var ApexDonutChart = function (_a) {
+    var _b;
+    var data = _a.data, labels = _a.labels, title = _a.title, _c = _a.titlePosition, titlePosition = _c === void 0 ? "center" : _c, _d = _a.height, height = _d === void 0 ? 400 : _d, _e = _a.width, width = _e === void 0 ? 500 : _e, donutColors = _a.donutColors, chartColor = _a.chartColor, _f = _a.titleStyle, titleStyle = _f === void 0 ? {
+        color: "#3182ce",
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+    } : _f, _g = _a.legendStyle, legendStyle = _g === void 0 ? {
+        colors: "#000",
+        position: "bottom",
+        useSeriesColors: false,
+    } : _g;
+    var options = {
+        chart: {
+            type: "donut",
+        },
+        labels: labels,
+        colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"],
+        legend: {
+            position: legendStyle.position,
+            labels: {
+                colors: legendStyle.colors,
+                useSeriesColors: legendStyle.useSeriesColors,
+            },
+        },
+        title: {
+            text: title,
+            align: titlePosition,
+            style: __assign(__assign({}, titleStyle), { fontSize: (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize)
+                    ? String(titleStyle.fontSize) // ✅ ensures string if number passed
+                    : undefined }),
+        },
+        dataLabels: {
+            enabled: true,
+        },
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: "donut", height: height, width: width })));
+};
+exports.default = ApexDonutChart;

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChartProps.d.ts

@@ -0,0 +1,21 @@
+export type ApexDonutChartProps = {
+    data: number[];
+    labels: string[];
+    title?: string;
+    titlePosition?: "left" | "center" | "right";
+    height?: number;
+    width?: number;
+    donutColors?: string[];
+    chartColor?: string[];
+    titleStyle?: {
+        color?: string;
+        fontSize?: string | number;
+        fontWeight?: number | string;
+        fontFamily?: string;
+    };
+    legendStyle?: {
+        colors?: string | string[];
+        useSeriesColors?: boolean;
+        position?: "top" | "right" | "bottom" | "left";
+    };
+};

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChartProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ApexPieChart from './ApexPieChart';
+// import { ApexPieChartProps } from './ApexPieChartProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/DatePicker/CalendarPanel.js

@@ -13,6 +13,8 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var CalendarPanel = function (_a) {
     var currentMonth = _a.currentMonth, setCurrentMonth = _a.setCurrentMonth, today = _a.today, isRange = _a.isRange, tempDate = _a.tempDate, tempRangeStart = _a.tempRangeStart, tempRangeEnd = _a.tempRangeEnd, isSameDay = _a.isSameDay, isBefore = _a.isBefore, isAfter = _a.isAfter, minDate = _a.minDate, maxDate = _a.maxDate, disablePastDates = _a.disablePastDates, disableFutureDates = _a.disableFutureDates, disableToday = _a.disableToday, onDaySelect = _a.onDaySelect, renderWeekdays = _a.renderWeekdays;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+        currentMonth.getMonth() === today.getMonth();
     var renderDays = function () {
         var monthStart = (0, date_fns_1.startOfMonth)(currentMonth);
         var monthEnd = (0, date_fns_1.endOfMonth)(currentMonth);
@@ -40,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",
@@ -70,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",
@@ -77,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",
@@ -89,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",
@@ -96,8 +102,15 @@ var CalendarPanel = function (_a) {
                     var year = new Date().getFullYear() - 50 + i;
                     return (react_1.default.createElement("option", { key: year, value: year }, year));
                 }))),
-            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)); }))),
+            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1 },
+                !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.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/DatePicker.js

@@ -75,6 +75,8 @@ function CustomDatePicker(props) {
     var _m = (0, react_1.useState)(rangeStart), tempRangeStart = _m[0], setTempRangeStart = _m[1];
     var _o = (0, react_1.useState)(rangeEnd), tempRangeEnd = _o[0], setTempRangeEnd = _o[1];
     var popoverRef = (0, react_1.useRef)(null);
+    var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+        currentMonth.getMonth() === today.getMonth();
     var handleOpen = function () {
         if (!isRange && !selectedDate) {
             // setTempDate(new Date());
@@ -234,8 +236,15 @@ function CustomDatePicker(props) {
                                     var year = new Date().getFullYear() - 50 + i;
                                     return (react_1.default.createElement("option", { key: year, value: year }, year));
                                 }))),
-                            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.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

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

@@ -266,10 +266,10 @@ var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hou
     return { value: buf, completed: buf.length >= segmentLength };
 };
 var SingleDatePicker = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    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, placeholderText = props.placeholderText, _k = props.dateFormat, dateFormat = _k === void 0 ? "dd/MM/yyyy" : _k, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _l = props.autoComplete, autoComplete = _l === void 0 ? "off" : _l, disabled = props.disabled, _m = props.width, width = _m === void 0 ? "100%" : _m, _o = props.disableToday, disableToday = _o === void 0 ? false : _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    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, placeholderText = props.placeholderText, _l = props.dateFormat, dateFormat = _l === void 0 ? "dd/MM/yyyy" : _l, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _m = props.autoComplete, autoComplete = _m === void 0 ? "off" : _m, disabled = props.disabled, _o = props.width, width = _o === void 0 ? "100%" : _o, _p = props.disableToday, disableToday = _p === void 0 ? false : _p;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _p = (0, react_2.useDisclosure)(), isOpen = _p.isOpen, onOpen = _p.onOpen, onClose = _p.onClose;
+    var _q = (0, react_2.useDisclosure)(), isOpen = _q.isOpen, onOpen = _q.onOpen, onClose = _q.onClose;
     var inputRef = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
@@ -327,18 +327,18 @@ var SingleDatePicker = function (props) {
         resolvedDateFormat.toLowerCase().includes("mm") ||
         resolvedDateFormat.toLowerCase().includes("ss");
     var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
-    var _q = (0, react_1.useState)(selectedDate
+    var _r = (0, react_1.useState)(selectedDate
         ? disableToday && (0, date_fns_1.isSameDay)(selectedDate, today)
             ? tomorrow
             : selectedDate
         : disableToday
             ? tomorrow
-            : today), currentMonth = _q[0], setCurrentMonth = _q[1];
-    var _r = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _r[0], setTempDate = _r[1];
-    var _s = (0, react_1.useState)(""), inputValue = _s[0], setInputValue = _s[1];
-    var _t = (0, react_1.useState)(false), isTyping = _t[0], setIsTyping = _t[1];
-    var _u = (0, react_1.useState)(false), isMaskActive = _u[0], setIsMaskActive = _u[1];
-    var _v = (0, react_1.useState)(0), currentSegmentIndex = _v[0], setCurrentSegmentIndex = _v[1];
+            : today), currentMonth = _r[0], setCurrentMonth = _r[1];
+    var _s = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _s[0], setTempDate = _s[1];
+    var _t = (0, react_1.useState)(""), inputValue = _t[0], setInputValue = _t[1];
+    var _u = (0, react_1.useState)(false), isTyping = _u[0], setIsTyping = _u[1];
+    var _v = (0, react_1.useState)(false), isMaskActive = _v[0], setIsMaskActive = _v[1];
+    var _w = (0, react_1.useState)(0), currentSegmentIndex = _w[0], setCurrentSegmentIndex = _w[1];
     var lastSegmentIndexRef = (0, react_1.useRef)(0);
     var resetCommitGuardAndOpen = function () {
         didCommitRef.current = false;
@@ -948,11 +948,11 @@ var SingleDatePicker = function (props) {
                         react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, borderColor: error ? (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500] : undefined, _focus: {
                                 borderColor: error ? (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[500] : theme.colors.primary[500],
                                 boxShadow: error
-                                    ? "0 0 0 1px ".concat((_g = (_f = theme.colors.semantic) === null || _f === void 0 ? void 0 : _f.error) === null || _g === void 0 ? void 0 : _g[500])
-                                    : "0 0 0 1px ".concat(theme.colors.primary[500]),
+                                    ? "0 0 0 0.125rem ".concat((_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error)
+                                    : "0 0 0 0.125rem ".concat((_g = theme.colors.boxShadow) === null || _g === void 0 ? void 0 : _g.primary),
                             }, _hover: {
                                 borderColor: error ? (_j = (_h = theme.colors.semantic) === null || _h === void 0 ? void 0 : _h.error) === null || _j === void 0 ? void 0 : _j[500] : undefined,
-                            }, cursor: "text" }),
+                            }, cursor: "text", boxShadow: error ? "0 0 0 0.125rem ".concat((_k = theme.colors.boxShadow) === null || _k === void 0 ? void 0 : _k.error) : "" }),
                         react_1.default.createElement(react_2.InputRightElement, { pr: 3, pointerEvents: "auto", onClick: function (e) {
                                 e.stopPropagation();
                                 if (!isOpen) {
@@ -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/TimeOnlyPicker.js

@@ -69,6 +69,9 @@ var TimeOnlyPicker = function (props) {
         // Do not close; user asked only outside-click and OK to close
     };
     var handleOk = function () {
+        var commitValue = tempDate !== null && tempDate !== void 0 ? tempDate : new Date(resolvedTempDate.getFullYear(), resolvedTempDate.getMonth(), resolvedTempDate.getDate(), resolvedTempDate.getHours(), resolvedTempDate.getMinutes(), resolvedTempDate.getSeconds(), resolvedTempDate.getMilliseconds());
+        setTempDate(commitValue);
+        props.onChange(commitValue);
         onClose();
     };
     (0, react_1.useEffect)(function () {

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.5rem", size: "sm", isDisabled: disabled },
             react_1.default.createElement("option", { value: "AM" }, "AM"),
             react_1.default.createElement("option", { value: "PM" }, "PM")))));
 };