pixelize-design-library 2.4.1 → 2.4.2-beta.0

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RangeDatePicker } from "./RangeDatePicker.js";
+import { SingleDatePicker } from "./SingleDatePicker.js";
+import { TimeOnlyPicker } from "./TimeOnlyPicker.js";
+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) => {
+    var _a, _b;
+    if (props.isRange) {
+        return _jsx(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 _jsx(TimeOnlyPicker, { ...props });
+    }
+    return _jsx(SingleDatePicker, { ...props });
+};
+export default ThemeDatePicker;

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

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 { TextLabel } from "../Common/FormLabel.js";
+import HelperText from "../Common/HelperText.js";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import TimePicker from "./TimePicker.js";
+import { TimePickerInput } from "./TimePickerInput.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+export const TimeOnlyPicker = (props) => {
+    var _a, _b, _c;
+    const { id, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "HH:mm", disabled, width = "100%", disableToday = false, size = "md", } = props;
+    const theme = useCustomTheme();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    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 : "md";
+    const selectedDate = (_b = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate)) !== null && _b !== void 0 ? _b : 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 handleTimeInputChange = (date) => {
+        setTempDate(date);
+        props.onChange(date);
+    };
+    const handleTimePickerChange = (date) => {
+        setTempDate(date);
+        props.onChange(date);
+    };
+    const handleClear = () => {
+        setTempDate(null);
+        props.onChange(null);
+        // Do not close; user asked only outside-click and OK to close
+    };
+    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);
+        onClose();
+    };
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleMouseDownOutside = (event) => {
+            const target = event.target;
+            const inputEl = inputWrapperRef.current;
+            const triggerEl = triggerRef.current;
+            const popoverEl = popoverRef.current;
+            const insideInput = !!inputEl && inputEl.contains(target);
+            const insideTrigger = !!triggerEl && triggerEl.contains(target);
+            const insidePopover = !!popoverEl && popoverEl.contains(target);
+            if (!insideInput && !insideTrigger && !insidePopover) {
+                onClose();
+            }
+        };
+        document.addEventListener("mousedown", handleMouseDownOutside, true);
+        return () => {
+            document.removeEventListener("mousedown", handleMouseDownOutside, true);
+        };
+    }, [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 (_jsxs(FormControl, { id: id, isDisabled: disabled, width: width, children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, 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, { value: tempDate, onChange: (date) => {
+                                        handleTimeInputChange(date);
+                                    }, dateFormat: dateFormat, disabled: disabled, placeholder: placeholder, onFocus: () => {
+                                        if (!disabled && !isOpen)
+                                            onOpen();
+                                    }, error: error, size: sizeKey }) }) }) }), _jsx(PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", bg: theme.colors.background[50], 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: (_c = theme.colors.boxborder) === null || _c === void 0 ? void 0 : _c[300], children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+};
+export default TimeOnlyPicker;

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

@@ -0,0 +1,70 @@
+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";
+const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const theme = useCustomTheme();
+    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, { value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[50], borderColor: (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[800], _focus: {
+                    borderColor: theme.colors.primary[500],
+                    boxShadow: `0 0 0 0.125rem ${(_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary}`,
+                }, _hover: { borderColor: theme.colors.primary[500] }, 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, { value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[50], borderColor: (_e = theme.colors.boxborder) === null || _e === void 0 ? void 0 : _e[800], _focus: {
+                    borderColor: theme.colors.primary[500],
+                    boxShadow: `0 0 0 0.125rem ${(_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary}`,
+                }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: 60 }, (_, i) => (_jsx("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && (_jsxs(Select, { value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: (_g = theme.colors.gray) === null || _g === void 0 ? void 0 : _g[50], borderColor: (_h = theme.colors.boxborder) === null || _h === void 0 ? void 0 : _h[800], _focus: {
+                    borderColor: theme.colors.primary[500],
+                    boxShadow: `0 0 0 0.125rem ${(_j = theme.colors.boxShadow) === null || _j === void 0 ? void 0 : _j.primary}`,
+                }, _hover: { borderColor: theme.colors.primary[500] }, 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,412 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { Box, Input, InputGroup, InputRightElement } from "@chakra-ui/react";
+import { format, parse, isValid } from "date-fns";
+import { ClockIcon } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.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");
+export const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeholder, onFocus, onBlur, error, size = "md", }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const theme = useCustomTheme();
+    const sizeKey = typeof size === "string" ? size : "md";
+    const iconPx = getTextInputIconSizePx(sizeKey);
+    const iconWrapperSx = getTextInputIconWrapperSx(sizeKey);
+    const inputRef = useRef(null);
+    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: 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: (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[50], borderColor: error ? (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500] : (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[800], _focus: {
+                    borderColor: error ? (_f = (_e = theme.colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[500] : theme.colors.primary[500],
+                    boxShadow: error
+                        ? `0 0 0 0.125rem ${(_g = theme.colors.boxShadow) === null || _g === void 0 ? void 0 : _g.error}`
+                        : `0 0 0 0.125rem ${(_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.primary}`,
+                }, _hover: {
+                    borderColor: error ? (_k = (_j = theme.colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500] : theme.colors.primary[500],
+                } }), _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.gray[500] }) }) })] }));
+};

package/dist/esm/Components/Divider/Divider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider as ChakraDivider } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const VeritcalDivider = () => {
+    var _a;
+    const { colors } = useCustomTheme();
+    return (_jsx(ChakraDivider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[500] }));
+};
+export default VeritcalDivider;

package/dist/esm/Components/Drawer/Drawer.js

@@ -0,0 +1,24 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { Drawer as ChakraDrawer, DrawerBody as ChakraDrawerBody, DrawerFooter as ChakraDrawerFooter, DrawerHeader as ChakraDrawerHeader, DrawerOverlay, DrawerContent, DrawerCloseButton, } from "@chakra-ui/react";
+export const DrawerHeader = ({ children }) => {
+    return _jsx(_Fragment, { children: children });
+};
+export const DrawerBody = ({ children }) => {
+    return _jsx(_Fragment, { children: children });
+};
+export const DrawerFooter = ({ children }) => {
+    return _jsx(_Fragment, { children: children });
+};
+export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant = "solid", children, }) {
+    var _a;
+    const { colors } = useCustomTheme();
+    const isReactElement = (child) => {
+        return child !== null && typeof child === "object" && "type" in child;
+    };
+    const header = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === DrawerHeader);
+    const body = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === DrawerBody);
+    const footer = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === DrawerFooter);
+    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [_jsx(DrawerCloseButton, {}), header && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", children: header })), _jsx(ChakraDrawerBody, { children: body && body }), footer && _jsx(ChakraDrawerFooter, { borderTopWidth: "1px", children: footer })] })] }));
+}

package/dist/esm/Components/Drawer/DrawerProps.js

@@ -0,0 +1 @@
+export {};