pixelize-design-library 2.3.6 → 2.3.8

package/dist/Components/DatePicker/CalendarPanel.js

@@ -1,44 +1,32 @@
 "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 });
 exports.CalendarPanel = void 0;
-var react_1 = __importDefault(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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var CalendarPanel = function (_a) {
-    var _b;
-    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, hoveredDate = _a.hoveredDate, onDayHover = _a.onDayHover, renderWeekdays = _a.renderWeekdays;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var rangeBg = theme.colors.primary.opacity[16];
-    var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, }) => {
+    var _a;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rangeBg = theme.colors.primary.opacity[16];
+    const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
         currentMonth.getMonth() === today.getMonth();
     // Effective range end: the committed end, or a tentative end from hover.
-    var tentativeEnd = isRange && tempRangeStart && !tempRangeEnd && hoveredDate && isAfter(hoveredDate, tempRangeStart)
+    const tentativeEnd = isRange && tempRangeStart && !tempRangeEnd && hoveredDate && isAfter(hoveredDate, tempRangeStart)
         ? hoveredDate
         : null;
-    var rangeStart = tempRangeStart;
-    var rangeEnd = tempRangeEnd !== null && tempRangeEnd !== void 0 ? tempRangeEnd : tentativeEnd;
-    var isTentative = !tempRangeEnd && !!tentativeEnd;
-    var hasRange = !!(rangeStart && rangeEnd && !isSameDay(rangeStart, rangeEnd));
-    var selectStyles = {
+    const rangeStart = tempRangeStart;
+    const rangeEnd = tempRangeEnd !== null && tempRangeEnd !== void 0 ? tempRangeEnd : tentativeEnd;
+    const isTentative = !tempRangeEnd && !!tentativeEnd;
+    const hasRange = !!(rangeStart && rangeEnd && !isSameDay(rangeStart, rangeEnd));
+    const selectStyles = {
         border: "1px solid",
-        borderColor: (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[300],
+        borderColor: (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300],
         borderRadius: "md",
         px: 2,
         py: 1,
@@ -52,7 +40,7 @@ var CalendarPanel = function (_a) {
         _focus: {
             outline: "none",
             borderColor: theme.colors.primary[500],
-            boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
+            boxShadow: `0 0 0 1px ${theme.colors.primary[500]}`,
         },
         style: {
             WebkitAppearance: "menulist",
@@ -60,26 +48,26 @@ var CalendarPanel = function (_a) {
             appearance: "menulist",
         },
     };
-    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 = isSameDay(thisDay, today);
-                var isStart = !!(isRange && rangeStart && isSameDay(thisDay, rangeStart));
-                var isEnd = !!(isRange && rangeEnd && isSameDay(thisDay, rangeEnd));
-                var isInRange = !!(isRange && rangeStart && rangeEnd && isAfter(thisDay, rangeStart) && isBefore(thisDay, rangeEnd));
-                var isSelected = !!(!isRange && tempDate && isSameDay(thisDay, tempDate));
-                var isTentativeEnd = isEnd && isTentative;
-                var circleSolid = !!(isSelected || (isRange && isStart) || (isEnd && !isTentative));
-                var disabled = !isInCurrentMonth ||
+            const days = [];
+            for (let i = 0; i < 7; i++) {
+                const thisDay = day;
+                const isInCurrentMonth = thisDay.getMonth() === currentMonth.getMonth();
+                const isToday = isSameDay(thisDay, today);
+                const isStart = !!(isRange && rangeStart && isSameDay(thisDay, rangeStart));
+                const isEnd = !!(isRange && rangeEnd && isSameDay(thisDay, rangeEnd));
+                const isInRange = !!(isRange && rangeStart && rangeEnd && isAfter(thisDay, rangeStart) && isBefore(thisDay, rangeEnd));
+                const isSelected = !!(!isRange && tempDate && isSameDay(thisDay, tempDate));
+                const isTentativeEnd = isEnd && isTentative;
+                const circleSolid = !!(isSelected || (isRange && isStart) || (isEnd && !isTentative));
+                const disabled = !isInCurrentMonth ||
                     !!(minDate && isBefore(thisDay, minDate)) ||
                     !!(maxDate && isAfter(thisDay, maxDate)) ||
                     !!(disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
@@ -87,70 +75,55 @@ var CalendarPanel = function (_a) {
                     !!(disableToday && isToday);
                 // Connected range band painted on the cell background; start/end use a
                 // half gradient so the band meets the solid day circle cleanly.
-                var cellBg = void 0;
+                let cellBg;
                 if (isRange && hasRange) {
                     if (isInRange)
                         cellBg = rangeBg;
                     else if (isStart && isEnd)
                         cellBg = undefined;
                     else if (isStart)
-                        cellBg = "linear-gradient(to right, transparent 50%, ".concat(rangeBg, " 50%)");
+                        cellBg = `linear-gradient(to right, transparent 50%, ${rangeBg} 50%)`;
                     else if (isEnd)
-                        cellBg = "linear-gradient(to right, ".concat(rangeBg, " 50%, transparent 50%)");
+                        cellBg = `linear-gradient(to right, ${rangeBg} 50%, transparent 50%)`;
                 }
-                var circleColor = circleSolid
+                const circleColor = circleSolid
                     ? theme.colors.white
                     : isInCurrentMonth
                         ? theme.colors.text[700]
                         : theme.colors.gray[400];
-                var circleBorder = circleSolid
+                const circleBorder = circleSolid
                     ? "1px solid transparent"
                     : isTentativeEnd
-                        ? "1px solid ".concat(theme.colors.primary[400])
+                        ? `1px solid ${theme.colors.primary[400]}`
                         : isToday
-                            ? "1px solid ".concat(theme.colors.primary[300])
+                            ? `1px solid ${theme.colors.primary[300]}`
                             : "1px solid transparent";
-                days.push(react_1.default.createElement(react_2.Box, { key: thisDay.toString(), h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined },
-                    react_1.default.createElement(react_2.Box, { as: "button", type: "button", disabled: disabled, onClick: function () { return !disabled && onDaySelect(new Date(thisDay)); }, onMouseEnter: function () { return !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))); }, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? theme.colors.primary[500] : "transparent", color: circleColor, border: circleBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", disabled: disabled, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? theme.colors.primary[500] : "transparent", color: circleColor, border: circleBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
                             ? {}
                             : circleSolid
                                 ? { bg: theme.colors.primary[600] }
-                                : { bg: rangeBg } }, (0, date_fns_1.format)(thisDay, "d"))));
+                                : { bg: rangeBg }, 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: 0 }, days));
+            rows.push((0, jsx_runtime_1.jsx)(react_1.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));
         }
         return rows;
     };
