@multiplatform.one/forms 7.4.1 → 7.5.0

package/dist/cjs/Wheel/index.native.js

@@ -29,8 +29,12 @@ __export(Wheel_exports, {
 module.exports = __toCommonJS(Wheel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_react_native = require("react-native");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
+var import_t = require("../shared/t.native.js");
+var import_haptic = require("./haptic.native.js");
+var import_WheelEdgeFade = require("./WheelEdgeFade.native.js");
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
@@ -40,12 +44,44 @@ var friction = 0.95;
 var minVelocity = 0.5;
 var momentumMultiplier = 0.8;
 var rubberBandConstant = 0.55;
+var tapSlopPx = 8;
+var diameterRatio = 1.07;
+var squeeze = 1.45;
+var perspectivePx = 400;
+var defaultColumnWidth = 88;
+var wheelFontBySize = {
+  small: "$6",
+  medium: "$8",
+  large: "$9"
+};
+var transitionDurationsMs = {
+  bouncy: 200,
+  lazy: 600,
+  slow: 500,
+  medium: 250,
+  quick: 100,
+  tooltip: 400,
+  snappy: 80,
+  gentle: 450
+};
+var 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;
+  var 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);
+}
+var 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;
 var WheelContainer = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "Wheel",
   position: "relative",
   overflow: "hidden",
-  userSelect: "none",
-  width: 80
+  userSelect: "none"
 });
 var WheelItemContainer = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "WheelItem",
@@ -61,30 +97,8 @@ var 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"
 });
