@ncdai/react-wheel-picker 1.0.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2025 ncdai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# react-wheel-picker
+
+iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.

package/dist/index.d.mts

@@ -0,0 +1,58 @@
+import React$1 from 'react';
+
+/**
+ * Represents a single option in the wheel picker
+ */
+type WheelPickerOption = {
+    /** The value that will be returned when this option is selected */
+    value: string;
+    /** The text label displayed for this option */
+    label: string;
+};
+/**
+ * Custom class names for styling different parts of the wheel picker
+ */
+type WheelPickerClassNames = {
+    /** Class name for individual option items */
+    optionItem?: string;
+    /** Class name for the wrapper of the highlighted area */
+    highlightWrapper?: string;
+    /** Class name for the highlighted item */
+    highlightItem?: string;
+};
+/**
+ * Props for the WheelPicker component
+ */
+type WheelPickerProps = {
+    /** Initial value of the picker when uncontrolled */
+    defaultValue?: string;
+    /** Current value of the picker when controlled */
+    value?: string;
+    /** Callback fired when the selected value changes */
+    onValueChange?: (value: string) => void;
+    /** Array of options to display in the wheel */
+    options: WheelPickerOption[];
+    /** Whether the wheel should loop infinitely */
+    infinite?: boolean;
+    /** The number of options visible on the circular ring, must be a multiple of 4 */
+    visibleCount?: number;
+    /** Sensitivity of the drag interaction (higher = more sensitive) */
+    dragSensitivity?: number;
+    /** Custom class names for styling different parts of the wheel */
+    classNames?: WheelPickerClassNames;
+};
+/**
+ * Props for the WheelPicker wrapper component
+ */
+type WheelPickerWrapperProps = {
+    /** Additional CSS class name for the wrapper */
+    className?: string;
+    /** Child elements to be rendered inside the wrapper */
+    children: React.ReactNode;
+};
+
+declare const WheelPickerWrapper: React$1.FC<WheelPickerWrapperProps>;
+declare const WheelPicker: React$1.FC<WheelPickerProps>;
+
+export { WheelPicker, WheelPickerWrapper };
+export type { WheelPickerClassNames, WheelPickerOption };

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+import React$1 from 'react';
+
+/**
+ * Represents a single option in the wheel picker
+ */
+type WheelPickerOption = {
+    /** The value that will be returned when this option is selected */
+    value: string;
+    /** The text label displayed for this option */
+    label: string;
+};
+/**
+ * Custom class names for styling different parts of the wheel picker
+ */
+type WheelPickerClassNames = {
+    /** Class name for individual option items */
+    optionItem?: string;
+    /** Class name for the wrapper of the highlighted area */
+    highlightWrapper?: string;
+    /** Class name for the highlighted item */
+    highlightItem?: string;
+};
+/**
+ * Props for the WheelPicker component
+ */
+type WheelPickerProps = {
+    /** Initial value of the picker when uncontrolled */
+    defaultValue?: string;
+    /** Current value of the picker when controlled */
+    value?: string;
+    /** Callback fired when the selected value changes */
+    onValueChange?: (value: string) => void;
+    /** Array of options to display in the wheel */
+    options: WheelPickerOption[];
+    /** Whether the wheel should loop infinitely */
+    infinite?: boolean;
+    /** The number of options visible on the circular ring, must be a multiple of 4 */
+    visibleCount?: number;
+    /** Sensitivity of the drag interaction (higher = more sensitive) */
+    dragSensitivity?: number;
+    /** Custom class names for styling different parts of the wheel */
+    classNames?: WheelPickerClassNames;
+};
+/**
+ * Props for the WheelPicker wrapper component
+ */
+type WheelPickerWrapperProps = {
+    /** Additional CSS class name for the wrapper */
+    className?: string;
+    /** Child elements to be rendered inside the wrapper */
+    children: React.ReactNode;
+};
+
+declare const WheelPickerWrapper: React$1.FC<WheelPickerWrapperProps>;
+declare const WheelPicker: React$1.FC<WheelPickerProps>;
+
+export { WheelPicker, WheelPickerWrapper };
+export type { WheelPickerClassNames, WheelPickerOption };

package/dist/index.js

