@ship-it-ui/ui 0.0.10 → 0.0.11

package/dist/index.d.cts

@@ -1218,7 +1218,8 @@ declare const Crumb: react.ForwardRefExoticComponent<CrumbProps & react.RefAttri
  * behavior; no library.
  *
  * Pass an array of `items` and a `renderItem` function — the carousel
- * handles snapping, active-index tracking, and keyboard nav.
+ * handles snapping, active-index tracking, and keyboard nav. Set
+ * `loop` to make arrows / dots / native swipe wrap continuously.
  */
 interface CarouselProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Slide data. */
@@ -1239,6 +1240,13 @@ interface CarouselProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>
     showDots?: boolean;
     /** When false, hides the prev/next arrows. Default `true`. */
     showArrows?: boolean;
+    /**
+     * Wrap arrows / dots / native swipe past the boundaries. Default `false`.
+     * When `true`, hidden clones of the first / last slide bracket the real
+     * items so swipe past the end jumps invisibly to the other side.
+     * `onIndexChange` still only emits real indices in `0..items.length - 1`.
+     */
+    loop?: boolean;
     /** Accessible label for the carousel region. */
     'aria-label'?: string;
 }
@@ -1495,7 +1503,8 @@ declare const DateRangePicker: react.ForwardRefExoticComponent<DateRangePickerPr
 /**
  * Lightbox — fullscreen photo viewer. Built on Radix Dialog (reuses the
  * focus trap, portal, and escape-to-close). Adds keyboard ←/→ navigation
- * between items and a counter overlay.
+ * between items and a counter overlay. Set `loop` to wrap navigation
+ * past the boundaries.
  */
 interface LightboxProps {
     open?: boolean;
@@ -1511,6 +1520,13 @@ interface LightboxProps {
     defaultIndex?: number;
     /** Fires when the index changes. */
     onIndexChange?: (index: number) => void;
+    /**
+     * Wrap prev / next (buttons and ←/→ keys) past the boundaries. Default
+     * `false`. When `true`, "next" on the last item goes to the first and
+     * vice versa, and the arrow buttons never disable while there's more
+     * than one item.
+     */
+    loop?: boolean;
     /** Accessible title (visually hidden). */
     title?: ReactNode;
 }
@@ -1561,6 +1577,12 @@ interface ListingCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
      * placeholders that follow `currentColor`) or non-image slides.
      */
     renderPhoto?: (src: string, index: number) => ReactNode;
+    /**
+     * Wrap the photo carousel past the boundaries (next from the last
+     * photo goes to the first). Default `true` — marketplace photo
+     * browsing expects looping. Pass `false` to restore stop-at-end.
+     */
+    loop?: boolean;
     /** Listing title — e.g. "2023 Tesla Model 3". */
     title: ReactNode;
     /** Optional eyebrow text above the title (location, vehicle type). */
@@ -1715,6 +1737,13 @@ interface ListingDetailProps {
      * placeholders or non-image slides.
      */
     renderPhoto?: (src: string, index: number, mode: 'gallery' | 'lightbox') => ReactNode;
+    /**
+     * Wrap the gallery carousel and the fullscreen lightbox past the
+     * boundaries (next from the last photo goes to the first). Default
+     * `true` — marketplace photo browsing expects looping. One prop
+     * drives both surfaces.
+     */
+    loop?: boolean;
     /** Listing title — e.g. "2023 Tesla Model 3". */
     title: ReactNode;
     /** Optional eyebrow above the title — vehicle type, location. */

package/dist/index.d.ts

@@ -1218,7 +1218,8 @@ declare const Crumb: react.ForwardRefExoticComponent<CrumbProps & react.RefAttri
  * behavior; no library.
  *
  * Pass an array of `items` and a `renderItem` function — the carousel
- * handles snapping, active-index tracking, and keyboard nav.
+ * handles snapping, active-index tracking, and keyboard nav. Set
+ * `loop` to make arrows / dots / native swipe wrap continuously.
  */
 interface CarouselProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Slide data. */
@@ -1239,6 +1240,13 @@ interface CarouselProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>
     showDots?: boolean;
     /** When false, hides the prev/next arrows. Default `true`. */
     showArrows?: boolean;
+    /**
+     * Wrap arrows / dots / native swipe past the boundaries. Default `false`.
+     * When `true`, hidden clones of the first / last slide bracket the real
+     * items so swipe past the end jumps invisibly to the other side.
+     * `onIndexChange` still only emits real indices in `0..items.length - 1`.
+     */
+    loop?: boolean;
     /** Accessible label for the carousel region. */
     'aria-label'?: string;
 }
@@ -1495,7 +1503,8 @@ declare const DateRangePicker: react.ForwardRefExoticComponent<DateRangePickerPr
 /**
  * Lightbox — fullscreen photo viewer. Built on Radix Dialog (reuses the
  * focus trap, portal, and escape-to-close). Adds keyboard ←/→ navigation
- * between items and a counter overlay.
+ * between items and a counter overlay. Set `loop` to wrap navigation
+ * past the boundaries.
  */
 interface LightboxProps {
     open?: boolean;
@@ -1511,6 +1520,13 @@ interface LightboxProps {
     defaultIndex?: number;
     /** Fires when the index changes. */
     onIndexChange?: (index: number) => void;
+    /**
+     * Wrap prev / next (buttons and ←/→ keys) past the boundaries. Default
+     * `false`. When `true`, "next" on the last item goes to the first and
+     * vice versa, and the arrow buttons never disable while there's more
+     * than one item.
+     */
+    loop?: boolean;
     /** Accessible title (visually hidden). */
     title?: ReactNode;
 }
@@ -1561,6 +1577,12 @@ interface ListingCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
      * placeholders that follow `currentColor`) or non-image slides.
      */
     renderPhoto?: (src: string, index: number) => ReactNode;
