@ship-it-ui/ui 0.0.12 → 0.0.13

package/dist/index.cjs

@@ -3266,7 +3266,8 @@ var Carousel = (0, import_react52.forwardRef)(function Carousel2({
   });
   const viewportRef = (0, import_react52.useRef)(null);
   const internalScrollRef = (0, import_react52.useRef)(false);
-  const wrapInProgressRef = (0, import_react52.useRef)(false);
+  const goToInProgressRef = (0, import_react52.useRef)(false);
+  const wrapInFlightRef = (0, import_react52.useRef)(null);
   const activeIdx = active ?? 0;
   const domIndexFor = (0, import_react52.useCallback)((real) => isLooping ? real + 1 : real, [isLooping]);
   const goTo = (0, import_react52.useCallback)(
@@ -3275,13 +3276,31 @@ var Carousel = (0, import_react52.forwardRef)(function Carousel2({
       setActive(next);
       const node = viewportRef.current;
       if (node) {
+        const width = node.clientWidth;
+        if (isLooping && wrapInFlightRef.current !== null && width > 0) {
+          const rebaseTarget = wrapInFlightRef.current === N + 1 ? 0 : wrapInFlightRef.current === 0 ? N + 1 : null;
+          if (rebaseTarget !== null) {
+            const rebaseSlide = node.children[rebaseTarget];
+            if (rebaseSlide) {
+              internalScrollRef.current = true;
+              rebaseSlide.scrollIntoView({
+                behavior: "instant",
+                block: "nearest",
+                inline: "start"
+              });
+            }
+          }
+          wrapInFlightRef.current = null;
+        }
         const isNextWrap = loopMode === "circular" && activeIdx === N - 1 && i === activeIdx + 1;
         const isPrevWrap = loopMode === "circular" && activeIdx === 0 && i === activeIdx - 1;
         const targetDom = isNextWrap ? N + 1 : isPrevWrap ? 0 : domIndexFor(next);
         const slide = node.children[targetDom];
         if (slide) {
           internalScrollRef.current = true;
-          if (isNextWrap || isPrevWrap) wrapInProgressRef.current = true;
+          goToInProgressRef.current = true;
+          if (isNextWrap) wrapInFlightRef.current = N + 1;
+          else if (isPrevWrap) wrapInFlightRef.current = 0;
           slide.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
         }
       }
@@ -3296,37 +3315,54 @@ var Carousel = (0, import_react52.forwardRef)(function Carousel2({
       if (width === 0) return;
       const domIdx = Math.round(node.scrollLeft / width);
       if (!isLooping) {
+        if (goToInProgressRef.current) {
+          if (domIdx === activeIdx) goToInProgressRef.current = false;
+          return;
+        }
         if (domIdx !== activeIdx) setActive(domIdx);
         return;
       }
       if (domIdx === 0) {
-        if (wrapInProgressRef.current && node.scrollLeft > 1) return;
+        if (goToInProgressRef.current && node.scrollLeft > 1) return;
         const realTwin = node.children[N];
         if (realTwin) {
           internalScrollRef.current = true;
           realTwin.scrollIntoView({ behavior: "instant", block: "nearest", inline: "start" });
         }
         if (activeIdx !== N - 1) setActive(N - 1);
-        wrapInProgressRef.current = false;
+        goToInProgressRef.current = false;
+        wrapInFlightRef.current = null;
         return;
       }
       if (domIdx === N + 1) {
-        if (wrapInProgressRef.current && node.scrollLeft < (N + 1) * width - 1) return;
+        if (goToInProgressRef.current && node.scrollLeft < (N + 1) * width - 1) return;
         const realTwin = node.children[1];
         if (realTwin) {
           internalScrollRef.current = true;
           realTwin.scrollIntoView({ behavior: "instant", block: "nearest", inline: "start" });
         }
         if (activeIdx !== 0) setActive(0);
-        wrapInProgressRef.current = false;
+        goToInProgressRef.current = false;
+        wrapInFlightRef.current = null;
         return;
       }
-      if (wrapInProgressRef.current) return;
       const realIdx = domIdx - 1;
+      if (goToInProgressRef.current) {
+        if (realIdx === activeIdx) goToInProgressRef.current = false;
+        return;
+      }
       if (realIdx !== activeIdx) setActive(realIdx);
     };
+    const onPointerDown = () => {
+      goToInProgressRef.current = false;
+      wrapInFlightRef.current = null;
+    };
     node.addEventListener("scroll", onScroll, { passive: true });
-    return () => node.removeEventListener("scroll", onScroll);
+    node.addEventListener("pointerdown", onPointerDown, { passive: true });
+    return () => {
+      node.removeEventListener("scroll", onScroll);
+      node.removeEventListener("pointerdown", onPointerDown);
+    };
   }, [activeIdx, isLooping, N, setActive]);
   (0, import_react52.useEffect)(() => {
     if (internalScrollRef.current) {
@@ -3462,19 +3498,32 @@ var Carousel = (0, import_react52.forwardRef)(function Carousel2({
             }
           )
         ] }),
-        renderThumbnail && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "mt-2 flex gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          "button",
-          {
-            type: "button",
-            "aria-label": `Show slide ${i + 1}`,
-            onClick: () => goTo(i),
-            className: cn(
-              "shrink-0 cursor-pointer overflow-hidden rounded transition-opacity",
-              i === activeIdx ? "ring-accent opacity-100 ring-2" : "opacity-60 hover:opacity-100"
-            ),
-            children: renderThumbnail(item, i)
-          },
-          i
+        renderThumbnail && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "-mx-0.5 mt-1.5 flex gap-2 overflow-x-auto p-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item, i) => (
+          // The active ring is applied to the rendered thumbnail (the
+          // button's first child) rather than the button itself, so it
+          // traces whatever border-radius the consumer's thumbnail
+          // already has. Picking a fixed radius here would always be
+          // wrong for one consumer or another — `rounded-lg` thumbs got
+          // a 4px-radius ring; future thumbs could be circular or
+          // square. `box-shadow` (what `ring-2` compiles to) follows
+          // the child's `border-radius` automatically, so this is
+          // self-adjusting.
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Show slide ${i + 1}`,
+              onClick: () => goTo(i),
+              "data-active": i === activeIdx ? "true" : void 0,
+              className: cn(
+                "shrink-0 cursor-pointer transition-opacity",
+                "[&[data-active]>*]:ring-accent [&[data-active]>*]:ring-2",
+                i === activeIdx ? "opacity-100" : "opacity-60 hover:opacity-100"
+              ),
+              children: renderThumbnail(item, i)
+            },
+            i
+          )
         )) })
       ]
     }