@ship-it-ui/ui 0.0.10 → 0.0.11

package/dist/index.cjs

@@ -3251,27 +3251,36 @@ var Carousel = (0, import_react52.forwardRef)(function Carousel2({
   aspectRatio = 16 / 10,
   showDots = true,
   showArrows = true,
+  loop = false,
   className,
   "aria-label": ariaLabel = "Carousel",
   ...props
 }, ref) {
+  const N = items.length;
+  const isLooping = loop && N > 1;
   const [active, setActive] = useControllableState({
     value: indexProp,
     defaultValue: defaultIndex ?? 0,
     onChange: onIndexChange
   });
   const viewportRef = (0, import_react52.useRef)(null);
+  const internalScrollRef = (0, import_react52.useRef)(false);
+  const activeIdx = active ?? 0;
+  const domIndexFor = (0, import_react52.useCallback)((real) => isLooping ? real + 1 : real, [isLooping]);
   const goTo = (0, import_react52.useCallback)(
     (i) => {
-      const clamped = Math.max(0, Math.min(items.length - 1, i));
-      setActive(clamped);
+      const next = isLooping ? (i % N + N) % N : Math.max(0, Math.min(N - 1, i));
+      setActive(next);
       const node = viewportRef.current;
       if (node) {
-        const slide = node.children[clamped];
-        slide?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
+        const slide = node.children[domIndexFor(next)];
+        if (slide) {
+          internalScrollRef.current = true;
+          slide.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
+        }
       }
     },
-    [items.length, setActive]
+    [N, isLooping, domIndexFor, setActive]
   );
   (0, import_react52.useEffect)(() => {
     const node = viewportRef.current;
@@ -3279,13 +3288,59 @@ var Carousel = (0, import_react52.forwardRef)(function Carousel2({
     const onScroll = () => {
       const width = node.clientWidth;
       if (width === 0) return;
-      const i = Math.round(node.scrollLeft / width);
-      if (i !== active) setActive(i);
+      const domIdx = Math.round(node.scrollLeft / width);
+      if (!isLooping) {
+        if (domIdx !== activeIdx) setActive(domIdx);
+        return;
+      }
+      if (domIdx === 0) {
+        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);
+        return;
+      }
+      if (domIdx === N + 1) {
+        const realTwin = node.children[1];
+        if (realTwin) {
+          internalScrollRef.current = true;
+          realTwin.scrollIntoView({ behavior: "instant", block: "nearest", inline: "start" });
+        }
+        if (activeIdx !== 0) setActive(0);
+        return;
+      }
+      const realIdx = domIdx - 1;
+      if (realIdx !== activeIdx) setActive(realIdx);
     };
     node.addEventListener("scroll", onScroll, { passive: true });
     return () => node.removeEventListener("scroll", onScroll);
-  }, [active, setActive]);
-  const activeIdx = active ?? 0;
+  }, [activeIdx, isLooping, N, setActive]);
+  (0, import_react52.useEffect)(() => {
+    if (internalScrollRef.current) {
+      internalScrollRef.current = false;
+      return;
+    }
+    const node = viewportRef.current;
+    if (!node) return;
+    const width = node.clientWidth;
+    if (width === 0) return;
+    const targetDom = domIndexFor(activeIdx);
+    const currentDom = Math.round(node.scrollLeft / width);
+    if (currentDom === targetDom) return;
+    const slide = node.children[targetDom];
+    slide?.scrollIntoView({ behavior: "instant", block: "nearest", inline: "start" });
+  }, [activeIdx, domIndexFor]);
+  (0, import_react52.useLayoutEffect)(() => {
+    if (!isLooping) return;
+    const node = viewportRef.current;
+    if (!node) return;
+    const slide = node.children[domIndexFor(activeIdx)];
+    if (!slide) return;
+    internalScrollRef.current = true;
+    slide.scrollIntoView({ behavior: "instant", block: "nearest", inline: "start" });
+  }, [isLooping]);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
@@ -3297,34 +3352,58 @@ var Carousel = (0, import_react52.forwardRef)(function Carousel2({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "relative overflow-hidden rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
             "div",
             {
               ref: viewportRef,
               className: "flex w-full snap-x snap-mandatory overflow-x-auto scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
               "aria-live": "polite",
-              children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                "div",
-                {
-                  className: "w-full shrink-0 snap-start",
-                  style: { aspectRatio: String(aspectRatio) },
-                  role: "group",
-                  "aria-roledescription": "slide",
-                  "aria-label": `${i + 1} of ${items.length}`,
-                  children: renderItem(item, i)
-                },
-                i
-              ))
+              children: [
+                isLooping && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    tabIndex: -1,
+                    className: "w-full shrink-0 snap-start",
+                    style: { aspectRatio: String(aspectRatio) },
+                    children: renderItem(items[N - 1], N - 1)
+                  },
+                  "clone-start"
+                ),
+                items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  "div",
+                  {
+                    className: "w-full shrink-0 snap-start",
+                    style: { aspectRatio: String(aspectRatio) },
+                    role: "group",
+                    "aria-roledescription": "slide",
+                    "aria-label": `${i + 1} of ${N}`,
+                    children: renderItem(item, i)
+                  },
+                  i
+                )),
+                isLooping && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    tabIndex: -1,
+                    className: "w-full shrink-0 snap-start",
+                    style: { aspectRatio: String(aspectRatio) },
+                    children: renderItem(items[0], 0)
+                  },
+                  "clone-end"
+                )
+              ]
             }
           ),
