flikkui 0.1.0-beta.8 → 0.2.0-beta.1

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

@@ -1,36 +1,32 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { createContext, useState, useRef, useCallback, useEffect } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
-import timePickerTheme from './TimePicker.theme.js';
+import { timePickerTheme } from './TimePicker.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { useClickOutside } from '../../../utils/useClickOutside.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ClockIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/XMarkIcon.js';
-import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronUpDownIcon.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { TimePickerTrigger } from './TimePickerTrigger.js';
+import { TimePickerContent } from './TimePickerContent.js';
 
+const TimePickerContext = createContext(undefined);
 /**
  * Utility functions for time handling
  */
 // Parse time string into components - enhanced to handle various input formats
-var parseTime = function (timeString, format) {
-    if (format === void 0) { format = '24h'; }
+const parseTime = (timeString, format = '24h') => {
     if (!timeString || timeString.trim() === '')
         return null;
     // Clean the input string
-    var cleanTime = timeString.trim().toUpperCase();
+    const cleanTime = timeString.trim().toUpperCase();
     // Handle various input formats
-    var parsedHour = 0;
-    var parsedMinute = 0;
-    var parsedSecond = 0;
-    var parsedPeriod;
+    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)
-    var standardRegex = format === '12h'
+    const standardRegex = format === '12h'
         ? /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM)?$/i
         : /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/;
