@avenue-ticketing/ui 0.4.0 → 0.6.0

package/dist/react/scroll-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/scroll-header.tsx"],"names":[],"mappings":"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","file":"scroll-header.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n} from \"react\";\n\nconst DATA_ATTR = \"data-scrolled\";\n\nexport type ScrollHeaderRevealAt = \"start\" | \"center\" | \"end\";\n\ninterface ScrollHeaderContextValue {\n  revealAt: ScrollHeaderRevealAt;\n  slideIn: boolean;\n  onRevealChange?: (revealed: boolean) => void;\n}\n\nconst ScrollHeaderContext = createContext<ScrollHeaderContextValue>({\n  revealAt: \"center\",\n  slideIn: true,\n  onRevealChange: undefined,\n});\n\nfunction isScrollHeaderStickyEl(child: ReactElement): boolean {\n  return (\n    (child.type as { displayName?: string }).displayName ===\n    \"ScrollHeaderSticky\"\n  );\n}\n\nfunction isScrollHeaderTopEl(child: ReactElement): boolean {\n  return (\n    (child.type as { displayName?: string }).displayName === \"ScrollHeaderTop\"\n  );\n}\n\n/** Sticky first so `position: sticky; top: 0` pins to the scrollport, not below the hero. */\nfunction reorderScrollHeaderChildren(children: ReactNode): ReactNode[] {\n  const sticky: ReactNode[] = [];\n  const top: ReactNode[] = [];\n  const rest: ReactNode[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      if (child != null && child !== false) rest.push(child);\n      return;\n    }\n    if (isScrollHeaderStickyEl(child)) sticky.push(child);\n    else if (isScrollHeaderTopEl(child)) top.push(child);\n    else rest.push(child);\n  });\n\n  return [...sticky, ...top, ...rest];\n}\n\ninterface ScrollHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Which part of `ScrollHeaderTop` must leave the scrollport before the sticky bar shows.\n   * `start` — top edge (earliest). `center` — vertical midpoint. `end` — bottom edge (latest).\n   * If omitted: defaults to `center` when `slideIn` is true, and `start` when `slideIn` is false (in-flow bar).\n   */\n  revealAt?: ScrollHeaderRevealAt;\n  /**\n   * When `true` (default), `ScrollHeaderSticky` overlays without layout height and slides in with opacity.\n   * When `false`, the sticky bar stays in document flow (takes vertical space); use `onRevealChange` and\n   * your own styles for any fade or toolbar behavior.\n   */\n  slideIn?: boolean;\n  /**\n   * Called when the sticky header reveal state changes after scroll.\n   * `true` once the top section has crossed the reveal threshold (same moment as `data-scrolled=\"true\"`).\n   */\n  onRevealChange?: (revealed: boolean) => void;\n}\n\nconst ScrollHeader: React.FC<ScrollHeaderProps> = ({\n  revealAt,\n  slideIn = true,\n  onRevealChange,\n  children,\n  className,\n  ...props\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const resolvedRevealAt = revealAt ?? (slideIn ? \"center\" : \"start\");\n\n  return (\n    <ScrollHeaderContext.Provider\n      value={{\n        revealAt: resolvedRevealAt,\n        slideIn,\n        onRevealChange,\n      }}\n    >\n      <div\n        ref={ref}\n        data-scrolled=\"false\"\n        className={cn(\n          \"scroll-header bg-background flex h-full flex-col overflow-y-auto\",\n          className,\n        )}\n        {...props}\n      >\n        {reorderScrollHeaderChildren(children)}\n      </div>\n    </ScrollHeaderContext.Provider>\n  );\n};\n\nconst sentinelClass = \"pointer-events-none h-px w-full shrink-0\";\n\nconst ScrollHeaderTop: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n  children,\n  className,\n  ...props\n}) => {\n  const { revealAt, onRevealChange } = useContext(ScrollHeaderContext);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const onRevealChangeRef = useRef(onRevealChange);\n  onRevealChangeRef.current = onRevealChange;\n  const lastRevealedRef = useRef<boolean | undefined>(undefined);\n\n  useEffect(() => {\n    const sentinel = sentinelRef.current;\n    if (!sentinel) return;\n\n    const container = sentinel.closest<HTMLElement>(\"[data-scrolled]\");\n    if (!container) return;\n\n    lastRevealedRef.current = undefined;\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry) return;\n        const revealed = !entry.isIntersecting;\n        container.setAttribute(DATA_ATTR, revealed ? \"true\" : \"false\");\n        if (lastRevealedRef.current !== revealed) {\n          lastRevealedRef.current = revealed;\n          onRevealChangeRef.current?.(revealed);\n        }\n      },\n      { root: container, threshold: 0 },\n    );\n\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, [revealAt]);\n\n  if (revealAt === \"end\") {\n    return (\n      <div className={cn(\"shrink-0\", className)} {...props}>\n        {children}\n        <div ref={sentinelRef} className={sentinelClass} aria-hidden />\n      </div>\n    );\n  }\n\n  if (revealAt === \"center\") {\n    return (\n      <div className={cn(\"relative shrink-0\", className)} {...props}>\n        <div\n          ref={sentinelRef}\n          className={cn(\n            sentinelClass,\n            \"absolute left-0 right-0 top-1/2 z-0 -translate-y-1/2\",\n          )}\n          aria-hidden\n        />\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"shrink-0\", className)} {...props}>\n      <div ref={sentinelRef} className={sentinelClass} aria-hidden />\n      {children}\n    </div>\n  );\n};\n\nScrollHeaderTop.displayName = \"ScrollHeaderTop\";\n\nconst stickyChromeBgClass =\n  \"bg-background supports-backdrop-filter:bg-background\";\n\nconst stickyChromeBorderClass = \"border-primary/10 border-b\";\n\nconst stickyChromeClass = cn(stickyChromeBgClass, stickyChromeBorderClass);\n\nconst revealEase =\n  \"duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:duration-0 motion-reduce:transition-none\";\n\nconst ScrollHeaderSticky: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n  children,\n  className,\n  ...props\n}) => {\n  const { slideIn } = useContext(ScrollHeaderContext);\n\n  return (\n    <div\n      className={cn(\n        \"sticky top-0 z-40\",\n        slideIn ? \"h-0 overflow-visible\" : \"shrink-0\",\n      )}\n    >\n      {slideIn ? (\n        <div\n          className={cn(\n            stickyChromeClass,\n            \"transition-[opacity, transform]\",\n            revealEase,\n            '[.scroll-header:not([data-scrolled=\"true\"])_&]:pointer-events-none [.scroll-header:not([data-scrolled=\"true\"])_&]:-translate-y-1 [.scroll-header:not([data-scrolled=\"true\"])_&]:opacity-0',\n            '[.scroll-header[data-scrolled=\"true\"]_&]:translate-y-0 [.scroll-header[data-scrolled=\"true\"]_&]:opacity-100',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      ) : (\n        <div className={stickyChromeBgClass}>\n          <div className={cn(stickyChromeBorderClass, className)} {...props}>\n            {children}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nScrollHeaderSticky.displayName = \"ScrollHeaderSticky\";\n\nexport { ScrollHeader, ScrollHeaderSticky, ScrollHeaderTop };\n"]}
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/scroll-header.tsx"],"names":[],"mappings":"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","file":"scroll-header.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n} from \"react\";\n\nconst DATA_ATTR = \"data-scrolled\";\n\nexport type ScrollHeaderRevealAt = \"start\" | \"center\" | \"end\";\n\ninterface ScrollHeaderContextValue {\n  revealAt: ScrollHeaderRevealAt;\n  slideIn: boolean;\n  onRevealChange?: (revealed: boolean) => void;\n}\n\nconst ScrollHeaderContext = createContext<ScrollHeaderContextValue>({\n  revealAt: \"center\",\n  slideIn: true,\n  onRevealChange: undefined,\n});\n\nfunction isScrollHeaderStickyEl(child: ReactElement): boolean {\n  return (\n    (child.type as { displayName?: string }).displayName ===\n    \"ScrollHeaderSticky\"\n  );\n}\n\nfunction isScrollHeaderTopEl(child: ReactElement): boolean {\n  return (\n    (child.type as { displayName?: string }).displayName === \"ScrollHeaderTop\"\n  );\n}\n\n/** Sticky first so `position: sticky; top: 0` pins to the scrollport, not below the hero. */\nfunction reorderScrollHeaderChildren(children: ReactNode): ReactNode[] {\n  const sticky: ReactNode[] = [];\n  const top: ReactNode[] = [];\n  const rest: ReactNode[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      if (child != null && child !== false) rest.push(child);\n      return;\n    }\n    if (isScrollHeaderStickyEl(child)) sticky.push(child);\n    else if (isScrollHeaderTopEl(child)) top.push(child);\n    else rest.push(child);\n  });\n\n  return [...sticky, ...top, ...rest];\n}\n\ninterface ScrollHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Which part of `ScrollHeaderTop` must leave the scrollport before the sticky bar shows.\n   * `start` — top edge (earliest). `center` — vertical midpoint. `end` — bottom edge (latest).\n   * If omitted: defaults to `center` when `slideIn` is true, and `start` when `slideIn` is false (in-flow bar).\n   */\n  revealAt?: ScrollHeaderRevealAt;\n  /**\n   * When `true` (default), `ScrollHeaderSticky` overlays without layout height and slides in with opacity.\n   * When `false`, the sticky bar stays in document flow (takes vertical space); use `onRevealChange` and\n   * your own styles for any fade or toolbar behavior.\n   */\n  slideIn?: boolean;\n  /**\n   * Called when the sticky header reveal state changes after scroll.\n   * `true` once the top section has crossed the reveal threshold (same moment as `data-scrolled=\"true\"`).\n   */\n  onRevealChange?: (revealed: boolean) => void;\n}\n\nconst ScrollHeader: React.FC<ScrollHeaderProps> = ({\n  revealAt,\n  slideIn = true,\n  onRevealChange,\n  children,\n  className,\n  ...props\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const resolvedRevealAt = revealAt ?? (slideIn ? \"center\" : \"start\");\n\n  return (\n    <ScrollHeaderContext.Provider\n      value={{\n        revealAt: resolvedRevealAt,\n        slideIn,\n        onRevealChange,\n      }}\n    >\n      <div\n        ref={ref}\n        data-scrolled=\"false\"\n        className={cn(\n          \"scroll-header bg-background flex h-full flex-col overflow-y-auto\",\n          className,\n        )}\n        {...props}\n      >\n        {reorderScrollHeaderChildren(children)}\n      </div>\n    </ScrollHeaderContext.Provider>\n  );\n};\n\nconst sentinelClass = \"pointer-events-none h-px w-full shrink-0\";\n\nconst ScrollHeaderTop: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n  children,\n  className,\n  ...props\n}) => {\n  const { revealAt, onRevealChange } = useContext(ScrollHeaderContext);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const onRevealChangeRef = useRef(onRevealChange);\n  onRevealChangeRef.current = onRevealChange;\n  const lastRevealedRef = useRef<boolean | undefined>(undefined);\n\n  useEffect(() => {\n    const sentinel = sentinelRef.current;\n    if (!sentinel) return;\n\n    const container = sentinel.closest<HTMLElement>(\"[data-scrolled]\");\n    if (!container) return;\n\n    lastRevealedRef.current = undefined;\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry) return;\n        const revealed = !entry.isIntersecting;\n        container.setAttribute(DATA_ATTR, revealed ? \"true\" : \"false\");\n        if (lastRevealedRef.current !== revealed) {\n          lastRevealedRef.current = revealed;\n          onRevealChangeRef.current?.(revealed);\n        }\n      },\n      { root: container, threshold: 0 },\n    );\n\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, [revealAt]);\n\n  if (revealAt === \"end\") {\n    return (\n      <div className={cn(\"shrink-0\", className)} {...props}>\n        {children}\n        <div ref={sentinelRef} className={sentinelClass} aria-hidden />\n      </div>\n    );\n  }\n\n  if (revealAt === \"center\") {\n    return (\n      <div className={cn(\"relative shrink-0\", className)} {...props}>\n        <div\n          ref={sentinelRef}\n          className={cn(\n            sentinelClass,\n            \"absolute left-0 right-0 top-1/2 z-0 -translate-y-1/2\",\n          )}\n          aria-hidden\n        />\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"shrink-0\", className)} {...props}>\n      <div ref={sentinelRef} className={sentinelClass} aria-hidden />\n      {children}\n    </div>\n  );\n};\n\nScrollHeaderTop.displayName = \"ScrollHeaderTop\";\n\nconst stickyChromeBgClass =\n  \"bg-background supports-backdrop-filter:bg-background\";\n\nconst stickyChromeBorderClass = \"border-primary/10 border-b\";\n\nconst stickyChromeClass = cn(stickyChromeBgClass, stickyChromeBorderClass);\n\nconst revealEase =\n  \"duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:duration-0 motion-reduce:transition-none\";\n\nconst ScrollHeaderSticky: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n  children,\n  className,\n  ...props\n}) => {\n  const { slideIn } = useContext(ScrollHeaderContext);\n\n  return (\n    <div\n      className={cn(\n        \"sticky top-0 z-40\",\n        slideIn ? \"h-0 overflow-visible\" : \"shrink-0\",\n      )}\n    >\n      {slideIn ? (\n        <div\n          className={cn(\n            stickyChromeClass,\n            \"transition-[opacity, transform]\",\n            revealEase,\n            '[.scroll-header:not([data-scrolled=\"true\"])_&]:pointer-events-none [.scroll-header:not([data-scrolled=\"true\"])_&]:-translate-y-1 [.scroll-header:not([data-scrolled=\"true\"])_&]:opacity-0',\n            '[.scroll-header[data-scrolled=\"true\"]_&]:translate-y-0 [.scroll-header[data-scrolled=\"true\"]_&]:opacity-100',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      ) : (\n        <div className={stickyChromeBgClass}>\n          <div\n            className={cn(\n              stickyChromeBorderClass,\n              \"transition-[border-color] duration-300 motion-reduce:duration-0 motion-reduce:transition-none\",\n              '[.scroll-header:not([data-scrolled=\"true\"])_&]:border-b-transparent',\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nScrollHeaderSticky.displayName = \"ScrollHeaderSticky\";\n\nexport { ScrollHeader, ScrollHeaderSticky, ScrollHeaderTop };\n"]}

