pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Components/DatePicker/ThemeDatePicker.js

@@ -1,29 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeDatePicker = ThemeDatePicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const DatePickerProps_1 = require("./DatePickerProps");
 const RangeDatePicker_1 = require("./RangeDatePicker");
 const SingleDatePicker_1 = require("./SingleDatePicker");
 const TimeOnlyPicker_1 = require("./TimeOnlyPicker");
-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 ThemeDatePicker = (props) => {
+const pickerField_1 = require("./pickerField");
+function ThemeDatePicker(props) {
     var _a, _b;
     if (props.isRange) {
         return (0, jsx_runtime_1.jsx)(RangeDatePicker_1.RangeDatePicker, { ...props });
     }
-    const dateFormat = (_a = props.dateFormat) !== null && _a !== void 0 ? _a : "dd/MM/yyyy";
-    const pickerType = (_b = props.pickerType) !== null && _b !== void 0 ? _b : inferPickerTypeFromFormat(dateFormat);
-    if (pickerType === "time") {
-        return (0, jsx_runtime_1.jsx)(TimeOnlyPicker_1.TimeOnlyPicker, { ...props });
+    const singleProps = props;
+    const dateFormat = (_a = singleProps.dateFormat) !== null && _a !== void 0 ? _a : "dd/MM/yyyy";
+    const pickerType = (_b = singleProps.pickerType) !== null && _b !== void 0 ? _b : (0, pickerField_1.inferPickerTypeFromFormat)(dateFormat);
+    const isTime = pickerType === "time";
+    if ((0, DatePickerProps_1.isStringValueProps)(singleProps)) {
+        return isTime ? (0, jsx_runtime_1.jsx)(TimeOnlyPicker_1.TimeOnlyPicker, { ...singleProps }) : (0, jsx_runtime_1.jsx)(SingleDatePicker_1.SingleDatePicker, { ...singleProps });
     }
-    return (0, jsx_runtime_1.jsx)(SingleDatePicker_1.SingleDatePicker, { ...props });
-};
+    return isTime ? (0, jsx_runtime_1.jsx)(TimeOnlyPicker_1.TimeOnlyPicker, { ...singleProps }) : (0, jsx_runtime_1.jsx)(SingleDatePicker_1.SingleDatePicker, { ...singleProps });
+}
 exports.default = ThemeDatePicker;

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

@@ -1,4 +1,7 @@
 import React from "react";
-import { SingleDatePickerProps } from "./DatePickerProps";
-export declare const TimeOnlyPicker: React.FC<SingleDatePickerProps>;
+import { SingleDatePickerDateProps, SingleDatePickerStringProps } from "./DatePickerProps";
+/** Pure time field ThemeDatePicker renders for pickerType="time"; ignores the date-range props (`minDate`, `disablePastDates`, …). */
+export declare function TimeOnlyPicker(props: SingleDatePickerDateProps): React.ReactElement;
+/** `valueFormat="iso"` overload — value/onChange carry an `HH:mm` string instead of a Date object. */
+export declare function TimeOnlyPicker(props: SingleDatePickerStringProps): React.ReactElement;
 export default TimeOnlyPicker;

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -3,52 +3,76 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimeOnlyPicker = void 0;
+exports.TimeOnlyPicker = TimeOnlyPicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const date_fns_1 = require("date-fns");
+const DatePickerProps_1 = require("./DatePickerProps");
+const valueFormat_1 = require("./valueFormat");
 const FormLabel_1 = require("../Common/FormLabel");
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const pickerField_1 = require("./pickerField");
 const TimePicker_1 = __importDefault(require("./TimePicker"));
 const TimePickerInput_1 = require("./TimePickerInput");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
-const TimeOnlyPicker = (props) => {
-    var _a, _b;
-    const { id, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "HH:mm", disabled, width = "100%", disableToday = false, size = "md", } = props;
+function TimeOnlyPicker(props) {
+    var _a, _b, _c, _d;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "HH:mm", width = "100%", disableToday = false, size = controlSizes_1.DEFAULT_CONTROL_SIZE, } = props;
+    const { isDisabled: disabled, placeholder: placeholderText } = (0, pickerField_1.resolvePickerAliases)(props);
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const openPicker = () => {
+        requestExclusiveOpen();
+        onOpen();
+    };
     const popoverRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
     const inputWrapperRef = (0, react_1.useRef)(null);
     const today = new Date();
     const tomorrow = (0, date_fns_1.addDays)(today, 1);
-    const sizeKey = typeof size === "string" ? size : "md";
-    const selectedDate = (_b = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate)) !== null && _b !== void 0 ? _b : null;
+    const sizeKey = typeof size === "string" ? size : controlSizes_1.DEFAULT_CONTROL_SIZE;
+    const rawIsoValue = (0, DatePickerProps_1.isStringValueProps)(props) ? (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate) !== null && _b !== void 0 ? _b : null : null;
+    // Memoized: parseIsoValue would otherwise return a new Date identity every render, looping the effect below.
+    const parsedIsoValue = (0, react_1.useMemo)(() => (rawIsoValue ? (0, valueFormat_1.parseIsoValue)(rawIsoValue, "time") : null), [rawIsoValue]);
+    const selectedDate = (0, DatePickerProps_1.isStringValueProps)(props)
+        ? parsedIsoValue
+        : (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.selectedDate) !== null && _d !== void 0 ? _d : null;
     const [tempDate, setTempDate] = (0, react_1.useState)(selectedDate ? new Date(selectedDate) : null);
     (0, react_1.useEffect)(() => {
         setTempDate(selectedDate ? new Date(selectedDate) : null);
     }, [selectedDate]);
     const placeholder = (0, react_1.useMemo)(() => placeholderText || formatToPlaceholder(dateFormat), [placeholderText, dateFormat]);
+    const emitChange = (date) => {
+        if ((0, DatePickerProps_1.isStringValueProps)(props)) {
+            props.onChange(date ? (0, valueFormat_1.formatIsoValue)(date, "time") : null);
+        }
+        else {
+            props.onChange(date);
+        }
+    };
     const handleTimeInputChange = (date) => {
         setTempDate(date);
-        props.onChange(date);
+        emitChange(date);
     };
     const handleTimePickerChange = (date) => {
         setTempDate(date);
-        props.onChange(date);
+        emitChange(date);
     };
     const handleClear = () => {
         setTempDate(null);
-        props.onChange(null);
-        // Do not close; user asked only outside-click and OK to close
+        emitChange(null);
     };
     const handleOk = () => {
         const 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);
+        emitChange(commitValue);
         onClose();
     };
     (0, react_1.useEffect)(() => {
@@ -72,14 +96,13 @@ const TimeOnlyPicker = (props) => {
         };
     }, [isOpen, onClose]);
     const resolvedTempDate = tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0);
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isDisabled: disabled, width: width, 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", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: inputWrapperRef, children: (0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (date) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: inputWrapperRef, children: (0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (date) => {
                                         handleTimeInputChange(date);
