pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/Components/CustomModulesTable/DeleteModuleModal.js

@@ -8,9 +8,10 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const Button_1 = __importDefault(require("../Button/Button"));
+const ConfirmDialog_1 = __importDefault(require("../ConfirmDialog/ConfirmDialog"));
+/** Confirmation dialog for deleting a module; used by CustomModulesTable. */
 const DeleteModuleModal = ({ isOpen, onClose, moduleName, isLoading, onConfirm, labels, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: colors.semantic.error[50], color: (0, accentText_1.accentTextOnCanvas)(colors.semantic.error, colors.semantic.error[50]), children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeletion, iconBg: colors.semantic.error[50], iconColor: (0, accentText_1.accentTextOnCanvas)(colors.semantic.error, colors.semantic.error[50]), cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: [labels.deleteConfirmPrefix, " ", (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 600, color: colors.text[800], children: moduleName }), "?"] }) }));
 };
 exports.default = DeleteModuleModal;

package/dist/Components/CustomModulesTable/EditModuleModal.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { EditModuleModalProps } from "./CustomModulesTableProps";
+/** Dialog with one text field to rename a module; used by CustomModulesTable. */
 declare const EditModuleModal: React.FC<EditModuleModalProps>;
 export default EditModuleModal;

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -7,7 +7,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
+/** Dialog with one text field to rename a module; used by CustomModulesTable. */
 const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, labels, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [name, setName] = (0, react_1.useState)(initialName);
@@ -15,10 +17,8 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: colors.background[50], children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
-                                // [200] is the decorative divider rung (~1.2:1, correct for the ModalHeader border
-                                // above) — a real control's resting outline needs 1.4.11's 3:1, which is what every
-                                // other input in this library (TextInput, NumberInput, DatePicker) reads from [800].
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "xl", overflow: "hidden", bg: colors.surfaceRaised, children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, "aria-label": labels.moduleNamePlaceholder, 
+                                // NOTE: [200] is the decorative divider rung — a real control's outline needs 1.4.11's 3:1, from [800].
                                 borderColor: colors.boxborder[500], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };
 exports.default = EditModuleModal;

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

@@ -1,4 +1,6 @@
 import React from "react";
