@underverse-ui/underverse 0.2.105 → 0.2.107

package/dist/index.cjs

@@ -7159,17 +7159,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 () => {
@@ -7179,7 +7182,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;
@@ -7262,7 +7265,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);
@@ -7284,14 +7287,14 @@ function WheelColumn({
           style: { height: itemHeight }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)(
         "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"
           ),
@@ -7304,8 +7307,11 @@ function WheelColumn({
           onScroll: handleScroll,
           children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)(
               "button",
@@ -7683,7 +7689,7 @@ function TimePicker({
     emit(next);
   };
   const timePickerContent = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: panelSz.stackGap, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn(panelSz.timeText, "font-bold tabular-nums tracking-wide text-foreground"), children: display }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn(panelSz.timeText, "font-bold tabular-nums tracking-wide text-foreground underline underline-offset-8 decoration-primary/60"), children: display }) }),
     allowManualInput && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         Input_default,
@@ -7975,7 +7981,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",