-                                    }, dateFormat: dateFormat, disabled: disabled, placeholder: placeholder, onFocus: () => {
+                                    }, dateFormat: dateFormat, isDisabled: disabled, placeholder: placeholder, id: ids.inputId, name: name, isRequired: isRequired, describedBy: ids.describedBy, onFocus: () => {
                                         if (!disabled && !isOpen)
-                                            onOpen();
-                                    }, error: error, size: sizeKey }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [(0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
+                                            openPicker();
+                                    }, error: error, size: sizeKey }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [(0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
                                         handleTimePickerChange(updatedDate);
-                                    } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
-};
-exports.TimeOnlyPicker = TimeOnlyPicker;
-exports.default = exports.TimeOnlyPicker;
+                                    } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+}
+exports.default = TimeOnlyPicker;

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { TimePickerProps } from "./DatePickerProps";
+/** Hour/Minute/AM-PM select trio, no seconds control — used by datetime pickers and TimeOnlyPicker; the format only toggles 12h vs 24h. */
 declare const TimePicker: React.FC<TimePickerProps>;
 export default TimePicker;

package/dist/Components/DatePicker/TimePicker.js

@@ -4,8 +4,14 @@ 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 TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
+const fieldStyles_1 = require("../Common/fieldStyles");
+/** Hour/Minute/AM-PM select trio, no seconds control — used by datetime pickers and TimeOnlyPicker; the format only toggles 12h vs 24h. */
+const TimePicker = ({ date, onChange, dateFormat, isDisabled, disabled: legacyDisabled }) => {
+    var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const disabled = (_a = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled) !== null && _a !== void 0 ? _a : false;
+    const { h, minH, fontSize } = (0, fieldStyles_1.controlSizeStyles)("sm");
+    const selectSx = { ...(0, fieldStyles_1.fieldControlStyles)(theme.colors), h, minH, fontSize };
     const is12HourFormat = /(hh|h).*a/i.test(dateFormat);
     const deriveDisplayHour = (rawHour) => {
         if (!is12HourFormat)
@@ -54,18 +60,9 @@ const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
         updateTime(hour, minute, newMeridiem);
     };
     const displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
-    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1.5, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Select, { value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
-                    borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1.5, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Select, { "aria-label": "Hour", value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, sx: selectSx, children: Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) => {
                     const value = is12HourFormat ? i + 1 : i;
                     return ((0, jsx_runtime_1.jsx)("option", { value: value, children: value.toString().padStart(2, "0") }, value));
-                }) }), (0, jsx_runtime_1.jsx)(react_2.Select, { value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
-                    borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: 60 }, (_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && ((0, jsx_runtime_1.jsxs)(react_2.Select, { value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
-                    borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: { borderColor: theme.colors.primary[500] }, children: [(0, jsx_runtime_1.jsx)("option", { value: "AM", children: "AM" }), (0, jsx_runtime_1.jsx)("option", { value: "PM", children: "PM" })] }))] }));
+                }) }), (0, jsx_runtime_1.jsx)(react_2.Select, { "aria-label": "Minute", value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, sx: selectSx, children: Array.from({ length: 60 }, (_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && ((0, jsx_runtime_1.jsxs)(react_2.Select, { "aria-label": "AM or PM", value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, sx: selectSx, children: [(0, jsx_runtime_1.jsx)("option", { value: "AM", children: "AM" }), (0, jsx_runtime_1.jsx)("option", { value: "PM", children: "PM" })] }))] }));
 };
 exports.default = TimePicker;

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

