@refraktor/dates 0.0.2 → 0.0.4

package/build/components/time-input/time-input.types.d.ts

@@ -0,0 +1,21 @@
+import { createClassNamesConfig, createComponentConfig, FactoryPayload, InputProps } from "@refraktor/core";
+export type TimeInputClassNames = {
+    input?: string;
+};
+interface _TimeInputProps {
+    /** Show seconds in the native time input @default `false` */
+    withSeconds?: boolean;
+    /** Used for styling TimeInput parts */
+    classNames?: TimeInputClassNames;
+}
+export type TimeInputProps = _TimeInputProps & Omit<InputProps, "type" | "classNames">;
+export interface TimeInputFactoryPayload extends FactoryPayload {
+    props: TimeInputProps;
+    ref: HTMLInputElement;
+    compound: {
+        configure: ReturnType<typeof createComponentConfig<TimeInputProps>>;
+        classNames: ReturnType<typeof createClassNamesConfig<TimeInputClassNames>>;
+    };
+}
+export {};
+//# sourceMappingURL=time-input.types.d.ts.map

package/build/components/time-input/time-input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/time-input/time-input.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,mBAAmB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,UAAU,eAAe;IACrB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,uCAAuC;IACvC,UAAU,CAAC,EAAE,mBAAmB,CAAC;CACpC;AAED,MAAM,MAAM,cAAc,GAAG,eAAe,GACxC,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,YAAY,CAAC,CAAC;AAE5C,MAAM,WAAW,uBAAwB,SAAQ,cAAc;IAC3D,KAAK,EAAE,cAAc,CAAC;IACtB,GAAG,EAAE,gBAAgB,CAAC;IACtB,QAAQ,EAAE;QACN,SAAS,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,cAAc,CAAC,CAAC,CAAC;QACpE,UAAU,EAAE,UAAU,CAAC,OAAO,sBAAsB,CAAC,mBAAmB,CAAC,CAAC,CAAC;KAC9E,CAAC;CACL"}

package/build/components/time-input/time-input.types.js

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

package/build/components/time-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TimePicker } from "./time-picker";
+export type { TimePickerAmPmLabels, TimePickerClassNames, TimePickerFactoryPayload, TimePickerFormat, TimePickerPopoverProps, TimePickerProps, TimePickerValue } from "./time-picker.types";
+//# sourceMappingURL=index.d.ts.map

package/build/components/time-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/time-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EACR,oBAAoB,EACpB,oBAAoB,EACpB,wBAAwB,EACxB,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,eAAe,EAClB,MAAM,qBAAqB,CAAC"}

package/build/components/time-picker/index.js

@@ -0,0 +1 @@
+export { default as TimePicker } from "./time-picker";

package/build/components/time-picker/time-picker.d.ts

@@ -0,0 +1,4 @@
+import { TimePickerFactoryPayload } from "./time-picker.types";
+declare const TimePicker: import("@refraktor/core").RefraktorComponent<TimePickerFactoryPayload>;
+export default TimePicker;
+//# sourceMappingURL=time-picker.d.ts.map

package/build/components/time-picker/time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/time-picker/time-picker.tsx"],"names":[],"mappings":"AAkCA,OAAO,EAEH,wBAAwB,EAI3B,MAAM,qBAAqB,CAAC;AA8K7B,QAAA,MAAM,UAAU,wEAm2Bd,CAAC;AAMH,eAAe,UAAU,CAAC"}

package/build/components/time-picker/time-picker.js

