@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,257 @@
+import React from "react";
+/**
+ * TimePicker component props
+ * @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} 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" 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 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" | "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;
+}
+/**
+ * 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
+ */
+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;
+    /** 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>>;
+    /** 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 */
+    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;
+    /** 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
+ */
+export interface TimeSelectorProps {
+    /** Current selected time */
+    time: ParsedTime;
+    /** Time format */
+    format: TimeFormat;
+    /** Minute step interval */
+    step: number;
+    /** 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;
+}
+/**
+ * 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

@@ -0,0 +1,12 @@
+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
+ */
+export declare const TimePickerContent: React.FC<TimePickerContentProps>;

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

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { 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 { useIsClient } from '../../../hooks/useIsClient.js';
+import { Button } from '../../core/Button/Button.js';
+
+/**
+ * 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");
+    }
+    const { theme, triggerRef, size } = context;
+    // Detect dark mode for portal content
+    const isDarkMode = useDarkMode();
+    const isClient = useIsClient();
+    // 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;
+    const { position, cssVariables, contentRef, isFlipped } = useSelectPortal({
+        triggerRef,
+        isOpen,
+        placement,
+        offset,
+        estimatedWidth: triggerWidth,
+    });
+    // Create direction-aware animations based on actual placement
+    const animations = createDropdownAnimations(isFlipped);
+    // Combine refs (including dropdownRef for portal-aware click-outside)
+    const combinedRef = useCallback((el) => {
+        if (contentRef &&
+            typeof contentRef === "object" &&
+            "current" in contentRef) {
+            contentRef.current = el;
+        }
+        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 = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(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", onKeyDown: handleKeyDown, role: "dialog", "aria-modal": "true", "aria-label": "Select time", children: [jsx("div", { className: cn(theme.wheelContainerStyle), style: { height: 200 }, children: children }), jsxs("div", { className: cn(theme.footerStyle), children: [jsx(Button, { size: "sm", variant: "outline", color: "neutral", onClick: onCancel, "aria-label": "Cancel time selection", className: "flex-1", children: "Cancel" }), jsx(Button, { size: "sm", onClick: onSave, "aria-label": "Save selected time", className: "flex-1", children: "Save" })] })] })) }));
+    // Use portal if enabled and client-side - wrap with dark class for dark mode support
+    return portal && isClient
+        ? createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: 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 - 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

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { ClockIcon, XMarkIcon, ChevronUpDownIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { TimePickerContext } from './TimePicker.js';
+
+/**
+ * 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, 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, 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 iconStartStyle = theme.iconStartStyle || "";
+    const inputStyle = theme.inputStyle || "";
+    const periodToggleStyle = theme.periodToggleStyle || "";
+    // Apply focused styles when open — same pattern as SelectButton and DatePickerTrigger
+    const activeFocusState = isOpen
+        ? ((_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"
+        : "";
+    // Determine whether start icon is present (for input padding)
+    const hasStartIcon = iconStart !== undefined ? Boolean(iconStart) : true;
+    const iconStartPadding = theme.iconStartPadding || "";
+    return (jsx("div", { ref: triggerRef, className: "relative w-full", children: jsxs("div", { className: cn(baseStyle, stateStyle, hoverStateStyle, activeFocusState, 'w-full items-center', className // User overrides take highest precedence
+            ), children: [jsxs("div", { className: "relative flex-1", children: [jsx("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 && jsx("div", { className: iconStartStyle, children: iconStart })) : (jsx("div", { className: iconStartStyle, children: jsx(ClockIcon, { className: "h-4 w-4" }) }))] }), format === '12h' && (jsx("button", { type: "button", onClick: onPeriodToggle, disabled: disabled, className: cn(periodToggleStyle, "shrink-0"), "aria-label": `Toggle AM/PM, current: ${period}`, tabIndex: -1, children: period || 'AM' })), clearable && hasValue && !disabled && (jsx("button", { type: "button", onClick: (e) => {
+                        e.stopPropagation();
+                        onClear === null || onClear === void 0 ? void 0 : onClear();
+                    }, 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, children: jsx(XMarkIcon, { className: "w-4 h-4" }) })), iconEnd !== undefined ? (iconEnd && (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]", children: iconEnd }))) : (jsx("span", { className: "shrink-0 flex items-center pr-3 pointer-events-none text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]", children: jsx(ChevronUpDownIcon, { className: "h-4 w-4" }) }))] }) }));
+};
+
+export { TimePickerTrigger };

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,87 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { 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 (jsx("div", { 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), children: formatValue(option) }, `${option}-${index}`));
+        });
+    }, [options, currentIndex, mergedTheme, itemHeight, handleItemClick]);
+    return (jsxs("div", { className: cn(mergedTheme.wheelColumnStyle), role: "listbox", "aria-label": label, children: [jsx("div", { className: cn(mergedTheme.wheelHeaderStyle), children: label || '\u00A0' }), jsxs("div", { className: "relative flex-1", style: { height: containerHeight }, children: [jsx("div", { className: cn(mergedTheme.wheelHighlightStyle), style: {
+                            top: paddingY,
+                            height: itemHeight,
+                        }, "aria-hidden": "true" }), jsx("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]);
+                            }
+                        }, children: optionElements })] })] }));
+};
+WheelColumn.displayName = 'WheelColumn';
+
+export { WheelColumn };

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

@@ -0,0 +1,9 @@
+export { TimePicker } from './TimePicker';
+export { TimePickerTrigger } from './TimePickerTrigger';
+export { TimePickerContent } from './TimePickerContent';
+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';

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

@@ -0,0 +1,37 @@
+/**
+ * Options for the useWheelPicker hook
+ */
+export interface UseWheelPickerOptions<T> {
+    /** Array of options to display in the wheel */
+    options: T[];
+    /** Currently selected value */
+    value: T;
+    /** Callback when value changes */
+    onChange: (value: T) => void;
+    /** Height of each item in pixels */
+    itemHeight?: number;
+    /** Number of visible items (should be odd for center selection) */
+    visibleItems?: number;
+}
+/**
+ * Return type for the useWheelPicker hook
+ */
+export interface UseWheelPickerReturn {
+    /** Ref to attach to the scrollable container */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Scroll to a specific value programmatically */
+    scrollToValue: (value: number | string, behavior?: ScrollBehavior) => void;
+    /** Current scroll position index */
+    currentIndex: number;
+    /** Padding needed at top/bottom to center first/last items */
+    paddingY: number;
+    /** Whether the user is currently dragging */
+    isDragging: boolean;
+}
+/**
+ * Custom hook for iOS-style wheel picker scroll behavior
+ *
+ * Uses CSS scroll-snap for native snapping behavior and
+ * detects scroll end to trigger onChange callback.
+ */
+export declare function useWheelPicker<T>({ options, value, onChange, itemHeight, visibleItems, }: UseWheelPickerOptions<T>): UseWheelPickerReturn;