@aviala-design/spiral 2.6.0 → 2.6.2

package/dist/index.cjs

@@ -6304,7 +6304,70 @@ var import_react43 = require("react");
 // src/lib/sticky-wheel.ts
 var WHEEL_STICKY_AMOUNT = 0.45;
 var WHEEL_SCROLL_END_MS = 100;
-var WHEEL_STEP_THRESHOLD_FACTOR = 0.5 + WHEEL_STICKY_AMOUNT * 0.35;
+var WHEEL_STEP_THRESHOLD_FACTOR = 0.35;
+var WHEEL_ACCUM_IDLE_MS = 140;
+var WHEEL_LOOP_SECTIONS = 3;
+var WHEEL_LOOP_MIDDLE_SECTION = 1;
+function consumeWheelSteps(accum, deltaY, threshold) {
+  if (!(threshold > 0) || !Number.isFinite(deltaY) || deltaY === 0) {
+    return { nextAccum: accum, steps: 0 };
+  }
+  let nextAccum = accum;
+  if (nextAccum !== 0 && Math.sign(nextAccum) !== Math.sign(deltaY)) {
+    nextAccum = 0;
+  }
+  nextAccum += deltaY;
+  const steps = Math.trunc(nextAccum / threshold);
+  if (steps === 0) {
+    return { nextAccum, steps: 0 };
+  }
+  nextAccum -= steps * threshold;
+  return { nextAccum, steps };
+}
+function normalizeWheelIndex(index, length) {
+  if (length <= 0) return 0;
+  return (index % length + length) % length;
+}
+function recenterLoopIndex(rawIndex, length, middleSection = WHEEL_LOOP_MIDDLE_SECTION) {
+  if (length <= 0) return 0;
+  return middleSection * length + normalizeWheelIndex(rawIndex, length);
+}
+function nearestLoopIndex(currentRawIndex, valueIndex, length, sections = WHEEL_LOOP_SECTIONS, preferDelta = 0) {
+  if (length <= 0 || sections <= 0) return 0;
+  const slot = normalizeWheelIndex(valueIndex, length);
+  let best = slot;
+  let bestScore = Number.POSITIVE_INFINITY;
+  for (let section = 0; section < sections; section += 1) {
+    const candidate = section * length + slot;
+    const distance = Math.abs(candidate - currentRawIndex);
+    const directionBias = preferDelta === 0 ? 0 : Math.sign(candidate - currentRawIndex) === Math.sign(preferDelta) ? -0.25 : 0.25;
+    const score = distance + directionBias;
+    if (score < bestScore) {
+      bestScore = score;
+      best = candidate;
+    }
+  }
+  return best;
+}
+function stepLoopRawIndex(currentRawIndex, steps, length, sections = WHEEL_LOOP_SECTIONS, middleSection = WHEEL_LOOP_MIDDLE_SECTION) {
+  if (length <= 0) return { rawIndex: 0, didRecenter: false };
+  const maxIndex = sections * length - 1;
+  let rawIndex = currentRawIndex;
+  let didRecenter = false;
+  const section = Math.floor(rawIndex / length);
+  if (section !== middleSection) {
+    rawIndex = recenterLoopIndex(rawIndex, length, middleSection);
+    didRecenter = true;
+  }
+  const next = rawIndex + steps;
+  if (next < 0 || next > maxIndex) {
+    return {
+      rawIndex: recenterLoopIndex(next, length, middleSection),
+      didRecenter: true
+    };
+  }
+  return { rawIndex: next, didRecenter };
+}
 function stickyRemapProgress(t, amount) {
   const clamped = Math.max(0, Math.min(1, t));
   if (amount <= 0) return clamped;
@@ -6323,14 +6386,11 @@ function stickyRoundIndex(fractionalIndex, stickiness = WHEEL_STICKY_AMOUNT) {
 
 // src/components/date-picker/date-picker-time-wheel.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var LOOP_SECTIONS = 3;
-var MIDDLE_SECTION = 1;
+var LOOP_SECTIONS = WHEEL_LOOP_SECTIONS;
+var MIDDLE_SECTION = WHEEL_LOOP_MIDDLE_SECTION;
 function formatWheelValue(value) {
   return String(value).padStart(2, "0");
 }
-function normalizeIndex(index, length) {
-  return (index % length + length) % length;
-}
 function getValueIndex(values, value) {
   const index = values.indexOf(value);
   if (index >= 0) return index;
@@ -6368,17 +6428,28 @@ function DatePickerTimeWheelColumn({
   layoutKey = 0
 }) {
   const scrollRef = (0, import_react43.useRef)(null);
+  const clipTrackRef = (0, import_react43.useRef)(null);
   const isUserScrollingRef = (0, import_react43.useRef)(false);
   const isProgrammaticScrollRef = (0, import_react43.useRef)(false);
   const smoothTargetValueRef = (0, import_react43.useRef)(null);
   const scrollEndTimerRef = (0, import_react43.useRef)(void 0);
   const wheelAccumRef = (0, import_react43.useRef)(0);
+  const wheelAccumIdleTimerRef = (0, import_react43.useRef)(void 0);
   const selectedValueRef = (0, import_react43.useRef)(value);
   selectedValueRef.current = value;
   const repeatedValues = (0, import_react43.useMemo)(() => {
     if (!loop) return [...values];
     return Array.from({ length: LOOP_SECTIONS }, () => values).flat();
   }, [loop, values]);
+  const readRawIndex2 = (0, import_react43.useCallback)((container, itemHeight) => {
+    return Math.round(container.scrollTop / itemHeight);
+  }, []);
+  const syncClipTrack = (0, import_react43.useCallback)(() => {
+    const container = scrollRef.current;
+    const track = clipTrackRef.current;
+    if (!container || !track) return;
+    track.style.transform = `translate3d(0, ${-container.scrollTop}px, 0)`;
+  }, []);
   const scrollToIndex = (0, import_react43.useCallback)(
     (index, behavior = "auto") => {
       const container = scrollRef.current;
@@ -6387,21 +6458,13 @@ function DatePickerTimeWheelColumn({
       if (itemHeight <= 0) return;
       isProgrammaticScrollRef.current = true;
       container.scrollTo({ top: index * itemHeight, behavior });
-    },
-    []
-  );
-  const scrollToValue = (0, import_react43.useCallback)(
-    (nextValue, behavior = "smooth") => {
-      if (behavior === "smooth") {
-        smoothTargetValueRef.current = nextValue;
+      if (behavior === "auto") {
+        syncClipTrack();
       } else {
-        smoothTargetValueRef.current = null;
+        requestAnimationFrame(syncClipTrack);
       }
-      const valueIndex = getValueIndex(values, nextValue);
-      const targetIndex = loop ? values.length * MIDDLE_SECTION + valueIndex : valueIndex;
-      scrollToIndex(targetIndex, behavior);
     },
-    [loop, scrollToIndex, values]
+    [syncClipTrack]
   );
   const syncScrollToValue = (0, import_react43.useCallback)(
     (behavior = "auto") => {
@@ -6414,24 +6477,27 @@ function DatePickerTimeWheelColumn({
       const itemHeight = readItemHeight(container);
       if (itemHeight <= 0) return;
       const valueIndex = getValueIndex(values, selectedValueRef.current);
-      const targetIndex = loop ? values.length * MIDDLE_SECTION + valueIndex : valueIndex;
-      const currentIndex = Math.round(container.scrollTop / itemHeight);
-      const currentValueIndex = loop ? normalizeIndex(currentIndex, values.length) : Math.min(Math.max(currentIndex, 0), values.length - 1);
-      const inMiddleSection = !loop || Math.floor(currentIndex / values.length) === MIDDLE_SECTION;
-      if (currentValueIndex === valueIndex && inMiddleSection) return;
+      const currentIndex = readRawIndex2(container, itemHeight);
+      const currentValueIndex = loop ? normalizeWheelIndex(currentIndex, values.length) : Math.min(Math.max(currentIndex, 0), values.length - 1);
+      if (currentValueIndex === valueIndex) {
+        syncClipTrack();
+        return;
+      }
+      const targetIndex = loop ? nearestLoopIndex(currentIndex, valueIndex, values.length, LOOP_SECTIONS) : valueIndex;
       scrollToIndex(targetIndex, behavior);
     },
-    [loop, scrollToIndex, values]
+    [loop, readRawIndex2, scrollToIndex, syncClipTrack, values]
   );
   const settleScroll = (0, import_react43.useCallback)(() => {
     const container = scrollRef.current;
-    if (!container || isProgrammaticScrollRef.current) {
-      isProgrammaticScrollRef.current = false;
+    if (!container) return;
+    const wasProgrammatic = isProgrammaticScrollRef.current;
+    isProgrammaticScrollRef.current = false;
+    const itemHeight = readItemHeight(container);
+    if (itemHeight <= 0 || values.length === 0) {
       smoothTargetValueRef.current = null;
       return;
     }
-    const itemHeight = readItemHeight(container);
-    if (itemHeight <= 0 || values.length === 0) return;
     const lastIndex = values.length - 1;
     const maxScroll = Math.max(container.scrollHeight - container.clientHeight, 0);
     const fractionalIndex = container.scrollTop / itemHeight;
@@ -6443,12 +6509,21 @@ function DatePickerTimeWheelColumn({
         rawIndex = 0;
       }
     }
-    const valueIndex = loop ? normalizeIndex(rawIndex, values.length) : Math.min(Math.max(rawIndex, 0), lastIndex);
+    const valueIndex = loop ? normalizeWheelIndex(rawIndex, values.length) : Math.min(Math.max(rawIndex, 0), lastIndex);
     const nextValue = values[valueIndex];
-    const targetIndex = loop ? values.length * MIDDLE_SECTION + valueIndex : valueIndex;
+    const targetIndex = loop ? recenterLoopIndex(rawIndex, values.length, MIDDLE_SECTION) : valueIndex;
     const targetTop = targetIndex * itemHeight;
     const section = loop ? Math.floor(rawIndex / values.length) : MIDDLE_SECTION;
     const needsLoopRecenter = loop && section !== MIDDLE_SECTION;
+    if (wasProgrammatic) {
+      if (needsLoopRecenter) {
+        isProgrammaticScrollRef.current = true;
+        container.scrollTop = targetTop;
+      }
+      smoothTargetValueRef.current = null;
+      syncClipTrack();
+      return;
+    }
     const needsSnap = Math.abs(container.scrollTop - targetTop) > 1;
     if (needsLoopRecenter) {
       isProgrammaticScrollRef.current = true;
@@ -6466,22 +6541,26 @@ function DatePickerTimeWheelColumn({
     }
     isUserScrollingRef.current = false;
     wheelAccumRef.current = 0;
-  }, [loop, onChange, values]);
+    syncClipTrack();
+  }, [loop, onChange, syncClipTrack, values]);
   const handleScroll = (0, import_react43.useCallback)(() => {
+    syncClipTrack();
     if (isProgrammaticScrollRef.current) return;
     isUserScrollingRef.current = true;
     if (scrollEndTimerRef.current) {
       clearTimeout(scrollEndTimerRef.current);
     }
     scrollEndTimerRef.current = setTimeout(settleScroll, WHEEL_SCROLL_END_MS);
-  }, [settleScroll]);
+  }, [settleScroll, syncClipTrack]);
   (0, import_react43.useLayoutEffect)(() => {
     syncScrollToValue("auto");
+    syncClipTrack();
     const raf = requestAnimationFrame(() => {
       syncScrollToValue("auto");
+      syncClipTrack();
     });
     return () => cancelAnimationFrame(raf);
-  }, [layoutKey, syncScrollToValue, value]);
+  }, [layoutKey, syncClipTrack, syncScrollToValue, value]);
   (0, import_react43.useEffect)(() => {
     const container = scrollRef.current;
     if (!container) return;
@@ -6509,23 +6588,48 @@ function DatePickerTimeWheelColumn({
     if (!container) return;
     const onWheel = (event) => {
       event.preventDefault();
-      if (isProgrammaticScrollRef.current || values.length === 0) return;
+      if (values.length === 0) return;
       const itemHeight = readItemHeight(container);
       if (itemHeight <= 0) return;
-      wheelAccumRef.current += event.deltaY;
+      if (wheelAccumIdleTimerRef.current) {
+        clearTimeout(wheelAccumIdleTimerRef.current);
+      }
+      wheelAccumIdleTimerRef.current = setTimeout(() => {
+        wheelAccumRef.current = 0;
+      }, WHEEL_ACCUM_IDLE_MS);
       const threshold = itemHeight * WHEEL_STEP_THRESHOLD_FACTOR;
-      if (Math.abs(wheelAccumRef.current) < threshold) return;
-      const direction = wheelAccumRef.current > 0 ? 1 : -1;
-      wheelAccumRef.current = 0;
-      const currentIndex = getValueIndex(values, selectedValueRef.current);
-      const nextIndex = loop ? normalizeIndex(currentIndex + direction, values.length) : Math.min(Math.max(currentIndex + direction, 0), values.length - 1);
-      if (nextIndex === currentIndex) return;
+      const { nextAccum, steps } = consumeWheelSteps(
+        wheelAccumRef.current,
+        event.deltaY,
+        threshold
+      );
+      wheelAccumRef.current = nextAccum;
+      if (steps === 0) return;
+      const currentRaw = readRawIndex2(container, itemHeight);
+      let targetRaw;
+      if (loop) {
+        if (Math.floor(currentRaw / values.length) !== MIDDLE_SECTION) {
+          isProgrammaticScrollRef.current = true;
+          container.scrollTop = recenterLoopIndex(currentRaw, values.length, MIDDLE_SECTION) * itemHeight;
+        }
+        targetRaw = stepLoopRawIndex(
+          readRawIndex2(container, itemHeight),
+          steps,
+          values.length,
+          LOOP_SECTIONS,
+          MIDDLE_SECTION
+        ).rawIndex;
+      } else {
+        targetRaw = Math.min(Math.max(currentRaw + steps, 0), values.length - 1);
+        if (targetRaw === currentRaw) return;
+      }
       if (scrollEndTimerRef.current) {
         clearTimeout(scrollEndTimerRef.current);
       }
-      const nextValue = values[nextIndex];
+      const nextValue = values[normalizeWheelIndex(targetRaw, values.length)];
       isUserScrollingRef.current = false;
-      scrollToValue(nextValue, "smooth");
+      smoothTargetValueRef.current = nextValue;
+      scrollToIndex(targetRaw, "smooth");
       if (nextValue !== selectedValueRef.current) {
         onChange(nextValue);
       }
@@ -6533,35 +6637,49 @@ function DatePickerTimeWheelColumn({
     container.addEventListener("wheel", onWheel, { passive: false });
     return () => {
       container.removeEventListener("wheel", onWheel);
+      if (wheelAccumIdleTimerRef.current) {
+        clearTimeout(wheelAccumIdleTimerRef.current);
+      }
     };
-  }, [loop, onChange, scrollToValue, values]);
+  }, [loop, onChange, readRawIndex2, scrollToIndex, values]);
   const handleKeyDown = (event) => {
-    const currentIndex = getValueIndex(values, selectedValueRef.current);
-    let nextIndex = null;
+    const container = scrollRef.current;
+    if (!container || values.length === 0) return;
+    const itemHeight = readItemHeight(container);
+    if (itemHeight <= 0) return;
+    const currentRaw = readRawIndex2(container, itemHeight);
+    let targetRaw = null;
+    let preferDelta = 0;
     switch (event.key) {
       case "ArrowUp":
-        nextIndex = loop ? normalizeIndex(currentIndex - 1, values.length) : Math.max(currentIndex - 1, 0);
+        preferDelta = -1;
+        targetRaw = loop ? stepLoopRawIndex(currentRaw, -1, values.length, LOOP_SECTIONS, MIDDLE_SECTION).rawIndex : Math.max(currentRaw - 1, 0);
         break;
       case "ArrowDown":
-        nextIndex = loop ? normalizeIndex(currentIndex + 1, values.length) : Math.min(currentIndex + 1, values.length - 1);
+        preferDelta = 1;
+        targetRaw = loop ? stepLoopRawIndex(currentRaw, 1, values.length, LOOP_SECTIONS, MIDDLE_SECTION).rawIndex : Math.min(currentRaw + 1, values.length - 1);
         break;
       case "Home":
-        nextIndex = 0;
+        targetRaw = loop ? nearestLoopIndex(currentRaw, 0, values.length, LOOP_SECTIONS, -1) : 0;
         break;
       case "End":
-        nextIndex = values.length - 1;
+        targetRaw = loop ? nearestLoopIndex(currentRaw, values.length - 1, values.length, LOOP_SECTIONS, 1) : values.length - 1;
         break;
       default:
         return;
     }
     event.preventDefault();
-    const nextValue = values[nextIndex];
-    scrollToValue(nextValue, "smooth");
+    if (targetRaw === currentRaw && preferDelta === 0) return;
+    const nextValue = values[normalizeWheelIndex(targetRaw, values.length)];
+    isUserScrollingRef.current = false;
+    smoothTargetValueRef.current = nextValue;
+    scrollToIndex(targetRaw, "smooth");
     if (nextValue !== selectedValueRef.current) {
       onChange(nextValue);
     }
   };
-  const selectedOptionId = loop ? `${ariaLabel}-${value}-${values.length * MIDDLE_SECTION + getValueIndex(values, value)}` : `${ariaLabel}-${value}`;
+  const committedIndex = getValueIndex(values, value);
+  const selectedOptionId = loop ? `${ariaLabel}-${value}-${values.length * MIDDLE_SECTION + committedIndex}` : `${ariaLabel}-${value}`;
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("aviala-datepicker-time__wheel", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "aviala-datepicker-time__wheel-highlight", "aria-hidden": true }),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -6590,15 +6708,15 @@ function DatePickerTimeWheelColumn({
         tabIndex: 0,
         onKeyDown: handleKeyDown,
         children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "aviala-datepicker-time__wheel-list", children: repeatedValues.map((itemValue, index) => {
-          const isSelected = itemValue === value;
+          const isCommitted = itemValue === value;
           const optionId = loop ? `${ariaLabel}-${itemValue}-${index}` : `${ariaLabel}-${itemValue}`;
           return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "li",
             {
-              id: optionId,
+              id: loop && isCommitted && Math.floor(index / values.length) === MIDDLE_SECTION ? selectedOptionId : optionId,
               className: "aviala-datepicker-time__wheel-item",
               role: "option",
-              "aria-selected": isSelected,
+              "aria-selected": isCommitted,
               children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 "button",
                 {
@@ -6607,10 +6725,12 @@ function DatePickerTimeWheelColumn({
                     "aviala-datepicker-time__wheel-option",
                     typographyVariants({ level: "text" })
                   ),
-                  "data-selected": isSelected ? "true" : void 0,
+                  "data-selected": isCommitted ? "true" : void 0,
                   tabIndex: -1,
                   onClick: () => {
-                    scrollToValue(itemValue, "smooth");
+                    isUserScrollingRef.current = false;
+                    smoothTargetValueRef.current = itemValue;
+                    scrollToIndex(index, "smooth");
                     if (itemValue !== selectedValueRef.current) {
                       onChange(itemValue);
                     }
@@ -6623,7 +6743,18 @@ function DatePickerTimeWheelColumn({
           );
         }) })
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "aviala-datepicker-time__wheel-clip", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref: clipTrackRef, className: "aviala-datepicker-time__wheel-clip-track", children: repeatedValues.map((itemValue, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      "div",
+      {
+        className: cn(
+          "aviala-datepicker-time__wheel-clip-item",
+          typographyVariants({ level: "text" })
+        ),
+        children: formatValue(itemValue)
+      },
+      `clip-${loop ? `${itemValue}-${index}` : itemValue}`
+    )) }) })
   ] });
 }
 
@@ -7359,8 +7490,8 @@ function DatePickerCalendar({ className }) {
   const { code } = useLocale();
   const locale = useLocaleMessages("DatePicker");
   const rtl = useRtl();
-  const PrevIcon = rtl ? import_icons12.DirectionArrowRight : import_icons12.DirectionArrowLeft;
-  const NextIcon = rtl ? import_icons12.DirectionArrowLeft : import_icons12.DirectionArrowRight;
+  const PrevIcon = rtl ? import_icons12.DirectionArrowRightLight : import_icons12.DirectionArrowLeftLight;
+  const NextIcon = rtl ? import_icons12.DirectionArrowLeftLight : import_icons12.DirectionArrowRightLight;
   const {
     mode,
     viewMonth,
@@ -7382,6 +7513,10 @@ function DatePickerCalendar({ className }) {
   const dayGridRef = (0, import_react45.useRef)(null);
   const pendingDayFocusRef = (0, import_react45.useRef)(false);
   const [monthSlide, setMonthSlide] = (0, import_react45.useState)(null);
+  const [prevNavAnimKey, setPrevNavAnimKey] = (0, import_react45.useState)(0);
+  const [nextNavAnimKey, setNextNavAnimKey] = (0, import_react45.useState)(0);
+  const [prevNavAnimating, setPrevNavAnimating] = (0, import_react45.useState)(false);
+  const [nextNavAnimating, setNextNavAnimating] = (0, import_react45.useState)(false);
   const isMonthPanel = activePanel === "month";
   const isTimePanel = activePanel === "time" && enableTime;
   const targetContentView = isMonthPanel ? "month" : "date";
@@ -7632,8 +7767,23 @@ function DatePickerCalendar({ className }) {
           type: "button",
           className: "aviala-datepicker-calendar__nav aviala-focus-ring",
           "aria-label": isMonthPanel ? locale.previousYear : locale.previousMonth,
-          onClick: () => setViewMonth(addMonths(viewMonth, -stepMonth)),
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PrevIcon, { level: "text", biggerSize: true, "aria-hidden": true })
+          onClick: () => {
+            if (!prefersReducedMotion2()) {
+              setPrevNavAnimKey((n) => n + 1);
+              setPrevNavAnimating(true);
+            }
+            setViewMonth(addMonths(viewMonth, -stepMonth));
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "aviala-datepicker-calendar__nav-icon", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            "span",
+            {
+              className: "aviala-datepicker-calendar__nav-icon-inner",
+              "data-anim": prevNavAnimating ? "prev" : void 0,
+              onAnimationEnd: () => setPrevNavAnimating(false),
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PrevIcon, { level: "text", biggerSize: true, "aria-hidden": true })
+            },
+            prevNavAnimKey
+          ) })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -7666,8 +7816,23 @@ function DatePickerCalendar({ className }) {
           type: "button",
           className: "aviala-datepicker-calendar__nav aviala-focus-ring",
           "aria-label": isMonthPanel ? locale.nextYear : locale.nextMonth,
-          onClick: () => setViewMonth(addMonths(viewMonth, stepMonth)),
-          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NextIcon, { level: "text", biggerSize: true, "aria-hidden": true })
+          onClick: () => {
+            if (!prefersReducedMotion2()) {
+              setNextNavAnimKey((n) => n + 1);
+              setNextNavAnimating(true);
+            }
+            setViewMonth(addMonths(viewMonth, stepMonth));
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "aviala-datepicker-calendar__nav-icon", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            "span",
+            {
+              className: "aviala-datepicker-calendar__nav-icon-inner",
+              "data-anim": nextNavAnimating ? "next" : void 0,
+              onAnimationEnd: () => setNextNavAnimating(false),
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(NextIcon, { level: "text", biggerSize: true, "aria-hidden": true })
+            },
+            nextNavAnimKey
+          ) })
         }
       )
     ] }),