-          showArrows && items.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+          showArrows && N > 1 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               "button",
               {
                 type: "button",
                 "aria-label": "Previous slide",
                 onClick: () => goTo(activeIdx - 1),
-                disabled: activeIdx === 0,
+                disabled: !isLooping && activeIdx === 0,
                 className: "bg-panel/85 border-border text-text hover:bg-panel absolute top-1/2 left-2 inline-grid h-9 w-9 -translate-y-1/2 cursor-pointer place-items-center rounded-full border shadow-md backdrop-blur disabled:cursor-not-allowed disabled:opacity-40",
                 children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons5.IconGlyph, { name: "caretLeft", size: 16 })
               }
@@ -3335,13 +3414,13 @@ var Carousel = (0, import_react52.forwardRef)(function Carousel2({
                 type: "button",
                 "aria-label": "Next slide",
                 onClick: () => goTo(activeIdx + 1),
-                disabled: activeIdx === items.length - 1,
+                disabled: !isLooping && activeIdx === N - 1,
                 className: "bg-panel/85 border-border text-text hover:bg-panel absolute top-1/2 right-2 inline-grid h-9 w-9 -translate-y-1/2 cursor-pointer place-items-center rounded-full border shadow-md backdrop-blur disabled:cursor-not-allowed disabled:opacity-40",
                 children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons5.IconGlyph, { name: "caretRight", size: 16 })
               }
             )
           ] }),
