@coinbase/cds-mobile 8.42.0 → 8.43.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.43.0 (2/6/2026 PST)
+
+#### 🚀 Updates
+
+- Carousel autoplay. [[#361](https://github.com/coinbase/cds/pull/361)]
+
 ## 8.42.0 (2/4/2026 PST)
 
 #### 🚀 Updates

package/dts/carousel/Carousel.d.ts

@@ -2,7 +2,14 @@ import React from 'react';
 import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
 import { type BoxBaseProps, type BoxProps } from '../layout/Box';
-import { CarouselContext, type CarouselContextValue, useCarouselContext } from './CarouselContext';
+import {
+  CarouselAutoplayContext,
+  type CarouselAutoplayContextValue,
+  CarouselContext,
+  type CarouselContextValue,
+  useCarouselAutoplayContext,
+  useCarouselContext,
+} from './CarouselContext';
 export type CarouselItemRenderChildren = React.FC<{
   isVisible: boolean;
 }>;
@@ -21,9 +28,16 @@ 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 { CarouselContext, useCarouselContext };
-export type { CarouselContextValue };
-export type CarouselNavigationComponentBaseProps = {
+export { CarouselAutoplayContext, CarouselContext, useCarouselAutoplayContext, useCarouselContext };
+export type { CarouselAutoplayContextValue, CarouselContextValue };
+export type CarouselNavigationComponentBaseProps = Pick<
+  CarouselBaseProps,
+  | 'autoplay'
+  | 'nextPageAccessibilityLabel'
+  | 'previousPageAccessibilityLabel'
+  | 'startAutoplayAccessibilityLabel'
+  | 'stopAutoplayAccessibilityLabel'
+> & {
   /**
    * Callback for when the previous button is pressed.
    */
@@ -41,13 +55,13 @@ export type CarouselNavigationComponentBaseProps = {
    */
   disableGoNext: boolean;
   /**
-   * Accessibility label for the next page button.
+   * Whether autoplay is currently stopped.
    */
-  nextPageAccessibilityLabel?: string;
+  isAutoplayStopped?: boolean;
   /**
-   * Accessibility label for the previous page button.
+   * Callback fired when the autoplay button is pressed.
    */
-  previousPageAccessibilityLabel?: string;
+  onToggleAutoplay?: () => void;
 };
 export type CarouselNavigationComponentProps = CarouselNavigationComponentBaseProps & {
   /**
@@ -73,6 +87,14 @@ export type CarouselPaginationComponentBaseProps = {
    * Accessibility label for the go to page button. You can optionally pass a function that will receive the pageIndex as an argument, and return an accessibility label string.
    */
   paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
+  /**
+   * Visual variant for the pagination indicators.
+   * - 'pill': All indicators are pill-shaped (default)
+   * - 'dot': Inactive indicators are small dots, active indicator expands to a pill
+   * @default 'pill'
+   * @note 'pill' variant is deprecated, use 'dot' instead
+   */
+  variant?: 'pill' | 'dot';
 };
 export type CarouselPaginationComponentProps = CarouselPaginationComponentBaseProps & {
   /**
@@ -155,12 +177,21 @@ export type CarouselBaseProps = SharedProps &
     previousPageAccessibilityLabel?: string;
     /**
      * Accessibility label for the go to page button.
+     * When a string is provided, it is used as-is for all indicators.
+     * When a function is provided, it receives the page index and returns a label.
+     * @default (pageIndex) => `Go to page ${pageIndex + 1}`
      */
-    goToPageAccessibilityLabel?: string;
+    paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
     /**
-     * Accessibility label for the go to page button.
+     * Accessibility label for starting autoplay.
+     * @default 'Play Carousel'
      */
-    paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
+    startAutoplayAccessibilityLabel?: string;
+    /**
+     * Accessibility label for stopping autoplay.
+     * @default 'Pause Carousel'
+     */
+    stopAutoplayAccessibilityLabel?: string;
     /**
      * Callback fired when the page changes.
      */
@@ -179,6 +210,23 @@ export type CarouselBaseProps = SharedProps &
      * @note Requires at least 2 pages worth of content to function.
      */
     loop?: boolean;
+    /**
+     * Whether autoplay is enabled for the carousel.
+     */
+    autoplay?: boolean;
+    /**
+     * The interval in milliseconds for autoplay.
+     * @default 3000 (3 seconds)
+     */
+    autoplayInterval?: number;
+    /**
+     * Visual variant for the pagination indicators.
+     * - 'pill': All indicators are pill-shaped (default)
+     * - 'dot': Inactive indicators are small dots, active indicator expands to a pill
+     * @default 'pill'
+     * @note 'pill' variant is deprecated, use 'dot' instead
+     */
+    paginationVariant?: CarouselPaginationComponentBaseProps['variant'];
   };
 export type CarouselProps = CarouselBaseProps & {
   /**
@@ -293,12 +341,21 @@ export declare const Carousel: React.MemoExoticComponent<
         previousPageAccessibilityLabel?: string;
         /**
          * Accessibility label for the go to page button.
+         * When a string is provided, it is used as-is for all indicators.
+         * When a function is provided, it receives the page index and returns a label.
+         * @default (pageIndex) => `Go to page ${pageIndex + 1}`
          */
-        goToPageAccessibilityLabel?: string;
+        paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
         /**
-         * Accessibility label for the go to page button.
+         * Accessibility label for starting autoplay.
+         * @default 'Play Carousel'
          */
-        paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
+        startAutoplayAccessibilityLabel?: string;
+        /**
+         * Accessibility label for stopping autoplay.
+         * @default 'Pause Carousel'
+         */
+        stopAutoplayAccessibilityLabel?: string;
         /**
          * Callback fired when the page changes.
          */
@@ -317,6 +374,23 @@ export declare const Carousel: React.MemoExoticComponent<
          * @note Requires at least 2 pages worth of content to function.
          */
         loop?: boolean;
+        /**
+         * Whether autoplay is enabled for the carousel.
+         */
+        autoplay?: boolean;
+        /**
+         * The interval in milliseconds for autoplay.
+         * @default 3000 (3 seconds)
+         */
+        autoplayInterval?: number;
+        /**
+         * Visual variant for the pagination indicators.
+         * - 'pill': All indicators are pill-shaped (default)
+         * - 'dot': Inactive indicators are small dots, active indicator expands to a pill
+         * @default 'pill'
+         * @note 'pill' variant is deprecated, use 'dot' instead
+         */
+        paginationVariant?: CarouselPaginationComponentBaseProps['variant'];
       } & {
         /**
          * 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":"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"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/carousel/Carousel.tsx"],"names":[],"mappings":"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"}

package/dts/carousel/CarouselContext.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { CarouselAutoplay } from '@coinbase/cds-common';
 import type { Rect } from '@coinbase/cds-common/types';
 export type CarouselContextValue = {
   registerItem: (id: string, state: Rect) => void;
@@ -10,4 +11,21 @@ export type CarouselContextValue = {
 };
 export declare const CarouselContext: React.Context<CarouselContextValue | undefined>;
 export declare const useCarouselContext: () => CarouselContextValue;
+export type CarouselAutoplayContextValue = Omit<
+  CarouselAutoplay,
+  'remainingTime' | 'addCompletionListener'
+> & {
+  /**
+   * Whether autoplay is enabled via props.
+   */
+  isEnabled: boolean;
+  /**
+   * The autoplay interval duration in milliseconds.
+   */
+  interval: number;
+};
+export declare const CarouselAutoplayContext: React.Context<
+  CarouselAutoplayContextValue | undefined
+>;
+export declare const useCarouselAutoplayContext: () => CarouselAutoplayContextValue;
 //# sourceMappingURL=CarouselContext.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"CarouselContext.d.ts","sourceRoot":"","sources":["../../src/carousel/CarouselContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,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;AAEF,MAAM,MAAM,4BAA4B,GAAG,IAAI,CAC7C,gBAAgB,EAChB,eAAe,GAAG,uBAAuB,CAC1C,GAAG;IACF;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,uBAAuB,yDAExB,CAAC;AAEb,eAAO,MAAM,0BAA0B,QAAO,4BAM7C,CAAC"}

package/dts/carousel/DefaultCarouselNavigation.d.ts

@@ -15,6 +15,10 @@ export type DefaultCarouselNavigationProps = CarouselNavigationComponentProps &
      * Test ID for the next button.
      */
     nextButton?: string;
+    /**
+     * Test ID for the autoplay button.
+     */
+    autoplayButton?: string;
   };
   /**
    * Icon to use for the previous button.
@@ -24,6 +28,14 @@ export type DefaultCarouselNavigationProps = CarouselNavigationComponentProps &
    * Icon to use for the next button.
    */
   nextIcon?: IconName;
+  /**
+   * Icon to use for the start autoplay button.
+   */
+  startIcon?: IconName;
+  /**
+   * Icon to use for the stop autoplay button.
+   */
+  stopIcon?: IconName;
   /**
    * Variant of the icon button.
    */
@@ -48,6 +60,10 @@ export type DefaultCarouselNavigationProps = CarouselNavigationComponentProps &
      * Custom styles for the next button.
      */
     nextButton?: StyleProp<ViewStyle>;
+    /**
+     * Custom styles for the autoplay button.
+     */
+    autoplayButton?: StyleProp<ViewStyle>;
   };
 };
 export declare const DefaultCarouselNavigation: React.NamedExoticComponent<DefaultCarouselNavigationProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultCarouselNavigation.d.ts","sourceRoot":"","sources":["../../src/carousel/DefaultCarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMxE,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,YAAY,CAAC;AAEnE,MAAM,MAAM,8BAA8B,GAAG,gCAAgC,GAAG;IAC9E;;OAEG;IACH,SAAS,CAAC,EAAE;QACV;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC;;WAEG;QACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACnC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,4DA+CpC,CAAC"}
+{"version":3,"file":"DefaultCarouselNavigation.d.ts","sourceRoot":"","sources":["../../src/carousel/DefaultCarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMxE,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,YAAY,CAAC;AAEnE,MAAM,MAAM,8BAA8B,GAAG,gCAAgC,GAAG;IAC9E;;OAEG;IACH,SAAS,CAAC,EAAE;QACV;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC;;WAEG;QACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC;;WAEG;QACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,4DAmEpC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultCarouselPagination.d.ts","sourceRoot":"","sources":["../../src/carousel/DefaultCarouselPagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzD,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,YAAY,CAAC;AAEnE,MAAM,MAAM,8BAA8B,GAAG,gCAAgC,GAAG;IAC9E;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,4DAkDpC,CAAC"}
+{"version":3,"file":"DefaultCarouselPagination.d.ts","sourceRoot":"","sources":["../../src/carousel/DefaultCarouselPagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,YAAY,CAAC;AAGnE,MAAM,MAAM,8BAA8B,GAAG,gCAAgC,GAAG;IAC9E;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC5B,CAAC;CACH,CAAC;AA+IF,eAAO,MAAM,yBAAyB,4DA4DpC,CAAC"}

package/dts/carousel/__figma__/Carousel.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Carousel.figma.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.figma.d.ts","sourceRoot":"","sources":["../../../src/carousel/__figma__/Carousel.figma.tsx"],"names":[],"mappings":""}

package/esm/buttons/__figma__/SlideButton.figma.js

@@ -5,7 +5,7 @@ import { figma } from '@figma/code-connect';
 import { SlideButton } from '../SlideButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(SlideButton, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-10283&m=dev', {
-  imports: ["import { SlideButton } from '@coinbase/cds-mobile/buttons/SlideButton'"],
+  imports: ["import { SlideButton } from '@coinbase/cds-mobile/buttons/SlideButton';"],
   props: {
     checked: figma.enum('Position', {
       // TODO: fix falsy values returning undefined. This is an existing issue in code connect https://github.com/figma/code-connect/issues/193

package/esm/cards/MediaCard/__figma__/MediaCard.figma.js

@@ -1,8 +1,8 @@
-function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + 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 from 'react';
+import { ethBackground } from '@coinbase/cds-common/internal/data/assets';
 import { figma } from '@figma/code-connect';
-import { Avatar } from '../../../media';
+import { RemoteImage } from '../../../media';
 import { MediaCard } from '../';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(MediaCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=72941-18302&m=dev', {
@@ -17,25 +17,30 @@ figma.connect(MediaCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
       true: figma.instance('↳ subdetail'),
       false: undefined
     }),
-    media: figma.boolean('show media', {
+    thumbnail: figma.boolean('show media', {
       true: figma.instance('↳ media'),
       false: undefined
     }),
-    mediaPlacement: figma.enum('media placement', {
+    mediaPlacement: figma.enum('image placement', {
       left: 'start',
       right: 'end',
       none: undefined
+    }),
+    media: figma.enum('image placement', {
+      left: /*#__PURE__*/_jsx(RemoteImage, {
+        alt: "Media",
+        shape: "rectangle",
+        source: ethBackground,
+        width: "100%"
+      }),
+      right: /*#__PURE__*/_jsx(RemoteImage, {
+        alt: "Media",
+        shape: "rectangle",
+        source: ethBackground,
+        width: "100%"
+      }),
+      none: undefined
     })
   },
-  example: _ref => {
-    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-    return /*#__PURE__*/_jsx(MediaCard, _extends({
-      thumbnail: /*#__PURE__*/_jsx(Avatar, {
-        accessibilityLabel: "",
-        shape: "circle",
-        size: "l",
-        src: ""
-      })
-    }, props));
-  }
+  example: props => /*#__PURE__*/_jsx(MediaCard, _extends({}, props))
 });

package/esm/cards/MessagingCard/__figma__/MessagingCard.figma.js

@@ -1,4 +1,3 @@
-function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + 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 from 'react';
 import { figma } from '@figma/code-connect';
@@ -23,10 +22,6 @@ figma.connect(MessagingCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2
       true: figma.instance('↳ tag'),
       false: undefined
     }),
-    action: figma.boolean('show cta', {
-      true: figma.instance('↳ cta'),
-      false: undefined
-    }),
     media: figma.instance('media'),
     mediaPlacement: figma.enum('media placement', {
       left: 'start',
@@ -37,8 +32,7 @@ figma.connect(MessagingCard, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2
       false: undefined
     })
   },
-  example: _ref => {
-    let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-    return /*#__PURE__*/_jsx(MessagingCard, _extends({}, props));
-  }
+  example: props => /*#__PURE__*/_jsx(MessagingCard, _extends({
+    action: "Button"
+  }, props))
 });

package/esm/carousel/Carousel.js

@@ -1,15 +1,16 @@
-const _excluded = ["children", "title", "hideNavigation", "hidePagination", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "goToPageAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop"];
+const _excluded = ["children", "title", "hideNavigation", "hidePagination", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "paginationAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval", "paginationVariant"];
 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, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { useCarouselAutoplay } from '@coinbase/cds-common/carousel/useCarouselAutoplay';
 import { animated, useSpring } from '@react-spring/native';
 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 { CarouselAutoplayContext, CarouselContext, useCarouselAutoplayContext, useCarouselContext } from './CarouselContext';
 import { CarouselItem } from './CarouselItem';
 import { DefaultCarouselNavigation } from './DefaultCarouselNavigation';
 import { DefaultCarouselPagination } from './DefaultCarouselPagination';
@@ -26,7 +27,7 @@ const wrap = (min, max, value) => {
   const range = max - min;
   return min + ((value - min) % range + range) % range;
 };
-export { CarouselContext, useCarouselContext };
+export { CarouselAutoplayContext, CarouselContext, useCarouselAutoplayContext, useCarouselContext };
 /**
  * Calculates the locations of each item in the carousel, offset from the first item.
  * @param itemRects - The items to get the offsets for.
@@ -250,8 +251,8 @@ const getVisibleItems = (itemRects, containerWidth, scrollOffset) => {
   return visibleItems;
 };
 const animationConfig = {
-  tension: 200,
-  friction: 25
+  stiffness: 900,
+  damping: 120
 };
 export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
@@ -267,11 +268,16 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       styles,
       nextPageAccessibilityLabel,
       previousPageAccessibilityLabel,
-      goToPageAccessibilityLabel,
+      startAutoplayAccessibilityLabel,
+      stopAutoplayAccessibilityLabel,
+      paginationAccessibilityLabel,
       onChangePage,
       onDragStart,
       onDragEnd,
-      loop
+      loop,
+      autoplay,
+      autoplayInterval = 3000,
+      paginationVariant
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded);
   const carouselScrollX = useRef(0);
@@ -283,14 +289,11 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
   const [containerSize, onLayout] = useLayout();
   const [carouselItemRects, setCarouselItemRects] = useState({});
   const [visibleCarouselItems, setVisibleCarouselItems] = useState(new Set());
-  const rootRef = useRef(null);
   const isDragEnabled = drag !== 'none';
   const updateActivePageIndex = useCallback(newPageIndexOrUpdater => {
     setActivePageIndex(prevIndex => {
       const newPageIndex = typeof newPageIndexOrUpdater === 'function' ? newPageIndexOrUpdater(prevIndex) : newPageIndexOrUpdater;
-      if (prevIndex !== newPageIndex && onChangePage) {
-        onChangePage(newPageIndex);
-      }
+      if (prevIndex !== newPageIndex) onChangePage == null || onChangePage(newPageIndex);
       return newPageIndex;
     });
   }, [onChangePage]);
@@ -398,6 +401,22 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
     updateActivePageIndex(pageIndex => Math.min(pageIndex, pageOffsets.totalPages - 1));
     return pageOffsets;
   }, [hasCalculatedDimensions, carouselItemRects, snapMode, containerSize.width, maxScrollOffset, shouldLoop, updateActivePageIndex]);
+  const {
+    isPlaying,
+    isStopped,
+    isPaused,
+    start,
+    stop,
+    toggle,
+    reset,
+    pause,
+    resume,
+    getRemainingTime,
+    addCompletionListener
+  } = useCarouselAutoplay({
+    enabled: autoplay != null ? autoplay : false,
+    interval: autoplayInterval
+  });
   const goToPage = useCallback(page => {
     const newPage = Math.max(0, Math.min(totalPages - 1, page));
     updateActivePageIndex(newPage);
@@ -408,12 +427,22 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       to: targetOffset,
       config: animationConfig
     });
-  }, [isLoopingActive, loopLength, totalPages, pageOffsets, animationApi.x, updateVisibleCarouselItems, updateActivePageIndex]);
+    reset();
+  }, [totalPages, updateActivePageIndex, updateVisibleCarouselItems, pageOffsets, isLoopingActive, loopLength, animationApi.x, reset]);
   useImperativeHandle(ref, () => ({
     activePageIndex,
     totalPages,
     goToPage
   }), [activePageIndex, totalPages, goToPage]);
+  useEffect(() => {
+    if (!autoplay || totalPages === 0) return;
+    const unsubscribe = addCompletionListener(() => {
+      const nextPage = wrap(0, totalPages, activePageIndex + 1);
+      reset();
+      goToPage(nextPage);
+    });
+    return unsubscribe;
+  }, [autoplay, addCompletionListener, activePageIndex, totalPages, goToPage, reset]);
   const handleGoNext = useCallback(() => {
     const nextPage = shouldLoop ? wrap(0, totalPages, activePageIndex + 1) : activePageIndex + 1;
     goToPage(nextPage);
@@ -424,10 +453,12 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
   }, [shouldLoop, totalPages, activePageIndex, goToPage]);
   const handleDragStart = useCallback(() => {
     onDragStart == null || onDragStart();
-  }, [onDragStart]);
+    pause();
+  }, [onDragStart, pause]);
   const handleDragEnd = useCallback(() => {
     onDragEnd == null || onDragEnd();
-  }, [onDragEnd]);
+    resume();
+  }, [onDragEnd, resume]);
   const handleDragTransition = useCallback(targetOffsetScroll => {
     if (drag === 'none') return targetOffsetScroll;
     if (isLoopingActive) {
@@ -435,6 +466,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
         offset: nearestOffset,
         index: pageIndex
       } = findNearestLoopOffset(targetOffsetScroll, pageOffsets, loopLength);
+      if (pageIndex !== activePageIndex) reset();
       updateActivePageIndex(pageIndex);
       if (drag === 'snap') {
         updateVisibleCarouselItems(pageOffsets[pageIndex]);
@@ -448,6 +480,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       // Non-looping logic with clamping
       const clampedScrollOffset = clampWithElasticResistance(targetOffsetScroll, maxScrollOffset, 0);
       const closestPageIndex = getNearestPageIndexFromOffset(clampedScrollOffset, pageOffsets);
+      if (closestPageIndex !== activePageIndex) reset();
       updateActivePageIndex(closestPageIndex);
       if (drag === 'snap') {
         const snapOffset = pageOffsets[closestPageIndex];
@@ -457,7 +490,7 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
       updateVisibleCarouselItems(clampedScrollOffset);
       return targetOffsetScroll;
     }
-  }, [drag, isLoopingActive, loopLength, maxScrollOffset, pageOffsets, updateVisibleCarouselItems, updateActivePageIndex]);
+  }, [drag, isLoopingActive, loopLength, maxScrollOffset, pageOffsets, activePageIndex, updateVisibleCarouselItems, updateActivePageIndex, reset]);
   const panGesture = useMemo(() => Gesture.Pan()
   // Only activate when horizontal movement exceeds threshold
   .activeOffsetX([-10, 10])
@@ -595,49 +628,73 @@ export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) =
     unregisterItem,
     visibleCarouselItems
   }), [registerItem, unregisterItem, visibleCarouselItems]);
+  const autoplayContextValue = useMemo(() => {
+    return {
+      isEnabled: !!autoplay,
+      isStopped,
+      isPaused,
+      isPlaying,
+      interval: autoplayInterval,
+      getRemainingTime,
+      start,
+      stop,
+      toggle,
+      reset,
+      pause,
+      resume
+    };
+  }, [autoplay, isStopped, isPaused, isPlaying, autoplayInterval, getRemainingTime, start, stop, toggle, reset, pause, resume]);
   return /*#__PURE__*/_jsx(CarouselContext.Provider, {
     value: carouselContextValue,
-    children: /*#__PURE__*/_jsxs(VStack, _extends({
-      ref: rootRef,
-      "aria-live": "polite",
-      "aria-roledescription": "carousel",
-      gap: 2,
-      role: "group",
-      style: containerStyle
-    }, props, {
-      children: [(title || !hideNavigation) && /*#__PURE__*/_jsxs(HStack, {
-        alignItems: "center",
-        justifyContent: title ? 'space-between' : 'flex-end',
-        children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
-          font: "title3",
-          style: styles == null ? void 0 : styles.title,
-          children: title
-        }) : title, !hideNavigation && /*#__PURE__*/_jsx(NavigationComponent, {
-          disableGoNext: totalPages <= 1 || !shouldLoop && activePageIndex >= totalPages - 1,
-          disableGoPrevious: totalPages <= 1 || !shouldLoop && activePageIndex <= 0,
-          nextPageAccessibilityLabel: nextPageAccessibilityLabel,
-          onGoNext: handleGoNext,
-          onGoPrevious: handleGoPrevious,
-          previousPageAccessibilityLabel: previousPageAccessibilityLabel,
-          style: styles == null ? void 0 : styles.navigation
-        })]
-      }), /*#__PURE__*/_jsx(GestureDetector, {
-        gesture: panGesture,
-        children: /*#__PURE__*/_jsx(View, {
-          onLayout: onLayout,
-          style: scrollViewStyle,
-          children: /*#__PURE__*/_jsx(animated.View, {
-            style: [animatedStyle, animatedTransform],
-            children: childrenWithClones
+    children: /*#__PURE__*/_jsx(CarouselAutoplayContext.Provider, {
+      value: autoplayContextValue,
+      children: /*#__PURE__*/_jsxs(VStack, _extends({
+        "aria-live": "polite",
+        "aria-roledescription": "carousel",
+        gap: 2,
+        role: "group",
+        style: containerStyle
+      }, props, {
+        children: [(title || !hideNavigation) && /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          justifyContent: title ? 'space-between' : 'flex-end',
+          children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            style: styles == null ? void 0 : styles.title,
+            children: title
+          }) : title, !hideNavigation && /*#__PURE__*/_jsx(NavigationComponent, {
+            autoplay: autoplay,
+            disableGoNext: totalPages <= 1 || !shouldLoop && activePageIndex >= totalPages - 1,
+            disableGoPrevious: totalPages <= 1 || !shouldLoop && activePageIndex <= 0,
+            isAutoplayStopped: isStopped,
+            nextPageAccessibilityLabel: nextPageAccessibilityLabel,
+            onGoNext: handleGoNext,
+            onGoPrevious: handleGoPrevious,
+            onToggleAutoplay: toggle,
+            previousPageAccessibilityLabel: previousPageAccessibilityLabel,
+            startAutoplayAccessibilityLabel: startAutoplayAccessibilityLabel,
+            stopAutoplayAccessibilityLabel: stopAutoplayAccessibilityLabel,
+            style: styles == null ? void 0 : styles.navigation
+          })]
+        }), /*#__PURE__*/_jsx(GestureDetector, {
+          gesture: panGesture,
+          children: /*#__PURE__*/_jsx(View, {
+            onLayout: onLayout,
+            style: scrollViewStyle,
+            children: /*#__PURE__*/_jsx(animated.View, {
+              style: [animatedStyle, animatedTransform],
+              children: childrenWithClones
+            })
           })
-        })
-      }), !hidePagination && /*#__PURE__*/_jsx(PaginationComponent, {
-        activePageIndex: activePageIndex,
-        onPressPage: goToPage,
-        paginationAccessibilityLabel: goToPageAccessibilityLabel,
-        style: styles == null ? void 0 : styles.pagination,
-        totalPages: totalPages
-      })]
-    }))
+        }), !hidePagination && /*#__PURE__*/_jsx(PaginationComponent, {
+          activePageIndex: activePageIndex,
+          onPressPage: goToPage,
+          paginationAccessibilityLabel: paginationAccessibilityLabel,
+          style: styles == null ? void 0 : styles.pagination,
+          totalPages: totalPages,
+          variant: paginationVariant
+        })]
+      }))
+    })
   });
 }));