@@ -0,0 +1,492 @@
+'use client';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+/* eslint-disable @typescript-eslint/no-explicit-any */ // This code comes from https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
+function useCallbackRef(callback) {
+    const callbackRef = React__default.default.useRef(callback);
+    React__default.default.useEffect(()=>{
+        callbackRef.current = callback;
+    });
+    // https://github.com/facebook/react/issues/19240
+    return React__default.default.useMemo(()=>(...args)=>callbackRef.current == null ? void 0 : callbackRef.current.call(callbackRef, ...args), []);
+}
+function useUncontrolledState({ defaultProp, onChange }) {
+    const uncontrolledState = React__default.default.useState(defaultProp);
+    const [value] = uncontrolledState;
+    const prevValueRef = React__default.default.useRef(value);
+    const handleChange = useCallbackRef(onChange);
+    React__default.default.useEffect(()=>{
+        if (prevValueRef.current !== value) {
+            handleChange(value);
+            prevValueRef.current = value;
+        }
+    }, [
+        value,
+        prevValueRef,
+        handleChange
+    ]);
+    return uncontrolledState;
+}
+function useControllableState({ prop, defaultProp, onChange = ()=>{} }) {
+    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+        defaultProp,
+        onChange
+    });
+    const isControlled = prop !== undefined;
+    const value = isControlled ? prop : uncontrolledProp;
+    const handleChange = useCallbackRef(onChange);
+    const setValue = React__default.default.useCallback((nextValue)=>{
+        if (isControlled) {
+            const setter = nextValue;
+            const value = typeof nextValue === "function" ? setter(prop) : nextValue;
+            if (value !== prop) handleChange(value);
+        } else {
+            setUncontrolledProp(nextValue);
+        }
+    }, [
+        isControlled,
+        prop,
+        setUncontrolledProp,
+        handleChange
+    ]);
+    return [
+        value,
+        setValue
+    ];
+}
+
+const WHEEL_THROTTLE = 150; // ms
+const RESISTANCE = 0.3; // Resistance when scrolling above the top or below the bottom
+const MAX_VELOCITY = 30; // Maximum velocity for the scroll animation
+const easeOutCubic = (p)=>Math.pow(p - 1, 3) + 1;
+const WheelPickerWrapper = ({ className, children })=>{
+    return /*#__PURE__*/ React__default.default.createElement("div", {
+        className: className,
+        "data-rwp-wrapper": true
+    }, children);
+};
+const WheelPicker = ({ defaultValue, value: valueProp, onValueChange, options: optionsProp, infinite: infiniteProp = false, visibleCount: countProp = 20, dragSensitivity: dragSensitivityProp = 3, classNames })=>{
+    var _optionsProp__value;
+    const [value = (()=>{
+        var _optionsProp_;
+        return (_optionsProp__value = (_optionsProp_ = optionsProp[0]) == null ? void 0 : _optionsProp_.value) != null ? _optionsProp__value : "";
+    })(), setValue] = useControllableState({
+        defaultProp: defaultValue,
+        prop: valueProp,
+        onChange: onValueChange
+    });
+    const options = React.useMemo(()=>{
+        if (!infiniteProp) {
+            return optionsProp;
+        }
+        const result = [];
+        const halfCount = Math.ceil(countProp / 2);
+        if (optionsProp.length === 0) {
+            return result;
+        }
+        while(result.length < halfCount){
+            result.push(...optionsProp);
+        }
+        return result;
+    }, [
+        countProp,
+        optionsProp,
+        infiniteProp
+    ]);
+    const itemHeight = 28;
+    const halfItemHeight = itemHeight * 0.5;
+    const itemAngle = 360 / countProp;
+    const radius = itemHeight / Math.tan(itemAngle * Math.PI / 180);
+    const containerHeight = Math.round(radius * 2 + itemHeight * 0.25);
+    const quarterCount = countProp >> 2; // Divide by 4
+    const baseDeceleration = dragSensitivityProp * 10;
+    const snapBackDeceleration = 10;
+    const containerRef = React.useRef(null);
+    const wheelItemsRef = React.useRef(null);
+    const highlightListRef = React.useRef(null);
+    const scrollRef = React.useRef(0);
+    const moveId = React.useRef(0);
+    const dragingRef = React.useRef(false);
+    const lastWheelRef = React.useRef(0);
+    const touchDataRef = React.useRef({
+        startY: 0,
+        yList: []
+    });
+    const dragControllerRef = React.useRef(null);
+    const renderWheelItems = React.useMemo(()=>{
+        const renderItem = (item, index, angle)=>/*#__PURE__*/ React__default.default.createElement("li", {
+                key: index,
+                className: classNames == null ? void 0 : classNames.optionItem,
+                "data-rwp-option": true,
+                "data-index": index,
+                style: {
+                    top: -14,
+                    height: itemHeight,
+                    lineHeight: `${itemHeight}px`,
+                    transform: `rotateX(${angle}deg) translateZ(${radius}px)`,
+                    visibility: "hidden"
+                }
+            }, item.label);
+        const items = options.map((option, index)=>renderItem(option, index, -itemAngle * index));
+        if (infiniteProp) {
+            for(let i = 0; i < quarterCount; ++i){
+                const prependIndex = -i - 1;
+                const appendIndex = i + options.length;
+                items.unshift(renderItem(options[options.length - i - 1], prependIndex, itemAngle * (i + 1)));
+                items.push(renderItem(options[i], appendIndex, -itemAngle * appendIndex));
+            }
+        }
+        return items;
+    }, [
+        halfItemHeight,
+        infiniteProp,
+        itemAngle,
+        options,
+        quarterCount,
+        radius,
+        classNames == null ? void 0 : classNames.optionItem
+    ]);
+    const renderHighlightItems = React.useMemo(()=>{
+        const renderItem = (item, key)=>/*#__PURE__*/ React__default.default.createElement("li", {
+                key: key,
+                "data-slot": "highlight-item",
+                className: classNames == null ? void 0 : classNames.highlightItem,
+                style: {
+                    height: itemHeight
+                }
+            }, item.label);
+        const items = options.map((option, index)=>renderItem(option, index));
+        if (infiniteProp) {
+            const firstItem = options[0];
+            const lastItem = options[options.length - 1];
+            items.unshift(renderItem(lastItem, "infinite-start"));
+            items.push(renderItem(firstItem, "infinite-end"));
+        }
+        return items;
+    }, [
+        classNames == null ? void 0 : classNames.highlightItem,
+        infiniteProp,
+        options
+    ]);
+    const normalizeScroll = (scroll)=>(scroll % options.length + options.length) % options.length;
+    const scrollTo = (scroll)=>{
+        const normalizedScroll = infiniteProp ? normalizeScroll(scroll) : scroll;
+        if (wheelItemsRef.current) {
+            const transform = `translateZ(${-radius}px) rotateX(${itemAngle * normalizedScroll}deg)`;
+            wheelItemsRef.current.style.transform = transform;
+            wheelItemsRef.current.childNodes.forEach((node)=>{
+                const li = node;
+                const distance = Math.abs(Number(li.dataset.index) - normalizedScroll);
+                li.style.visibility = distance > quarterCount ? "hidden" : "visible";
+            });
+        }
+        if (highlightListRef.current) {
+            highlightListRef.current.style.transform = `translateY(${-normalizedScroll * itemHeight}px)`;
+        }
+        return normalizedScroll;
+    };
+    const cancelAnimation = ()=>{
+        cancelAnimationFrame(moveId.current);
+    };
+    const animateScroll = (startScroll, endScroll, duration, onComplete)=>{
+        if (startScroll === endScroll || duration === 0) {
+            scrollTo(startScroll);
+            return;
+        }
+        const startTime = performance.now();
+        const totalDistance = endScroll - startScroll;
+        const tick = (currentTime)=>{
+            const elapsed = (currentTime - startTime) / 1000;
+            if (elapsed < duration) {
+                const progress = easeOutCubic(elapsed / duration);
+                scrollRef.current = scrollTo(startScroll + progress * totalDistance);
+                moveId.current = requestAnimationFrame(tick);
+            } else {
+                cancelAnimation();
+                scrollRef.current = scrollTo(endScroll);
+                onComplete == null ? void 0 : onComplete();
+            }
+        };
+        requestAnimationFrame(tick);
+    };
+    const selectByScroll = (scroll)=>{
+        const normalized = normalizeScroll(scroll) | 0;
+        const boundedScroll = infiniteProp ? normalized : Math.min(Math.max(normalized, 0), options.length - 1);
+        if (!infiniteProp && boundedScroll !== scroll) return;
+        scrollRef.current = scrollTo(boundedScroll);
+        const selected = options[scrollRef.current];
+        setValue(selected.value);
+    };
+    const selectByValue = (value)=>{
+        const index = options.findIndex((opt)=>opt.value === value);
+        if (index === -1) {
+            console.error("Invalid value selected:", value);
+            return;
+        }
+        cancelAnimation();
+        selectByScroll(index);
+    };
+    const updateScrollDuringDrag = (e)=>{
+        try {
+            var _e_touches_, _e_touches;
+            const currentY = (e instanceof MouseEvent ? e.clientY : (_e_touches = e.touches) == null ? void 0 : (_e_touches_ = _e_touches[0]) == null ? void 0 : _e_touches_.clientY) || 0;
+            const touchData = touchDataRef.current;
+            // Record current Y position with timestamp
+            touchData.yList.push([
+                currentY,
+                Date.now()
+            ]);
+            if (touchData.yList.length > 5) {
+                touchData.yList.shift(); // Keep latest 5 points for velocity calc
+            }
+            // Calculate delta in scroll position based on drag distance
+            const dragDelta = (touchData.startY - currentY) / itemHeight;
+            let nextScroll = scrollRef.current + dragDelta;
+            if (infiniteProp) {
+                // Wrap scroll for infinite lists
+                nextScroll = normalizeScroll(nextScroll);
+            } else {
+                const maxIndex = options.length;
+                if (nextScroll < 0) {
+                    // Apply resistance when dragging above top
+                    nextScroll *= RESISTANCE;
+                } else if (nextScroll > maxIndex) {
+                    // Apply resistance when dragging below bottom
+                    nextScroll = maxIndex + (nextScroll - maxIndex) * RESISTANCE;
+                }
+            }
+            // Update visual scroll and store position
+            touchData.touchScroll = scrollTo(nextScroll);
+        } catch (error) {
+            console.error("Error in updateScrollDuringDrag:", error);
+        }
+    };
+    const handleDragMoveEvent = (event)=>{
+        if (!dragingRef.current && !containerRef.current.contains(event.target) && event.target !== containerRef.current) {
+            return;
+        }
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (options.length) {
+            updateScrollDuringDrag(event);
+        }
+    };
+    const initiateDragGesture = (event)=>{
+        try {
+            var _containerRef_current, _event_touches_, _event_touches;
+            dragingRef.current = true;
+            const controller = new AbortController();
+            const { signal } = controller;
+            dragControllerRef.current = controller;
+            // Listen to movement events
+            const passiveOpts = {
+                signal,
+                passive: false
+            };
+            (_containerRef_current = containerRef.current) == null ? void 0 : _containerRef_current.addEventListener("touchmove", handleDragMoveEvent, passiveOpts);
+            document.addEventListener("mousemove", handleDragMoveEvent, passiveOpts);
+            const startY = (event instanceof MouseEvent ? event.clientY : (_event_touches = event.touches) == null ? void 0 : (_event_touches_ = _event_touches[0]) == null ? void 0 : _event_touches_.clientY) || 0;
+            // Initialize touch tracking
+            const touchData = touchDataRef.current;
+            touchData.startY = startY;
+            touchData.yList = [
+                [
+                    startY,
+                    Date.now()
+                ]
+            ];
+            touchData.touchScroll = scrollRef.current;
+            // Stop any ongoing scroll animation
+            cancelAnimation();
+        } catch (error) {
+            console.error("Error in initiateDragGesture:", error);
+        }
+    };
+    const handleDragStartEvent = React.useCallback((e)=>{
+        const isDragging = dragingRef.current;
+        const isTargetValid = containerRef.current.contains(e.target) || e.target === containerRef.current;
+        if ((isDragging || isTargetValid) && e.cancelable) {
+            e.preventDefault();
+            if (options.length) {
+                initiateDragGesture(e);
+            }
+        }
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        initiateDragGesture
+    ]);
+    const decelerateAndAnimateScroll = (initialVelocity)=>{
+        const currentScroll = scrollRef.current;
+        let targetScroll = currentScroll;
+        let deceleration = initialVelocity > 0 ? -baseDeceleration : baseDeceleration;
+        let duration = 0;
+        // Clamp utility to constrain a value within bounds
+        const clamp = (value, min, max)=>Math.max(min, Math.min(value, max));
+        if (infiniteProp) {
+            // Infinite mode: apply uniform deceleration to calculate scroll distance
+            duration = Math.abs(initialVelocity / deceleration);
+            const scrollDistance = initialVelocity * duration + 0.5 * deceleration * duration * duration;
+            targetScroll = Math.round(currentScroll + scrollDistance);
+        } else if (currentScroll < 0 || currentScroll > options.length - 1) {
+            // Out-of-bounds: snap back to nearest valid scroll index
+            const target = clamp(currentScroll, 0, options.length - 1);
+            const scrollDistance = currentScroll - target;
+            deceleration = snapBackDeceleration;
+            duration = Math.sqrt(Math.abs(scrollDistance / deceleration));
+            initialVelocity = deceleration * duration;
+            initialVelocity = currentScroll > 0 ? -initialVelocity : initialVelocity;
+            targetScroll = target;
+        } else {
+            // Normal decelerated scroll within bounds
+            duration = Math.abs(initialVelocity / deceleration);
+            const scrollDistance = initialVelocity * duration + 0.5 * deceleration * duration * duration;
+            targetScroll = Math.round(currentScroll + scrollDistance);
+            targetScroll = clamp(targetScroll, 0, options.length - 1);
+            const adjustedDistance = targetScroll - currentScroll;
+            duration = Math.sqrt(Math.abs(adjustedDistance / deceleration));
+        }
+        // Start animation to target scroll position with calculated duration
+        animateScroll(currentScroll, targetScroll, duration, ()=>{
+            selectByScroll(scrollRef.current); // Ensure selected item updates at end
+        });
+        // Fallback selection update (in case animation callback fails)
+        selectByScroll(scrollRef.current);
+    };
+    const finalizeDragAndStartInertiaScroll = ()=>{
+        try {
+            var _dragControllerRef_current;
+            (_dragControllerRef_current = dragControllerRef.current) == null ? void 0 : _dragControllerRef_current.abort();
+            dragControllerRef.current = null;
+            const touchData = touchDataRef.current;
+            const yList = touchData.yList;
+            let velocity = 0;
+            if (yList.length > 1) {
+                const len = yList.length;
+                var _yList_;
+                const [startY, startTime] = (_yList_ = yList[len - 2]) != null ? _yList_ : [
+                    0,
+                    0
+                ];
+                var _yList_1;
+                const [endY, endTime] = (_yList_1 = yList[len - 1]) != null ? _yList_1 : [
+                    0,
+                    0
+                ];
+                const timeDiff = endTime - startTime;
+                if (timeDiff > 0) {
+                    const distance = startY - endY;
+                    const velocityPerSecond = distance / itemHeight * 1000 / timeDiff;
+                    const maxVelocity = MAX_VELOCITY;
+                    const direction = velocityPerSecond > 0 ? 1 : -1;
+                    const absVelocity = Math.min(Math.abs(velocityPerSecond), maxVelocity);
+                    velocity = absVelocity * direction;
+                }
+            }
+            var _touchData_touchScroll;
+            scrollRef.current = (_touchData_touchScroll = touchData.touchScroll) != null ? _touchData_touchScroll : scrollRef.current;
+            decelerateAndAnimateScroll(velocity);
+        } catch (error) {
+            console.error("Error in finalizeDragAndStartInertiaScroll:", error);
+        } finally{
+            dragingRef.current = false;
+        }
+    };
+    const handleDragEndEvent = React.useCallback((event)=>{
+        if (!options.length) return;
+        const isDragging = dragingRef.current;
+        const isTargetValid = containerRef.current.contains(event.target) || event.target === containerRef.current;
+        if ((isDragging || isTargetValid) && event.cancelable) {
+            event.preventDefault();
+            finalizeDragAndStartInertiaScroll();
+        }
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        finalizeDragAndStartInertiaScroll
+    ]);
+    const scrollByWheel = (event)=>{
+        event.preventDefault();
+        const now = Date.now();
+        if (now - lastWheelRef.current < WHEEL_THROTTLE) return;
+        const direction = Math.sign(event.deltaY);
+        if (direction !== 0) {
+            selectByScroll(scrollRef.current + direction);
+            lastWheelRef.current = now;
+        }
+    };
+    const handleWheelEvent = React.useCallback((event)=>{
+        if (!options.length || !containerRef.current) return;
+        const isDragging = dragingRef.current;
+        const isTargetValid = containerRef.current.contains(event.target) || event.target === containerRef.current;
+        if ((isDragging || isTargetValid) && event.cancelable) {
+            event.preventDefault();
+            scrollByWheel(event);
+        }
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        scrollByWheel
+    ]);
+    React.useEffect(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        const controller = new AbortController();
+        const { signal } = controller;
+        const opts = {
+            signal,
+            passive: false
+        };
+        container.addEventListener("touchstart", handleDragStartEvent, opts);
+        container.addEventListener("touchend", handleDragEndEvent, opts);
+        container.addEventListener("wheel", handleWheelEvent, opts);
+        document.addEventListener("mousedown", handleDragStartEvent, opts);
+        document.addEventListener("mouseup", handleDragEndEvent, opts);
+        return ()=>{
+            console.log("cleanup");
+            controller.abort();
+        };
+    }, [
+        handleDragEndEvent,
+        handleDragStartEvent,
+        handleWheelEvent
+    ]);
+    React.useEffect(()=>{
+        selectByValue(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        value,
+        valueProp
+    ]);
+    console.log("render WheelPicker", valueProp);
+    return /*#__PURE__*/ React__default.default.createElement("div", {
+        ref: containerRef,
+        "data-rwp": true,
+        style: {
+            height: containerHeight
+        }
+    }, /*#__PURE__*/ React__default.default.createElement("ul", {
+        ref: wheelItemsRef,
+        "data-rwp-options": true
+    }, renderWheelItems), /*#__PURE__*/ React__default.default.createElement("div", {
+        className: classNames == null ? void 0 : classNames.highlightWrapper,
+        "data-rwp-highlight-wrapper": true,
+        style: {
+            height: itemHeight,
+            lineHeight: itemHeight + "px"
+        }
+    }, /*#__PURE__*/ React__default.default.createElement("ul", {
+        ref: highlightListRef,
+        "data-rwp-highlight-list": true,
+        style: {
+            top: infiniteProp ? -28 : undefined
+        }
+    }, renderHighlightItems)));
+};
+
+exports.WheelPicker = WheelPicker;
+exports.WheelPickerWrapper = WheelPickerWrapper;

