flikkui 0.2.0-beta.2 → 0.2.0-beta.4

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

@@ -1,14 +1,13 @@
-import React from 'react';
+import React from "react";
 /**
  * TimePicker component props
- * @property {string} value - The selected time value in "HH:mm" or "HH:mm:ss" format
+ * @property {string} value - The selected time value in "HH:mm" 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
@@ -19,8 +18,8 @@ import React from 'react';
  * @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 */
+export interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
+    /** The selected time value in "HH:mm" format */
     value?: string;
     /** Default time value for uncontrolled mode */
     defaultValue?: string;
@@ -34,8 +33,6 @@ export interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInpu
     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 */
@@ -66,23 +63,23 @@ export interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInpu
 /**
  * Time display format options
  */
-export type TimeFormat = '12h' | '24h';
+export type TimeFormat = "12h" | "24h";
 /**
  * Size variants for TimePicker
  */
-export type TimePickerSize = 'sm' | 'md' | 'lg';
+export type TimePickerSize = "sm" | "md" | "lg";
 /**
  * State variants for TimePicker
  */
-export type TimePickerState = 'default' | 'disabled' | 'invalid';
+export type TimePickerState = "default" | "disabled" | "invalid";
 /**
  * Time picker mode for internal selector state
  */
-export type TimePickerMode = 'hour' | 'minute' | 'second' | 'period';
+export type TimePickerMode = "hour" | "minute" | "period";
 /**
  * Time period for 12-hour format
  */
-export type TimePeriod = 'AM' | 'PM';
+export type TimePeriod = "AM" | "PM";
 /**
  * Parsed time object for internal use
  */
@@ -92,6 +89,25 @@ export interface ParsedTime {
     second?: number;
     period?: TimePeriod;
 }
+/**
+ * WheelColumn component props for iOS-style scroll wheel
+ */
+export interface WheelColumnProps {
+    /** Header label for the column */
+    label?: string;
+    /** Array of options to display */
+    options: (number | string)[];
+    /** Currently selected value */
+    value: number | string;
+    /** Callback when value changes */
+    onChange: (value: number | string) => void;
+    /** Height of each item in pixels (default: 40) */
+    itemHeight?: number;
+    /** Number of visible items (default: 5, should be odd) */
+    visibleItems?: number;
+    /** Theme overrides */
+    theme?: Partial<TimePickerThemeOverrides>;
+}
 /**
  * Theme overrides for the TimePicker component
  * Follows Select/DatePicker pattern with trigger-based styling
@@ -117,31 +133,42 @@ export interface TimePickerThemeOverrides {
     iconStartPadding?: string;
     /** End icon padding */
     iconEndPadding?: string;
