@coinbase/cds-mobile 0.0.0 → 8.13.2

package/CHANGELOG.md

@@ -0,0 +1,43 @@
+# @coinbase/cds-mobile
+
+> [NPM registry](https://www.npmjs.com/package/@coinbase/cds-mobile)
+
+All notable changes to this project will be documented in this file.
+
+`@coinbase/cds-mobile` adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+<!-- template-start -->
+
+## 8.13.2 (10/1/2025 PST)
+
+#### 🐞 Fixes
+
+- Update links for new repo. [[#42](https://github.com/coinbase/cds/pull/42)]
+
+#### 📘 Misc
+
+- Update Code Connect for Button, IconButton, TabbedChips, MultiContentModule.
+
+## 8.13.1 (9/26/2025 PST)
+
+#### 🐞 Fixes
+
+- Update ARIA attributes for TabbedChips and Tabs. [[#27](https://github.com/coinbase/cds/pull/27)]
+
+## 8.13.0 (9/25/2025 PST)
+
+#### 🚀 Updates
+
+- Added RollingNumber component.
+
+## 8.12.2 ((9/25/2025, 10:10 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.12.1 ((9/24/2025, 09:42 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.12.0 (9/18/2025 PST)
+
+- Prepare for open source release.

package/README.md

@@ -0,0 +1,14 @@
+# CDS - Mobile
+
+Components for React Native.
+
+## How To Get Started
+
+Add the relative path to the CDS icon font to your react-native.config.js. If your project lives in the monorepo this lives in the root `react-native.config.js` file. There is an example for CDS playground in there.
+
+You will need to run `npx react-native link` to link the assets for Android and iOS and then run build, `npx react-native run-ios` or `npx react-native run-android` for them to be available.
+
+### Outside mono/repo
+
+- Install package with `yarn add @coinbase/cds-mobile`.
+- Update `react-native.config.js` to include icon font in assets, i.e. `assets: ['./node_modules/@coinbase/cds-mobile/icons/font']`.

package/dts/accordion/Accordion.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import { type AccordionProviderProps } from '@coinbase/cds-common/accordion/AccordionProvider';
+import type { SharedProps } from '@coinbase/cds-common/types';
+export type AccordionBaseProps = SharedProps & AccordionProviderProps;
+export type AccordionProps = AccordionBaseProps & Pick<ViewProps, 'style'>;
+export declare const Accordion: React.MemoExoticComponent<
+  ({
+    activeKey,
+    children,
+    defaultActiveKey,
+    onChange,
+    setActiveKey,
+    testID,
+    style,
+  }: AccordionProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=Accordion.d.ts.map

package/dts/accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAEL,KAAK,sBAAsB,EAC5B,MAAM,kDAAkD,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK9D,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,sBAAsB,CAAC;AAEtE,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AAE3E,eAAO,MAAM,SAAS,gHASjB,cAAc,6CAclB,CAAC"}

package/dts/accordion/AccordionHeader.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import type { View } from 'react-native';
+import type { SharedProps } from '@coinbase/cds-common/types';
+import type { CollapsibleBaseProps } from '../collapsible/Collapsible';
+export type AccordionMediaBaseProps = {
+  media?: React.ReactNode;
+};
+export type AccordionTitleBaseProps = {
+  /**
+   * Title of the accordion item
+   */
+  title: string;
+  /**
+   * Subtitle of the accordion item
+   */
+  subtitle?: string;
+};
+export type AccordionIconBaseProps = Pick<CollapsibleBaseProps, 'collapsed'>;
+export type AccordionHeaderBaseProps = SharedProps &
+  AccordionMediaBaseProps &
+  AccordionTitleBaseProps &
+  AccordionIconBaseProps & {
+    /**
+     * Callback function fired when the accordion item is pressed
+     */
+    onPress?: (key: string) => void;
+    /**
+     * Key of the accordion item.
+     * This should be unique inside the same Accordion
+     * unless you want multiple items to be controlled at the same time.
+     */
+    itemKey: string;
+  };
+export type AccordionMediaProps = AccordionMediaBaseProps;
+export declare const AccordionMedia: React.MemoExoticComponent<
+  ({ media }: AccordionMediaProps) => import('react/jsx-runtime').JSX.Element
+>;
+export type AccordionTitleProps = AccordionTitleBaseProps;
+export declare const AccordionTitle: React.MemoExoticComponent<
+  ({ title, subtitle }: AccordionTitleProps) => import('react/jsx-runtime').JSX.Element
+>;
+export type AccordionIconProps = AccordionIconBaseProps;
+export declare const AccordionIcon: React.MemoExoticComponent<
+  ({ collapsed }: AccordionIconProps) => import('react/jsx-runtime').JSX.Element
+>;
+export type AccordionHeaderProps = AccordionHeaderBaseProps;
+/**
+ * Renders a Pressable element to use as the header to an AccordionItem.
+ * Composes an Accordion Media, Title, and Icon.
+ */
+export declare const AccordionHeader: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    SharedProps &
+      AccordionMediaBaseProps &
+      AccordionTitleBaseProps &
+      AccordionIconBaseProps & {
+        /**
+         * Callback function fired when the accordion item is pressed
+         */
+        onPress?: (key: string) => void;
+        /**
+         * Key of the accordion item.
+         * This should be unique inside the same Accordion
+         * unless you want multiple items to be controlled at the same time.
+         */
+        itemKey: string;
+      } & React.RefAttributes<View>
+  >
+>;
+//# sourceMappingURL=AccordionHeader.d.ts.map

package/dts/accordion/AccordionHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAOvE,MAAM,MAAM,uBAAuB,GAAG;IAEpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;AAE7E,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAChD,uBAAuB,GACvB,uBAAuB,GACvB,sBAAsB,GAAG;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc,wCAAoB,mBAAmB,6CAAwB,CAAC;AAE3F,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc,kDAA8B,mBAAmB,6CAW1E,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD,eAAO,MAAM,aAAa,4CAAwB,kBAAkB,6CAMlE,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,eAAe;IA/CxB;;OAEG;cACO,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAC/B;;;;OAIG;aACM,MAAM;+BAgFlB,CAAC"}

package/dts/accordion/AccordionItem.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { View, ViewProps } from 'react-native';
+import { type AccordionHeaderBaseProps } from './AccordionHeader';
+import { type AccordionPanelBaseProps } from './AccordionPanel';
+export type AccordionItemBaseProps = Pick<ViewProps, 'style'> &
+  Omit<AccordionHeaderBaseProps, 'collapsed'> &
+  Omit<AccordionPanelBaseProps, 'collapsed'> & {
+    headerRef?: React.RefObject<View>;
+    panelRef?: React.RefObject<View>;
+  };
+export type AccordionItemProps = AccordionItemBaseProps;
+/**
+ * A component that represents a single item within an Accordion.
+ * It composes together an AccordionHeader and a collapsible AccordionPanel.
+ * Accepts a unique `itemKey` prop to uniquely identify one item from another within the same Accordion.
+ */
+export declare const AccordionItem: React.MemoExoticComponent<
+  ({
+    itemKey,
+    title,
+    subtitle,
+    children,
+    onPress,
+    media,
+    testID,
+    headerRef,
+    panelRef,
+    style,
+  }: AccordionItemProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=AccordionItem.d.ts.map

package/dts/accordion/AccordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpD,OAAO,EAAmB,KAAK,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAkB,KAAK,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAC3D,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,GAC3C,IAAI,CAAC,uBAAuB,EAAE,WAAW,CAAC,GAAG;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;CAClC,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD;;;;GAIG;AACH,eAAO,MAAM,aAAa,0HAYrB,kBAAkB,6CA2BtB,CAAC"}

package/dts/accordion/AccordionPanel.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { View } from 'react-native';
+import type { SharedProps } from '@coinbase/cds-common/types';
+import { type CollapsibleBaseProps } from '../collapsible/Collapsible';
+export type AccordionPanelBaseProps = SharedProps &
+  Pick<CollapsibleBaseProps, 'collapsed' | 'children'> & {
+    /**
+     * Key of the accordion item.
+     * This should be unique inside the same Accordion
+     * unless you want multiple items to be controlled at the same time.
+     */
+    itemKey: string;
+  };
+export type AccordionPanelProps = AccordionPanelBaseProps;
+/**
+ * Renders a collapsible element to use as the primary content container for an AccordionItem.
+ * Accepts a unique `itemKey` prop to uniquely identify one panel from another.
+ */
+export declare const AccordionPanel: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    SharedProps &
+      Pick<CollapsibleBaseProps, 'children' | 'collapsed'> & {
+        /**
+         * Key of the accordion item.
+         * This should be unique inside the same Accordion
+         * unless you want multiple items to be controlled at the same time.
+         */
+        itemKey: string;
+      } & React.RefAttributes<View>
+  >
+>;
+//# sourceMappingURL=AccordionPanel.d.ts.map

package/dts/accordion/AccordionPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionPanel.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAe,KAAK,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAEpF,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAC/C,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IACrD;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D;;;GAGG;AACH,eAAO,MAAM,cAAc;IAdvB;;;;OAIG;aACM,MAAM;+BA4BlB,CAAC"}

package/dts/accordion/__figma__/Accordion.figma.d.ts

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

package/dts/accordion/__figma__/Accordion.figma.d.ts.map

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

package/dts/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Accordion';
+export * from './AccordionItem';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import type { ScrollView, ScrollViewProps } from 'react-native';
+import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type {
+  CarouselId,
+  CarouselOnDismissItem,
+  CarouselOnDismissLastItem,
+  CarouselRef,
+} from './types';
+export type { CarouselId, CarouselRef };
+export type CarouselProps = {
+  /** Determines whether progress indicators are shown in top left of Carousel. */
+  showProgress?: boolean;
+  /** Determines where dismiss IconButton is shown in each Carousel slide. */
+  showDismiss?: boolean;
+  /** An array of React.Elements to use as child for each Carousel slide. A unique key, not based on index must be provided. */
+  items: React.ReactElement[];
+  /** Return value from useCarousel hook. Allows access to certain internal data/methods of Carousel. */
+  carouselRef?: React.MutableRefObject<CarouselRef | undefined>;
+  /** Gap to insert between siblings. The last item will exclude additional spacing. */
+  gap?: ThemeVars.Space;
+  /** Optional callback function which will run after a Carousel item is dismissed. */
+  onDismissItem?: CarouselOnDismissItem;
+  /** Optional callback function which will run after the last item is dismissed and Carousel height is collapsed. */
+  onDismissLastItem?: CarouselOnDismissLastItem;
+  /** The width of each Carousel item. */
+  itemWidth?: number;
+  /** Optional boolean to have the Carousel calculate the Carousel Item height */
+  autoHeight?: boolean;
+  /** Accessibility label of CarouselItem dismiss button */
+  dismissButtonAccessibilityLabel?: SharedAccessibilityProps['accessibilityLabel'];
+  /** Accessibility hint of CarouselItem dismiss button */
+  dismissButtonAccessibilityHint?: SharedAccessibilityProps['accessibilityHint'];
+} & Omit<ScrollViewProps, 'style'> &
+  SharedProps;
+/** @deprecated This component will be removed in a future version. Use new Carousel component instead. */
+export declare const Carousel: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    {
+      /** Determines whether progress indicators are shown in top left of Carousel. */
+      showProgress?: boolean;
+      /** Determines where dismiss IconButton is shown in each Carousel slide. */
+      showDismiss?: boolean;
+      /** An array of React.Elements to use as child for each Carousel slide. A unique key, not based on index must be provided. */
+      items: React.ReactElement[];
+      /** Return value from useCarousel hook. Allows access to certain internal data/methods of Carousel. */
+      carouselRef?: React.MutableRefObject<CarouselRef | undefined>;
+      /** Gap to insert between siblings. The last item will exclude additional spacing. */
+      gap?: ThemeVars.Space;
+      /** Optional callback function which will run after a Carousel item is dismissed. */
+      onDismissItem?: CarouselOnDismissItem;
+      /** Optional callback function which will run after the last item is dismissed and Carousel height is collapsed. */
+      onDismissLastItem?: CarouselOnDismissLastItem;
+      /** The width of each Carousel item. */
+      itemWidth?: number;
+      /** Optional boolean to have the Carousel calculate the Carousel Item height */
+      autoHeight?: boolean;
+      /** Accessibility label of CarouselItem dismiss button */
+      dismissButtonAccessibilityLabel?: SharedAccessibilityProps['accessibilityLabel'];
+      /** Accessibility hint of CarouselItem dismiss button */
+      dismissButtonAccessibilityHint?: SharedAccessibilityProps['accessibilityHint'];
+    } & Omit<ScrollViewProps, 'style'> &
+      SharedProps &
+      React.RefAttributes<ScrollView>
+  >
+>;
+//# sourceMappingURL=Carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/alpha/carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAejE,OAAO,KAAK,EACV,UAAU,EAGV,qBAAqB,EACrB,yBAAyB,EACzB,WAAW,EACZ,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AAExC,MAAM,MAAM,aAAa,GAAG;IAC1B,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6HAA6H;IAC7H,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IAC5B,sGAAsG;IACtG,WAAW,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAC9D,qFAAqF;IACrF,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB,oFAAoF;IACpF,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,mHAAmH;IACnH,iBAAiB,CAAC,EAAE,yBAAyB,CAAC;IAC9C,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yDAAyD;IACzD,+BAA+B,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IACjF,wDAAwD;IACxD,8BAA8B,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;CAChF,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,GAChC,WAAW,CAAC;AAEd,0GAA0G;AAC1G,eAAO,MAAM,QAAQ;IA1BnB,gFAAgF;mBACjE,OAAO;IACtB,2EAA2E;kBAC7D,OAAO;IACrB,6HAA6H;WACtH,KAAK,CAAC,YAAY,EAAE;IAC3B,sGAAsG;kBACxF,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,SAAS,CAAC;IAC7D,qFAAqF;UAC/E,SAAS,CAAC,KAAK;IACrB,oFAAoF;oBACpE,qBAAqB;IACrC,mHAAmH;wBAC/F,yBAAyB;IAC7C,uCAAuC;gBAC3B,MAAM;IAClB,+EAA+E;iBAClE,OAAO;IACpB,yDAAyD;sCACvB,wBAAwB,CAAC,oBAAoB,CAAC;IAChF,wDAAwD;qCACvB,wBAAwB,CAAC,mBAAmB,CAAC;oFAkQ/E,CAAC"}

package/dts/alpha/carousel/CarouselControlsWrapper.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { HStackProps } from '../../layout/HStack';
+export type CarouselControlsWrapperProps = HStackProps & {
+  children?: React.ReactNode;
+};
+/** Wrapper to house ProgressIndicators and Dismiss IconButton when controls are shown in Carousel */
+export declare const CarouselControlsWrapper: React.NamedExoticComponent<CarouselControlsWrapperProps>;
+//# sourceMappingURL=CarouselControlsWrapper.d.ts.map

package/dts/alpha/carousel/CarouselControlsWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselControlsWrapper.d.ts","sourceRoot":"","sources":["../../../src/alpha/carousel/CarouselControlsWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGvD,MAAM,MAAM,4BAA4B,GAAG,WAAW,GAAG;IACvD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,qGAAqG;AACrG,eAAO,MAAM,uBAAuB,0DAoBlC,CAAC"}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { CarouselHandleDismissItem, CarouselId, CarouselOnItemMount } from './types';
+export type CarouselItemContextValue = {
+  id: CarouselId;
+  dismiss: CarouselHandleDismissItem;
+};
+/**
+ * Used internally within CarouselItem component to provide access to id and dismiss.
+ */
+export declare const CarouselItemContext: React.Context<CarouselItemContextValue | undefined>;
+type CarouselItemProps = {
+  /** Id of CarouselItem. Set via key prop when passing in items to parent Carousel component. */
+  id: CarouselId;
+  /** Index of the CarouselItem. This changes based on dismissedItems. */
+  index: number;
+  /** Determines how much padding should be between this CarouselItem and the next one. */
+  paddingEnd: ThemeVars.Space;
+  /** Show the dismiss IconButton in each CarouselItem.  */
+  showDismiss?: boolean;
+  /** x position of the Carousel scroll view. Used to interpolate opacity of dismiss button when showDismiss is true. */
+  xOffset: Animated.Value;
+  /** The total number of slides in a Carousel. Is used to understand certain conditions such as if is the last or only item. */
+  totalItems: number;
+  /** The width for Carousel slide. */
+  width: number;
+  /** The animated opacity for progress indicators. When the second to last item is dismissed we want to fade out progress indicators. */
+  progressOpacity?: Animated.Value;
+  /** Optional callback function which will run after a Carousel item is dismissed. */
+  onDismiss?: () => void;
+  /** Optional callback function which will run after the last item is dismissed and Carousel height is collapsed. */
+  onDismissLastItem?: () => void;
+  onMount: CarouselOnItemMount;
+  dismissButtonAccessibilityLabel?: SharedAccessibilityProps['accessibilityLabel'];
+  dismissButtonAccessibilityHint?: SharedAccessibilityProps['accessibilityHint'];
+};
+export declare const CarouselItem: React.FC<React.PropsWithChildren<CarouselItemProps>>;
+export {};
+//# sourceMappingURL=CarouselItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselItem.d.ts","sourceRoot":"","sources":["../../../src/alpha/carousel/CarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,KAAK,EACV,yBAAyB,EACzB,UAAU,EAGV,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAMjB,MAAM,MAAM,wBAAwB,GAAG;IACrC,EAAE,EAAE,UAAU,CAAC;IACf,OAAO,EAAE,yBAAyB,CAAC;CACpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,qDAAiE,CAAC;AAElG,KAAK,iBAAiB,GAAG;IACvB,+FAA+F;IAC/F,EAAE,EAAE,UAAU,CAAC;IACf,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC;IAC5B,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sHAAsH;IACtH,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;IACxB,8HAA8H;IAC9H,UAAU,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,uIAAuI;IACvI,eAAe,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACjC,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mHAAmH;IACnH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,+BAA+B,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IACjF,8BAA8B,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;CAChF,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAkI7E,CAAC"}

package/dts/alpha/carousel/types.d.ts

@@ -0,0 +1,32 @@
+import type { Animated } from 'react-native';
+import type { ScrollToEndFn, ScrollToFn, ScrollToParams } from '../../hooks/useScrollTo';
+export type CarouselId = string | number;
+export type CarouselScrollToId = (id: CarouselId, params?: ScrollToParams | undefined) => void;
+export type CarouselRef = {
+  dismissedItems: Set<CarouselId>;
+  length: number;
+  resetDismissedItems: () => void;
+  scrollToId: CarouselScrollToId;
+  scrollTo: ScrollToFn;
+  scrollToEnd: ScrollToEndFn;
+  currentIndex: number;
+};
+export type CarouselItemAnimatedStyles = {
+  opacity: Animated.Value;
+  width: Animated.Value;
+  height: Animated.Value | undefined;
+};
+export type CarouselMountedItemInfo = {
+  animatedStyles: CarouselItemAnimatedStyles;
+  id: CarouselId;
+  index: number;
+};
+export type CarouselMountedItemsInfo = Record<CarouselId, CarouselMountedItemInfo>;
+export type CarouselOnItemMount = (params: CarouselItemAnimatedStyles) => void;
+export type CarouselOnDismissItem = (id: CarouselId) => void;
+export type CarouselOnDismissLastItem = (params: {
+  id: CarouselId;
+  resetDismissedItems: () => void;
+}) => void;
+export type CarouselHandleDismissItem = (callbackFn?: CarouselOnDismissItem) => void;
+//# sourceMappingURL=types.d.ts.map

package/dts/alpha/carousel/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/alpha/carousel/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AACzC,MAAM,MAAM,kBAAkB,GAAG,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAC;AAE/F,MAAM,MAAM,WAAW,GAAG;IACxB,cAAc,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,QAAQ,EAAE,UAAU,CAAC;IACrB,WAAW,EAAE,aAAa,CAAC;IAC3B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;IACxB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;IACtB,MAAM,EAAE,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,cAAc,EAAE,0BAA0B,CAAC;IAC3C,EAAE,EAAE,UAAU,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC,UAAU,EAAE,uBAAuB,CAAC,CAAC;AACnF,MAAM,MAAM,mBAAmB,GAAG,CAAC,MAAM,EAAE,0BAA0B,KAAK,IAAI,CAAC;AAC/E,MAAM,MAAM,qBAAqB,GAAG,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAC;AAC7D,MAAM,MAAM,yBAAyB,GAAG,CAAC,MAAM,EAAE;IAC/C,EAAE,EAAE,UAAU,CAAC;IACf,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC,KAAK,IAAI,CAAC;AACX,MAAM,MAAM,yBAAyB,GAAG,CAAC,UAAU,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC"}

package/dts/alpha/carousel/useCarousel.d.ts

@@ -0,0 +1,14 @@
+import type { CarouselRef } from './types';
+/**
+ * Useful if you need to access internal data or methods from Carousel outside of its immediate children.
+ * @returns Object with internal data/methods from Carousel component.
+ * @example
+ * ```
+ * const carouselRef = useCarousel()
+ * const handlePress = () => carouselRef.current.scrollToId('item1');
+ * <Button onPress={handlePress}>Press me</Button>
+ * <Carousel carouselRef={carouselRef} />
+ * ```
+ */
+export declare const useCarousel: () => import('react').MutableRefObject<CarouselRef>;
+//# sourceMappingURL=useCarousel.d.ts.map

package/dts/alpha/carousel/useCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCarousel.d.ts","sourceRoot":"","sources":["../../../src/alpha/carousel/useCarousel.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,qDAWvB,CAAC"}

package/dts/alpha/carousel/useCarouselItem.d.ts

@@ -0,0 +1,22 @@
+import type { CarouselItemContextValue } from './CarouselItem';
+/** Access the index and dismiss function for a CarouselItem.
+ * @example
+ * ```
+ * const MyCarouselItem = () => {
+ * const { id, dismiss } = useCarouselItem()
+ *  return <Card onPress={dismiss}><Text>{`Carousel item ${id}`}</Text></Card>
+ * }
+ *
+ * const MyCarousel = () => {
+ *  return (
+ *    <Carousel>
+ *      <MyCarouselItem />
+ *      <MyCarouselItem />
+ *      <MyCarouselItem />
+ *    </Carousel>
+ * )
+ * }
+ * ```
+ */
+export declare const useCarouselItem: () => CarouselItemContextValue;
+//# sourceMappingURL=useCarouselItem.d.ts.map

package/dts/alpha/carousel/useCarouselItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCarouselItem.d.ts","sourceRoot":"","sources":["../../../src/alpha/carousel/useCarouselItem.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAG/D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,eAAe,QAAO,wBASlC,CAAC"}

package/dts/animation/AnimationProps.d.ts

@@ -0,0 +1,7 @@
+import type { Animated } from 'react-native';
+export type AnimationHookProps<T> = {
+  animatedStyles: T;
+  animateIn: Animated.CompositeAnimation;
+  animateOut: Animated.CompositeAnimation;
+};
+//# sourceMappingURL=AnimationProps.d.ts.map

package/dts/animation/AnimationProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationProps.d.ts","sourceRoot":"","sources":["../../src/animation/AnimationProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI;IAClC,cAAc,EAAE,CAAC,CAAC;IAClB,SAAS,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IACvC,UAAU,EAAE,QAAQ,CAAC,kBAAkB,CAAC;CACzC,CAAC"}

package/dts/animation/Lottie.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import LottieView from 'lottie-react-native';
+export type LottieMobileRef = React.ForwardedRef<LottieView>;
+export declare const Lottie: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    Omit<
+      import('../layout').BoxBaseProps,
+      'justifyContent' | 'alignContent' | 'flexDirection' | 'flexWrap'
+    > & {
+      autoplay?: boolean;
+      loop?: boolean;
+      onAnimationFinish?: () => void;
+      resizeMode?: 'cover' | 'contain' | 'center';
+      source: import('@coinbase/cds-common').LottieSource;
+      progress?: number | Animated.Value | Animated.AnimatedInterpolation<number>;
+      colorFilters?: {
+        keypath: string;
+        color: string;
+      }[];
+      animated?: boolean;
+      style?: Animated.WithAnimatedValue<
+        import('react-native').StyleProp<import('react-native').ViewStyle>
+      >;
+    } & React.RefAttributes<LottieView>
+  >
+>;
+//# sourceMappingURL=Lottie.d.ts.map

package/dts/animation/Lottie.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lottie.d.ts","sourceRoot":"","sources":["../../src/animation/Lottie.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAO7C,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;AAiD7D,eAAO,MAAM,MAAM;;;;;;;;;;;;;qCAKlB,CAAC"}

package/dts/animation/Lottie.e2e.d.ts

@@ -0,0 +1,11 @@
+export declare const Lottie: ({
+  autoplay,
+  colorFilters,
+  loop,
+  progress,
+  resizeMode,
+  source,
+  onAnimationFinish,
+  ...boxProps
+}: import('./types').LottieProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=Lottie.e2e.d.ts.map

package/dts/animation/Lottie.e2e.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lottie.e2e.d.ts","sourceRoot":"","sources":["../../src/animation/Lottie.e2e.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,4KAAa,CAAC"}

package/dts/animation/LottieStatusAnimation.d.ts

@@ -0,0 +1,8 @@
+import type { LottieStatusAnimationProps } from '@coinbase/cds-common';
+export declare const LottieStatusAnimation: ({
+  status,
+  onFinish,
+  testID,
+  ...otherProps
+}: LottieStatusAnimationProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=LottieStatusAnimation.d.ts.map

package/dts/animation/LottieStatusAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LottieStatusAnimation.d.ts","sourceRoot":"","sources":["../../src/animation/LottieStatusAnimation.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AAMvE,eAAO,MAAM,qBAAqB,GAAI,6CAKnC,0BAA0B,4CAK5B,CAAC"}

package/dts/animation/convertMotionConfig.d.ts

@@ -0,0 +1,21 @@
+import type { Animated } from 'react-native';
+import type { MotionBaseSpec } from '@coinbase/cds-common/types';
+type MotionSpec = Omit<MotionBaseSpec, 'property'>;
+export declare const mobileCurves: {
+  global: import('react-native').EasingFunction;
+  enterExpressive: import('react-native').EasingFunction;
+  enterFunctional: import('react-native').EasingFunction;
+  exitExpressive: import('react-native').EasingFunction;
+  exitFunctional: import('react-native').EasingFunction;
+  linear: import('react-native').EasingFunction;
+};
+export declare const convertMotionConfig: ({
+  toValue,
+  delay,
+  easing,
+  duration,
+  useNativeDriver,
+  oneOffDuration,
+}: MotionSpec) => Animated.TimingAnimationConfig;
+export {};
+//# sourceMappingURL=convertMotionConfig.d.ts.map

package/dts/animation/convertMotionConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"convertMotionConfig.d.ts","sourceRoot":"","sources":["../../src/animation/convertMotionConfig.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEnD,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,wEAOjC,UAAU,KAAG,QAAQ,CAAC,qBAcxB,CAAC"}

package/dts/animation/createLottie.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import type { LottiePlayer, LottieSource } from '@coinbase/cds-common';
+import type LottieView from 'lottie-react-native';
+import type { LottieProps } from './types';
+type ProgressListenerCallback = (frame: number) => void;
+type ProgressTimingConfig = {
+  startFrame?: number;
+  endFrame?: number;
+};
+export type LottieProgress = {
+  value: Animated.Value;
+  timing: (config?: ProgressTimingConfig) => {
+    start: (cb?: () => void) => void;
+  };
+  play: (cb?: () => void) => void;
+  pause: () => void;
+  reset: () => void;
+  addListener: (callback: ProgressListenerCallback) => void;
+  removeListener: () => void;
+};
+export type LottiePlayerMobile<Source extends LottieSource = LottieSource> = {
+  lottieRef: React.Ref<LottieView>;
+  progress: LottieProgress;
+  Lottie: {
+    (props: Omit<LottieProps, 'source'>): JSX.Element;
+    displayName: 'Lottie';
+  };
+} & LottiePlayer<Source>;
+export declare const createLottie: <Source extends LottieSource>(
+  source: Source,
+  progressOverride?: Animated.Value,
+) => LottiePlayerMobile<Source>;
+export {};
+//# sourceMappingURL=createLottie.d.ts.map

package/dts/animation/createLottie.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLottie.d.ts","sourceRoot":"","sources":["../../src/animation/createLottie.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEvE,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAC;AAIlD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,KAAK,wBAAwB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AACxD,KAAK,oBAAoB,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACvE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,CAAC,EAAE,oBAAoB,KAAK;QAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAA;KAAE,CAAC;IAChF,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAChC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,EAAE,CAAC,QAAQ,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC1D,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,MAAM,SAAS,YAAY,GAAG,YAAY,IAAI;IAC3E,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IACjC,QAAQ,EAAE,cAAc,CAAC;IACzB,MAAM,EAAE;QACN,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;QAClD,WAAW,EAAE,QAAQ,CAAC;KACvB,CAAC;CACH,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;AAIzB,eAAO,MAAM,YAAY,GAAI,MAAM,SAAS,YAAY,EACtD,QAAQ,MAAM,EACd,mBAAmB,QAAQ,CAAC,KAAK,KAChC,kBAAkB,CAAC,MAAM,CAoF3B,CAAC"}