@coinbase/cds-mobile 8.38.7 → 8.39.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.39.0 (1/27/2026 PST)
+
+#### 🚀 Updates
+
+- Support Carousel looping. [[#327](https://github.com/coinbase/cds/pull/327)]
+
 ## 8.38.7 (1/26/2026 PST)
 
 #### 🐞 Fixes

package/dts/carousel/Carousel.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
-import type { Rect, SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
+import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
 import { type BoxBaseProps, type BoxProps } from '../layout/Box';
+import { CarouselContext, type CarouselContextValue, useCarouselContext } from './CarouselContext';
 export type CarouselItemRenderChildren = React.FC<{
   isVisible: boolean;
 }>;
@@ -20,16 +21,8 @@ export type CarouselItemBaseProps = Omit<BoxBaseProps, 'children'> &
 export type CarouselItemProps = Omit<BoxProps, 'children'> & CarouselItemBaseProps;
 export type CarouselItemComponent = React.FC<CarouselItemProps>;
 export type CarouselItemElement = React.ReactElement<CarouselItemProps, CarouselItemComponent>;
-export type CarouselContextValue = {
-  registerItem: (id: string, state: Rect) => void;
-  unregisterItem: (id: string) => void;
-  /**
-   * Set of item IDs that are currently visible in the carousel viewport.
-   */
-  visibleCarouselItems: Set<string>;
-};
-export declare const CarouselContext: React.Context<CarouselContextValue | undefined>;
-export declare const useCarouselContext: () => CarouselContextValue;
+export { CarouselContext, useCarouselContext };
+export type { CarouselContextValue };
 export type CarouselNavigationComponentBaseProps = {
   /**
    * Callback for when the previous button is pressed.
@@ -180,6 +173,12 @@ export type CarouselBaseProps = SharedProps &
      * Callback fired when the user ends dragging the carousel.
      */
     onDragEnd?: () => void;
+    /**
+     * Enables infinite looping. When true, the carousel will seamlessly
+     * loop from the last item back to the first.
+     * @note Requires at least 2 pages worth of content to function.
+     */
+    loop?: boolean;
   };
 export type CarouselProps = CarouselBaseProps & {
   /**
@@ -312,6 +311,12 @@ export declare const Carousel: React.MemoExoticComponent<
          * Callback fired when the user ends dragging the carousel.
          */
         onDragEnd?: () => void;
+        /**
+         * Enables infinite looping. When true, the carousel will seamlessly
+         * loop from the last item back to the first.
+         * @note Requires at least 2 pages worth of content to function.
+         */
+        loop?: boolean;
       } & {
         /**
          * Custom styles for the root element.

package/dts/carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpF,OAAO,KAAK,EAAE,IAAI,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAI9F,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAE1E,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAChE,wBAAwB,GAAG;IACzB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,QAAQ,CAAC,EAAE,0BAA0B,GAAG,KAAK,CAAC,SAAS,CAAC;CACzD,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,qBAAqB,CAAC;AAEnF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;AAChE,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,CAAC;AAE/F,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,eAAe,iDAAmE,CAAC;AAEhG,eAAO,MAAM,kBAAkB,QAAO,oBAMrC,CAAC;AAEF,MAAM,MAAM,oCAAoC,GAAG;IACjD;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,iBAAiB,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC;;OAEG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,oCAAoC,GAAG;IACpF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAAC,CAAC;AAErF,MAAM,MAAM,oCAAoC,GAAG;IACjD;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,4BAA4B,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;CACzE,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,oCAAoC,GAAG;IACpF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAAC,CAAC;AAErF,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,wBAAwB,GACxB,YAAY,GAAG;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,EAAE,CAAC;IACvD;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,2BAA2B,CAAC;IAClD;;;OAGG;IACH,mBAAmB,CAAC,EAAE,2BAA2B,CAAC;IAClD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC;;OAEG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC;;OAEG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC;;OAEG;IACH,4BAA4B,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B;;WAEG;QACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC;;WAEG;QACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC;;WAEG;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAChC;;WAEG;QACH,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC1C,CAAC;CACH,CAAC;AAyKF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;IAxRjB;;;OAGG;eACQ,mBAAmB,GAAG,mBAAmB,EAAE;IACtD;;;;;;;OAOG;WACI,MAAM,GAAG,MAAM,GAAG,MAAM;IAC/B;;;;;;OAMG;eACQ,MAAM,GAAG,MAAM;IAC1B;;OAEG;qBACc,OAAO;IACxB;;OAEG;qBACc,OAAO;IACxB;;;OAGG;0BACmB,2BAA2B;IACjD;;;OAGG;0BACmB,2BAA2B;IACjD;;;;;OAKG;YACK,KAAK,CAAC,SAAS;IACvB;;OAEG;iCAC0B,MAAM;IACnC;;OAEG;qCAC8B,MAAM;IACvC;;OAEG;iCAC0B,MAAM;IACnC;;OAEG;mCAC4B,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IACvE;;OAEG;mBACY,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI;IAChD;;OAEG;kBACW,MAAM,IAAI;IACxB;;OAEG;gBACS,MAAM,IAAI;;IAIxB;;OAEG;YACK,SAAS,CAAC,SAAS,CAAC;IAC5B;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B;;WAEG;QACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC;;WAEG;QACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC;;WAEG;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAChC;;WAEG;QACH,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC1C;mDA4fF,CAAC"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/carousel/Carousel.tsx"],"names":[],"mappings":"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"}

package/dts/carousel/CarouselContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Rect } from '@coinbase/cds-common/types';
+export type CarouselContextValue = {
+  registerItem: (id: string, state: Rect) => void;
+  unregisterItem: (id: string) => void;
+  /**
+   * Set of item IDs that are currently visible in the carousel viewport.
+   */
+  visibleCarouselItems: Set<string>;
+};
+export declare const CarouselContext: React.Context<CarouselContextValue | undefined>;
+export declare const useCarouselContext: () => CarouselContextValue;
+//# sourceMappingURL=CarouselContext.d.ts.map

package/dts/carousel/CarouselContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselContext.d.ts","sourceRoot":"","sources":["../../src/carousel/CarouselContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,eAAe,iDAAmE,CAAC;AAEhG,eAAO,MAAM,kBAAkB,QAAO,oBAMrC,CAAC"}

package/dts/carousel/CarouselItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type CarouselItemProps } from './Carousel';
+import type { CarouselItemProps } from './Carousel';
 export declare const CarouselItem: React.MemoExoticComponent<
   ({ children, id, style, ...props }: CarouselItemProps) => import('react/jsx-runtime').JSX.Element
 >;

package/dts/carousel/CarouselItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselItem.d.ts","sourceRoot":"","sources":["../../src/carousel/CarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,OAAO,EAAE,KAAK,iBAAiB,EAAsB,MAAM,YAAY,CAAC;AAExE,eAAO,MAAM,YAAY,gEAA4C,iBAAiB,6CAwCpF,CAAC"}
+{"version":3,"file":"CarouselItem.d.ts","sourceRoot":"","sources":["../../src/carousel/CarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGpD,eAAO,MAAM,YAAY,gEAA4C,iBAAiB,6CAwCpF,CAAC"}

package/dts/carousel/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Carousel';
+export * from './CarouselContext';
 export * from './CarouselItem';
 export * from './DefaultCarouselNavigation';
 export * from './DefaultCarouselPagination';

package/dts/carousel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/carousel/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/carousel/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC"}

package/esm/carousel/Carousel.js

@@ -1,7 +1,7 @@
-const _excluded = ["children", "title", "hideNavigation", "hidePagination", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "goToPageAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd"];
+const _excluded = ["children", "title", "hideNavigation", "hidePagination", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "goToPageAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { forwardRef, memo, useCallback, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { animated, useSpring } from '@react-spring/native';
@@ -9,24 +9,40 @@ import { useLayout } from '../hooks/useLayout';
 import { HStack } from '../layout/HStack';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
+import { CarouselContext, useCarouselContext } from './CarouselContext';
+import { CarouselItem } from './CarouselItem';
 import { DefaultCarouselNavigation } from './DefaultCarouselNavigation';
 import { DefaultCarouselPagination } from './DefaultCarouselPagination';
+
+/**
+ * Wraps a value within a range (min, max) for circular indexing.
+ * @param min - The minimum value of the range.
+ * @param max - The maximum value of the range (exclusive).
+ * @param value - The value to wrap.
+ * @returns The wrapped value within the range.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CarouselContext = /*#__PURE__*/React.createContext(undefined);
-export const useCarouselContext = () => {
-  const context = useContext(CarouselContext);
-  if (!context) {
-    throw new Error('useCarouselContext must be used within a Carousel component');
-  }
-  return context;
+const wrap = (min, max, value) => {
+  const range = max - min;
+  return min + ((value - min) % range + range) % range;
 };
+export { CarouselContext, useCarouselContext };
 /**
  * Calculates the locations of each item in the carousel, offset from the first item.
  * @param itemRects - The items to get the offsets for.
  * @returns The item offsets.
  */
 const getItemOffsets = itemRects => {
-  const sortedItems = Object.values(itemRects).sort((a, b) => a.x - b.x);
+  // Filter out clone items (they have IDs starting with "clone-")
+  const originalItems = Object.entries(itemRects).filter(_ref => {
+    let [id] = _ref;
+    return !id.startsWith('clone-');
+  }).map(_ref2 => {
+    let [, rect] = _ref2;
+    return rect;
+  });
+  if (originalItems.length === 0) return [];
+  const sortedItems = originalItems.sort((a, b) => a.x - b.x);
   const initialItemOffset = sortedItems[0].x;
   return sortedItems.map(item => _extends({}, item, {
     x: item.x - initialItemOffset
@@ -52,14 +68,61 @@ const getNearestPageIndexFromOffset = (scrollOffset, pageOffsets) => {
   return closestPageIndex;
 };
 
+/**
+ * Finds the nearest offset from a set of candidate offsets, considering loop cycles.
+ * Checks current, previous, and next cycles to find the shortest path.
+ * @param currentOffset - The current scroll offset.
+ * @param candidateOffsets - Array of candidate offsets within a single loop cycle.
+ * @param loopLength - The total length of one loop cycle.
+ * @returns The nearest offset and its index in the candidates array.
+ */
+const findNearestLoopOffset = (currentOffset, candidateOffsets, loopLength) => {
+  const currentCycle = Math.floor(currentOffset / loopLength);
+  let nearest = {
+    offset: 0,
+    index: 0,
+    distance: Infinity
+  };
+  for (const [index, candidateOffset] of candidateOffsets.entries()) {
+    for (const cycle of [currentCycle - 1, currentCycle, currentCycle + 1]) {
+      const cycleOffset = cycle * loopLength + candidateOffset;
+      const distance = Math.abs(currentOffset - cycleOffset);
+      if (distance < nearest.distance) {
+        nearest = {
+          offset: cycleOffset,
+          index,
+          distance
+        };
+      }
+    }
+  }
+  return {
+    offset: nearest.offset,
+    index: nearest.index
+  };
+};
+
 /**
  * Calculates the offsets for a given set of items grouped by item.
+ * @note when looping, all items have a page offset, otherwise we find
+ * the last item that can start a page and still show all remaining items.
  * @param items - The items to get the page offsets for.
  * @param containerWidth - The width of the container.
  * @param maxScrollOffset - The maximum scroll offset.
+ * @param loop - Whether looping is enabled.
  * @returns The page offsets and the total number of pages.
  */
-const getSnapItemPageOffsets = (items, containerWidth, maxScrollOffset) => {
+const getSnapItemPageOffsets = (items, containerWidth, maxScrollOffset, loop) => {
+  if (loop) {
+    const offsets = [];
+    for (let i = 0; i < items.length; i++) {
+      offsets.push(items[i].x);
+    }
+    return {
+      totalPages: offsets.length,
+      pageOffsets: offsets
+    };
+  }
   let lastPageStartIndex = items.length - 1;
   const lastItem = items[lastPageStartIndex];
   const lastItemsEndPosition = lastItem.x + lastItem.width;
@@ -146,6 +209,24 @@ const clampWithElasticResistance = function (offset, maxScrollOffset, elasticAmo
   return offset;
 };
 
+/**
+ * Calculates how many items need to be cloned for looping to fill the viewport.
+ * For backward clones, pass the items array reversed.
+ * @param items - The item rects sorted by position (or reversed for backward clones).
+ * @param containerWidth - The width of the container viewport.
+ * @returns The number of items to clone.
+ */
+const getCloneCount = (items, containerWidth) => {
+  let widthSum = 0;
+  let count = 0;
+  for (const item of items) {
+    widthSum += item.width;
+    count++;
+    if (widthSum >= containerWidth) break;
+  }
+  return Math.max(1, count);
+};
+
 /**
  * Calculates which items are visible in the carousel based on scroll offset and viewport.
  * @param itemRects - The items to get the visibility for.
@@ -157,8 +238,8 @@ const getVisibleItems = (itemRects, containerWidth, scrollOffset) => {
   const visibleItems = new Set();
   const viewportLeft = scrollOffset;
   const viewportRight = scrollOffset + containerWidth;
-  Object.entries(itemRects).forEach(_ref => {
-    let [itemId, rect] = _ref;
+  Object.entries(itemRects).forEach(_ref3 => {
+    let [itemId, rect] = _ref3;
     const itemLeft = rect.x;
     const itemRight = rect.x + rect.width;
     const isVisible = itemLeft < viewportRight && itemRight > viewportLeft;
@@ -172,7 +253,7 @@ const animationConfig = {
   tension: 200,
   friction: 25
 };
-export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
       children,
       title,
@@ -189,9 +270,10 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =
       goToPageAccessibilityLabel,
       onChangePage,
       onDragStart,
-      onDragEnd
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+      onDragEnd,
+      loop
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded);
   const carouselScrollX = useRef(0);
   const animationApi = useSpring({
     x: carouselScrollX.current,
@@ -218,15 +300,83 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =
     const lastItem = items[items.length - 1];
     return lastItem.x + lastItem.width;
   }, [carouselItemRects]);
+  const maxScrollOffset = Math.max(0, contentWidth - containerSize.width);
+  const hasCalculatedDimensions = contentWidth > 0 && containerSize.width > 0;
+
+  // Calculate gap between items (needed for loopLength to maintain consistent spacing at wrap seam)
+  const gap = useMemo(() => {
+    if (Object.keys(carouselItemRects).length < 2) return 0;
+    const items = getItemOffsets(carouselItemRects);
+    const firstItemEnd = items[0].x + items[0].width;
+    const secondItemStart = items[1].x;
+    return Math.max(0, secondItemStart - firstItemEnd);
+  }, [carouselItemRects]);
+  const shouldLoop = useMemo(() => loop && hasCalculatedDimensions && maxScrollOffset > 0, [loop, hasCalculatedDimensions, maxScrollOffset]);
+  const loopLength = useMemo(() => {
+    if (!shouldLoop) return 0;
+    return contentWidth + gap;
+  }, [shouldLoop, contentWidth, gap]);
+  const isLoopingActive = shouldLoop && loopLength > 0;
+
+  // Calculate how many items to clone for each direction (enough to fill viewport)
+  const cloneCounts = useMemo(() => {
+    if (!shouldLoop || Object.keys(carouselItemRects).length === 0 || containerSize.width === 0) {
+      return {
+        forward: 0,
+        backward: 0
+      };
+    }
+    const items = getItemOffsets(carouselItemRects);
+    return {
+      forward: getCloneCount(items, containerSize.width),
+      backward: getCloneCount([...items].reverse(), containerSize.width)
+    };
+  }, [shouldLoop, carouselItemRects, containerSize.width]);
   const updateVisibleCarouselItems = useCallback(scrollOffset => {
     if (containerSize.width === 0) {
       setVisibleCarouselItems(new Set());
       return;
     }
-    setVisibleCarouselItems(getVisibleItems(carouselItemRects, containerSize.width, scrollOffset));
-  }, [carouselItemRects, containerSize.width]);
-  const maxScrollOffset = Math.max(0, contentWidth - containerSize.width);
-  const hasCalculatedDimensions = contentWidth > 0 && containerSize.width > 0;
+
+    // For original items: wrap the offset to check visibility within one cycle
+    const adjustedOffset = isLoopingActive ? (scrollOffset % loopLength + loopLength) % loopLength : scrollOffset;
+    const visibleItems = getVisibleItems(carouselItemRects, containerSize.width, adjustedOffset);
+
+    // For clones: check visibility against actual (unwrapped) scroll position
+    if (isLoopingActive && children) {
+      const childrenArray = React.Children.toArray(children);
+      const items = getItemOffsets(carouselItemRects);
+      const viewportLeft = scrollOffset;
+      const viewportRight = scrollOffset + containerSize.width;
+
+      // Check backward clones visibility
+      const backwardStartIndex = childrenArray.length - cloneCounts.backward;
+      for (let i = 0; i < cloneCounts.backward; i++) {
+        const originalIndex = backwardStartIndex + i;
+        const itemData = items[originalIndex];
+        if (itemData) {
+          const cloneX = itemData.x - loopLength;
+          const cloneRight = cloneX + itemData.width;
+          if (cloneX < viewportRight && cloneRight > viewportLeft) {
+            visibleItems.add("clone-backward-" + childrenArray[originalIndex].props.id);
+          }
+        }
+      }
+
+      // Check forward clones visibility
+      for (let i = 0; i < cloneCounts.forward; i++) {
+        const itemData = items[i];
+        if (itemData) {
+          const cloneX = itemData.x + loopLength;
+          const cloneRight = cloneX + itemData.width;
+          if (cloneX < viewportRight && cloneRight > viewportLeft) {
+            visibleItems.add("clone-forward-" + childrenArray[i].props.id);
+          }
+        }
+      }
+    }
+    setVisibleCarouselItems(visibleItems);
+  }, [carouselItemRects, containerSize.width, isLoopingActive, loopLength, children, cloneCounts]);
 
   // Calculate pages and their offsets based on snapMode
   const {
@@ -241,29 +391,37 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =
     }
     let pageOffsets;
     if (snapMode === 'item') {
-      pageOffsets = getSnapItemPageOffsets(getItemOffsets(carouselItemRects), containerSize.width, maxScrollOffset);
+      pageOffsets = getSnapItemPageOffsets(getItemOffsets(carouselItemRects), containerSize.width, maxScrollOffset, shouldLoop);
     } else {
       pageOffsets = getSnapPageOffsets(getItemOffsets(carouselItemRects), containerSize.width, maxScrollOffset);
     }
     updateActivePageIndex(pageIndex => Math.min(pageIndex, pageOffsets.totalPages - 1));
     return pageOffsets;
-  }, [hasCalculatedDimensions, carouselItemRects, snapMode, containerSize.width, maxScrollOffset, updateActivePageIndex]);
+  }, [hasCalculatedDimensions, carouselItemRects, snapMode, containerSize.width, maxScrollOffset, shouldLoop, updateActivePageIndex]);
   const goToPage = useCallback(page => {
     const newPage = Math.max(0, Math.min(totalPages - 1, page));
     updateActivePageIndex(newPage);
-    const targetOffset = pageOffsets[newPage];
+    updateVisibleCarouselItems(pageOffsets[newPage]);
+    const targetOffset = isLoopingActive ? findNearestLoopOffset(carouselScrollX.current, [pageOffsets[newPage]], loopLength).offset : pageOffsets[newPage];
     carouselScrollX.current = targetOffset;
-    updateVisibleCarouselItems(targetOffset);
     animationApi.x.start({
       to: targetOffset,
       config: animationConfig
     });
-  }, [totalPages, pageOffsets, updateVisibleCarouselItems, animationApi.x, updateActivePageIndex]);
+  }, [isLoopingActive, loopLength, totalPages, pageOffsets, animationApi.x, updateVisibleCarouselItems, updateActivePageIndex]);
   useImperativeHandle(ref, () => ({
     activePageIndex,
     totalPages,
     goToPage
   }), [activePageIndex, totalPages, goToPage]);
+  const handleGoNext = useCallback(() => {
+    const nextPage = shouldLoop ? wrap(0, totalPages, activePageIndex + 1) : activePageIndex + 1;
+    goToPage(nextPage);
+  }, [shouldLoop, totalPages, activePageIndex, goToPage]);
+  const handleGoPrevious = useCallback(() => {
+    const prevPage = shouldLoop ? wrap(0, totalPages, activePageIndex - 1) : activePageIndex - 1;
+    goToPage(prevPage);
+  }, [shouldLoop, totalPages, activePageIndex, goToPage]);
   const handleDragStart = useCallback(() => {
     onDragStart == null || onDragStart();
   }, [onDragStart]);
@@ -272,36 +430,68 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =
   }, [onDragEnd]);
   const handleDragTransition = useCallback(targetOffsetScroll => {
     if (drag === 'none') return targetOffsetScroll;
-    const closestPageIndex = getNearestPageIndexFromOffset(targetOffsetScroll, pageOffsets);
-    updateActivePageIndex(closestPageIndex);
-    if (drag === 'snap') {
-      const snapOffset = pageOffsets[closestPageIndex];
-      updateVisibleCarouselItems(snapOffset);
-      return snapOffset;
+    if (isLoopingActive) {
+      const {
+        offset: nearestOffset,
+        index: pageIndex
+      } = findNearestLoopOffset(targetOffsetScroll, pageOffsets, loopLength);
+      updateActivePageIndex(pageIndex);
+      if (drag === 'snap') {
+        updateVisibleCarouselItems(pageOffsets[pageIndex]);
+        return nearestOffset;
+      }
+      const currentCycle = Math.floor(targetOffsetScroll / loopLength);
+      const localOffset = targetOffsetScroll - currentCycle * loopLength;
+      updateVisibleCarouselItems(localOffset);
+      return targetOffsetScroll;
+    } else {
+      // Non-looping logic with clamping
+      const clampedScrollOffset = clampWithElasticResistance(targetOffsetScroll, maxScrollOffset, 0);
+      const closestPageIndex = getNearestPageIndexFromOffset(clampedScrollOffset, pageOffsets);
+      updateActivePageIndex(closestPageIndex);
+      if (drag === 'snap') {
+        const snapOffset = pageOffsets[closestPageIndex];
+        updateVisibleCarouselItems(snapOffset);
+        return snapOffset;
+      }
+      updateVisibleCarouselItems(clampedScrollOffset);
+      return targetOffsetScroll;
     }
-    updateVisibleCarouselItems(targetOffsetScroll);
-    return targetOffsetScroll;
-  }, [drag, pageOffsets, updateVisibleCarouselItems, updateActivePageIndex]);
+  }, [drag, isLoopingActive, loopLength, maxScrollOffset, pageOffsets, updateVisibleCarouselItems, updateActivePageIndex]);
   const panGesture = useMemo(() => Gesture.Pan().onStart(() => {
     if (!isDragEnabled) return;
     handleDragStart();
-  }).onUpdate(_ref3 => {
+  }).onUpdate(_ref5 => {
     let {
       translationX
-    } = _ref3;
+    } = _ref5;
     if (!isDragEnabled) return;
-    const newOffset = clampWithElasticResistance(carouselScrollX.current - translationX, maxScrollOffset);
+    let newOffset;
+    if (shouldLoop) {
+      newOffset = carouselScrollX.current - translationX;
+    } else {
+      newOffset = clampWithElasticResistance(carouselScrollX.current - translationX, maxScrollOffset);
+    }
     animationApi.x.set(newOffset);
-  }).onEnd(_ref4 => {
+  }).onEnd(_ref6 => {
     let {
       translationX,
       velocityX
-    } = _ref4;
+    } = _ref6;
     if (!isDragEnabled) return;
-    let projectedOffset = clampWithElasticResistance(carouselScrollX.current - translationX, maxScrollOffset);
+    let projectedOffset;
+    if (shouldLoop) {
+      projectedOffset = carouselScrollX.current - translationX;
+    } else {
+      projectedOffset = clampWithElasticResistance(carouselScrollX.current - translationX, maxScrollOffset);
+    }
     const power = drag === 'free' ? 0.25 : 0.125;
     const momentumDistance = velocityX * power;
-    projectedOffset = clampWithElasticResistance(projectedOffset - momentumDistance, maxScrollOffset, 0);
+    if (shouldLoop) {
+      projectedOffset = projectedOffset - momentumDistance;
+    } else {
+      projectedOffset = clampWithElasticResistance(projectedOffset - momentumDistance, maxScrollOffset, 0);
+    }
     const finalOffset = handleDragTransition(projectedOffset);
     carouselScrollX.current = finalOffset;
     animationApi.x.start({
@@ -309,7 +499,59 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =
       config: _extends({}, animationConfig)
     });
     handleDragEnd();
-  }).runOnJS(true), [isDragEnabled, maxScrollOffset, animationApi, drag, handleDragTransition, handleDragStart, handleDragEnd]);
+  }).runOnJS(true), [isDragEnabled, shouldLoop, maxScrollOffset, animationApi, drag, handleDragTransition, handleDragStart, handleDragEnd]);
+  const childrenWithClones = useMemo(() => {
+    if (!loop) return children;
+    const childrenArray = React.Children.toArray(children);
+    if (childrenArray.length === 0) return children;
+    const result = [];
+
+    // Add backward clones (only when we have enough data to position them)
+    if (isLoopingActive && cloneCounts.backward > 0) {
+      const items = getItemOffsets(carouselItemRects);
+      const itemsToCloneBackward = childrenArray.slice(-cloneCounts.backward);
+      itemsToCloneBackward.forEach((child, cloneIndex) => {
+        var _itemData$x;
+        const originalIndex = childrenArray.length - cloneCounts.backward + cloneIndex;
+        const itemData = items[originalIndex];
+        const cloneId = "clone-backward-" + child.props.id;
+        result.push(/*#__PURE__*/_jsx(CarouselItem, {
+          "aria-hidden": true,
+          id: cloneId,
+          style: {
+            position: 'absolute',
+            left: ((_itemData$x = itemData == null ? void 0 : itemData.x) != null ? _itemData$x : 0) - loopLength,
+            width: itemData == null ? void 0 : itemData.width,
+            height: itemData == null ? void 0 : itemData.height
+          },
+          children: child.props.children
+        }, cloneId));
+      });
+    }
+
+    // Add original children (always present, never changes structure)
+    result.push(...childrenArray);
+
+    // Add forward clones (only when we have enough data)
+    if (isLoopingActive && cloneCounts.forward > 0) {
+      const items = getItemOffsets(carouselItemRects);
+      const itemsToCloneForward = childrenArray.slice(0, cloneCounts.forward);
+      itemsToCloneForward.forEach((child, cloneIndex) => {
+        const itemData = items[cloneIndex];
+        const cloneId = "clone-forward-" + child.props.id;
+        result.push(/*#__PURE__*/_jsx(CarouselItem, {
+          "aria-hidden": true,
+          id: cloneId,
+          style: {
+            width: itemData == null ? void 0 : itemData.width,
+            height: itemData == null ? void 0 : itemData.height
+          },
+          children: child.props.children
+        }, cloneId));
+      });
+    }
+    return result;
+  }, [loop, children, isLoopingActive, loopLength, cloneCounts, carouselItemRects]);
   const containerStyle = useMemo(() => [{
     flex: 1,
     overflow: 'hidden'
@@ -322,9 +564,15 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =
   }, styles == null ? void 0 : styles.carousel), [styles == null ? void 0 : styles.carousel]);
   const animatedTransform = useMemo(() => ({
     transform: [{
-      translateX: animationApi.x.to(value => -value)
+      translateX: animationApi.x.to(value => {
+        if (!shouldLoop || !loopLength) return -value;
+        // Wrap the value to stay within one cycle for visual continuity
+        // Ensure wrapped is always in range [0, loopLength)
+        const wrapped = (value % loopLength + loopLength) % loopLength;
+        return -wrapped;
+      })
     }]
-  }), [animationApi]);
+  }), [animationApi, shouldLoop, loopLength]);
   const registerItem = useCallback((id, rect) => {
     setCarouselItemRects(prev => _extends({}, prev, {
       [id]: rect
@@ -361,11 +609,11 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =
           style: styles == null ? void 0 : styles.title,
           children: title
         }) : title, !hideNavigation && /*#__PURE__*/_jsx(NavigationComponent, {
-          disableGoNext: activePageIndex >= totalPages - 1,
-          disableGoPrevious: activePageIndex <= 0,
+          disableGoNext: totalPages <= 1 || !shouldLoop && activePageIndex >= totalPages - 1,
+          disableGoPrevious: totalPages <= 1 || !shouldLoop && activePageIndex <= 0,
           nextPageAccessibilityLabel: nextPageAccessibilityLabel,
-          onGoNext: () => goToPage(activePageIndex + 1),
-          onGoPrevious: () => goToPage(activePageIndex - 1),
+          onGoNext: handleGoNext,
+          onGoPrevious: handleGoPrevious,
           previousPageAccessibilityLabel: previousPageAccessibilityLabel,
           style: styles == null ? void 0 : styles.navigation
         })]
@@ -376,7 +624,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =
           style: scrollViewStyle,
           children: /*#__PURE__*/_jsx(animated.View, {
             style: [animatedStyle, animatedTransform],
-            children: children
+            children: childrenWithClones
           })
         })
       }), !hidePagination && /*#__PURE__*/_jsx(PaginationComponent, {

package/esm/carousel/CarouselContext.js

@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+export const CarouselContext = /*#__PURE__*/React.createContext(undefined);
+export const useCarouselContext = () => {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error('useCarouselContext must be used within a Carousel component');
+  }
+  return context;
+};

package/esm/carousel/CarouselItem.js

@@ -4,7 +4,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo, useCallback, useEffect } from 'react';
 import { useLayout } from '../hooks/useLayout';
 import { Box } from '../layout/Box';