+    /**
+     * Wrap the photo carousel past the boundaries (next from the last
+     * photo goes to the first). Default `true` — marketplace photo
+     * browsing expects looping. Pass `false` to restore stop-at-end.
+     */
+    loop?: boolean;
     /** Listing title — e.g. "2023 Tesla Model 3". */
     title: ReactNode;
     /** Optional eyebrow text above the title (location, vehicle type). */
@@ -1715,6 +1737,13 @@ interface ListingDetailProps {
      * placeholders or non-image slides.
      */
     renderPhoto?: (src: string, index: number, mode: 'gallery' | 'lightbox') => ReactNode;
+    /**
+     * Wrap the gallery carousel and the fullscreen lightbox past the
+     * boundaries (next from the last photo goes to the first). Default
+     * `true` — marketplace photo browsing expects looping. One prop
+     * drives both surfaces.
+     */
+    loop?: boolean;
     /** Listing title — e.g. "2023 Tesla Model 3". */
     title: ReactNode;
     /** Optional eyebrow above the title — vehicle type, location. */

package/dist/index.js

@@ -3080,6 +3080,7 @@ import {
   forwardRef as forwardRef44,
   useCallback as useCallback9,
   useEffect as useEffect8,
+  useLayoutEffect as useLayoutEffect2,
   useRef as useRef8
 } from "react";
 import { Fragment, jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -3093,27 +3094,36 @@ var Carousel = forwardRef44(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 = useRef8(null);
+  const internalScrollRef = useRef8(false);
+  const activeIdx = active ?? 0;
+  const domIndexFor = useCallback9((real) => isLooping ? real + 1 : real, [isLooping]);
   const goTo = useCallback9(
     (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]
   );
   useEffect8(() => {
     const node = viewportRef.current;
@@ -3121,13 +3131,59 @@ var Carousel = forwardRef44(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]);
+  useEffect8(() => {
+    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]);
+  useLayoutEffect2(() => {
+    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__ */ jsxs38(
     "div",
     {
@@ -3139,34 +3195,58 @@ var Carousel = forwardRef44(function Carousel2({
       ...props,
       children: [
         /* @__PURE__ */ jsxs38("div", { className: "relative overflow-hidden rounded-md", children: [
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsxs38(
             "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__ */ jsx45(
-                "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__ */ jsx45(
+                  "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__ */ jsx45(
+                  "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__ */ jsx45(
+                  "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__ */ jsxs38(Fragment, { children: [
+          showArrows && N > 1 && /* @__PURE__ */ jsxs38(Fragment, { children: [
             /* @__PURE__ */ jsx45(
               "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__ */ jsx45(IconGlyph4, { name: "caretLeft", size: 16 })
               }
@@ -3177,13 +3257,13 @@ var Carousel = forwardRef44(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__ */ jsx45(IconGlyph4, { 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"`
@@ -4256,19 +4336,28 @@ var Lightbox = forwardRef50(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 = useCallback11(() => {
-    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 = useCallback11(() => {
-    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 = useCallback11(
     (e) => {
       if (e.key === "ArrowLeft") {
@@ -4308,7 +4397,7 @@ var Lightbox = forwardRef50(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__ */ jsx52(IconGlyph6, { name: "caretLeft", size: 20 })
                 }
@@ -4319,7 +4408,7 @@ var Lightbox = forwardRef50(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__ */ jsx52(IconGlyph6, { name: "caretRight", size: 20 })
                 }
@@ -4372,6 +4461,7 @@ var ListingCard = forwardRef51(function ListingCard2({
   variant = "default",
   photos,
   renderPhoto,
+  loop = true,
   onClick,
   hoverEffect,
   title,
@@ -4418,6 +4508,7 @@ var ListingCard = forwardRef51(function ListingCard2({
             Carousel,
             {
               items: photos,
+              loop,
               ...isSpec ? {
                 index: photoIndex,
                 onIndexChange: setPhotoIndex,
@@ -4658,6 +4749,7 @@ var ListingDetail = forwardRef52(function ListingDetail2({
   onOpenChange,
   photos,
   renderPhoto,
+  loop = true,
   title,
   eyebrow,
   description,
@@ -4727,6 +4819,7 @@ var ListingDetail = forwardRef52(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__ */ jsx54(
@@ -4972,6 +5065,7 @@ var ListingDetail = forwardRef52(function ListingDetail2({
         items: photos,
         index: galleryIndex,
         onIndexChange: setGalleryIndex,
+        loop,
         title: lightboxTitle,
         renderItem: (src, i) => renderPhoto ? renderPhoto(src, i, "lightbox") : /* @__PURE__ */ jsx54("img", { src, alt: "", className: "max-h-[88vh] max-w-[92vw] object-contain" })
       }
@@ -7241,7 +7335,6 @@ Topbar.displayName = "Topbar";
 import {
   forwardRef as forwardRef79,
   useCallback as useCallback16,
-  useEffect as useEffect16,
   useMemo as useMemo7,
   useRef as useRef14,
   useState as useState21
@@ -7287,11 +7380,9 @@ var Tree = forwardRef79(function Tree2({
     return out;
   }, [items, expandedSet]);
   const [activeId, setActiveId] = useState21(null);
-  useEffect16(() => {
-    if (activeId && !flatVisible.some((f) => f.id === activeId)) {
-      setActiveId(null);
-    }
-  }, [activeId, flatVisible]);
+  if (activeId && !flatVisible.some((f) => f.id === activeId)) {
+    setActiveId(null);
+  }
   const tabStopId = useMemo7(() => {
     if (activeId && flatVisible.some((f) => f.id === activeId)) return activeId;
     if (value && flatVisible.some((f) => f.id === value)) return value;