@multiplatform.one/forms 7.36.0 → 7.37.0

package/src/Wheel/wheelShared.ts

@@ -0,0 +1,222 @@
+import type { CSSProperties, ReactNode } from "react";
+import { motionDurationMs, sizeTokenStep, useResolvedKnobs } from "@multiplatform.one/theme";
+import type { SizeTokens } from "tamagui";
+import { getConfig, getTokens } from "tamagui";
+
+export interface WheelItem<T = string | number> {
+  value: T;
+  label?: string;
+}
+
+/** iOS 14 multi-column highlight joining (CupertinoPicker capStart/capEnd). */
+export type WheelHighlightEdges = "all" | "start" | "end" | "none";
+
+export interface WheelProps<T = string | number> {
+  /** Array of items to display */
+  items: (T | WheelItem<T>)[];
+  /** Currently selected value */
+  value?: T;
+  /** Called when selection changes */
+  onChange?: (value: T) => void;
+  /** Number of visible items (should be odd for center alignment) */
+  visibleItems?: 3 | 5 | 7;
+  /** Height of each item. Defaults to the font's line height plus the $1 space token. */
+  itemHeight?: number;
+  /** Column width in px. Items are absolutely positioned, so this is the painted width. */
+  width?: number;
+  /** Custom render function for items */
+  renderItem?: (item: T, index: number, isSelected: boolean) => ReactNode;
+  /** Whether the wheel is disabled */
+  disabled?: boolean;
+  /** Size token for text */
+  size?: SizeTokens;
+  /**
+   * When true (and there are at least 2 items), scrolling wraps at the ends
+   * instead of rubber-banding. Uses virtual rows with modulo item indexing.
+   */
+  loop?: boolean;
+  /**
+   * How the iOS selection fill rounds and insets. `"all"` is a standalone
+   * column; `"start"` / `"end"` / `"none"` join adjacent columns into one band.
+   */
+  highlightEdges?: WheelHighlightEdges;
+  /** Stretch inside a row of columns (time picker). */
+  flex?: number;
+  /**
+   * Fires once each time a different item crosses the centre band (drag,
+   * flick, or snap). Native wires this to a selection haptic.
+   */
+  onItemCross?: (value: T, index: number) => void;
+  /** Accessible name for the picker (web renders role="slider", native "adjustable"). */
+  "aria-label"?: string;
+}
+
+export const defaultColumnWidth = 88;
+
+/** Type scale for wheel numerals — iOS UIPickerView is ~21pt at default size. */
+const wheelFontByStep: Record<-1 | 0 | 1, SizeTokens> = {
+  [-1]: "$6",
+  0: "$8",
+  1: "$9",
+};
+
+/**
+ * The frame edge sits at this drum angle, so the outermost painted rows are
+ * nearly edge-on like UIPickerView's, instead of being cut flat at 90°.
+ */
+const edgeAngle = (80 * Math.PI) / 180;
+
+export function normalizeItem<T>(item: T | WheelItem<T>): WheelItem<T> {
+  if (typeof item === "object" && item !== null && "value" in item) {
+    return item as WheelItem<T>;
+  }
+  return { value: item as T, label: String(item) };
+}
+
+export function getItemLabel<T>(item: T | WheelItem<T>): string {
+  const normalized = normalizeItem(item);
+  return normalized.label ?? String(normalized.value);
+}
+
+export function getItemValue<T>(item: T | WheelItem<T>): T {
+  return normalizeItem(item).value;
+}
+
+/** Non-negative modulo (JavaScript % can be negative for negative lhs). */
+export function modIndex(row: number, n: number): number {
+  if (n <= 0) return 0;
+  return ((row % n) + n) % n;
+}
+
+/** Shortest steps on the item circle from current row to target data index. */
+export function nearestRowForDataIndex(
+  currentRow: number,
+  targetDataIndex: number,
+  n: number,
+): number {
+  const currentMod = modIndex(currentRow, n);
+  let delta = targetDataIndex - currentMod;
+  if (delta > n / 2) delta -= n;
+  if (delta < -n / 2) delta += n;
+  return currentRow + delta;
+}
+
+export function drumRadius(frameHeight: number): number {
+  return frameHeight / 2 / Math.sin(edgeAngle);
+}
+
+/** Rows from the centre at which a row turns edge-on (90°) and stops painting. */
+export function drumReachRows(itemHeight: number, frameHeight: number): number {
+  return (drumRadius(frameHeight) * (Math.PI / 2)) / Math.max(itemHeight, 1);
+}
+
+export interface DrumPose {
+  /** Distance of the row's centre from the frame's centre, in px. */
+  offset: number;
+  rotateX: number;
+  scale: number;
+  opacity: number;
+}
+
+/**
+ * Pose of a row `rowsFromCenter` rows away from the band on the UIPickerView
+ * drum. The arc length between rows equals the row height, so neighbours can
+ * never overlap: each row's projected height shrinks by cos θ exactly as fast
+ * as the gap between rows does.
+ */
+export function drumPose(
+  rowsFromCenter: number,
+  itemHeight: number,
+  frameHeight: number,
+): DrumPose {
+  const radius = drumRadius(frameHeight);
+  const theta = (rowsFromCenter * itemHeight) / Math.max(radius, 1);
+  const clamped = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, theta));
+  const cos = Math.cos(clamped);
+  return {
+    offset: radius * Math.sin(clamped),
+    rotateX: -(clamped * 180) / Math.PI,
+    scale: 1.5 / (2.5 - cos),
+    opacity: Math.abs(theta) >= Math.PI / 2 ? 0 : Math.pow(cos, 2),
+  };
+}
+
+type FontTable = Record<string, number | { val?: number } | undefined>;
+
+function tableValue(table: FontTable | undefined, key: string): number | undefined {
+  const raw = table?.[key];
+  if (typeof raw === "number") return raw;
+  if (raw && typeof raw === "object" && typeof raw.val === "number") return raw.val;
+  return undefined;
+}
+
+export function fontLineHeightPx(size: SizeTokens, fontFamily: unknown): number {
+  const key = String(size).replace(/^\$/, "");
+  const fonts = (getConfig()?.fonts ?? {}) as Record<
+    string,
+    { lineHeight?: FontTable; size?: FontTable }
+  >;
+  const familyKey = typeof fontFamily === "string" ? fontFamily.replace(/^\$/, "") : "body";
+  const font = fonts[familyKey] ?? fonts.body ?? Object.values(fonts)[0];
+  const lineHeight = tableValue(font?.lineHeight, key);
+  if (lineHeight) return lineHeight;
+  const fontSize = tableValue(font?.size, key);
+  return fontSize ? Math.ceil(fontSize * 1.2) : 28;
+}
+
+export function tokenPx(token: string | number, scale: "radius" | "space"): number {
+  if (typeof token === "number") return token;
+  const key = String(token).replace(/^\$/, "");
+  const val = (getTokens() as { [k: string]: Record<string, { val?: number }> })[scale]?.[key]?.val;
+  if (typeof val === "number") return val;
+  return scale === "radius" ? 9 : 8;
+}
+
+export function highlightBandStyle(
+  edges: WheelHighlightEdges,
+  radiusToken: string | number,
+  pointy: boolean,
+): CSSProperties {
+  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,
+  };
+}
+
+/** Geometry and knob-derived styling both renderers share. */
+export function useWheelLayout<T>({
+  visibleItems = 5,
+  itemHeight: itemHeightProp,
+  size: sizeProp,
+  highlightEdges = "all",
+}: Pick<WheelProps<T>, "visibleItems" | "itemHeight" | "size" | "highlightEdges">) {
+  const { knobProps } = useResolvedKnobs();
+  const size = sizeProp ?? wheelFontByStep[sizeTokenStep(knobProps.sizeToken)];
+  const bodyFont = (knobProps.body as { fontFamily?: unknown }).fontFamily;
+  const itemHeight =
+    itemHeightProp ?? Math.ceil(fontLineHeightPx(size, bodyFont) + tokenPx("$1", "space"));
+  const frameHeight = itemHeight * visibleItems;
+  const motionTransition = knobProps.motion.control.transition as string | undefined;
+  const radiusToken = knobProps.borderRadius.borderRadius as string | number;
+  return {
+    knobProps,
+    size,
+    itemHeight,
+    frameHeight,
+    paddingItems: Math.floor(visibleItems / 2),
+    snapDurationMs: motionDurationMs(motionTransition),
+    highlightStyle: highlightBandStyle(highlightEdges, radiusToken, Boolean(knobProps.pointy)),
+    highlightClassName:
+      "className" in knobProps.borderRadius && typeof knobProps.borderRadius.className === "string"
+        ? knobProps.borderRadius.className
+        : undefined,
+  };
+}

