flikkui 0.1.0-beta.11

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

@@ -0,0 +1,285 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, 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 { TimePickerTrigger } from './TimePickerTrigger.js';
+import { TimePickerContent } from './TimePickerContent.js';
+
+var 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'; }
+    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; });
+};
+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, _c = _a.size, size = _c === void 0 ? 'md' : _c, 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: 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(function (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: 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;
+    var value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, _c = _a.format, format = _c === void 0 ? '24h' : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, minTime = _a.minTime, maxTime = _a.maxTime, _e = _a.showSeconds, showSeconds = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.placeholder, placeholder = _g === void 0 ? format === '12h' ? 'Select time (e.g. 2:30 PM)' : 'Select time (e.g. 14:30)' : _g, _h = _a.size, size = _h === void 0 ? 'md' : _h, _j = _a.state, state = _j === void 0 ? 'default' : _j, _k = _a.clearable, clearable = _k === void 0 ? true : _k, label = _a.label, helperText = _a.helperText, iconStart = _a.iconStart, iconEnd = _a.iconEnd, className = _a.className, labelClassName = _a.labelClassName, helperTextClassName = _a.helperTextClassName, _l = _a.theme, theme = _l === void 0 ? {} : _l, id = _a.id, props = __rest(_a, ["value", "defaultValue", "onChange", "format", "step", "minTime", "maxTime", "showSeconds", "disabled", "placeholder", "size", "state", "clearable", "label", "helperText", "iconStart", "iconEnd", "className", "labelClassName", "helperTextClassName", "theme", "id"]);
+    // Internal state
+    var _m = useState(false), isOpen = _m[0], setIsOpen = _m[1];
+    var _o = useState(defaultValue), internalValue = _o[0], setInternalValue = _o[1];
+    var _p = useState(), validationError = _p[0], setValidationError = _p[1];
+    var _q = useState(false), isTyping = _q[0]; _q[1];
+    // Refs
+    var containerRef = useRef(null);
+    var triggerRef = useRef(null);
+    // Hooks
+    useClickOutside(containerRef, function () { return setIsOpen(false); });
+    // Determine current value (controlled vs uncontrolled)
+    var currentValue = value !== undefined ? value : internalValue;
+    var _r = useState(currentValue || ''), inputValue = _r[0], setInputValue = _r[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);
+    // 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 dropdown trigger click (button click)
+    var handleDropdownToggle = function () {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    // Handle clear button click
+    var handleClear = function () {
+        setInputValue('');
+        if (value === undefined) {
+            setInternalValue(undefined);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange('');
+        setValidationError(undefined);
+    };
+    // 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'];
+    // Context value
+    var contextValue = {
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        theme: mergedTheme,
+        triggerRef: triggerRef,
+        hasValue: Boolean(inputValue),
+        size: 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: function () { return 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: function (hour) { return handleTimeChange(__assign(__assign({}, 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: function (minute) { return handleTimeChange(__assign(__assign({}, 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: function (second) { return handleTimeChange(__assign(__assign({}, 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: function (period) { return handleTimeChange(__assign(__assign({}, currentTime), { period: period })); }, disabled: disabled, size: size, theme: mergedTheme })))),
+            (helperText || validationError) && (React__default.createElement("p", { className: cn(mergedTheme.helperTextStyle, (_b = mergedTheme.helperTextStates) === null || _b === void 0 ? void 0 : _b[finalState], helperTextClassName) }, validationError || helperText)))));
+};
+TimePicker.displayName = 'TimePicker';
+
+export { TimePicker, TimePickerContext };

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

@@ -0,0 +1,9 @@
+import { TimePickerThemeOverrides } from './TimePicker.types';
+/**
+ * Default theme configuration for TimePicker component
+ *
+ * Follows the same pattern as Select and DatePicker, extending formsBaseTheme
+ * for consistent trigger styling across all form dropdowns.
+ */
+declare const timePickerTheme: Required<TimePickerThemeOverrides>;
+export { timePickerTheme };

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

@@ -0,0 +1,70 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme configuration for TimePicker component
+ *
+ * Follows the same pattern as Select and DatePicker, extending formsBaseTheme
+ * for consistent trigger styling across all form dropdowns.
+ */
+var 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 size variants - composed from atomic tokens
+    triggerSizes: {
+        sm: "".concat(formsBaseTheme.sizes.sm.text, " ").concat(formsBaseTheme.sizes.sm.padding, " ").concat(formsBaseTheme.sizes.sm.height),
+        md: "".concat(formsBaseTheme.sizes.md.text, " ").concat(formsBaseTheme.sizes.md.padding, " ").concat(formsBaseTheme.sizes.md.height),
+        lg: "".concat(formsBaseTheme.sizes.lg.text, " ").concat(formsBaseTheme.sizes.lg.padding, " ").concat(formsBaseTheme.sizes.lg.height),
+    },
+    // Trigger state variants - inherited from common form theme
+    triggerStates: formsBaseTheme.states,
+    // Trigger focus state variants - inherited from common form theme
+    triggerFocusStates: formsBaseTheme.focusStates,
+    // Trigger hover state variants - inherited from common form theme
+    triggerHoverStates: formsBaseTheme.hoverStates,
+    // Start icon style - inherited from common form theme
+    iconStartStyle: formsBaseTheme.iconStyles.left,
+    // End icon style - inherited from common form theme
+    iconEndStyle: formsBaseTheme.iconStyles.right,
+    // Icon padding styles - inherited from common form theme
+    iconStartPadding: formsBaseTheme.iconStyles.padding.left,
+    iconEndPadding: formsBaseTheme.iconStyles.padding.right,
+    // 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",
+    // 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",
+    },
+};
+
+export { timePickerTheme };

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

@@ -0,0 +1,203 @@
+import React from 'react';
+/**
+ * TimePicker component props
+ * @property {string} value - The selected time value in "HH:mm" or "HH:mm:ss" format
+ * @property {string} defaultValue - Default time value for uncontrolled mode
+ * @property {function} onChange - Callback fired when time value changes
+ * @property {TimeFormat} format - Display format: 12-hour or 24-hour
+ * @property {number} step - Step interval for minutes (1, 5, 10, 15, 30)
+ * @property {string} minTime - Minimum selectable time in "HH:mm" format
+ * @property {string} maxTime - Maximum selectable time in "HH:mm" format
+ * @property {boolean} showSeconds - Whether to show seconds selector
+ * @property {boolean} disabled - Whether the component is disabled
+ * @property {string} placeholder - Placeholder text for the input
+ * @property {TimePickerSize} size - Size variant of the component
+ * @property {TimePickerState} state - State variant of the component
+ * @property {boolean} clearable - Whether to show a clear button
+ * @property {string} label - Optional label text
+ * @property {string} helperText - Optional helper text
+ * @property {React.ReactNode} iconStart - Icon to display at the start (left side)
+ * @property {React.ReactNode} iconEnd - Icon to display at the end (right side)
+ */
+export interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue'> {
+    /** The selected time value in "HH:mm" or "HH:mm:ss" format */
+    value?: string;
+    /** Default time value for uncontrolled mode */
+    defaultValue?: string;
+    /** Callback fired when time value changes */
+    onChange?: (time: string) => void;
+    /** Display format: 12-hour or 24-hour */
+    format?: TimeFormat;
+    /** Step interval for minutes (1, 5, 10, 15, 30) */
+    step?: number;
+    /** Minimum selectable time in "HH:mm" format */
+    minTime?: string;
+    /** Maximum selectable time in "HH:mm" format */
+    maxTime?: string;
+    /** Whether to show seconds selector */
+    showSeconds?: boolean;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Size variant of the component */
+    size?: TimePickerSize;
+    /** State variant of the component */
+    state?: TimePickerState;
+    /** Whether to show a clear button */
+    clearable?: boolean;
+    /** Optional label text */
+    label?: string;
+    /** Optional helper text */
+    helperText?: string;
+    /** Icon to display at the start (left side) */
+    iconStart?: React.ReactNode;
+    /** Icon to display at the end (right side) */
+    iconEnd?: React.ReactNode;
+    /** Additional class name for the wrapper */
+    className?: string;
+    /** Additional class name for the label */
+    labelClassName?: string;
+    /** Additional class name for the helper text */
+    helperTextClassName?: string;
+    /** Component-level theme overrides */
+    theme?: TimePickerThemeOverrides;
+}
+/**
+ * Time display format options
+ */
+export type TimeFormat = '12h' | '24h';
+/**
+ * Size variants for TimePicker
+ */
+export type TimePickerSize = 'sm' | 'md' | 'lg';
+/**
+ * State variants for TimePicker
+ */
+export type TimePickerState = 'default' | 'disabled' | 'invalid';
+/**
+ * Time picker mode for internal selector state
+ */
+export type TimePickerMode = 'hour' | 'minute' | 'second' | 'period';
+/**
+ * Time period for 12-hour format
+ */
+export type TimePeriod = 'AM' | 'PM';
+/**
+ * Parsed time object for internal use
+ */
+export interface ParsedTime {
+    hour: number;
+    minute: number;
+    second?: number;
+    period?: TimePeriod;
+}
+/**
+ * Theme overrides for the TimePicker component
+ * Follows Select/DatePicker pattern with trigger-based styling
+ */
+export interface TimePickerThemeOverrides {
+    /** Container wrapper style */
+    containerStyle?: string;
+    /** Base style for trigger button (extends formsBaseTheme.inputGroupBaseStyle) */
+    baseStyle?: string;
+    /** Trigger size variants */
+    triggerSizes?: Partial<Record<TimePickerSize, string>>;
+    /** Trigger state variants */
+    triggerStates?: Partial<Record<TimePickerState, string>>;
+    /** Trigger focus state variants */
+    triggerFocusStates?: Partial<Record<TimePickerState, string>>;
+    /** Trigger hover state variants */
+    triggerHoverStates?: Partial<Record<TimePickerState, string>>;
+    /** Start icon style (Clock icon) */
+    iconStartStyle?: string;
+    /** End icon style (Chevron icon) */
+    iconEndStyle?: string;
+    /** Start icon padding */
+    iconStartPadding?: string;
+    /** End icon padding */
+    iconEndPadding?: string;
+    /** Clear button style */
+    clearButtonStyle?: string;
+    /** Dropdown container style */
+    dropdownStyle?: string;
+    /** Dropdown size variants */
+    dropdownSizes?: Partial<Record<TimePickerSize, string>>;
+    /** Time selector container style */
+    selectorContainerStyle?: string;
+    /** Selector column style */
+    selectorColumnStyle?: string;
+    /** Selector column header container style */
+    selectorHeaderStyle?: string;
+    /** Selector column header label style */
+    selectorHeaderLabelStyle?: string;
+    /** Selector item style (use data-[selected=true] and data-[disabled=true]) */
+    selectorItemStyle?: string;
+    /** Selector item size variants */
+    selectorItemSizes?: Partial<Record<TimePickerSize, string>>;
+    /** Helper text style */
+    helperTextStyle?: string;
+    /** Helper text state variants */
+    helperTextStates?: Partial<Record<TimePickerState, string>>;
+}
+/**
+ * TimePickerTrigger component props
+ */
+export interface TimePickerTriggerProps {
+    /** Element ID */
+    id?: string;
+    /** Whether the trigger is disabled */
+    disabled?: boolean;
+    /** Whether the dropdown is open */
+    isOpen?: boolean;
+    /** Visual state of the trigger */
+    state?: TimePickerState;
+    /** Size variant */
+    size?: TimePickerSize;
+    /** Whether to show clear button */
+    clearable?: boolean;
+    /** Clear button click handler */
+    onClear?: () => void;
+    /** Icon to display at the start (left side) */
+    iconStart?: React.ReactNode;
+    /** Icon to display at the end (right side) */
+    iconEnd?: React.ReactNode;
+    /** Additional className */
+    className?: string;
+    /** Click handler */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Focus handler */
+    onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Blur handler */
+    onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Display content (formatted time or placeholder) */
+    children?: React.ReactNode;
+}
+/**
+ * Internal time selector props
+ */
+export interface TimeSelectorProps {
+    /** Current selected time */
+    time: ParsedTime;
+    /** Time format */
+    format: TimeFormat;
+    /** Minute step interval */
+    step: number;
+    /** Whether to show seconds */
+    showSeconds: boolean;
+    /** Minimum time constraint */
+    minTime?: string;
+    /** Maximum time constraint */
+    maxTime?: string;
+    /** Callback when time changes */
+    onChange: (time: ParsedTime) => void;
+    /** Theme overrides */
+    theme?: TimePickerThemeOverrides;
+}
+/**
+ * Time validation result
+ */
+export interface TimeValidationResult {
+    isValid: boolean;
+    error?: string;
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * TimePickerContent Component - contains the time selector dropdown
+ * Uses portal positioning like Select and DatePicker components
+ */
+interface TimePickerContentProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    portal?: boolean;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    offset?: number;
+    children?: React.ReactNode;
+}
+export declare const TimePickerContent: React.FC<TimePickerContentProps>;
+export {};

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

@@ -0,0 +1,48 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useContext, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../utils/cn.js';
+import { TimePickerContext } from './TimePicker.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { createDropdownAnimations } from '../Select/Select.animations.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';
+
+var TimePickerContent = function (_a) {
+    var _b, _c;
+    var isOpen = _a.isOpen; _a.onClose; var _d = _a.portal, portal = _d === void 0 ? true : _d, _e = _a.placement, placement = _e === void 0 ? 'bottom-start' : _e, _f = _a.offset, offset = _f === void 0 ? 4 : _f, children = _a.children;
+    var context = useContext(TimePickerContext);
+    if (!context) {
+        throw new Error('TimePickerContent must be used within a TimePicker');
+    }
+    var theme = context.theme, triggerRef = context.triggerRef, size = context.size;
+    // Use enhanced dropdown positioning hook with direction-aware animations
+    // Pass trigger width so dropdown matches trigger size
+    var triggerWidth = ((_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 0;
+    var _g = useSelectPortal({
+        triggerRef: triggerRef,
+        isOpen: isOpen,
+        placement: placement,
+        offset: offset,
+        estimatedWidth: triggerWidth,
+    }), position = _g.position, cssVariables = _g.cssVariables, contentRef = _g.contentRef, isFlipped = _g.isFlipped;
+    // Create direction-aware animations based on actual placement
+    var animations = createDropdownAnimations(isFlipped);
+    // Combine refs
+    var combinedRef = useCallback(function (el) {
+        if (contentRef && typeof contentRef === 'object' && 'current' in contentRef) {
+            contentRef.current = el;
+        }
+    }, [contentRef]);
+    var contentElement = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: combinedRef, className: cn(theme.dropdownStyle, (_c = theme.dropdownSizes) === null || _c === void 0 ? void 0 : _c[size]), style: __assign(__assign(__assign({}, cssVariables), { overscrollBehavior: 'contain' }), (portal ? {
+            top: "".concat(position.top, "px"),
+            left: "".concat(position.left, "px"),
+            minWidth: "".concat(position.width, "px"),
+        } : {})), variants: animations, initial: "initial", animate: "visible", exit: "exit" }, children))));
+    // Use portal if enabled and client-side
+    return portal && typeof document !== 'undefined'
+        ? createPortal(contentElement, document.body)
+        : contentElement;
+};
+
+export { TimePickerContent };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TimePickerTriggerProps } from './TimePicker.types';
+/**
+ * TimePickerTrigger Component - styled like form input
+ * Displays selected time or placeholder text
+ * Follows the same pattern as DatePickerTrigger and SelectButton
+ */
+export declare const TimePickerTrigger: React.FC<TimePickerTriggerProps>;