package/dist/index.mjs

@@ -0,0 +1,485 @@
+'use client';
+import React, { useMemo, useRef, useCallback, useEffect } from 'react';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */ // This code comes from https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
+function useCallbackRef(callback) {
+    const callbackRef = React.useRef(callback);
+    React.useEffect(()=>{
+        callbackRef.current = callback;
+    });
+    // https://github.com/facebook/react/issues/19240
+    return React.useMemo(()=>(...args)=>callbackRef.current == null ? void 0 : callbackRef.current.call(callbackRef, ...args), []);
+}
+function useUncontrolledState({ defaultProp, onChange }) {
+    const uncontrolledState = React.useState(defaultProp);
+    const [value] = uncontrolledState;
+    const prevValueRef = React.useRef(value);
+    const handleChange = useCallbackRef(onChange);
+    React.useEffect(()=>{
+        if (prevValueRef.current !== value) {
+            handleChange(value);
+            prevValueRef.current = value;
+        }
+    }, [
+        value,
+        prevValueRef,
+        handleChange
+    ]);
+    return uncontrolledState;
+}
+function useControllableState({ prop, defaultProp, onChange = ()=>{} }) {
+    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+        defaultProp,
+        onChange
+    });
+    const isControlled = prop !== undefined;
+    const value = isControlled ? prop : uncontrolledProp;
+    const handleChange = useCallbackRef(onChange);
+    const setValue = React.useCallback((nextValue)=>{
+        if (isControlled) {
+            const setter = nextValue;
+            const value = typeof nextValue === "function" ? setter(prop) : nextValue;
+            if (value !== prop) handleChange(value);
+        } else {
+            setUncontrolledProp(nextValue);
+        }
+    }, [
+        isControlled,
+        prop,
+        setUncontrolledProp,
+        handleChange
+    ]);
+    return [
+        value,
+        setValue
+    ];
+}
+
+const WHEEL_THROTTLE = 150; // ms
+const RESISTANCE = 0.3; // Resistance when scrolling above the top or below the bottom
+const MAX_VELOCITY = 30; // Maximum velocity for the scroll animation
+const easeOutCubic = (p)=>Math.pow(p - 1, 3) + 1;
+const WheelPickerWrapper = ({ className, children })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        className: className,
+        "data-rwp-wrapper": true
+    }, children);
+};
+const WheelPicker = ({ defaultValue, value: valueProp, onValueChange, options: optionsProp, infinite: infiniteProp = false, visibleCount: countProp = 20, dragSensitivity: dragSensitivityProp = 3, classNames })=>{
+    var _optionsProp__value;
+    const [value = (()=>{
+        var _optionsProp_;
+        return (_optionsProp__value = (_optionsProp_ = optionsProp[0]) == null ? void 0 : _optionsProp_.value) != null ? _optionsProp__value : "";
+    })(), setValue] = useControllableState({
+        defaultProp: defaultValue,
+        prop: valueProp,
+        onChange: onValueChange
+    });
+    const options = useMemo(()=>{
+        if (!infiniteProp) {
+            return optionsProp;
+        }
+        const result = [];
+        const halfCount = Math.ceil(countProp / 2);
+        if (optionsProp.length === 0) {
+            return result;
+        }
+        while(result.length < halfCount){
+            result.push(...optionsProp);
+        }
+        return result;
+    }, [
+        countProp,
+        optionsProp,
+        infiniteProp
+    ]);
+    const itemHeight = 28;
+    const halfItemHeight = itemHeight * 0.5;
+    const itemAngle = 360 / countProp;
+    const radius = itemHeight / Math.tan(itemAngle * Math.PI / 180);
+    const containerHeight = Math.round(radius * 2 + itemHeight * 0.25);
+    const quarterCount = countProp >> 2; // Divide by 4
+    const baseDeceleration = dragSensitivityProp * 10;
+    const snapBackDeceleration = 10;
+    const containerRef = useRef(null);
+    const wheelItemsRef = useRef(null);
+    const highlightListRef = useRef(null);
+    const scrollRef = useRef(0);
+    const moveId = useRef(0);
+    const dragingRef = useRef(false);
+    const lastWheelRef = useRef(0);
+    const touchDataRef = useRef({
+        startY: 0,
+        yList: []
+    });
+    const dragControllerRef = useRef(null);
+    const renderWheelItems = useMemo(()=>{
+        const renderItem = (item, index, angle)=>/*#__PURE__*/ React.createElement("li", {
+                key: index,
+                className: classNames == null ? void 0 : classNames.optionItem,
+                "data-rwp-option": true,
+                "data-index": index,
+                style: {
+                    top: -14,
+                    height: itemHeight,
+                    lineHeight: `${itemHeight}px`,
+                    transform: `rotateX(${angle}deg) translateZ(${radius}px)`,
+                    visibility: "hidden"
+                }
+            }, item.label);
+        const items = options.map((option, index)=>renderItem(option, index, -itemAngle * index));
+        if (infiniteProp) {
+            for(let i = 0; i < quarterCount; ++i){
+                const prependIndex = -i - 1;
+                const appendIndex = i + options.length;
+                items.unshift(renderItem(options[options.length - i - 1], prependIndex, itemAngle * (i + 1)));
+                items.push(renderItem(options[i], appendIndex, -itemAngle * appendIndex));
+            }
+        }
+        return items;
+    }, [
+        halfItemHeight,
+        infiniteProp,
+        itemAngle,
+        options,
+        quarterCount,
+        radius,
+        classNames == null ? void 0 : classNames.optionItem
+    ]);
+    const renderHighlightItems = useMemo(()=>{
+        const renderItem = (item, key)=>/*#__PURE__*/ React.createElement("li", {
+                key: key,
+                "data-slot": "highlight-item",
+                className: classNames == null ? void 0 : classNames.highlightItem,
+                style: {
+                    height: itemHeight
+                }
+            }, item.label);
+        const items = options.map((option, index)=>renderItem(option, index));
+        if (infiniteProp) {
+            const firstItem = options[0];
+            const lastItem = options[options.length - 1];
+            items.unshift(renderItem(lastItem, "infinite-start"));
+            items.push(renderItem(firstItem, "infinite-end"));
+        }
+        return items;
+    }, [
+        classNames == null ? void 0 : classNames.highlightItem,
+        infiniteProp,
+        options
+    ]);
+    const normalizeScroll = (scroll)=>(scroll % options.length + options.length) % options.length;
+    const scrollTo = (scroll)=>{
+        const normalizedScroll = infiniteProp ? normalizeScroll(scroll) : scroll;
+        if (wheelItemsRef.current) {
+            const transform = `translateZ(${-radius}px) rotateX(${itemAngle * normalizedScroll}deg)`;
+            wheelItemsRef.current.style.transform = transform;
+            wheelItemsRef.current.childNodes.forEach((node)=>{
+                const li = node;
+                const distance = Math.abs(Number(li.dataset.index) - normalizedScroll);
+                li.style.visibility = distance > quarterCount ? "hidden" : "visible";
+            });
+        }
+        if (highlightListRef.current) {
+            highlightListRef.current.style.transform = `translateY(${-normalizedScroll * itemHeight}px)`;
+        }
+        return normalizedScroll;
+    };
+    const cancelAnimation = ()=>{
+        cancelAnimationFrame(moveId.current);
+    };
+    const animateScroll = (startScroll, endScroll, duration, onComplete)=>{
+        if (startScroll === endScroll || duration === 0) {
+            scrollTo(startScroll);
+            return;
+        }
+        const startTime = performance.now();
+        const totalDistance = endScroll - startScroll;
+        const tick = (currentTime)=>{
+            const elapsed = (currentTime - startTime) / 1000;
+            if (elapsed < duration) {
+                const progress = easeOutCubic(elapsed / duration);
+                scrollRef.current = scrollTo(startScroll + progress * totalDistance);
+                moveId.current = requestAnimationFrame(tick);
+            } else {
+                cancelAnimation();
+                scrollRef.current = scrollTo(endScroll);
+                onComplete == null ? void 0 : onComplete();
+            }
+        };
+        requestAnimationFrame(tick);
+    };
+    const selectByScroll = (scroll)=>{
+        const normalized = normalizeScroll(scroll) | 0;
+        const boundedScroll = infiniteProp ? normalized : Math.min(Math.max(normalized, 0), options.length - 1);
+        if (!infiniteProp && boundedScroll !== scroll) return;
+        scrollRef.current = scrollTo(boundedScroll);
+        const selected = options[scrollRef.current];
+        setValue(selected.value);
+    };
+    const selectByValue = (value)=>{
+        const index = options.findIndex((opt)=>opt.value === value);
+        if (index === -1) {
+            console.error("Invalid value selected:", value);
+            return;
+        }
+        cancelAnimation();
+        selectByScroll(index);
+    };
+    const updateScrollDuringDrag = (e)=>{
+        try {
+            var _e_touches_, _e_touches;
+            const currentY = (e instanceof MouseEvent ? e.clientY : (_e_touches = e.touches) == null ? void 0 : (_e_touches_ = _e_touches[0]) == null ? void 0 : _e_touches_.clientY) || 0;
+            const touchData = touchDataRef.current;
+            // Record current Y position with timestamp
+            touchData.yList.push([
+                currentY,
+                Date.now()
+            ]);
+            if (touchData.yList.length > 5) {
+                touchData.yList.shift(); // Keep latest 5 points for velocity calc
+            }
+            // Calculate delta in scroll position based on drag distance
+            const dragDelta = (touchData.startY - currentY) / itemHeight;
+            let nextScroll = scrollRef.current + dragDelta;
+            if (infiniteProp) {
+                // Wrap scroll for infinite lists
+                nextScroll = normalizeScroll(nextScroll);
+            } else {
+                const maxIndex = options.length;
+                if (nextScroll < 0) {
+                    // Apply resistance when dragging above top
+                    nextScroll *= RESISTANCE;
+                } else if (nextScroll > maxIndex) {
+                    // Apply resistance when dragging below bottom
+                    nextScroll = maxIndex + (nextScroll - maxIndex) * RESISTANCE;
+                }
+            }
+            // Update visual scroll and store position
+            touchData.touchScroll = scrollTo(nextScroll);
+        } catch (error) {
+            console.error("Error in updateScrollDuringDrag:", error);
+        }
+    };
+    const handleDragMoveEvent = (event)=>{
+        if (!dragingRef.current && !containerRef.current.contains(event.target) && event.target !== containerRef.current) {
+            return;
+        }
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (options.length) {
+            updateScrollDuringDrag(event);
+        }
+    };
+    const initiateDragGesture = (event)=>{
+        try {
+            var _containerRef_current, _event_touches_, _event_touches;
+            dragingRef.current = true;
+            const controller = new AbortController();
+            const { signal } = controller;
+            dragControllerRef.current = controller;
+            // Listen to movement events
+            const passiveOpts = {
+                signal,
+                passive: false
+            };
+            (_containerRef_current = containerRef.current) == null ? void 0 : _containerRef_current.addEventListener("touchmove", handleDragMoveEvent, passiveOpts);
+            document.addEventListener("mousemove", handleDragMoveEvent, passiveOpts);
+            const startY = (event instanceof MouseEvent ? event.clientY : (_event_touches = event.touches) == null ? void 0 : (_event_touches_ = _event_touches[0]) == null ? void 0 : _event_touches_.clientY) || 0;
+            // Initialize touch tracking
+            const touchData = touchDataRef.current;
+            touchData.startY = startY;
+            touchData.yList = [
+                [
+                    startY,
+                    Date.now()
+                ]
+            ];
+            touchData.touchScroll = scrollRef.current;
+            // Stop any ongoing scroll animation
+            cancelAnimation();
+        } catch (error) {
+            console.error("Error in initiateDragGesture:", error);
+        }
+    };
+    const handleDragStartEvent = useCallback((e)=>{
+        const isDragging = dragingRef.current;
+        const isTargetValid = containerRef.current.contains(e.target) || e.target === containerRef.current;
+        if ((isDragging || isTargetValid) && e.cancelable) {
+            e.preventDefault();
+            if (options.length) {
+                initiateDragGesture(e);
+            }
+        }
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        initiateDragGesture
+    ]);
+    const decelerateAndAnimateScroll = (initialVelocity)=>{
+        const currentScroll = scrollRef.current;
+        let targetScroll = currentScroll;
+        let deceleration = initialVelocity > 0 ? -baseDeceleration : baseDeceleration;
+        let duration = 0;
+        // Clamp utility to constrain a value within bounds
+        const clamp = (value, min, max)=>Math.max(min, Math.min(value, max));
+        if (infiniteProp) {
+            // Infinite mode: apply uniform deceleration to calculate scroll distance
+            duration = Math.abs(initialVelocity / deceleration);
+            const scrollDistance = initialVelocity * duration + 0.5 * deceleration * duration * duration;
+            targetScroll = Math.round(currentScroll + scrollDistance);
+        } else if (currentScroll < 0 || currentScroll > options.length - 1) {
+            // Out-of-bounds: snap back to nearest valid scroll index
+            const target = clamp(currentScroll, 0, options.length - 1);
+            const scrollDistance = currentScroll - target;
+            deceleration = snapBackDeceleration;
+            duration = Math.sqrt(Math.abs(scrollDistance / deceleration));
+            initialVelocity = deceleration * duration;
+            initialVelocity = currentScroll > 0 ? -initialVelocity : initialVelocity;
+            targetScroll = target;
+        } else {
+            // Normal decelerated scroll within bounds
+            duration = Math.abs(initialVelocity / deceleration);
+            const scrollDistance = initialVelocity * duration + 0.5 * deceleration * duration * duration;
+            targetScroll = Math.round(currentScroll + scrollDistance);
+            targetScroll = clamp(targetScroll, 0, options.length - 1);
+            const adjustedDistance = targetScroll - currentScroll;
+            duration = Math.sqrt(Math.abs(adjustedDistance / deceleration));
+        }
+        // Start animation to target scroll position with calculated duration
+        animateScroll(currentScroll, targetScroll, duration, ()=>{
+            selectByScroll(scrollRef.current); // Ensure selected item updates at end
+        });
+        // Fallback selection update (in case animation callback fails)
+        selectByScroll(scrollRef.current);
+    };
+    const finalizeDragAndStartInertiaScroll = ()=>{
+        try {
+            var _dragControllerRef_current;
+            (_dragControllerRef_current = dragControllerRef.current) == null ? void 0 : _dragControllerRef_current.abort();
+            dragControllerRef.current = null;
+            const touchData = touchDataRef.current;
+            const yList = touchData.yList;
+            let velocity = 0;
+            if (yList.length > 1) {
+                const len = yList.length;
+                var _yList_;
+                const [startY, startTime] = (_yList_ = yList[len - 2]) != null ? _yList_ : [
+                    0,
+                    0
+                ];
+                var _yList_1;
+                const [endY, endTime] = (_yList_1 = yList[len - 1]) != null ? _yList_1 : [
+                    0,
+                    0
+                ];
+                const timeDiff = endTime - startTime;
+                if (timeDiff > 0) {
+                    const distance = startY - endY;
+                    const velocityPerSecond = distance / itemHeight * 1000 / timeDiff;
+                    const maxVelocity = MAX_VELOCITY;
+                    const direction = velocityPerSecond > 0 ? 1 : -1;
+                    const absVelocity = Math.min(Math.abs(velocityPerSecond), maxVelocity);
+                    velocity = absVelocity * direction;
+                }
+            }
+            var _touchData_touchScroll;
+            scrollRef.current = (_touchData_touchScroll = touchData.touchScroll) != null ? _touchData_touchScroll : scrollRef.current;
+            decelerateAndAnimateScroll(velocity);
+        } catch (error) {
+            console.error("Error in finalizeDragAndStartInertiaScroll:", error);
+        } finally{
+            dragingRef.current = false;
+        }
+    };
+    const handleDragEndEvent = useCallback((event)=>{
+        if (!options.length) return;
+        const isDragging = dragingRef.current;
+        const isTargetValid = containerRef.current.contains(event.target) || event.target === containerRef.current;
+        if ((isDragging || isTargetValid) && event.cancelable) {
+            event.preventDefault();
+            finalizeDragAndStartInertiaScroll();
+        }
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        finalizeDragAndStartInertiaScroll
+    ]);
+    const scrollByWheel = (event)=>{
+        event.preventDefault();
+        const now = Date.now();
+        if (now - lastWheelRef.current < WHEEL_THROTTLE) return;
+        const direction = Math.sign(event.deltaY);
+        if (direction !== 0) {
+            selectByScroll(scrollRef.current + direction);
+            lastWheelRef.current = now;
+        }
+    };
+    const handleWheelEvent = useCallback((event)=>{
+        if (!options.length || !containerRef.current) return;
+        const isDragging = dragingRef.current;
+        const isTargetValid = containerRef.current.contains(event.target) || event.target === containerRef.current;
+        if ((isDragging || isTargetValid) && event.cancelable) {
+            event.preventDefault();
+            scrollByWheel(event);
+        }
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        scrollByWheel
+    ]);
+    useEffect(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        const controller = new AbortController();
+        const { signal } = controller;
+        const opts = {
+            signal,
+            passive: false
+        };
+        container.addEventListener("touchstart", handleDragStartEvent, opts);
+        container.addEventListener("touchend", handleDragEndEvent, opts);
+        container.addEventListener("wheel", handleWheelEvent, opts);
+        document.addEventListener("mousedown", handleDragStartEvent, opts);
+        document.addEventListener("mouseup", handleDragEndEvent, opts);
+        return ()=>{
+            console.log("cleanup");
+            controller.abort();
+        };
+    }, [
+        handleDragEndEvent,
+        handleDragStartEvent,
+        handleWheelEvent
+    ]);
+    useEffect(()=>{
+        selectByValue(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        value,
+        valueProp
+    ]);
+    console.log("render WheelPicker", valueProp);
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: containerRef,
+        "data-rwp": true,
+        style: {
+            height: containerHeight
+        }
+    }, /*#__PURE__*/ React.createElement("ul", {
+        ref: wheelItemsRef,
+        "data-rwp-options": true
+    }, renderWheelItems), /*#__PURE__*/ React.createElement("div", {
+        className: classNames == null ? void 0 : classNames.highlightWrapper,
+        "data-rwp-highlight-wrapper": true,
+        style: {
+            height: itemHeight,
+            lineHeight: itemHeight + "px"
+        }
+    }, /*#__PURE__*/ React.createElement("ul", {
+        ref: highlightListRef,
+        "data-rwp-highlight-list": true,
+        style: {
+            top: infiniteProp ? -28 : undefined
+        }
+    }, renderHighlightItems)));
+};
+
+export { WheelPicker, WheelPickerWrapper };