package/dist/react/scroll-wheel.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+declare const scrollWheelItemProps: {
+    readonly "data-scroll-wheel-item": "";
+};
+type ScrollWheelOrientation = "vertical" | "horizontal";
+type ScrollWheelProps = {
+    /** Bumps padding and recenters when external selection changes. Unmount to tear down timers. */
+    recenterKey: string | number;
+    /** `vertical` (default): `scrollTop`; `horizontal`: `scrollLeft` and row layout. */
+    orientation?: ScrollWheelOrientation;
+    /**
+     * When true, disables scroll-settle commits and turns off **center spotlight** (proximity
+     * transform/opacity on rows still updates while scrolling).
+     */
+    disabled?: boolean;
+    /** Fires with the nearest-to-center index after scroll idle or `scrollend`. */
+    onScrollSettle?: (index: number) => void;
+    children: React.ReactNode;
+    /** Merged onto the outer shell (e.g. `h-full` in a fixed-height host). */
+    className?: string;
+    /**
+     * When non-empty, the nearest row **without** `data-selected` gets `data-scroll-wheel-center`,
+     * your Tailwind tokens on `classList` when possible, and a **primary @ 40% border-color** via
+     * **inline style** (so React `className` commits do not remove the ring). Skipping the selected
+     * row avoids a duplicate ring when it sits in the center. For a short interval after `recenterKey`
+     * changes, spotlight is hidden while optical center still lags the new selection (post-click flash
+     * on the previous row). Whitespace-only turns spotlight off. Has no effect while `disabled` is
+     * true.
+     */
+    centerSpotlightClassName?: string;
+};
+/**
+ * Scroll list: value = item nearest the viewport center. End padding, proximity, `scrollend` or
+ * idle settle, touch + pen gesture suppression (iOS-safe touch ids), programmatic recenter.
+ */
+declare function ScrollWheelRoot({ recenterKey, orientation, disabled, onScrollSettle, children, className, centerSpotlightClassName, }: ScrollWheelProps): react_jsx_runtime.JSX.Element;
+declare const ScrollWheelMemo: React.MemoExoticComponent<typeof ScrollWheelRoot>;
+/** Memoized wheel — spread `ScrollWheel.itemProps` on each row. */
+declare const ScrollWheel: typeof ScrollWheelMemo & {
+    readonly itemProps: typeof scrollWheelItemProps;
+};
+
+export { ScrollWheel, type ScrollWheelOrientation, type ScrollWheelProps };