package/src/shared/TimeColumn.tsx

@@ -1,4 +1,3 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useMemo } from "react";
 import { View } from "tamagui";
 import { Wheel, type WheelHighlightEdges } from "../Wheel";
@@ -67,8 +66,6 @@ export function TimeWheels({
   showSeconds,
   onChange,
 }: TimeWheelsProps) {
-  const { knobProps } = useResolvedKnobs();
-  const itemHeight = knobProps.nestedControl.px;
   const minutes = useMemo(() => generateRange(0, 59, minuteStep), [minuteStep]);
   const { h: hour12, period } = to12Hour(hour24);
   const showPeriod = timeFormat === "12h";
@@ -102,7 +99,6 @@ export function TimeWheels({
         }
         loop
         visibleItems={5}
-        itemHeight={itemHeight}
         flex={1}
         highlightEdges={hourEdge}
         aria-label={t("Hour")}
@@ -113,7 +109,6 @@ export function TimeWheels({
         onChange={(next) => emit(hour24, next, second)}
         loop
         visibleItems={5}
-        itemHeight={itemHeight}
         flex={1}
         highlightEdges={minuteEdge}
         aria-label={t("Min")}
@@ -125,7 +120,6 @@ export function TimeWheels({
           onChange={(next) => emit(hour24, minute, next)}
           loop
           visibleItems={5}
-          itemHeight={itemHeight}
           flex={1}
           highlightEdges={secondEdge}
           aria-label={t("Sec")}
@@ -138,7 +132,6 @@ export function TimeWheels({
           onChange={(next) => emit(to24Hour(hour12, next), minute, second)}
           loop={false}
           visibleItems={5}
-          itemHeight={itemHeight}
           flex={1}
           highlightEdges={periodEdge}
           aria-label={t("AM/PM")}

package/types/Wheel/NativeWheel.d.ts

@@ -0,0 +1,4 @@
+import type { WheelProps } from "./wheelShared";
+/** Web paints the wheel itself (index.tsx); the scroll-view drum is native only. */
+export declare function NativeWheel<T = string | number>(_props: WheelProps<T>): null;
+//# sourceMappingURL=NativeWheel.d.ts.map

package/types/Wheel/NativeWheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeWheel.d.ts","sourceRoot":"","sources":["../../src/Wheel/NativeWheel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,oFAAoF;AACpF,wBAAgB,WAAW,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,QAErE"}

package/types/Wheel/NativeWheel.native.d.ts

@@ -0,0 +1,9 @@
+import { type WheelProps } from "./wheelShared";
+/**
+ * UIPickerView on a real UIScrollView: the platform's own momentum, rubber
+ * band and paging (snapToInterval) drive the wheel, and nested inside a
+ * screen's ScrollView the inner one owns the drag, so the column never drags
+ * its page along with it.
+ */
+export declare function NativeWheel<T = string | number>(props: WheelProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NativeWheel.native.d.ts.map

package/types/Wheel/NativeWheel.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeWheel.native.d.ts","sourceRoot":"","sources":["../../src/Wheel/NativeWheel.native.tsx"],"names":[],"mappings":"AAaA,OAAO,EAUL,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AA0EvB;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,2CAqUpE"}

package/types/Wheel/haptic.d.ts

@@ -1,6 +1,8 @@
 /**
- * iOS UIPickerView uses UISelectionFeedbackGenerator, not impact. Optional
- * so web / tests / apps without expo-haptics stay silent.
+ * iOS UIPickerView ticks with UISelectionFeedbackGenerator. The native module
+ * is looked up in the Expo registry instead of importing expo-haptics, so a
+ * binary built without it (the Kitchen Sink) stays silent and the wheel still
+ * ships over the air.
  */
 export declare function fireSelectionHaptic(): void;
 //# sourceMappingURL=haptic.d.ts.map

package/types/Wheel/haptic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"haptic.d.ts","sourceRoot":"","sources":["../../src/Wheel/haptic.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAQ1C"}
+{"version":3,"file":"haptic.d.ts","sourceRoot":"","sources":["../../src/Wheel/haptic.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAK1C"}

package/types/Wheel/index.d.ts

@@ -1,57 +1,12 @@
-import type { ReactNode } from "react";
-import type { GetProps, SizeTokens } from "tamagui";
-export interface WheelItem<T = string | number> {
-    value: T;
-    label?: string;
-}
-/** iOS 14 multi-column highlight joining (CupertinoPicker capStart/capEnd). */
-export type WheelHighlightEdges = "all" | "start" | "end" | "none";
-export interface WheelProps<T = string | number> {
-    /** Array of items to display */
-    items: (T | WheelItem<T>)[];
-    /** Currently selected value */
-    value?: T;
-    /** Called when selection changes */
-    onChange?: (value: T) => void;
-    /** Number of visible items (should be odd for center alignment) */
-    visibleItems?: 3 | 5 | 7;
-    /** Height of each item */
-    itemHeight?: number;
-    /** Column width in px. Items are absolutely positioned, so this is the painted width. */
-    width?: number;
-    /** Custom render function for items */
-    renderItem?: (item: T, index: number, isSelected: boolean) => ReactNode;
-    /** Whether the wheel is disabled */
-    disabled?: boolean;
-    /** Size token for text */
-    size?: SizeTokens;
-    /**
-     * When true (and there are at least 2 items), scrolling wraps at the ends
-     * instead of rubber-banding. Uses virtual rows with modulo item indexing.
-     */
-    loop?: boolean;
-    /**
-     * How the iOS selection fill rounds and insets. `"all"` is a standalone
-     * column; `"start"` / `"end"` / `"none"` join adjacent columns into one band.
-     */
-    highlightEdges?: WheelHighlightEdges;
-    /** Stretch inside a row of columns (time picker). */
-    flex?: number;
-    /**
-     * Fires once each time a different item crosses the centre band (drag,
-     * flick, or snap). Native wires this to a selection haptic.
-     */
-    onItemCross?: (value: T, index: number) => void;
-    /** Accessible name for the picker (web renders role="slider"). */
-    "aria-label"?: string;
-}
+import type { GetProps } from "tamagui";
+import { type WheelProps } from "./wheelShared";
+export type { WheelHighlightEdges, WheelItem, WheelProps } from "./wheelShared";
 declare const WheelContainer: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {}, import("@tamagui/web").StaticConfigPublic>;
 declare const WheelItemContainer: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {}, import("@tamagui/web").StaticConfigPublic>;
-export declare function Wheel<T = string | number>({ items, value, onChange, visibleItems, itemHeight: itemHeightProp, width: widthProp, renderItem, disabled, size: sizeProp, loop, highlightEdges, flex, onItemCross, "aria-label": ariaLabel, }: WheelProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Wheel<T = string | number>(props: WheelProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Wheel {
     var Item: import("tamagui").TamaguiComponent<import("@tamagui/web").TamaDefer, import("tamagui").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/web").StackStyleBase, {}, import("@tamagui/web").StaticConfigPublic>;
 }
 export type WheelContainerProps = GetProps<typeof WheelContainer>;
 export type WheelItemProps = GetProps<typeof WheelItemContainer>;
-export {};
 //# sourceMappingURL=index.d.ts.map

package/types/Wheel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Wheel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQpD,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM;IAC5C,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,+EAA+E;AAC/E,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAEnE,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM;IAC7C,gCAAgC;IAChC,KAAK,EAAE,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IACxE,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA2DD,QAAA,MAAM,cAAc,kPAKlB,CAAC;AAEH,QAAA,MAAM,kBAAkB,kPAQtB,CAAC;AA8HH,wBAAgB,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,EAAE,EACzC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAgB,EAChB,UAAU,EAAE,cAAc,EAC1B,KAAK,EAAE,SAAS,EAChB,UAAU,EACV,QAAgB,EAChB,IAAI,EAAE,QAAQ,EACd,IAAY,EACZ,cAAsB,EACtB,IAAI,EACJ,WAAW,EACX,YAAY,EAAE,SAAS,GACxB,EAAE,UAAU,CAAC,CAAC,CAAC,2CAgtBf;yBA/tBe,KAAK;;;AAquBrB,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Wheel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,OAAO,EASL,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,mBAAmB,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AA2ChF,QAAA,MAAM,cAAc,kPAKlB,CAAC;AAEH,QAAA,MAAM,kBAAkB,kPAQtB,CAAC;AA6DH,wBAAgB,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,2CAE9D;yBAFe,KAAK;;;AA4mBrB,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/types/Wheel/wheelShared.d.ts

@@ -0,0 +1,87 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { SizeTokens } from "tamagui";
+export interface WheelItem<T = string | number> {
+    value: T;
+    label?: string;
+}
+/** iOS 14 multi-column highlight joining (CupertinoPicker capStart/capEnd). */
+export type WheelHighlightEdges = "all" | "start" | "end" | "none";
+export interface WheelProps<T = string | number> {
+    /** Array of items to display */
+    items: (T | WheelItem<T>)[];
+    /** Currently selected value */
+    value?: T;
+    /** Called when selection changes */
+    onChange?: (value: T) => void;
+    /** Number of visible items (should be odd for center alignment) */
+    visibleItems?: 3 | 5 | 7;
+    /** Height of each item. Defaults to the font's line height plus the $1 space token. */
+    itemHeight?: number;
+    /** Column width in px. Items are absolutely positioned, so this is the painted width. */
+    width?: number;
+    /** Custom render function for items */
+    renderItem?: (item: T, index: number, isSelected: boolean) => ReactNode;
+    /** Whether the wheel is disabled */
+    disabled?: boolean;
+    /** Size token for text */
+    size?: SizeTokens;
+    /**
+     * When true (and there are at least 2 items), scrolling wraps at the ends
+     * instead of rubber-banding. Uses virtual rows with modulo item indexing.
+     */
+    loop?: boolean;
+    /**
+     * How the iOS selection fill rounds and insets. `"all"` is a standalone
+     * column; `"start"` / `"end"` / `"none"` join adjacent columns into one band.
+     */
+    highlightEdges?: WheelHighlightEdges;
+    /** Stretch inside a row of columns (time picker). */
+    flex?: number;
+    /**
+     * Fires once each time a different item crosses the centre band (drag,
+     * flick, or snap). Native wires this to a selection haptic.
+     */
+    onItemCross?: (value: T, index: number) => void;
+    /** Accessible name for the picker (web renders role="slider", native "adjustable"). */
+    "aria-label"?: string;
+}
+export declare const defaultColumnWidth = 88;
+export declare function normalizeItem<T>(item: T | WheelItem<T>): WheelItem<T>;
+export declare function getItemLabel<T>(item: T | WheelItem<T>): string;
+export declare function getItemValue<T>(item: T | WheelItem<T>): T;
+/** Non-negative modulo (JavaScript % can be negative for negative lhs). */
+export declare function modIndex(row: number, n: number): number;
+/** Shortest steps on the item circle from current row to target data index. */
+export declare function nearestRowForDataIndex(currentRow: number, targetDataIndex: number, n: number): number;
+export declare function drumRadius(frameHeight: number): number;
+/** Rows from the centre at which a row turns edge-on (90°) and stops painting. */
+export declare function drumReachRows(itemHeight: number, frameHeight: number): number;
+export interface DrumPose {
+    /** Distance of the row's centre from the frame's centre, in px. */
+    offset: number;
+    rotateX: number;
+    scale: number;
+    opacity: number;
+}
+/**
+ * Pose of a row `rowsFromCenter` rows away from the band on the UIPickerView
+ * drum. The arc length between rows equals the row height, so neighbours can
+ * never overlap: each row's projected height shrinks by cos θ exactly as fast
+ * as the gap between rows does.
+ */
+export declare function drumPose(rowsFromCenter: number, itemHeight: number, frameHeight: number): DrumPose;
+export declare function fontLineHeightPx(size: SizeTokens, fontFamily: unknown): number;
+export declare function tokenPx(token: string | number, scale: "radius" | "space"): number;
+export declare function highlightBandStyle(edges: WheelHighlightEdges, radiusToken: string | number, pointy: boolean): CSSProperties;
+/** Geometry and knob-derived styling both renderers share. */
+export declare function useWheelLayout<T>({ visibleItems, itemHeight: itemHeightProp, size: sizeProp, highlightEdges, }: Pick<WheelProps<T>, "visibleItems" | "itemHeight" | "size" | "highlightEdges">): {
+    knobProps: import("@multiplatform.one/theme").KnobProps;
+    size: SizeTokens;
+    itemHeight: number;
+    frameHeight: number;
+    paddingItems: number;
+    snapDurationMs: number;
+    highlightStyle: CSSProperties;
+    highlightClassName: string | undefined;
+};
+//# sourceMappingURL=wheelShared.d.ts.map

package/types/Wheel/wheelShared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheelShared.d.ts","sourceRoot":"","sources":["../../src/Wheel/wheelShared.ts"],"names":[],"mappings":"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"}

package/types/shared/TimeColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeColumn.d.ts","sourceRoot":"","sources":["../../src/shared/TimeColumn.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,CAAC;AAEvC,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,SAAI,GAAG,MAAM,EAAE,CAO1E;AA+BD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpE;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,MAAM,EACN,MAAM,EACN,UAAU,EACV,UAAU,EACV,WAAW,EACX,QAAQ,GACT,EAAE,eAAe,2CAgFjB"}
+{"version":3,"file":"TimeColumn.d.ts","sourceRoot":"","sources":["../../src/shared/TimeColumn.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,CAAC;AAEvC,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,SAAI,GAAG,MAAM,EAAE,CAO1E;AA+BD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpE;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,MAAM,EACN,MAAM,EACN,UAAU,EACV,UAAU,EACV,WAAW,EACX,QAAQ,GACT,EAAE,eAAe,2CA0EjB"}

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

@@ -1,116 +0,0 @@
-"use strict";
-
-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 WheelEdgeFade_native_exports = {};
-__export(WheelEdgeFade_native_exports, {
-  WheelEdgeFade: () => WheelEdgeFade
-});
-module.exports = __toCommonJS(WheelEdgeFade_native_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_expo_linear_gradient = require("expo-linear-gradient");
-var import_react_native = require("react-native");
-var import_tamagui = require("tamagui");
-function toTransparent(color) {
-  var fnMatch = color.match(/^(rgb|hsl)a?\(([^)]+)\)$/i);
-  if (fnMatch) {
-    var parts = fnMatch[2].split(",").map(function (part) {
-      return part.trim();
-    });
-    var [a, b, c] = parts;
-    return `${fnMatch[1].toLowerCase()}a(${a}, ${b}, ${c}, 0)`;
-  }
-  var hexMatch = color.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
-  if (hexMatch) {
-    var hex = hexMatch[1];
-    if (hex.length === 3) {
-      hex = hex.split("").map(function (char) {
-        return char + char;
-      }).join("");
-    }
-    var r = Number.parseInt(hex.slice(0, 2), 16);
-    var g = Number.parseInt(hex.slice(2, 4), 16);
-    var b1 = Number.parseInt(hex.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b1}, 0)`;
-  }
-  return "transparent";
-}
-function WheelEdgeFade(param) {
-  var {
-    height
-  } = param;
-  var _ref;
-  var _theme_background;
-  var theme = (0, import_tamagui.useTheme)();
-  var background = (_ref = (_theme_background = theme.background) === null || _theme_background === void 0 ? void 0 : _theme_background.val) !== null && _ref !== void 0 ? _ref : "#ffffff";
-  var transparent = toTransparent(background);
-  if (height <= 0) return null;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
-      pointerEvents: "none",
-      style: [styles.band, {
-        top: 0,
-        height
-      }],
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_expo_linear_gradient.LinearGradient, {
-        colors: [background, transparent],
-        start: {
-          x: 0.5,
-          y: 0
-        },
-        end: {
-          x: 0.5,
-          y: 1
-        },
-        style: import_react_native.StyleSheet.absoluteFill
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
-      pointerEvents: "none",
-      style: [styles.band, {
-        bottom: 0,
-        height
-      }],
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_expo_linear_gradient.LinearGradient, {
-        colors: [transparent, background],
-        start: {
-          x: 0.5,
-          y: 0
-        },
-        end: {
-          x: 0.5,
-          y: 1
-        },
-        style: import_react_native.StyleSheet.absoluteFill
-      })
-    })]
-  });
-}
-var styles = import_react_native.StyleSheet.create({
-  band: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    zIndex: 2
-  }
-});
-//# sourceMappingURL=WheelEdgeFade.native.js.map

package/dist/cjs/Wheel/WheelEdgeFade.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["WheelEdgeFade_native_exports","__export","WheelEdgeFade","module","exports","__toCommonJS","import_jsx_runtime","require","import_expo_linear_gradient","import_react_native","import_tamagui","toTransparent","color","fnMatch","match","parts","split","map","part","trim","a","b","c","toLowerCase","hexMatch","hex","length","char","join","r","Number","parseInt","slice","g","b1","param","height","_ref","_theme_background","theme","useTheme","background","val","transparent","jsxs","Fragment","children","jsx","View","pointerEvents","style","styles","band","top","LinearGradient","colors","start","x","y","end","StyleSheet","absoluteFill","bottom","create","position","left","right","zIndex"],"sources":["../../../src/Wheel/WheelEdgeFade.native.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,4BAAA;AAAAC,QAAA,CAAAD,4BAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAC,YAAA,CAAAL,4BAAA;AAAA,IAAAM,kBAAA,GAAkEC,OAAA;AAClE,IAAAC,2BAAA,GAA+BD,OAAA;AAC/B,IAAAE,mBAAA,GAA2CF,OAAA;AAC3C,IAAAG,cAAA,GAAyBH,OAAA;AACzB,SAASI,cAAcC,KAAA,EAAO;EAC1B,IAAIC,OAAA,GAAUD,KAAA,CAAME,KAAA,CAAM,2BAA2B;EACrD,IAAID,OAAA,EAAS;IACT,IAAIE,KAAA,GAAQF,OAAA,CAAQ,CAAC,EAAEG,KAAA,CAAM,GAAG,EAAEC,GAAA,CAAI,UAASC,IAAA,EAAM;MACjD,OAAOA,IAAA,CAAKC,IAAA,CAAK;IACrB,CAAC;IACD,IAAI,CAACC,CAAA,EAAGC,CAAA,EAAGC,CAAC,IAAIP,KAAA;IAChB,OAAO,GAAGF,OAAA,CAAQ,CAAC,EAAEU,WAAA,CAAY,CAAC,KAAKH,CAAC,KAAKC,CAAC,KAAKC,CAAC;EACxD;EACA,IAAIE,QAAA,GAAWZ,KAAA,CAAME,KAAA,CAAM,+BAA+B;EAC1D,IAAIU,QAAA,EAAU;IACV,IAAIC,GAAA,GAAMD,QAAA,CAAS,CAAC;IACpB,IAAIC,GAAA,CAAIC,MAAA,KAAW,GAAG;MAClBD,GAAA,GAAMA,GAAA,CAAIT,KAAA,CAAM,EAAE,EAAEC,GAAA,CAAI,UAASU,IAAA,EAAM;QACnC,OAAOA,IAAA,GAAOA,IAAA;MAClB,CAAC,EAAEC,IAAA,CAAK,EAAE;IACd;IACA,IAAIC,CAAA,GAAIC,MAAA,CAAOC,QAAA,CAASN,GAAA,CAAIO,KAAA,CAAM,GAAG,CAAC,GAAG,EAAE;IAC3C,IAAIC,CAAA,GAAIH,MAAA,CAAOC,QAAA,CAASN,GAAA,CAAIO,KAAA,CAAM,GAAG,CAAC,GAAG,EAAE;IAC3C,IAAIE,EAAA,GAAKJ,MAAA,CAAOC,QAAA,CAASN,GAAA,CAAIO,KAAA,CAAM,GAAG,CAAC,GAAG,EAAE;IAC5C,OAAO,QAAQH,CAAC,KAAKI,CAAC,KAAKC,EAAE;EACjC;EACA,OAAO;AACX;AAIW,SAAShC,cAAciC,KAAA,EAAO;EACrC,IAAI;IAAEC;EAAO,IAAID,KAAA;EACjB,IAAIE,IAAA;EACJ,IAAIC,iBAAA;EACJ,IAAIC,KAAA,OAAQ7B,cAAA,CAAA8B,QAAA,EAAS;EACrB,IAAIC,UAAA,IAAcJ,IAAA,IAAQC,iBAAA,GAAoBC,KAAA,CAAME,UAAA,MAAgB,QAAQH,iBAAA,KAAsB,SAAS,SAASA,iBAAA,CAAkBI,GAAA,MAAS,QAAQL,IAAA,KAAS,SAASA,IAAA,GAAO;EAChL,IAAIM,WAAA,GAAchC,aAAA,CAAc8B,UAAU;EAC1C,IAAIL,MAAA,IAAU,GAAG,OAAO;EACxB,OAAqB,mBAAA9B,kBAAA,CAAAsC,IAAA,EAAMtC,kBAAA,CAAAuC,QAAA,EAAW;IAClCC,QAAA,EAAU,CACQ,mBAAAxC,kBAAA,CAAAyC,GAAA,EAAKtC,mBAAA,CAAAuC,IAAA,EAAQ;MACvBC,aAAA,EAAe;MACfC,KAAA,EAAO,CACHC,MAAA,CAAOC,IAAA,EACP;QACIC,GAAA,EAAK;QACLjB;MACJ,EACJ;MACAU,QAAA,EAAwB,mBAAAxC,kBAAA,CAAAyC,GAAA,EAAKvC,2BAAA,CAAA8C,cAAA,EAAgB;QACzCC,MAAA,EAAQ,CACJd,UAAA,EACAE,WAAA,CACJ;QACAa,KAAA,EAAO;UACHC,CAAA,EAAG;UACHC,CAAA,EAAG;QACP;QACAC,GAAA,EAAK;UACDF,CAAA,EAAG;UACHC,CAAA,EAAG;QACP;QACAR,KAAA,EAAOzC,mBAAA,CAAAmD,UAAA,CAAWC;MACtB,CAAC;IACL,CAAC,GACa,mBAAAvD,kBAAA,CAAAyC,GAAA,EAAKtC,mBAAA,CAAAuC,IAAA,EAAQ;MACvBC,aAAA,EAAe;MACfC,KAAA,EAAO,CACHC,MAAA,CAAOC,IAAA,EACP;QACIU,MAAA,EAAQ;QACR1B;MACJ,EACJ;MACAU,QAAA,EAAwB,mBAAAxC,kBAAA,CAAAyC,GAAA,EAAKvC,2BAAA,CAAA8C,cAAA,EAAgB;QACzCC,MAAA,EAAQ,CACJZ,WAAA,EACAF,UAAA,CACJ;QACAe,KAAA,EAAO;UACHC,CAAA,EAAG;UACHC,CAAA,EAAG;QACP;QACAC,GAAA,EAAK;UACDF,CAAA,EAAG;UACHC,CAAA,EAAG;QACP;QACAR,KAAA,EAAOzC,mBAAA,CAAAmD,UAAA,CAAWC;MACtB,CAAC;IACL,CAAC;EAET,CAAC;AACL;AACA,IAAIV,MAAA,GAAS1C,mBAAA,CAAAmD,UAAA,CAAWG,MAAA,CAAO;EAC3BX,IAAA,EAAM;IACFY,QAAA,EAAU;IACVC,IAAA,EAAM;IACNC,KAAA,EAAO;IACPC,MAAA,EAAQ;EACZ;AACJ,CAAC","ignoreList":[]}

package/dist/esm/Wheel/WheelEdgeFade.mjs

@@ -1,5 +0,0 @@
-function WheelEdgeFade(_props) {
-  return null;
-}
-export { WheelEdgeFade };
-//# sourceMappingURL=WheelEdgeFade.mjs.map

package/dist/esm/Wheel/WheelEdgeFade.mjs.map

@@ -1 +0,0 @@
-{"version":3,"names":["WheelEdgeFade","_props"],"sources":["../../../src/Wheel/WheelEdgeFade.tsx"],"sourcesContent":[null],"mappings":"AAIO,SAASA,cAAcC,MAAA,EAA4B;EACxD,OAAO;AACT","ignoreList":[]}