package/dist/style.css

@@ -0,0 +1,75 @@
+[data-rwp-wrapper] {
+  display: flex;
+  position: relative;
+  width: 100%;
+  align-items: stretch;
+  justify-content: space-between;
+  overflow: hidden;
+  perspective: 2000px;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+[data-rwp] {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  cursor: ns-resize;
+  text-align: center;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 20%,
+    black 80%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 20%,
+    black 80%,
+    transparent 100%
+  );
+}
+
+[data-rwp-highlight-wrapper] {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  font-size: 1rem;
+  font-weight: 500;
+  overflow: hidden;
+  transform: translateY(-50%);
+}
+
+[data-rwp-highlight-list] {
+  position: absolute;
+  width: 100%;
+  list-style: none;
+}
+
+[data-rwp-options] {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 0;
+  margin-left: auto;
+  margin-right: auto;
+  -webkit-font-smoothing: subpixel-antialiased;
+  will-change: transform;
+  backface-visibility: hidden;
+  transform-style: preserve-3d;
+  list-style: none;
+}
+
+[data-rwp-option] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  -webkit-font-smoothing: subpixel-antialiased;
+  will-change: visibility;
+  font-size: 0.875rem;
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@ncdai/react-wheel-picker",
+  "version": "1.0.0",
+  "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "default": "./dist/index.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "bunchee --watch",
+    "build": "bunchee && pnpm copy-assets",
+    "type-check": "tsc --noEmit",
+    "copy-assets": "cp -r ./src/style.css ./dist/style.css",
+    "dev:website": "turbo run dev --filter=website...",
+    "lint": "eslint . --ext .ts,.tsx --ignore-pattern 'website/**'",
+    "format": "prettier --write .",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Nguyen Chanh Dai <dai@chanhdai.com>",
+  "license": "MIT",
+  "homepage": "https://react-wheel-picker.chanhdai.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ncdai/react-wheel-picker.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ncdai/react-wheel-picker/issues"
+  },
+  "packageManager": "pnpm@10.7.0",
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "bunchee": "^6.5.1",
+    "prettier": "3.5.3",
+    "react": "^19.0.0",
+    "turbo": "^2.5.3",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+  }
+}