-import { useCarouselContext } from './Carousel';
+import { useCarouselContext } from './CarouselContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const CarouselItem = /*#__PURE__*/memo(_ref => {
   let {

package/esm/carousel/__stories__/Carousel.stories.js

@@ -616,6 +616,80 @@ const ImperativeApiExample = () => {
     })
   });
 };
+const LoopingExamples = () => {
+  const theme = useTheme();
+  const horizontalPadding = theme.space[2];
+  const windowWidth = Dimensions.get('window').width;
+  const carouselSizing = windowWidth - horizontalPadding * 2;
+  const horizontalGap = theme.space[1];
+  const threeItemsWidth = (carouselSizing - horizontalGap * 2) / 3;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      paddingX: 0,
+      children: /*#__PURE__*/_jsx(Carousel, {
+        loop: true,
+        drag: "snap",
+        snapMode: "page",
+        styles: {
+          root: {
+            paddingHorizontal: horizontalPadding
+          },
+          carousel: {
+            gap: horizontalGap
+          }
+        },
+        title: "Looping - Snap Page",
+        children: sampleItems.map((item, index) => /*#__PURE__*/_jsx(CarouselItem, {
+          id: "loop-page-" + index,
+          width: threeItemsWidth,
+          children: item
+        }, "loop-page-" + index))
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      paddingX: 0,
+      children: /*#__PURE__*/_jsx(Carousel, {
+        loop: true,
+        drag: "snap",
+        snapMode: "item",
+        styles: {
+          root: {
+            paddingHorizontal: horizontalPadding
+          },
+          carousel: {
+            gap: horizontalGap
+          }
+        },
+        title: "Looping - Snap Item",
+        children: sampleItems.map((item, index) => /*#__PURE__*/_jsx(CarouselItem, {
+          id: "loop-item-" + index,
+          width: threeItemsWidth,
+          children: item
+        }, "loop-item-" + index))
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      paddingX: 0,
+      children: /*#__PURE__*/_jsx(Carousel, {
+        loop: true,
+        drag: "free",
+        snapMode: "item",
+        styles: {
+          root: {
+            paddingHorizontal: horizontalPadding
+          },
+          carousel: {
+            gap: horizontalGap
+          }
+        },
+        title: "Looping - Free Drag",
+        children: sampleItems.map((item, index) => /*#__PURE__*/_jsx(CarouselItem, {
+          id: "loop-free-" + index,
+          width: threeItemsWidth,
+          children: item
+        }, "loop-free-" + index))
+      })
+    })]
+  });
+};
 const AnimatedPaginationExample = () => {
   const theme = useTheme();
   const AnimatedDot = /*#__PURE__*/memo(_ref5 => {
@@ -736,6 +810,7 @@ const AnimatedPaginationExample = () => {
 };
 export default function CarouselScreen() {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(BasicExamples, {}), /*#__PURE__*/_jsx(CustomComponentsExample, {}), /*#__PURE__*/_jsx(DynamicContentExample, {}), /*#__PURE__*/_jsx(AnimatedExample, {}), /*#__PURE__*/_jsx(ImperativeApiExample, {}), /*#__PURE__*/_jsx(AnimatedPaginationExample, {})]
+    paddingX: 0,
+    children: [/*#__PURE__*/_jsx(BasicExamples, {}), /*#__PURE__*/_jsx(CustomComponentsExample, {}), /*#__PURE__*/_jsx(DynamicContentExample, {}), /*#__PURE__*/_jsx(AnimatedExample, {}), /*#__PURE__*/_jsx(ImperativeApiExample, {}), /*#__PURE__*/_jsx(AnimatedPaginationExample, {}), /*#__PURE__*/_jsx(LoopingExamples, {})]
   });
 }

package/esm/carousel/index.js

@@ -1,4 +1,5 @@
 export * from './Carousel';
+export * from './CarouselContext';
 export * from './CarouselItem';
 export * from './DefaultCarouselNavigation';
 export * from './DefaultCarouselPagination';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.38.7",
+  "version": "8.39.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.38.7",
+    "@coinbase/cds-common": "^8.39.0",
     "@coinbase/cds-icons": "^5.9.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.4",