flikkui 0.1.0-beta.2

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

@@ -0,0 +1,413 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+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 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';
+
+/**
+ * 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'; }
+    if (!timeString || timeString.trim() === '')
+        return null;
+    // Clean the input string
+    var cleanTime = timeString.trim().toUpperCase();
+    // Handle various input formats
+    var parsedHour = 0;
+    var parsedMinute = 0;
+    var parsedSecond = 0;
+    var parsedPeriod;
+    // Try different parsing strategies
+    // Strategy 1: Standard format with colons (14:30, 2:30 PM, 14:30:45)
+    var 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);
+    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;
+    }
+    else {
+        // Strategy 2: Flexible format (230, 230p, 1430, etc.)
+        var 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;
+            if (digits.length <= 2) {
+                // Just hours (2, 14)
+                parsedHour = parseInt(digits, 10);
+                parsedMinute = 0;
+            }
+            else if (digits.length === 3) {
+                // Hours and minutes without leading zero (230 = 2:30)
+                parsedHour = parseInt(digits.charAt(0), 10);
+                parsedMinute = parseInt(digits.substring(1), 10);
+            }
+            else if (digits.length === 4) {
+                // Hours and minutes (1430 = 14:30)
+                parsedHour = parseInt(digits.substring(0, 2), 10);
+                parsedMinute = parseInt(digits.substring(2), 10);
+            }
+        }
+        else {
+            return null; // Unable to parse
+        }
+    }
+    // Convert 12-hour to 24-hour for internal consistency
+    if (format === '12h' && parsedPeriod) {
+        if (parsedPeriod === 'AM' && parsedHour === 12) {
+            parsedHour = 0;
+        }
+        else if (parsedPeriod === 'PM' && parsedHour !== 12) {
+            parsedHour += 12;
+        }
+    }
+    // Validate parsed values
+    if (parsedHour < 0 || parsedHour > 23 || parsedMinute < 0 || parsedMinute > 59 || parsedSecond < 0 || parsedSecond > 59) {
+        return null;
+    }
+    return {
+        hour: parsedHour,
+        minute: parsedMinute,
+        second: parsedSecond,
+        period: format === '12h' ? (parsedHour >= 12 ? 'PM' : 'AM') : undefined
+    };
+};
+// 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;
+    if (format === '12h') {
+        // Convert to 12-hour format
+        if (hour === 0) {
+            hour = 12;
+            period = 'AM';
+        }
+        else if (hour === 12) {
+            period = 'PM';
+        }
+        else if (hour > 12) {
+            hour = hour - 12;
+            period = 'PM';
+        }
+        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);
+    }
+    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'));
+        return timeStr;
+    }
+};
+// Validate time against constraints
+var validateTime = function (time, minTime, maxTime) {
+    var hour = time.hour, minute = time.minute;
+    // 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;
+    if (minTime) {
+        var minParsed = parseTime(minTime, '24h');
+        if (minParsed) {
+            var minMinutes = minParsed.hour * 60 + minParsed.minute;
+            if (timeMinutes < minMinutes) {
+                return { isValid: false, error: "Time must be after ".concat(minTime) };
+            }
+        }
+    }
+    if (maxTime) {
+        var maxParsed = parseTime(maxTime, '24h');
+        if (maxParsed) {
+            var maxMinutes = maxParsed.hour * 60 + maxParsed.minute;
+            if (timeMinutes > maxMinutes) {
+                return { isValid: false, error: "Time must be before ".concat(maxTime) };
+            }
+        }
+    }
+    return { isValid: true };
+};
+// Generate time options for selectors
+var generateHours = function (format) {
+    if (format === '12h') {
+        return Array.from({ length: 12 }, function (_, i) { return i + 1; });
+    }
+    return Array.from({ length: 24 }, function (_, i) { return i; });
+};
+var generateMinutes = function (step) {
+    return Array.from({ length: 60 / step }, function (_, i) { return i * step; });
+};
+var generateSeconds = function () {
+    return Array.from({ length: 60 }, function (_, i) { return 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);
+    // Auto-scroll to selected value
+    useEffect(function () {
+        if (scrollRef.current) {
+            var selectedIndex = options.findIndex(function (option) { return option === value; });
+            if (selectedIndex >= 0) {
+                var itemHeight = 40; // Approximate item height
+                var 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)); }))));
+};
+/**
+ * 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"]);
+    // 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];
+    // Refs
+    var containerRef = useRef(null);
+    var inputRef = useRef(null);
+    // Hooks
+    useClickOutside(containerRef, function () { return setIsOpen(false); });
+    // Determine current value (controlled vs uncontrolled)
+    var currentValue = value !== undefined ? value : internalValue;
+    var _s = useState(currentValue || ''), inputValue = _s[0], setInputValue = _s[1];
+    // Parse current time
+    var 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]) || {};
+    // Generate unique ID
+    var inputId = id || "timepicker-".concat(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;
+    // Handle time change
+    var handleTimeChange = useCallback(function (newTime) {
+        var formattedTime = formatTime(newTime, format, showSeconds);
+        // Validate time
+        var validation = validateTime(newTime, minTime, maxTime);
+        if (!validation.isValid) {
+            setValidationError(validation.error);
+            return;
+        }
+        else {
+            setValidationError(undefined);
+        }
+        // Update internal state if uncontrolled
+        if (value === undefined) {
+            setInternalValue(formattedTime);
+        }
+        // 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();
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    // Handle clear
+    var handleClear = function (e) {
+        e.stopPropagation();
+        setInputValue('');
+        if (value === undefined) {
+            setInternalValue(undefined);
+        }
+        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 () {
+        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))));
+};
+TimePicker.displayName = 'TimePicker';
+
+export { TimePicker, TimePicker as default };

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

@@ -0,0 +1,9 @@
+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.
+ */
+declare const timePickerTheme: Required<TimePickerThemeOverrides>;
+export default timePickerTheme;

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

