@multiplatform.one/forms 7.4.0 → 7.5.0

package/dist/cjs/Wheel/index.cjs

@@ -26,20 +26,55 @@ __export(Wheel_exports, {
 });
 module.exports = __toCommonJS(Wheel_exports);
 var import_react = require("react");
+var import_react_native = require("react-native-web");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
+var import_t = require("../shared/t.cjs");
+var import_haptic = require("./haptic.cjs");
+var import_WheelEdgeFade = require("./WheelEdgeFade.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const friction = 0.95;
 const minVelocity = 0.5;
 const momentumMultiplier = 0.8;
 const rubberBandConstant = 0.55;
+const tapSlopPx = 8;
+const diameterRatio = 1.07;
+const squeeze = 1.45;
+const perspectivePx = 400;
+const defaultColumnWidth = 88;
+const wheelFontBySize = {
+  small: "$6",
+  medium: "$8",
+  large: "$9"
+};
+const transitionDurationsMs = {
+  bouncy: 200,
+  lazy: 600,
+  slow: 500,
+  medium: 250,
+  quick: 100,
+  tooltip: 400,
+  snappy: 80,
+  gentle: 450
+};
+const WHEEL_FOCUS_STYLE_ID = "mp1-wheel-focus";
+function ensureWheelFocusStyles() {
+  if (!import_tamagui.isWeb || typeof document === "undefined") return;
+  if (document.getElementById(WHEEL_FOCUS_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = WHEEL_FOCUS_STYLE_ID;
+  style.textContent = ".mp1-wheel-wrapper:focus-visible { outline: 2px solid var(--outlineColor, rgba(0,0,0,0.5)); outline-offset: -2px; }";
+  document.head.appendChild(style);
+}
+const wheelMaskStyle = import_tamagui.isWeb ? {
+  WebkitMaskImage: "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)",
+  maskImage: "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)"
+} : void 0;
 const WheelContainer = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "Wheel",
   position: "relative",
   overflow: "hidden",
-  userSelect: "none",
-  width: 80
-  // Default width for wheel column
+  userSelect: "none"
 });
 const WheelItemContainer = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "WheelItem",
@@ -55,30 +90,8 @@ const SelectionIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
   position: "absolute",
   left: 0,
   right: 0,
-  borderTopWidth: 1,
-  borderBottomWidth: 1,
-  borderColor: "$borderColor",
-  backgroundColor: "$color3",
-  opacity: 0.3,
   pointerEvents: "none"
 });
