@ship-it-ui/ui 0.0.11 → 0.0.13

package/dist/index.d.cts

@@ -1242,11 +1242,21 @@ interface CarouselProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>
     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`.
+     *
+     * Variants:
+     *  - `"circular"` (or `true`): boundary arrow clicks smooth-scroll a
+     *    single slide width through a hidden clone of the opposite end, then
+     *    invisibly snap to the real twin. Feels like an endless reel — the
+     *    motion is always one slide, regardless of strip length.
+     *  - `"sweep"`: boundary arrow clicks smooth-scroll the full distance
+     *    across the strip back to the real first / last slide. The
+     *    transition reads as a wide arc across every item between.
+     *
+     * Native swipe past the edge always uses the clone-snap (independent of
+     * variant). `onIndexChange` only emits real indices in
+     * `0..items.length - 1`.
      */
-    loop?: boolean;
+    loop?: boolean | 'circular' | 'sweep';
     /** Accessible label for the carousel region. */
     'aria-label'?: string;
 }
@@ -1583,13 +1593,13 @@ interface ListingCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
      * browsing expects looping. Pass `false` to restore stop-at-end.
      */
     loop?: boolean;
-    /** Listing title — e.g. "2023 Tesla Model 3". */
+    /** Listing title — e.g. "Sun-soaked cabin in Marin". */
     title: ReactNode;
-    /** Optional eyebrow text above the title (location, vehicle type). */
+    /** Optional eyebrow text above the title (location, listing type). */
     eyebrow?: ReactNode;
-    /** Headline price (e.g. `89`). */
+    /** Headline price (e.g. `189`). */
     price: ReactNode;
-    /** Price unit suffix (e.g. `/day`). */
+    /** Price unit suffix (e.g. `/night`). */
     priceUnit?: ReactNode;
     /** Original price for sale strike-through. */
     originalPrice?: ReactNode;
@@ -1681,7 +1691,7 @@ interface ListingCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
         footer: string;
         /** Price text. */
         price: string;
-        /** Price unit (e.g. `/day`). */
+        /** Price unit (e.g. `/night`). */
         priceUnit: string;
         /** CTA button (spec variant). */
         cta: string;
@@ -1744,9 +1754,9 @@ interface ListingDetailProps {
      * drives both surfaces.
      */
     loop?: boolean;
-    /** Listing title — e.g. "2023 Tesla Model 3". */
+    /** Listing title — e.g. "Sun-soaked cabin in Marin". */
     title: ReactNode;
-    /** Optional eyebrow above the title — vehicle type, location. */
+    /** Optional eyebrow above the title — listing type, location. */
     eyebrow?: ReactNode;
     /** Long-form description body. */
     description?: ReactNode;
@@ -1754,9 +1764,9 @@ interface ListingDetailProps {
     rating?: number;
     /** Total review count, shown next to the rating. */
     reviewCount?: number;
-    /** Headline price (e.g. `$89`). */
+    /** Headline price (e.g. `$189`). */
     price: ReactNode;
-    /** Suffix after the price (e.g. `/day`). */
+    /** Suffix after the price (e.g. `/night`). */
     priceUnit?: ReactNode;
     /** Original price for a strike-through; renders only when set. */
     originalPrice?: ReactNode;

package/dist/index.d.ts

@@ -1242,11 +1242,21 @@ interface CarouselProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>
     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`.
+     *
+     * Variants:
+     *  - `"circular"` (or `true`): boundary arrow clicks smooth-scroll a
+     *    single slide width through a hidden clone of the opposite end, then
+     *    invisibly snap to the real twin. Feels like an endless reel — the
+     *    motion is always one slide, regardless of strip length.
+     *  - `"sweep"`: boundary arrow clicks smooth-scroll the full distance
+     *    across the strip back to the real first / last slide. The
+     *    transition reads as a wide arc across every item between.
+     *
+     * Native swipe past the edge always uses the clone-snap (independent of
+     * variant). `onIndexChange` only emits real indices in
+     * `0..items.length - 1`.
      */
-    loop?: boolean;
+    loop?: boolean | 'circular' | 'sweep';
     /** Accessible label for the carousel region. */
     'aria-label'?: string;
 }
@@ -1583,13 +1593,13 @@ interface ListingCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
      * browsing expects looping. Pass `false` to restore stop-at-end.
      */
     loop?: boolean;