@@ -0,0 +1,113 @@
+/**
+ * Default theme configuration for TimePicker component
+ *
+ * This theme follows the Input component pattern and integrates with
+ * the global design system using CSS variables.
+ */
+var timePickerTheme = {
+    // Wrapper styles
+    wrapperStyle: "relative w-full",
+    // Input field styles - following Input component pattern
+    inputStyle: [
+        // Base styles
+        "w-full border border-neutral-300 rounded-[var(--form-rounded)]",
+        "bg-white text-neutral-900 placeholder:text-neutral-500",
+        "font-medium transition-colors duration-200",
+        "focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500",
+        // Cursor and interaction
+        "cursor-pointer select-none",
+        // Disabled state
+        "disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed",
+        "disabled:border-neutral-200"
+    ].join(" "),
+    // Dropdown container styles
+    dropdownStyle: [
+        // Base container
+        "absolute z-50 mt-2 bg-white border border-neutral-200",
+        "rounded-[var(--form-rounded)] shadow-lg",
+        // Animation and interaction
+        "animate-in fade-in-0 zoom-in-95 duration-200",
+        // Responsive width
+        "min-w-[280px] max-w-[320px]"
+    ].join(" "),
+    // Time selector container
+    selectorContainerStyle: [
+        "flex divide-x divide-neutral-200",
+        "h-48 overflow-hidden"
+    ].join(" "),
+    // Individual selector column
+    selectorColumnStyle: [
+        "flex-1 flex flex-col overflow-hidden",
+        "scroll-smooth"
+    ].join(" "),
+    // Time selector items
+    selectorItemStyle: [
+        "flex items-center justify-center py-2 px-3",
+        "text-sm font-medium text-neutral-700",
+        "hover:bg-neutral-50 cursor-pointer transition-colors",
+        "border-b border-neutral-100 last:border-b-0",
+        "min-h-[2.5rem]"
+    ].join(" "),
+    // Selected item styles
+    selectedItemStyle: [
+        "bg-primary-50 text-primary-700 font-semibold",
+        "border-l-2 border-l-primary-500"
+    ].join(" "),
+    // Disabled item styles
+    disabledItemStyle: [
+        "text-neutral-300 cursor-not-allowed",
+        "hover:bg-transparent"
+    ].join(" "),
+    // Clear button styles
+    clearButtonStyle: [
+        "absolute right-8 top-1/2 -translate-y-1/2",
+        "p-1 rounded text-neutral-400 hover:text-neutral-600",
+        "hover:bg-neutral-100 transition-colors"
+    ].join(" "),
+    // Trigger icon styles
+    triggerIconStyle: [
+        "absolute right-3 top-1/2 -translate-y-1/2",
+        "text-neutral-400 pointer-events-none"
+    ].join(" "),
+    // Size variants
+    sizes: {
+        sm: {
+            inputStyle: "min-h-[var(--form-min-h-sm)] px-3 text-sm",
+            dropdownStyle: "min-w-[240px] max-w-[280px]",
+            selectorItemStyle: "py-1.5 px-2 text-xs min-h-[2rem]"
+        },
+        md: {
+            inputStyle: "min-h-[var(--form-min-h-md)] px-4 text-sm",
+            dropdownStyle: "min-w-[280px] max-w-[320px]",
+            selectorItemStyle: "py-2 px-3 text-sm min-h-[2.5rem]"
+        },
+        lg: {
+            inputStyle: "min-h-[var(--form-min-h-lg)] px-4 text-base",
+            dropdownStyle: "min-w-[320px] max-w-[360px]",
+            selectorItemStyle: "py-3 px-4 text-base min-h-[3rem]"
+        }
+    },
+    // State variants
+    states: {
+        default: {
+            inputStyle: "border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20",
+            dropdownStyle: "border-neutral-200"
+        },
+        disabled: {
+            inputStyle: [
+                "bg-neutral-50 border-neutral-200 text-neutral-400",
+                "cursor-not-allowed"
+            ].join(" "),
+            dropdownStyle: "opacity-50 pointer-events-none"
+        },
+        invalid: {
+            inputStyle: [
+                "border-red-300 focus:border-red-500 focus:ring-red-500/20",
+                "text-red-900"
+            ].join(" "),
+            dropdownStyle: "border-red-200"
+        }
+    }
+};
+
+export { timePickerTheme as default };