xiod-ui 1.0.0

package/dist/components/wheel-picker.js

@@ -0,0 +1,771 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React$1 from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/components/wheel-picker.tsx
+const RESISTANCE = .3;
+const MAX_VELOCITY = 30;
+const easeOutCubic = (p) => (p - 1) ** 3 + 1;
+const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+const WheelPickerGroupContext = React$1.createContext(null);
+function useWheelPickerGroup() {
+	return React$1.useContext(WheelPickerGroupContext);
+}
+function WheelPickerGroup({ className, children, ...props }) {
+	const [activeIndex, setActiveIndex] = useState(-1);
+	const counterRef = useRef(0);
+	const pickerRefsRef = useRef(/* @__PURE__ */ new Map());
+	const register = useCallback((existingIndex, ref) => {
+		const index = existingIndex !== null ? existingIndex : counterRef.current++;
+		pickerRefsRef.current.set(index, ref);
+		setActiveIndex((current) => current === -1 ? index : current);
+		return index;
+	}, []);
+	const getPickerRef = useCallback((index) => pickerRefsRef.current.get(index) ?? null, []);
+	const getPickerIndices = useCallback(() => Array.from(pickerRefsRef.current.keys()).toSorted((a, b) => a - b), []);
+	const value = useMemo(() => ({
+		activeIndex,
+		setActiveIndex,
+		register,
+		getPickerRef,
+		getPickerIndices
+	}), [
+		activeIndex,
+		register,
+		getPickerRef,
+		getPickerIndices
+	]);
+	return /* @__PURE__ */ jsx(WheelPickerGroupContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("relative flex items-stretch justify-center border border-border/80 bg-background/50 rounded-2xl p-[calc(--spacing(2)-1px)] select-none shadow-xs/5 max-w-full overflow-hidden before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+			"data-slot": "wheel-picker-group",
+			...props,
+			children
+		})
+	});
+}
+const TYPEAHEAD_TIMEOUT_MS = 600;
+function useTypeaheadSearch(options, { getTextValue, getCurrentIndex, onMatch }) {
+	const searchBufferRef = useRef("");
+	const timeoutRef = useRef(null);
+	const resetTypeahead = useCallback(() => {
+		searchBufferRef.current = "";
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+	}, []);
+	return {
+		handleTypeaheadSearch: useCallback((char) => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+			searchBufferRef.current += char.toLowerCase();
+			const searchTerm = searchBufferRef.current;
+			const normalizedSearch = searchTerm.length > 1 && Array.from(searchTerm).every((c) => c === searchTerm[0]) ? searchTerm[0] : searchTerm;
+			const currentIndex = getCurrentIndex();
+			const shouldCycle = normalizedSearch.length === 1;
+			let matchIndex = -1;
+			if (shouldCycle) for (let i = 1; i <= options.length; i++) {
+				const index = (currentIndex + i) % options.length;
+				if (getTextValue(options[index]).toLowerCase().startsWith(normalizedSearch)) {
+					matchIndex = index;
+					break;
+				}
+			}
+			else matchIndex = options.findIndex((option) => {
+				return getTextValue(option).toLowerCase().startsWith(normalizedSearch);
+			});
+			if (matchIndex !== -1) onMatch(matchIndex);
+			timeoutRef.current = setTimeout(() => {
+				searchBufferRef.current = "";
+				timeoutRef.current = null;
+			}, TYPEAHEAD_TIMEOUT_MS);
+		}, [
+			options,
+			getTextValue,
+			getCurrentIndex,
+			onMatch
+		]),
+		resetTypeahead
+	};
+}
+function useCallbackRef(callback) {
+	const callbackRef = useRef(callback);
+	useEffect(() => {
+		callbackRef.current = callback;
+	});
+	return useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
+}
+function useControllableState({ prop, defaultProp, onChange = () => {} }) {
+	const [uncontrolledProp, setUncontrolledProp] = useState(defaultProp);
+	const isControlled = prop !== void 0;
+	const value = isControlled ? prop : uncontrolledProp;
+	const handleChange = useCallbackRef(onChange);
+	return [value, useCallback((nextValue) => {
+		if (isControlled) {
+			const val = typeof nextValue === "function" ? nextValue(prop) : nextValue;
+			if (val !== prop && val !== void 0) handleChange(val);
+		} else setUncontrolledProp(nextValue);
+	}, [
+		isControlled,
+		prop,
+		handleChange
+	])];
+}
+const wheelPickerVariants = cva("relative flex-1 cursor-default select-none focus:outline-none focus-visible:outline-none min-w-[70px]", {
+	variants: { size: {
+		sm: "h-[180px] rounded-lg",
+		md: "h-[220px] rounded-xl",
+		lg: "h-[260px] rounded-2xl"
+	} },
+	defaultVariants: { size: "md" }
+});
+function findNearestEnabledIndex(startIndex, direction, options, infinite) {
+	if (options.length === 0) return startIndex;
+	if (!options.some((opt) => !opt.disabled)) return startIndex;
+	const searchInDirection = (dir) => {
+		let currentIndex = startIndex;
+		let attempts = 0;
+		const maxAttempts = options.length;
+		while (attempts < maxAttempts) {
+			currentIndex = currentIndex + dir;
+			if (infinite) currentIndex = (currentIndex % options.length + options.length) % options.length;
+			else if (currentIndex < 0 || currentIndex >= options.length) return -1;
+			if (!options[currentIndex]?.disabled) return currentIndex;
+			attempts++;
+		}
+		return -1;
+	};
+	let nearestIndex = searchInDirection(direction);
+	if (nearestIndex === -1) nearestIndex = searchInDirection(direction * -1);
+	return nearestIndex === -1 ? startIndex : nearestIndex;
+}
+function WheelPicker({ className, options: optionsProp, value: valueProp, defaultValue, onValueChange, infinite = false, visibleCount = 20, dragSensitivity = 3, scrollSensitivity = 5, optionItemHeight, classNames, size = "md", ...props }) {
+	const itemHeight = optionItemHeight ?? (size === "sm" ? 28 : size === "lg" ? 44 : 36);
+	const firstEnabledValue = useMemo(() => {
+		return optionsProp.find((opt) => !opt.disabled)?.value ?? optionsProp[0]?.value;
+	}, [optionsProp]);
+	const [value = firstEnabledValue, setValue] = useControllableState({
+		prop: valueProp,
+		defaultProp: defaultValue,
+		onChange: onValueChange
+	});
+	const options = useMemo(() => {
+		if (!infinite || optionsProp.length === 0) return optionsProp;
+		const result = [];
+		const L = optionsProp.length;
+		const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
+		const lcm = L * visibleCount / gcd(L, visibleCount);
+		let targetLength = lcm;
+		const minLength = Math.ceil(visibleCount * 1.5);
+		if (targetLength < minLength) targetLength = Math.ceil(minLength / lcm) * lcm;
+		const k = targetLength / L;
+		for (let i = 0; i < k; i++) result.push(...optionsProp);
+		return result;
+	}, [
+		optionsProp,
+		infinite,
+		visibleCount
+	]);
+	const halfItemHeight = itemHeight * .5;
+	const itemAngle = 360 / visibleCount;
+	const radius = itemHeight / Math.tan(itemAngle * Math.PI / 180);
+	const containerHeight = Math.round(radius * 2 + itemHeight * .25);
+	const quarterCount = visibleCount >> 2;
+	const baseDeceleration = dragSensitivity * 12;
+	const snapBackDeceleration = 10;
+	const containerRef = useRef(null);
+	const wheelItemsRef = useRef(null);
+	const highlightListRef = useRef(null);
+	const scrollRef = useRef(0);
+	const moveId = useRef(0);
+	const draggingRef = useRef(false);
+	useRef(0);
+	const wheelSnapTimeoutRef = useRef(null);
+	const [isFocused, setIsFocused] = useState(false);
+	const pickerIndexRef = useRef(-1);
+	const group = useWheelPickerGroup();
+	const containerRefCallback = useCallback((node) => {
+		containerRef.current = node;
+		if (node && group) {
+			const existingIndex = pickerIndexRef.current === -1 ? null : pickerIndexRef.current;
+			pickerIndexRef.current = group.register(existingIndex, node);
+		}
+	}, [group]);
+	const touchDataRef = useRef({
+		startY: 0,
+		yList: [],
+		touchScroll: 0,
+		isClick: true
+	});
+	const dragControllerRef = useRef(null);
+	const renderWheelItems = useMemo(() => {
+		const renderItem = (item, index, angle) => /* @__PURE__ */ jsx("li", {
+			className: cn("absolute left-0 w-full flex items-center justify-center text-muted-foreground/70 dark:text-muted-foreground/60 transition-[color] duration-150 text-sm font-medium tabular-nums select-none", item.disabled && "opacity-30 pointer-events-none", classNames?.optionItem),
+			"data-slot": "wheel-picker-option",
+			"data-index": index,
+			"data-disabled": item.disabled || void 0,
+			style: {
+				top: -halfItemHeight,
+				height: itemHeight,
+				lineHeight: `${itemHeight}px`,
+				transform: `rotateX(${angle}deg) translateZ(${radius}px)`,
+				backfaceVisibility: "hidden",
+				WebkitBackfaceVisibility: "hidden",
+				visibility: "hidden"
+			},
+			children: item.label
+		}, index);
+		const items = options.map((option, index) => renderItem(option, index, -itemAngle * index));
+		if (infinite) 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;
+	}, [
+		itemHeight,
+		halfItemHeight,
+		infinite,
+		itemAngle,
+		options,
+		quarterCount,
+		radius,
+		classNames?.optionItem
+	]);
+	const renderHighlightItems = useMemo(() => {
+		const renderItem = (item, key) => /* @__PURE__ */ jsx("li", {
+			className: cn("w-full flex items-center justify-center text-foreground font-semibold tabular-nums select-none transition-colors duration-150", size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base", item.disabled && "opacity-30 pointer-events-none", classNames?.highlightItem),
+			"data-slot": "wheel-picker-highlight-item",
+			"data-disabled": item.disabled || void 0,
+			style: { height: itemHeight },
+			children: item.label
+		}, key);
+		const items = options.map((option, index) => renderItem(option, index));
+		if (infinite && options.length > 0) {
+			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?.highlightItem,
+		itemHeight,
+		infinite,
+		options,
+		size
+	]);
+	const wheelSegmentPositions = useMemo(() => {
+		let positionAlongWheel = 0;
+		const degToRad = Math.PI / 180;
+		const segmentRanges = [];
+		for (let i = quarterCount - 1; i >= -quarterCount + 1; --i) {
+			const angle = i * itemAngle;
+			const segmentLength = itemHeight * Math.cos(angle * degToRad);
+			const start = positionAlongWheel;
+			positionAlongWheel += segmentLength;
+			segmentRanges.push([start, positionAlongWheel]);
+		}
+		return segmentRanges;
+	}, [
+		itemAngle,
+		itemHeight,
+		quarterCount
+	]);
+	const normalizeScroll = useCallback((scroll) => {
+		if (options.length === 0) return 0;
+		return (scroll % options.length + options.length) % options.length;
+	}, [options.length]);
+	const scrollTo = useCallback((scroll) => {
+		const normalizedScroll = infinite ? normalizeScroll(scroll) : scroll;
+		if (wheelItemsRef.current) {
+			const transform = `translateZ(${-radius}px) rotateX(${itemAngle * normalizedScroll}deg)`;
+			wheelItemsRef.current.style.transform = transform;
+			const children = wheelItemsRef.current.childNodes;
+			for (let i = 0; i < children.length; i++) {
+				const li = children[i];
+				const distance = Math.abs(Number(li.dataset.index) - normalizedScroll);
+				li.style.visibility = distance > quarterCount ? "hidden" : "visible";
+				const baseOpacity = li.dataset.disabled ? .3 : 1;
+				const opacity = distance < .5 ? distance / .5 * baseOpacity : baseOpacity;
+				li.style.opacity = opacity.toString();
+			}
+		}
+		if (highlightListRef.current) highlightListRef.current.style.transform = `translateY(${-normalizedScroll * itemHeight}px)`;
+		return normalizedScroll;
+	}, [
+		radius,
+		itemAngle,
+		quarterCount,
+		itemHeight,
+		infinite,
+		normalizeScroll
+	]);
+	const cancelAnimation = useCallback(() => {
+		cancelAnimationFrame(moveId.current);
+	}, []);
+	const animateScroll = useCallback((startScroll, endScroll, duration, onComplete) => {
+		if (startScroll === endScroll || duration === 0) {
+			scrollTo(startScroll);
+			onComplete?.();
+			return;
+		}
+		const startTime = performance.now();
+		const totalDistance = endScroll - startScroll;
+		const tick = (currentTime) => {
+			const elapsed = (currentTime - startTime) / 1e3;
+			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?.();
+			}
+		};
+		requestAnimationFrame(tick);
+	}, [scrollTo, cancelAnimation]);
+	const scrollDirectionRef = useRef(1);
+	const selectByScroll = useCallbackRef((scroll, scrollDirection) => {
+		if (options.length === 0) return;
+		const normalized = Math.round(normalizeScroll(scroll));
+		const boundedScroll = infinite ? normalized : clamp(Math.round(scroll), 0, options.length - 1);
+		if (!infinite && boundedScroll !== scroll) return;
+		if (options[boundedScroll]?.disabled) {
+			const step = findNearestEnabledIndex(boundedScroll, scrollDirection ?? scrollDirectionRef.current, options, infinite) - scrollRef.current;
+			if (step !== 0) {
+				scrollByStep(step);
+				return;
+			}
+		}
+		scrollRef.current = scrollTo(boundedScroll);
+		const selected = options[scrollRef.current];
+		if (selected && !selected.disabled) setValue(selected.value);
+	});
+	const selectByValue = useCallbackRef((val) => {
+		if (options.length === 0 || draggingRef.current) return;
+		const currentIndex = Math.round(scrollRef.current);
+		let index = -1;
+		let minDistance = Number.MAX_VALUE;
+		for (let i = 0; i < options.length; i++) if (options[i].value === val) {
+			const distance = Math.abs(i - currentIndex);
+			if (distance < minDistance) {
+				minDistance = distance;
+				index = i;
+			}
+		}
+		if (index === -1) return;
+		if (options[index]?.disabled) index = findNearestEnabledIndex(index, 1, options, infinite);
+		cancelAnimation();
+		selectByScroll(index);
+	});
+	const scrollByStep = useCallbackRef((step) => {
+		if (options.length === 0) return;
+		const startScroll = scrollRef.current;
+		let endScroll = startScroll + step;
+		if (infinite) endScroll = Math.round(endScroll);
+		else endScroll = clamp(Math.round(endScroll), 0, options.length - 1);
+		const distance = Math.abs(endScroll - startScroll);
+		if (distance === 0) return;
+		const direction = step > 0 ? 1 : -1;
+		scrollDirectionRef.current = direction;
+		const duration = Math.sqrt(distance / scrollSensitivity);
+		cancelAnimation();
+		animateScroll(startScroll, endScroll, duration, () => {
+			selectByScroll(scrollRef.current, direction);
+		});
+	});
+	const handleWheelItemClick = useCallback((clientY) => {
+		const container = containerRef.current;
+		if (!container) return;
+		const { top } = container.getBoundingClientRect();
+		const clickOffsetY = clientY - top;
+		const clickedSegmentIndex = wheelSegmentPositions.findIndex(([start, end]) => clickOffsetY >= start && clickOffsetY <= end);
+		if (clickedSegmentIndex === -1) return;
+		const stepsToScroll = (quarterCount - clickedSegmentIndex - 1) * -1;
+		const targetIndex = scrollRef.current + stepsToScroll;
+		const normalizedIndex = infinite ? normalizeScroll(targetIndex) : Math.max(0, Math.min(targetIndex, options.length - 1));
+		if (options[normalizedIndex]?.disabled) return;
+		scrollByStep(stepsToScroll);
+	}, [
+		wheelSegmentPositions,
+		quarterCount,
+		infinite,
+		normalizeScroll,
+		options,
+		scrollByStep
+	]);
+	const updateScrollDuringDrag = useCallback((e) => {
+		if (options.length === 0) return;
+		const currentY = (e instanceof MouseEvent ? e.clientY : e.touches?.[0]?.clientY) || 0;
+		const touchData = touchDataRef.current;
+		if (touchData.isClick) {
+			if (Math.abs(currentY - touchData.startY) > 5) touchData.isClick = false;
+		}
+		touchData.yList.push([currentY, Date.now()]);
+		if (touchData.yList.length > 5) touchData.yList.shift();
+		const dragDelta = (touchData.startY - currentY) / itemHeight;
+		let nextScroll = scrollRef.current + dragDelta;
+		if (infinite) nextScroll = normalizeScroll(nextScroll);
+		else {
+			const maxIndex = options.length - 1;
+			if (nextScroll < 0) nextScroll *= RESISTANCE;
+			else if (nextScroll > maxIndex) nextScroll = maxIndex + (nextScroll - maxIndex) * RESISTANCE;
+		}
+		touchData.touchScroll = scrollTo(nextScroll);
+	}, [
+		options.length,
+		itemHeight,
+		infinite,
+		normalizeScroll,
+		scrollTo
+	]);
+	const decelerateAndAnimateScroll = useCallback((initialVelocity) => {
+		const currentScroll = scrollRef.current;
+		let targetScroll = currentScroll;
+		let duration = 0;
+		const direction = initialVelocity > 0 ? 1 : -1;
+		scrollDirectionRef.current = direction;
+		if (infinite) {
+			const signedDistance = initialVelocity * initialVelocity / (2 * baseDeceleration) * direction;
+			targetScroll = Math.round(currentScroll + signedDistance);
+			const inertiaDuration = Math.abs(initialVelocity / baseDeceleration);
+			const distanceToTarget = Math.abs(targetScroll - currentScroll);
+			const snapDuration = Math.sqrt(distanceToTarget / snapBackDeceleration);
+			duration = Math.max(inertiaDuration, snapDuration);
+		} else {
+			const predictedTarget = currentScroll + initialVelocity * initialVelocity / (2 * baseDeceleration) * direction;
+			if (predictedTarget < 0) {
+				targetScroll = 0;
+				const distance = Math.abs(currentScroll - targetScroll);
+				duration = Math.sqrt(distance / snapBackDeceleration);
+			} else if (predictedTarget > options.length - 1) {
+				targetScroll = options.length - 1;
+				const distance = Math.abs(currentScroll - targetScroll);
+				duration = Math.sqrt(distance / snapBackDeceleration);
+			} else {
+				targetScroll = Math.round(predictedTarget);
+				const inertiaDuration = Math.abs(initialVelocity / baseDeceleration);
+				const distanceToTarget = Math.abs(targetScroll - currentScroll);
+				const snapDuration = Math.sqrt(distanceToTarget / snapBackDeceleration);
+				duration = Math.max(inertiaDuration, snapDuration);
+			}
+		}
+		if (targetScroll !== currentScroll) duration = clamp(duration, .15, .8);
+		else duration = 0;
+		animateScroll(currentScroll, targetScroll, duration, () => {
+			selectByScroll(scrollRef.current, direction);
+		});
+	}, [
+		baseDeceleration,
+		infinite,
+		options.length,
+		animateScroll,
+		selectByScroll
+	]);
+	const finalizeDragAndStartInertiaScroll = useCallback(() => {
+		try {
+			dragControllerRef.current?.abort();
+			dragControllerRef.current = null;
+			const touchData = touchDataRef.current;
+			if (touchData.isClick) {
+				handleWheelItemClick(touchData.startY);
+				return;
+			}
+			const yList = touchData.yList;
+			let velocity = 0;
+			if (yList.length > 1) {
+				const len = yList.length;
+				const [startY, startTime] = yList[len - 2] ?? [0, 0];
+				const [endY, endTime] = yList[len - 1] ?? [0, 0];
+				const timeDiff = endTime - startTime;
+				if (timeDiff > 0) {
+					const velocityPerSecond = (startY - endY) / itemHeight * 1e3 / timeDiff;
+					velocity = Math.min(Math.abs(velocityPerSecond), MAX_VELOCITY) * (velocityPerSecond > 0 ? 1 : -1);
+				}
+			}
+			scrollRef.current = touchData.touchScroll ?? scrollRef.current;
+			decelerateAndAnimateScroll(velocity);
+		} finally {
+			draggingRef.current = false;
+		}
+	}, [
+		handleWheelItemClick,
+		itemHeight,
+		decelerateAndAnimateScroll
+	]);
+	const handleDragMoveEvent = useCallback((event) => {
+		if (event.cancelable) event.preventDefault();
+		updateScrollDuringDrag(event);
+	}, [updateScrollDuringDrag]);
+	const handleDragEndEvent = useCallback((event) => {
+		if (options.length === 0) return;
+		if (event.cancelable) event.preventDefault();
+		finalizeDragAndStartInertiaScroll();
+	}, [options.length, finalizeDragAndStartInertiaScroll]);
+	const initiateDragGesture = useCallback((event) => {
+		draggingRef.current = true;
+		const controller = new AbortController();
+		const { signal } = controller;
+		dragControllerRef.current = controller;
+		const opts = {
+			signal,
+			passive: false
+		};
+		containerRef.current?.addEventListener("touchmove", handleDragMoveEvent, opts);
+		containerRef.current?.addEventListener("touchend", handleDragEndEvent, opts);
+		document.addEventListener("mousemove", handleDragMoveEvent, opts);
+		document.addEventListener("mouseup", handleDragEndEvent, opts);
+		window.addEventListener("blur", finalizeDragAndStartInertiaScroll, { signal });
+		const startY = (event instanceof MouseEvent ? event.clientY : event.touches?.[0]?.clientY) || 0;
+		const touchData = touchDataRef.current;
+		touchData.startY = startY;
+		touchData.yList = [[startY, Date.now()]];
+		touchData.touchScroll = scrollRef.current;
+		touchData.isClick = true;
+		cancelAnimation();
+	}, [
+		handleDragMoveEvent,
+		handleDragEndEvent,
+		finalizeDragAndStartInertiaScroll,
+		cancelAnimation
+	]);
+	const handleDragStartEvent = useCallback((e) => {
+		if (options.length === 0) return;
+		if (e instanceof MouseEvent && e.button !== 0) return;
+		if (e.cancelable) e.preventDefault();
+		initiateDragGesture(e);
+	}, [options.length, initiateDragGesture]);
+	const scrollByWheel = useCallback((event) => {
+		event.preventDefault();
+		cancelAnimation();
+		if (wheelSnapTimeoutRef.current) clearTimeout(wheelSnapTimeoutRef.current);
+		const delta = event.deltaY * .003 * scrollSensitivity;
+		let nextScroll = scrollRef.current + delta;
+		if (infinite) nextScroll = normalizeScroll(nextScroll);
+		else nextScroll = clamp(nextScroll, 0, options.length - 1);
+		scrollTo(nextScroll);
+		scrollRef.current = nextScroll;
+		const direction = event.deltaY > 0 ? 1 : -1;
+		scrollDirectionRef.current = direction;
+		wheelSnapTimeoutRef.current = setTimeout(() => {
+			const targetIndex = Math.round(scrollRef.current);
+			animateScroll(scrollRef.current, targetIndex, .15, () => {
+				selectByScroll(scrollRef.current, direction);
+			});
+		}, 150);
+	}, [
+		scrollSensitivity,
+		infinite,
+		options.length,
+		normalizeScroll,
+		scrollTo,
+		animateScroll,
+		selectByScroll,
+		cancelAnimation
+	]);
+	const handleWheelEvent = useCallback((event) => {
+		if (options.length === 0 || !containerRef.current) return;
+		if (containerRef.current.contains(event.target) && event.cancelable) {
+			event.preventDefault();
+			scrollByWheel(event);
+		}
+	}, [options.length, scrollByWheel]);
+	const navigateToPicker = useCallback((direction) => {
+		const pickerIndex = pickerIndexRef.current;
+		if (!group || pickerIndex === -1) return;
+		const sortedIndices = group.getPickerIndices();
+		const currentPos = sortedIndices.indexOf(pickerIndex);
+		if (currentPos === -1) return;
+		let targetPos;
+		if (direction === "prev") targetPos = currentPos > 0 ? currentPos - 1 : sortedIndices.length - 1;
+		else targetPos = currentPos < sortedIndices.length - 1 ? currentPos + 1 : 0;
+		const targetIndex = sortedIndices[targetPos];
+		const targetRef = group.getPickerRef(targetIndex);
+		if (targetRef) {
+			const currentRef = containerRef.current;
+			if (currentRef) currentRef.tabIndex = -1;
+			targetRef.tabIndex = 0;
+			group.setActiveIndex(targetIndex);
+			targetRef.focus();
+		}
+	}, [group]);
+	const enabledOptionsMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		const reverseMap = /* @__PURE__ */ new Map();
+		const enabled = [];
+		options.forEach((option, index) => {
+			if (!option.disabled) {
+				const enabledIndex = enabled.length;
+				map.set(enabledIndex, index);
+				reverseMap.set(index, enabledIndex);
+				enabled.push(option);
+			}
+		});
+		return {
+			enabled,
+			map,
+			reverseMap
+		};
+	}, [options]);
+	const { handleTypeaheadSearch, resetTypeahead } = useTypeaheadSearch(enabledOptionsMap.enabled, {
+		getTextValue: (opt) => {
+			return opt.textValue ?? (typeof opt.label === "string" ? opt.label : String(opt.value));
+		},
+		getCurrentIndex: useCallback(() => {
+			const currentIndex = Math.round(scrollRef.current);
+			return enabledOptionsMap.reverseMap.get(currentIndex) ?? 0;
+		}, [enabledOptionsMap]),
+		onMatch: useCallback((enabledIndex) => {
+			const originalIndex = enabledOptionsMap.map.get(enabledIndex);
+			if (originalIndex !== void 0) {
+				const step = originalIndex - Math.round(scrollRef.current);
+				scrollByStep(step);
+			}
+		}, [enabledOptionsMap, scrollByStep])
+	});
+	const handleKeyDown = useCallback((event) => {
+		if (options.length === 0) return;
+		const handleVerticalNavigation = (direction) => {
+			event.preventDefault();
+			const currentIndex = Math.round(scrollRef.current);
+			let targetIndex = currentIndex + direction;
+			if (!infinite) {
+				if (direction === -1 && targetIndex < 0) return;
+				if (direction === 1 && targetIndex >= options.length) return;
+			}
+			const normalizedTarget = infinite ? (targetIndex % options.length + options.length) % options.length : targetIndex;
+			if (options[normalizedTarget]?.disabled) {
+				const nearestEnabled = findNearestEnabledIndex(normalizedTarget, direction, options, infinite);
+				targetIndex = currentIndex + direction + (nearestEnabled - normalizedTarget);
+			}
+			const step = targetIndex - currentIndex;
+			if (step !== 0) scrollByStep(step);
+		};
+		const handleHome = () => {
+			if (infinite) return;
+			event.preventDefault();
+			let targetIndex = 0;
+			if (options[0]?.disabled) targetIndex = findNearestEnabledIndex(0, 1, options, false);
+			const step = targetIndex - scrollRef.current;
+			if (step !== 0) scrollByStep(step);
+		};
+		const handleEnd = () => {
+			if (infinite) return;
+			event.preventDefault();
+			let targetIndex = options.length - 1;
+			if (options[targetIndex]?.disabled) targetIndex = findNearestEnabledIndex(targetIndex, -1, options, false);
+			const step = targetIndex - scrollRef.current;
+			if (step !== 0) scrollByStep(step);
+		};
+		const handler = {
+			ArrowUp: () => handleVerticalNavigation(-1),
+			ArrowDown: () => handleVerticalNavigation(1),
+			ArrowLeft: () => {
+				event.preventDefault();
+				navigateToPicker("prev");
+			},
+			ArrowRight: () => {
+				event.preventDefault();
+				navigateToPicker("next");
+			},
+			Home: handleHome,
+			End: handleEnd
+		}[event.key];
+		if (handler) handler();
+		else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			handleTypeaheadSearch(event.key);
+		}
+	}, [
+		options,
+		infinite,
+		navigateToPicker,
+		handleTypeaheadSearch,
+		scrollByStep
+	]);
+	const handleFocus = useCallback(() => {
+		setIsFocused(true);
+		const pickerIndex = pickerIndexRef.current;
+		if (group && pickerIndex !== -1) group.setActiveIndex(pickerIndex);
+	}, [group]);
+	const handleBlur = useCallback(() => {
+		setIsFocused(false);
+		resetTypeahead();
+	}, [resetTypeahead]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const opts = { passive: false };
+		container.addEventListener("touchstart", handleDragStartEvent, opts);
+		container.addEventListener("wheel", handleWheelEvent, opts);
+		container.addEventListener("mousedown", handleDragStartEvent, opts);
+		return () => {
+			container.removeEventListener("touchstart", handleDragStartEvent);
+			container.removeEventListener("wheel", handleWheelEvent);
+			container.removeEventListener("mousedown", handleDragStartEvent);
+			if (dragControllerRef.current) dragControllerRef.current.abort();
+			if (wheelSnapTimeoutRef.current) clearTimeout(wheelSnapTimeoutRef.current);
+		};
+	}, [handleDragStartEvent, handleWheelEvent]);
+	useEffect(() => {
+		selectByValue(value);
+	}, [value, selectByValue]);
+	const pickerIndex = pickerIndexRef.current;
+	const activeIndex = group?.activeIndex ?? -1;
+	const tabIndex = group && pickerIndex !== -1 ? activeIndex === pickerIndex ? 0 : -1 : 0;
+	const selectedIndex = optionsProp.findIndex((option) => option.value === value);
+	const selectedOption = selectedIndex >= 0 ? optionsProp[selectedIndex] : void 0;
+	const selectedText = selectedOption ? selectedOption.textValue ?? (typeof selectedOption.label === "string" || typeof selectedOption.label === "number" ? String(selectedOption.label) : String(selectedOption.value)) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRefCallback,
+		className: cn(wheelPickerVariants({ size }), "relative flex-1 cursor-default select-none focus:outline-none focus-visible:outline-none [perspective:2000px] [transform-style:preserve-3d] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
+		tabIndex,
+		role: "spinbutton",
+		"aria-label": props["aria-label"] ?? "Wheel picker",
+		"aria-valuemin": optionsProp.length > 0 ? 0 : void 0,
+		"aria-valuemax": optionsProp.length > 0 ? optionsProp.length - 1 : void 0,
+		"aria-valuenow": selectedIndex >= 0 ? selectedIndex : void 0,
+		"aria-valuetext": selectedText,
+		onKeyDown: handleKeyDown,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		style: { height: containerHeight },
+		"data-slot": "wheel-picker",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-1/4 bg-gradient-to-b from-background to-transparent z-10" }),
+			/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-background to-transparent z-10" }),
+			/* @__PURE__ */ jsx("ul", {
+				"aria-hidden": "true",
+				ref: wheelItemsRef,
+				className: "absolute top-1/2 left-0 block w-full h-0 m-0 p-0 list-none will-change-transform [transform-style:preserve-3d]",
+				"data-slot": "wheel-picker-cylinder",
+				children: renderWheelItems
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("absolute top-1/2 -translate-y-1/2 w-full overflow-hidden border-y border-border/80 bg-accent/40 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", isFocused && "border-primary/80 bg-accent/60 ring-2 ring-ring/30 dark:ring-ring/20", classNames?.highlightWrapper),
+				style: {
+					height: itemHeight,
+					lineHeight: `${itemHeight}px`
+				},
+				"data-slot": "wheel-picker-highlight-window",
+				children: /* @__PURE__ */ jsx("ul", {
+					"aria-hidden": "true",
+					ref: highlightListRef,
+					className: "absolute left-0 w-full m-0 p-0 list-none",
+					style: { top: infinite ? -itemHeight : void 0 },
+					"data-slot": "wheel-picker-highlight-list",
+					children: renderHighlightItems
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { WheelPicker, WheelPickerGroup, useWheelPickerGroup, wheelPickerVariants };