pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Components/DatePicker/TimePickerInput.js

@@ -1,57 +1,26 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerInput = void 0;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var date_fns_1 = require("date-fns");
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var textInputIconSize_1 = require("../Input/textInputIconSize");
-var sanitizeDigits = function (input) { return input.replace(/\D/g, "").slice(0, 4); };
-var adjustDigits = function (digits, is12Hour) {
-    var result = sanitizeDigits(digits);
+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 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) => {
+    let result = sanitizeDigits(digits);
     if (!result)
         return "";
-    var maxFirstHour = is12Hour ? 1 : 2;
-    var firstDigit = parseInt(result.charAt(0), 10);
+    const maxFirstHour = is12Hour ? 1 : 2;
+    const firstDigit = parseInt(result.charAt(0), 10);
     if (!isNaN(firstDigit) && firstDigit > maxFirstHour) {
         result = ("0" + firstDigit.toString() + result.slice(1)).slice(0, 4);
     }
     if (result.length >= 2) {
-        var hour = parseInt(result.slice(0, 2), 10);
+        let hour = parseInt(result.slice(0, 2), 10);
         if (isNaN(hour))
             hour = 0;
         if (is12Hour) {
@@ -69,13 +38,13 @@ var adjustDigits = function (digits, is12Hour) {
         result = hour.toString().padStart(2, "0") + result.slice(2);
     }
     if (result.length >= 3) {
-        var firstMinuteDigit = parseInt(result.charAt(2), 10);
+        const firstMinuteDigit = parseInt(result.charAt(2), 10);
         if (!isNaN(firstMinuteDigit) && firstMinuteDigit > 5) {
             result = result.slice(0, 2) + "5" + result.slice(3);
         }
     }
     if (result.length >= 4) {
-        var minute = parseInt(result.slice(2, 4), 10);
+        let minute = parseInt(result.slice(2, 4), 10);
         if (isNaN(minute))
             minute = 0;
         if (minute < 0)
@@ -86,26 +55,26 @@ var adjustDigits = function (digits, is12Hour) {
     }
     return result.slice(0, 4);
 };
-var formatDigits = function (digits) {
+const formatDigits = (digits) => {
     if (!digits)
         return "";
     if (digits.length === 1)
         return digits;
     if (digits.length === 2)
-        return "".concat(digits, ":");
+        return `${digits}:`;
     if (digits.length === 3)
-        return "".concat(digits.slice(0, 2), ":").concat(digits.slice(2, 3));
-    return "".concat(digits.slice(0, 2), ":").concat(digits.slice(2, 4));
+        return `${digits.slice(0, 2)}:${digits.slice(2, 3)}`;
+    return `${digits.slice(0, 2)}:${digits.slice(2, 4)}`;
 };
-var getDigitIndexFromCaret = function (formatted, caret) {
-    var digitIndex = 0;
-    for (var i = 0; i < caret && i < formatted.length; i++) {
+const getDigitIndexFromCaret = (formatted, caret) => {
+    let digitIndex = 0;
+    for (let i = 0; i < caret && i < formatted.length; i++) {
         if (/\d/.test(formatted[i]))
             digitIndex++;
     }
     return digitIndex;
 };
-var caretFromDigitIndex = function (digitIndex, digitsLen) {
+const caretFromDigitIndex = (digitIndex, digitsLen) => {
     if (digitIndex < 0)
         return 0;
     if (digitsLen <= 1)
@@ -122,99 +91,98 @@ var caretFromDigitIndex = function (digitIndex, digitsLen) {
         return 3;
     return digitIndex + 1;
 };
-var formatToPlaceholder = function (formatStr) {
-    return formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
-};
-var TimePickerInput = function (_a) {
-    var value = _a.value, onChange = _a.onChange, dateFormat = _a.dateFormat, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeholder = _a.placeholder, onFocus = _a.onFocus, onBlur = _a.onBlur, error = _a.error, _c = _a.size, size = _c === void 0 ? "md" : _c;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var sizeKey = typeof size === "string" ? size : "md";
-    var iconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
-    var iconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
-    var inputRef = (0, react_1.useRef)(null);
-    var _d = (0, react_1.useState)(""), digits = _d[0], setDigits = _d[1];
-    var digitsRef = (0, react_1.useRef)("");
-    var _e = (0, react_1.useState)(false), setIsFocused = _e[1];
-    var isFocusedRef = (0, react_1.useRef)(false);
-    var _f = (0, react_1.useState)("hour"), setActiveSegment = _f[1];
-    var is12Hour = (0, react_1.useMemo)(function () { return /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat); }, [dateFormat]);
-    var placeholderText = (0, react_1.useMemo)(function () { return placeholder || formatToPlaceholder(dateFormat); }, [placeholder, dateFormat]);
-    var ampmRef = (0, react_1.useRef)("AM");
-    var _g = (0, react_1.useState)("AM"), ampm = _g[0], setAmpm = _g[1];
-    var setInputValueAndCaret = (0, react_1.useCallback)(function (formatted, caretDigitIndex) {
-        requestAnimationFrame(function () {
-            var el = inputRef.current;
+const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+/** Masked HH:mm digit input, no seconds; `ref` is the `<input>`. */
+exports.TimePickerInput = (0, react_1.forwardRef)(function TimePickerInput({ value, onChange, dateFormat, isDisabled: disabled = false, placeholder, id, name, isRequired, describedBy, onFocus, onBlur, error, size = controlSizes_1.DEFAULT_CONTROL_SIZE, }, ref) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    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);
+    const mergedRef = (0, react_2.useMergeRefs)(inputRef, ref);
+    const [digits, setDigits] = (0, react_1.useState)("");
+    const digitsRef = (0, react_1.useRef)("");
+    const [, setIsFocused] = (0, react_1.useState)(false);
+    const isFocusedRef = (0, react_1.useRef)(false);
+    const [, setActiveSegment] = (0, react_1.useState)("hour");
+    const is12Hour = (0, react_1.useMemo)(() => /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat), [dateFormat]);
+    const placeholderText = (0, react_1.useMemo)(() => placeholder || formatToPlaceholder(dateFormat), [placeholder, dateFormat]);
+    const ampmRef = (0, react_1.useRef)("AM");
+    const [ampm, setAmpm] = (0, react_1.useState)("AM");
+    const setInputValueAndCaret = (0, react_1.useCallback)((formatted, caretDigitIndex) => {
+        requestAnimationFrame(() => {
+            const el = inputRef.current;
             if (!el)
                 return;
             el.value = formatted;
-            var caretPos = Math.min(caretFromDigitIndex(caretDigitIndex, digitsRef.current.length), formatted.length);
+            const caretPos = Math.min(caretFromDigitIndex(caretDigitIndex, digitsRef.current.length), formatted.length);
             el.setSelectionRange(caretPos, caretPos);
         });
     }, []);
-    var applyDigits = (0, react_1.useCallback)(function (rawDigits, desiredDigitIndex) {
-        var clamped = adjustDigits(rawDigits, is12Hour);
+    const applyDigits = (0, react_1.useCallback)((rawDigits, desiredDigitIndex) => {
+        const clamped = adjustDigits(rawDigits, is12Hour);
         digitsRef.current = clamped;
         setDigits(clamped);
-        var formatted = formatDigits(clamped);
-        var maxDigitIndex = clamped.length === 2 ? 2 : clamped.length;
-        var nextDigitIndex = Math.max(0, Math.min(desiredDigitIndex, maxDigitIndex));
+        const formatted = formatDigits(clamped);
+        const maxDigitIndex = clamped.length === 2 ? 2 : clamped.length;
+        const nextDigitIndex = Math.max(0, Math.min(desiredDigitIndex, maxDigitIndex));
         setInputValueAndCaret(formatted, nextDigitIndex);
         if (clamped.length === 4) {
-            var formattedInput = is12Hour ? "".concat(formatted, " ").concat(ampmRef.current || "AM") : formatted;
-            var parsed = (0, date_fns_1.parse)(formattedInput, dateFormat, new Date());
+            const formattedInput = is12Hour ? `${formatted} ${ampmRef.current || "AM"}` : formatted;
+            const parsed = (0, date_fns_1.parse)(formattedInput, dateFormat, new Date());
             if ((0, date_fns_1.isValid)(parsed))
                 onChange(parsed);
         }
         else if (clamped.length === 0) {
             onChange(null);
         }
-        return { digits: clamped, nextDigitIndex: nextDigitIndex };
+        return { digits: clamped, nextDigitIndex };
     }, [dateFormat, is12Hour, onChange, setInputValueAndCaret]);
-    var updateAmpmValue = (0, react_1.useCallback)(function (next) {
+    const updateAmpmValue = (0, react_1.useCallback)((next) => {
         if (!is12Hour)
             return;
-        var upperNext = next.toUpperCase() === "PM" ? "PM" : "AM";
-        var formattedDigits = formatDigits(digitsRef.current);
+        const upperNext = next.toUpperCase() === "PM" ? "PM" : "AM";
+        const formattedDigits = formatDigits(digitsRef.current);
         ampmRef.current = upperNext;
         setAmpm(upperNext);
         if (digitsRef.current.length === 4) {
-            var parsed = (0, date_fns_1.parse)("".concat(formattedDigits, " ").concat(upperNext), dateFormat, new Date());
+            const parsed = (0, date_fns_1.parse)(`${formattedDigits} ${upperNext}`, dateFormat, new Date());
             if ((0, date_fns_1.isValid)(parsed))
                 onChange(parsed);
         }
-        var el = inputRef.current;
+        const el = inputRef.current;
         if (!el)
             return;
         if (isFocusedRef.current) {
             el.value = formattedDigits;
         }
         else {
-            el.value = formattedDigits ? "".concat(formattedDigits, " ").concat(upperNext) : "";
+            el.value = formattedDigits ? `${formattedDigits} ${upperNext}` : "";
         }
     }, [dateFormat, is12Hour, onChange]);
-    var toggleAmpm = (0, react_1.useCallback)(function () {
+    const toggleAmpm = (0, react_1.useCallback)(() => {
         if (!is12Hour)
             return;
-        var current = (ampmRef.current || ampm || "AM").toUpperCase();
-        var next = current === "AM" ? "PM" : "AM";
+        const current = (ampmRef.current || ampm || "AM").toUpperCase();
+        const next = current === "AM" ? "PM" : "AM";
         updateAmpmValue(next);
     }, [ampm, is12Hour, updateAmpmValue]);
-    var setAmpmFromKey = (0, react_1.useCallback)(function (next) {
+    const setAmpmFromKey = (0, react_1.useCallback)((next) => {
         updateAmpmValue(next);
     }, [updateAmpmValue]);
-    var handleDigitInput = (0, react_1.useCallback)(function (digit) {
+    const handleDigitInput = (0, react_1.useCallback)((digit) => {
         var _a, _b;
-        var el = inputRef.current;
-        var formatted = formatDigits(digitsRef.current);
-        var start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
-        var end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
-        var startDigitIndex = getDigitIndexFromCaret(formatted, start);
-        var endDigitIndex = getDigitIndexFromCaret(formatted, end);
-        var newDigits = digitsRef.current;
+        const el = inputRef.current;
+        const formatted = formatDigits(digitsRef.current);
+        const start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
+        const end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
+        const startDigitIndex = getDigitIndexFromCaret(formatted, start);
+        const endDigitIndex = getDigitIndexFromCaret(formatted, end);
+        let newDigits = digitsRef.current;
         newDigits = newDigits.slice(0, startDigitIndex) + newDigits.slice(endDigitIndex);
         newDigits = newDigits.slice(0, startDigitIndex) + digit + newDigits.slice(startDigitIndex);
         newDigits = newDigits.slice(0, 4);
-        var _c = applyDigits(newDigits, startDigitIndex + 1), finalDigits = _c.digits, nextDigitIndex = _c.nextDigitIndex;
+        const { digits: finalDigits, nextDigitIndex } = applyDigits(newDigits, startDigitIndex + 1);
         if (startDigitIndex < 2 && finalDigits.length >= 2) {
             setActiveSegment("minute");
         }
@@ -225,24 +193,24 @@ var TimePickerInput = function (_a) {
             setActiveSegment("minute");
         }
     }, [applyDigits]);
-    var handleBackspace = (0, react_1.useCallback)(function () {
+    const handleBackspace = (0, react_1.useCallback)(() => {
         var _a, _b;
         if (!digitsRef.current)
             return;
-        var el = inputRef.current;
-        var formatted = formatDigits(digitsRef.current);
-        var start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
-        var end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
-        var startDigitIndex = getDigitIndexFromCaret(formatted, start);
-        var endDigitIndex = getDigitIndexFromCaret(formatted, end);
+        const el = inputRef.current;
+        const formatted = formatDigits(digitsRef.current);
+        const start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
+        const end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
+        let startDigitIndex = getDigitIndexFromCaret(formatted, start);
+        const endDigitIndex = getDigitIndexFromCaret(formatted, end);
         if (startDigitIndex === endDigitIndex) {
             if (startDigitIndex === 0)
                 return;
             startDigitIndex -= 1;
         }
-        var newDigits = digitsRef.current;
+        let newDigits = digitsRef.current;
         newDigits = newDigits.slice(0, startDigitIndex) + newDigits.slice(endDigitIndex);
-        var _c = applyDigits(newDigits, startDigitIndex), nextDigitIndex = _c.nextDigitIndex, finalDigits = _c.digits;
+        const { nextDigitIndex, digits: finalDigits } = applyDigits(newDigits, startDigitIndex);
         if (finalDigits.length < 2 || nextDigitIndex <= 2) {
             setActiveSegment("hour");
         }
@@ -250,24 +218,24 @@ var TimePickerInput = function (_a) {
             setActiveSegment("minute");
         }
     }, [applyDigits]);
-    var handleDelete = (0, react_1.useCallback)(function () {
+    const handleDelete = (0, react_1.useCallback)(() => {
         var _a, _b;
         if (!digitsRef.current)
             return;
-        var el = inputRef.current;
-        var formatted = formatDigits(digitsRef.current);
-        var start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
-        var end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
-        var startDigitIndex = getDigitIndexFromCaret(formatted, start);
-        var endDigitIndex = getDigitIndexFromCaret(formatted, end);
+        const el = inputRef.current;
+        const formatted = formatDigits(digitsRef.current);
+        const start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
+        const end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
+        const startDigitIndex = getDigitIndexFromCaret(formatted, start);
+        let endDigitIndex = getDigitIndexFromCaret(formatted, end);
         if (startDigitIndex === endDigitIndex) {
             if (startDigitIndex >= digitsRef.current.length)
                 return;
             endDigitIndex = startDigitIndex + 1;
         }
-        var newDigits = digitsRef.current;
+        let newDigits = digitsRef.current;
         newDigits = newDigits.slice(0, startDigitIndex) + newDigits.slice(endDigitIndex);
-        var _c = applyDigits(newDigits, startDigitIndex), nextDigitIndex = _c.nextDigitIndex, finalDigits = _c.digits;
+        const { nextDigitIndex, digits: finalDigits } = applyDigits(newDigits, startDigitIndex);
         if (finalDigits.length < 2 || nextDigitIndex <= 2) {
             setActiveSegment("hour");
         }
@@ -275,7 +243,7 @@ var TimePickerInput = function (_a) {
             setActiveSegment("minute");
         }
     }, [applyDigits]);
-    var handleArrow = (0, react_1.useCallback)(function (direction) {
+    const handleArrow = (0, react_1.useCallback)((direction) => {
         if (direction === "left") {
             setActiveSegment("hour");
             setInputValueAndCaret(formatDigits(digitsRef.current), 0);
@@ -287,10 +255,10 @@ var TimePickerInput = function (_a) {
             }
         }
     }, [setInputValueAndCaret]);
-    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
         if (disabled)
             return;
-        var key = e.key;
+        const key = e.key;
         if (/^[0-9]$/.test(key)) {
             e.preventDefault();
             handleDigitInput(key);
@@ -335,12 +303,12 @@ var TimePickerInput = function (_a) {
         }
         e.preventDefault();
     }, [disabled, handleDigitInput, handleBackspace, handleDelete, handleArrow, is12Hour, toggleAmpm, setAmpmFromKey]);
-    var handleFocus = (0, react_1.useCallback)(function () {
+    const handleFocus = (0, react_1.useCallback)(() => {
         setIsFocused(true);
         isFocusedRef.current = true;
         setActiveSegment("hour");
-        requestAnimationFrame(function () {
-            var el = inputRef.current;
+        requestAnimationFrame(() => {
+            const el = inputRef.current;
             if (!el)
                 return;
             el.value = formatDigits(digitsRef.current);
@@ -349,27 +317,27 @@ var TimePickerInput = function (_a) {
         });
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
     }, [onFocus]);
-    var handleBlur = (0, react_1.useCallback)(function () {
+    const handleBlur = (0, react_1.useCallback)(() => {
         setIsFocused(false);
         isFocusedRef.current = false;
-        var el = inputRef.current;
+        const el = inputRef.current;
         if (el) {
-            var formatted = formatDigits(digitsRef.current);
+            const formatted = formatDigits(digitsRef.current);
             el.value =
                 is12Hour && formatted
-                    ? "".concat(formatted, " ").concat(ampmRef.current || ampm || "AM")
+                    ? `${formatted} ${ampmRef.current || ampm || "AM"}`
                     : formatted;
         }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
     }, [onBlur, is12Hour, ampm]);
-    var handleClick = (0, react_1.useCallback)(function () {
+    const handleClick = (0, react_1.useCallback)(() => {
         var _a;
-        var el = inputRef.current;
+        const el = inputRef.current;
         if (!el)
             return;
-        var caret = (_a = el.selectionStart) !== null && _a !== void 0 ? _a : 0;
-        var formatted = formatDigits(digitsRef.current);
-        var digitIndex = getDigitIndexFromCaret(formatted, caret);
+        const caret = (_a = el.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const formatted = formatDigits(digitsRef.current);
+        const digitIndex = getDigitIndexFromCaret(formatted, caret);
         if (digitIndex < 2) {
             setActiveSegment("hour");
         }
@@ -378,19 +346,19 @@ var TimePickerInput = function (_a) {
                 setActiveSegment("minute");
         }
     }, []);
-    var handleInput = (0, react_1.useCallback)(function (e) {
+    const handleInput = (0, react_1.useCallback)(() => {
         // Prevent uncontrolled edits – we manage value ourselves
-        var el = inputRef.current;
+        const el = inputRef.current;
         if (!el)
             return;
-        var formatted = formatDigits(digitsRef.current);
+        const formatted = formatDigits(digitsRef.current);
         if (el.value !== formatted) {
             el.value = formatted;
         }
     }, []);
-    var handlePaste = (0, react_1.useCallback)(function (e) {
+    const handlePaste = (0, react_1.useCallback)((e) => {
         e.preventDefault();
-        var pasted = sanitizeDigits(e.clipboardData.getData("text"));
+        const pasted = sanitizeDigits(e.clipboardData.getData("text"));
         if (!pasted)
             return;
         applyDigits(pasted, pasted.length);
@@ -398,14 +366,14 @@ var TimePickerInput = function (_a) {
             setActiveSegment("minute");
         }
     }, [applyDigits]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (value) {
-            var formattedValue = (0, date_fns_1.format)(value, dateFormat);
-            var newDigits = adjustDigits(formattedValue.replace(/\D/g, ""), is12Hour);
+            const formattedValue = (0, date_fns_1.format)(value, dateFormat);
+            const newDigits = adjustDigits(formattedValue.replace(/\D/g, ""), is12Hour);
             digitsRef.current = newDigits;
             setDigits(newDigits);
             if (is12Hour) {
-                var newAmpm = (0, date_fns_1.format)(value, "a").toUpperCase();
+                const newAmpm = (0, date_fns_1.format)(value, "a").toUpperCase();
                 ampmRef.current = newAmpm;
                 setAmpm(newAmpm);
             }
@@ -414,9 +382,9 @@ var TimePickerInput = function (_a) {
                 setAmpm("");
             }
             if (!isFocusedRef.current) {
-                var formatted = formatDigits(newDigits);
+                const formatted = formatDigits(newDigits);
                 if (inputRef.current) {
-                    inputRef.current.value = is12Hour && formatted ? "".concat(formatted, " ").concat(ampmRef.current) : formatted;
+                    inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampmRef.current}` : formatted;
                 }
             }
         }
@@ -432,16 +400,12 @@ var TimePickerInput = function (_a) {
             }
         }
     }, [value, dateFormat, is12Hour]);
-    (0, react_1.useEffect)(function () {
-        var formatted = formatDigits(digits);
+    (0, react_1.useEffect)(() => {
+        const formatted = formatDigits(digits);
         if (!isFocusedRef.current && inputRef.current) {
-            inputRef.current.value = is12Hour && formatted ? "".concat(formatted, " ").concat(ampm) : formatted;
+            inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampm}` : formatted;
         }
     }, [digits, ampm, is12Hour]);
-    return (react_1.default.createElement(react_2.InputGroup, { size: sizeKey },
-        react_1.default.createElement(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 }),
-        react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center" },
-            react_1.default.createElement(react_2.Box, { as: "span", sx: iconWrapperSx },
-                react_1.default.createElement(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.gray[500] })))));
-};
-exports.TimePickerInput = TimePickerInput;
+    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: mergedRef, 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.displayName = "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,76 @@
+"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;
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+// 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: (0, planeStep_1.recessOn)(colors.backgroundColor.muted, colors.surfaceRaised),
+        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 {};