@@ -3,12 +3,17 @@ interface TimePickerInputProps {
     value: Date | null;
     onChange: (date: Date | null) => void;
     dateFormat: string;
-    disabled?: boolean;
+    isDisabled?: boolean;
     placeholder?: string;
+    id?: string;
+    name?: string;
+    isRequired?: boolean;
+    describedBy?: string;
     onFocus?: () => void;
     onBlur?: () => void;
     error?: boolean;
     size?: "xs" | "sm" | "md" | "lg";
 }
+/** Masked HH:mm digit input, no seconds. */
 export declare const TimePickerInput: React.FC<TimePickerInputProps>;
 export {};

package/dist/Components/DatePicker/TimePickerInput.js

@@ -7,6 +7,7 @@ const react_2 = require("@chakra-ui/react");
 const date_fns_1 = require("date-fns");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const sanitizeDigits = (input) => input.replace(/\D/g, "").slice(0, 4);
 const adjustDigits = (digits, is12Hour) => {
@@ -91,9 +92,10 @@ const caretFromDigitIndex = (digitIndex, digitsLen) => {
     return digitIndex + 1;
 };
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
-const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeholder, onFocus, onBlur, error, size = "md", }) => {
+/** Masked HH:mm digit input, no seconds. */
+const TimePickerInput = ({ value, onChange, dateFormat, isDisabled: disabled = false, placeholder, id, name, isRequired, describedBy, onFocus, onBlur, error, size = controlSizes_1.DEFAULT_CONTROL_SIZE, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const sizeKey = typeof size === "string" ? size : "md";
+    const sizeKey = typeof size === "string" ? size : controlSizes_1.DEFAULT_CONTROL_SIZE;
     const iconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     const iconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     const inputRef = (0, react_1.useRef)(null);
@@ -403,13 +405,6 @@ const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeh
             inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampm}` : formatted;
         }
     }, [digits, ampm, is12Hour]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey, bg: theme.colors.gray[50], borderColor: error ? theme.colors.semanticText.error : theme.colors.boxborder[500], _focus: {
-                    borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                    boxShadow: error
-                        ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
-                        : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: {
-                    borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                } }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: id, name: name, isRequired: isRequired, "aria-describedby": describedBy, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
 };
 exports.TimePickerInput = TimePickerInput;

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const DAY_STATE_KEYS: readonly ["weekly-off", "holiday", "optional-holiday", "excluded", "disabled"];
+export type DayStateKey = (typeof DAY_STATE_KEYS)[number];
+/** Returns zero or more state keys for a day. Unrecognised keys are announced, never styled. */
+export type DayStates = (date: Date) => string[] | undefined;
+/** Custom content rendered inside a day cell, beneath the day number. */
+export type RenderDayContent = (date: Date, states: string[]) => ReactNode;
+/** What a resolved set of states paints. Every field is optional — an absent field changes nothing. */
+export type DayStateVisual = {
+    /** Tint painted across the whole cell. The range band always wins over it. */
+    cellBg?: string;
+    /** Ink for the day number. Never applied to a selected/endpoint day, whose fill owns its ink. */
+    color?: string;
+    /** `border` shorthand for the day circle, replacing the today/tentative ring. */
+    border?: string;
+    /** Fill of the small marker dot under the number. `renderDayContent` replaces it. */
+    markerColor?: string;
+    /** Strikes the day number through — the "counted, but not really" states. */
+    strikethrough?: boolean;
+    /** The one state that also blocks selection. Marking alone never does. */
+    blocksSelection?: boolean;
+};
+export declare const isDayStateKey: (key: string) => key is DayStateKey;
+/** Merges every recognised state in `DAY_STATE_KEYS` order, so precedence never depends on caller order. */
+export declare const resolveDayStateVisual: (states: string[], colors: PaletteProps) => DayStateVisual;
+/** Base class on every day button once `dayStates` is supplied. Consumers may style off it. */
+export declare const DAY_CLASS = "pxl-calendar-day";
+/** `["Onam", "holiday"]` → `"pxl-calendar-day pxl-calendar-day--onam pxl-calendar-day--holiday"`. */
+export declare const dayStateClassName: (states: string[]) => string;
+/** Human phrasing for the accessible name — every key, styled or not, in the caller's own order. */
+export declare const describeDayStates: (states: string[]) => string;
+export declare const dayAccessibleName: (formattedDate: string, states: string[]) => string;

package/dist/Components/DatePicker/dayStates.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dayAccessibleName = exports.describeDayStates = exports.dayStateClassName = exports.DAY_CLASS = exports.resolveDayStateVisual = exports.isDayStateKey = exports.DAY_STATE_KEYS = void 0;
+// Ascending precedence — when a day carries several keys, a later one's visual overrides an earlier one's.
+exports.DAY_STATE_KEYS = [
+    "weekly-off",
+    "holiday",
+    "optional-holiday",
+    "excluded",
+    "disabled",
+];
+// NOTE: token roles per THEME-CONTRACT.md, not raw rungs — e.g. holiday uses semanticText, never semantic[500].
+const VISUALS = {
+    "weekly-off": (colors) => ({
+        cellBg: colors.backgroundColor.muted,
+        color: colors.textMuted,
+    }),
+    holiday: (colors) => ({
+        color: colors.semanticText.info,
+        markerColor: colors.semanticText.info,
+    }),
+    "optional-holiday": (colors) => ({
+        color: colors.semanticText.warning,
+        markerColor: colors.semanticText.warning,
+        border: `1px dashed ${colors.semanticText.warning}`,
+    }),
+    excluded: (colors) => ({
+        color: colors.textMuted,
+        strikethrough: true,
+    }),
+    disabled: (colors) => ({
+        color: colors.disabled[500],
+        blocksSelection: true,
+    }),
+};
+const isDayStateKey = (key) => exports.DAY_STATE_KEYS.includes(key);
+exports.isDayStateKey = isDayStateKey;
+/** Merges every recognised state in `DAY_STATE_KEYS` order, so precedence never depends on caller order. */
+const resolveDayStateVisual = (states, colors) => {
+    const visual = {};
+    for (const key of exports.DAY_STATE_KEYS) {
+        if (states.includes(key))
+            Object.assign(visual, VISUALS[key](colors));
+    }
+    return visual;
+};
+exports.resolveDayStateVisual = resolveDayStateVisual;
+/** Base class on every day button once `dayStates` is supplied. Consumers may style off it. */
+exports.DAY_CLASS = "pxl-calendar-day";
+const slug = (key) => key
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+/** `["Onam", "holiday"]` → `"pxl-calendar-day pxl-calendar-day--onam pxl-calendar-day--holiday"`. */
+const dayStateClassName = (states) => [
+    exports.DAY_CLASS,
+    ...states
+        .map(slug)
+        .filter(Boolean)
+        .map((key) => `${exports.DAY_CLASS}--${key}`),
+].join(" ");
+exports.dayStateClassName = dayStateClassName;
+/** Human phrasing for the accessible name — every key, styled or not, in the caller's own order. */
+const describeDayStates = (states) => states
+    .map((state) => ((0, exports.isDayStateKey)(state) ? state.replace(/-/g, " ") : state.trim()))
+    .filter(Boolean)
+    .join(", ");
+exports.describeDayStates = describeDayStates;
+// The day's accessible name, date spelled out then states, so marking is heard, not only seen.
+const dayAccessibleName = (formattedDate, states) => {
+    const described = (0, exports.describeDayStates)(states);
+    return described ? `${formattedDate}, ${described}` : formattedDate;
+};
+exports.dayAccessibleName = dayAccessibleName;

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

@@ -0,0 +1,24 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+import type { PickerType } from "./DatePickerProps";
+type AliasedPickerProps = {
+    isDisabled?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    placeholderText?: string;
+};
+/** Canonical `isDisabled`/`placeholder` win over their deprecated aliases. */
+export declare const resolvePickerAliases: ({ isDisabled, disabled, placeholder, placeholderText }: AliasedPickerProps) => {
+    isDisabled: boolean;
+    placeholder: string | undefined;
+};
+/** A read-only field that opens a picker still gets the field's hover border. */
+export declare const readOnlyTriggerSx: (colors: PaletteProps) => {
+    _readOnly: {
+        _hover: {
+            borderColor: string;
+        };
+    };
+};
+export declare const formatHasTime: (format: string) => boolean;
+export declare const inferPickerTypeFromFormat: (format: string) => PickerType;
+export {};

package/dist/Components/DatePicker/pickerField.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inferPickerTypeFromFormat = exports.formatHasTime = exports.readOnlyTriggerSx = exports.resolvePickerAliases = void 0;
+const fieldStyles_1 = require("../Common/fieldStyles");
+/** Canonical `isDisabled`/`placeholder` win over their deprecated aliases. */
+const resolvePickerAliases = ({ isDisabled, disabled, placeholder, placeholderText }) => {
+    var _a;
+    return ({
+        isDisabled: (_a = isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled) !== null && _a !== void 0 ? _a : false,
+        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : placeholderText,
+    });
+};
+exports.resolvePickerAliases = resolvePickerAliases;
+/** A read-only field that opens a picker still gets the field's hover border. */
+const readOnlyTriggerSx = (colors) => ({
+    _readOnly: { _hover: { borderColor: (0, fieldStyles_1.fieldHoverBorder)(colors) } },
+});
+exports.readOnlyTriggerSx = readOnlyTriggerSx;
+// NOTE: case matters in date-fns — MM is month, mm is minutes; lowercasing made dd/MM/yyyy a datetime.
+const formatHasTime = (format) => /[Hh]|mm|ss/.test(format);
+exports.formatHasTime = formatHasTime;
+const inferPickerTypeFromFormat = (format) => {
+    const hasTime = (0, exports.formatHasTime)(format);
+    const hasDate = /d/i.test(format) && /M/.test(format) && /y/i.test(format);
+    if (hasTime && hasDate)
+        return "datetime";
+    if (hasTime)
+        return "time";
+    return "date";
+};
+exports.inferPickerTypeFromFormat = inferPickerTypeFromFormat;

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

@@ -0,0 +1,4 @@
+import type { PickerType } from "./DatePickerProps";
+export declare const isoFormatFor: (pickerType: PickerType) => string;
+export declare const parseIsoValue: (value: string, pickerType: PickerType) => Date | null;
+export declare const formatIsoValue: (date: Date, pickerType: PickerType) => string;

package/dist/Components/DatePicker/valueFormat.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatIsoValue = exports.parseIsoValue = exports.isoFormatFor = void 0;
+const date_fns_1 = require("date-fns");
+const ISO_FORMATS = {
+    date: "yyyy-MM-dd",
+    time: "HH:mm",
+    datetime: "yyyy-MM-dd'T'HH:mm:ss",
+};
+const isoFormatFor = (pickerType) => ISO_FORMATS[pickerType];
+exports.isoFormatFor = isoFormatFor;
+// Local time, no offset — a malformed/empty string yields null rather than an Invalid Date.
+const parseIsoValue = (value, pickerType) => {
+    if (!value)
+        return null;
+    const parsed = (0, date_fns_1.parse)(value, (0, exports.isoFormatFor)(pickerType), new Date());
+    return (0, date_fns_1.isValid)(parsed) ? parsed : null;
+};
+exports.parseIsoValue = parseIsoValue;
+const formatIsoValue = (date, pickerType) => (0, date_fns_1.format)(date, (0, exports.isoFormatFor)(pickerType));
+exports.formatIsoValue = formatIsoValue;

package/dist/Components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,4 @@
+import type { DescriptionListProps } from "./DescriptionListProps";
+/** Label/value read grid: semantic dl/dt/dd, "stacked" (label above) or "inline" (label left, value right). */
+declare const DescriptionList: ({ items, columns, layout, emptyValue, isLoading, loadingRows, }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;
+export default DescriptionList;

package/dist/Components/DescriptionList/DescriptionList.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const CopyButton_1 = __importDefault(require("../CopyButton/CopyButton"));
+const DEFAULT_COLUMNS = { base: 1, md: 2 };
+const toTemplateColumns = (columns) => Object.fromEntries(Object.entries(columns).map(([bp, count]) => [bp, `repeat(${count}, minmax(0, 1fr))`]));
+const isMissing = (value) => value === null || value === undefined || value === "";
+/** Label/value read grid: semantic dl/dt/dd, "stacked" (label above) or "inline" (label left, value right). */
+const DescriptionList = ({ items, columns = DEFAULT_COLUMNS, layout = "stacked", emptyValue = "—", isLoading = false, loadingRows = 6, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const templateColumns = toTemplateColumns(columns);
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Grid, { role: "group", "aria-busy": "true", "aria-label": "Loading", templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: Array.from({ length: loadingRows }, (_, index) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 1.5, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "40%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "75%" })] }, index))) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.Grid, { as: "dl", m: 0, templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: items.map((item, index) => {
+            const displayValue = isMissing(item.value) ? emptyValue : item.value;
+            const canCopy = item.copyable && typeof item.value === "string" && item.value !== "";
+            const copyTooltip = typeof item.label === "string" ? `Copy ${item.label}` : "Copy";
+            const Value = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "dd", m: 0, align: "center", gap: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.text[800], textAlign: layout === "inline" ? "right" : "left", noOfLines: layout === "inline" ? 1 : undefined, children: displayValue }), canCopy && (0, jsx_runtime_1.jsx)(CopyButton_1.default, { value: item.value, size: "xs", tooltip: copyTooltip })] }));
+            const itemProps = layout === "inline"
+                ? { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3 }
+                : {};
+            return ((0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, gridColumn: item.span ? `span ${item.span}` : undefined, ...itemProps, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "dt", fontSize: "xs", color: colors.textMuted, mb: layout === "inline" ? 0 : 0.5, children: item.label }), Value] }, index));
+        }) }));
+};
+exports.default = DescriptionList;

package/dist/Components/DescriptionList/DescriptionListProps.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+/** One label/value pair rendered as a dt/dd. */
+export interface DescriptionListItem {
+    /** dt content — 13px, textMuted. */
+    label: ReactNode;
+    /** dd content — 14px, text[800]; falls back to `emptyValue` when null, undefined or "". */
+    value: ReactNode;
+    /** How many grid columns this item spans; defaults to 1. */
+    span?: number;
+    /** Adds a copy-to-clipboard icon beside the value; only applies when `value` is a non-empty string. */
+    copyable?: boolean;
+}
+/** Column count per breakpoint, same keys as Chakra's responsive props. */
+export type DescriptionListColumns = Partial<Record<"base" | "sm" | "md" | "lg" | "xl", number>>;
+/** Props for the label/value grid used on record-detail and settings-style read views. */
+export interface DescriptionListProps {
+    /** The label/value pairs to render, in order. */
+    items: DescriptionListItem[];
+    /** Columns per breakpoint; defaults to `{ base: 1, md: 2 }`. */
+    columns?: DescriptionListColumns;
+    /** "stacked" (label above value) or "inline" (label left, value right); defaults to "stacked". */
+    layout?: "stacked" | "inline";
+    /** Shown in place of a missing value; defaults to "—". */
+    emptyValue?: ReactNode;
+    /** Renders `loadingRows` skeleton pairs instead of `items`. */
+    isLoading?: boolean;
+    /** Skeleton pair count while `isLoading`; defaults to 6. */
+    loadingRows?: number;
+}

package/dist/Components/DescriptionList/DescriptionListProps.js

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

package/dist/Components/Divider/Divider.d.ts

@@ -1,2 +1,3 @@
+/** Always vertical, fixed size/color, zero props — exported name keeps a "VeritcalDivider" typo; not interchangeable with Primitives' Divider. */
 declare const VeritcalDivider: () => import("react/jsx-runtime").JSX.Element;
 export default VeritcalDivider;

package/dist/Components/Divider/Divider.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Always vertical, fixed size/color, zero props — exported name keeps a "VeritcalDivider" typo; not interchangeable with Primitives' Divider. */
 const VeritcalDivider = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_1.Divider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: colors.boxborder[500] }));

package/dist/Components/Drawer/Drawer.d.ts

@@ -1,12 +1,6 @@
 import React from "react";
-import { DrawerProps } from "./DrawerProps";
-export declare const DrawerHeader: React.FC<{
-    children: React.ReactNode;
-}>;
-export declare const DrawerBody: React.FC<{
-    children: React.ReactNode;
-}>;
-export declare const DrawerFooter: React.FC<{
-    children: React.ReactNode;
-}>;
-export default function Drawer({ isOpen, onClose, placement, size, id, variant, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+import { DrawerProps, DrawerHeaderSlotProps, DrawerBodySlotProps, DrawerFooterSlotProps } from "./DrawerProps";
+export declare const DrawerHeader: React.FC<DrawerHeaderSlotProps>;
+export declare const DrawerBody: React.FC<DrawerBodySlotProps>;
+export declare const DrawerFooter: React.FC<DrawerFooterSlotProps>;
+export default function Drawer({ isOpen, onClose, placement, size, id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;