package/dist/react/scroll-wheel.js

@@ -0,0 +1,557 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/react/scroll-wheel-axis.ts
+var MAIN_AXIS_MIN_PX = 8;
+function viewportCenter(horizontal, cr) {
+  return horizontal ? cr.left + cr.width / 2 : cr.top + cr.height / 2;
+}
+function itemCenter(horizontal, r) {
+  return horizontal ? r.left + r.width / 2 : r.top + r.height / 2;
+}
+function mainClientSize(horizontal, el) {
+  return horizontal ? el.clientWidth : el.clientHeight;
+}
+function mainViewportRect(horizontal, cr) {
+  return horizontal ? cr.width : cr.height;
+}
+function halfMainViewport(horizontal, cr) {
+  return Math.max(mainViewportRect(horizontal, cr) / 2, 1);
+}
+function readScroll(horizontal, root) {
+  return horizontal ? root.scrollLeft : root.scrollTop;
+}
+function addScroll(horizontal, root, delta) {
+  if (horizontal) root.scrollLeft += delta;
+  else root.scrollTop += delta;
+}
+function maxScroll(horizontal, root) {
+  return horizontal ? Math.max(0, root.scrollWidth - root.clientWidth) : Math.max(0, root.scrollHeight - root.clientHeight);
+}
+function setScroll(horizontal, root, next, behavior) {
+  const max = maxScroll(horizontal, root);
+  const clamped = Math.min(Math.max(0, next), max);
+  if (behavior === "smooth") {
+    if (horizontal) root.scrollTo({ left: clamped, behavior: "smooth" });
+    else root.scrollTo({ top: clamped, behavior: "smooth" });
+  } else if (horizontal) {
+    root.scrollLeft = clamped;
+  } else {
+    root.scrollTop = clamped;
+  }
+}
+function applyEndPadding(horizontal, list, root, slotRect) {
+  if (horizontal) {
+    const pad = Math.max(0, (root.clientWidth - slotRect.width) / 2);
+    list.style.paddingLeft = `${pad}px`;
+    list.style.paddingRight = `${pad}px`;
+    list.style.paddingTop = "";
+    list.style.paddingBottom = "";
+  } else {
+    const pad = Math.max(0, (root.clientHeight - slotRect.height) / 2);
+    list.style.paddingTop = `${pad}px`;
+    list.style.paddingBottom = `${pad}px`;
+    list.style.paddingLeft = "";
+    list.style.paddingRight = "";
+  }
+}
+var SCROLL_WHEEL_ITEM_ATTR = "data-scroll-wheel-item";
+var scrollWheelItemProps = { [SCROLL_WHEEL_ITEM_ATTR]: "" };
+var WHEEL_SETTLE_SUPPRESS_MS = 48;
+var WHEEL_SMOOTH_SCROLL_SUPPRESS_MS = 520;
+var WHEEL_SETTLE_IDLE_MS = 200;
+var WHEEL_SETTLE_SCROLLEND_BACKUP_MS = 420;
+var SPOTLIGHT_CENTER_MISMATCH_SUPPRESS_MS = 280;
+var SCROLL_END_SUPPORTED = typeof HTMLElement !== "undefined" && "onscrollend" in HTMLElement.prototype;
+var itemSelector = `[${SCROLL_WHEEL_ITEM_ATTR}]`;
+var selectedItemSelector = `[${SCROLL_WHEEL_ITEM_ATTR}][data-selected]`;
+var CLAMP_EPS = 1;
+var CLAMP_ITERS = 8;
+function applySpotlightFrameStyles(el) {
+  el.style.setProperty("position", "relative");
+  el.style.setProperty("z-index", "10");
+  el.style.setProperty(
+    "border-color",
+    "color-mix(in oklab, var(--primary) 40%, transparent)"
+  );
+}
+function stripSpotlightFrameStyles(el) {
+  el.style.removeProperty("position");
+  el.style.removeProperty("z-index");
+  el.style.removeProperty("border-color");
+}
+var FADE_EDGES = {
+  vertical: [
+    "pointer-events-none absolute inset-x-0 top-0 z-10 h-16 bg-linear-to-b from-background via-background/85 to-transparent",
+    "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-16 bg-linear-to-t from-background via-background/85 to-transparent"
+  ],
+  horizontal: [
+    "pointer-events-none absolute inset-y-0 left-0 z-10 w-16 bg-linear-to-r from-background via-background/85 to-transparent",
+    "pointer-events-none absolute inset-y-0 right-0 z-10 w-16 bg-linear-to-l from-background via-background/85 to-transparent"
+  ]
+};
+function ScrollWheelRoot({
+  recenterKey,
+  orientation = "vertical",
+  disabled,
+  onScrollSettle,
+  children,
+  className,
+  centerSpotlightClassName
+}) {
+  const horizontal = orientation === "horizontal";
+  const centerSpotlightTokens = React.useMemo(
+    () => centerSpotlightClassName?.trim().split(/\s+/).filter(Boolean) ?? [],
+    [centerSpotlightClassName]
+  );
+  const centerSpotlightActive = centerSpotlightTokens.length > 0 && disabled !== true;
+  const centerSpotlightFingerprint = centerSpotlightClassName?.trim() ?? "";
+  const rootRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const rafProximityRef = React.useRef(0);
+  const settleTimerRef = React.useRef(null);
+  const lastSettledIdxRef = React.useRef(null);
+  const suppressSettleUntilRef = React.useRef(0);
+  const wasPopoverOpenRef = React.useRef(false);
+  const prevRecenterKeyRef = React.useRef(void 0);
+  const penPointerDownRef = React.useRef(false);
+  const touchIdsOnRootRef = React.useRef(/* @__PURE__ */ new Set());
+  const spotlightDomRef = React.useRef(null);
+  const spotlightAddedClassesRef = React.useRef(
+    /* @__PURE__ */ new WeakMap()
+  );
+  const spotlightFingerprintRef = React.useRef("");
+  const spotlightSuppressCenterMismatchUntilRef = React.useRef(0);
+  const stripSpotlightFromEl = React.useCallback((el) => {
+    if (!el) return;
+    const added = spotlightAddedClassesRef.current.get(el);
+    if (added) {
+      added.forEach((token) => el.classList.remove(token));
+      spotlightAddedClassesRef.current.delete(el);
+    }
+    el.removeAttribute("data-scroll-wheel-center");
+    stripSpotlightFrameStyles(el);
+  }, []);
+  const moveSpotlightDom = React.useCallback(
+    (next, tokens) => {
+      const prev = spotlightDomRef.current;
+      if (tokens.length === 0) {
+        if (prev) stripSpotlightFromEl(prev);
+        spotlightDomRef.current = null;
+        spotlightFingerprintRef.current = "";
+        return;
+      }
+      if (!next) return;
+      if (prev && prev !== next) stripSpotlightFromEl(prev);
+      stripSpotlightFromEl(next);
+      const newlyAdded = /* @__PURE__ */ new Set();
+      for (const token of tokens) {
+        if (!next.classList.contains(token)) {
+          next.classList.add(token);
+          newlyAdded.add(token);
+        }
+      }
+      if (newlyAdded.size > 0) {
+        spotlightAddedClassesRef.current.set(next, newlyAdded);
+      }
+      next.setAttribute("data-scroll-wheel-center", "");
+      applySpotlightFrameStyles(next);
+      spotlightDomRef.current = next;
+    },
+    [stripSpotlightFromEl]
+  );
+  const suppressingGesture = () => touchIdsOnRootRef.current.size > 0 || penPointerDownRef.current;
+  const runScrollCommitRef = React.useRef(() => {
+  });
+  const tryCommitAfterGestureRef = React.useRef(() => {
+  });
+  const clearSettleTimerRef = React.useRef(() => {
+  });
+  const clearSettleTimer = React.useCallback(() => {
+    if (settleTimerRef.current != null) {
+      clearTimeout(settleTimerRef.current);
+      settleTimerRef.current = null;
+    }
+  }, []);
+  clearSettleTimerRef.current = clearSettleTimer;
+  const applyProximityStyles = React.useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const slots = root.querySelectorAll(itemSelector);
+    if (slots.length === 0) return;
+    const cr = root.getBoundingClientRect();
+    const mid = viewportCenter(horizontal, cr);
+    const half = halfMainViewport(horizontal, cr);
+    const nodes = [...slots];
+    const dists = nodes.map((node) => {
+      const r = node.getBoundingClientRect();
+      return Math.abs(itemCenter(horizontal, r) - mid);
+    });
+    let bestI = 0;
+    let bestD = Number.POSITIVE_INFINITY;
+    nodes.forEach((node, i) => {
+      const dist = dists[i];
+      const t = Math.min(1, dist / half);
+      node.style.transform = `scale(${1 - 0.42 * t})`;
+      node.style.opacity = String(1 - 0.52 * t);
+      if (dist < bestD) {
+        bestD = dist;
+        bestI = i;
+      }
+    });
+    if (!centerSpotlightActive) {
+      if (spotlightDomRef.current !== null || spotlightFingerprintRef.current !== "") {
+        moveSpotlightDom(null, []);
+      }
+      return;
+    }
+    const selectedIdx = nodes.findIndex((n) => n.hasAttribute("data-selected"));
+    const el = nodes[bestI];
+    if (selectedIdx >= 0 && bestI !== selectedIdx && Date.now() < spotlightSuppressCenterMismatchUntilRef.current) {
+      if (spotlightDomRef.current !== null || spotlightFingerprintRef.current !== "") {
+        moveSpotlightDom(null, []);
+      }
+      spotlightFingerprintRef.current = "";
+      return;
+    }
+    if (el.hasAttribute("data-selected")) {
+      if (spotlightDomRef.current !== null || spotlightFingerprintRef.current !== "") {
+        moveSpotlightDom(null, []);
+      }
+      spotlightFingerprintRef.current = "";
+      return;
+    }
+    const fp = centerSpotlightFingerprint;
+    if (el === spotlightDomRef.current && fp === spotlightFingerprintRef.current) {
+      applySpotlightFrameStyles(el);
+      return;
+    }
+    moveSpotlightDom(el, centerSpotlightTokens);
+    spotlightFingerprintRef.current = fp;
+  }, [
+    horizontal,
+    centerSpotlightActive,
+    centerSpotlightTokens,
+    centerSpotlightFingerprint,
+    moveSpotlightDom
+  ]);
+  const queueProximity = React.useCallback(() => {
+    cancelAnimationFrame(rafProximityRef.current);
+    rafProximityRef.current = requestAnimationFrame(applyProximityStyles);
+  }, [applyProximityStyles]);
+  React.useLayoutEffect(() => {
+    if (disabled === true) {
+      moveSpotlightDom(null, []);
+      spotlightFingerprintRef.current = "";
+      return;
+    }
+    if (centerSpotlightActive) {
+      queueProximity();
+    }
+  }, [disabled, centerSpotlightActive, moveSpotlightDom, queueProximity]);
+  const applyWheelPadding = React.useCallback(() => {
+    const list = listRef.current;
+    const root = rootRef.current;
+    if (!list || !root) return;
+    const slot = root.querySelector(itemSelector);
+    if (!slot) return;
+    applyEndPadding(horizontal, list, root, slot.getBoundingClientRect());
+  }, [horizontal]);
+  const findBestIndex = React.useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return -1;
+    if (mainClientSize(horizontal, root) < MAIN_AXIS_MIN_PX) return -1;
+    const slots = [...root.querySelectorAll(itemSelector)];
+    if (slots.length === 0) return -1;
+    const cr = root.getBoundingClientRect();
+    if (mainViewportRect(horizontal, cr) < MAIN_AXIS_MIN_PX) return -1;
+    const mid = viewportCenter(horizontal, cr);
+    let best = 0;
+    let bestD = Number.POSITIVE_INFINITY;
+    slots.forEach((node, i) => {
+      const d = Math.abs(itemCenter(horizontal, node.getBoundingClientRect()) - mid);
+      if (d < bestD) {
+        bestD = d;
+        best = i;
+      }
+    });
+    return best;
+  }, [horizontal]);
+  const clampWheelScroll = React.useCallback(() => {
+    const root = rootRef.current;
+    if (!root || mainClientSize(horizontal, root) < MAIN_AXIS_MIN_PX) return;
+    const slots = [...root.querySelectorAll(itemSelector)];
+    if (slots.length < 2) return;
+    for (let i = 0; i < CLAMP_ITERS; i += 1) {
+      const rootRect = root.getBoundingClientRect();
+      const mid = viewportCenter(horizontal, rootRect);
+      const fr = slots[0].getBoundingClientRect();
+      const lr = slots[slots.length - 1].getBoundingClientRect();
+      const firstMid = itemCenter(horizontal, fr);
+      const lastMid = itemCenter(horizontal, lr);
+      if (firstMid > mid + CLAMP_EPS) {
+        suppressSettleUntilRef.current = Date.now() + WHEEL_SETTLE_SUPPRESS_MS;
+        addScroll(horizontal, root, firstMid - mid);
+        continue;
+      }
+      if (lastMid < mid - CLAMP_EPS) {
+        suppressSettleUntilRef.current = Date.now() + WHEEL_SETTLE_SUPPRESS_MS;
+        addScroll(horizontal, root, lastMid - mid);
+        continue;
+      }
+      break;
+    }
+  }, [horizontal]);
+  const runScrollCommit = React.useCallback(() => {
+    if (suppressingGesture() || !onScrollSettle || disabled) return;
+    if (Date.now() < suppressSettleUntilRef.current) return;
+    clampWheelScroll();
+    const idx = findBestIndex();
+    if (idx < 0) return;
+    if (idx !== lastSettledIdxRef.current) {
+      lastSettledIdxRef.current = idx;
+      onScrollSettle(idx);
+    }
+    queueProximity();
+  }, [onScrollSettle, disabled, findBestIndex, queueProximity, clampWheelScroll]);
+  runScrollCommitRef.current = runScrollCommit;
+  const scrollSelectedToCenter = React.useCallback(
+    (scrollBehavior = "auto") => {
+      const root = rootRef.current;
+      if (!root) return;
+      const selected = root.querySelector(selectedItemSelector);
+      lastSettledIdxRef.current = null;
+      suppressSettleUntilRef.current = Date.now() + (scrollBehavior === "smooth" ? WHEEL_SMOOTH_SCROLL_SUPPRESS_MS : WHEEL_SETTLE_SUPPRESS_MS);
+      if (selected) {
+        const rootRect = root.getBoundingClientRect();
+        const sr = selected.getBoundingClientRect();
+        const delta = itemCenter(horizontal, sr) - viewportCenter(horizontal, rootRect);
+        setScroll(
+          horizontal,
+          root,
+          readScroll(horizontal, root) + delta,
+          scrollBehavior
+        );
+      }
+      queueProximity();
+    },
+    [horizontal, queueProximity]
+  );
+  const scheduleIdleSettle = React.useCallback(() => {
+    if (!onScrollSettle || disabled || suppressingGesture()) return;
+    clearSettleTimer();
+    settleTimerRef.current = setTimeout(
+      runScrollCommit,
+      SCROLL_END_SUPPORTED ? WHEEL_SETTLE_SCROLLEND_BACKUP_MS : WHEEL_SETTLE_IDLE_MS
+    );
+  }, [onScrollSettle, disabled, clearSettleTimer, runScrollCommit]);
+  const tryCommitAfterGestureRelease = React.useCallback(() => {
+    if (suppressingGesture()) return;
+    const root = rootRef.current;
+    if (!root) return;
+    const s0 = readScroll(horizontal, root);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (suppressingGesture()) return;
+        const r = rootRef.current;
+        if (!r) return;
+        if (readScroll(horizontal, r) !== s0) {
+          queueProximity();
+          scheduleIdleSettle();
+          return;
+        }
+        runScrollCommit();
+      });
+    });
+  }, [horizontal, runScrollCommit, scheduleIdleSettle, queueProximity]);
+  tryCommitAfterGestureRef.current = tryCommitAfterGestureRelease;
+  const onPointerDownCapture = React.useCallback(
+    (e) => {
+      if (!onScrollSettle || disabled || e.pointerType !== "pen") return;
+      penPointerDownRef.current = true;
+      clearSettleTimer();
+    },
+    [onScrollSettle, disabled, clearSettleTimer]
+  );
+  const onTouchStartCapture = React.useCallback(
+    (e) => {
+      if (!onScrollSettle || disabled) return;
+      for (let i = 0; i < e.changedTouches.length; i += 1) {
+        touchIdsOnRootRef.current.add(e.changedTouches[i].identifier);
+      }
+      clearSettleTimer();
+    },
+    [onScrollSettle, disabled, clearSettleTimer]
+  );
+  const onScroll = React.useCallback(() => {
+    queueProximity();
+    if (!onScrollSettle || disabled) return;
+    if (suppressingGesture()) clearSettleTimer();
+    else scheduleIdleSettle();
+  }, [queueProximity, onScrollSettle, disabled, clearSettleTimer, scheduleIdleSettle]);
+  React.useEffect(() => {
+    if (disabled || !onScrollSettle) return;
+    const onPenEnd = (e) => {
+      if (e.pointerType !== "pen" || !penPointerDownRef.current) return;
+      penPointerDownRef.current = false;
+      tryCommitAfterGestureRef.current();
+    };
+    const onTouchEnd = (e) => {
+      for (let i = 0; i < e.changedTouches.length; i += 1) {
+        touchIdsOnRootRef.current.delete(e.changedTouches[i].identifier);
+      }
+      if (touchIdsOnRootRef.current.size === 0) tryCommitAfterGestureRef.current();
+    };
+    window.addEventListener("pointerup", onPenEnd, true);
+    window.addEventListener("pointercancel", onPenEnd, true);
+    window.addEventListener("touchend", onTouchEnd, true);
+    window.addEventListener("touchcancel", onTouchEnd, true);
+    return () => {
+      window.removeEventListener("pointerup", onPenEnd, true);
+      window.removeEventListener("pointercancel", onPenEnd, true);
+      window.removeEventListener("touchend", onTouchEnd, true);
+      window.removeEventListener("touchcancel", onTouchEnd, true);
+    };
+  }, [disabled, onScrollSettle]);
+  React.useLayoutEffect(() => {
+    let followRaf1 = 0;
+    let followRaf2 = 0;
+    let ro;
+    const root = rootRef.current;
+    if (!root) return;
+    const onResize = () => {
+      applyWheelPadding();
+      queueProximity();
+    };
+    onResize();
+    const prev = prevRecenterKeyRef.current;
+    const firstOpen = !wasPopoverOpenRef.current;
+    const selectionChanged = wasPopoverOpenRef.current && prev !== void 0 && prev !== recenterKey;
+    if (firstOpen || selectionChanged) {
+      if (selectionChanged) {
+        spotlightSuppressCenterMismatchUntilRef.current = Date.now() + SPOTLIGHT_CENTER_MISMATCH_SUPPRESS_MS;
+      }
+      const reducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const behavior = selectionChanged && !reducedMotion ? "smooth" : "auto";
+      scrollSelectedToCenter(behavior);
+      if (firstOpen) {
+        followRaf1 = requestAnimationFrame(() => {
+          followRaf2 = requestAnimationFrame(() => {
+            scrollSelectedToCenter("auto");
+          });
+        });
+      }
+    }
+    prevRecenterKeyRef.current = recenterKey;
+    wasPopoverOpenRef.current = true;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(onResize);
+      ro.observe(root);
+    }
+    return () => {
+      ro?.disconnect();
+      cancelAnimationFrame(followRaf1);
+      cancelAnimationFrame(followRaf2);
+    };
+  }, [
+    recenterKey,
+    orientation,
+    centerSpotlightClassName,
+    applyWheelPadding,
+    scrollSelectedToCenter,
+    queueProximity
+  ]);
+  React.useLayoutEffect(() => {
+    return () => {
+      penPointerDownRef.current = false;
+      touchIdsOnRootRef.current.clear();
+      wasPopoverOpenRef.current = false;
+      prevRecenterKeyRef.current = void 0;
+      lastSettledIdxRef.current = null;
+      spotlightSuppressCenterMismatchUntilRef.current = 0;
+      moveSpotlightDom(null, []);
+      clearSettleTimer();
+      cancelAnimationFrame(rafProximityRef.current);
+    };
+  }, []);
+  React.useLayoutEffect(() => {
+    if (!onScrollSettle || disabled || !SCROLL_END_SUPPORTED) return;
+    const root = rootRef.current;
+    if (!root) return;
+    const onScrollEnd = () => {
+      if (suppressingGesture()) return;
+      clearSettleTimerRef.current();
+      runScrollCommitRef.current();
+    };
+    root.addEventListener("scrollend", onScrollEnd);
+    return () => root.removeEventListener("scrollend", onScrollEnd);
+  }, [disabled, onScrollSettle]);
+  React.useLayoutEffect(() => {
+    if (!centerSpotlightActive) return;
+    queueProximity();
+  }, [centerSpotlightActive, children, queueProximity]);
+  const fadeClasses = FADE_EDGES[orientation];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative z-2 flex h-full min-h-0 min-w-0 flex-1 basis-0 overflow-hidden",
+        horizontal ? "flex-row" : "flex-col",
+        className
+      ),
+      "data-scroll-wheel-orientation": orientation,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative isolate flex min-h-0 min-w-0 flex-1",
+            horizontal ? "flex-row" : "flex-col"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: rootRef,
+                className: cn(
+                  "relative z-0 min-h-0 min-w-0 flex-1 [-ms-overflow-style:none] [scrollbar-width:none] [-webkit-overflow-scrolling:touch] [&::-webkit-scrollbar]:hidden",
+                  horizontal ? "overflow-x-auto overflow-y-hidden overscroll-x-contain" : "overflow-y-auto overflow-x-hidden overscroll-y-contain"
+                ),
+                onPointerDownCapture,
+                onTouchStartCapture,
+                onScroll,
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: listRef,
+                    className: cn(
+                      "flex gap-0.5",
+                      horizontal ? "min-w-min flex-row flex-nowrap items-center gap-0.5 py-0 pl-2 pr-2 [&>[data-scroll-wheel-item]]:shrink-0" : "min-h-0 flex-col px-2 pb-2"
+                    ),
+                    children
+                  }
+                )
+              }
+            ),
+            fadeClasses.map((cls, i) => /* @__PURE__ */ jsx("div", { className: cls, "aria-hidden": true }, i))
+          ]
+        }
+      )
+    }
+  );
+}
+var ScrollWheelMemo = React.memo(ScrollWheelRoot);
+ScrollWheelMemo.displayName = "ScrollWheel";
+var ScrollWheel = Object.assign(ScrollWheelMemo, {
+  /** Marker props for each wheel row — spread onto the focusable control. */
+  itemProps: scrollWheelItemProps
+});
+
+export { ScrollWheel };
+//# sourceMappingURL=scroll-wheel.js.map
+//# sourceMappingURL=scroll-wheel.js.map