xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components/TimeInput/TimeInputNative.js

@@ -1,650 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimeInputNative = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const TimeInput_module_scss_1 = __importDefault(require("./TimeInput.module.scss"));
-const PartialInput_1 = require("../Input/PartialInput");
-const InputDivider_1 = require("../Input/InputDivider");
-const misc_1 = require("../../components-core/utils/misc");
-const InputAdornment_1 = require("../Input/InputAdornment");
-const IconNative_1 = __importDefault(require("../Icon/IconNative"));
-// Import utilities and types from merged utils file
-const utils_1 = require("./utils");
-// Component part names
-const PART_HOUR = "hour";
-const PART_MINUTE = "minute";
-const PART_SECOND = "second";
-const PART_AMPM = "ampm";
-const PART_CLEAR_BUTTON = "clearButton";
-exports.defaultProps = {
-    enabled: true,
-    validationStatus: "none",
-    hour24: true,
-    seconds: false,
-    clearable: false,
-    clearToInitialValue: true,
-    required: false,
-    readOnly: false,
-    autoFocus: false,
-    emptyCharacter: "-",
-};
-exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, ref) {
-    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, hour24 = exports.defaultProps.hour24, seconds = exports.defaultProps.seconds, minTime, maxTime, clearable = exports.defaultProps.clearable, clearIcon, clearToInitialValue = exports.defaultProps.clearToInitialValue, required = exports.defaultProps.required, startText, startIcon, endText, endIcon, gap, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, emptyCharacter = exports.defaultProps.emptyCharacter } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "updateState", "style", "className", "onDidChange", "onFocus", "onBlur", "onInvalidChange", "validationStatus", "registerComponentApi", "hour24", "seconds", "minTime", "maxTime", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "readOnly", "autoFocus", "emptyCharacter"]);
-    const timeInputRef = (0, react_1.useRef)(null);
-    // Refs for auto-tabbing between inputs
-    const hourInputRef = (0, react_1.useRef)(null);
-    const minuteInputRef = (0, react_1.useRef)(null);
-    const secondInputRef = (0, react_1.useRef)(null);
-    const amPmButtonRef = (0, react_1.useRef)(null);
-    // Process emptyCharacter according to requirements
-    const processedEmptyCharacter = (0, react_1.useMemo)(() => {
-        if (!emptyCharacter || emptyCharacter.length === 0) {
-            return "-";
-        }
-        if (emptyCharacter.length > 1) {
-            return emptyCharacter.charAt(0);
-        }
-        return emptyCharacter;
-    }, [emptyCharacter]);
-    // Stabilize initialValue to prevent unnecessary re-renders
-    const stableInitialValue = (0, react_1.useMemo)(() => {
-        return initialValue;
-    }, [initialValue]);
-    // Local state management - sync with value prop (like TextBox and NumberBox)
-    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
-        const initial = controlledValue || stableInitialValue || null;
-        return initial;
-    });
-    // Parse current value into individual components
-    const [amPm, setAmPm] = (0, react_1.useState)(null);
-    const [hour, setHour] = (0, react_1.useState)(null);
-    const [minute, setMinute] = (0, react_1.useState)(null);
-    const [second, setSecond] = (0, react_1.useState)(null);
-    // Track whether the component currently has focus
-    const [componentHasFocus, setComponentHasFocus] = (0, react_1.useState)(false);
-    // State to track invalid status for visual feedback
-    const [isHourCurrentlyInvalid, setIsHourCurrentlyInvalid] = (0, react_1.useState)(false);
-    const [isMinuteCurrentlyInvalid, setIsMinuteCurrentlyInvalid] = (0, react_1.useState)(false);
-    const [isSecondCurrentlyInvalid, setIsSecondCurrentlyInvalid] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        // Initialize XMLUI state with initial value on first mount
-        if (updateState && stableInitialValue !== undefined && controlledValue === undefined) {
-            updateState({ value: stableInitialValue }, { initial: true });
-            return; // Don't sync on this first run, let the state update trigger a re-render
-        }
-        // Sync with controlled value - always sync when controlledValue changes
-        const newLocalValue = controlledValue || null;
-        setLocalValue(newLocalValue);
-    }, [controlledValue, stableInitialValue, updateState]);
-    // Determine what components to show based on flags
-    const is12HourFormat = !hour24;
-    const showSeconds = seconds;
-    const showLeadingZeros = hour24; // Always show leading zeros in 24-hour format
-    // Parse value into individual components
-    (0, react_1.useEffect)(() => {
-        if (localValue) {
-            const { amPm: parsedAmPm, hour: hourStr, minute: minuteStr, second: secondStr, } = parseTimeString(localValue, is12HourFormat);
-            setAmPm(parsedAmPm);
-            setHour(hourStr);
-            setMinute(minuteStr);
-            setSecond(secondStr);
-        }
-        else {
-            setAmPm(null);
-            setHour(null);
-            setMinute(null);
-            setSecond(null);
-        }
-    }, [localValue, is12HourFormat]);
-    // Event handlers
-    const handleChange = (0, misc_1.useEvent)((newValue) => {
-        // Update local state immediately for immediate UI feedback
-        setLocalValue(newValue);
-        // Also update the XMLUI state
-        if (updateState) {
-            updateState({ value: newValue });
-        }
-        onDidChange === null || onDidChange === void 0 ? void 0 : onDidChange(newValue);
-    });
-    // Helper function to format the complete time value
-    const formatTimeValue = (0, react_1.useCallback)((h, m, s, ap, is12Hour) => {
-        if (!h || !m) {
-            return null;
-        }
-        let formattedTime = "";
-        if (is12Hour) {
-            // 12-hour format
-            const hour12 = h.padStart(2, "0");
-            const minute12 = m.padStart(2, "0");
-            formattedTime = `${hour12}:${minute12}`;
-            if (s && showSeconds) {
-                formattedTime += `:${s.padStart(2, "0")}`;
-            }
-            if (ap) {
-                formattedTime += ` ${ap}`;
-            }
-        }
-        else {
-            // 24-hour format
-            const hour24 = h.padStart(2, "0");
-            const minute24 = m.padStart(2, "0");
-            formattedTime = `${hour24}:${minute24}`;
-            if (s && showSeconds) {
-                formattedTime += `:${s.padStart(2, "0")}`;
-            }
-        }
-        return formattedTime;
-    }, [showSeconds]);
-    // Generic handlers for input change and blur
-    const createInputChangeHandler = (0, react_1.useCallback)((field, setValue, setInvalid, validateFn) => (event) => {
-        const newValue = event.target.value;
-        setValue(newValue);
-        // Update invalid state immediately for visual feedback
-        const isInvalid = validateFn(newValue);
-        setInvalid(isInvalid);
-        // Fire invalidTime event if the value is invalid
-        if (isInvalid) {
-            onInvalidChange === null || onInvalidChange === void 0 ? void 0 : onInvalidChange();
-        }
-        // Don't format/normalize during typing - only on blur
-    }, [onInvalidChange]);
-    const createInputBlurHandler = (0, react_1.useCallback)((field, setValue, setInvalid, normalizeFn) => (event) => {
-        const currentValue = event.target.value;
-        const normalizedValue = normalizeFn(currentValue);
-        // Check if the current value was invalid (needed normalization or couldn't be normalized)
-        const wasInvalid = currentValue !== "" && (normalizedValue === null || normalizedValue !== currentValue);
-        if (normalizedValue !== null && normalizedValue !== currentValue) {
-            setValue(normalizedValue);
-            setInvalid(false); // Clear invalid state after normalization
-            // Always call handleChange to update the time value
-            const timeValues = { hour, minute, second };
-            timeValues[field] = normalizedValue;
-            const timeString = formatTimeValue(timeValues.hour, timeValues.minute, timeValues.second, amPm, is12HourFormat);
-            handleChange(timeString);
-        }
-        else if (normalizedValue === null && currentValue !== "") {
-            // Reset to previous valid value or clear
-            setValue("");
-            setInvalid(false); // Clear invalid state
-            // Always call handleChange to update the time value (likely to null)
-            const timeValues = { hour, minute, second };
-            timeValues[field] = "";
-            const timeString = formatTimeValue(timeValues.hour, timeValues.minute, timeValues.second, amPm, is12HourFormat);
-            handleChange(timeString);
-        }
-        else if (normalizedValue !== null) {
-            // Value didn't need normalization, but still update the complete time
-            const timeValues = { hour, minute, second };
-            timeValues[field] = normalizedValue;
-            const timeString = formatTimeValue(timeValues.hour, timeValues.minute, timeValues.second, amPm, is12HourFormat);
-            handleChange(timeString);
-        }
-    }, [hour, minute, second, formatTimeValue, amPm, is12HourFormat, handleChange]);
-    // Handle changes from individual inputs
-    const handleHourChange = (0, react_1.useMemo)(() => createInputChangeHandler("hour", setHour, setIsHourCurrentlyInvalid, (value) => isHourInvalid(value, !is12HourFormat)), [createInputChangeHandler, is12HourFormat]);
-    const handleHourBlur = (0, react_1.useMemo)(() => createInputBlurHandler("hour", setHour, setIsHourCurrentlyInvalid, (value) => normalizeHour(value, !is12HourFormat)), [createInputBlurHandler, is12HourFormat]);
-    const handleMinuteChange = (0, react_1.useMemo)(() => createInputChangeHandler("minute", setMinute, setIsMinuteCurrentlyInvalid, isMinuteOrSecondInvalid), [createInputChangeHandler]);
-    const handleMinuteBlur = (0, react_1.useMemo)(() => createInputBlurHandler("minute", setMinute, setIsMinuteCurrentlyInvalid, normalizeMinuteOrSecond), [createInputBlurHandler]);
-    const handleSecondChange = (0, react_1.useMemo)(() => createInputChangeHandler("second", setSecond, setIsSecondCurrentlyInvalid, isMinuteOrSecondInvalid), [createInputChangeHandler]);
-    const handleSecondBlur = (0, react_1.useMemo)(() => createInputBlurHandler("second", setSecond, setIsSecondCurrentlyInvalid, normalizeMinuteOrSecond), [createInputBlurHandler]);
-    const handleAmPmToggle = (0, react_1.useCallback)(() => {
-        const newAmPm = amPm === "am" ? "pm" : "am";
-        setAmPm(newAmPm);
-        // Always call handleChange to update the time value
-        const timeString = formatTimeValue(hour, minute, second, newAmPm, is12HourFormat);
-        handleChange(timeString);
-    }, [amPm, formatTimeValue, hour, minute, second, is12HourFormat, handleChange]);
-    const handleAmPmSet = (0, react_1.useCallback)((targetAmPm) => {
-        if (amPm === targetAmPm)
-            return; // No change needed
-        setAmPm(targetAmPm);
-        // Always call handleChange to update the time value
-        const timeString = formatTimeValue(hour, minute, second, targetAmPm, is12HourFormat);
-        handleChange(timeString);
-    }, [amPm, formatTimeValue, hour, minute, second, is12HourFormat, handleChange]);
-    // Focus method
-    const focus = (0, react_1.useCallback)(() => {
-        var _a;
-        const input = (_a = timeInputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input[type="time"], input[name*="hour"], input[name*="minute"]');
-        input === null || input === void 0 ? void 0 : input.focus();
-    }, []);
-    // Custom focus handler that fires gotFocus when component gains focus
-    const handleComponentFocus = (0, react_1.useCallback)((event) => {
-        // If component didn't have focus before, fire gotFocus
-        if (!componentHasFocus) {
-            setComponentHasFocus(true);
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-        }
-    }, [componentHasFocus, onFocus]);
-    // Custom blur handler that only fires lostFocus when focus leaves the entire component
-    const handleComponentBlur = (0, react_1.useCallback)((event) => {
-        // Check if the new focus target is still within this TimeInput component
-        const relatedTarget = event.relatedTarget;
-        const currentTarget = event.currentTarget;
-        // If there's no related target, or the related target is not within this component, fire lostFocus
-        if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
-            setComponentHasFocus(false);
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        }
-    }, [onBlur]);
-    // Arrow key navigation handler
-    const createArrowKeyHandler = (0, react_1.useCallback)(() => {
-        return (event) => {
-            const { key } = event;
-            if (key === "ArrowRight") {
-                event.preventDefault();
-                const currentTarget = event.target;
-                // Determine next input based on current input
-                if (currentTarget === hourInputRef.current && minuteInputRef.current) {
-                    minuteInputRef.current.focus();
-                    minuteInputRef.current.select();
-                }
-                else if (currentTarget === minuteInputRef.current) {
-                    if (showSeconds && secondInputRef.current) {
-                        secondInputRef.current.focus();
-                        secondInputRef.current.select();
-                    }
-                    else if (!showSeconds && is12HourFormat && amPmButtonRef.current) {
-                        amPmButtonRef.current.focus();
-                    }
-                }
-                else if (currentTarget === secondInputRef.current &&
-                    is12HourFormat &&
-                    amPmButtonRef.current) {
-                    amPmButtonRef.current.focus();
-                }
-            }
-            else if (key === "ArrowLeft") {
-                event.preventDefault();
-                const currentTarget = event.target;
-                // Determine previous input based on current input
-                if (currentTarget === minuteInputRef.current && hourInputRef.current) {
-                    hourInputRef.current.focus();
-                    hourInputRef.current.select();
-                }
-                else if (currentTarget === secondInputRef.current && minuteInputRef.current) {
-                    minuteInputRef.current.focus();
-                    minuteInputRef.current.select();
-                }
-                else if (currentTarget === amPmButtonRef.current) {
-                    if (showSeconds && secondInputRef.current) {
-                        secondInputRef.current.focus();
-                        secondInputRef.current.select();
-                    }
-                    else if (!showSeconds && minuteInputRef.current) {
-                        minuteInputRef.current.focus();
-                        minuteInputRef.current.select();
-                    }
-                }
-            }
-        };
-    }, [showSeconds, is12HourFormat]);
-    // Create the arrow key handler instance
-    const handleArrowKeys = createArrowKeyHandler();
-    const clear = (0, react_1.useCallback)(() => {
-        // Reset to initial value if provided, otherwise null
-        let valueToReset = clearToInitialValue
-            ? stableInitialValue !== undefined
-                ? stableInitialValue
-                : null
-            : null;
-        if (valueToReset) {
-            const { amPm: amPmValue, hour: hourStr, minute: minuteStr, second: secondStr, } = parseTimeString(String(valueToReset), is12HourFormat);
-            setHour(hourStr);
-            setMinute(minuteStr);
-            setSecond(secondStr);
-            setAmPm(amPmValue);
-        }
-        else {
-            // Clear all fields
-            setHour(null);
-            setMinute(null);
-            setSecond(null);
-            setAmPm(null);
-        }
-        handleChange(valueToReset);
-        // Focus the component after clearing
-        setTimeout(() => {
-            focus();
-        }, 0);
-    }, [clearToInitialValue, stableInitialValue, handleChange, is12HourFormat, focus]);
-    function stopPropagation(event) {
-        event.stopPropagation();
-    }
-    const setValue = (0, misc_1.useEvent)((newValue) => {
-        handleChange(newValue);
-    });
-    // Function to get ISO formatted time value (HH:MM:SS in 24-hour format)
-    const getIsoValue = (0, react_1.useCallback)(() => {
-        if (!hour || !minute) {
-            return null;
-        }
-        // Convert to 24-hour format if currently in 12-hour format
-        let hour24;
-        if (is12HourFormat && amPm) {
-            const hourInt = parseInt(hour, 10);
-            if (amPm === "am") {
-                hour24 = hourInt === 12 ? 0 : hourInt;
-            }
-            else {
-                // pm
-                hour24 = hourInt === 12 ? 12 : hourInt + 12;
-            }
-        }
-        else {
-            hour24 = parseInt(hour, 10);
-        }
-        // Format as ISO time string (HH:MM:SS)
-        const h24 = hour24.toString().padStart(2, "0");
-        const m24 = minute.padStart(2, "0");
-        const s24 = (second || "00").padStart(2, "0");
-        return `${h24}:${m24}:${s24}`;
-    }, [hour, minute, second, amPm, is12HourFormat]);
-    // Component API registration
-    (0, react_1.useEffect)(() => {
-        if (registerComponentApi) {
-            registerComponentApi({
-                focus,
-                setValue,
-                isoValue: getIsoValue,
-            });
-        }
-    }, [registerComponentApi, focus, setValue, getIsoValue]);
-    // Custom clear icon
-    const clearIconElement = (0, react_1.useMemo)(() => {
-        if (clearIcon === null || clearIcon === "null")
-            return null;
-        if (clearIcon)
-            return (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: clearIcon });
-        // Default clear icon
-        return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: 19, height: 19, viewBox: "0 0 19 19", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: (0, classnames_1.default)(TimeInput_module_scss_1.default.clearButtonIcon, TimeInput_module_scss_1.default.buttonIcon), children: [(0, jsx_runtime_1.jsx)("line", { x1: "4", x2: "15", y1: "4", y2: "15" }), (0, jsx_runtime_1.jsx)("line", { x1: "15", x2: "4", y1: "4", y2: "15" })] }));
-    }, [clearIcon]);
-    // Adornments
-    const startAdornment = (0, react_1.useMemo)(() => {
-        if (startIcon || startText) {
-            return (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { iconName: startIcon, text: startText, className: TimeInput_module_scss_1.default.adornment });
-        }
-        return null;
-    }, [startIcon, startText]);
-    const endAdornment = (0, react_1.useMemo)(() => {
-        if (endIcon || endText) {
-            return (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { iconName: endIcon, text: endText, className: TimeInput_module_scss_1.default.adornment });
-        }
-        return null;
-    }, [endIcon, endText]);
-    const timeInputComponent = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: timeInputRef, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.timeInputWrapper, {
-            [TimeInput_module_scss_1.default.error]: validationStatus === "error",
-            [TimeInput_module_scss_1.default.warning]: validationStatus === "warning",
-            [TimeInput_module_scss_1.default.valid]: validationStatus === "valid",
-            [TimeInput_module_scss_1.default.disabled]: !enabled,
-            [TimeInput_module_scss_1.default.readOnly]: readOnly,
-        }, className), style: Object.assign(Object.assign({}, style), { gap }), onFocusCapture: handleComponentFocus, onBlur: handleComponentBlur, "data-validation-status": validationStatus }, rest, { children: [startAdornment, (0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.inputGroup, children: [(0, jsx_runtime_1.jsx)(HourInput, { id: id, amPm: amPm, autoFocus: autoFocus, disabled: !enabled, inputRef: hourInputRef, nextInputRef: minuteInputRef, maxTime: maxTime, minTime: minTime, onChange: handleHourChange, onBlur: handleHourBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: hour, isInvalid: isHourCurrentlyInvalid, is24Hour: !is12HourFormat, emptyCharacter: processedEmptyCharacter }), (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":" }), (0, jsx_runtime_1.jsx)(MinuteInput, { disabled: !enabled, hour: hour, inputRef: minuteInputRef, nextInputRef: showSeconds ? secondInputRef : undefined, nextButtonRef: showSeconds ? undefined : is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, onChange: handleMinuteChange, onBlur: handleMinuteBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: minute, isInvalid: isMinuteCurrentlyInvalid, emptyCharacter: processedEmptyCharacter }), showSeconds && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":", className: TimeInput_module_scss_1.default.divider }), (0, jsx_runtime_1.jsx)(SecondInput, { disabled: !enabled, hour: hour, inputRef: secondInputRef, nextButtonRef: is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, minute: minute, onChange: handleSecondChange, onBlur: handleSecondBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: second, isInvalid: isSecondCurrentlyInvalid, emptyCharacter: processedEmptyCharacter })] })), is12HourFormat && ((0, jsx_runtime_1.jsx)(AmPmButton, { className: "timeinput", disabled: !enabled, buttonRef: amPmButtonRef, maxTime: maxTime, minTime: minTime, onClick: handleAmPmToggle, onAmPmSet: handleAmPmSet, onKeyDown: handleArrowKeys, value: amPm }))] }), clearable && ((0, jsx_runtime_1.jsx)("button", { "data-part-id": PART_CLEAR_BUTTON, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.clearButton, TimeInput_module_scss_1.default.button), disabled: !enabled, onClick: clear, onFocus: stopPropagation, type: "button", children: clearIconElement }))] }), endAdornment] })));
-    return timeInputComponent;
-});
-function AmPmButton({ ariaLabel, autoFocus, className, disabled, locale, maxTime, minTime, onClick, onAmPmSet, onKeyDown, buttonRef, value, }) {
-    const amDisabled = minTime ? (0, utils_1.convert24to12)((0, utils_1.getHours)(minTime))[1] === "pm" : false;
-    const pmDisabled = maxTime ? (0, utils_1.convert24to12)((0, utils_1.getHours)(maxTime))[1] === "am" : false;
-    const [amLabel, pmLabel] = (0, utils_1.getAmPmLabels)(locale);
-    // Determine if the button should be disabled based on time constraints
-    const isDisabled = disabled || (value === "am" && pmDisabled) || (value === "pm" && amDisabled);
-    const handleKeyDown = (0, react_1.useCallback)((event) => {
-        // First call the external key handler (for arrow navigation)
-        if (onKeyDown) {
-            onKeyDown(event);
-        }
-        // If the event was handled (preventDefault called), don't process further
-        if (event.defaultPrevented || disabled)
-            return;
-        const key = event.key.toLowerCase();
-        // Handle 'a' or 'A' to set AM
-        if (key === "a" && !amDisabled && value !== "am" && onAmPmSet) {
-            event.preventDefault();
-            onAmPmSet("am");
-        }
-        // Handle 'p' or 'P' to set PM
-        else if (key === "p" && !pmDisabled && value !== "pm" && onAmPmSet) {
-            event.preventDefault();
-            onAmPmSet("pm");
-        }
-    }, [onKeyDown, disabled, onAmPmSet, value, amDisabled, pmDisabled]);
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-part-id": PART_AMPM, "aria-label": ariaLabel || "Toggle AM/PM (Press A for AM, P for PM)", autoFocus: autoFocus, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.amPmButton, TimeInput_module_scss_1.default.button, className), disabled: isDisabled, onClick: onClick, onKeyDown: handleKeyDown, ref: buttonRef, children: (0, jsx_runtime_1.jsx)("span", { className: TimeInput_module_scss_1.default.amPmValue, children: value ? (value === "am" ? amLabel : pmLabel) : "--" }) }));
-}
-function HourInput(_a) {
-    var { id, amPm, maxTime, minTime, value, isInvalid = false, is24Hour = false, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["id", "amPm", "maxTime", "minTime", "value", "isInvalid", "is24Hour", "emptyCharacter"]);
-    // Calculate min/max based on format
-    const { minHour, maxHour } = (() => {
-        if (is24Hour) {
-            // 24-hour format: 0-23
-            return {
-                maxHour: (0, utils_1.safeMin)(23, maxTime && (0, utils_1.getHours)(maxTime)),
-                minHour: (0, utils_1.safeMax)(0, minTime && (0, utils_1.getHours)(minTime)),
-            };
-        }
-        else {
-            // 12-hour format: 1-12
-            const maxHour = (0, utils_1.safeMin)(12, maxTime &&
-                (() => {
-                    const [maxHourResult, maxAmPm] = (0, utils_1.convert24to12)((0, utils_1.getHours)(maxTime));
-                    if (maxAmPm !== amPm) {
-                        // pm is always after am, so we should ignore validation
-                        return null;
-                    }
-                    return maxHourResult;
-                })());
-            const minHour = (0, utils_1.safeMax)(1, minTime &&
-                (() => {
-                    const [minHourResult, minAmPm] = (0, utils_1.convert24to12)((0, utils_1.getHours)(minTime));
-                    if (
-                    // pm is always after am, so we should ignore validation
-                    minAmPm !== amPm ||
-                        // If minHour is 12 am/pm, user should be able to enter 12, 1, ..., 11.
-                        minHourResult === 12) {
-                        return null;
-                    }
-                    return minHourResult;
-                })());
-            return { maxHour, minHour };
-        }
-    })();
-    // Always show the raw value during typing, no conversion
-    // This allows users to see invalid input like "23" before it gets normalized on blur
-    const displayValue = value || "";
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { id: id, "data-part-id": PART_HOUR, value: displayValue, emptyCharacter: emptyCharacter, placeholderLength: 2, max: maxHour, min: minHour, maxLength: 2, validateFn: (val) => isHourInvalid(val, is24Hour), onChange: otherProps.onChange, onBlur: (direction, event) => {
-            // PartialInput provides direction, but the current onBlur expects just the event
-            if (otherProps.onBlur) {
-                otherProps.onBlur(event);
-            }
-        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.input, TimeInput_module_scss_1.default.hour), invalidClassName: TimeInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, nextButtonRef: otherProps.nextButtonRef, name: is24Hour ? "hour24" : "hour12", ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
-}
-function MinuteInput(_a) {
-    var { hour, maxTime, minTime, showLeadingZeros = true, value, isInvalid = false, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["hour", "maxTime", "minTime", "showLeadingZeros", "value", "isInvalid", "emptyCharacter"]);
-    function isSameHour(date) {
-        return hour === (0, utils_1.getHours)(date).toString();
-    }
-    const maxMinute = (0, utils_1.safeMin)(59, maxTime && isSameHour(maxTime) && (0, utils_1.getMinutes)(maxTime));
-    const minMinute = (0, utils_1.safeMax)(0, minTime && isSameHour(minTime) && (0, utils_1.getMinutes)(minTime));
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_MINUTE, max: maxMinute, min: minMinute, name: "minute", value: value, validateFn: isMinuteOrSecondInvalid, emptyCharacter: emptyCharacter, placeholderLength: 2, maxLength: 2, onChange: otherProps.onChange, onBlur: (direction, event) => {
-            // PartialInput provides direction, but the current onBlur expects just the event
-            if (otherProps.onBlur) {
-                otherProps.onBlur(event);
-            }
-        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.input, TimeInput_module_scss_1.default.minute), invalidClassName: TimeInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, nextButtonRef: otherProps.nextButtonRef, ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
-}
-function SecondInput(_a) {
-    var { hour, maxTime, minTime, minute, showLeadingZeros = true, value, isInvalid = false, emptyCharacter = "-" } = _a, otherProps = __rest(_a, ["hour", "maxTime", "minTime", "minute", "showLeadingZeros", "value", "isInvalid", "emptyCharacter"]);
-    function isSameMinute(date) {
-        return hour === (0, utils_1.getHours)(date).toString() && minute === (0, utils_1.getMinutes)(date).toString();
-    }
-    const maxSecond = (0, utils_1.safeMin)(59, maxTime && isSameMinute(maxTime) && (0, utils_1.getSeconds)(maxTime));
-    const minSecond = (0, utils_1.safeMax)(0, minTime && isSameMinute(minTime) && (0, utils_1.getSeconds)(minTime));
-    return ((0, jsx_runtime_1.jsx)(PartialInput_1.PartialInput, { "data-part-id": PART_SECOND, max: maxSecond, min: minSecond, name: "second", value: value, validateFn: isMinuteOrSecondInvalid, emptyCharacter: emptyCharacter, placeholderLength: 2, maxLength: 2, onChange: otherProps.onChange, onBlur: (direction, event) => {
-            // PartialInput provides direction, but the current onBlur expects just the event
-            if (otherProps.onBlur) {
-                otherProps.onBlur(event);
-            }
-        }, onKeyDown: otherProps.onKeyDown, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.input, TimeInput_module_scss_1.default.second), invalidClassName: TimeInput_module_scss_1.default.invalid, disabled: otherProps.disabled, readOnly: otherProps.readOnly, required: otherProps.required, autoFocus: otherProps.autoFocus, inputRef: otherProps.inputRef, nextInputRef: otherProps.nextInputRef, nextButtonRef: otherProps.nextButtonRef, ariaLabel: otherProps.ariaLabel, isInvalid: isInvalid }));
-}
-// Utility function to parse time string into components
-function parseTimeString(timeValue, targetIs12Hour = false) {
-    // Handle non-string values gracefully
-    if (timeValue == null || timeValue === undefined) {
-        return {
-            amPm: null,
-            hour: "",
-            minute: "",
-            second: "",
-        };
-    }
-    // If not a string, return empty values for type safety
-    if (typeof timeValue !== "string") {
-        return {
-            amPm: null,
-            hour: "",
-            minute: "",
-            second: "",
-        };
-    }
-    const timeString = timeValue;
-    const normalizedTimeString = timeString.toLowerCase();
-    // Check if the time string contains AM/PM
-    const hasAmPm = normalizedTimeString.includes("am") || normalizedTimeString.includes("pm");
-    const isAmPmPm = normalizedTimeString.includes("pm");
-    // Extract just the time part (remove AM/PM suffix)
-    const timePart = normalizedTimeString.replace(/\s*(am|pm)\s*$/i, "").trim();
-    let parsedHour = (0, utils_1.getHours)(timePart);
-    let parsedMinute = (0, utils_1.getMinutes)(timePart);
-    let parsedSecond = (0, utils_1.getSeconds)(timePart);
-    // If parsing with the current format fails (all zeros), try ISO time format
-    if (parsedHour === 0 &&
-        parsedMinute === 0 &&
-        parsedSecond === 0 &&
-        timePart !== "00:00:00" &&
-        timePart !== "00:00") {
-        try {
-            // Try parsing as ISO time format using Date constructor
-            const isoDate = new Date(`1970-01-01T${timePart}`);
-            if (!isNaN(isoDate.getTime())) {
-                parsedHour = isoDate.getHours();
-                parsedMinute = isoDate.getMinutes();
-                parsedSecond = isoDate.getSeconds();
-            }
-        }
-        catch (_a) {
-            // If ISO parsing fails, keep the original parsed values (zeros)
-        }
-    }
-    // Set AM/PM based on the actual string content or convert from 24-hour
-    let amPmValue = null;
-    let displayHour = parsedHour;
-    if (hasAmPm) {
-        // String already has AM/PM, use the hour as-is (should be 1-12)
-        amPmValue = isAmPmPm ? "pm" : "am";
-    }
-    else {
-        // If no AM/PM in string, derive it from 24-hour format
-        const [hour12, amPm12] = (0, utils_1.convert24to12)(parsedHour);
-        amPmValue = amPm12;
-        // If target format is 12-hour, convert the hour value
-        if (targetIs12Hour) {
-            displayHour = hour12;
-        }
-    }
-    // Format hour value appropriately
-    const hourStr = displayHour.toString().padStart(2, "0");
-    const minuteStr = parsedMinute.toString().padStart(2, "0");
-    const secondStr = parsedSecond.toString().padStart(2, "0");
-    return {
-        amPm: amPmValue,
-        hour: hourStr,
-        minute: minuteStr,
-        second: secondStr,
-    };
-}
-// Normalize the hour value based on 12/24 hour format
-function normalizeHour(value, is24Hour) {
-    if (!value || value === "")
-        return null;
-    const num = parseInt(value, 10);
-    if (isNaN(num))
-        return null;
-    if (is24Hour) {
-        // 24-hour format: 0-23
-        if (num >= 0 && num <= 23) {
-            return num.toString().padStart(2, "0");
-        }
-        else {
-            // For out-of-range values, use value % 10
-            const corrected = num % 10;
-            return corrected.toString().padStart(2, "0");
-        }
-    }
-    else {
-        // 12-hour format: 1-12
-        if (num >= 1 && num <= 12) {
-            return num.toString().padStart(2, "0");
-        }
-        else if (num === 0) {
-            return "12"; // 0 becomes 12 in 12-hour format
-        }
-        else {
-            // For out-of-range values, use value % 10, but ensure it's 1-12
-            let corrected = num % 10;
-            if (corrected === 0)
-                corrected = 12; // 0 becomes 12 in 12-hour format
-            return corrected.toString().padStart(2, "0");
-        }
-    }
-}
-// Normalize the minute or second value
-function normalizeMinuteOrSecond(value) {
-    if (!value || value === "")
-        return null;
-    const num = parseInt(value, 10);
-    if (isNaN(num))
-        return null;
-    if (num >= 0 && num <= 59) {
-        return num.toString().padStart(2, "0");
-    }
-    else {
-        // For out-of-range values, use value % 10
-        const corrected = num % 10;
-        return corrected.toString().padStart(2, "0");
-    }
-}
-// Helper functions to check if values are currently invalid (need normalization)
-function isHourInvalid(value, is24Hour) {
-    if (!value || value === "")
-        return false;
-    const num = parseInt(value, 10);
-    if (isNaN(num)) {
-        return true;
-    }
-    const invalid = is24Hour ? num < 0 || num > 23 : num < 1 || num > 12;
-    return invalid;
-}
-function isMinuteOrSecondInvalid(value) {
-    if (!value || value === "")
-        return false;
-    const num = parseInt(value, 10);
-    if (isNaN(num)) {
-        return true;
-    }
-    const invalid = num < 0 || num > 59;
-    return invalid;
-}