-          showDots && items.length > 1 && /*
+          showDots && N > 1 && /*
            * Plain `<button>` + `aria-current` rather than the tabs pattern
            * (`role="tablist" / "tab"`). The APG carousel pattern recommends
            * this lighter semantic; the viewport's `aria-live="polite"`
@@ -4401,19 +4480,28 @@ var Lightbox = (0, import_react59.forwardRef)(function Lightbox2({
   index,
   defaultIndex,
   onIndexChange,
+  loop = false,
   title = "Photo viewer"
 }, ref) {
+  const N = items.length;
+  const isLooping = loop && N > 1;
   const [active, setActive] = useControllableState({
     value: index,
     defaultValue: defaultIndex ?? 0,
     onChange: onIndexChange
   });
   const goPrev = (0, import_react59.useCallback)(() => {
-    setActive((prev) => Math.max(0, (prev ?? 0) - 1));
-  }, [setActive]);
+    setActive((prev) => {
+      const p = prev ?? 0;
+      return isLooping ? (p - 1 + N) % N : Math.max(0, p - 1);
+    });
+  }, [setActive, isLooping, N]);
   const goNext = (0, import_react59.useCallback)(() => {
-    setActive((prev) => Math.min(items.length - 1, (prev ?? 0) + 1));
-  }, [items.length, setActive]);
+    setActive((prev) => {
+      const p = prev ?? 0;
+      return isLooping ? (p + 1) % N : Math.min(N - 1, p + 1);
+    });
+  }, [setActive, isLooping, N]);
   const onKey = (0, import_react59.useCallback)(
     (e) => {
       if (e.key === "ArrowLeft") {
@@ -4453,7 +4541,7 @@ var Lightbox = (0, import_react59.forwardRef)(function Lightbox2({
                   type: "button",
                   "aria-label": "Previous photo",
                   onClick: goPrev,
-                  disabled: activeIdx === 0,
+                  disabled: !isLooping && activeIdx === 0,
                   className: "absolute top-1/2 left-4 inline-grid h-11 w-11 -translate-y-1/2 cursor-pointer place-items-center rounded-full bg-white/10 text-white hover:bg-white/20 disabled:cursor-not-allowed disabled:opacity-40",
                   children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons7.IconGlyph, { name: "caretLeft", size: 20 })
                 }
@@ -4464,7 +4552,7 @@ var Lightbox = (0, import_react59.forwardRef)(function Lightbox2({
                   type: "button",
                   "aria-label": "Next photo",
                   onClick: goNext,
-                  disabled: activeIdx === items.length - 1,
+                  disabled: !isLooping && activeIdx === N - 1,
                   className: "absolute top-1/2 right-4 inline-grid h-11 w-11 -translate-y-1/2 cursor-pointer place-items-center rounded-full bg-white/10 text-white hover:bg-white/20 disabled:cursor-not-allowed disabled:opacity-40",
                   children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons7.IconGlyph, { name: "caretRight", size: 20 })
                 }
@@ -4517,6 +4605,7 @@ var ListingCard = (0, import_react60.forwardRef)(function ListingCard2({
   variant = "default",
   photos,
   renderPhoto,
+  loop = true,
   onClick,
   hoverEffect,
   title,
@@ -4563,6 +4652,7 @@ var ListingCard = (0, import_react60.forwardRef)(function ListingCard2({
             Carousel,
             {
               items: photos,
+              loop,
               ...isSpec ? {
                 index: photoIndex,
                 onIndexChange: setPhotoIndex,
@@ -4803,6 +4893,7 @@ var ListingDetail = (0, import_react61.forwardRef)(function ListingDetail2({
   onOpenChange,
   photos,
   renderPhoto,
+  loop = true,
   title,
   eyebrow,
   description,
@@ -4872,6 +4963,7 @@ var ListingDetail = (0, import_react61.forwardRef)(function ListingDetail2({
                           items: photos,
                           index: galleryIndex,
                           onIndexChange: setGalleryIndex,
+                          loop,
                           ...isSpec ? { showDots: false } : {},
                           "aria-label": typeof title === "string" ? `${title} photos` : "Listing photos",
                           renderItem: (src, i) => renderPhoto ? renderPhoto(src, i, "gallery") : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
@@ -5117,6 +5209,7 @@ var ListingDetail = (0, import_react61.forwardRef)(function ListingDetail2({
         items: photos,
         index: galleryIndex,
         onIndexChange: setGalleryIndex,
+        loop,
         title: lightboxTitle,
         renderItem: (src, i) => renderPhoto ? renderPhoto(src, i, "lightbox") : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("img", { src, alt: "", className: "max-h-[88vh] max-w-[92vw] object-contain" })
       }
@@ -7408,11 +7501,9 @@ var Tree = (0, import_react88.forwardRef)(function Tree2({
     return out;
   }, [items, expandedSet]);
   const [activeId, setActiveId] = (0, import_react88.useState)(null);
-  (0, import_react88.useEffect)(() => {
-    if (activeId && !flatVisible.some((f) => f.id === activeId)) {
-      setActiveId(null);
-    }
-  }, [activeId, flatVisible]);
+  if (activeId && !flatVisible.some((f) => f.id === activeId)) {
+    setActiveId(null);
+  }
   const tabStopId = (0, import_react88.useMemo)(() => {
     if (activeId && flatVisible.some((f) => f.id === activeId)) return activeId;
     if (value && flatVisible.some((f) => f.id === value)) return value;