flikkui 0.2.0-beta.2 → 0.2.0-beta.5

package/dist/components/forms/TimePicker/TimePicker.js

@@ -2,36 +2,35 @@ import React__default, { createContext, useState, useRef, useCallback, useEffect
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { timePickerTheme } from './TimePicker.theme.js';
 import { cn } from '../../../utils/cn.js';
-import { useClickOutside } from '../../../utils/useClickOutside.js';
 import { TimePickerTrigger } from './TimePickerTrigger.js';
 import { TimePickerContent } from './TimePickerContent.js';
+import { WheelColumn } from './WheelColumn.js';
+import { formatTimeInput, isValidTimeInput } from '../Input/inputMasks.js';
 
 const TimePickerContext = createContext(undefined);
 /**
  * Utility functions for time handling
  */
 // Parse time string into components - enhanced to handle various input formats
-const parseTime = (timeString, format = '24h') => {
-    if (!timeString || timeString.trim() === '')
+const parseTime = (timeString, format = "24h") => {
+    if (!timeString || timeString.trim() === "")
         return null;
     // Clean the input string
     const cleanTime = timeString.trim().toUpperCase();
     // Handle various input formats
     let parsedHour = 0;
     let parsedMinute = 0;
-    let parsedSecond = 0;
     let parsedPeriod;
     // Try different parsing strategies
-    // Strategy 1: Standard format with colons (14:30, 2:30 PM, 14:30:45)
-    const standardRegex = format === '12h'
-        ? /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM)?$/i
-        : /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/;
+    // Strategy 1: Standard format with colons (14:30, 2:30 PM)
+    const standardRegex = format === "12h"
+        ? /^(\d{1,2}):(\d{2})\s*(AM|PM)?$/i
+        : /^(\d{1,2}):(\d{2})$/;
     let match = cleanTime.match(standardRegex);
     if (match) {
         parsedHour = parseInt(match[1], 10);
         parsedMinute = parseInt(match[2], 10);
-        parsedSecond = match[3] ? parseInt(match[3], 10) : 0;
-        parsedPeriod = match[4] ? match[4] : undefined;
+        parsedPeriod = match[3] ? match[3] : undefined;
     }
     else {
         // Strategy 2: Flexible format (230, 230p, 1430, etc.)
@@ -39,7 +38,11 @@ const parseTime = (timeString, format = '24h') => {
         match = cleanTime.match(flexibleRegex);
         if (match) {
             const digits = match[1];
-            parsedPeriod = match[2] ? (match[2].length === 1 ? `${match[2]}M` : match[2]) : undefined;
+            parsedPeriod = match[2]
+                ? match[2].length === 1
+                    ? `${match[2]}M`
+                    : match[2]
+                : undefined;
             if (digits.length <= 2) {
                 // Just hours (2, 14)
                 parsedHour = parseInt(digits, 10);
@@ -61,55 +64,51 @@ const parseTime = (timeString, format = '24h') => {
         }
     }
     // Convert 12-hour to 24-hour for internal consistency
-    if (format === '12h' && parsedPeriod) {
-        if (parsedPeriod === 'AM' && parsedHour === 12) {
+    if (format === "12h" && parsedPeriod) {
+        if (parsedPeriod === "AM" && parsedHour === 12) {
             parsedHour = 0;
         }
-        else if (parsedPeriod === 'PM' && parsedHour !== 12) {
+        else if (parsedPeriod === "PM" && parsedHour !== 12) {
             parsedHour += 12;
         }
     }
     // Validate parsed values
-    if (parsedHour < 0 || parsedHour > 23 || parsedMinute < 0 || parsedMinute > 59 || parsedSecond < 0 || parsedSecond > 59) {
+    if (parsedHour < 0 ||
+        parsedHour > 23 ||
+        parsedMinute < 0 ||
+        parsedMinute > 59) {
         return null;
     }
     return {
         hour: parsedHour,
         minute: parsedMinute,
-        second: parsedSecond,
-        period: format === '12h' ? (parsedHour >= 12 ? 'PM' : 'AM') : undefined
+        period: format === "12h" ? (parsedHour >= 12 ? "PM" : "AM") : undefined,
     };
 };
 // Format time components into string
-const formatTime = (time, format = '24h', showSeconds = false) => {
-    let { hour, minute, second = 0, period } = time;
-    if (format === '12h') {
+const formatTime = (time, format = "24h") => {
+    let { hour, minute, period } = time;
+    if (format === "12h") {
         // Convert to 12-hour format
         if (hour === 0) {
             hour = 12;
-            period = 'AM';
+            period = "AM";
         }
         else if (hour === 12) {
-            period = 'PM';
+            period = "PM";
         }
         else if (hour > 12) {
             hour = hour - 12;
-            period = 'PM';
+            period = "PM";
         }
         else {
-            period = 'AM';
+            period = "AM";
         }
-        const timeStr = showSeconds
-            ? `${hour}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`
-            : `${hour}:${minute.toString().padStart(2, '0')}`;
-        return `${timeStr} ${period}`;
+        return `${hour}:${minute.toString().padStart(2, "0")} ${period}`;
     }
     else {
         // 24-hour format
-        const timeStr = showSeconds
-            ? `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`
-            : `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
-        return timeStr;
+        return `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
     }
 };
 // Validate time against constraints
@@ -117,12 +116,12 @@ const validateTime = (time, minTime, maxTime) => {
     const { hour, minute } = time;
     // Basic validation
     if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
-        return { isValid: false, error: 'Invalid time' };
+        return { isValid: false, error: "Invalid time" };
     }
     // Convert to minutes for comparison
     const timeMinutes = hour * 60 + minute;
     if (minTime) {
-        const minParsed = parseTime(minTime, '24h');
+        const minParsed = parseTime(minTime, "24h");
         if (minParsed) {
             const minMinutes = minParsed.hour * 60 + minParsed.minute;
             if (timeMinutes < minMinutes) {
@@ -131,7 +130,7 @@ const validateTime = (time, minTime, maxTime) => {
         }
     }
     if (maxTime) {
-        const maxParsed = parseTime(maxTime, '24h');
+        const maxParsed = parseTime(maxTime, "24h");
         if (maxParsed) {
             const maxMinutes = maxParsed.hour * 60 + maxParsed.minute;
             if (timeMinutes > maxMinutes) {
@@ -143,7 +142,7 @@ const validateTime = (time, minTime, maxTime) => {
 };
 // Generate time options for selectors
 const generateHours = (format) => {
-    if (format === '12h') {
+    if (format === "12h") {
         return Array.from({ length: 12 }, (_, i) => i + 1);
     }
     return Array.from({ length: 24 }, (_, i) => i);
@@ -151,141 +150,303 @@ const generateHours = (format) => {
 const generateMinutes = (step) => {
     return Array.from({ length: 60 / step }, (_, i) => i * step);
 };
-const generateSeconds = () => {
-    return Array.from({ length: 60 }, (_, i) => i);
-};
-const TimeSelectorColumn = ({ label, value, options, onChange, disabled = false, size = 'md', theme }) => {
-    const scrollRef = useRef(null);
-    // Auto-scroll to selected value
-    useEffect(() => {
-        if (scrollRef.current) {
-            const selectedIndex = options.findIndex(option => option === value);
-            if (selectedIndex >= 0) {
-                const itemHeight = 40; // Approximate item height
-                const scrollTop = selectedIndex * itemHeight - 80; // Center in view
-                scrollRef.current.scrollTop = Math.max(0, scrollTop);
-            }
-        }
-    }, [value, options]);
-    return (React__default.createElement("div", { className: cn(theme.selectorColumnStyle) },
-        React__default.createElement("div", { className: cn(theme.selectorHeaderStyle) },
-            React__default.createElement("span", { className: cn(theme.selectorHeaderLabelStyle) }, label)),
-        React__default.createElement("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", style: { scrollbarWidth: 'thin' } }, options.map((option) => {
-            var _a;
-            return (React__default.createElement("button", { key: option, type: "button", "data-selected": value === option, "data-disabled": disabled, className: cn(theme.selectorItemStyle, (_a = theme.selectorItemSizes) === null || _a === void 0 ? void 0 : _a[size]), onClick: () => !disabled && onChange(option), disabled: disabled }, typeof option === 'number' ? option.toString().padStart(2, '0') : option));
-        }))));
-};
 /**
  * Main TimePicker Component
+ *
+ * Features:
+ * - iOS-style scroll wheel picker
+ * - Combobox-style masked input trigger with direct keyboard entry
+ * - Live bidirectional sync between input and wheels
+ * - 12h and 24h format support with AM/PM toggle
+ * - Cancel/Save workflow for confirming selection
+ * - Validation with min/max time constraints
  */
-const TimePicker = ({ value, defaultValue, onChange, format = '24h', step = 1, minTime, maxTime, showSeconds = false, disabled = false, placeholder = format === '12h' ? 'Select time (e.g. 2:30 PM)' : 'Select time (e.g. 14:30)', size = 'md', state = 'default', clearable = true, label, helperText, iconStart, iconEnd, className, labelClassName, helperTextClassName, theme = {}, id, ...props }) => {
+const TimePicker = ({ value, defaultValue, onChange, format = "24h", step = 1, minTime, maxTime, disabled = false, placeholder = format === "12h"
+    ? "HH:MM"
+    : "HH:MM", size = "md", state = "default", clearable = true, label, helperText, iconStart, iconEnd, className, labelClassName, helperTextClassName, theme = {}, id, ...props }) => {
     var _a;
     // Internal state
     const [isOpen, setIsOpen] = useState(false);
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [validationError, setValidationError] = useState();
-    const [isTyping, setIsTyping] = useState(false);
+    // Pending state for wheel picker (before Save is clicked)
+    const [pendingTime, setPendingTime] = useState(null);
+    // Masked input value
+    const [maskedValue, setMaskedValue] = useState("");
+    // Track whether the input or wheels initiated the last change (prevent feedback loops)
+    const syncSourceRef = useRef(null);
     // Refs
     const containerRef = useRef(null);
     const triggerRef = useRef(null);
-    // Hooks
-    useClickOutside(containerRef, () => setIsOpen(false));
+    const inputRef = useRef(null);
+    const dropdownRef = useRef(null);
     // Determine current value (controlled vs uncontrolled)
     const currentValue = value !== undefined ? value : internalValue;
-    const [inputValue, setInputValue] = useState(currentValue || '');
-    // Parse current time
+    // Parse current time for display
     const currentTime = parseTime(currentValue, format) || {
-        hour: format === '12h' ? 12 : 0,
+        hour: format === "12h" ? 12 : 0,
         minute: 0,
-        second: 0,
-        period: format === '12h' ? 'AM' : undefined
+        period: format === "12h" ? "AM" : undefined,
     };
+    // Get display value for trigger
+    const displayValue = currentValue ? formatTime(currentTime, format) : "";
     // Merge theme with defaults
     const mergedTheme = { ...timePickerTheme, ...theme };
     // Generate unique ID
     const inputId = id || `timepicker-${Math.random().toString(36).substr(2, 9)}`;
     // Determine if component is in error state
-    const isInvalid = state === 'invalid' || Boolean(validationError);
-    const finalState = isInvalid ? 'invalid' : state;
-    // Handle time change
-    const handleTimeChange = useCallback((newTime) => {
-        const formattedTime = formatTime(newTime, format, showSeconds);
-        // Validate time
-        const validation = validateTime(newTime, minTime, maxTime);
-        if (!validation.isValid) {
-            setValidationError(validation.error);
-            return;
+    const isInvalid = state === "invalid" || Boolean(validationError);
+    const finalState = isInvalid ? "invalid" : state;
+    // Generate selector options
+    const hourOptions = generateHours(format);
+    const minuteOptions = generateMinutes(step);
+    const periodOptions = ["AM", "PM"];
+    // Get the time to show in wheel picker (pending or current)
+    const wheelTime = pendingTime || currentTime;
+    // Convert 24h hour to 12h display hour for wheel
+    const getDisplayHour = (hour24) => {
+        if (format === "12h") {
+            if (hour24 === 0)
+                return 12;
+            if (hour24 > 12)
+                return hour24 - 12;
+            return hour24;
+        }
+        return hour24;
+    };
+    // Convert 12h display hour back to 24h for storage
+    const get24Hour = (displayHour, period) => {
+        if (period === "AM") {
+            return displayHour === 12 ? 0 : displayHour;
         }
         else {
-            setValidationError(undefined);
+            return displayHour === 12 ? 12 : displayHour + 12;
         }
-        // Update internal state if uncontrolled
-        if (value === undefined) {
-            setInternalValue(formattedTime);
+    };
+    // ============================================
+    // Input handlers
+    // ============================================
+    // Handle masked input change
+    const handleInputChange = useCallback((rawValue) => {
+        const formatKey = format === "12h" ? "12h" : "24h";
+        const formatted = formatTimeInput(rawValue, formatKey);
+        setMaskedValue(formatted);
+        // If complete valid time, sync to wheels
+        if (isValidTimeInput(formatted, formatKey)) {
+            const match = formatted.match(/^(\d{2}):(\d{2})$/);
+            if (match) {
+                let hour = parseInt(match[1], 10);
+                const minute = parseInt(match[2], 10);
+                // For 12h, convert display hour to 24h using current period
+                if (format === "12h") {
+                    const currentPeriod = (pendingTime === null || pendingTime === void 0 ? void 0 : pendingTime.period) || currentTime.period || "AM";
+                    hour = get24Hour(hour, currentPeriod);
+                }
+                syncSourceRef.current = "input";
+                setPendingTime((prev) => ({
+                    hour,
+                    minute,
+                    period: format === "12h" ? ((prev === null || prev === void 0 ? void 0 : prev.period) || currentTime.period || "AM") : undefined,
+                }));
+            }
         }
-        // Call onChange callback
-        onChange === null || onChange === void 0 ? void 0 : onChange(formattedTime);
-    }, [format, showSeconds, minTime, maxTime, value, onChange]);
-    // Handle dropdown trigger click (button click)
-    const handleDropdownToggle = () => {
-        if (!disabled) {
-            setIsOpen(!isOpen);
+        // Open dropdown if not already open
+        if (!isOpen) {
+            setPendingTime((prev) => prev || { ...currentTime });
+            setIsOpen(true);
         }
-    };
+    }, [format, isOpen, pendingTime, currentTime]);
+    // Handle input focus — open dropdown
+    const handleInputFocus = useCallback(() => {
+        if (disabled)
+            return;
+        if (!isOpen) {
+            setPendingTime({ ...currentTime });
+            setIsOpen(true);
+            // Initialize maskedValue from current display
+            if (currentValue) {
+                const displayHour = getDisplayHour(currentTime.hour);
+                const formatted = `${displayHour.toString().padStart(2, "0")}:${currentTime.minute.toString().padStart(2, "0")}`;
+                setMaskedValue(formatted);
+            }
+        }
+    }, [disabled, isOpen, currentTime, currentValue]);
+    // Handle input key down
+    const handleInputKeyDown = useCallback((e) => {
+        var _a;
+        if (e.key === "Enter") {
+            e.preventDefault();
+            handleSave();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            handleCancel();
+        }
+        else if (e.key === "Tab") {
+            handleCancel();
+        }
+        else if (e.key === "Backspace") {
+            // Handle backspace across the colon: if cursor is right after ":",
+            // delete both the colon and the preceding digit
+            const input = e.currentTarget;
+            const cursorPos = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : 0;
+            if (cursorPos === 3 && maskedValue[2] === ":") {
+                e.preventDefault();
+                // Remove the digit before colon and the colon itself → keep just first char
+                const newValue = maskedValue.slice(0, 1);
+                setMaskedValue(newValue);
+            }
+        }
+    }, [maskedValue]);
+    // Handle AM/PM period toggle
+    const handlePeriodToggle = useCallback(() => {
+        setPendingTime((prev) => {
+            const current = prev || currentTime;
+            const newPeriod = current.period === "AM" ? "PM" : "AM";
+            const displayHour = getDisplayHour(current.hour);
+            const hour24 = get24Hour(displayHour, newPeriod);
+            syncSourceRef.current = "wheel";
+            return { ...current, hour: hour24, period: newPeriod };
+        });
+    }, [currentTime, format]);
+    // ============================================
+    // Wheel handlers
+    // ============================================
+    // Handle hour change from wheel
+    const handleHourChange = useCallback((newHour) => {
+        const hour = typeof newHour === "string" ? parseInt(newHour) : newHour;
+        syncSourceRef.current = "wheel";
+        setPendingTime((prev) => {
+            const current = prev || currentTime;
+            if (format === "12h") {
+                // Convert back to 24h
+                const hour24 = get24Hour(hour, current.period || "AM");
+                return { ...current, hour: hour24 };
+            }
+            return { ...current, hour };
+        });
+    }, [currentTime, format]);
+    // Handle minute change from wheel
+    const handleMinuteChange = useCallback((newMinute) => {
+        const minute = typeof newMinute === "string" ? parseInt(newMinute) : newMinute;
+        syncSourceRef.current = "wheel";
+        setPendingTime((prev) => {
+            const current = prev || currentTime;
+            return { ...current, minute };
+        });
+    }, [currentTime]);
+    // Handle period change from wheel (12h format only)
+    const handlePeriodChange = useCallback((newPeriod) => {
+        const period = newPeriod;
+        syncSourceRef.current = "wheel";
+        setPendingTime((prev) => {
+            const current = prev || currentTime;
+            // Recalculate hour based on new period
+            const displayHour = getDisplayHour(current.hour);
+            const hour24 = get24Hour(displayHour, period);
+            return { ...current, hour: hour24, period };
+        });
+    }, [currentTime, format]);
+    // ============================================
+    // Save / Cancel / Clear
+    // ============================================
+    // Handle Save button - commit pending time
+    const handleSave = useCallback(() => {
+        if (pendingTime) {
+            // Validate time
+            const validation = validateTime(pendingTime, minTime, maxTime);
+            if (!validation.isValid) {
+                setValidationError(validation.error);
+                return;
+            }
+            else {
+                setValidationError(undefined);
+            }
+            const formattedTime = formatTime(pendingTime, format);
+            // Update internal state if uncontrolled
+            if (value === undefined) {
+                setInternalValue(formattedTime);
+            }
+            // Call onChange callback
+            onChange === null || onChange === void 0 ? void 0 : onChange(formattedTime);
+        }
+        setIsOpen(false);
+        setPendingTime(null);
+        setMaskedValue("");
+    }, [pendingTime, format, minTime, maxTime, value, onChange]);
+    // Handle Cancel button - discard pending time
+    const handleCancel = useCallback(() => {
+        setIsOpen(false);
+        setPendingTime(null);
+        setMaskedValue("");
+    }, []);
+    // Portal-aware click-outside detection (matches Select/Combobox pattern)
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target) &&
+                containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                handleCancel();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen, handleCancel]);
     // Handle clear button click
     const handleClear = () => {
-        setInputValue('');
         if (value === undefined) {
             setInternalValue(undefined);
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange('');
+        onChange === null || onChange === void 0 ? void 0 : onChange("");
+        setMaskedValue("");
         setValidationError(undefined);
     };
-    // Sync input value with current value when it changes externally
-    React__default.useEffect(() => {
-        if (!isTyping) {
-            setInputValue(currentValue ? formatTime(currentTime, format, showSeconds) : '');
+    // ============================================
+    // Bidirectional sync: wheels → input
+    // ============================================
+    useEffect(() => {
+        if (pendingTime && syncSourceRef.current === "wheel") {
+            const displayHour = getDisplayHour(pendingTime.hour);
+            const formatted = `${displayHour.toString().padStart(2, "0")}:${pendingTime.minute.toString().padStart(2, "0")}`;
+            setMaskedValue(formatted);
         }
-    }, [currentValue, format, showSeconds, isTyping, currentTime]);
-    // Generate selector options
-    const hourOptions = generateHours(format);
-    const minuteOptions = generateMinutes(step);
-    const secondOptions = generateSeconds();
-    const periodOptions = ['AM', 'PM'];
+        // Reset sync source after processing
+        syncSourceRef.current = null;
+    }, [pendingTime, format]);
     // Context value
     const contextValue = {
         isOpen,
         setIsOpen,
         theme: mergedTheme,
         triggerRef,
-        hasValue: Boolean(inputValue),
+        inputRef,
+        hasValue: Boolean(displayValue),
         size,
         state: finalState,
     };
+    // Current period for trigger display
+    const currentPeriod = (pendingTime === null || pendingTime === void 0 ? void 0 : pendingTime.period) || currentTime.period || (format === "12h" ? "AM" : undefined);
+    // Compute the value shown in the input:
+    // - When open: show maskedValue (user is editing)
+    // - When closed with a committed value: show formatted HH:MM from currentValue
+    // - When closed without a value: show "" (placeholder visible)
+    const closedInputDisplay = currentValue
+        ? `${getDisplayHour(currentTime.hour).toString().padStart(2, "0")}:${currentTime.minute.toString().padStart(2, "0")}`
+        : "";
+    const inputDisplayValue = isOpen ? maskedValue : closedInputDisplay;
     return (React__default.createElement(TimePickerContext.Provider, { value: contextValue },
         React__default.createElement("div", { ref: containerRef, className: cn(mergedTheme.containerStyle, className) },
             label && (React__default.createElement(FormLabel, { htmlFor: inputId, className: labelClassName, state: finalState, required: props.required }, label)),
-            React__default.createElement(TimePickerTrigger, { id: inputId, disabled: disabled, isOpen: isOpen, state: finalState, size: size, clearable: clearable, onClear: handleClear, onClick: handleDropdownToggle, iconStart: iconStart, iconEnd: iconEnd }, inputValue || placeholder),
-            React__default.createElement(TimePickerContent, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: true, placement: "bottom-start", offset: 4 },
-                React__default.createElement("div", { className: cn(mergedTheme.selectorContainerStyle) },
-                    React__default.createElement(TimeSelectorColumn, { label: "Hour", value: currentTime.hour, options: hourOptions, onChange: (hour) => handleTimeChange({
-                            ...currentTime,
-                            hour: typeof hour === 'string' ? parseInt(hour) : hour
-                        }), disabled: disabled, size: size, theme: mergedTheme }),
-                    React__default.createElement(TimeSelectorColumn, { label: "Min", value: currentTime.minute, options: minuteOptions, onChange: (minute) => handleTimeChange({
-                            ...currentTime,
-                            minute: typeof minute === 'string' ? parseInt(minute) : minute
-                        }), disabled: disabled, size: size, theme: mergedTheme }),
-                    showSeconds && (React__default.createElement(TimeSelectorColumn, { label: "Sec", value: currentTime.second || 0, options: secondOptions, onChange: (second) => handleTimeChange({
-                            ...currentTime,
-                            second: typeof second === 'string' ? parseInt(second) : second
-                        }), disabled: disabled, size: size, theme: mergedTheme })),
-                    format === '12h' && (React__default.createElement(TimeSelectorColumn, { label: "Period", value: currentTime.period || 'AM', options: periodOptions, onChange: (period) => handleTimeChange({
-                            ...currentTime,
-                            period: period
-                        }), disabled: disabled, size: size, theme: mergedTheme })))),
+            React__default.createElement(TimePickerTrigger, { id: inputId, disabled: disabled, isOpen: isOpen, state: finalState, size: size, clearable: clearable, onClear: handleClear, iconStart: iconStart, iconEnd: iconEnd, inputValue: inputDisplayValue, onInputChange: handleInputChange, onInputFocus: handleInputFocus, onInputKeyDown: handleInputKeyDown, format: format, period: currentPeriod, onPeriodToggle: handlePeriodToggle, placeholder: placeholder }),
+            React__default.createElement(TimePickerContent, { isOpen: isOpen, onCancel: handleCancel, onSave: handleSave, portal: true, placement: "bottom-start", offset: 4, dropdownRef: dropdownRef },
+                React__default.createElement(WheelColumn, { label: "Hour", options: hourOptions, value: getDisplayHour(wheelTime.hour), onChange: handleHourChange, theme: mergedTheme }),
+                React__default.createElement(WheelColumn, { label: "Min", options: minuteOptions, value: wheelTime.minute, onChange: handleMinuteChange, theme: mergedTheme }),
+                format === "12h" && (React__default.createElement(WheelColumn, { label: "", options: periodOptions, value: wheelTime.period || "AM", onChange: handlePeriodChange, theme: mergedTheme }))),
             (helperText || validationError) && (React__default.createElement("p", { className: cn(mergedTheme.helperTextStyle, (_a = mergedTheme.helperTextStates) === null || _a === void 0 ? void 0 : _a[finalState], helperTextClassName) }, validationError || helperText)))));
 };
-TimePicker.displayName = 'TimePicker';
+TimePicker.displayName = "TimePicker";
 
 export { TimePicker, TimePickerContext };

package/dist/components/forms/TimePicker/TimePicker.theme.d.ts

@@ -1,4 +1,4 @@
-import { TimePickerThemeOverrides } from './TimePicker.types';
+import { TimePickerThemeOverrides } from "./TimePicker.types";
 /**
  * Default theme configuration for TimePicker component
  *

package/dist/components/forms/TimePicker/TimePicker.theme.js

@@ -9,8 +9,8 @@ import { formsBaseTheme } from '../forms.theme.js';
 const timePickerTheme = {
     // Container wrapper
     containerStyle: formsBaseTheme.wrapperStyle,
-    // Trigger base styles - extends common form input group style (same as Select/DatePicker)
-    baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
+    // Trigger base styles - extends common form input group style (same as Input/Select/DatePicker)
+    baseStyle: formsBaseTheme.inputGroupBaseStyle,
     // Trigger size variants - composed from atomic tokens
     triggerSizes: {
         sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
@@ -30,41 +30,58 @@ const timePickerTheme = {
     // Icon padding styles - inherited from common form theme
     iconStartPadding: formsBaseTheme.iconStyles.padding.left,
     iconEndPadding: formsBaseTheme.iconStyles.padding.right,
+    // Placeholder text style - matches Select/Combobox placeholder styling
+    placeholderTextStyle: formsBaseTheme.placeholderStyle,
+    // Selected value text style
+    valueTextStyle: "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
     // Clear button styles (positioned between left content and right icon)
     clearButtonStyle: "absolute right-8 top-1/2 -translate-y-1/2 p-1 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors z-10",
     // Dropdown container styles (TimePicker-specific)
     // Width is controlled by trigger size via estimatedWidth parameter
-    dropdownStyle: "fixed z-[1000] mt-2 bg-white border border-[var(--color-border)] rounded-[var(--form-rounded)] shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
+    dropdownStyle: "fixed z-[1000] bg-white border border-[var(--color-border)] rounded-[var(--form-rounded)] shadow-lg overflow-hidden " +
+        "dark:bg-[var(--color-background-secondary)] ",
     // Dropdown size variants - primarily for internal spacing/padding
     dropdownSizes: {
         sm: "",
         md: "",
         lg: "",
     },
-    // Time selector container
-    selectorContainerStyle: "flex divide-x divide-[var(--color-border)] h-48 overflow-hidden",
-    // Individual selector column
-    selectorColumnStyle: "flex-1 flex flex-col overflow-hidden scroll-smooth",
-    // Column header styles
-    selectorHeaderStyle: "sticky top-0 bg-white/95 backdrop-blur-sm p-2 border-b border-[var(--color-border)]",
-    // Column header label styles
-    selectorHeaderLabelStyle: "text-xs font-semibold text-[var(--color-text-secondary)] uppercase tracking-wide",
-    // Time selector items
-    selectorItemStyle: "flex items-center justify-center py-2 px-3 text-sm font-medium text-[var(--color-text-secondary)] hover:bg-[var(--color-background-secondary)] cursor-pointer transition-colors border-b border-[var(--color-border)] last:border-b-0 min-h-[2.5rem] data-[selected=true]:bg-[var(--color-primary-50)] data-[selected=true]:text-[var(--color-primary-700)] data-[selected=true]:font-semibold data-[selected=true]:border-l-2 data-[selected=true]:border-l-[var(--color-primary-600)] data-[disabled=true]:text-[var(--color-text-disabled)] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent",
-    // Selector item size variants
-    selectorItemSizes: {
-        sm: "py-1.5 px-2 text-xs min-h-[2rem]",
-        md: "py-2 px-3 text-sm min-h-[2.5rem]",
-        lg: "py-3 px-4 text-base min-h-[3rem]",
-    },
     // Helper text style - inherited from common form theme
     helperTextStyle: formsBaseTheme.helperText,
     // Helper text state variants
     helperTextStates: {
-        default: "text-[var(--color-text-muted)]",
-        disabled: "text-[var(--color-text-disabled)]",
-        invalid: "text-red-600",
+        default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",
+        disabled: "text-[var(--color-text-disabled)] dark:text-[var(--color-neutral-600)]",
+        invalid: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
     },
+    // ============================================
+    // Wheel Picker Styles (iOS-style scroll wheel)
+    // ============================================
+    // Wheel columns container - horizontal flex with dividers
+    wheelContainerStyle: "flex overflow-hidden",
+    // Individual wheel column - relative positioning for highlight overlay
+    wheelColumnStyle: "flex-1 flex flex-col relative",
+    // Wheel column header label
+    wheelHeaderStyle: "text-center py-2 text-xs font-semibold text-[var(--color-text-muted)] uppercase",
+    // Center highlight row - positioned behind selected item
+    wheelHighlightStyle: "absolute -mt-4 inset-x-0 bg-[var(--color-border)] pointer-events-none z-0",
+    // Wheel item - centered with transition for smooth opacity/color changes
+    wheelItemStyle: "flex items-center justify-center text-[var(--color-text-muted)] transition-colors select-none cursor-pointer relative z-10",
+    // Wheel item active (selected) style - stronger text color and weight
+    wheelItemActiveStyle: "text-[var(--color-text-primary)] font-semibold",
+    // Footer container - flexbox for action buttons
+    footerStyle: "flex justify-between items-center gap-2 px-2 py-2 border-t border-[var(--color-border)] " +
+        "dark:border-[var(--color-neutral-700)]",
+    // Inner input element style - transparent bg, no outline, tabular-nums for aligned digits
+    inputStyle: "bg-transparent outline-none flex-1 tabular-nums min-w-0 " +
+        "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
+        "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
+    // AM/PM period toggle button
+    periodToggleStyle: "px-1.5 py-0.5 text-xs font-semibold rounded " +
+        "bg-[var(--color-background-tertiary)] text-[var(--color-text-primary)] " +
+        "hover:bg-[var(--color-background-quaternary)] transition-colors cursor-pointer select-none " +
+        "dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +
+        "dark:hover:bg-[var(--color-neutral-600)]",
 };
 
 export { timePickerTheme };