@multiplatform.one/forms 6.0.0

package/dist/cjs/Wheel/index.cjs

@@ -0,0 +1,563 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Wheel_exports = {};
+__export(Wheel_exports, {
+  Wheel: () => Wheel
+});
+module.exports = __toCommonJS(Wheel_exports);
+var import_react = require("react");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+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 WheelContainer = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "Wheel",
+  position: "relative",
+  overflow: "hidden",
+  userSelect: "none",
+  width: 80
+  // Default width for wheel column
+});
+const WheelItemContainer = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "WheelItem",
+  position: "absolute",
+  left: 0,
+  right: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  userSelect: "none"
+});
+const SelectionIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "WheelSelectionIndicator",
+  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;
+  }
+  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 centerY = containerHeight / 2;
+  const itemCenterY = index * itemHeight + itemHeight / 2 - scrollOffset;
+  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.6;
+  const curveOffset = Math.abs(normalizedDistance) * normalizedDistance * itemHeight * 0.5;
+  const translateY = itemCenterY - itemHeight / 2 + curveOffset;
+  return {
+    translateY,
+    rotateX: Math.max(-85, Math.min(85, rotateX)),
+    scale: Math.max(0.5, Math.min(1, scale)),
+    opacity: Math.max(0.1, Math.min(1, opacity))
+  };
+}
+function Wheel({
+  items,
+  value,
+  onChange,
+  visibleItems = 5,
+  itemHeight = 40,
+  renderItem,
+  disabled = false,
+  size = "$4",
+  loop = false
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const containerRef = (0, import_react.useRef)(null);
+  const [scrollOffset, setScrollOffset] = (0, import_react.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
+  const n = items.length;
+  const loopEnabled = Boolean(loop && n > 1);
+  const scrollOffsetRef = (0, import_react.useRef)(scrollOffset);
+  scrollOffsetRef.current = scrollOffset;
+  const animationRef = (0, import_react.useRef)(null);
+  const isAnimatingRef = (0, import_react.useRef)(false);
+  const isDraggingRef = (0, import_react.useRef)(false);
+  const lastYRef = (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;
+  (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);
+      }
+    }
+  }, [value, items, itemHeight, loop, 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;
+    setScrollOffset(settled);
+    setSelectedIndex(safeIdx);
+    onChange?.(getItemValue(items[safeIdx]));
+    isAnimatingRef.current = false;
+  }, [items, n, onChange, loopEnabled, itemHeight]);
+  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) {
+      runSnapComplete(goal, dataIndex);
+      return;
+    }
+    const distance = goal - startOffset;
+    const duration = 300;
+    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;
+      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]);
+  const snapToIndex = (0, import_react.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]);
+  const snapToNearestRow = (0, import_react.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 startMomentum = (0, import_react.useCallback)(initialVelocity => {
+    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;
+        }
+      }
+      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]);
+  const handlePointerDown = (0, import_react.useCallback)(e => {
+    if (disabled) return;
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+      isAnimatingRef.current = false;
+    }
+    isDraggingRef.current = true;
+    lastYRef.current = e.clientY;
+    lastTimeRef.current = performance.now();
+    dragVelocitiesRef.current = [];
+    if (import_tamagui.isWeb && containerRef.current) {
+      containerRef.current.setPointerCapture(e.pointerId);
+    }
+  }, [disabled]);
+  const handlePointerMove = (0, import_react.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;
+    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 = (0, import_react.useCallback)(e => {
+    if (!isDraggingRef.current) return;
+    isDraggingRef.current = false;
+    if (import_tamagui.isWeb && containerRef.current) {
+      containerRef.current.releasePointerCapture(e.pointerId);
+    }
+    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]);
+  const handleWheel = (0, import_react.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;
+      }
+    }
+    setScrollOffset(newOffset);
+    if (animationRef.current) cancelAnimationFrame(animationRef.current);
+    animationRef.current = requestAnimationFrame(() => {
+      setTimeout(() => {
+        if (!isDraggingRef.current && !isAnimatingRef.current) {
+          snapToNearestRow(true);
+        }
+      }, 100);
+    });
+  }, [disabled, loopEnabled, minOffset, maxOffset, itemHeight, snapToNearestRow]);
+  const handleKeyDown = (0, import_react.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]);
+  (0, import_react.useEffect)(() => {
+    if (!import_tamagui.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]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+  const renderRows = (0, import_react.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]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(WheelContainer, {
+    height: containerHeight,
+    opacity: disabled ? 0.5 : 1,
+    ...knobProps.borderRadius,
+    "data-testid": "wheel",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectionIndicator, {
+      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%)"
+        }
+      } : {})
+    }), import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      ref: containerRef,
+      tabIndex: disabled ? -1 : 0,
+      style: {
+        width: "100%",
+        height: containerHeight,
+        position: "relative",
+        perspective: "1000px",
+        perspectiveOrigin: "center center",
+        overflow: "hidden",
+        userSelect: "none",
+        touchAction: "none",
+        cursor: "grab",
+        outline: "none"
+      },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onKeyDown: handleKeyDown,
+      "data-testid": "wheel-wrapper",
+      children: renderRows.map(({
+        virtualRow,
+        dataIndex
+      }) => {
+        const item = items[dataIndex];
+        const isSelected = dataIndex === selectedIndex;
+        const itemValue = getItemValue(item);
+        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,
+          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: 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" : "$color10",
+            children: getItemLabel(item)
+          })
+        }, rowKey);
+      })
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      width: "100%",
+      height: containerHeight,
+      position: "relative",
+      overflow: "hidden",
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      children: renderRows.map(({
+        virtualRow,
+        dataIndex
+      }) => {
+        const item = items[dataIndex];
+        const isSelected = dataIndex === selectedIndex;
+        const itemValue = getItemValue(item);
+        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,
+          right: 0,
+          height: itemHeight,
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: transform.opacity,
+          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" : "$color10",
+            children: getItemLabel(item)
+          })
+        }, rowKey);
+      })
+    })]
+  });
+}
+Wheel.Item = WheelItemContainer;