-    return (react_1.default.createElement(react_2.Box, null,
-        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1 },
-            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, 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: 16 })),
-            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0 },
-                react_1.default.createElement(react_2.Box, __assign({ 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); });
-                    } }, selectStyles), 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(react_2.Box, __assign({ 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); });
-                    } }, selectStyles), 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, flexShrink: 0 },
-                !isRange && !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, flexShrink: 0 }, isDisabled: disableToday }, "Today")),
-                react_1.default.createElement(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, 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: 16 })))), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, 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: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.gray[500], py: 1 }, day)); }))),
-        react_1.default.createElement(react_2.Box, { onMouseLeave: function () { return onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null); } }, renderDays())));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1)), "aria-label": "Previous month", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, { size: 16 }) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "select", value: currentMonth.getMonth(), onChange: (e) => {
+                                    const newMonth = parseInt(e.target.value, 10);
+                                    setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
+                                }, ...selectStyles, 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)(react_1.Box, { as: "select", value: currentMonth.getFullYear(), onChange: (e) => {
+                                    const newYear = parseInt(e.target.value, 10);
+                                    setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
+                                }, ...selectStyles, 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_1.Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0, children: [!isRange && !isViewingCurrentMonth && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "xs", onClick: () => {
+                                    setCurrentMonth(() => new Date(today.getFullYear(), today.getMonth(), 1));
+                                    if (!disableToday) {
+                                        onDaySelect(new Date(today));
+                                    }
+                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, { size: 16 }) })] })] }), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : ((0, jsx_runtime_1.jsx)(react_1.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.gray[500], py: 1, children: day }, day))) })), (0, jsx_runtime_1.jsx)(react_1.Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] }));
 };
 exports.CalendarPanel = CalendarPanel;
 exports.default = exports.CalendarPanel;

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

@@ -1,3 +1,3 @@
-import React from "react";
 import { DatePickerProps } from "./DatePickerProps";
-export default function CustomDatePicker(props: DatePickerProps): React.JSX.Element;
+export default function CustomDatePicker(props: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AA4BA,OAAO,EACL,eAAe,EAKhB,MAAM,mBAAmB,CAAC;AAc3B,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,eAAe,2CAya9D"}