@multiplatform.one/components 7.4.1 → 7.6.0

package/dist/esm/Wheel/index.mjs

@@ -1,655 +1,3 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "../shared/i18n.mjs";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { View, getTokens, isWeb, styled, Text } from "tamagui";
-import { jsx, jsxs } from "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 (!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 = 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 = styled(View, {
-  name: "Wheel",
-  position: "relative",
-  overflow: "hidden",
-  userSelect: "none"
-});
-const WheelItemContainer = styled(View, {
-  name: "WheelItem",
-  position: "absolute",
-  left: 0,
-  right: 0,
-  alignItems: "center",
-  justifyContent: "center",
-  userSelect: "none"
-});
-const SelectionIndicator = styled(View, {
-  name: "WheelSelectionIndicator",
-  position: "absolute",
-  left: 0,
-  right: 0,
-  pointerEvents: "none"
-});
-function normalizeItem(item) {
-  if (typeof item === "object" && item !== null && "value" in item) {
-    return item;
-  }
-  return {
-    value: item,
-    label: String(item)
-  };
-}
-function getItemLabel(item) {
-  const normalized = normalizeItem(item);
-  return normalized.label ?? String(normalized.value);
-}
-function getItemValue(item) {
-  const normalized = normalizeItem(item);
-  return normalized.value;
-}
-function modIndex(row, n) {
-  if (n <= 0) return 0;
-  return (row % n + n) % n;
-}
-function equivalentOffsetNear(referenceOffset, targetOffset, n, itemHeight) {
-  if (n <= 0 || itemHeight <= 0) return targetOffset;
-  const rT = Math.round(targetOffset / itemHeight);
-  const m = modIndex(rT, n);
-  const span = n * itemHeight;
-  const base = m * itemHeight;
-  const k = Math.round((referenceOffset - base) / span);
-  return base + k * span;
-}
-function nearestRowForDataIndex(currentRow, targetDataIndex, n) {
-  const currentMod = modIndex(currentRow, n);
-  let delta = targetDataIndex - currentMod;
-  if (delta > n / 2) delta -= n;
-  if (delta < -n / 2) delta += n;
-  return currentRow + delta;
-}
-function rubberBand(offset, dimension) {
-  const c = rubberBandConstant;
-  const x = Math.abs(offset);
-  const result = x * dimension * c / (dimension + c * x);
-  return offset < 0 ? -result : result;
-}
-function getItemTransform(index, scrollOffset, itemHeight, containerHeight) {
-  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,
-    scale,
-    opacity: 1
-  };
-}
-function tokenPx(token, scale) {
-  if (typeof token === "number") return token;
-  const key = String(token).replace(/^\$/, "");
-  const val = 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({
-  items,
-  value,
-  onChange,
-  visibleItems = 5,
-  itemHeight: itemHeightProp,
-  width: widthProp,
-  renderItem,
-  disabled = false,
-  size: sizeProp,
-  loop = false,
-  highlightEdges = "all",
-  "aria-label": ariaLabel
-}) {
-  const {
-    t
-  } = useTranslation();
-  const {
-    knobProps
-  } = 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 = useRef(null);
-  const [scrollOffset, setScrollOffset] = useState(0);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const n = items.length;
-  const loopEnabled = Boolean(loop && n > 1);
-  const scrollOffsetRef = useRef(scrollOffset);
-  scrollOffsetRef.current = scrollOffset;
-  const animationRef = useRef(null);
-  const isAnimatingRef = useRef(false);
-  const hasMountedRef = useRef(false);
-  const selectedIndexRef = useRef(selectedIndex);
-  selectedIndexRef.current = selectedIndex;
-  const isDraggingRef = useRef(false);
-  const lastYRef = useRef(0);
-  const downYRef = useRef(0);
-  const dragDistanceRef = useRef(0);
-  const lastTimeRef = useRef(0);
-  const dragVelocitiesRef = 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 runSnapComplete = 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]));
-    isAnimatingRef.current = false;
-  }, [items, n, onChange, loopEnabled, itemHeight]);
-  const animateToOffset = useCallback((targetOffset, dataIndex, animated) => {
-    const startOffset = scrollOffsetRef.current;
-    const goal = loopEnabled && n > 0 ? equivalentOffsetNear(startOffset, targetOffset, n, itemHeight) : targetOffset;
-    if (!animated || snapDurationMs <= 0) {
-      runSnapComplete(goal, dataIndex);
-      return;
-    }
-    const distance = goal - startOffset;
-    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);
-      } else {
-        runSnapComplete(goal, dataIndex);
-      }
-    };
-    isAnimatingRef.current = true;
-    if (animationRef.current) cancelAnimationFrame(animationRef.current);
-    animationRef.current = requestAnimationFrame(animate);
-  }, [loopEnabled, n, itemHeight, runSnapComplete, snapDurationMs]);
-  const snapToIndex = useCallback((targetIndex, animated = true) => {
-    if (n === 0) return;
-    const clampedData = Math.max(0, Math.min(targetIndex, n - 1));
-    if (!loopEnabled) {
-      const targetOffset2 = clampedData * itemHeight;
-      animateToOffset(targetOffset2, clampedData, animated);
-      return;
-    }
-    const currentR = Math.round(scrollOffsetRef.current / itemHeight);
-    const targetR = nearestRowForDataIndex(currentR, clampedData, n);
-    const targetOffset = targetR * itemHeight;
-    const dataIdx = modIndex(targetR, n);
-    animateToOffset(targetOffset, dataIdx, animated);
-  }, [n, itemHeight, loopEnabled, animateToOffset]);
-  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 = useCallback((animated = true) => {
-    if (n === 0) return;
-    const r = Math.round(scrollOffsetRef.current / itemHeight);
-    if (loopEnabled) {
-      const targetOffset = r * itemHeight;
-      const dataIdx = modIndex(r, n);
-      animateToOffset(targetOffset, dataIdx, animated);
-    } else {
-      const dataIdx = Math.max(0, Math.min(r, n - 1));
-      animateToOffset(dataIdx * itemHeight, dataIdx, animated);
-    }
-  }, [n, itemHeight, loopEnabled, animateToOffset]);
-  const hitTestDataIndex = 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 = useCallback(initialVelocity => {
-    if (snapDurationMs <= 0) {
-      snapToNearestRow(false);
-      return;
-    }
-    let velocity = initialVelocity * momentumMultiplier;
-    let offset = scrollOffsetRef.current;
-    const animate = () => {
-      velocity *= friction;
-      offset += velocity;
-      if (!loopEnabled) {
-        if (offset < minOffset) {
-          offset = minOffset + rubberBand(offset - minOffset, containerHeight);
-          velocity *= 0.5;
-        } else if (offset > maxOffset) {
-          offset = maxOffset + rubberBand(offset - maxOffset, containerHeight);
-          velocity *= 0.5;
-        }
-      }
-      scrollOffsetRef.current = offset;
-      setScrollOffset(offset);
-      if (Math.abs(velocity) > minVelocity) {
-        animationRef.current = requestAnimationFrame(animate);
-      } else {
-        snapToNearestRow(true);
-      }
-    };
-    isAnimatingRef.current = true;
-    if (animationRef.current) cancelAnimationFrame(animationRef.current);
-    animationRef.current = requestAnimationFrame(animate);
-  }, [loopEnabled, minOffset, maxOffset, containerHeight, snapToNearestRow, snapDurationMs]);
-  const handlePointerDown = useCallback(e => {
-    if (disabled) return;
-    if (animationRef.current) {
-      cancelAnimationFrame(animationRef.current);
-      isAnimatingRef.current = false;
-    }
-    isDraggingRef.current = true;
-    lastYRef.current = e.clientY;
-    downYRef.current = e.clientY;
-    dragDistanceRef.current = 0;
-    lastTimeRef.current = performance.now();
-    dragVelocitiesRef.current = [];
-    if (isWeb && containerRef.current) {
-      containerRef.current.setPointerCapture(e.pointerId);
-      containerRef.current.style.cursor = "grabbing";
-    }
-  }, [disabled]);
-  const handlePointerMove = useCallback(e => {
-    if (!isDraggingRef.current || disabled) return;
-    const currentY = e.clientY;
-    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);
-      if (dragVelocitiesRef.current.length > 5) {
-        dragVelocitiesRef.current.shift();
-      }
-    }
-    let newOffset = scrollOffsetRef.current + deltaY;
-    if (!loopEnabled) {
-      if (newOffset < minOffset) {
-        newOffset = minOffset + rubberBand(newOffset - minOffset, containerHeight);
-      } else if (newOffset > maxOffset) {
-        newOffset = maxOffset + rubberBand(newOffset - maxOffset, containerHeight);
-      }
-    }
-    scrollOffsetRef.current = newOffset;
-    setScrollOffset(newOffset);
-    lastYRef.current = currentY;
-    lastTimeRef.current = currentTime;
-  }, [disabled, loopEnabled, minOffset, maxOffset, containerHeight]);
-  const handlePointerUp = useCallback(e => {
-    if (!isDraggingRef.current) return;
-    isDraggingRef.current = false;
-    if (isWeb && containerRef.current) {
-      try {
-        containerRef.current.releasePointerCapture(e.pointerId);
-      } catch {}
-      containerRef.current.style.cursor = disabled ? "not-allowed" : "grab";
-    }
-    if (dragDistanceRef.current < tapSlopPx) {
-      const rect = containerRef.current?.getBoundingClientRect();
-      const tapY = e.clientY - (rect?.top ?? 0);
-      const tapped = hitTestDataIndex(tapY);
-      if (tapped != null) {
-        snapToIndex(tapped, true);
-        return;
-      }
-    }
-    const velocities = dragVelocitiesRef.current;
-    if (velocities.length > 0) {
-      const avgVelocity = velocities.reduce((a, b) => a + b, 0) / velocities.length;
-      if (Math.abs(avgVelocity) > minVelocity * 2) {
-        startMomentum(avgVelocity);
-      } else {
-        snapToNearestRow(true);
-      }
-    } else {
-      snapToNearestRow(true);
-    }
-  }, [snapToNearestRow, startMomentum, hitTestDataIndex, snapToIndex, disabled]);
-  const handleWheel = useCallback(e => {
-    if (disabled) return;
-    e.preventDefault();
-    if (animationRef.current) {
-      cancelAnimationFrame(animationRef.current);
-      isAnimatingRef.current = false;
-    }
-    const delta = e.deltaY;
-    const currentOffset = scrollOffsetRef.current;
-    let newOffset = currentOffset + delta;
-    if (!loopEnabled) {
-      if (newOffset < minOffset) {
-        newOffset = minOffset;
-      } else if (newOffset > maxOffset) {
-        newOffset = maxOffset;
-      }
-    }
-    scrollOffsetRef.current = newOffset;
-    setScrollOffset(newOffset);
-    if (animationRef.current) cancelAnimationFrame(animationRef.current);
-    animationRef.current = requestAnimationFrame(() => {
-      setTimeout(() => {
-        if (!isDraggingRef.current && !isAnimatingRef.current) {
-          snapToNearestRow(true);
-        }
-      }, 100);
-    });
-  }, [disabled, loopEnabled, minOffset, maxOffset, snapToNearestRow]);
-  const handleKeyDown = useCallback(e => {
-    if (disabled) return;
-    let delta = 0;
-    switch (e.key) {
-      case "ArrowUp":
-      case "k":
-        delta = -1;
-        break;
-      case "ArrowDown":
-      case "j":
-        delta = 1;
-        break;
-      case "PageUp":
-        delta = -visibleItems;
-        break;
-      case "PageDown":
-        delta = visibleItems;
-        break;
-      case "Home":
-        snapToIndex(0);
-        e.preventDefault();
-        return;
-      case "End":
-        snapToIndex(n - 1);
-        e.preventDefault();
-        return;
-      default:
-        return;
-    }
-    e.preventDefault();
-    if (loopEnabled) {
-      const newIndex = modIndex(selectedIndex + delta, n);
-      snapToIndex(newIndex);
-    } else {
-      const newIndex = Math.max(0, Math.min(selectedIndex + delta, n - 1));
-      snapToIndex(newIndex);
-    }
-  }, [disabled, selectedIndex, n, visibleItems, snapToIndex, loopEnabled]);
-  useEffect(() => {
-    if (!isWeb) return;
-    const container = containerRef.current;
-    if (!container) return;
-    const wheelHandler = e => handleWheel(e);
-    container.addEventListener("wheel", wheelHandler, {
-      passive: false
-    });
-    return () => {
-      container.removeEventListener("wheel", wheelHandler);
-    };
-  }, [handleWheel]);
-  useEffect(() => {
-    return () => {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
-    };
-  }, []);
-  const renderRows = useMemo(() => {
-    if (n === 0) return [];
-    if (loopEnabled) {
-      const centerRow = Math.round(scrollOffset / itemHeight);
-      const rowBuffer = paddingItems + 5;
-      const list = [];
-      for (let vr = centerRow - rowBuffer; vr <= centerRow + rowBuffer; vr++) {
-        list.push({
-          virtualRow: vr,
-          dataIndex: modIndex(vr, n)
-        });
-      }
-      return list;
-    }
-    const start = Math.max(0, Math.floor(scrollOffset / itemHeight) - paddingItems - 1);
-    const end = Math.min(n - 1, Math.ceil((scrollOffset + containerHeight) / itemHeight) + paddingItems + 1);
-    return Array.from({
-      length: end - start + 1
-    }, (_, i) => {
-      const virtualRow = start + i;
-      return {
-        virtualRow,
-        dataIndex: virtualRow
-      };
-    });
-  }, [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__ */jsx(Text, {
-      ...knobProps.body,
-      fontSize: size,
-      fontWeight: isSelected && !disabled ? "600" : "400",
-      color: itemColor(isSelected),
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
-      maxWidth: "100%",
-      px: "$2",
-      children: getItemLabel(item)
-    });
-  };
-  return /* @__PURE__ */jsxs(WheelContainer, {
-    height: containerHeight,
-    width: columnWidth,
-    minWidth: columnWidth,
-    ...knobProps.containerRadius,
-    "data-testid": "wheel",
-    "data-disabled": disabled ? true : void 0,
-    "aria-disabled": disabled || void 0,
-    opacity: 1,
-    children: [/* @__PURE__ */jsx(SelectionIndicator, {
-      className: highlightSmoothClass,
-      backgroundColor: "$color4",
-      top: paddingItems * itemHeight,
-      height: itemHeight,
-      style: highlightStyle,
-      "data-testid": "wheel-selection"
-    }), isWeb ? /* @__PURE__ */jsx("div", {
-      ref: containerRef,
-      className: "mp1-wheel-wrapper",
-      tabIndex: disabled ? -1 : 0,
-      role: "slider",
-      "aria-label": ariaLabel ?? 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: `${perspectivePx}px`,
-        perspectiveOrigin: "center center",
-        overflow: "hidden",
-        userSelect: "none",
-        touchAction: "none",
-        cursor: disabled ? "not-allowed" : "grab",
-        ...wheelMaskStyle
-      },
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onPointerCancel: handlePointerUp,
-      onKeyDown: handleKeyDown,
-      "data-testid": "wheel-wrapper",
-      children: renderRows.map(({
-        virtualRow,
-        dataIndex
-      }) => {
-        const isSelected = dataIndex === liveDataIndex;
-        const transform = getItemTransform(virtualRow, scrollOffset, itemHeight, containerHeight);
-        if (Math.abs(transform.rotateX) > 85) return null;
-        return /* @__PURE__ */jsx("div", {
-          "data-testid": "wheel-item",
-          "data-index": dataIndex,
-          "data-selected": isSelected ? true : void 0,
-          "aria-hidden": isSelected ? void 0 : true,
-          style: {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            height: itemHeight,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            transform: `translateY(${transform.translateY}px) rotateX(${transform.rotateX}deg) scale(${transform.scale})`,
-            opacity: transform.opacity,
-            pointerEvents: "none",
-            transformOrigin: "center center",
-            transformStyle: "preserve-3d",
-            backfaceVisibility: "hidden"
-          },
-          children: renderItemNode(dataIndex, isSelected)
-        }, `${dataIndex}-${virtualRow}`);
-      })
-    }) : /* @__PURE__ */jsx(View, {
-      width: "100%",
-      height: containerHeight,
-      position: "relative",
-      overflow: "hidden",
-      cursor: disabled ? "not-allowed" : "grab",
-      "data-disabled": disabled ? true : void 0,
-      "aria-disabled": disabled || void 0,
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onPointerCancel: handlePointerUp,
-      children: renderRows.map(({
-        virtualRow,
-        dataIndex
-      }) => {
-        const isSelected = dataIndex === liveDataIndex;
-        const transform = getItemTransform(virtualRow, scrollOffset, itemHeight, containerHeight);
-        if (Math.abs(transform.rotateX) > 85) return null;
-        return /* @__PURE__ */jsx(View, {
-          position: "absolute",
-          left: 0,
-          right: 0,
-          height: itemHeight,
-          alignItems: "center",
-          justifyContent: "center",
-          opacity: transform.opacity,
-          pointerEvents: "none",
-          y: transform.translateY,
-          scale: transform.scale,
-          rotateX: `${transform.rotateX}deg`,
-          children: renderItemNode(dataIndex, isSelected)
-        }, `${dataIndex}-${virtualRow}`);
-      })
-    })]
-  });
-}
-Wheel.Item = WheelItemContainer;
+import { Wheel } from "@multiplatform.one/forms";
 export { Wheel };
 //# sourceMappingURL=index.mjs.map