-const FadeOverlay = (0, import_tamagui.styled)(import_tamagui.View, {
-  name: "WheelFadeOverlay",
-  position: "absolute",
-  left: 0,
-  right: 0,
-  pointerEvents: "none",
-  variants: {
-    edge: {
-      top: {
-        top: 0
-      },
-      bottom: {
-        bottom: 0
-      }
-    }
-  }
-});
 function normalizeItem(item) {
   if (typeof item === "object" && item !== null && "value" in item) {
     return item;
@@ -123,20 +136,39 @@ function rubberBand(offset, dimension) {
   return offset < 0 ? -result : result;
 }
 function getItemTransform(index, scrollOffset, itemHeight, containerHeight) {
-  const centerY = containerHeight / 2;
-  const itemCenterY = index * itemHeight + itemHeight / 2 - scrollOffset + (containerHeight - itemHeight) / 2;
-  const distanceFromCenter = itemCenterY - centerY;
-  const normalizedDistance = distanceFromCenter / (containerHeight / 2);
-  const rotateX = normalizedDistance * -70;
-  const scale = 1 - Math.abs(normalizedDistance) * 0.3;
-  const opacity = 1 - Math.abs(normalizedDistance) * 0.35;
-  const curveOffset = Math.abs(normalizedDistance) * normalizedDistance * itemHeight * 0.5;
-  const translateY = itemCenterY - itemHeight / 2 + curveOffset;
+  const radius = containerHeight * diameterRatio / 2;
+  const angle = (index * itemHeight - scrollOffset) / squeeze / Math.max(radius, 1);
+  const clamped = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, angle));
+  const centerTop = (containerHeight - itemHeight) / 2;
+  const translateY = centerTop + radius * Math.sin(clamped);
+  const rotateX = -(clamped * 180) / Math.PI;
+  const scale = Math.max(0.72, Math.min(1, Math.cos(clamped)));
   return {
     translateY,
-    rotateX: Math.max(-85, Math.min(85, rotateX)),
-    scale: Math.max(0.5, Math.min(1, scale)),
-    opacity: Math.max(0.2, Math.min(1, opacity))
+    rotateX,
+    scale,
+    opacity: 1
+  };
+}
+function tokenPx(token, scale) {
+  if (typeof token === "number") return token;
+  const key = String(token).replace(/^\$/, "");
+  const val = (0, import_tamagui.getTokens)()[scale]?.[key]?.val;
+  if (typeof val === "number") return val;
+  return scale === "radius" ? 9 : 8;
+}
+function highlightBandStyle(edges, radiusToken, pointy) {
+  const r = pointy ? 0 : tokenPx(radiusToken, "radius");
+  const inset = tokenPx("$2", "space");
+  const capStart = edges === "all" || edges === "start";
+  const capEnd = edges === "all" || edges === "end";
+  return {
+    borderStartStartRadius: capStart ? r : 0,
+    borderStartEndRadius: capEnd ? r : 0,
+    borderEndStartRadius: capStart ? r : 0,
+    borderEndEndRadius: capEnd ? r : 0,
+    marginInlineStart: capStart ? inset : 0,
+    marginInlineEnd: capEnd ? inset : 0
   };
 }
 function Wheel({
@@ -144,15 +176,27 @@ function Wheel({
   value,
   onChange,
   visibleItems = 5,
-  itemHeight = 40,
+  itemHeight: itemHeightProp,
+  width: widthProp,
   renderItem,
   disabled = false,
-  size = "$4",
-  loop = false
+  size: sizeProp,
+  loop = false,
+  highlightEdges = "all",
+  flex,
+  onItemCross,
+  "aria-label": ariaLabel
 }) {
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  const sizeKnob = knobProps.size ?? "medium";
+  const size = sizeProp ?? wheelFontBySize[sizeKnob] ?? "$8";
+  const itemHeight = itemHeightProp ?? knobProps.nestedControl.px ?? 32;
+  const columnWidth = widthProp ?? defaultColumnWidth;
+  ensureWheelFocusStyles();
+  const motionTransition = knobProps.transition;
+  const snapDurationMs = motionTransition ? transitionDurationsMs[motionTransition] ?? 100 : 0;
   const containerRef = (0, import_react.useRef)(null);
   const [scrollOffset, setScrollOffset] = (0, import_react.useState)(0);
   const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
@@ -162,27 +206,40 @@ function Wheel({
   scrollOffsetRef.current = scrollOffset;
   const animationRef = (0, import_react.useRef)(null);
   const isAnimatingRef = (0, import_react.useRef)(false);
+  const hasMountedRef = (0, import_react.useRef)(false);
+  const selectedIndexRef = (0, import_react.useRef)(selectedIndex);
+  selectedIndexRef.current = selectedIndex;
   const isDraggingRef = (0, import_react.useRef)(false);
   const lastYRef = (0, import_react.useRef)(0);
+  const downYRef = (0, import_react.useRef)(0);
+  const dragDistanceRef = (0, import_react.useRef)(0);
   const lastTimeRef = (0, import_react.useRef)(0);
   const dragVelocitiesRef = (0, import_react.useRef)([]);
   const containerHeight = itemHeight * visibleItems;
   const paddingItems = Math.floor(visibleItems / 2);
   const minOffset = 0;
   const maxOffset = n > 0 ? (n - 1) * itemHeight : 0;
+  const liveDataIndex = n === 0 ? 0 : loopEnabled ? modIndex(Math.round(scrollOffset / itemHeight), n) : Math.max(0, Math.min(Math.round(scrollOffset / itemHeight), n - 1));
+  const lastCrossIndexRef = (0, import_react.useRef)(null);
+  const onItemCrossRef = (0, import_react.useRef)(onItemCross);
+  onItemCrossRef.current = onItemCross;
   (0, import_react.useEffect)(() => {
-    if (value !== void 0) {
-      const index = items.findIndex(item => getItemValue(item) === value);
-      if (index !== -1) {
-        setSelectedIndex(index);
-        const raw = index * itemHeight;
-        setScrollOffset(loop && n > 1 ? equivalentOffsetNear(0, raw, n, itemHeight) : raw);
-      }
+    if (n === 0) return;
+    if (lastCrossIndexRef.current === null) {
+      lastCrossIndexRef.current = liveDataIndex;
+      return;
     }
-  }, [value, items, itemHeight, loop, n]);
+    if (lastCrossIndexRef.current === liveDataIndex) return;
+    lastCrossIndexRef.current = liveDataIndex;
+    const item = items[liveDataIndex];
+    if (item === void 0) return;
+    onItemCrossRef.current?.(getItemValue(item), liveDataIndex);
+    (0, import_haptic.fireSelectionHaptic)();
+  }, [liveDataIndex, items, n]);
   const runSnapComplete = (0, import_react.useCallback)((finalOffset, dataIndex) => {
     const safeIdx = Math.max(0, Math.min(dataIndex, n - 1));
     const settled = loopEnabled && n > 0 ? equivalentOffsetNear(0, finalOffset, n, itemHeight) : finalOffset;
+    scrollOffsetRef.current = settled;
     setScrollOffset(settled);
     setSelectedIndex(safeIdx);
     onChange?.(getItemValue(items[safeIdx]));
@@ -191,18 +248,23 @@ function Wheel({
   const animateToOffset = (0, import_react.useCallback)((targetOffset, dataIndex, animated) => {
     const startOffset = scrollOffsetRef.current;
     const goal = loopEnabled && n > 0 ? equivalentOffsetNear(startOffset, targetOffset, n, itemHeight) : targetOffset;
-    if (!animated) {
+    if (!animated || snapDurationMs <= 0) {
       runSnapComplete(goal, dataIndex);
       return;
     }
     const distance = goal - startOffset;
-    const duration = 300;
+    if (Math.abs(distance) < 0.5) {
+      runSnapComplete(goal, dataIndex);
+      return;
+    }
+    const duration = snapDurationMs;
     const startTime = performance.now();
     const animate = currentTime => {
       const elapsed = currentTime - startTime;
       const progress = Math.min(elapsed / duration, 1);
       const eased = 1 - Math.pow(1 - progress, 3);
       const newOffset = startOffset + distance * eased;
+      scrollOffsetRef.current = newOffset;
       setScrollOffset(newOffset);
       if (progress < 1) {
         animationRef.current = requestAnimationFrame(animate);
@@ -213,7 +275,7 @@ function Wheel({
     isAnimatingRef.current = true;
     if (animationRef.current) cancelAnimationFrame(animationRef.current);
     animationRef.current = requestAnimationFrame(animate);
-  }, [loopEnabled, n, itemHeight, runSnapComplete]);
+  }, [loopEnabled, n, itemHeight, runSnapComplete, snapDurationMs]);
   const snapToIndex = (0, import_react.useCallback)((targetIndex, animated = true) => {
     if (n === 0) return;
     const clampedData = Math.max(0, Math.min(targetIndex, n - 1));
@@ -228,6 +290,28 @@ function Wheel({
     const dataIdx = modIndex(targetR, n);
     animateToOffset(targetOffset, dataIdx, animated);
   }, [n, itemHeight, loopEnabled, animateToOffset]);
+  (0, import_react.useEffect)(() => {
+    if (value === void 0) return;
+    const index = items.findIndex(item => getItemValue(item) === value);
+    if (index === -1) return;
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      setSelectedIndex(index);
+      const raw = index * itemHeight;
+      const settled = loopEnabled && n > 1 ? equivalentOffsetNear(0, raw, n, itemHeight) : raw;
+      scrollOffsetRef.current = settled;
+      setScrollOffset(settled);
+      return;
+    }
+    if (isDraggingRef.current) {
+      setSelectedIndex(index);
+      return;
+    }
+    if (index === selectedIndexRef.current && !isAnimatingRef.current) {
+      return;
+    }
+    snapToIndex(index, true);
+  }, [value, items, itemHeight, loopEnabled, n, snapToIndex]);
   const snapToNearestRow = (0, import_react.useCallback)((animated = true) => {
     if (n === 0) return;
     const r = Math.round(scrollOffsetRef.current / itemHeight);
@@ -240,7 +324,32 @@ function Wheel({
       animateToOffset(dataIdx * itemHeight, dataIdx, animated);
     }
   }, [n, itemHeight, loopEnabled, animateToOffset]);
+  const hitTestDataIndex = (0, import_react.useCallback)(tapY => {
+    if (n === 0) return null;
+    const offset = scrollOffsetRef.current;
+    const centerRow = Math.round(offset / itemHeight);
+    const rowBuffer = paddingItems + 5;
+    let best = null;
+    for (let vr = centerRow - rowBuffer; vr <= centerRow + rowBuffer; vr++) {
+      if (!loopEnabled && (vr < 0 || vr >= n)) continue;
+      const dataIndex = loopEnabled ? modIndex(vr, n) : vr;
+      const {
+        translateY
+      } = getItemTransform(vr, offset, itemHeight, containerHeight);
+      const dist = Math.abs(translateY + itemHeight / 2 - tapY);
+      if (!best || dist < best.dist) best = {
+        dataIndex,
+        dist
+      };
+    }
+    if (best && best.dist <= itemHeight) return best.dataIndex;
+    return null;
+  }, [n, itemHeight, paddingItems, loopEnabled, containerHeight]);
   const startMomentum = (0, import_react.useCallback)(initialVelocity => {
+    if (snapDurationMs <= 0) {
+      snapToNearestRow(false);
+      return;
+    }
     let velocity = initialVelocity * momentumMultiplier;
     let offset = scrollOffsetRef.current;
     const animate = () => {
@@ -255,18 +364,18 @@ function Wheel({
           velocity *= 0.5;
         }
       }
+      scrollOffsetRef.current = offset;
       setScrollOffset(offset);
       if (Math.abs(velocity) > minVelocity) {
         animationRef.current = requestAnimationFrame(animate);
       } else {
-        scrollOffsetRef.current = offset;
         snapToNearestRow(true);
       }
     };
     isAnimatingRef.current = true;
     if (animationRef.current) cancelAnimationFrame(animationRef.current);
     animationRef.current = requestAnimationFrame(animate);
-  }, [loopEnabled, minOffset, maxOffset, containerHeight, itemHeight, snapToNearestRow]);
+  }, [loopEnabled, minOffset, maxOffset, containerHeight, snapToNearestRow, snapDurationMs]);
   const handlePointerDown = (0, import_react.useCallback)(e => {
     if (disabled) return;
     if (animationRef.current) {
@@ -275,10 +384,13 @@ function Wheel({
     }
     isDraggingRef.current = true;
     lastYRef.current = e.clientY;
+    downYRef.current = e.clientY;
+    dragDistanceRef.current = 0;
     lastTimeRef.current = performance.now();
     dragVelocitiesRef.current = [];
     if (import_tamagui.isWeb && containerRef.current) {
       containerRef.current.setPointerCapture(e.pointerId);
+      containerRef.current.style.cursor = "grabbing";
     }
   }, [disabled]);
   const handlePointerMove = (0, import_react.useCallback)(e => {
@@ -287,6 +399,7 @@ function Wheel({
     const currentTime = performance.now();
     const deltaY = lastYRef.current - currentY;
     const deltaTime = currentTime - lastTimeRef.current;
+    dragDistanceRef.current += Math.abs(deltaY);
     if (deltaTime > 0) {
       const velocity = deltaY / deltaTime * 16;
       dragVelocitiesRef.current.push(velocity);
@@ -311,7 +424,20 @@ function Wheel({
     if (!isDraggingRef.current) return;
     isDraggingRef.current = false;
     if (import_tamagui.isWeb && containerRef.current) {
-      containerRef.current.releasePointerCapture(e.pointerId);
+      try {
+        containerRef.current.releasePointerCapture(e.pointerId);
+      } catch {}
+      containerRef.current.style.cursor = disabled ? "not-allowed" : "grab";
+    }
+    if (dragDistanceRef.current < tapSlopPx) {
+      const localY = e.locationY;
+      const rect = containerRef.current?.getBoundingClientRect();
+      const tapY = typeof localY === "number" ? localY : e.clientY - (rect?.top ?? 0);
+      const tapped = hitTestDataIndex(tapY);
+      if (tapped != null) {
+        snapToIndex(tapped, true);
+        return;
+      }
     }
     const velocities = dragVelocitiesRef.current;
     if (velocities.length > 0) {
@@ -324,7 +450,52 @@ function Wheel({
     } else {
       snapToNearestRow(true);
     }
-  }, [snapToNearestRow, startMomentum]);
+  }, [snapToNearestRow, startMomentum, hitTestDataIndex, snapToIndex, disabled]);
+  const disabledRef = (0, import_react.useRef)(disabled);
+  disabledRef.current = disabled;
+  const pointerDownRef = (0, import_react.useRef)(handlePointerDown);
+  pointerDownRef.current = handlePointerDown;
+  const pointerMoveRef = (0, import_react.useRef)(handlePointerMove);
+  pointerMoveRef.current = handlePointerMove;
+  const pointerUpRef = (0, import_react.useRef)(handlePointerUp);
+  pointerUpRef.current = handlePointerUp;
+  const panResponder = (0, import_react.useMemo)(() => {
+    if (import_tamagui.isWeb) return {
+      panHandlers: {}
+    };
+    return import_react_native.PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: (_, gesture) => Math.abs(gesture.dy) > 1,
+      onPanResponderTerminationRequest: () => false,
+      onShouldBlockNativeResponder: () => true,
+      onPanResponderGrant: evt => {
+        pointerDownRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1
+        });
+      },
+      onPanResponderMove: evt => {
+        pointerMoveRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1
+        });
+      },
+      onPanResponderRelease: evt => {
+        pointerUpRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1,
+          locationY: evt.nativeEvent.locationY
+        });
+      },
+      onPanResponderTerminate: evt => {
+        pointerUpRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1,
+          locationY: evt.nativeEvent.locationY
+        });
+      }
+    });
+  }, []);
   const handleWheel = (0, import_react.useCallback)(e => {
     if (disabled) return;
     e.preventDefault();
@@ -342,6 +513,7 @@ function Wheel({
         newOffset = maxOffset;
       }
     }
+    scrollOffsetRef.current = newOffset;
     setScrollOffset(newOffset);
     if (animationRef.current) cancelAnimationFrame(animationRef.current);
     animationRef.current = requestAnimationFrame(() => {
@@ -351,7 +523,7 @@ function Wheel({
         }
       }, 100);
     });
-  }, [disabled, loopEnabled, minOffset, maxOffset, itemHeight, snapToNearestRow]);
+  }, [disabled, loopEnabled, minOffset, maxOffset, snapToNearestRow]);
   const handleKeyDown = (0, import_react.useCallback)(e => {
     if (disabled) return;
     let delta = 0;
@@ -435,44 +607,67 @@ function Wheel({
       };
     });
   }, [n, loopEnabled, scrollOffset, itemHeight, paddingItems, containerHeight]);
+  const itemColor = isSelected => disabled ? "$color10" : isSelected ? "$color12" : "$color11";
+  const radiusToken = knobProps.borderRadius.borderRadius;
+  const highlightStyle = highlightBandStyle(highlightEdges, radiusToken, Boolean(knobProps.pointy));
+  const highlightSmoothClass = "className" in knobProps.borderRadius && typeof knobProps.borderRadius.className === "string" ? knobProps.borderRadius.className : void 0;
+  const renderItemNode = (dataIndex, isSelected) => {
+    const item = items[dataIndex];
+    const itemValue = getItemValue(item);
+    if (renderItem) return renderItem(itemValue, dataIndex, isSelected);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...knobProps.body,
+      fontSize: size,
+      fontWeight: isSelected && !disabled ? "600" : "400",
+      color: itemColor(isSelected),
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      maxWidth: "100%",
+      paddingHorizontal: "$2",
+      children: getItemLabel(item)
+    });
+  };
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(WheelContainer, {
     height: containerHeight,
-    opacity: disabled ? 0.5 : 1,
+    width: flex ? "100%" : columnWidth,
+    minWidth: flex ? 0 : columnWidth,
+    flex,
     ...knobProps.containerRadius,
     "data-testid": "wheel",
+    "data-disabled": disabled ? true : void 0,
+    "aria-disabled": disabled || void 0,
+    opacity: 1,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectionIndicator, {
+      className: highlightSmoothClass,
+      backgroundColor: "$color4",
       top: paddingItems * itemHeight,
-      height: itemHeight
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(FadeOverlay, {
-      edge: "top",
-      height: paddingItems * itemHeight,
-      ...(import_tamagui.isWeb ? {
-        style: {
-          background: "linear-gradient(to bottom, var(--background) 0%, transparent 100%)"
-        }
-      } : {})
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(FadeOverlay, {
-      edge: "bottom",
-      height: paddingItems * itemHeight,
-      ...(import_tamagui.isWeb ? {
-        style: {
-          background: "linear-gradient(to top, var(--background) 0%, transparent 100%)"
-        }
-      } : {})
+      height: itemHeight,
+      style: highlightStyle,
+      "data-testid": "wheel-selection"
     }), import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
       ref: containerRef,
+      className: "mp1-wheel-wrapper",
       tabIndex: disabled ? -1 : 0,
+      role: "slider",
+      "aria-label": ariaLabel ?? (0, import_t.t)("Value picker"),
+      "aria-orientation": "vertical",
+      "aria-valuemin": 0,
+      "aria-valuemax": Math.max(0, n - 1),
+      "aria-valuenow": selectedIndex,
+      "aria-valuetext": items[selectedIndex] !== void 0 ? getItemLabel(items[selectedIndex]) : void 0,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? true : void 0,
       style: {
         width: "100%",
         height: containerHeight,
         position: "relative",
-        perspective: "1000px",
+        perspective: `${perspectivePx}px`,
         perspectiveOrigin: "center center",
         overflow: "hidden",
         userSelect: "none",
         touchAction: "none",
-        cursor: "grab",
-        outline: "none"
+        cursor: disabled ? "not-allowed" : "grab",
+        ...wheelMaskStyle
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -484,16 +679,13 @@ function Wheel({
         virtualRow,
         dataIndex
       }) => {
-        const item = items[dataIndex];
-        const isSelected = dataIndex === selectedIndex;
-        const itemValue = getItemValue(item);
+        const isSelected = dataIndex === liveDataIndex;
         const transform = getItemTransform(virtualRow, scrollOffset, itemHeight, containerHeight);
         if (Math.abs(transform.rotateX) > 85) return null;
-        const rowKey = loopEnabled ? `${dataIndex}-${virtualRow}` : String(itemValue);
         return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
           "data-testid": "wheel-item",
           "data-index": dataIndex,
-          "data-selected": isSelected,
+          "data-selected": isSelected ? true : void 0,
           "aria-hidden": isSelected ? void 0 : true,
           style: {
             position: "absolute",
@@ -510,34 +702,26 @@ function Wheel({
             transformStyle: "preserve-3d",
             backfaceVisibility: "hidden"
           },
-          children: renderItem ? renderItem(itemValue, dataIndex, isSelected) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            ...knobProps.body,
-            fontSize: size,
-            fontWeight: isSelected ? "600" : "400",
-            color: isSelected ? "$color12" : "$color11",
-            children: getItemLabel(item)
-          })
-        }, rowKey);
+          children: renderItemNode(dataIndex, isSelected)
+        }, `${dataIndex}-${virtualRow}`);
       })
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
       width: "100%",
       height: containerHeight,
       position: "relative",
       overflow: "hidden",
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onPointerCancel: handlePointerUp,
-      children: renderRows.map(({
+      cursor: disabled ? "not-allowed" : "grab",
+      "data-testid": "wheel-wrapper",
+      "data-disabled": disabled ? true : void 0,
+      "aria-disabled": disabled || void 0,
+      ...panResponder.panHandlers,
+      children: [renderRows.map(({
         virtualRow,
         dataIndex
       }) => {
-        const item = items[dataIndex];
-        const isSelected = dataIndex === selectedIndex;
-        const itemValue = getItemValue(item);
+        const isSelected = dataIndex === liveDataIndex;
         const transform = getItemTransform(virtualRow, scrollOffset, itemHeight, containerHeight);
         if (Math.abs(transform.rotateX) > 85) return null;
-        const rowKey = loopEnabled ? `${dataIndex}-${virtualRow}` : String(itemValue);
         return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           position: "absolute",
           left: 0,
@@ -549,15 +733,15 @@ function Wheel({
           pointerEvents: "none",
           y: transform.translateY,
           scale: transform.scale,
-          children: renderItem ? renderItem(itemValue, dataIndex, isSelected) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            ...knobProps.body,
-            fontSize: size,
-            fontWeight: isSelected ? "600" : "400",
-            color: isSelected ? "$color12" : "$color11",
-            children: getItemLabel(item)
-          })
-        }, rowKey);
-      })
+          rotateX: `${transform.rotateX}deg`,
+          "data-testid": "wheel-item",
+          "data-index": dataIndex,
+          "data-selected": isSelected ? true : void 0,
+          children: renderItemNode(dataIndex, isSelected)
+        }, `${dataIndex}-${virtualRow}`);
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_WheelEdgeFade.WheelEdgeFade, {
+        height: paddingItems * itemHeight
+      })]
     })]
   });
 }