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

package/dist/esm/Components/DatePicker/ThemeDatePicker.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { isStringValueProps, } from "./DatePickerProps.js";
+import { RangeDatePicker } from "./RangeDatePicker.js";
+import { SingleDatePicker } from "./SingleDatePicker.js";
+import { TimeOnlyPicker } from "./TimeOnlyPicker.js";
+import { inferPickerTypeFromFormat } from "./pickerField.js";
+function ThemeDatePickerInner(props, ref) {
+    var _a, _b;
+    if (props.isRange) {
+        return _jsx(RangeDatePicker, { ref: ref, ...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 : inferPickerTypeFromFormat(dateFormat);
+    const isTime = pickerType === "time";
+    if (isStringValueProps(singleProps)) {
+        return isTime ? _jsx(TimeOnlyPicker, { ref: ref, ...singleProps }) : _jsx(SingleDatePicker, { ref: ref, ...singleProps });
+    }
+    return isTime ? _jsx(TimeOnlyPicker, { ref: ref, ...singleProps }) : _jsx(SingleDatePicker, { ref: ref, ...singleProps });
+}
+export const ThemeDatePicker = forwardRef(ThemeDatePickerInner);
+ThemeDatePicker.displayName = "ThemeDatePicker";
+export default ThemeDatePicker;

package/dist/esm/Components/DatePicker/TimeOnlyPicker.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useState, useRef } from "react";
+import { Box, FormControl, Popover, PopoverBody, PopoverContent, PopoverAnchor, useDisclosure, Button as ChakraButton, } from "@chakra-ui/react";
+import { addDays } from "date-fns";
+import { isStringValueProps, } from "./DatePickerProps.js";
+import { parseIsoValue, formatIsoValue } from "./valueFormat.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { resolvePickerAliases } from "./pickerField.js";
+import TimePicker from "./TimePicker.js";
+import { TimePickerInput } from "./TimePickerInput.js";
+import PickerPortal, { usePickerPortal } from "./PickerPortal.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
+const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+function TimeOnlyPickerInner(props, ref) {
+    var _a, _b, _c, _d;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "HH:mm", width = "100%", disableToday = false, size = DEFAULT_CONTROL_SIZE, } = props;
+    const { isDisabled: disabled, placeholder: placeholderText } = resolvePickerAliases(props);
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const theme = useCustomTheme();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const pickerPortal = usePickerPortal(isOpen);
+    const openPicker = () => {
+        requestExclusiveOpen();
+        onOpen();
+    };
+    const popoverRef = useRef(null);
+    const triggerRef = useRef(null);
+    const inputWrapperRef = useRef(null);
+    const today = new Date();
+    const tomorrow = addDays(today, 1);
+    const sizeKey = typeof size === "string" ? size : DEFAULT_CONTROL_SIZE;
+    const rawIsoValue = 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 = useMemo(() => (rawIsoValue ? parseIsoValue(rawIsoValue, "time") : null), [rawIsoValue]);
+    const selectedDate = isStringValueProps(props)
+        ? parsedIsoValue
+        : (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.selectedDate) !== null && _d !== void 0 ? _d : null;
+    const [tempDate, setTempDate] = useState(selectedDate ? new Date(selectedDate) : null);
+    useEffect(() => {
+        setTempDate(selectedDate ? new Date(selectedDate) : null);
+    }, [selectedDate]);
+    const placeholder = useMemo(() => placeholderText || formatToPlaceholder(dateFormat), [placeholderText, dateFormat]);
+    const emitChange = (date) => {
+        if (isStringValueProps(props)) {
+            props.onChange(date ? formatIsoValue(date, "time") : null);
+        }
+        else {
+            props.onChange(date);
+        }
+    };
+    const handleTimeInputChange = (date) => {
+        setTempDate(date);
+        emitChange(date);
+    };
+    const handleTimePickerChange = (date) => {
+        setTempDate(date);
+        emitChange(date);
+    };
+    const handleClear = () => {
+        setTempDate(null);
+        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);
+        emitChange(commitValue);
+        onClose();
+    };
+    useOutsideMouseDown([inputWrapperRef, triggerRef, popoverRef], () => onClose(), { enabled: isOpen, capture: true });
+    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 (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsx(Box, { ref: inputWrapperRef, children: _jsx(TimePickerInput, { ref: ref, value: tempDate, onChange: (date) => {
+                                        handleTimeInputChange(date);
+                                    }, dateFormat: dateFormat, isDisabled: disabled, placeholder: placeholder, id: ids.inputId, name: name, isRequired: isRequired, describedBy: ids.describedBy, onFocus: () => {
+                                        if (!disabled && !isOpen)
+                                            openPicker();
+                                    }, error: error, size: sizeKey }) }) }) }), _jsx(PickerPortal, { isMounted: pickerPortal.isMounted, children: _jsx(PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, children: _jsxs(PopoverBody, { children: [_jsx(TimePicker, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
+                                            handleTimePickerChange(updatedDate);
+                                        } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: raisedRule(theme.colors), children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+}
+export const TimeOnlyPicker = forwardRef(TimeOnlyPickerInner);
+TimeOnlyPicker.displayName = "TimeOnlyPicker";
+export default TimeOnlyPicker;

package/dist/esm/Components/DatePicker/TimePicker.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Select, HStack } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { controlSizeStyles, fieldControlStyles } from "../Common/fieldStyles.js";
+/** 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 = useCustomTheme();
+    const disabled = (_a = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled) !== null && _a !== void 0 ? _a : false;
+    const { h, minH, fontSize } = controlSizeStyles("sm");
+    const selectSx = { ...fieldControlStyles(theme.colors), h, minH, fontSize };
+    const is12HourFormat = /(hh|h).*a/i.test(dateFormat);
+    const deriveDisplayHour = (rawHour) => {
+        if (!is12HourFormat)
+            return rawHour;
+        const mod = rawHour % 12;
+        return mod === 0 ? 12 : mod;
+    };
+    const initialHour = deriveDisplayHour(date.getHours());
+    const [hour, setHour] = useState(initialHour);
+    const [minute, setMinute] = useState(date.getMinutes());
+    const [ampm, setAmpm] = useState(is12HourFormat ? (date.getHours() >= 12 ? "PM" : "AM") : "");
+    useEffect(() => {
+        const rawHour = date.getHours();
+        setHour(deriveDisplayHour(rawHour));
+        setMinute(date.getMinutes());
+        if (is12HourFormat) {
+            setAmpm(rawHour >= 12 ? "PM" : "AM");
+        }
+    }, [date, is12HourFormat]); // eslint-disable-line react-hooks/exhaustive-deps
+    const convertTo24Hour = (hr, meridiem) => {
+        if (meridiem === "AM")
+            return hr === 12 ? 0 : hr;
+        return hr === 12 ? 12 : hr + 12;
+    };
+    const updateTime = (hrInput, min, meridiem) => {
+        const effectiveMeridiem = meridiem || ampm || "AM";
+        const newHour = is12HourFormat
+            ? convertTo24Hour(hrInput, effectiveMeridiem)
+            : hrInput;
+        const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), newHour, min, 0, 0);
+        onChange(newDate);
+    };
+    const handleHourChange = (e) => {
+        const hr = parseInt(e.target.value, 10);
+        setHour(hr);
+        updateTime(hr, minute, ampm);
+    };
+    const handleMinuteChange = (e) => {
+        const min = parseInt(e.target.value, 10);
+        setMinute(min);
+        updateTime(hour, min, ampm);
+    };
+    const handleAmpmChange = (e) => {
+        const newMeridiem = e.target.value;
+        setAmpm(newMeridiem);
+        updateTime(hour, minute, newMeridiem);
+    };
+    const displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
+    return (_jsxs(HStack, { spacing: 1.5, w: "100%", children: [_jsx(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 (_jsx("option", { value: value, children: value.toString().padStart(2, "0") }, value));
+                }) }), _jsx(Select, { "aria-label": "Minute", value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, sx: selectSx, children: Array.from({ length: 60 }, (_, i) => (_jsx("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && (_jsxs(Select, { "aria-label": "AM or PM", value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, sx: selectSx, children: [_jsx("option", { value: "AM", children: "AM" }), _jsx("option", { value: "PM", children: "PM" })] }))] }));
+};
+export default TimePicker;

package/dist/esm/Components/DatePicker/TimePickerInput.js

@@ -0,0 +1,408 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { Box, Input, InputGroup, InputRightElement, useMergeRefs } from "@chakra-ui/react";
+import { format, parse, isValid } from "date-fns";
+import { ClockIcon } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { getTextInputIconSizePx, getTextInputIconWrapperSx, } from "../Input/textInputIconSize.js";
+const sanitizeDigits = (input) => input.replace(/\D/g, "").slice(0, 4);
+const adjustDigits = (digits, is12Hour) => {
+    let result = sanitizeDigits(digits);
+    if (!result)
+        return "";
+    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) {
+        let hour = parseInt(result.slice(0, 2), 10);
+        if (isNaN(hour))
+            hour = 0;
+        if (is12Hour) {
+            if (hour < 1)
+                hour = 1;
+            if (hour > 12)
+                hour = 12;
+        }
+        else {
+            if (hour < 0)
+                hour = 0;
+            if (hour > 23)
+                hour = 23;
+        }
+        result = hour.toString().padStart(2, "0") + result.slice(2);
+    }
+    if (result.length >= 3) {
+        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) {
+        let minute = parseInt(result.slice(2, 4), 10);
+        if (isNaN(minute))
+            minute = 0;
+        if (minute < 0)
+            minute = 0;
+        if (minute > 59)
+            minute = 59;
+        result = result.slice(0, 2) + minute.toString().padStart(2, "0") + result.slice(4);
+    }
+    return result.slice(0, 4);
+};
+const formatDigits = (digits) => {
+    if (!digits)
+        return "";
+    if (digits.length === 1)
+        return digits;
+    if (digits.length === 2)
+        return `${digits}:`;
+    if (digits.length === 3)
+        return `${digits.slice(0, 2)}:${digits.slice(2, 3)}`;
+    return `${digits.slice(0, 2)}:${digits.slice(2, 4)}`;
+};
+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;
+};
+const caretFromDigitIndex = (digitIndex, digitsLen) => {
+    if (digitIndex < 0)
+        return 0;
+    if (digitsLen <= 1)
+        return Math.min(digitIndex, digitsLen);
+    if (digitsLen === 2) {
+        if (digitIndex <= 1)
+            return digitIndex;
+        return 3; // after colon
+    }
+    // digitsLen >= 3
+    if (digitIndex <= 1)
+        return digitIndex;
+    if (digitIndex === 2)
+        return 3;
+    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");
+/** Masked HH:mm digit input, no seconds; `ref` is the `<input>`. */
+export const TimePickerInput = forwardRef(function TimePickerInput({ value, onChange, dateFormat, isDisabled: disabled = false, placeholder, id, name, isRequired, describedBy, onFocus, onBlur, error, size = DEFAULT_CONTROL_SIZE, }, ref) {
+    const theme = useCustomTheme();
+    const sizeKey = typeof size === "string" ? size : DEFAULT_CONTROL_SIZE;
+    const iconPx = getTextInputIconSizePx(sizeKey);
+    const iconWrapperSx = getTextInputIconWrapperSx(sizeKey);
+    const inputRef = useRef(null);
+    const mergedRef = useMergeRefs(inputRef, ref);
+    const [digits, setDigits] = useState("");
+    const digitsRef = useRef("");
+    const [, setIsFocused] = useState(false);
+    const isFocusedRef = useRef(false);
+    const [, setActiveSegment] = useState("hour");
+    const is12Hour = useMemo(() => /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat), [dateFormat]);
+    const placeholderText = useMemo(() => placeholder || formatToPlaceholder(dateFormat), [placeholder, dateFormat]);
+    const ampmRef = useRef("AM");
+    const [ampm, setAmpm] = useState("AM");
+    const setInputValueAndCaret = useCallback((formatted, caretDigitIndex) => {
+        requestAnimationFrame(() => {
+            const el = inputRef.current;
+            if (!el)
+                return;
+            el.value = formatted;
+            const caretPos = Math.min(caretFromDigitIndex(caretDigitIndex, digitsRef.current.length), formatted.length);
+            el.setSelectionRange(caretPos, caretPos);
+        });
+    }, []);
+    const applyDigits = useCallback((rawDigits, desiredDigitIndex) => {
+        const clamped = adjustDigits(rawDigits, is12Hour);
+        digitsRef.current = clamped;
+        setDigits(clamped);
+        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) {
+            const formattedInput = is12Hour ? `${formatted} ${ampmRef.current || "AM"}` : formatted;
+            const parsed = parse(formattedInput, dateFormat, new Date());
+            if (isValid(parsed))
+                onChange(parsed);
+        }
+        else if (clamped.length === 0) {
+            onChange(null);
+        }
+        return { digits: clamped, nextDigitIndex };
+    }, [dateFormat, is12Hour, onChange, setInputValueAndCaret]);
+    const updateAmpmValue = useCallback((next) => {
+        if (!is12Hour)
+            return;
+        const upperNext = next.toUpperCase() === "PM" ? "PM" : "AM";
+        const formattedDigits = formatDigits(digitsRef.current);
+        ampmRef.current = upperNext;
+        setAmpm(upperNext);
+        if (digitsRef.current.length === 4) {
+            const parsed = parse(`${formattedDigits} ${upperNext}`, dateFormat, new Date());
+            if (isValid(parsed))
+                onChange(parsed);
+        }
+        const el = inputRef.current;
+        if (!el)
+            return;
+        if (isFocusedRef.current) {
+            el.value = formattedDigits;
+        }
+        else {
+            el.value = formattedDigits ? `${formattedDigits} ${upperNext}` : "";
+        }
+    }, [dateFormat, is12Hour, onChange]);
+    const toggleAmpm = useCallback(() => {
+        if (!is12Hour)
+            return;
+        const current = (ampmRef.current || ampm || "AM").toUpperCase();
+        const next = current === "AM" ? "PM" : "AM";
+        updateAmpmValue(next);
+    }, [ampm, is12Hour, updateAmpmValue]);
+    const setAmpmFromKey = useCallback((next) => {
+        updateAmpmValue(next);
+    }, [updateAmpmValue]);
+    const handleDigitInput = useCallback((digit) => {
+        var _a, _b;
+        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);
+        const { digits: finalDigits, nextDigitIndex } = applyDigits(newDigits, startDigitIndex + 1);
+        if (startDigitIndex < 2 && finalDigits.length >= 2) {
+            setActiveSegment("minute");
+        }
+        else if (nextDigitIndex <= 2) {
+            setActiveSegment("hour");
+        }
+        else {
+            setActiveSegment("minute");
+        }
+    }, [applyDigits]);
+    const handleBackspace = useCallback(() => {
+        var _a, _b;
+        if (!digitsRef.current)
+            return;
+        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;
+        }
+        let newDigits = digitsRef.current;
+        newDigits = newDigits.slice(0, startDigitIndex) + newDigits.slice(endDigitIndex);
+        const { nextDigitIndex, digits: finalDigits } = applyDigits(newDigits, startDigitIndex);
+        if (finalDigits.length < 2 || nextDigitIndex <= 2) {
+            setActiveSegment("hour");
+        }
+        else {
+            setActiveSegment("minute");
+        }
+    }, [applyDigits]);
+    const handleDelete = useCallback(() => {
+        var _a, _b;
+        if (!digitsRef.current)
+            return;
+        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;
+        }
+        let newDigits = digitsRef.current;
+        newDigits = newDigits.slice(0, startDigitIndex) + newDigits.slice(endDigitIndex);
+        const { nextDigitIndex, digits: finalDigits } = applyDigits(newDigits, startDigitIndex);
+        if (finalDigits.length < 2 || nextDigitIndex <= 2) {
+            setActiveSegment("hour");
+        }
+        else {
+            setActiveSegment("minute");
+        }
+    }, [applyDigits]);
+    const handleArrow = useCallback((direction) => {
+        if (direction === "left") {
+            setActiveSegment("hour");
+            setInputValueAndCaret(formatDigits(digitsRef.current), 0);
+        }
+        else {
+            if (digitsRef.current.length >= 2) {
+                setActiveSegment("minute");
+                setInputValueAndCaret(formatDigits(digitsRef.current), 3);
+            }
+        }
+    }, [setInputValueAndCaret]);
+    const handleKeyDown = useCallback((e) => {
+        if (disabled)
+            return;
+        const key = e.key;
+        if (/^[0-9]$/.test(key)) {
+            e.preventDefault();
+            handleDigitInput(key);
+            return;
+        }
+        if (key === "Backspace") {
+            e.preventDefault();
+            handleBackspace();
+            return;
+        }
+        if (key === "Delete") {
+            e.preventDefault();
+            handleDelete();
+            return;
+        }
+        if (key === ":") {
+            e.preventDefault();
+            return;
+        }
+        if (key === "ArrowLeft") {
+            e.preventDefault();
+            handleArrow("left");
+            return;
+        }
+        if (key === "ArrowRight") {
+            e.preventDefault();
+            handleArrow("right");
+            return;
+        }
+        if (is12Hour && (key === "ArrowUp" || key === "ArrowDown")) {
+            e.preventDefault();
+            toggleAmpm();
+            return;
+        }
+        if (is12Hour && (key.toLowerCase() === "a" || key.toLowerCase() === "p")) {
+            e.preventDefault();
+            setAmpmFromKey(key.toLowerCase() === "a" ? "AM" : "PM");
+            return;
+        }
+        if (key === "Tab" || key === "Shift" || key === "Enter" || key === "Escape") {
+            return;
+        }
+        e.preventDefault();
+    }, [disabled, handleDigitInput, handleBackspace, handleDelete, handleArrow, is12Hour, toggleAmpm, setAmpmFromKey]);
+    const handleFocus = useCallback(() => {
+        setIsFocused(true);
+        isFocusedRef.current = true;
+        setActiveSegment("hour");
+        requestAnimationFrame(() => {
+            const el = inputRef.current;
+            if (!el)
+                return;
+            el.value = formatDigits(digitsRef.current);
+            el.focus();
+            el.setSelectionRange(0, Math.min(2, el.value.length));
+        });
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleBlur = useCallback(() => {
+        setIsFocused(false);
+        isFocusedRef.current = false;
+        const el = inputRef.current;
+        if (el) {
+            const formatted = formatDigits(digitsRef.current);
+            el.value =
+                is12Hour && formatted
+                    ? `${formatted} ${ampmRef.current || ampm || "AM"}`
+                    : formatted;
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur, is12Hour, ampm]);
+    const handleClick = useCallback(() => {
+        var _a;
+        const el = inputRef.current;
+        if (!el)
+            return;
+        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");
+        }
+        else {
+            if (digitsRef.current.length >= 2)
+                setActiveSegment("minute");
+        }
+    }, []);
+    const handleInput = useCallback(() => {
+        // Prevent uncontrolled edits – we manage value ourselves
+        const el = inputRef.current;
+        if (!el)
+            return;
+        const formatted = formatDigits(digitsRef.current);
+        if (el.value !== formatted) {
+            el.value = formatted;
+        }
+    }, []);
+    const handlePaste = useCallback((e) => {
+        e.preventDefault();
+        const pasted = sanitizeDigits(e.clipboardData.getData("text"));
+        if (!pasted)
+            return;
+        applyDigits(pasted, pasted.length);
+        if (pasted.length >= 2) {
+            setActiveSegment("minute");
+        }
+    }, [applyDigits]);
+    useEffect(() => {
+        if (value) {
+            const formattedValue = format(value, dateFormat);
+            const newDigits = adjustDigits(formattedValue.replace(/\D/g, ""), is12Hour);
+            digitsRef.current = newDigits;
+            setDigits(newDigits);
+            if (is12Hour) {
+                const newAmpm = format(value, "a").toUpperCase();
+                ampmRef.current = newAmpm;
+                setAmpm(newAmpm);
+            }
+            else {
+                ampmRef.current = "";
+                setAmpm("");
+            }
+            if (!isFocusedRef.current) {
+                const formatted = formatDigits(newDigits);
+                if (inputRef.current) {
+                    inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampmRef.current}` : formatted;
+                }
+            }
+        }
+        else {
+            digitsRef.current = "";
+            setDigits("");
+            if (is12Hour) {
+                ampmRef.current = "";
+                setAmpm("");
+            }
+            if (inputRef.current && !isFocusedRef.current) {
+                inputRef.current.value = "";
+            }
+        }
+    }, [value, dateFormat, is12Hour]);
+    useEffect(() => {
+        const formatted = formatDigits(digits);
+        if (!isFocusedRef.current && inputRef.current) {
+            inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampm}` : formatted;
+        }
+    }, [digits, ampm, is12Hour]);
+    return (_jsxs(InputGroup, { size: sizeKey, children: [_jsx(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 }), _jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconWrapperSx, children: _jsx(ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
+});
+TimePickerInput.displayName = "TimePickerInput";

package/dist/esm/Components/DatePicker/dayStates.js

@@ -0,0 +1,68 @@
+import { recessOn } from "../../Theme/tokens/builders/planeStep.js";
+// Ascending precedence — when a day carries several keys, a later one's visual overrides an earlier one's.
+export const 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: 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,
+    }),
+};
+export const isDayStateKey = (key) => DAY_STATE_KEYS.includes(key);
+/** Merges every recognised state in `DAY_STATE_KEYS` order, so precedence never depends on caller order. */
+export const resolveDayStateVisual = (states, colors) => {
+    const visual = {};
+    for (const key of DAY_STATE_KEYS) {
+        if (states.includes(key))
+            Object.assign(visual, VISUALS[key](colors));
+    }
+    return visual;
+};
+/** Base class on every day button once `dayStates` is supplied. Consumers may style off it. */
+export const 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"`. */
+export const dayStateClassName = (states) => [
+    DAY_CLASS,
+    ...states
+        .map(slug)
+        .filter(Boolean)
+        .map((key) => `${DAY_CLASS}--${key}`),
+].join(" ");
+/** Human phrasing for the accessible name — every key, styled or not, in the caller's own order. */
+export const describeDayStates = (states) => states
+    .map((state) => (isDayStateKey(state) ? state.replace(/-/g, " ") : state.trim()))
+    .filter(Boolean)
+    .join(", ");
+// The day's accessible name, date spelled out then states, so marking is heard, not only seen.
+export const dayAccessibleName = (formattedDate, states) => {
+    const described = describeDayStates(states);
+    return described ? `${formattedDate}, ${described}` : formattedDate;
+};