+import { type DayStates, type RenderDayContent } from "./dayStates";
+/** Month grid state and handlers lifted from DatePicker; single-date or range. */
 export type CalendarPanelProps = {
     currentMonth: Date;
     setCurrentMonth: (updater: (prev: Date) => Date) => void;
@@ -19,6 +21,11 @@ export type CalendarPanelProps = {
     hoveredDate?: Date | null;
     onDayHover?: (d: Date | null) => void;
     renderWeekdays?: React.ReactNode;
+    /** Marks individual days (weekly off, holiday, …). See `dayStates.ts`. Omit for the plain grid. */
+    dayStates?: DayStates;
+    /** Custom content inside a day cell, replacing that day's built-in marker dot. */
+    renderDayContent?: RenderDayContent;
 };
+/** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
 export declare const CalendarPanel: React.FC<CalendarPanelProps>;
 export default CalendarPanel;

package/dist/Components/DatePicker/CalendarPanel.js

@@ -10,8 +10,13 @@ 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 accentText_1 = require("../../Theme/tokens/builders/accentText");
-const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, }) => {
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const dayStates_1 = require("./dayStates");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_COLOR_TRANSITION = (0, motion_1.transitionFor)(["background", "color"]);
+/** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
+const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, dayStates, renderDayContent, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rangeBg = theme.colors.primary.opacity[16];
     const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
@@ -39,11 +44,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
         bg: theme.colors.background[50],
         outline: "none",
         _hover: { borderColor: theme.colors.primary[300] },
-        _focus: {
-            outline: "none",
-            borderColor: theme.colors.primary[500],
-            boxShadow: `0 0 0 1px ${theme.colors.primary[500]}`,
-        },
+        _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) },
         style: {
             WebkitAppearance: "menulist",
             MozAppearance: "menulist",
@@ -51,6 +52,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
         },
     };
     const renderDays = () => {
+        var _a;
         const monthStart = (0, date_fns_1.startOfMonth)(currentMonth);
         const monthEnd = (0, date_fns_1.endOfMonth)(currentMonth);
         const startDate = (0, date_fns_1.startOfWeek)(monthStart);
@@ -69,12 +71,17 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                 const isSelected = !!(!isRange && tempDate && isSameDay(thisDay, tempDate));
                 const isTentativeEnd = isEnd && isTentative;
                 const circleSolid = !!(isSelected || (isRange && isStart) || (isEnd && !isTentative));
+                // Marking is not disabling: only the `disabled` state key blocks selection, and only
+                // because the caller asked for it by name.
+                const states = (_a = dayStates === null || dayStates === void 0 ? void 0 : dayStates(thisDay)) !== null && _a !== void 0 ? _a : [];
+                const stateVisual = states.length ? (0, dayStates_1.resolveDayStateVisual)(states, theme.colors) : null;
                 const disabled = !isInCurrentMonth ||
                     !!(minDate && isBefore(thisDay, minDate)) ||
                     !!(maxDate && isAfter(thisDay, maxDate)) ||
                     !!(disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
                     !!(disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
-                    !!(disableToday && isToday);
+                    !!(disableToday && isToday) ||
+                    !!(stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.blocksSelection);
                 // Connected range band painted on the cell background; start/end use a
                 // half gradient so the band meets the solid day circle cleanly.
                 let cellBg;
@@ -88,41 +95,54 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                     else if (isEnd)
                         cellBg = `linear-gradient(to right, ${rangeBg} 50%, transparent 50%)`;
                 }
-                // Solid fill (selected/range-endpoint) needs the ink checked against that
-                // specific fill — `primary[500]` doesn't reliably clear AA for white text on
-                // every brand/mode (same gap the solid Button variant already accounts for).
-                const solidFill = theme.colors.primary[500];
-                const solidHoverFill = theme.colors.primary[600];
+                // Selection feedback outranks a state tint — the band is what tells the user what they picked.
+                if (!cellBg && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.cellBg))
+                    cellBg = stateVisual.cellBg;
+                // NOTE: primary[500] doesn't reliably clear AA for white text on every brand — same gap Button accounts for.
+                const primarySolid = (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
+                const solidFill = primarySolid.fill;
+                const solidHoverFill = primarySolid.hoverFill;
                 const circleColor = circleSolid
-                    ? (0, accentText_1.onFilled)(solidFill, theme.colors.white, theme.colors.black)
+                    ? primarySolid.color
                     : isInCurrentMonth
                         ? theme.colors.text[700]
                         : theme.colors.gray[400];
-                const circleHoverColor = circleSolid
-                    ? (0, accentText_1.onFilled)(solidHoverFill, theme.colors.white, theme.colors.black)
-                    : circleColor;
+                const circleHoverColor = circleSolid ? primarySolid.hoverColor : circleColor;
                 const circleBorder = circleSolid
                     ? "1px solid transparent"
                     : isTentativeEnd
                         ? `1px solid ${theme.colors.primary[400]}`
                         : isToday
-                            ? `1px solid ${theme.colors.primary[300]}`
+                            // primary[300] falls under 3:1 against surfaceRaised in several dark palettes; 500 clears it everywhere.
+                            ? `1px solid ${theme.colors.primary[500]}`
                             : "1px solid transparent";
-                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 ? solidFill : "transparent", color: circleColor, border: circleBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                // A filled circle owns its own ink (checked against that fill by `onFilled`), so a state
+                // never repaints a selected day — it would undo that contrast guarantee.
+                const dayColor = !circleSolid && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.color) ? stateVisual.color : circleColor;
+                const dayBorder = !circleSolid && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.border) ? stateVisual.border : circleBorder;
+                const customContent = renderDayContent ? renderDayContent(thisDay, states) : null;
+                const markerColor = customContent == null && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.markerColor) ? stateVisual.markerColor : null;
+                const hasDayOverlay = customContent != null || markerColor != null;
+                const dayLabel = dayStates
+                    ? (0, dayStates_1.dayAccessibleName)((0, date_fns_1.format)(thisDay, "d MMMM yyyy"), states)
+                    : (0, date_fns_1.format)(thisDay, "d MMMM yyyy");
+                days.push((0, jsx_runtime_1.jsx)(react_1.Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? (0, dayStates_1.dayStateClassName)(states) : undefined, "aria-label": dayLabel, "aria-selected": isSelected || isStart || isEnd || undefined, "aria-current": isToday ? "date" : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs-plus", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: BACKGROUND_COLOR_TRANSITION, _hover: disabled
                             ? {}
                             : circleSolid
                                 ? { bg: solidHoverFill, color: circleHoverColor }
-                                : { bg: rangeBg }, children: (0, date_fns_1.format)(thisDay, "d") }) }, thisDay.toString()));
+                                : { bg: rangeBg }, children: [(0, date_fns_1.format)(thisDay, "d"), hasDayOverlay && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__content`, position: "absolute", left: 0, right: 0, bottom: "px", display: "flex", alignItems: "flex-end", justifyContent: "center", lineHeight: "1", fontSize: "0.5rem", 
+                                // The overlay is decoration: clicks belong to the day button under it.
+                                pointerEvents: "none", children: customContent !== null && customContent !== void 0 ? customContent : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: `${dayStates_1.DAY_CLASS}__marker`, w: "0.25rem", h: "0.25rem", borderRadius: "full", bg: markerColor })) }))] }) }, thisDay.toString()));
                 day = (0, date_fns_1.addDays)(day, 1);
             }
-            rows.push((0, jsx_runtime_1.jsx)(react_1.Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));
+            rows.push((0, jsx_runtime_1.jsx)(react_1.Box, { role: "row", display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));
         }
         return rows;
     };
-    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) => {
+    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", "aria-label": "Month", 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) => {
+                                }, ...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", "aria-label": "Year", 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) => {
@@ -133,7 +153,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
                                     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.textMuted, 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() })] }));
+                                }, "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 }) })] })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { role: "grid", "aria-label": "Calendar", children: [renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "row", display: "grid", gridTemplateColumns: "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, { role: "columnheader", textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.textMuted, 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,2 +1,5 @@
-import { DatePickerProps } from "./DatePickerProps";
-export default function CustomDatePicker(props: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+import { RangeDatePickerProps, SingleDatePickerDateProps } from "./DatePickerProps";
+/** Legacy pre-split implementation, still used internally by Table's filter pane — new code should use ThemeDatePicker (exported as DatePicker). Never supported `valueFormat="iso"`. */
+declare function CustomDatePicker(props: SingleDatePickerDateProps): JSX.Element;
+declare function CustomDatePicker(props: RangeDatePickerProps): JSX.Element;
+export default CustomDatePicker;

package/dist/Components/DatePicker/DatePicker.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = CustomDatePicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
@@ -12,21 +11,17 @@ const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const FormLabel_1 = require("../Common/FormLabel");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
-const inferPickerTypeFromFormat = (formatStr) => {
-    const lower = formatStr.toLowerCase();
-    const hasTime = lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
-    const hasDate = lower.includes("d") && lower.includes("m") && lower.includes("y");
-    if (hasTime && hasDate)
-        return "datetime";
-    if (hasTime)
-        return "time";
-    return "date";
-};
+const pickerField_1 = require("./pickerField");
+const useOutsideMouseDown_1 = require("../../Hooks/useOutsideMouseDown");
 function CustomDatePicker(props) {
-    var _a, _b;
-    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText = "Select a date", dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
+    var _a, _b, _c;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", width = "100%", disableToday = false, size = controlSizes_1.DEFAULT_CONTROL_SIZE, } = props;
+    const aliases = (0, pickerField_1.resolvePickerAliases)(props);
+    const disabled = aliases.isDisabled;
+    const placeholderText = (_a = aliases.placeholder) !== null && _a !== void 0 ? _a : "Select a date";
     const singleProps = !isRange ? props : null;
     const rangeProps = isRange ? props : null;
     const emitSingle = (0, react_1.useCallback)((date) => {
@@ -37,18 +32,15 @@ function CustomDatePicker(props) {
     };
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
-    const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
+    const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : (0, pickerField_1.inferPickerTypeFromFormat)(dateFormat);
     const inputRef = (0, react_1.useRef)(null);
     const today = new Date();
     const tomorrow = (0, date_fns_1.addDays)(today, 1);
     const showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
     const showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
     const selectedDate = singleProps !== null
-        ? (_b = ((_a = singleProps.value) !== null && _a !== void 0 ? _a : singleProps.selectedDate)) !== null && _b !== void 0 ? _b : null
+        ? (_c = ((_b = singleProps.value) !== null && _b !== void 0 ? _b : singleProps.selectedDate)) !== null && _c !== void 0 ? _c : null
         : null;
-    // const [currentMonth, setCurrentMonth] = useState<Date>(
-    //   isRange ? new Date() : selectedDate ?? new Date()
-    // );
     const [currentMonth, setCurrentMonth] = (0, react_1.useState)(isRange ? new Date() :
         selectedDate
             ? (disableToday && (0, date_fns_1.isSameDay)(selectedDate, today) ? tomorrow : selectedDate)
@@ -57,11 +49,6 @@ function CustomDatePicker(props) {
     const [rangeEnd, setRangeEnd] = (0, react_1.useState)(null);
     const [selectingStart, setSelectingStart] = (0, react_1.useState)(true);
     const [tempDate, setTempDate] = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
-    //   const [tempDate, setTempDate] = useState<Date | null>(
-    //   selectedDate
-    //     ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
-    //     : (disableToday ? tomorrow : null)
-    // );
     const [tempRangeStart, setTempRangeStart] = (0, react_1.useState)(rangeStart);
     const [tempRangeEnd, setTempRangeEnd] = (0, react_1.useState)(rangeEnd);
     const popoverRef = (0, react_1.useRef)(null);
@@ -69,36 +56,44 @@ function CustomDatePicker(props) {
         currentMonth.getMonth() === today.getMonth();
     const handleOpen = () => {
         if (!isRange && !selectedDate) {
-            // setTempDate(new Date());
             setTempDate(disableToday ? tomorrow : new Date());
         }
         if (showTime) {
-            // setTempDate(new Date()); // add new
-            //  setTempDate(disableToday ? tomorrow : new Date());
-            // console.log(selectedDate,"selectedDateselectedDate")
             setTempDate(disableToday ? tomorrow : selectedDate ? selectedDate : new Date());
         }
         onOpen();
     };
+    const openAtPress = (0, react_1.useRef)(false);
+    const handleTriggerClick = () => {
+        const wasOpen = openAtPress.current;
+        openAtPress.current = false;
+        if (wasOpen)
+            onClose();
+        else
+            handleOpen();
+    };
+    const handleTriggerKeyDown = (event) => {
+        if (isOpen && event.key === "Escape") {
+            onClose();
+            return;
+        }
+        if (isOpen || (event.key !== "Enter" && event.key !== "ArrowDown"))
+            return;
+        event.preventDefault();
+        handleOpen();
+    };
     (0, react_1.useEffect)(() => {
         if (!isRange) {
             if (selectedDate instanceof Date) {
                 setTempDate(new Date(selectedDate));
-                // const corrected = disableToday && isSameDay(selectedDate, today)
-                //   ? tomorrow
-                //   : selectedDate;
-                // setTempDate(new Date(corrected));
             }
             else {
                 setTempDate(null);
-                // setTempDate(disableToday ? tomorrow : null);
             }
         }
     }, [selectedDate, isRange, disableToday]);
     const handleDaySelect = (day) => {
-        // const updated = new Date(day);
         let updated = new Date(day);
-        // 👇 Redirect selection from today → tomorrow
         if (disableToday && (0, date_fns_1.isSameDay)(updated, today)) {
             updated = tomorrow;
         }
@@ -177,32 +172,17 @@ function CustomDatePicker(props) {
         : tempDate
             ? (0, date_fns_1.format)(tempDate, dateFormat)
             : "";
-    (0, react_1.useEffect)(() => {
-        const handleClickOutside = (event) => {
-            var _a;
-            if (popoverRef.current &&
-                !popoverRef.current.contains(event.target) &&
-                !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                if (tempDate) {
-                    emitSingle(tempDate); // commit latest temp on outside click
-                }
-                onClose();
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        else {
-            document.removeEventListener("mousedown", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen, onClose, tempDate, props, emitSingle]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { onClick: handleOpen, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { appendToParentPortal: false, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [showDate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.subMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, {}) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)("select", { value: currentMonth.getMonth(), onChange: (e) => {
+    (0, useOutsideMouseDown_1.useOutsideMouseDown)([popoverRef, inputRef], () => {
+        if (!popoverRef.current)
+            return;
+        if (tempDate)
+            emitSingle(tempDate);
+        onClose();
+    }, { enabled: isOpen });
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { onMouseDown: () => { openAtPress.current = isOpen; }, onClick: handleTriggerClick, onKeyDown: handleTriggerKeyDown, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size, "aria-haspopup": "dialog" }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { appendToParentPortal: false, children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [showDate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", "aria-label": "Previous month", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.subMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeftIcon, {}) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)("select", { "aria-label": "Month", value: currentMonth.getMonth(), onChange: (e) => {
                                                                     const newMonth = parseInt(e.target.value, 10);
                                                                     setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
-                                                                }, children: Array.from({ length: 12 }).map((_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM") }, i))) }), (0, jsx_runtime_1.jsx)("select", { value: currentMonth.getFullYear(), onChange: (e) => {
+                                                                }, children: Array.from({ length: 12 }).map((_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM") }, i))) }), (0, jsx_runtime_1.jsx)("select", { "aria-label": "Year", value: currentMonth.getFullYear(), onChange: (e) => {
                                                                     const newYear = parseInt(e.target.value, 10);
                                                                     setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
                                                                 }, children: Array.from({ length: 100 }).map((_, i) => {
@@ -213,25 +193,11 @@ function CustomDatePicker(props) {
                                                                     if (!disableToday && !isRange) {
                                                                         handleDaySelect(new Date(today));
                                                                     }
-                                                                }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.addMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, {}) })] })] }), (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_2.Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && ((0, jsx_runtime_1.jsx)(TimePicker_1.default
-                                    // date={tempDate ?? new Date()}
-                                    , { 
-                                        // date={tempDate ?? new Date()}
-                                        date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, 
-                                        // onChange={(updatedDate) => {
-                                        // 👇 Redirect time change if today
-                                        //   const corrected = disableToday && isSameDay(updatedDate, today)
-                                        //     ? tomorrow
-                                        //     : updatedDate;
-                                        //   setTempDate(corrected);
-                                        //   emitSingle(corrected);
-                                        // }}
-                                        onChange: (updatedDate) => {
+                                                                }, "aria-label": "Today", sx: { fontSize: "xs", px: 2 }, isDisabled: disableToday, children: "Today" })), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", "aria-label": "Next month", onClick: () => setCurrentMonth((prev) => (0, date_fns_1.addMonths)(prev, 1)), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, {}) })] })] }), (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: 700, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => ((0, jsx_runtime_1.jsx)(react_2.Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             emitSingle(updatedDate);
                                         } })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", onClick: () => {
                                                     setTempDate(null);
-                                                    // setTempDate(disableToday ? tomorrow : null);
                                                     setTempRangeStart(null);
                                                     setTempRangeEnd(null);
                                                     setRangeStart(null);
@@ -256,3 +222,4 @@ function CustomDatePicker(props) {
                                                     onClose();
                                                 }, children: "OK" })] })] }) }) })] })] }));
 }