@@ -10444,11 +10609,8 @@ Upload.displayName = "Upload";
 // src/components/scroll-picker.tsx
 var import_react60 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var LOOP_SECTIONS2 = 3;
-var MIDDLE_SECTION2 = 1;
-function normalizeIndex2(index, length) {
-  return (index % length + length) % length;
-}
+var LOOP_SECTIONS2 = WHEEL_LOOP_SECTIONS;
+var MIDDLE_SECTION2 = WHEEL_LOOP_MIDDLE_SECTION;
 function readMetrics(container) {
   const items = container.querySelectorAll(".aviala-scroll-picker-item");
   const first = items[0];
@@ -10470,6 +10632,9 @@ function scrollTopForIndex(container, metrics, index) {
 function fractionalIndexAtScrollTop(metrics, scrollTop) {
   return (scrollTop - metrics.originTop) / metrics.pitch;
 }
+function readRawIndex(container, metrics) {
+  return Math.round(fractionalIndexAtScrollTop(metrics, container.scrollTop));
+}
 function ScrollPicker({ className, children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("aviala-scroll-picker", className), ...props, children });
 }
@@ -10484,11 +10649,13 @@ function ScrollPickerColumn({
   getValueKey
 }) {
   const scrollRef = (0, import_react60.useRef)(null);
+  const clipTrackRef = (0, import_react60.useRef)(null);
   const isUserScrollingRef = (0, import_react60.useRef)(false);
   const isProgrammaticScrollRef = (0, import_react60.useRef)(false);
   const smoothTargetValueRef = (0, import_react60.useRef)(null);
   const scrollEndTimerRef = (0, import_react60.useRef)(void 0);
   const wheelAccumRef = (0, import_react60.useRef)(0);
+  const wheelAccumIdleTimerRef = (0, import_react60.useRef)(void 0);
   const selectedValueRef = (0, import_react60.useRef)(value);
   const reactId = (0, import_react60.useId)();
   selectedValueRef.current = value;
@@ -10503,36 +10670,43 @@ function ScrollPickerColumn({
     if (!loop) return [...values];
     return Array.from({ length: LOOP_SECTIONS2 }, () => values).flat();
   }, [loop, values]);
-  const scrollToIndex = (0, import_react60.useCallback)((index, behavior = "auto") => {
+  const syncClipTrack = (0, import_react60.useCallback)(() => {
     const container = scrollRef.current;
-    if (!container) return;
-    const metrics = readMetrics(container);
-    if (!metrics) return;
-    isProgrammaticScrollRef.current = true;
-    container.scrollTo({ top: scrollTopForIndex(container, metrics, index), behavior });
+    const track = clipTrackRef.current;
+    if (!container || !track) return;
+    const band = container.parentElement?.querySelector(
+      ".aviala-scroll-picker-column__highlight"
+    );
+    const bandHeight = band?.offsetHeight || 26;
+    const offset = container.scrollTop + (container.clientHeight - bandHeight) / 2;
+    track.style.transform = `translate3d(0, ${-offset}px, 0)`;
   }, []);
-  const scrollToValue = (0, import_react60.useCallback)(
-    (nextValue, behavior = "smooth") => {
-      if (behavior === "smooth") {
-        smoothTargetValueRef.current = nextValue;
+  const scrollToIndex = (0, import_react60.useCallback)(
+    (index, behavior = "auto") => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const metrics = readMetrics(container);
+      if (!metrics) return;
+      isProgrammaticScrollRef.current = true;
+      container.scrollTo({ top: scrollTopForIndex(container, metrics, index), behavior });
+      if (behavior === "auto") {
+        syncClipTrack();
       } else {
-        smoothTargetValueRef.current = null;
+        requestAnimationFrame(syncClipTrack);
       }
-      const valueIndex = getIndex(nextValue);
-      const targetIndex = loop ? values.length * MIDDLE_SECTION2 + valueIndex : valueIndex;
-      scrollToIndex(targetIndex, behavior);
     },
-    [getIndex, loop, scrollToIndex, values.length]
+    [syncClipTrack]
   );
   const settleScroll = (0, import_react60.useCallback)(() => {
     const container = scrollRef.current;
-    if (!container || isProgrammaticScrollRef.current) {
-      isProgrammaticScrollRef.current = false;
+    if (!container) return;
+    const wasProgrammatic = isProgrammaticScrollRef.current;
+    isProgrammaticScrollRef.current = false;
+    const metrics = readMetrics(container);
+    if (!metrics || values.length === 0) {
       smoothTargetValueRef.current = null;
       return;
     }
-    const metrics = readMetrics(container);
-    if (!metrics || values.length === 0) return;
     const lastIndex = values.length - 1;
     const maxScroll = Math.max(container.scrollHeight - container.clientHeight, 0);
     let rawIndex = stickyRoundIndex(
@@ -10546,12 +10720,21 @@ function ScrollPickerColumn({
         rawIndex = 0;
       }
     }
-    const valueIndex = loop ? normalizeIndex2(rawIndex, values.length) : Math.min(Math.max(rawIndex, 0), lastIndex);
+    const valueIndex = loop ? normalizeWheelIndex(rawIndex, values.length) : Math.min(Math.max(rawIndex, 0), lastIndex);
     const nextValue = values[valueIndex];
-    const targetIndex = loop ? values.length * MIDDLE_SECTION2 + valueIndex : valueIndex;
+    const targetIndex = loop ? recenterLoopIndex(rawIndex, values.length, MIDDLE_SECTION2) : valueIndex;
     const targetTop = scrollTopForIndex(container, metrics, targetIndex);
     const section = loop ? Math.floor(rawIndex / values.length) : MIDDLE_SECTION2;
     const needsLoopRecenter = loop && section !== MIDDLE_SECTION2;
+    if (wasProgrammatic) {
+      if (needsLoopRecenter) {
+        isProgrammaticScrollRef.current = true;
+        container.scrollTop = targetTop;
+      }
+      smoothTargetValueRef.current = null;
+      syncClipTrack();
+      return;
+    }
     const needsSnap = Math.abs(container.scrollTop - targetTop) > 1;
     if (needsLoopRecenter) {
       isProgrammaticScrollRef.current = true;
@@ -10569,15 +10752,17 @@ function ScrollPickerColumn({
     }
     isUserScrollingRef.current = false;
     wheelAccumRef.current = 0;
-  }, [loop, onChange, values]);
+    syncClipTrack();
+  }, [loop, onChange, syncClipTrack, values]);
   const handleScroll = (0, import_react60.useCallback)(() => {
+    syncClipTrack();
     if (isProgrammaticScrollRef.current) return;
     isUserScrollingRef.current = true;
     if (scrollEndTimerRef.current) {
       clearTimeout(scrollEndTimerRef.current);
     }
     scrollEndTimerRef.current = setTimeout(settleScroll, WHEEL_SCROLL_END_MS);
-  }, [settleScroll]);
+  }, [settleScroll, syncClipTrack]);
   (0, import_react60.useLayoutEffect)(() => {
     if (isUserScrollingRef.current) return;
     if (smoothTargetValueRef.current != null && Object.is(smoothTargetValueRef.current, value)) {
@@ -10588,11 +10773,20 @@ function ScrollPickerColumn({
     const metrics = readMetrics(container);
     if (!metrics) return;
     const valueIndex = getIndex(value);
-    const targetIndex = loop ? values.length * MIDDLE_SECTION2 + valueIndex : valueIndex;
+    const currentRaw = readRawIndex(container, metrics);
+    const currentValueIndex = loop ? normalizeWheelIndex(currentRaw, values.length) : Math.min(Math.max(currentRaw, 0), values.length - 1);
+    if (currentValueIndex === valueIndex) {
+      syncClipTrack();
+      return;
+    }
+    const targetIndex = loop ? nearestLoopIndex(currentRaw, valueIndex, values.length, LOOP_SECTIONS2) : valueIndex;
     const targetTop = scrollTopForIndex(container, metrics, targetIndex);
-    if (Math.abs(container.scrollTop - targetTop) <= 1) return;
+    if (Math.abs(container.scrollTop - targetTop) <= 1) {
+      syncClipTrack();
+      return;
+    }
     scrollToIndex(targetIndex, "auto");
-  }, [getIndex, loop, scrollToIndex, value, values.length]);
+  }, [getIndex, loop, scrollToIndex, syncClipTrack, value, values.length]);
   (0, import_react60.useEffect)(() => {
     const container = scrollRef.current;
     if (!container) return;
@@ -10615,23 +10809,52 @@ function ScrollPickerColumn({
     if (!container) return;
     const onWheel = (event) => {
       event.preventDefault();
-      if (isProgrammaticScrollRef.current || values.length === 0) return;
+      if (values.length === 0) return;
       const metrics = readMetrics(container);
       if (!metrics) return;
-      wheelAccumRef.current += event.deltaY;
+      if (wheelAccumIdleTimerRef.current) {
+        clearTimeout(wheelAccumIdleTimerRef.current);
+      }
+      wheelAccumIdleTimerRef.current = setTimeout(() => {
+        wheelAccumRef.current = 0;
+      }, WHEEL_ACCUM_IDLE_MS);
       const threshold = metrics.pitch * WHEEL_STEP_THRESHOLD_FACTOR;
-      if (Math.abs(wheelAccumRef.current) < threshold) return;
-      const direction = wheelAccumRef.current > 0 ? 1 : -1;
-      wheelAccumRef.current = 0;
-      const currentIndex = getIndex(selectedValueRef.current);
-      const nextIndex = loop ? normalizeIndex2(currentIndex + direction, values.length) : Math.min(Math.max(currentIndex + direction, 0), values.length - 1);
-      if (nextIndex === currentIndex) return;
+      const { nextAccum, steps } = consumeWheelSteps(
+        wheelAccumRef.current,
+        event.deltaY,
+        threshold
+      );
+      wheelAccumRef.current = nextAccum;
+      if (steps === 0) return;
+      const currentRaw = readRawIndex(container, metrics);
+      let targetRaw;
+      if (loop) {
+        if (Math.floor(currentRaw / values.length) !== MIDDLE_SECTION2) {
+          isProgrammaticScrollRef.current = true;
+          container.scrollTop = scrollTopForIndex(
+            container,
+            metrics,
+            recenterLoopIndex(currentRaw, values.length, MIDDLE_SECTION2)
+          );
+        }
+        targetRaw = stepLoopRawIndex(
+          readRawIndex(container, metrics),
+          steps,
+          values.length,
+          LOOP_SECTIONS2,
+          MIDDLE_SECTION2
+        ).rawIndex;
+      } else {
+        targetRaw = Math.min(Math.max(currentRaw + steps, 0), values.length - 1);
+        if (targetRaw === currentRaw) return;
+      }
       if (scrollEndTimerRef.current) {
         clearTimeout(scrollEndTimerRef.current);
       }
-      const nextValue = values[nextIndex];
+      const nextValue = values[normalizeWheelIndex(targetRaw, values.length)];
       isUserScrollingRef.current = false;
-      scrollToValue(nextValue, "smooth");
+      smoothTargetValueRef.current = nextValue;
+      scrollToIndex(targetRaw, "smooth");
       if (!Object.is(nextValue, selectedValueRef.current)) {
         onChange(nextValue);
       }
@@ -10639,30 +10862,39 @@ function ScrollPickerColumn({
     container.addEventListener("wheel", onWheel, { passive: false });
     return () => {
       container.removeEventListener("wheel", onWheel);
+      if (wheelAccumIdleTimerRef.current) {
+        clearTimeout(wheelAccumIdleTimerRef.current);
+      }
     };
-  }, [getIndex, loop, onChange, scrollToValue, values]);
+  }, [loop, onChange, scrollToIndex, values]);
   const handleKeyDown = (event) => {
-    const currentIndex = getIndex(selectedValueRef.current);
-    let nextIndex = null;
+    const container = scrollRef.current;
+    if (!container || values.length === 0) return;
+    const metrics = readMetrics(container);
+    if (!metrics) return;
+    const currentRaw = readRawIndex(container, metrics);
+    let targetRaw = null;
     switch (event.key) {
       case "ArrowUp":
-        nextIndex = loop ? normalizeIndex2(currentIndex - 1, values.length) : Math.max(currentIndex - 1, 0);
+        targetRaw = loop ? stepLoopRawIndex(currentRaw, -1, values.length, LOOP_SECTIONS2, MIDDLE_SECTION2).rawIndex : Math.max(currentRaw - 1, 0);
         break;
       case "ArrowDown":
-        nextIndex = loop ? normalizeIndex2(currentIndex + 1, values.length) : Math.min(currentIndex + 1, values.length - 1);
+        targetRaw = loop ? stepLoopRawIndex(currentRaw, 1, values.length, LOOP_SECTIONS2, MIDDLE_SECTION2).rawIndex : Math.min(currentRaw + 1, values.length - 1);
         break;
       case "Home":
-        nextIndex = 0;
+        targetRaw = loop ? nearestLoopIndex(currentRaw, 0, values.length, LOOP_SECTIONS2, -1) : 0;
         break;
       case "End":
-        nextIndex = values.length - 1;
+        targetRaw = loop ? nearestLoopIndex(currentRaw, values.length - 1, values.length, LOOP_SECTIONS2, 1) : values.length - 1;
         break;
       default:
         return;
     }
     event.preventDefault();
-    const nextValue = values[nextIndex];
-    scrollToValue(nextValue, "smooth");
+    const nextValue = values[normalizeWheelIndex(targetRaw, values.length)];
+    isUserScrollingRef.current = false;
+    smoothTargetValueRef.current = nextValue;
+    scrollToIndex(targetRaw, "smooth");
     if (!Object.is(nextValue, selectedValueRef.current)) {
       onChange(nextValue);
     }
@@ -10682,17 +10914,20 @@ function ScrollPickerColumn({
         tabIndex: 0,
         onKeyDown: handleKeyDown,
         children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("ul", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
-          const isSelected = Object.is(itemValue, value);
-          const valueIndex = loop ? normalizeIndex2(index, values.length) : index;
+          const isCommitted = Object.is(itemValue, value);
+          const valueIndex = loop ? normalizeWheelIndex(index, values.length) : index;
           const optionId = `${reactId}-${loop ? index : valueIndex}`;
           const key = getValueKey?.(itemValue, index) ?? `${String(itemValue)}-${index}`;
+          const useSelectedId = isCommitted && (!loop || Math.floor(index / values.length) === MIDDLE_SECTION2);
           return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("li", { className: "contents", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             ScrollPickerItem,
             {
-              id: isSelected ? selectedOptionId : optionId,
-              selected: isSelected,
+              id: useSelectedId ? selectedOptionId : optionId,
+              selected: isCommitted,
               onSelect: () => {
-                scrollToValue(itemValue, "smooth");
+                isUserScrollingRef.current = false;
+                smoothTargetValueRef.current = itemValue;
+                scrollToIndex(index, "smooth");
                 if (!Object.is(itemValue, selectedValueRef.current)) {
                   onChange(itemValue);
                 }
@@ -10702,7 +10937,21 @@ function ScrollPickerColumn({
           ) }, key);
         }) })
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-scroll-picker-column__clip", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { ref: clipTrackRef, className: "aviala-scroll-picker-column__clip-track", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "aviala-scroll-picker-column__list", children: repeatedValues.map((itemValue, index) => {
+      const key = getValueKey?.(itemValue, index) ?? `clip-${String(itemValue)}-${index}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        "div",
+        {
+          className: cn(
+            "aviala-scroll-picker-column__clip-item",
+            typographyVariants({ level: "text" })
+          ),
+          children: formatValue ? formatValue(itemValue) : String(itemValue)
+        },
+        key
+      );
+    }) }) }) })
   ] }) });
 }
 function ScrollPickerItem({