package/esm/carousel/CarouselContext.js

@@ -6,4 +6,12 @@ export const useCarouselContext = () => {
     throw new Error('useCarouselContext must be used within a Carousel component');
   }
   return context;
+};
+export const CarouselAutoplayContext = /*#__PURE__*/React.createContext(undefined);
+export const useCarouselAutoplayContext = () => {
+  const context = useContext(CarouselAutoplayContext);
+  if (!context) {
+    throw new Error('useCarouselAutoplayContext must be used within a Carousel component');
+  }
+  return context;
 };

package/esm/carousel/DefaultCarouselNavigation.js

@@ -4,7 +4,7 @@ import { useTheme } from '../hooks/useTheme';
 import { HStack } from '../layout/HStack';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarouselNavigation(_ref) {
-  var _testIDMap$previousBu, _testIDMap$nextButton;
+  var _testIDMap$autoplayBu, _testIDMap$previousBu, _testIDMap$nextButton;
   let {
     onGoPrevious,
     onGoNext,
@@ -12,10 +12,17 @@ export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarou
     disableGoNext,
     previousPageAccessibilityLabel = 'Previous page',
     nextPageAccessibilityLabel = 'Next page',
+    autoplay,
+    isAutoplayStopped,
+    onToggleAutoplay,
+    startAutoplayAccessibilityLabel = 'Play Carousel',
+    stopAutoplayAccessibilityLabel = 'Pause Carousel',
     variant = 'secondary',
     compact,
     previousIcon = 'caretLeft',
     nextIcon = 'caretRight',
+    startIcon = 'play',
+    stopIcon = 'pause',
     style,
     styles,
     testIDMap
@@ -29,7 +36,15 @@ export const DefaultCarouselNavigation = /*#__PURE__*/memo(function DefaultCarou
   return /*#__PURE__*/_jsxs(HStack, {
     gap: 1,
     style: rootStyles,
-    children: [/*#__PURE__*/_jsx(IconButton, {
+    children: [autoplay && /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: isAutoplayStopped ? startAutoplayAccessibilityLabel : stopAutoplayAccessibilityLabel,
+      compact: compact,
+      name: isAutoplayStopped ? startIcon : stopIcon,
+      onPress: onToggleAutoplay,
+      style: styles == null ? void 0 : styles.autoplayButton,
+      testID: (_testIDMap$autoplayBu = testIDMap == null ? void 0 : testIDMap.autoplayButton) != null ? _testIDMap$autoplayBu : 'carousel-autoplay-button',
+      variant: variant
+    }), /*#__PURE__*/_jsx(IconButton, {
       accessibilityLabel: previousPageAccessibilityLabel,
       compact: compact,
       disabled: disableGoPrevious,

package/esm/carousel/DefaultCarouselPagination.js

@@ -1,49 +1,184 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { animated, useSpring } from '@react-spring/native';
 import { useTheme } from '../hooks/useTheme';
 import { HStack } from '../layout/HStack';
 import { Pressable } from '../system/Pressable';
+import { useCarouselAutoplayContext } from './CarouselContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DefaultCarouselPagination = /*#__PURE__*/memo(function DefaultCarouselPagination(_ref) {
+const INDICATOR_ACTIVE_WIDTH = 24;
+const INDICATOR_INACTIVE_WIDTH = 4;
+const INDICATOR_HEIGHT = 4;
+const PaginationPill = /*#__PURE__*/memo(function PaginationPill(_ref) {
+  let {
+    index,
+    isActive,
+    onPress,
+    accessibilityLabel,
+    style
+  } = _ref;
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityLabel: accessibilityLabel,
+    background: isActive ? 'bgPrimary' : 'bgLine',
+    borderColor: "transparent",
+    borderRadius: 100,
+    height: INDICATOR_HEIGHT,
+    onPress: onPress,
+    style: style,
+    testID: "carousel-page-" + index,
+    width: INDICATOR_ACTIVE_WIDTH
+  });
+});
+const animationConfig = {
+  stiffness: 900,
+  damping: 120,
+  clamp: true
+};
+const PaginationDot = /*#__PURE__*/memo(function PaginationDot(_ref2) {
+  let {
+    index,
+    isActive,
+    onPress,
+    accessibilityLabel,
+    style
+  } = _ref2;
+  const theme = useTheme();
+  const autoplayContext = useCarouselAutoplayContext();
+  const {
+    isPlaying,
+    isEnabled,
+    interval,
+    getRemainingTime
+  } = autoplayContext;
+  const showProgress = isActive && isEnabled;
+  const springProps = useSpring({
+    width: isActive ? INDICATOR_ACTIVE_WIDTH : INDICATOR_INACTIVE_WIDTH,
+    backgroundColor: isActive && !showProgress ? theme.color.bgPrimary : theme.color.bgLine,
+    config: animationConfig
+  });
+
+  // Track progress animation state
+  const [progressState, setProgressState] = useState({
+    width: 0,
+    duration: 0
+  });
+
+  // Use a ref to track the last paused progress so we can resume from it
+  const lastProgressRef = useRef(0);
+  useEffect(() => {
+    if (!showProgress) {
+      setProgressState({
+        width: 0,
+        duration: 0
+      });
+      lastProgressRef.current = 0;
+      return;
+    }
+    const remainingTime = getRemainingTime();
+    if (!interval || interval <= 0) {
+      return;
+    }
+    const currentProgress = 1 - remainingTime / interval;
+    if (isPlaying) {
+      lastProgressRef.current = currentProgress;
+      setProgressState({
+        width: INDICATOR_ACTIVE_WIDTH,
+        duration: remainingTime
+      });
+    } else {
+      setProgressState({
+        width: currentProgress * INDICATOR_ACTIVE_WIDTH,
+        duration: 0
+      });
+      lastProgressRef.current = currentProgress;
+    }
+  }, [isPlaying, showProgress, interval, getRemainingTime]);
+
+  // Use spring with duration config for linear timed animation
+  // immediate: true when duration is 0 to force instant snap (not animated)
+  const progressSpring = useSpring({
+    width: progressState.width,
+    config: progressState.duration > 0 ? {
+      duration: progressState.duration
+    } : {
+      duration: 0
+    },
+    immediate: progressState.duration === 0
+  });
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityLabel: accessibilityLabel,
+    borderColor: "transparent",
+    borderRadius: 100,
+    borderWidth: 0,
+    onPress: onPress,
+    overflow: "hidden",
+    style: style,
+    testID: "carousel-page-" + index,
+    children: /*#__PURE__*/_jsx(animated.View, {
+      style: {
+        width: springProps.width,
+        height: INDICATOR_HEIGHT,
+        backgroundColor: springProps.backgroundColor,
+        borderRadius: theme.borderRadius[100],
+        overflow: 'hidden'
+      },
+      children: showProgress && /*#__PURE__*/_jsx(animated.View, {
+        style: {
+          width: progressSpring.width,
+          height: '100%',
+          backgroundColor: theme.color.bgPrimary,
+          borderRadius: theme.borderRadius[100]
+        }
+      })
+    })
+  });
+});
+const defaultPaginationAccessibilityLabel = pageIndex => "Go to page " + (pageIndex + 1);
+export const DefaultCarouselPagination = /*#__PURE__*/memo(function DefaultCarouselPagination(_ref3) {
   let {
     totalPages,
     activePageIndex,
     onPressPage,
     style,
     styles,
-    paginationAccessibilityLabel = 'Go to page'
-  } = _ref;
+    paginationAccessibilityLabel = defaultPaginationAccessibilityLabel,
+    variant = 'pill'
+  } = _ref3;
   const theme = useTheme();
+  const isDot = variant === 'dot';
 
   // Using paddingVertical here instead of HStack prop so it can be overridden by custom styles
   const rootStyles = useMemo(() => [{
     paddingVertical: theme.space[0.5]
   }, style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root, theme.space]);
+  const getAccessibilityLabel = index => typeof paginationAccessibilityLabel === 'function' ? paginationAccessibilityLabel(index) : paginationAccessibilityLabel;
   return /*#__PURE__*/_jsx(HStack, {
     gap: 0.5,
     justifyContent: "center",
     style: rootStyles,
     children: totalPages > 0 ? Array.from({
       length: totalPages
-    }, (_, index) => /*#__PURE__*/_jsx(Pressable, {
-      accessibilityLabel: typeof paginationAccessibilityLabel === 'function' ? paginationAccessibilityLabel(index) : paginationAccessibilityLabel + " " + (index + 1),
-      background: index === activePageIndex ? 'bgPrimary' : 'bgLine',
-      borderColor: "transparent",
-      borderRadius: 100,
-      height: 4,
+    }, (_, index) => isDot ? /*#__PURE__*/_jsx(PaginationDot, {
+      accessibilityLabel: getAccessibilityLabel(index),
+      index: index,
+      isActive: index === activePageIndex,
+      onPress: () => onPressPage(index),
+      style: styles == null ? void 0 : styles.dot
+    }, index) : /*#__PURE__*/_jsx(PaginationPill, {
+      accessibilityLabel: getAccessibilityLabel(index),
+      index: index,
+      isActive: index === activePageIndex,
       onPress: () => onPressPage(index),
-      style: styles == null ? void 0 : styles.dot,
-      testID: "carousel-page-" + index,
-      width: 24
+      style: styles == null ? void 0 : styles.dot
     }, index)) : /*#__PURE__*/_jsx(Pressable, {
       disabled: true,
       background: "bgLine",
       borderColor: "transparent",
       borderRadius: 100,
-      height: 4,
+      height: INDICATOR_HEIGHT,
       style: [{
         opacity: 0
       }, styles == null ? void 0 : styles.dot],
-      width: 24
+      width: isDot ? INDICATOR_INACTIVE_WIDTH : INDICATOR_ACTIVE_WIDTH
     })
   });
 });

package/esm/carousel/__figma__/Carousel.figma.js

@@ -0,0 +1,15 @@
+import { Carousel, CarouselItem } from '@coinbase/cds-mobile/carousel';
+import figma from '@figma/code-connect/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(Carousel, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=48671-10433', {
+  imports: ["import { Carousel, CarouselItem } from '@coinbase/cds-mobile/carousel'"],
+  example: () => /*#__PURE__*/_jsxs(Carousel, {
+    children: [/*#__PURE__*/_jsx(CarouselItem, {
+      id: "1"
+    }), /*#__PURE__*/_jsx(CarouselItem, {
+      id: "2"
+    }), /*#__PURE__*/_jsx(CarouselItem, {
+      id: "3"
+    })]
+  })
+});

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

@@ -101,7 +101,8 @@ const SeeAllComponent = () => /*#__PURE__*/_jsx(Text, {
 const SquareAssetCard = _ref2 => {
   let {
     imageUrl,
-    name
+    name,
+    onPress
   } = _ref2;
   return /*#__PURE__*/_jsx(ContainedAssetCard, {
     description: /*#__PURE__*/_jsx(Text, {
@@ -116,6 +117,7 @@ const SquareAssetCard = _ref2 => {
       style: styles.assetImage,
       width: 32
     }),
+    onPress: onPress,
     subtitle: name,
     title: "$0.87"
   });
@@ -132,6 +134,8 @@ const BasicExamples = () => {
     children: [/*#__PURE__*/_jsx(Example, {
       paddingX: 0,
       children: /*#__PURE__*/_jsx(Carousel, {
+        autoplay: true,
+        paginationVariant: "dot",
         styles: {
           root: {
             paddingHorizontal: horizontalPadding
@@ -151,6 +155,7 @@ const BasicExamples = () => {
       paddingX: 0,
       children: /*#__PURE__*/_jsx(Carousel, {
         drag: "snap",
+        paginationVariant: "dot",
         snapMode: "item",
         styles: {
           root: {
@@ -173,8 +178,10 @@ const BasicExamples = () => {
     }), /*#__PURE__*/_jsx(Example, {
       paddingX: 0,
       children: /*#__PURE__*/_jsx(Carousel, {
+        loop: true,
         NavigationComponent: SeeAllComponent,
         drag: "free",
+        paginationVariant: "dot",
         snapMode: "item",
         styles: {
           root: {
@@ -186,10 +193,12 @@ const BasicExamples = () => {
         },
         title: "Square Items Carousel",
         children: Object.values(assets).map(asset => /*#__PURE__*/_jsx(CarouselItem, {
+          accessibilityLabel: asset.name,
           id: asset.symbol,
           children: /*#__PURE__*/_jsx(SquareAssetCard, {
             imageUrl: asset.imageUrl,
-            name: asset.symbol
+            name: asset.symbol,
+            onPress: () => console.log(asset.symbol + " clicked")
           })
         }, asset.symbol))
       })
@@ -197,6 +206,7 @@ const BasicExamples = () => {
       paddingX: 0,
       children: /*#__PURE__*/_jsxs(Carousel, {
         drag: "snap",
+        paginationVariant: "dot",
         snapMode: "page",
         styles: {
           root: {
@@ -233,6 +243,7 @@ const BasicExamples = () => {
       paddingX: 0,
       children: /*#__PURE__*/_jsx(Carousel, {
         drag: "none",
+        paginationVariant: "dot",
         styles: {
           root: {
             paddingHorizontal: horizontalPadding
@@ -378,6 +389,35 @@ const CustomComponentsExample = () => {
     })
   });
 };
+const AutoplayExample = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(Example, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsx(Carousel, {
+      autoplay: true,
+      loop: true,
+      paginationVariant: "dot",
+      styles: {
+        root: {
+          paddingHorizontal: theme.space[2]
+        },
+        carousel: {
+          gap: theme.space[1]
+        }
+      },
+      title: "Autoplay Carousel",
+      children: Object.values(assets).map(asset => /*#__PURE__*/_jsx(CarouselItem, {
+        accessibilityLabel: asset.name,
+        id: asset.symbol,
+        children: /*#__PURE__*/_jsx(SquareAssetCard, {
+          imageUrl: asset.imageUrl,
+          name: asset.symbol,
+          onPress: () => console.log(asset.symbol + " clicked")
+        })
+      }, asset.symbol))
+    })
+  });
+};
 const DynamicContentExample = () => {
   const theme = useTheme();
   const [items, setItems] = useState(Object.values(assets).slice(0, 3));
@@ -405,6 +445,7 @@ const DynamicContentExample = () => {
         children: "Remove Last"
       })]
     }), /*#__PURE__*/_jsx(Carousel, {
+      paginationVariant: "dot",
       styles: {
         root: {
           paddingHorizontal: theme.space[3]
@@ -416,10 +457,12 @@ const DynamicContentExample = () => {
       },
       title: "Explore Assets",
       children: items.map(asset => /*#__PURE__*/_jsx(CarouselItem, {
+        accessibilityLabel: asset.name,
         id: asset.symbol,
         children: /*#__PURE__*/_jsx(SquareAssetCard, {
           imageUrl: asset.imageUrl,
-          name: asset.symbol
+          name: asset.symbol,
+          onPress: () => console.log(asset.symbol + " clicked")
         })
       }, asset.symbol))
     })]
@@ -427,7 +470,7 @@ const DynamicContentExample = () => {
 };
 const AnimatedExample = () => {
   const theme = useTheme();
-  const SquareAssetCard = /*#__PURE__*/memo(_ref4 => {
+  const AnimatedSquareAssetCard = /*#__PURE__*/memo(_ref4 => {
     let {
       imageUrl,
       name
@@ -485,6 +528,7 @@ const AnimatedExample = () => {
   return /*#__PURE__*/_jsx(Example, {
     paddingX: 0,
     children: /*#__PURE__*/_jsx(Carousel, {
+      paginationVariant: "dot",
       styles: {
         root: {
           paddingHorizontal: theme.space[3]
@@ -493,10 +537,11 @@ const AnimatedExample = () => {
           gap: theme.space[1]
         }
       },
-      title: "Explore Assets",
+      title: "Animated Selection",
       children: Object.values(assets).map(asset => /*#__PURE__*/_jsx(CarouselItem, {
+        accessibilityLabel: asset.name,
         id: asset.symbol,
-        children: /*#__PURE__*/_jsx(SquareAssetCard, {
+        children: /*#__PURE__*/_jsx(AnimatedSquareAssetCard, {
           imageUrl: asset.imageUrl,
           name: asset.symbol
         })
@@ -603,13 +648,14 @@ const ImperativeApiExample = () => {
             gap: theme.space[1]
           }
         },
-        title: "Explore Assets",
+        title: "Imperative API",
         children: Object.values(assets).map(asset => /*#__PURE__*/_jsx(CarouselItem, {
           accessibilityLabel: asset.name,
           id: asset.symbol,
           children: /*#__PURE__*/_jsx(SquareAssetCard, {
             imageUrl: asset.imageUrl,
-            name: asset.symbol
+            name: asset.symbol,
+            onPress: () => console.log(asset.symbol + " clicked")
           })
         }, asset.symbol))
       })]
@@ -629,6 +675,7 @@ const LoopingExamples = () => {
       children: /*#__PURE__*/_jsx(Carousel, {
         loop: true,
         drag: "snap",
+        paginationVariant: "dot",
         snapMode: "page",
         styles: {
           root: {
@@ -648,8 +695,10 @@ const LoopingExamples = () => {
     }), /*#__PURE__*/_jsx(Example, {
       paddingX: 0,
       children: /*#__PURE__*/_jsx(Carousel, {
+        autoplay: true,
         loop: true,
         drag: "snap",
+        paginationVariant: "dot",
         snapMode: "item",
         styles: {
           root: {
@@ -659,7 +708,7 @@ const LoopingExamples = () => {
             gap: horizontalGap
           }
         },
-        title: "Looping - Snap Item",
+        title: "Looping with Autoplay - Snap Item",
         children: sampleItems.map((item, index) => /*#__PURE__*/_jsx(CarouselItem, {
           id: "loop-item-" + index,
           width: threeItemsWidth,
@@ -680,7 +729,7 @@ const LoopingExamples = () => {
             gap: horizontalGap
           }
         },
-        title: "Looping - Free Drag",
+        title: "Looping - Free Drag (visreg)",
         children: sampleItems.map((item, index) => /*#__PURE__*/_jsx(CarouselItem, {
           id: "loop-free-" + index,
           width: threeItemsWidth,
@@ -811,6 +860,6 @@ const AnimatedPaginationExample = () => {
 export default function CarouselScreen() {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     paddingX: 0,
-    children: [/*#__PURE__*/_jsx(BasicExamples, {}), /*#__PURE__*/_jsx(CustomComponentsExample, {}), /*#__PURE__*/_jsx(DynamicContentExample, {}), /*#__PURE__*/_jsx(AnimatedExample, {}), /*#__PURE__*/_jsx(ImperativeApiExample, {}), /*#__PURE__*/_jsx(AnimatedPaginationExample, {}), /*#__PURE__*/_jsx(LoopingExamples, {})]
+    children: [/*#__PURE__*/_jsx(BasicExamples, {}), /*#__PURE__*/_jsx(CustomComponentsExample, {}), /*#__PURE__*/_jsx(DynamicContentExample, {}), /*#__PURE__*/_jsx(AnimatedExample, {}), /*#__PURE__*/_jsx(ImperativeApiExample, {}), /*#__PURE__*/_jsx(AnimatedPaginationExample, {}), /*#__PURE__*/_jsx(LoopingExamples, {}), /*#__PURE__*/_jsx(AutoplayExample, {})]
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.42.0",
+  "version": "8.43.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,8 +198,8 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.42.0",
-    "@coinbase/cds-icons": "^5.10.0",
+    "@coinbase/cds-common": "^8.43.0",
+    "@coinbase/cds-icons": "^5.11.0",
     "@coinbase/cds-illustrations": "^4.31.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",