+exports.default = CustomDatePicker;

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

@@ -1,50 +1,138 @@
+import type { DayStates, RenderDayContent } from "./dayStates";
+/** Governs which UI renders inside the popover — date grid, time selects, or both; inferred from dateFormat when omitted. */
 export type PickerType = "date" | "time" | "datetime";
+/** Fields shared by both picker variants — combined via `&` with Single/RangeDatePickerProps below, never used on its own. */
 export type BaseDatePickerProps = {
     id?: string;
     name?: string;
+    /** Label above the field; also the calendar popover's accessible name (falls back to "Choose date" / "Choose date range"). */
     label?: string;
+    /** Shows the label asterisk and sets native `required` via FormControl. */
     isRequired?: boolean;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
+    /** Marks the field invalid (error border + `aria-invalid`) and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Shown while `error` is true. Omitting it renders no message and still hides `helperText`. */
     errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
     helperText?: string;
+    /** Field hint text; defaults to one derived from `dateFormat`. */
+    placeholder?: string;
+    /** @deprecated Use `placeholder` — renamed to match every other field; `placeholder` wins when both are set. */
     placeholderText?: string;
+    /** date-fns format; defaults to `dd/MM/yyyy` (`HH:mm` for the time-only picker). Time tokens add time inputs. */
     dateFormat?: string;
+    /** Inferred from `dateFormat` when omitted: `H`/`h`/`mm`/`ss` mean time, so a lowercase `dd/mm/yyyy` is read as minutes and shows time selects while `dd/MM/yyyy` stays date-only. Ignored when `isRange`. */
     pickerType?: PickerType;
+    /** Earlier days are disabled in the calendar and rejected when typed. */
     minDate?: Date;
+    /** Later days are disabled in the calendar and rejected when typed. */
     maxDate?: Date;
+    /** Blocks every day after today; today stays selectable. */
     disableFutureDates?: boolean;
+    /** Blocks every day before today; today stays selectable. */
     disablePastDates?: boolean;
+    /** Defaults to `"off"` so browser suggestions don't cover the calendar; not read by the time-only picker. */
     autoComplete?: string;
+    /** Disables the field and its calendar/clock trigger. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field; `isDisabled` wins when both are set. */
     disabled?: boolean;
+    /** Width of the whole field; defaults to `"100%"`. */
     width?: string | number;
+    /** Blocks today in the calendar and in typed input; the single picker preselects tomorrow instead. */
     disableToday?: boolean;
-    /** Chakra `Input` / `InputGroup` size for the field and chevron (calendar/clock) scale. */
+    /** Control-scale height: xs 32 · sm 38 · md 40 · lg 48px (default `sm`, like TextInput); also scales the calendar/clock icon. */
     size?: "xs" | "sm" | "md" | "lg";
 };