-    /** Listing title — e.g. "2023 Tesla Model 3". */
+    /** Listing title — e.g. "Sun-soaked cabin in Marin". */
     title: ReactNode;
-    /** Optional eyebrow text above the title (location, vehicle type). */
+    /** Optional eyebrow text above the title (location, listing type). */
     eyebrow?: ReactNode;
-    /** Headline price (e.g. `89`). */
+    /** Headline price (e.g. `189`). */
     price: ReactNode;
-    /** Price unit suffix (e.g. `/day`). */
+    /** Price unit suffix (e.g. `/night`). */
     priceUnit?: ReactNode;
     /** Original price for sale strike-through. */
     originalPrice?: ReactNode;
@@ -1681,7 +1691,7 @@ interface ListingCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
         footer: string;
         /** Price text. */
         price: string;
-        /** Price unit (e.g. `/day`). */
+        /** Price unit (e.g. `/night`). */
         priceUnit: string;
         /** CTA button (spec variant). */
         cta: string;
@@ -1744,9 +1754,9 @@ interface ListingDetailProps {
      * drives both surfaces.
      */
     loop?: boolean;
-    /** Listing title — e.g. "2023 Tesla Model 3". */
+    /** Listing title — e.g. "Sun-soaked cabin in Marin". */
     title: ReactNode;
-    /** Optional eyebrow above the title — vehicle type, location. */
+    /** Optional eyebrow above the title — listing type, location. */
     eyebrow?: ReactNode;
     /** Long-form description body. */
     description?: ReactNode;
@@ -1754,9 +1764,9 @@ interface ListingDetailProps {
     rating?: number;
     /** Total review count, shown next to the rating. */
     reviewCount?: number;
-    /** Headline price (e.g. `$89`). */
+    /** Headline price (e.g. `$189`). */
     price: ReactNode;
-    /** Suffix after the price (e.g. `/day`). */
+    /** Suffix after the price (e.g. `/night`). */
     priceUnit?: ReactNode;
     /** Original price for a strike-through; renders only when set. */
     originalPrice?: ReactNode;

package/dist/index.js

@@ -3100,7 +3100,8 @@ var Carousel = forwardRef44(function Carousel2({
   ...props
 }, ref) {
   const N = items.length;
-  const isLooping = loop && N > 1;
+  const loopMode = !loop ? null : loop === true ? "circular" : loop;
+  const isLooping = loopMode !== null && N > 1;
   const [active, setActive] = useControllableState({
     value: indexProp,
     defaultValue: defaultIndex ?? 0,
@@ -3108,6 +3109,8 @@ var Carousel = forwardRef44(function Carousel2({
   });
   const viewportRef = useRef8(null);
   const internalScrollRef = useRef8(false);
+  const goToInProgressRef = useRef8(false);
+  const wrapInFlightRef = useRef8(null);
   const activeIdx = active ?? 0;
   const domIndexFor = useCallback9((real) => isLooping ? real + 1 : real, [isLooping]);
   const goTo = useCallback9(
@@ -3116,14 +3119,36 @@ var Carousel = forwardRef44(function Carousel2({
       setActive(next);
       const node = viewportRef.current;
       if (node) {
-        const slide = node.children[domIndexFor(next)];
+        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;
+          goToInProgressRef.current = true;
+          if (isNextWrap) wrapInFlightRef.current = N + 1;
+          else if (isPrevWrap) wrapInFlightRef.current = 0;
           slide.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
         }
       }
     },
-    [N, isLooping, domIndexFor, setActive]
+    [N, isLooping, loopMode, domIndexFor, setActive, activeIdx]
   );
   useEffect8(() => {
     const node = viewportRef.current;
@@ -3133,32 +3158,54 @@ var Carousel = forwardRef44(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 (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);
+        goToInProgressRef.current = false;
+        wrapInFlightRef.current = null;
         return;
       }
       if (domIdx === N + 1) {
+        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);
+        goToInProgressRef.current = false;
+        wrapInFlightRef.current = null;
         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]);
   useEffect8(() => {
     if (internalScrollRef.current) {
@@ -3294,19 +3341,32 @@ var Carousel = forwardRef44(function Carousel2({
             }
           )
         ] }),
-        renderThumbnail && /* @__PURE__ */ jsx45("div", { className: "mt-2 flex gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item, i) => /* @__PURE__ */ jsx45(
-          "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__ */ jsx45("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__ */ jsx45(
+            "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
+          )
         )) })
       ]
     }