@underverse-ui/underverse 0.2.105 → 0.2.107

package/dist/index.js

@@ -6984,17 +6984,20 @@ function WheelColumn({
     },
     [items.length, loop]
   );
-  React25.useEffect(() => {
+  React25.useLayoutEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
     const maxVirtual = Math.max(0, extendedItems.length - 1);
     const currentVirtual2 = clamp3(Math.round(el.scrollTop / itemHeight), 0, maxVirtual);
-    const desiredVirtual = loop ? getNearestVirtualIndex(valueIndex, currentVirtual2) : valueIndex;
+    const desiredVirtual = loop && lastVirtualIndexRef.current == null ? baseOffset + valueIndex : loop ? getNearestVirtualIndex(valueIndex, currentVirtual2) : valueIndex;
     const nextTop = desiredVirtual * itemHeight;
     const delta = Math.abs(el.scrollTop - nextTop);
     if (delta > 1) {
-      const behavior = animate && delta <= itemHeight * 1.5 ? "smooth" : "auto";
-      el.scrollTo({ top: nextTop, behavior });
+      if (animate && delta <= itemHeight * 1.5) {
+        el.scrollTo({ top: nextTop, behavior: "smooth" });
+      } else {
+        el.scrollTop = nextTop;
+      }
     }
     lastVirtualIndexRef.current = desiredVirtual;
     return () => {
@@ -7004,7 +7007,7 @@ function WheelColumn({
       }
       cancelAnimationFrame(rafRef.current);
     };
-  }, [animate, extendedItems.length, getNearestVirtualIndex, itemHeight, loop, scrollRef, valueIndex]);
+  }, [animate, baseOffset, extendedItems.length, getNearestVirtualIndex, itemHeight, loop, scrollRef, valueIndex]);
   React25.useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -7087,7 +7090,7 @@ function WheelColumn({
           if (centered > max) centered -= len;
           if (centered !== snappedVirtual) {
             lastVirtualIndexRef.current = centered;
-            el.scrollTo({ top: centered * itemHeight, behavior: "auto" });
+            el.scrollTop = centered * itemHeight;
           }
         }
       }, 120);
@@ -7109,14 +7112,14 @@ function WheelColumn({
           style: { height: itemHeight }
         }
       ),
-      /* @__PURE__ */ jsx31("div", { className: cn("pointer-events-none absolute inset-x-0 top-0 bg-linear-to-b from-background/95 via-background/60 to-transparent z-10", ui.fadeHeight) }),
-      /* @__PURE__ */ jsx31("div", { className: cn("pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-background/95 via-background/60 to-transparent z-10", ui.fadeHeight) }),
+      /* @__PURE__ */ jsx31("div", { className: cn("pointer-events-none absolute inset-x-0 top-0 bg-linear-to-b from-muted/20 via-muted/5 to-transparent z-10", ui.fadeHeight) }),
+      /* @__PURE__ */ jsx31("div", { className: cn("pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-muted/20 via-muted/5 to-transparent z-10", ui.fadeHeight) }),
       /* @__PURE__ */ jsx31(
         "div",
         {
           ref: scrollRef,
           className: cn(
-            "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory scroll-smooth",
+            "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
             "scrollbar-none",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-xl"
           ),
@@ -7129,8 +7132,11 @@ function WheelColumn({
           onScroll: handleScroll,
           children: /* @__PURE__ */ jsx31("div", { children: extendedItems.map((n, index) => {
             const dist = Math.abs(index - currentVirtual);
-            const scale = 1 - Math.min(dist * 0.12, 0.36);
-            const opacity = 1 - Math.min(dist * 0.22, 0.75);
+            const distForVisual = Math.min(dist, 2);
+            const t = distForVisual / 2;
+            const ease = t * t;
+            const scale = 1 - ease * 0.18;
+            const opacity = 1 - ease * 0.55;
             const isSelected = index === currentVirtual;
             return /* @__PURE__ */ jsx31(
               "button",
@@ -7508,7 +7514,7 @@ function TimePicker({
     emit(next);
   };
   const timePickerContent = /* @__PURE__ */ jsxs26("div", { className: panelSz.stackGap, children: [
-    /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-center py-2 px-3 rounded-xl bg-linear-to-r from-primary/10 via-primary/5 to-primary/10 border border-primary/20", children: /* @__PURE__ */ jsx31("span", { className: cn(panelSz.timeText, "font-bold tabular-nums tracking-wide text-foreground"), children: display }) }),
+    /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-center py-1", children: /* @__PURE__ */ jsx31("span", { className: cn(panelSz.timeText, "font-bold tabular-nums tracking-wide text-foreground underline underline-offset-8 decoration-primary/60"), children: display }) }),
     allowManualInput && /* @__PURE__ */ jsxs26("div", { className: "relative", children: [
       /* @__PURE__ */ jsx31(
         Input_default,
@@ -7800,7 +7806,7 @@ function TimePicker({
         contentWidth: matchTriggerWidth ? void 0 : contentWidth,
         contentClassName: cn(
           panelSz.contentPadding,
-          "rounded-2xl border bg-popover/95 backdrop-blur-xl shadow-2xl",
+          "rounded-2xl border bg-popover/98 backdrop-blur-md shadow-2xl",
           error && "border-destructive/40",
           success && "border-success/40",
           !error && !success && "border-border/60",