-export type SingleDatePickerProps = BaseDatePickerProps & {
+/** Single-date variant, Date API (default) — `isRange` must be false or omitted; this is the discriminant the DatePickerProps union switches on. */
+export type SingleDatePickerDateProps = BaseDatePickerProps & {
+    /** Omit or false for a single-date picker; the discriminant `DatePickerProps` switches on. */
     isRange?: false;
+    /** Omit, or set `"date"`, for the default Date-object API; `"iso"` switches value/onChange to ISO strings. */
+    valueFormat?: "date";
+    /** Controlled value; `value` wins when both are set. */
     selectedDate?: Date | null;
     /** Alias for `selectedDate` (legacy / form libraries). */
     value?: Date | null;
+    /** Fires on day click in date-only mode; with time inputs, only on Apply, Clear or closing the popover. */
     onChange: (date: Date | null) => void;
 };
+/** Single-date variant, string API — `yyyy-MM-dd` / `HH:mm` / full local ISO datetime by pickerType; an unparsable incoming string reads as `null`. */
+export type SingleDatePickerStringProps = BaseDatePickerProps & {
+    /** Omit or false for a single-date picker; the discriminant `DatePickerProps` switches on. */
+    isRange?: false;
+    /** `"iso"` opts into the string API for this instance. */
+    valueFormat: "iso";
+    /** Controlled ISO value; `value` wins when both are set. */
+    selectedDate?: string | null;
+    /** Alias for `selectedDate` (legacy / form libraries). */
+    value?: string | null;
+    /** Fires with an ISO string (or `null`) on the same triggers as the Date API. */
+    onChange: (value: string | null) => void;
+};
+/** Discriminated on `valueFormat` — `"iso"` narrows to the string-value overload, everything else to the Date overload. */
+export type SingleDatePickerProps = SingleDatePickerDateProps | SingleDatePickerStringProps;
+export declare const isStringValueProps: (props: SingleDatePickerProps) => props is SingleDatePickerStringProps;
+/** A date range's two endpoints, each independently nullable — used for both the controlled value and onChange's payload. */
 export type RangeDate = {
+    /** Range start, `null` until picked. */
     from: Date | null;
+    /** Range end, `null` until picked. */
     to: Date | null;
 };
+/** Range variant — `isRange` must be true; adds dayStates/renderDayContent day-marking on top of the shared base fields. */
 export type RangeDatePickerProps = BaseDatePickerProps & {
+    /** Must be true to render the range picker. */
     isRange: true;
+    /** Controlled range; `value` wins when both are set. */
     selectedDate?: RangeDate | null;
     /** Alias for `selectedDate` (legacy / form libraries). */
     value?: RangeDate | null;
+    /** Only fires via Apply or Escape once both ends are picked — clicking outside the popover discards the pending range instead of committing it. */
     onChange: (range: RangeDate | null) => void;
+    /**
+     * Marks individual days with zero or more state keys — `["weekly-off"]`, `["Onam", "holiday"]`,
+     * `["excluded"]`. The keys in `DAY_STATE_KEYS` (`weekly-off`, `holiday`, `optional-holiday`,
+     * `excluded`, `disabled`) carry built-in, token-driven styling; any other key is announced to a
+     * screen reader but left unstyled, which is how a day gets named without a second prop.
+     *
+     * Marking is not disabling: a marked day stays selectable unless the caller also returns
+     * `"disabled"`, or blocks the day with `minDate`/`maxDate`/`disablePastDates`/`disableFutureDates`.
+     *
+     * Supplying this also spells each day's accessible name out in full — "16 September 2025, Onam,
+     * holiday" instead of "16". Called once per rendered day (42 per month), so keep it cheap and pure.
+     */
+    dayStates?: DayStates;
+    /**
+     * Custom content rendered inside the day cell, centred under the day number — a dot, a short
+     * label, a tooltip trigger. Receives that day's resolved state keys. Returning a node replaces
+     * the built-in marker dot for that day; the number, the accessible name and hit target are
+     * unchanged (the overlay does not take pointer events).
+     */
+    renderDayContent?: RenderDayContent;
+    /** Shortcut buttons above the calendar; each applies `range` to the pending selection (Apply still commits). Defaults to Today, Yesterday, Last 7 days, Last 30 days, This month; `[]` hides the row. */
+    presets?: {
+        label: string;
+        range: {
+            from: Date;
+            to: Date;
+        };
+    }[];
 };
+/** Discriminated union consumed by ThemeDatePicker (exported as DatePicker) — `isRange` selects Single vs Range at the type level. */
 export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;
+/** Props for the Hour/Minute/AM-PM trio; `dateFormat` only toggles 12h vs 24h display — seconds aren't supported. */
 export type TimePickerProps = {
     date: Date;
     onChange: (date: Date) => void;
+    /** Only picks 12h vs 24h: an `h` followed later by `a` (e.g. `hh:mm a`) means 12h with AM/PM. */
     dateFormat: string;
+    /** Disables the hour/minute/AM-PM selects. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field; `isDisabled` wins when both are set. */
     disabled?: boolean;
 };

package/dist/Components/DatePicker/DatePickerProps.js

@@ -1,2 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStringValueProps = void 0;
+const isStringValueProps = (props) => props.valueFormat === "iso";
+exports.isStringValueProps = isStringValueProps;

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

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const usePickerPortal: (isOpen: boolean) => {
+    isMounted: boolean;
+    isPopoverOpen: boolean;
+};
+type PickerPortalProps = {
+    isMounted: boolean;
+    children: React.ReactNode;
+};
+export declare const PickerPortal: ({ isMounted, children }: PickerPortalProps) => import("react/jsx-runtime").JSX.Element | null;
+export default PickerPortal;