-    var match = cleanTime.match(standardRegex);
+    let match = cleanTime.match(standardRegex);
     if (match) {
         parsedHour = parseInt(match[1], 10);
         parsedMinute = parseInt(match[2], 10);
@@ -39,11 +35,11 @@ var parseTime = function (timeString, format) {
     }
     else {
         // Strategy 2: Flexible format (230, 230p, 1430, etc.)
-        var flexibleRegex = /^(\d{1,4})\s*(A|P|AM|PM)?$/i;
+        const flexibleRegex = /^(\d{1,4})\s*(A|P|AM|PM)?$/i;
         match = cleanTime.match(flexibleRegex);
         if (match) {
-            var digits = match[1];
-            parsedPeriod = match[2] ? (match[2].length === 1 ? "".concat(match[2], "M") : match[2]) : undefined;
+            const digits = match[1];
+            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);
@@ -85,10 +81,8 @@ var parseTime = function (timeString, format) {
     };
 };
 // Format time components into string
-var formatTime = function (time, format, showSeconds) {
-    if (format === void 0) { format = '24h'; }
-    if (showSeconds === void 0) { showSeconds = false; }
-    var hour = time.hour, minute = time.minute, _a = time.second, second = _a === void 0 ? 0 : _a, period = time.period;
+const formatTime = (time, format = '24h', showSeconds = false) => {
+    let { hour, minute, second = 0, period } = time;
     if (format === '12h') {
         // Convert to 12-hour format
         if (hour === 0) {
@@ -105,166 +99,119 @@ var formatTime = function (time, format, showSeconds) {
         else {
             period = 'AM';
         }
-        var timeStr = showSeconds
-            ? "".concat(hour, ":").concat(minute.toString().padStart(2, '0'), ":").concat(second.toString().padStart(2, '0'))
-            : "".concat(hour, ":").concat(minute.toString().padStart(2, '0'));
-        return "".concat(timeStr, " ").concat(period);
+        const timeStr = showSeconds
+            ? `${hour}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`
+            : `${hour}:${minute.toString().padStart(2, '0')}`;
+        return `${timeStr} ${period}`;
     }
     else {
         // 24-hour format
-        var timeStr = showSeconds
-            ? "".concat(hour.toString().padStart(2, '0'), ":").concat(minute.toString().padStart(2, '0'), ":").concat(second.toString().padStart(2, '0'))
-            : "".concat(hour.toString().padStart(2, '0'), ":").concat(minute.toString().padStart(2, '0'));
+        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;
     }
 };
 // Validate time against constraints
-var validateTime = function (time, minTime, maxTime) {
-    var hour = time.hour, minute = time.minute;
+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' };
     }
     // Convert to minutes for comparison
-    var timeMinutes = hour * 60 + minute;
+    const timeMinutes = hour * 60 + minute;
     if (minTime) {
-        var minParsed = parseTime(minTime, '24h');
+        const minParsed = parseTime(minTime, '24h');
         if (minParsed) {
-            var minMinutes = minParsed.hour * 60 + minParsed.minute;
+            const minMinutes = minParsed.hour * 60 + minParsed.minute;
             if (timeMinutes < minMinutes) {
-                return { isValid: false, error: "Time must be after ".concat(minTime) };
+                return { isValid: false, error: `Time must be after ${minTime}` };
             }
         }
     }
     if (maxTime) {
-        var maxParsed = parseTime(maxTime, '24h');
+        const maxParsed = parseTime(maxTime, '24h');
         if (maxParsed) {
-            var maxMinutes = maxParsed.hour * 60 + maxParsed.minute;
+            const maxMinutes = maxParsed.hour * 60 + maxParsed.minute;
             if (timeMinutes > maxMinutes) {
-                return { isValid: false, error: "Time must be before ".concat(maxTime) };
+                return { isValid: false, error: `Time must be before ${maxTime}` };
             }
         }
     }
     return { isValid: true };
 };
 // Generate time options for selectors
-var generateHours = function (format) {
+const generateHours = (format) => {
     if (format === '12h') {
-        return Array.from({ length: 12 }, function (_, i) { return i + 1; });
+        return Array.from({ length: 12 }, (_, i) => i + 1);
     }
-    return Array.from({ length: 24 }, function (_, i) { return i; });
+    return Array.from({ length: 24 }, (_, i) => i);
 };
-var generateMinutes = function (step) {
-    return Array.from({ length: 60 / step }, function (_, i) { return i * step; });
+const generateMinutes = (step) => {
+    return Array.from({ length: 60 / step }, (_, i) => i * step);
 };
-var generateSeconds = function () {
-    return Array.from({ length: 60 }, function (_, i) { return i; });
+const generateSeconds = () => {
+    return Array.from({ length: 60 }, (_, i) => i);
 };
-// Apply time input masking as user types
-var applyTimeMask = function (value, format) {
-    // Remove all non-digit characters except AM/PM indicators
-    var cleanValue = value.replace(/[^\d]/g, '');
-    // Don't mask if empty or just starting to type
-    if (cleanValue.length === 0)
-        return value;
-    var maskedValue = '';
-    if (cleanValue.length === 1) {
-        // Single digit, just return as is
-        maskedValue = cleanValue;
-    }
-    else if (cleanValue.length === 2) {
-        // Two digits, could be hours (14) or hours:minutes start (2_)
-        var num = parseInt(cleanValue, 10);
-        if (num > 23 && format === '24h') {
-            // Must be h:m format (e.g., 25 -> 2:5)
-            maskedValue = "".concat(cleanValue[0], ":").concat(cleanValue[1]);
-        }
-        else if (num > 12 && format === '12h') {
-            // Must be h:m format for 12h (e.g., 15 -> 1:5)  
-            maskedValue = "".concat(cleanValue[0], ":").concat(cleanValue[1]);
-        }
-        else {
-            // Could be hours, leave as is
-            maskedValue = cleanValue;
-        }
-    }
-    else if (cleanValue.length === 3) {
-        // Three digits, format as h:mm
-        maskedValue = "".concat(cleanValue[0], ":").concat(cleanValue.substring(1));
-    }
-    else if (cleanValue.length >= 4) {
-        // Four or more digits, format as hh:mm
-        maskedValue = "".concat(cleanValue.substring(0, 2), ":").concat(cleanValue.substring(2, 4));
-    }
-    // Add period detection for 12h format
-    if (format === '12h') {
-        var originalUpper = value.toUpperCase();
-        if (originalUpper.includes('A') || originalUpper.includes('P')) {
-            var period = originalUpper.includes('P') ? ' PM' : ' AM';
-            maskedValue += period;
-        }
-    }
-    return maskedValue;
-};
-var TimeSelectorColumn = function (_a) {
-    var label = _a.label, value = _a.value, options = _a.options, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, theme = _a.theme;
-    var scrollRef = useRef(null);
+const TimeSelectorColumn = ({ label, value, options, onChange, disabled = false, size = 'md', theme }) => {
+    const scrollRef = useRef(null);
     // Auto-scroll to selected value
-    useEffect(function () {
+    useEffect(() => {
         if (scrollRef.current) {
-            var selectedIndex = options.findIndex(function (option) { return option === value; });
+            const selectedIndex = options.findIndex(option => option === value);
             if (selectedIndex >= 0) {
-                var itemHeight = 40; // Approximate item height
-                var scrollTop = selectedIndex * itemHeight - 80; // Center in view
+                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: "sticky top-0 bg-white/95 backdrop-blur-sm p-2 border-b border-neutral-200" },
-            React__default.createElement("span", { className: "text-xs font-semibold text-neutral-600 uppercase tracking-wide" }, label)),
-        React__default.createElement("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", style: { scrollbarWidth: 'thin' } }, options.map(function (option) { return (React__default.createElement("button", { key: option, type: "button", className: cn(theme.selectorItemStyle, value === option && theme.selectedItemStyle, disabled && theme.disabledItemStyle), onClick: function () { return !disabled && onChange(option); }, disabled: disabled }, typeof option === 'number' ? option.toString().padStart(2, '0') : option)); }))));
+        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
  */
-var TimePicker = function (_a) {
-    var _b, _c;
-    var value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, _d = _a.format, format = _d === void 0 ? '24h' : _d, _e = _a.step, step = _e === void 0 ? 1 : _e, minTime = _a.minTime, maxTime = _a.maxTime, _f = _a.showSeconds, showSeconds = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.placeholder, placeholder = _h === void 0 ? format === '12h' ? 'Select time (e.g. 2:30 PM)' : 'Select time (e.g. 14:30)' : _h, _j = _a.size, size = _j === void 0 ? 'md' : _j, _k = _a.state, state = _k === void 0 ? 'default' : _k, _l = _a.clearable, clearable = _l === void 0 ? true : _l, label = _a.label, helperText = _a.helperText, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, className = _a.className, labelClassName = _a.labelClassName, helperTextClassName = _a.helperTextClassName, _m = _a.theme, theme = _m === void 0 ? {} : _m, id = _a.id, props = __rest(_a, ["value", "defaultValue", "onChange", "format", "step", "minTime", "maxTime", "showSeconds", "disabled", "placeholder", "size", "state", "clearable", "label", "helperText", "leftIcon", "rightIcon", "className", "labelClassName", "helperTextClassName", "theme", "id"]);
+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 }) => {
+    var _a;
     // Internal state
-    var _o = useState(false), isOpen = _o[0], setIsOpen = _o[1];
-    var _p = useState(defaultValue), internalValue = _p[0], setInternalValue = _p[1];
-    var _q = useState(), validationError = _q[0], setValidationError = _q[1];
-    var _r = useState(false), isTyping = _r[0], setIsTyping = _r[1];
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [validationError, setValidationError] = useState();
+    const [isTyping, setIsTyping] = useState(false);
     // Refs
-    var containerRef = useRef(null);
-    var inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
     // Hooks
-    useClickOutside(containerRef, function () { return setIsOpen(false); });
+    useClickOutside(containerRef, () => setIsOpen(false));
     // Determine current value (controlled vs uncontrolled)
-    var currentValue = value !== undefined ? value : internalValue;
-    var _s = useState(currentValue || ''), inputValue = _s[0], setInputValue = _s[1];
+    const currentValue = value !== undefined ? value : internalValue;
+    const [inputValue, setInputValue] = useState(currentValue || '');
     // Parse current time
-    var currentTime = parseTime(currentValue, format) || {
+    const currentTime = parseTime(currentValue, format) || {
         hour: format === '12h' ? 12 : 0,
         minute: 0,
         second: 0,
         period: format === '12h' ? 'AM' : undefined
     };
     // Merge theme with defaults
-    var mergedTheme = __assign(__assign({}, timePickerTheme), theme);
-    var sizeTheme = ((_b = mergedTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || {};
-    var stateTheme = ((_c = mergedTheme.states) === null || _c === void 0 ? void 0 : _c[state]) || {};
+    const mergedTheme = { ...timePickerTheme, ...theme };
     // Generate unique ID
-    var inputId = id || "timepicker-".concat(Math.random().toString(36).substr(2, 9));
+    const inputId = id || `timepicker-${Math.random().toString(36).substr(2, 9)}`;
     // Determine if component is in error state
-    var isInvalid = state === 'invalid' || Boolean(validationError);
-    var finalState = isInvalid ? 'invalid' : state;
+    const isInvalid = state === 'invalid' || Boolean(validationError);
+    const finalState = isInvalid ? 'invalid' : state;
     // Handle time change
-    var handleTimeChange = useCallback(function (newTime) {
-        var formattedTime = formatTime(newTime, format, showSeconds);
+    const handleTimeChange = useCallback((newTime) => {
+        const formattedTime = formatTime(newTime, format, showSeconds);
         // Validate time
-        var validation = validateTime(newTime, minTime, maxTime);
+        const validation = validateTime(newTime, minTime, maxTime);
         if (!validation.isValid) {
             setValidationError(validation.error);
             return;
@@ -279,51 +226,14 @@ var TimePicker = function (_a) {
         // Call onChange callback
         onChange === null || onChange === void 0 ? void 0 : onChange(formattedTime);
     }, [format, showSeconds, minTime, maxTime, value, onChange]);
-    // Handle input change (typing)
-    var handleInputChange = function (e) {
-        var newValue = e.target.value;
-        setIsTyping(true);
-        setValidationError(undefined);
-        // Apply time masking
-        var maskedValue = applyTimeMask(newValue, format);
-        setInputValue(maskedValue);
-        // Try to parse and validate the input
-        var parsedTime = parseTime(maskedValue, format);
-        if (parsedTime) {
-            // Valid time entered
-            var formattedTime = formatTime(parsedTime, format, showSeconds);
-            // Validate against constraints
-            var validation = validateTime(parsedTime, minTime, maxTime);
-            if (validation.isValid) {
-                // Update internal state if uncontrolled
-                if (value === undefined) {
-                    setInternalValue(formattedTime);
-                }
-                // Call onChange callback
-                onChange === null || onChange === void 0 ? void 0 : onChange(formattedTime);
-            }
-            else {
-                setValidationError(validation.error);
-            }
-        }
-    };
-    // Handle input click
-    var handleInputClick = function (e) {
-        // Only open dropdown if clicking on the input area, not typing
-        if (!disabled && !isTyping) {
-            setIsOpen(true);
-        }
-    };
-    // Handle dropdown trigger click (arrow icon)
-    var handleDropdownToggle = function (e) {
-        e.stopPropagation();
+    // Handle dropdown trigger click (button click)
+    const handleDropdownToggle = () => {
         if (!disabled) {
             setIsOpen(!isOpen);
         }
     };
-    // Handle clear
-    var handleClear = function (e) {
-        e.stopPropagation();
+    // Handle clear button click
+    const handleClear = () => {
         setInputValue('');
         if (value === undefined) {
             setInternalValue(undefined);
@@ -331,83 +241,51 @@ var TimePicker = function (_a) {
         onChange === null || onChange === void 0 ? void 0 : onChange('');
         setValidationError(undefined);
     };
-    // Handle input focus
-    var handleInputFocus = function (e) {
-        var _a;
-        setIsTyping(false);
-        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
-    // Handle input blur
-    var handleInputBlur = function (e) {
-        var _a;
-        setIsTyping(false);
-        // Try to format the current input value properly
-        var parsedTime = parseTime(inputValue, format);
-        if (parsedTime) {
-            var formattedTime = formatTime(parsedTime, format, showSeconds);
-            setInputValue(formattedTime);
-        }
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
-    // Handle keyboard events
-    var handleKeyDown = function (e) {
-        if (e.key === 'Enter') {
-            // Try to parse and apply current input
-            var parsedTime = parseTime(inputValue, format);
-            if (parsedTime) {
-                var formattedTime = formatTime(parsedTime, format, showSeconds);
-                setInputValue(formattedTime);
-                if (value === undefined) {
-                    setInternalValue(formattedTime);
-                }
-                onChange === null || onChange === void 0 ? void 0 : onChange(formattedTime);
-            }
-            setIsOpen(false);
-        }
-        else if (e.key === 'Escape') {
-            setIsOpen(false);
-            // Reset input to current value
-            if (currentValue) {
-                setInputValue(formatTime(currentTime, format, showSeconds));
-            }
-        }
-        else if (e.key === 'ArrowDown' && !isOpen) {
-            e.preventDefault();
-            setIsOpen(true);
-        }
-        else if (e.key === 'Tab') {
-            setIsOpen(false);
-        }
-    };
     // Sync input value with current value when it changes externally
-    React__default.useEffect(function () {
+    React__default.useEffect(() => {
         if (!isTyping) {
             setInputValue(currentValue ? formatTime(currentTime, format, showSeconds) : '');
         }
     }, [currentValue, format, showSeconds, isTyping, currentTime]);
     // Generate selector options
-    var hourOptions = generateHours(format);
-    var minuteOptions = generateMinutes(step);
-    var secondOptions = generateSeconds();
-    var periodOptions = ['AM', 'PM'];
-    return (React__default.createElement("div", { ref: containerRef, className: cn(mergedTheme.wrapperStyle, className) },
-        label && (React__default.createElement(FormLabel, { htmlFor: inputId, className: labelClassName, state: finalState, required: props.required }, label)),
-        React__default.createElement("div", { className: "relative" },
-            React__default.createElement("input", __assign({ ref: inputRef, id: inputId, type: "text", value: inputValue, placeholder: placeholder, disabled: disabled, onChange: handleInputChange, onClick: handleInputClick, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, className: cn(mergedTheme.inputStyle, sizeTheme.inputStyle, stateTheme.inputStyle, 'pl-10', // Always has clock icon
-                (clearable && inputValue) && 'pr-16', !clearable && 'pr-10'), "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-invalid": isInvalid }, props)),
-            leftIcon ? (React__default.createElement("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400" }, leftIcon)) : (React__default.createElement(ForwardRef, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-400" })),
-            clearable && inputValue && !disabled && (React__default.createElement("button", { type: "button", onClick: handleClear, className: cn(mergedTheme.clearButtonStyle), "aria-label": "Clear time" },
-                React__default.createElement(ForwardRef$1, { className: "w-4 h-4" }))),
-            rightIcon ? (React__default.createElement("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400" }, rightIcon)) : (React__default.createElement("button", { type: "button", onClick: handleDropdownToggle, disabled: disabled, className: cn('absolute right-3 top-1/2 -translate-y-1/2', 'text-neutral-400 hover:text-neutral-600', 'disabled:opacity-50 disabled:cursor-not-allowed', 'focus:outline-none focus:text-neutral-600', clearable && inputValue ? 'right-12' : 'right-3'), "aria-label": isOpen ? 'Close time picker' : 'Open time picker' },
-                React__default.createElement(ForwardRef$2, { className: "w-4 h-4" })))),
-        React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { initial: { opacity: 0, y: -10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2 }, className: cn(mergedTheme.dropdownStyle, sizeTheme.dropdownStyle, stateTheme.dropdownStyle) },
-            React__default.createElement("div", { className: cn(mergedTheme.selectorContainerStyle) },
-                React__default.createElement(TimeSelectorColumn, { label: "Hour", value: currentTime.hour, options: hourOptions, onChange: function (hour) { return handleTimeChange(__assign(__assign({}, currentTime), { hour: typeof hour === 'string' ? parseInt(hour) : hour })); }, disabled: disabled, theme: mergedTheme }),
-                React__default.createElement(TimeSelectorColumn, { label: "Min", value: currentTime.minute, options: minuteOptions, onChange: function (minute) { return handleTimeChange(__assign(__assign({}, currentTime), { minute: typeof minute === 'string' ? parseInt(minute) : minute })); }, disabled: disabled, theme: mergedTheme }),
-                showSeconds && (React__default.createElement(TimeSelectorColumn, { label: "Sec", value: currentTime.second || 0, options: secondOptions, onChange: function (second) { return handleTimeChange(__assign(__assign({}, currentTime), { second: typeof second === 'string' ? parseInt(second) : second })); }, disabled: disabled, theme: mergedTheme })),
-                format === '12h' && (React__default.createElement(TimeSelectorColumn, { label: "Period", value: currentTime.period || 'AM', options: periodOptions, onChange: function (period) { return handleTimeChange(__assign(__assign({}, currentTime), { period: period })); }, disabled: disabled, theme: mergedTheme })))))),
-        (helperText || validationError) && (React__default.createElement("div", { className: cn('mt-2 text-sm', validationError ? 'text-red-600' : 'text-neutral-600', helperTextClassName) }, validationError || helperText))));
+    const hourOptions = generateHours(format);
+    const minuteOptions = generateMinutes(step);
+    const secondOptions = generateSeconds();
+    const periodOptions = ['AM', 'PM'];
+    // Context value
+    const contextValue = {
+        isOpen,
+        setIsOpen,
+        theme: mergedTheme,
+        triggerRef,
+        hasValue: Boolean(inputValue),
+        size,
+        state: finalState,
+    };
+    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 })))),
+            (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';
 
-export { TimePicker, TimePicker as default };
+export { TimePicker, TimePickerContext };

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

@@ -2,8 +2,8 @@ import { TimePickerThemeOverrides } from './TimePicker.types';
 /**
  * Default theme configuration for TimePicker component
  *
- * This theme follows the Input component pattern and integrates with
- * the global design system using CSS variables.
+ * Follows the same pattern as Select and DatePicker, extending formsBaseTheme
+ * for consistent trigger styling across all form dropdowns.
  */
 declare const timePickerTheme: Required<TimePickerThemeOverrides>;
-export default timePickerTheme;
+export { timePickerTheme };