-var 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 === "undefined" ? "undefined" : _type_of(item)) === "object" && item !== null && "value" in item) {
     return item;
@@ -130,20 +144,40 @@ function rubberBand(offset, dimension) {
   return offset < 0 ? -result : result;
 }
 function getItemTransform(index, scrollOffset, itemHeight, containerHeight) {
-  var centerY = containerHeight / 2;
-  var itemCenterY = index * itemHeight + itemHeight / 2 - scrollOffset + (containerHeight - itemHeight) / 2;
-  var distanceFromCenter = itemCenterY - centerY;
-  var normalizedDistance = distanceFromCenter / (containerHeight / 2);
-  var rotateX = normalizedDistance * -70;
-  var scale = 1 - Math.abs(normalizedDistance) * 0.3;
-  var opacity = 1 - Math.abs(normalizedDistance) * 0.35;
-  var curveOffset = Math.abs(normalizedDistance) * normalizedDistance * itemHeight * 0.5;
-  var translateY = itemCenterY - itemHeight / 2 + curveOffset;
+  var radius = containerHeight * diameterRatio / 2;
+  var angle = (index * itemHeight - scrollOffset) / squeeze / Math.max(radius, 1);
+  var clamped = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, angle));
+  var centerTop = (containerHeight - itemHeight) / 2;
+  var translateY = centerTop + radius * Math.sin(clamped);
+  var rotateX = -(clamped * 180) / Math.PI;
+  var 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) {
+  var _getTokens_scale_key, _getTokens_scale;
+  if (typeof token === "number") return token;
+  var key = String(token).replace(/^\$/, "");
+  var val = (_getTokens_scale = (0, import_tamagui.getTokens)()[scale]) === null || _getTokens_scale === void 0 ? void 0 : (_getTokens_scale_key = _getTokens_scale[key]) === null || _getTokens_scale_key === void 0 ? void 0 : _getTokens_scale_key.val;
+  if (typeof val === "number") return val;
+  return scale === "radius" ? 9 : 8;
+}
+function highlightBandStyle(edges, radiusToken, pointy) {
+  var r = pointy ? 0 : tokenPx(radiusToken, "radius");
+  var inset = tokenPx("$2", "space");
+  var capStart = edges === "all" || edges === "start";
+  var 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(param) {
@@ -152,15 +186,28 @@ function Wheel(param) {
     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
   } = param;
+  var _knobProps_size, _ref, _ref1, _transitionDurationsMs_motionTransition;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
+  var sizeKnob = (_knobProps_size = knobProps.size) !== null && _knobProps_size !== void 0 ? _knobProps_size : "medium";
+  var size = (_ref = sizeProp !== null && sizeProp !== void 0 ? sizeProp : wheelFontBySize[sizeKnob]) !== null && _ref !== void 0 ? _ref : "$8";
+  var itemHeight = (_ref1 = itemHeightProp !== null && itemHeightProp !== void 0 ? itemHeightProp : knobProps.nestedControl.px) !== null && _ref1 !== void 0 ? _ref1 : 32;
+  var columnWidth = widthProp !== null && widthProp !== void 0 ? widthProp : defaultColumnWidth;
+  ensureWheelFocusStyles();
+  var motionTransition = knobProps.transition;
+  var snapDurationMs = motionTransition ? (_transitionDurationsMs_motionTransition = transitionDurationsMs[motionTransition]) !== null && _transitionDurationsMs_motionTransition !== void 0 ? _transitionDurationsMs_motionTransition : 100 : 0;
   var containerRef = (0, import_react.useRef)(null);
   var [scrollOffset, setScrollOffset] = (0, import_react.useState)(0);
   var [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
@@ -170,29 +217,41 @@ function Wheel(param) {
   scrollOffsetRef.current = scrollOffset;
   var animationRef = (0, import_react.useRef)(null);
   var isAnimatingRef = (0, import_react.useRef)(false);
+  var hasMountedRef = (0, import_react.useRef)(false);
+  var selectedIndexRef = (0, import_react.useRef)(selectedIndex);
+  selectedIndexRef.current = selectedIndex;
   var isDraggingRef = (0, import_react.useRef)(false);
   var lastYRef = (0, import_react.useRef)(0);
+  var downYRef = (0, import_react.useRef)(0);
+  var dragDistanceRef = (0, import_react.useRef)(0);
   var lastTimeRef = (0, import_react.useRef)(0);
   var dragVelocitiesRef = (0, import_react.useRef)([]);
   var containerHeight = itemHeight * visibleItems;
   var paddingItems = Math.floor(visibleItems / 2);
   var minOffset = 0;
   var maxOffset = n > 0 ? (n - 1) * itemHeight : 0;
+  var liveDataIndex = n === 0 ? 0 : loopEnabled ? modIndex(Math.round(scrollOffset / itemHeight), n) : Math.max(0, Math.min(Math.round(scrollOffset / itemHeight), n - 1));
+  var lastCrossIndexRef = (0, import_react.useRef)(null);
+  var onItemCrossRef = (0, import_react.useRef)(onItemCross);
+  onItemCrossRef.current = onItemCross;
   (0, import_react.useEffect)(function () {
-    if (value !== void 0) {
-      var index = items.findIndex(function (item) {
-        return getItemValue(item) === value;
-      });
-      if (index !== -1) {
-        setSelectedIndex(index);
-        var raw = index * itemHeight;
-        setScrollOffset(loop && n > 1 ? equivalentOffsetNear(0, raw, n, itemHeight) : raw);
-      }
+    var _onItemCrossRef_current;
+    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;
+    var item = items[liveDataIndex];
+    if (item === void 0) return;
+    (_onItemCrossRef_current = onItemCrossRef.current) === null || _onItemCrossRef_current === void 0 ? void 0 : _onItemCrossRef_current.call(onItemCrossRef, getItemValue(item), liveDataIndex);
+    (0, import_haptic.fireSelectionHaptic)();
+  }, [liveDataIndex, items, n]);
   var runSnapComplete = (0, import_react.useCallback)(function (finalOffset, dataIndex) {
     var safeIdx = Math.max(0, Math.min(dataIndex, n - 1));
     var settled = loopEnabled && n > 0 ? equivalentOffsetNear(0, finalOffset, n, itemHeight) : finalOffset;
+    scrollOffsetRef.current = settled;
     setScrollOffset(settled);
     setSelectedIndex(safeIdx);
     onChange === null || onChange === void 0 ? void 0 : onChange(getItemValue(items[safeIdx]));
@@ -201,18 +260,23 @@ function Wheel(param) {
   var animateToOffset = (0, import_react.useCallback)(function (targetOffset, dataIndex, animated) {
     var startOffset = scrollOffsetRef.current;
     var goal = loopEnabled && n > 0 ? equivalentOffsetNear(startOffset, targetOffset, n, itemHeight) : targetOffset;
-    if (!animated) {
+    if (!animated || snapDurationMs <= 0) {
       runSnapComplete(goal, dataIndex);
       return;
     }
     var distance = goal - startOffset;
-    var duration = 300;
+    if (Math.abs(distance) < 0.5) {
+      runSnapComplete(goal, dataIndex);
+      return;
+    }
+    var duration = snapDurationMs;
     var startTime = performance.now();
     var animate = function animate1(currentTime) {
       var elapsed = currentTime - startTime;
       var progress = Math.min(elapsed / duration, 1);
       var eased = 1 - Math.pow(1 - progress, 3);
       var newOffset = startOffset + distance * eased;
+      scrollOffsetRef.current = newOffset;
       setScrollOffset(newOffset);
       if (progress < 1) {
         animationRef.current = requestAnimationFrame(animate);
@@ -223,7 +287,7 @@ function Wheel(param) {
     isAnimatingRef.current = true;
     if (animationRef.current) cancelAnimationFrame(animationRef.current);
     animationRef.current = requestAnimationFrame(animate);
-  }, [loopEnabled, n, itemHeight, runSnapComplete]);
+  }, [loopEnabled, n, itemHeight, runSnapComplete, snapDurationMs]);
   var snapToIndex = (0, import_react.useCallback)(function (targetIndex) {
     var animated = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
     if (n === 0) return;
@@ -239,6 +303,30 @@ function Wheel(param) {
     var dataIdx = modIndex(targetR, n);
     animateToOffset(targetOffset1, dataIdx, animated);
   }, [n, itemHeight, loopEnabled, animateToOffset]);
+  (0, import_react.useEffect)(function () {
+    if (value === void 0) return;
+    var index = items.findIndex(function (item) {
+      return getItemValue(item) === value;
+    });
+    if (index === -1) return;
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      setSelectedIndex(index);
+      var raw = index * itemHeight;
+      var 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]);
   var snapToNearestRow = (0, import_react.useCallback)(function () {
     var animated = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
     if (n === 0) return;
@@ -252,7 +340,32 @@ function Wheel(param) {
       animateToOffset(dataIdx1 * itemHeight, dataIdx1, animated);
     }
   }, [n, itemHeight, loopEnabled, animateToOffset]);
+  var hitTestDataIndex = (0, import_react.useCallback)(function (tapY) {
+    if (n === 0) return null;
+    var offset = scrollOffsetRef.current;
+    var centerRow = Math.round(offset / itemHeight);
+    var rowBuffer = paddingItems + 5;
+    var best = null;
+    for (var vr = centerRow - rowBuffer; vr <= centerRow + rowBuffer; vr++) {
+      if (!loopEnabled && (vr < 0 || vr >= n)) continue;
+      var dataIndex = loopEnabled ? modIndex(vr, n) : vr;
+      var {
+        translateY
+      } = getItemTransform(vr, offset, itemHeight, containerHeight);
+      var 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]);
   var startMomentum = (0, import_react.useCallback)(function (initialVelocity) {
+    if (snapDurationMs <= 0) {
+      snapToNearestRow(false);
+      return;
+    }
     var velocity = initialVelocity * momentumMultiplier;
     var offset = scrollOffsetRef.current;
     var animate = function animate1() {
@@ -267,18 +380,18 @@ function Wheel(param) {
           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]);
   var handlePointerDown = (0, import_react.useCallback)(function (e) {
     if (disabled) return;
     if (animationRef.current) {
@@ -287,10 +400,13 @@ function Wheel(param) {
     }
     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]);
   var handlePointerMove = (0, import_react.useCallback)(function (e) {
@@ -299,6 +415,7 @@ function Wheel(param) {
     var currentTime = performance.now();
     var deltaY = lastYRef.current - currentY;
     var deltaTime = currentTime - lastTimeRef.current;
+    dragDistanceRef.current += Math.abs(deltaY);
     if (deltaTime > 0) {
       var velocity = deltaY / deltaTime * 16;
       dragVelocitiesRef.current.push(velocity);
@@ -323,7 +440,22 @@ function Wheel(param) {
     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 (unused) {}
+      containerRef.current.style.cursor = disabled ? "not-allowed" : "grab";
+    }
+    if (dragDistanceRef.current < tapSlopPx) {
+      var _ref2;
+      var _containerRef_current;
+      var localY = e.locationY;
+      var rect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect();
+      var tapY = typeof localY === "number" ? localY : e.clientY - ((_ref2 = rect === null || rect === void 0 ? void 0 : rect.top) !== null && _ref2 !== void 0 ? _ref2 : 0);
+      var tapped = hitTestDataIndex(tapY);
+      if (tapped != null) {
+        snapToIndex(tapped, true);
+        return;
+      }
     }
     var velocities = dragVelocitiesRef.current;
     if (velocities.length > 0) {
@@ -338,7 +470,60 @@ function Wheel(param) {
     } else {
       snapToNearestRow(true);
     }
-  }, [snapToNearestRow, startMomentum]);
+  }, [snapToNearestRow, startMomentum, hitTestDataIndex, snapToIndex, disabled]);
+  var disabledRef = (0, import_react.useRef)(disabled);
+  disabledRef.current = disabled;
+  var pointerDownRef = (0, import_react.useRef)(handlePointerDown);
+  pointerDownRef.current = handlePointerDown;
+  var pointerMoveRef = (0, import_react.useRef)(handlePointerMove);
+  pointerMoveRef.current = handlePointerMove;
+  var pointerUpRef = (0, import_react.useRef)(handlePointerUp);
+  pointerUpRef.current = handlePointerUp;
+  var panResponder = (0, import_react.useMemo)(function () {
+    if (import_tamagui.isWeb) return {
+      panHandlers: {}
+    };
+    return import_react_native.PanResponder.create({
+      onStartShouldSetPanResponder: function onStartShouldSetPanResponder() {
+        return !disabledRef.current;
+      },
+      onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder(_, gesture) {
+        return Math.abs(gesture.dy) > 1;
+      },
+      onPanResponderTerminationRequest: function onPanResponderTerminationRequest() {
+        return false;
+      },
+      onShouldBlockNativeResponder: function onShouldBlockNativeResponder() {
+        return true;
+      },
+      onPanResponderGrant: function onPanResponderGrant(evt) {
+        pointerDownRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1
+        });
+      },
+      onPanResponderMove: function onPanResponderMove(evt) {
+        pointerMoveRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1
+        });
+      },
+      onPanResponderRelease: function onPanResponderRelease(evt) {
+        pointerUpRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1,
+          locationY: evt.nativeEvent.locationY
+        });
+      },
+      onPanResponderTerminate: function onPanResponderTerminate(evt) {
+        pointerUpRef.current({
+          clientY: evt.nativeEvent.pageY,
+          pointerId: 1,
+          locationY: evt.nativeEvent.locationY
+        });
+      }
+    });
+  }, []);
   var handleWheel = (0, import_react.useCallback)(function (e) {
     if (disabled) return;
     e.preventDefault();
@@ -356,6 +541,7 @@ function Wheel(param) {
         newOffset = maxOffset;
       }
     }
+    scrollOffsetRef.current = newOffset;
     setScrollOffset(newOffset);
     if (animationRef.current) cancelAnimationFrame(animationRef.current);
     animationRef.current = requestAnimationFrame(function () {
@@ -365,7 +551,7 @@ function Wheel(param) {
         }
       }, 100);
     });
-  }, [disabled, loopEnabled, minOffset, maxOffset, itemHeight, snapToNearestRow]);
+  }, [disabled, loopEnabled, minOffset, maxOffset, snapToNearestRow]);
   var handleKeyDown = (0, import_react.useCallback)(function (e) {
     if (disabled) return;
     var delta = 0;
@@ -451,47 +637,71 @@ function Wheel(param) {
       };
     });
   }, [n, loopEnabled, scrollOffset, itemHeight, paddingItems, containerHeight]);
+  var itemColor = function itemColor2(isSelected) {
+    return disabled ? "$color10" : isSelected ? "$color12" : "$color11";
+  };
+  var radiusToken = knobProps.borderRadius.borderRadius;
+  var highlightStyle = highlightBandStyle(highlightEdges, radiusToken, Boolean(knobProps.pointy));
+  var highlightSmoothClass = "className" in knobProps.borderRadius && typeof knobProps.borderRadius.className === "string" ? knobProps.borderRadius.className : void 0;
+  var renderItemNode = function renderItemNode2(dataIndex, isSelected) {
+    var item = items[dataIndex];
+    var 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",
-    children: [/* Selection indicator */
+    "data-disabled": disabled ? true : void 0,
+    "aria-disabled": disabled || void 0,
+    opacity: 1,
+    children: [/* iOS 14+ selection fill — LC-71 selected=fill, never hairline borders */
     /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectionIndicator, {
+      className: highlightSmoothClass,
+      backgroundColor: "$color4",
       top: paddingItems * itemHeight,
-      height: itemHeight
-    }), /* Fade overlays for 3D depth effect */
-    /* @__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"
     }), /* Interactive container */
     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 !== null && ariaLabel !== void 0 ? 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,
@@ -504,16 +714,13 @@ function Wheel(param) {
           virtualRow,
           dataIndex
         } = param2;
-        var item = items[dataIndex];
-        var isSelected = dataIndex === selectedIndex;
-        var itemValue = getItemValue(item);
+        var isSelected = dataIndex === liveDataIndex;
         var transform = getItemTransform(virtualRow, scrollOffset, itemHeight, containerHeight);
         if (Math.abs(transform.rotateX) > 85) return null;
-        var 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",
@@ -530,35 +737,27 @@ function Wheel(param) {
             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(function (param2) {
+      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(function (param2) {
         var {
           virtualRow,
           dataIndex
         } = param2;
-        var item = items[dataIndex];
-        var isSelected = dataIndex === selectedIndex;
-        var itemValue = getItemValue(item);
+        var isSelected = dataIndex === liveDataIndex;
         var transform = getItemTransform(virtualRow, scrollOffset, itemHeight, containerHeight);
         if (Math.abs(transform.rotateX) > 85) return null;
-        var rowKey = loopEnabled ? `${dataIndex}-${virtualRow}` : String(itemValue);
         return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           position: "absolute",
           left: 0,
@@ -570,15 +769,15 @@ function Wheel(param) {
           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
+      })]
     })]
   });
 }