+    /** Placeholder text style */
+    placeholderTextStyle?: string;
+    /** Selected value text style */
+    valueTextStyle?: 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>>;
+    /** Wheel columns container style */
+    wheelContainerStyle?: string;
+    /** Individual wheel column style */
+    wheelColumnStyle?: string;
+    /** Wheel column header label style */
+    wheelHeaderStyle?: string;
+    /** Center highlight row style */
+    wheelHighlightStyle?: string;
+    /** Wheel item style */
+    wheelItemStyle?: string;
+    /** Wheel item active (selected) style */
+    wheelItemActiveStyle?: string;
+    /** Footer container style */
+    footerStyle?: string;
+    /** Inner input element style */
+    inputStyle?: string;
+    /** AM/PM period toggle button style */
+    periodToggleStyle?: string;
 }
 /**
  * TimePickerTrigger component props
+ * Input-oriented trigger for combobox-style masked time entry
  */
 export interface TimePickerTriggerProps {
     /** Element ID */
@@ -164,14 +191,22 @@ export interface TimePickerTriggerProps {
     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;
+    /** Masked display value for the input */
+    inputValue: string;
+    /** Masked input change handler */
+    onInputChange: (value: string) => void;
+    /** Focus handler that opens dropdown */
+    onInputFocus: () => void;
+    /** Keyboard handler for the input */
+    onInputKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Time format — needed for AM/PM toggle rendering */
+    format: TimeFormat;
+    /** Current AM/PM value (12h only) */
+    period?: TimePeriod;
+    /** Toggle AM/PM handler (12h only) */
+    onPeriodToggle?: () => void;
+    /** Input placeholder */
+    placeholder: string;
 }
 /**
  * Internal time selector props
@@ -183,8 +218,6 @@ export interface TimeSelectorProps {
     format: TimeFormat;
     /** Minute step interval */
     step: number;
-    /** Whether to show seconds */
-    showSeconds: boolean;
     /** Minimum time constraint */
     minTime?: string;
     /** Maximum time constraint */
@@ -201,3 +234,24 @@ export interface TimeValidationResult {
     isValid: boolean;
     error?: string;
 }
+/**
+ * TimePickerContent component props
+ */
+export interface TimePickerContentProps {
+    /** Whether the dropdown is open */
+    isOpen: boolean;
+    /** Callback when Cancel is clicked */
+    onCancel: () => void;
+    /** Callback when Save is clicked */
+    onSave: () => void;
+    /** Use portal for rendering */
+    portal?: boolean;
+    /** Dropdown placement */
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    /** Offset from trigger */
+    offset?: number;
+    /** Content children (wheel columns) */
+    children?: React.ReactNode;
+    /** Ref to the dropdown element (for portal-aware click-outside detection) */
+    dropdownRef?: React.RefObject<HTMLDivElement | null>;
+}

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

@@ -1,15 +1,12 @@
-import React from 'react';
+import React from "react";
+import { TimePickerContentProps } from "./TimePicker.types";
 /**
  * TimePickerContent Component - contains the time selector dropdown
  * Uses portal positioning like Select and DatePicker components
+ *
+ * Features:
+ * - Title header "Select time"
+ * - Wheel column children (passed as children)
+ * - Footer with Cancel and Save buttons
  */
-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

@@ -1,18 +1,126 @@
-import React__default, { useContext, useCallback } from 'react';
+import React__default, { useContext, useCallback, useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'motion/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 '../../core/Accordion/Accordion.js';
+import '../../core/AlertDialog/AlertDialog.js';
+import '../../core/Avatar/Avatar.js';
+import '../../core/AvatarGroup/AvatarGroup.js';
+import '../../core/Badge/Badge.js';
+import '../../core/Breadcrumbs/Breadcrumbs.js';
+import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
+import { Button } from '../../core/Button/Button.js';
+import '../../core/ButtonGroup/ButtonGroup.js';
+import '../../core/ButtonGroup/ButtonGroupSeparator.js';
+import '../../core/ButtonGroup/ButtonGroupText.js';
+import '@heroicons/react/24/outline';
+import '../Select/Select.js';
+import '../Select/Select.theme.js';
+import '../../core/Calendar/CalendarMini/CalendarMini.js';
+import '../../core/Card/Card.js';
+import '../../core/CardStack/CardStack.js';
+import '../../core/Carousel/Carousel.js';
+import '../../core/Kbd/Kbd.js';
+import '../../effects/Overlay/Overlay.js';
+import '../../core/Divider/Divider.js';
+import '../../core/Drawer/Drawer.js';
+import '../../core/Dropdown/Dropdown.js';
+import '../../core/Dropdown/DropdownTrigger.js';
+import '../../core/Dropdown/DropdownMenu.js';
+import '../../core/Dropdown/DropdownItem.js';
+import '../../core/Dropdown/DropdownSection.js';
+import '../../core/Dropdown/DropdownSeparator.js';
+import '../../core/Link/Link.js';
+import '../../core/Loader/Loader.js';
+import '../../core/Modal/Modal.js';
+import '../../core/Pagination/Pagination.js';
+import '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
+import '../../core/Progress/Progress.js';
+import '../../core/ProgressiveBlur/ProgressiveBlur.js';
+import '../../core/Segmented/Segmented.js';
+import '../../core/Skeleton/Skeleton.js';
+import '../../core/SlidingNumber/SlidingNumber.js';
+import '../../core/Stepper/Stepper.js';
+import '../../core/Tabs/Tabs.js';
+import '../../core/Tabs/TabsList.js';
+import '../../core/Tabs/TabsTrigger.js';
+import '../../core/Tabs/TabsContent.js';
+import '../../core/Tabs/TabsContext.js';
+import '../../core/Tooltip/Tooltip.js';
+import '../../core/Tooltip/Tooltip.animations.js';
+import '../../core/Tree/Tree.js';
+import '../../core/Tag/Tag.js';
+import '../../core/Alert/Alert.js';
+import '../../core/Toast/Toast.js';
+import '../../core/Toast/ToastProvider.js';
+import '../../core/Notification/Notification.js';
+import '@heroicons/react/24/solid';
+import '../../core/Message/Message.js';
+import '../../core/Message/TypeWriter.js';
+import '../../core/Empty/Empty.js';
+import '../../core/Table/index.js';
+import '../../core/DragDrop/DragDrop.js';
+import '../../core/Sortable/Sortable.js';
+import '../../core/NavItem/NavItem.js';
+import '../../core/Sidebar/Sidebar.js';
+import '../../core/Sidebar/SidebarHeader.js';
+import '../../core/Sidebar/SidebarContent.js';
+import '../../core/Sidebar/SidebarFooter.js';
+import '../../core/Sidebar/SidebarNav.js';
+import '../../core/Sidebar/SidebarNavGroup.js';
+import '../../core/Sidebar/SidebarToggle.js';
+import '../../core/Sidebar/SidebarContext.js';
 
-const TimePickerContent = ({ isOpen, onClose, portal = true, placement = 'bottom-start', offset = 4, children, }) => {
+/**
+ * Hook to detect dark mode state from document
+ */
+const useDarkMode = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const checkDarkMode = () => {
+            const hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+/**
+ * TimePickerContent Component - contains the time selector dropdown
+ * Uses portal positioning like Select and DatePicker components
+ *
+ * Features:
+ * - Title header "Select time"
+ * - Wheel column children (passed as children)
+ * - Footer with Cancel and Save buttons
+ */
+const TimePickerContent = ({ isOpen, onCancel, onSave, portal = true, placement = "bottom-start", offset = 4, children, dropdownRef, }) => {
     var _a, _b;
     const context = useContext(TimePickerContext);
     if (!context) {
-        throw new Error('TimePickerContent must be used within a TimePicker');
+        throw new Error("TimePickerContent must be used within a TimePicker");
     }
     const { theme, triggerRef, size } = context;
+    // Detect dark mode for portal content
+    const isDarkMode = useDarkMode();
     // Use enhanced dropdown positioning hook with direction-aware animations
     // Pass trigger width so dropdown matches trigger size
     const triggerWidth = ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
@@ -25,24 +133,49 @@ const TimePickerContent = ({ isOpen, onClose, portal = true, placement = 'bottom
     });
     // Create direction-aware animations based on actual placement
     const animations = createDropdownAnimations(isFlipped);
-    // Combine refs
+    // Combine refs (including dropdownRef for portal-aware click-outside)
     const combinedRef = useCallback((el) => {
-        if (contentRef && typeof contentRef === 'object' && 'current' in contentRef) {
+        if (contentRef &&
+            typeof contentRef === "object" &&
+            "current" in contentRef) {
             contentRef.current = el;
         }
-    }, [contentRef]);
+        if (dropdownRef &&
+            typeof dropdownRef === "object" &&
+            "current" in dropdownRef) {
+            dropdownRef.current =
+                el;
+        }
+    }, [contentRef, dropdownRef]);
+    // Handle keyboard shortcuts
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            onCancel();
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            onSave();
+        }
+    }, [onCancel, onSave]);
     const contentElement = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { ref: combinedRef, className: cn(theme.dropdownStyle, (_b = theme.dropdownSizes) === null || _b === void 0 ? void 0 : _b[size]), style: {
             ...cssVariables,
-            overscrollBehavior: 'contain',
-            ...(portal ? {
-                top: `${position.top}px`,
-                left: `${position.left}px`,
-                minWidth: `${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)
+            overscrollBehavior: "contain",
+            ...(portal
+                ? {
+                    top: `${position.top}px`,
+                    left: `${position.left}px`,
+                    minWidth: `${position.width}px`,
+                }
+                : {}),
+        }, variants: animations, initial: "initial", animate: "visible", exit: "exit", onKeyDown: handleKeyDown, role: "dialog", "aria-modal": "true", "aria-label": "Select time" },
+        React__default.createElement("div", { className: cn(theme.wheelContainerStyle), style: { height: 200 } }, children),
+        React__default.createElement("div", { className: cn(theme.footerStyle) },
+            React__default.createElement(Button, { size: "sm", variant: "outline", color: "neutral", onClick: onCancel, "aria-label": "Cancel time selection", className: "flex-1" }, "Cancel"),
+            React__default.createElement(Button, { size: "sm", onClick: onSave, "aria-label": "Save selected time", className: "flex-1" }, "Save"))))));
+    // Use portal if enabled and client-side - wrap with dark class for dark mode support
+    return portal && typeof document !== "undefined"
+        ? createPortal(React__default.createElement("div", { className: isDarkMode ? "dark" : undefined }, contentElement), document.body)
         : contentElement;
 };
 

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

@@ -1,8 +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
+ * TimePickerTrigger Component - combobox-style masked input
+ * Displays a masked time input that opens the wheel picker on focus
+ * Follows the same visual pattern as DatePickerTrigger and SelectButton
  */
 export declare const TimePickerTrigger: React.FC<TimePickerTriggerProps>;

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

@@ -4,42 +4,45 @@ import { cn } from '../../../utils/cn.js';
 import { TimePickerContext } from './TimePicker.js';
 
 /**
- * TimePickerTrigger Component - styled like form input
- * Displays selected time or placeholder text
- * Follows the same pattern as DatePickerTrigger and SelectButton
+ * TimePickerTrigger Component - combobox-style masked input
+ * Displays a masked time input that opens the wheel picker on focus
+ * Follows the same visual pattern as DatePickerTrigger and SelectButton
  */
-const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md', clearable, onClear, iconStart, iconEnd, className, onClick, onFocus, onBlur, children, }) => {
+const TimePickerTrigger = ({ id, disabled, isOpen, state = 'default', size = 'md', clearable, onClear, iconStart, iconEnd, className, inputValue, onInputChange, onInputFocus, onInputKeyDown, format, period, onPeriodToggle, placeholder, }) => {
     var _a, _b, _c, _d;
     const context = useContext(TimePickerContext);
     if (!context) {
         throw new Error('TimePickerTrigger must be used within a TimePicker');
     }
-    const { theme, triggerRef, hasValue } = context;
+    const { theme, triggerRef, inputRef, hasValue } = context;
     const baseStyle = theme.baseStyle || "";
     const sizeStyle = ((_a = theme.triggerSizes) === null || _a === void 0 ? void 0 : _a[size]) || "";
     const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
     const hoverStateStyle = ((_c = theme.triggerHoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
-    const focusStateStyle = ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
     const iconStartStyle = theme.iconStartStyle || "";
-    const iconEndStyle = theme.iconEndStyle || "";
-    const iconStartPadding = theme.iconStartPadding || "";
-    const iconEndPadding = clearable && hasValue ? "pr-16" : theme.iconEndPadding || "";
-    // Apply focused styles when open - same pattern as SelectButton and DatePickerTrigger
+    const inputStyle = theme.inputStyle || "";
+    const periodToggleStyle = theme.periodToggleStyle || "";
+    // Apply focused styles when open — same pattern as SelectButton and DatePickerTrigger
     const activeFocusState = isOpen
-        ? focusStateStyle || "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+        ? ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 ring-4 ring-[var(--color-primary)]/10 dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20"
         : "";
-    return (React__default.createElement("div", { className: "relative w-full" },
-        React__default.createElement("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconStartPadding, iconEndPadding, 'w-full cursor-pointer bg-white text-left', className // User overrides take highest precedence
-            ), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open time picker" },
-            iconStart !== undefined ? (iconStart && React__default.createElement("span", { className: iconStartStyle }, iconStart)) : (React__default.createElement("span", { className: iconStartStyle },
-                React__default.createElement(ClockIcon, { className: "h-4 w-4" }))),
-            React__default.createElement("span", { className: "block truncate" }, children),
+    // Determine whether start icon is present (for input padding)
+    const hasStartIcon = iconStart !== undefined ? Boolean(iconStart) : true;
+    const iconStartPadding = theme.iconStartPadding || "";
+    return (React__default.createElement("div", { ref: triggerRef, className: "relative w-full" },
+        React__default.createElement("div", { className: cn(baseStyle, stateStyle, hoverStateStyle, activeFocusState, 'w-full items-center', className // User overrides take highest precedence
+            ) },
+            React__default.createElement("div", { className: "relative flex-1" },
+                React__default.createElement("input", { ref: inputRef, id: id, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => onInputChange(e.target.value), onFocus: onInputFocus, onKeyDown: onInputKeyDown, placeholder: placeholder, maxLength: 5, disabled: disabled, className: cn(inputStyle, sizeStyle, hasStartIcon && iconStartPadding), "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Enter time", autoComplete: "off" }),
+                iconStart !== undefined ? (iconStart && React__default.createElement("div", { className: iconStartStyle }, iconStart)) : (React__default.createElement("div", { className: iconStartStyle },
+                    React__default.createElement(ClockIcon, { className: "h-4 w-4" })))),
+            format === '12h' && (React__default.createElement("button", { type: "button", onClick: onPeriodToggle, disabled: disabled, className: cn(periodToggleStyle, "shrink-0"), "aria-label": `Toggle AM/PM, current: ${period}`, tabIndex: -1 }, period || 'AM')),
             clearable && hasValue && !disabled && (React__default.createElement("button", { type: "button", onClick: (e) => {
                     e.stopPropagation();
                     onClear === null || onClear === void 0 ? void 0 : onClear();
-                }, className: cn(theme.clearButtonStyle), "aria-label": "Clear time" },
+                }, className: "shrink-0 p-0.5 rounded text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] transition-colors", "aria-label": "Clear time", tabIndex: -1 },
                 React__default.createElement(XMarkIcon, { className: "w-4 h-4" }))),
-            iconEnd !== undefined ? (iconEnd && React__default.createElement("span", { className: iconEndStyle }, iconEnd)) : (React__default.createElement("span", { className: iconEndStyle },
+            iconEnd !== undefined ? (iconEnd && (React__default.createElement("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]" }, iconEnd))) : (React__default.createElement("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]" },
                 React__default.createElement(ChevronUpDownIcon, { className: "h-4 w-4" }))))));
 };
 

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { WheelColumnProps } from './TimePicker.types';
+/**
+ * WheelColumn Component - iOS-style scroll wheel column
+ *
+ * Features:
+ * - CSS scroll-snap for native snapping behavior
+ * - Momentum scrolling with -webkit-overflow-scrolling: touch
+ * - Click-to-select items
+ * - Mouse drag-to-scroll on desktop
+ * - Fade effect using CSS mask-image gradient
+ * - Center highlight row with fixed positioning
+ */
+export declare const WheelColumn: React.FC<WheelColumnProps>;

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

@@ -0,0 +1,90 @@
+import React__default, { useCallback, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useWheelPicker } from './useWheelPicker.js';
+import { timePickerTheme } from './TimePicker.theme.js';
+
+/**
+ * WheelColumn Component - iOS-style scroll wheel column
+ *
+ * Features:
+ * - CSS scroll-snap for native snapping behavior
+ * - Momentum scrolling with -webkit-overflow-scrolling: touch
+ * - Click-to-select items
+ * - Mouse drag-to-scroll on desktop
+ * - Fade effect using CSS mask-image gradient
+ * - Center highlight row with fixed positioning
+ */
+const WheelColumn = ({ label, options, value, onChange, itemHeight = 40, visibleItems = 5, theme = {}, }) => {
+    const mergedTheme = { ...timePickerTheme, ...theme };
+    // Use wheel picker hook for scroll behavior
+    const { containerRef, scrollToValue, paddingY, currentIndex, isDragging } = useWheelPicker({
+        options,
+        value,
+        onChange,
+        itemHeight,
+        visibleItems,
+    });
+    // Handle clicking an item to select it (scroll to it, onChange fires on scroll end)
+    const handleItemClick = useCallback((option) => {
+        // Don't treat a drag release as a click
+        if (isDragging)
+            return;
+        scrollToValue(option);
+    }, [scrollToValue, isDragging]);
+    // Calculate container height
+    const containerHeight = itemHeight * visibleItems;
+    // Format value for display (pad numbers with leading zeros)
+    const formatValue = (val) => {
+        if (typeof val === 'number') {
+            return val.toString().padStart(2, '0');
+        }
+        return val;
+    };
+    // Memoize options list to prevent unnecessary re-renders
+    const optionElements = useMemo(() => {
+        return options.map((option, index) => {
+            const isActive = index === currentIndex;
+            return (React__default.createElement("div", { key: `${option}-${index}`, className: cn(mergedTheme.wheelItemStyle, isActive && mergedTheme.wheelItemActiveStyle, 'snap-center'), style: {
+                    height: itemHeight,
+                    minHeight: itemHeight,
+                }, role: "option", "aria-selected": isActive, "data-value": option, onClick: () => handleItemClick(option) }, formatValue(option)));
+        });
+    }, [options, currentIndex, mergedTheme, itemHeight, handleItemClick]);
+    return (React__default.createElement("div", { className: cn(mergedTheme.wheelColumnStyle), role: "listbox", "aria-label": label },
+        React__default.createElement("div", { className: cn(mergedTheme.wheelHeaderStyle) }, label || '\u00A0'),
+        React__default.createElement("div", { className: "relative flex-1", style: { height: containerHeight } },
+            React__default.createElement("div", { className: cn(mergedTheme.wheelHighlightStyle), style: {
+                    top: paddingY,
+                    height: itemHeight,
+                }, "aria-hidden": "true" }),
+            React__default.createElement("div", { ref: containerRef, className: cn('absolute inset-0 overflow-y-auto scrollbar-hide', 
+                // CSS scroll snap for native snapping
+                'snap-y snap-mandatory', 
+                // iOS momentum scrolling
+                'overscroll-contain'), style: {
+                    paddingTop: paddingY,
+                    paddingBottom: paddingY,
+                    // CSS mask for fade effect at edges
+                    maskImage: 'linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%)',
+                    WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%)',
+                    // iOS smooth scrolling
+                    WebkitOverflowScrolling: 'touch',
+                    // Hide scrollbar
+                    scrollbarWidth: 'none',
+                    msOverflowStyle: 'none',
+                }, tabIndex: 0, onKeyDown: (e) => {
+                    if (e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        const newIndex = Math.max(0, currentIndex - 1);
+                        onChange(options[newIndex]);
+                    }
+                    else if (e.key === 'ArrowDown') {
+                        e.preventDefault();
+                        const newIndex = Math.min(options.length - 1, currentIndex + 1);
+                        onChange(options[newIndex]);
+                    }
+                } }, optionElements))));
+};
+WheelColumn.displayName = 'WheelColumn';
+
+export { WheelColumn };

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

@@ -1,6 +1,9 @@
 export { TimePicker } from './TimePicker';
 export { TimePickerTrigger } from './TimePickerTrigger';
 export { TimePickerContent } from './TimePickerContent';
-export type { TimePickerProps, TimePickerTriggerProps, TimeFormat, TimePickerSize, TimePickerState, TimePickerThemeOverrides, ParsedTime, TimePeriod } from './TimePicker.types';
+export { WheelColumn } from './WheelColumn';
+export { useWheelPicker } from './useWheelPicker';
+export type { TimePickerProps, TimePickerTriggerProps, TimePickerContentProps, WheelColumnProps, TimeFormat, TimePickerSize, TimePickerState, TimePickerThemeOverrides, ParsedTime, TimePeriod } from './TimePicker.types';
+export type { UseWheelPickerOptions, UseWheelPickerReturn } from './useWheelPicker';
 export { timePickerTheme } from './TimePicker.theme';
 export { timePickerAnimations } from './TimePicker.animations';