@ship-it-ui/ui 0.0.11 → 0.0.12

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,7 @@ var Carousel = forwardRef44(function Carousel2({
   });
   const viewportRef = useRef8(null);
   const internalScrollRef = useRef8(false);
+  const wrapInProgressRef = useRef8(false);
   const activeIdx = active ?? 0;
   const domIndexFor = useCallback9((real) => isLooping ? real + 1 : real, [isLooping]);
   const goTo = useCallback9(
@@ -3116,14 +3118,18 @@ var Carousel = forwardRef44(function Carousel2({
       setActive(next);
       const node = viewportRef.current;
       if (node) {
-        const slide = node.children[domIndexFor(next)];
+        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;
           slide.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
         }
       }
     },
-    [N, isLooping, domIndexFor, setActive]
+    [N, isLooping, loopMode, domIndexFor, setActive, activeIdx]
   );
   useEffect8(() => {
     const node = viewportRef.current;
@@ -3137,23 +3143,28 @@ var Carousel = forwardRef44(function Carousel2({
         return;
       }
       if (domIdx === 0) {
+        if (wrapInProgressRef.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;
         return;
       }
       if (domIdx === N + 1) {
+        if (wrapInProgressRef.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;
         return;
       }
+      if (wrapInProgressRef.current) return;
       const realIdx = domIdx - 1;
       if (realIdx !== activeIdx) setActive(realIdx);
     };