@@ -0,0 +1,553 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createClassNamesConfig, createComponentConfig, factory, Input, useClassNames, useProps, useTheme } from "@refraktor/core";
+import { autoUpdate, flip, FloatingFocusManager, FloatingPortal, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+import { getPickerSizeStyles } from "../picker-shared";
+const HOURS_IN_DAY = 24;
+const MINUTES_IN_HOUR = 60;
+const SECONDS_IN_MINUTE = 60;
+const PLACEHOLDER = "--";
+const defaultProps = {
+    format: "24h",
+    withSeconds: false,
+    withDropdown: false,
+    clearable: false,
+    disabled: false,
+    readOnly: false,
+    variant: "default",
+    size: "md",
+    radius: "default",
+    hoursStep: 1,
+    minutesStep: 1,
+    secondsStep: 1,
+    amPmLabels: { am: "AM", pm: "PM" }
+};
+const pad = (value) => String(value).padStart(2, "0");
+const parseValue = (value, withSeconds) => {
+    if (!value || value === "") {
+        return { hours: null, minutes: null, seconds: null, amPm: null };
+    }
+    const segments = value.trim().split(":");
+    if (segments.length < 2) {
+        return { hours: null, minutes: null, seconds: null, amPm: null };
+    }
+    const hours = Number.parseInt(segments[0], 10);
+    const minutes = Number.parseInt(segments[1], 10);
+    const seconds = segments.length >= 3 ? Number.parseInt(segments[2], 10) : 0;
+    if (Number.isNaN(hours) ||
+        Number.isNaN(minutes) ||
+        Number.isNaN(seconds) ||
+        hours < 0 ||
+        hours >= HOURS_IN_DAY ||
+        minutes < 0 ||
+        minutes >= MINUTES_IN_HOUR ||
+        seconds < 0 ||
+        seconds >= SECONDS_IN_MINUTE) {
+        return { hours: null, minutes: null, seconds: null, amPm: null };
+    }
+    return {
+        hours,
+        minutes,
+        seconds: withSeconds ? seconds : null,
+        amPm: hours >= 12 ? "PM" : "AM"
+    };
+};
+const formatValue = (parts, withSeconds) => {
+    if (parts.hours === null || parts.minutes === null) {
+        return "";
+    }
+    const base = `${pad(parts.hours)}:${pad(parts.minutes)}`;
+    if (withSeconds) {
+        return `${base}:${pad(parts.seconds ?? 0)}`;
+    }
+    return base;
+};
+const to12Hour = (hours24) => {
+    if (hours24 === 0 || hours24 === 12)
+        return 12;
+    return hours24 % 12;
+};
+const to24Hour = (hour12, amPm) => {
+    if (amPm === "AM") {
+        return hour12 === 12 ? 0 : hour12;
+    }
+    return hour12 === 12 ? 12 : hour12 + 12;
+};
+const clampValue = (value, min, max, step) => {
+    const clamped = Math.max(min, Math.min(max, value));
+    return Math.round(clamped / step) * step;
+};
+const parseMinMax = (timeStr) => {
+    if (!timeStr)
+        return null;
+    const segments = timeStr.trim().split(":");
+    if (segments.length < 2)
+        return null;
+    const hours = Number.parseInt(segments[0], 10);
+    const minutes = Number.parseInt(segments[1], 10);
+    const seconds = segments.length >= 3 ? Number.parseInt(segments[2], 10) : 0;
+    if (Number.isNaN(hours) || Number.isNaN(minutes) || Number.isNaN(seconds))
+        return null;
+    return { hours, minutes, seconds };
+};
+const setRef = (ref, node) => {
+    if (typeof ref === "function") {
+        ref(node);
+    }
+    else if (ref && "current" in ref) {
+        ref.current = node;
+    }
+};
+const inputSizes = {
+    xs: "h-5 px-2 text-[8px]",
+    sm: "h-6 px-2.5 text-[10px]",
+    md: "h-8 px-3 text-xs",
+    lg: "h-10 px-3.5 text-sm",
+    xl: "h-12 px-4 text-base"
+};
+const inputVariants = {
+    default: "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] border border-[var(--refraktor-border)]",
+    filled: "bg-[var(--refraktor-bg)] text-[var(--refraktor-text)]",
+    outline: "bg-transparent text-[var(--refraktor-text)] border border-[var(--refraktor-border)]"
+};
+const segmentWidths = {
+    xs: "w-[1.25rem]",
+    sm: "w-[1.5rem]",
+    md: "w-[1.75rem]",
+    lg: "w-[2rem]",
+    xl: "w-[2.5rem]"
+};
+const amPmWidths = {
+    xs: "w-[1.75rem]",
+    sm: "w-[2rem]",
+    md: "w-[2.25rem]",
+    lg: "w-[2.75rem]",
+    xl: "w-[3.25rem]"
+};
+const separatorSizes = {
+    xs: "text-[8px]",
+    sm: "text-[10px]",
+    md: "text-xs",
+    lg: "text-sm",
+    xl: "text-base"
+};
+const TimePicker = factory((_props, ref) => {
+    const { cx, getRadius } = useTheme();
+    const { id, value, defaultValue, onChange, format, withSeconds, withDropdown, clearable, min, max, hoursStep, minutesStep, secondsStep, amPmLabels, disabled, readOnly, variant, size, radius, label, description, error, required, withAsterisk, leftSection, rightSection, hoursRef: hoursRefProp, minutesRef: minutesRefProp, secondsRef: secondsRefProp, amPmRef: amPmRefProp, hoursInputLabel, minutesInputLabel, secondsInputLabel, amPmInputLabel, popoverProps, onFocus, onBlur, className, classNames, ...props } = useProps("TimePicker", defaultProps, _props);
+    const classes = useClassNames("TimePicker", classNames);
+    const _id = useId(id);
+    const is12h = format === "12h";
+    const hoursRef = useRef(null);
+    const minutesRef = useRef(null);
+    const secondsRef = useRef(null);
+    const amPmRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const blurTimeoutRef = useRef(null);
+    const minParsed = useMemo(() => parseMinMax(min), [min]);
+    const maxParsed = useMemo(() => parseMinMax(max), [max]);
+    const [internalValue, setInternalValue] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: "",
+        onChange
+    });
+    const [parts, setParts] = useState(() => parseValue(internalValue, withSeconds));
+    useEffect(() => {
+        const parsed = parseValue(internalValue, withSeconds);
+        setParts(parsed);
+    }, [internalValue, withSeconds]);
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const isDropdownVisible = withDropdown && dropdownOpen && !disabled;
+    const floating = useFloating({
+        placement: popoverProps?.placement ?? "bottom-start",
+        open: isDropdownVisible,
+        onOpenChange: (open) => {
+            if (!disabled && !readOnly)
+                setDropdownOpen(open);
+        },
+        middleware: [
+            offset(popoverProps?.offset ?? 4),
+            flip(),
+            shift()
+        ],
+        whileElementsMounted: autoUpdate,
+        strategy: "fixed"
+    });
+    const click = useClick(floating.context, {
+        enabled: withDropdown && !disabled && !readOnly
+    });
+    const dismiss = useDismiss(floating.context);
+    const role = useRole(floating.context, { role: "dialog" });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        dismiss,
+        role
+    ]);
+    const emitValue = useCallback((nextParts) => {
+        const allFilled = nextParts.hours !== null &&
+            nextParts.minutes !== null &&
+            (!withSeconds || nextParts.seconds !== null) &&
+            (!is12h || nextParts.amPm !== null);
+        const allEmpty = nextParts.hours === null &&
+            nextParts.minutes === null &&
+            (nextParts.seconds === null || !withSeconds);
+        if (allFilled) {
+            let hours = nextParts.hours;
+            if (is12h && nextParts.amPm !== null) {
+                hours = to24Hour(hours, nextParts.amPm);
+            }
+            const formatted = formatValue({ ...nextParts, hours }, withSeconds);
+            setInternalValue(formatted);
+        }
+        else if (allEmpty) {
+            setInternalValue("");
+        }
+    }, [is12h, setInternalValue, withSeconds]);
+    const updateParts = useCallback((updater) => {
+        setParts((prev) => {
+            const next = updater(prev);
+            emitValue(next);
+            return next;
+        });
+    }, [emitValue]);
+    const getDisplayHours = useCallback((hours24) => {
+        if (hours24 === null)
+            return PLACEHOLDER;
+        if (is12h)
+            return pad(to12Hour(hours24));
+        return pad(hours24);
+    }, [is12h]);
+    const handleClear = useCallback(() => {
+        if (disabled || readOnly)
+            return;
+        const empty = {
+            hours: null,
+            minutes: null,
+            seconds: null,
+            amPm: null
+        };
+        setParts(empty);
+        setInternalValue("");
+        hoursRef.current?.focus();
+    }, [disabled, readOnly, setInternalValue]);
+    const createSegmentKeyHandler = useCallback((segment, prevRef, nextRef) => {
+        return (event) => {
+            if (disabled || readOnly)
+                return;
+            const step = segment === "hours"
+                ? hoursStep
+                : segment === "minutes"
+                    ? minutesStep
+                    : secondsStep;
+            const maxVal = segment === "hours"
+                ? is12h
+                    ? 12
+                    : HOURS_IN_DAY - 1
+                : segment === "minutes"
+                    ? MINUTES_IN_HOUR - 1
+                    : SECONDS_IN_MINUTE - 1;
+            const minVal = segment === "hours" && is12h ? 1 : 0;
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                updateParts((prev) => {
+                    const current = prev[segment] ?? minVal;
+                    let next = current + step;
+                    if (next > maxVal)
+                        next = minVal;
+                    return { ...prev, [segment]: next };
+                });
+                return;
+            }
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                updateParts((prev) => {
+                    const current = prev[segment] ?? maxVal;
+                    let next = current - step;
+                    if (next < minVal)
+                        next = maxVal;
+                    return { ...prev, [segment]: next };
+                });
+                return;
+            }
+            if (event.key === "ArrowRight") {
+                event.preventDefault();
+                nextRef.current?.focus();
+                nextRef.current?.select();
+                return;
+            }
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                prevRef.current?.focus();
+                prevRef.current?.select();
+                return;
+            }
+            if (event.key === "Home") {
+                event.preventDefault();
+                updateParts((prev) => ({ ...prev, [segment]: minVal }));
+                return;
+            }
+            if (event.key === "End") {
+                event.preventDefault();
+                updateParts((prev) => ({ ...prev, [segment]: maxVal }));
+                return;
+            }
+            if (event.key === "Backspace") {
+                event.preventDefault();
+                updateParts((prev) => {
+                    if (prev[segment] === null) {
+                        prevRef.current?.focus();
+                        prevRef.current?.select();
+                        return prev;
+                    }
+                    return { ...prev, [segment]: null };
+                });
+                return;
+            }
+            if (event.key === "Tab") {
+                return;
+            }
+            if (/^\d$/.test(event.key)) {
+                event.preventDefault();
+                const digit = Number.parseInt(event.key, 10);
+                updateParts((prev) => {
+                    const current = prev[segment];
+                    let next;
+                    if (current === null || current >= 10) {
+                        next = digit;
+                    }
+                    else {
+                        next = current * 10 + digit;
+                    }
+                    if (next > maxVal) {
+                        next = digit;
+                    }
+                    const result = { ...prev, [segment]: next };
+                    if (next >= (maxVal + 1) / 10 || (current !== null && current < 10)) {
+                        requestAnimationFrame(() => {
+                            nextRef.current?.focus();
+                            nextRef.current?.select();
+                        });
+                    }
+                    return result;
+                });
+                return;
+            }
+            if (!event.ctrlKey && !event.metaKey && !event.altKey) {
+                event.preventDefault();
+            }
+        };
+    }, [disabled, hoursStep, is12h, minutesStep, readOnly, secondsStep, updateParts]);
+    const handleAmPmKeyDown = useCallback((event) => {
+        if (disabled || readOnly)
+            return;
+        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+            updateParts((prev) => ({
+                ...prev,
+                amPm: prev.amPm === "AM" ? "PM" : "AM"
+            }));
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            const prev = withSeconds ? secondsRef : minutesRef;
+            prev.current?.focus();
+            prev.current?.select();
+            return;
+        }
+        if (event.key.toLowerCase() === "a" ||
+            event.key.toLowerCase() === "p") {
+            event.preventDefault();
+            const nextAmPm = event.key.toLowerCase() === "a" ? "AM" : "PM";
+            updateParts((prev) => ({ ...prev, amPm: nextAmPm }));
+            return;
+        }
+        if (event.key === "Backspace") {
+            event.preventDefault();
+            updateParts((prev) => {
+                if (prev.amPm === null) {
+                    const prev2 = withSeconds ? secondsRef : minutesRef;
+                    prev2.current?.focus();
+                    prev2.current?.select();
+                    return prev;
+                }
+                return { ...prev, amPm: null };
+            });
+            return;
+        }
+        if (event.key === "Tab") {
+            return;
+        }
+        if (!event.ctrlKey && !event.metaKey && !event.altKey) {
+            event.preventDefault();
+        }
+    }, [disabled, readOnly, updateParts, withSeconds]);
+    const handleWrapperFocus = useCallback((event) => {
+        if (blurTimeoutRef.current !== null) {
+            clearTimeout(blurTimeoutRef.current);
+            blurTimeoutRef.current = null;
+        }
+        if (!wrapperRef.current?.contains(event.relatedTarget)) {
+            onFocus?.(event);
+            if (withDropdown && !disabled && !readOnly) {
+                setDropdownOpen(true);
+            }
+        }
+    }, [disabled, onFocus, readOnly, withDropdown]);
+    const handleWrapperBlur = useCallback((event) => {
+        blurTimeoutRef.current = setTimeout(() => {
+            if (!wrapperRef.current?.contains(document.activeElement) &&
+                !floating.refs.floating.current?.contains(document.activeElement)) {
+                onBlur?.(event);
+                setDropdownOpen(false);
+            }
+        }, 0);
+    }, [floating.refs.floating, onBlur]);
+    const displayHours = is12h
+        ? parts.hours !== null
+            ? pad(to12Hour(parts.hours))
+            : PLACEHOLDER
+        : parts.hours !== null
+            ? pad(parts.hours)
+            : PLACEHOLDER;
+    const displayMinutes = parts.minutes !== null ? pad(parts.minutes) : PLACEHOLDER;
+    const displaySeconds = parts.seconds !== null ? pad(parts.seconds) : PLACEHOLDER;
+    const displayAmPm = parts.amPm ?? PLACEHOLDER;
+    const hasValue = parts.hours !== null ||
+        parts.minutes !== null ||
+        (withSeconds && parts.seconds !== null);
+    const showClearButton = clearable && hasValue && !disabled && !readOnly;
+    const effectiveRightSection = showClearButton ? (_jsx("button", { type: "button", tabIndex: -1, "aria-label": "Clear time", className: cx("inline-flex items-center justify-center text-[var(--refraktor-text-secondary)] hover:text-[var(--refraktor-text)] transition-colors cursor-pointer"), onClick: handleClear, onMouseDown: (e) => e.preventDefault(), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", className: "size-3.5", children: _jsx("path", { d: "M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z" }) }) })) : (rightSection);
+    const sizeClass = inputSizes[size] ?? inputSizes.md;
+    const variantClass = inputVariants[variant] ?? inputVariants.default;
+    const segmentWidth = segmentWidths[size] ?? segmentWidths.md;
+    const amPmWidth = amPmWidths[size] ?? amPmWidths.md;
+    const sepSize = separatorSizes[size] ?? separatorSizes.md;
+    const hoursKeyHandler = createSegmentKeyHandler("hours", { current: null }, minutesRef);
+    const minutesKeyHandler = createSegmentKeyHandler("minutes", hoursRef, withSeconds ? secondsRef : is12h ? amPmRef : { current: null });
+    const secondsKeyHandler = createSegmentKeyHandler("seconds", minutesRef, is12h ? amPmRef : { current: null });
+    const renderDropdown = () => {
+        if (!withDropdown)
+            return null;
+        const sizeStyles = getPickerSizeStyles(size);
+        const hoursCount = is12h ? 12 : HOURS_IN_DAY;
+        const hoursStart = is12h ? 1 : 0;
+        const hourOptions = [];
+        for (let i = hoursStart; i < hoursStart + hoursCount; i += hoursStep) {
+            hourOptions.push(i);
+        }
+        const minuteOptions = [];
+        for (let i = 0; i < MINUTES_IN_HOUR; i += minutesStep) {
+            minuteOptions.push(i);
+        }
+        const secondOptions = [];
+        for (let i = 0; i < SECONDS_IN_MINUTE; i += secondsStep) {
+            secondOptions.push(i);
+        }
+        const currentHourDisplay = is12h
+            ? parts.hours !== null
+                ? to12Hour(parts.hours)
+                : null
+            : parts.hours;
+        const renderColumn = (columnLabel, options, selectedValue, onSelect, extraClassName) => (_jsxs("div", { className: cx("flex flex-col min-w-0", classes.dropdownColumn, extraClassName), children: [_jsx("div", { className: cx("py-1.5 text-center font-medium text-[var(--refraktor-text-secondary)] border-b border-[var(--refraktor-border)] bg-[var(--refraktor-bg-subtle)]", sizeStyles.label, classes.dropdownColumnLabel), children: columnLabel }), _jsx("div", { className: cx("refraktor-scrollbar flex max-h-52 flex-col gap-0.5 p-1 overflow-y-auto"), children: options.map((opt) => {
+                        const isSelected = opt === selectedValue;
+                        const displayLabel = typeof opt === "number" ? pad(opt) : opt;
+                        return (_jsx("button", { type: "button", tabIndex: -1, className: cx("inline-flex w-full items-center justify-center font-medium transition-colors", isSelected
+                                ? "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)]"
+                                : "hover:bg-[var(--refraktor-bg-hover)] text-[var(--refraktor-text)]", sizeStyles.cell, getRadius(radius), classes.dropdownOption, isSelected && classes.dropdownOptionActive), onMouseDown: (e) => e.preventDefault(), onClick: () => onSelect(opt), children: displayLabel }, String(opt)));
+                    }) })] }));
+        const handleDropdownHourSelect = (val) => {
+            const hourVal = typeof val === "number" ? val : Number(val);
+            updateParts((prev) => {
+                const next = { ...prev, hours: is12h ? to24Hour(hourVal, prev.amPm ?? "AM") : hourVal };
+                if (next.minutes === null) {
+                    requestAnimationFrame(() => {
+                        minutesRef.current?.focus();
+                        minutesRef.current?.select();
+                    });
+                }
+                return next;
+            });
+        };
+        const handleDropdownMinuteSelect = (val) => {
+            const minVal = typeof val === "number" ? val : Number(val);
+            updateParts((prev) => {
+                const next = { ...prev, minutes: minVal };
+                if (withSeconds && next.seconds === null) {
+                    requestAnimationFrame(() => {
+                        secondsRef.current?.focus();
+                        secondsRef.current?.select();
+                    });
+                }
+                return next;
+            });
+        };
+        const handleDropdownSecondSelect = (val) => {
+            const secVal = typeof val === "number" ? val : Number(val);
+            updateParts((prev) => ({ ...prev, seconds: secVal }));
+        };
+        const handleDropdownAmPmSelect = (val) => {
+            const amPmVal = val;
+            updateParts((prev) => {
+                if (prev.hours === null)
+                    return { ...prev, amPm: amPmVal };
+                const hour12 = to12Hour(prev.hours);
+                const newHours24 = to24Hour(hour12, amPmVal);
+                return { ...prev, hours: newHours24, amPm: amPmVal };
+            });
+        };
+        const columnCount = (withSeconds ? 4 : 3) + (is12h ? 1 : 0) - (withSeconds ? 0 : 1);
+        const gridColsClass = columnCount === 2
+            ? "grid-cols-2"
+            : columnCount === 3
+                ? "grid-cols-3"
+                : "grid-cols-4";
+        return (_jsx(FloatingPortal, { children: isDropdownVisible && (_jsx(FloatingFocusManager, { context: floating.context, modal: false, initialFocus: -1, returnFocus: false, children: _jsx("div", { ref: floating.refs.setFloating, style: {
+                        ...floating.floatingStyles,
+                        zIndex: 1000
+                    }, className: cx("border border-[var(--refraktor-border)] bg-[var(--refraktor-bg)] shadow-md overflow-hidden", getRadius(radius), classes.dropdown), ...getFloatingProps(), children: _jsxs("div", { className: cx("grid divide-x divide-[var(--refraktor-border)]", gridColsClass), children: [renderColumn("Hour", hourOptions, currentHourDisplay, handleDropdownHourSelect), renderColumn("Min", minuteOptions, parts.minutes, handleDropdownMinuteSelect), withSeconds &&
+                                renderColumn("Sec", secondOptions, parts.seconds, handleDropdownSecondSelect), is12h &&
+                                renderColumn(amPmLabels.am + "/" + amPmLabels.pm, [amPmLabels.am, amPmLabels.pm], parts.amPm ===
+                                    "AM"
+                                    ? amPmLabels.am
+                                    : parts.amPm === "PM"
+                                        ? amPmLabels.pm
+                                        : null, (val) => {
+                                    const normalized = val === amPmLabels.am
+                                        ? "AM"
+                                        : "PM";
+                                    handleDropdownAmPmSelect(normalized);
+                                })] }) }) })) }));
+    };
+    const hasWrapper = label || description || error;
+    const inputContent = (_jsxs("div", { ref: (node) => {
+            if (wrapperRef)
+                wrapperRef.current = node;
+            floating.refs.setReference(node);
+        }, className: cx("relative w-full inline-flex items-center transition-all", sizeClass, variantClass, getRadius(radius), "focus-within:border-[var(--refraktor-primary)]", error && typeof error !== "boolean" && "border-[var(--refraktor-colors-red-6)]", disabled && "opacity-50 cursor-not-allowed", classes.fieldsWrapper, !hasWrapper && className), onFocus: handleWrapperFocus, onBlur: handleWrapperBlur, ...(!hasWrapper ? getReferenceProps(props) : getReferenceProps()), children: [leftSection && (_jsx("div", { className: "flex h-full items-center justify-center text-[var(--refraktor-text-secondary)] shrink-0 select-none", children: leftSection })), _jsxs("div", { className: cx("flex items-center flex-1 min-w-0 gap-0.5"), children: [_jsx("input", { ref: (node) => {
+                            hoursRef.current = node;
+                            setRef(hoursRefProp, node);
+                        }, id: `${_id}-hours`, type: "text", inputMode: "numeric", autoComplete: "off", placeholder: PLACEHOLDER, value: parts.hours !== null ? (is12h ? pad(to12Hour(parts.hours)) : pad(parts.hours)) : "", "aria-label": hoursInputLabel ?? "Hours", readOnly: true, tabIndex: disabled ? -1 : 0, disabled: disabled, className: cx("bg-transparent border-none outline-none text-center text-[var(--refraktor-text)] placeholder:text-[var(--refraktor-text-tertiary)] cursor-default select-all p-0", segmentWidth, classes.field), onKeyDown: hoursKeyHandler, onFocus: (e) => e.target.select() }), _jsx("span", { className: cx("text-[var(--refraktor-text-secondary)] select-none leading-none", sepSize, classes.separator), children: ":" }), _jsx("input", { ref: (node) => {
+                            minutesRef.current = node;
+                            setRef(minutesRefProp, node);
+                        }, id: `${_id}-minutes`, type: "text", inputMode: "numeric", autoComplete: "off", placeholder: PLACEHOLDER, value: parts.minutes !== null ? pad(parts.minutes) : "", "aria-label": minutesInputLabel ?? "Minutes", readOnly: true, tabIndex: disabled ? -1 : 0, disabled: disabled, className: cx("bg-transparent border-none outline-none text-center text-[var(--refraktor-text)] placeholder:text-[var(--refraktor-text-tertiary)] cursor-default select-all p-0", segmentWidth, classes.field), onKeyDown: minutesKeyHandler, onFocus: (e) => e.target.select() }), withSeconds && (_jsxs(_Fragment, { children: [_jsx("span", { className: cx("text-[var(--refraktor-text-secondary)] select-none leading-none", sepSize, classes.separator), children: ":" }), _jsx("input", { ref: (node) => {
+                                    secondsRef.current = node;
+                                    setRef(secondsRefProp, node);
+                                }, id: `${_id}-seconds`, type: "text", inputMode: "numeric", autoComplete: "off", placeholder: PLACEHOLDER, value: parts.seconds !== null
+                                    ? pad(parts.seconds)
+                                    : "", "aria-label": secondsInputLabel ?? "Seconds", readOnly: true, tabIndex: disabled ? -1 : 0, disabled: disabled, className: cx("bg-transparent border-none outline-none text-center text-[var(--refraktor-text)] placeholder:text-[var(--refraktor-text-tertiary)] cursor-default select-all p-0", segmentWidth, classes.field), onKeyDown: secondsKeyHandler, onFocus: (e) => e.target.select() })] })), is12h && (_jsx("input", { ref: (node) => {
+                            amPmRef.current = node;
+                            setRef(amPmRefProp, node);
+                        }, id: `${_id}-ampm`, type: "text", autoComplete: "off", placeholder: PLACEHOLDER, value: parts.amPm !== null
+                            ? parts.amPm === "AM"
+                                ? amPmLabels.am
+                                : amPmLabels.pm
+                            : "", "aria-label": amPmInputLabel ?? "AM/PM", readOnly: true, tabIndex: disabled ? -1 : 0, disabled: disabled, className: cx("bg-transparent border-none outline-none text-center text-[var(--refraktor-text)] placeholder:text-[var(--refraktor-text-tertiary)] cursor-default select-all p-0 ml-1", amPmWidth, classes.amPmInput), onKeyDown: handleAmPmKeyDown, onFocus: (e) => e.target.select() }))] }), effectiveRightSection && (_jsx("div", { className: "flex h-full items-center justify-center text-[var(--refraktor-text-secondary)] shrink-0 select-none", children: effectiveRightSection }))] }));
+    const content = hasWrapper ? (_jsxs(Input.Wrapper, { ref: ref, label: label, description: description, error: error, required: required, withAsterisk: withAsterisk, inputId: `${_id}-hours`, className: cx(classes.root, className), children: [inputContent, renderDropdown()] })) : (_jsxs("div", { ref: ref, className: cx(classes.root, className), children: [inputContent, renderDropdown()] }));
+    return content;
+});
+TimePicker.displayName = "@refraktor/dates/TimePicker";
+TimePicker.configure = createComponentConfig();
+TimePicker.classNames = createClassNamesConfig();
+export default TimePicker;