@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.66.2",
+  "version": "9.0.0-rc.2",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -165,6 +165,14 @@
       "types": "./dts/typography/index.d.ts",
       "default": "./esm/typography/index.js"
     },
+    "./visualizations/chart": {
+      "types": "./dts/visualizations/chart/index.d.ts",
+      "default": "./esm/visualizations/chart/index.js"
+    },
+    "./visualizations/sparkline": {
+      "types": "./dts/visualizations/sparkline/index.d.ts",
+      "default": "./esm/visualizations/sparkline/index.js"
+    },
     "./visualizations": {
       "types": "./dts/visualizations/index.d.ts",
       "default": "./esm/visualizations/index.js"
@@ -181,28 +189,27 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@react-navigation/native": "^6.1.6",
-    "@react-navigation/native-stack": "^6.9.26",
-    "@react-navigation/stack": "^6.3.16",
-    "lottie-react-native": "^6.7.0",
-    "react": "^18.3.1",
-    "react-native": "^0.74.5",
-    "react-native-gesture-handler": "^2.16.2",
+    "@shopify/react-native-skia": "2.2.12",
+    "lottie-react-native": "7.3.1",
+    "react": "~19.1.2",
+    "react-native": "~0.81.5",
+    "react-native-gesture-handler": "2.28.0",
     "react-native-inappbrowser-reborn": "^3.7.0",
     "react-native-navigation-bar-color": "^2.0.2",
-    "react-native-reanimated": "^3.14.0",
-    "react-native-safe-area-context": "^4.10.5",
-    "react-native-screens": "^3.32.0",
-    "react-native-svg": "^14.1.0"
+    "react-native-reanimated": "4.1.1",
+    "react-native-safe-area-context": "5.6.0",
+    "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.66.2",
+    "@coinbase/cds-common": "^9.0.0-rc.2",
     "@coinbase/cds-icons": "^5.16.0",
     "@coinbase/cds-illustrations": "^4.38.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",
-    "@react-spring/native": "^9.7.4",
+    "@react-spring/native": "^10.0.3",
+    "d3-interpolate-path": "^2.3.0",
     "fuse.js": "^7.1.0",
     "lodash": "^4.17.21",
     "type-fest": "^2.19.0",
@@ -211,24 +218,23 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.27.1",
     "@react-native-community/netinfo": "^7.1.7",
-    "@react-navigation/native-stack": "^6.9.26",
-    "@testing-library/react-native": "^11.3.0",
+    "@shopify/react-native-skia": "2.2.12",
+    "@testing-library/react-native": "^13.3.3",
     "@types/d3-color": "^3.1.3",
-    "@types/react": "^18.3.12",
-    "@types/react-test-renderer": "^18.3.0",
-    "eslint-plugin-reanimated": "^2.0.1",
-    "lottie-react-native": "6.7.0",
-    "react-native-accessibility-engine": "^3.2.0",
-    "react-native-gesture-handler": "2.16.2",
+    "@types/react": "19.1.2",
+    "lottie-react-native": "7.3.1",
+    "react": "19.1.2",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "2.28.0",
     "react-native-inappbrowser-reborn": "3.7.0",
     "react-native-navigation-bar-color": "2.0.2",
-    "react-native-reanimated": "3.14.0",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.32.0",
-    "react-native-svg": "14.1.0",
-    "react-test-renderer": "^18.3.1"
+    "react-native-reanimated": "4.1.1",
+    "react-native-safe-area-context": "5.6.0",
+    "react-native-svg": "15.12.1",
+    "react-native-worklets": "0.5.2",
+    "react-test-renderer": "19.1.2"
   }
 }

package/dts/system/__figma__/AndroidNavigationBar.figma.d.ts

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

package/dts/system/__figma__/AndroidNavigationBar.figma.d.ts.map

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

package/esm/media/__stories__/CarouselAlphaExample.js

@@ -1,93 +0,0 @@
-const _excluded = ["pictogram", "spotSquare"],
-  _excluded2 = ["image"];
-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); }
-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; }
-import React, { useCallback, useEffect, useState } from 'react';
-import { feedImages } from '@coinbase/cds-common/internal/data/feedImages';
-import { Carousel } from '../../alpha/carousel/Carousel';
-import { useCarousel } from '../../alpha/carousel/useCarousel';
-import { AnnouncementCard } from '../../cards/AnnouncementCard';
-import { Divider } from '../../layout/Divider';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export function CarouselItem(_ref) {
-  let {
-      pictogram,
-      spotSquare
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const handleOnPress = useCallback(() => {
-    console.log('pressed card');
-  }, []);
-  return /*#__PURE__*/_jsx(AnnouncementCard, _extends({
-    description: "You can fit up to fifty two chararcters on 2 lines",
-    onPress: handleOnPress,
-    pictogram: pictogram,
-    spotSquare: spotSquare,
-    title: "Title/Headline"
-  }, props));
-}
-export function CarouselItemImage(_ref2) {
-  let {
-      image
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  const handleOnPress = useCallback(() => {
-    console.log('pressed card');
-  }, []);
-  return /*#__PURE__*/_jsx(AnnouncementCard, _extends({
-    description: "You can fit up to fifty two chararcters on 2 lines",
-    image: image,
-    onPress: handleOnPress,
-    title: "Title/Headline"
-  }, props));
-}
-export function ProgressBarsExample() {
-  const carouselRef = useCarousel();
-  const [currentCarouselRef, setCurrentCarouselRef] = useState(carouselRef.current);
-  const onDismissItem = useCallback(id => {
-    setCurrentCarouselRef(carouselRef.current);
-    console.log('onDismissItem', id);
-  }, [carouselRef]);
-  const onDismissLastItem = useCallback(() => {
-    console.log('onDismissLastItem');
-  }, []);
-  useEffect(() => {
-    setCurrentCarouselRef(carouselRef.current);
-  }, [carouselRef]);
-  const handleOnMomentumScrollEnd = useCallback(() => {
-    setCurrentCarouselRef(carouselRef.current);
-  }, [carouselRef]);
-  const accessibilityLabel = currentCarouselRef.currentIndex + 1 + " of " + currentCarouselRef.length + ", Title/Headline";
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Carousel, {
-      showDismiss: true,
-      showProgress: true,
-      carouselRef: carouselRef,
-      dismissButtonAccessibilityLabel: "Close",
-      items: [/*#__PURE__*/_jsx(CarouselItem, {
-        accessibilityLabel: accessibilityLabel,
-        spotSquare: "sparkleToken"
-      }, "item1"), /*#__PURE__*/_jsx(CarouselItem, {
-        accessibilityLabel: accessibilityLabel,
-        pictogram: "addressBook"
-      }, "item2"), /*#__PURE__*/_jsx(CarouselItem, {
-        accessibilityLabel: accessibilityLabel,
-        spotSquare: "announcementAdvancedTrading"
-      }, "item3"), /*#__PURE__*/_jsx(CarouselItem, {
-        accessibilityLabel: accessibilityLabel,
-        pictogram: "worldwide"
-      }, "item4")],
-      onDismissItem: onDismissItem,
-      onDismissLastItem: onDismissLastItem,
-      onMomentumScrollEnd: handleOnMomentumScrollEnd
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Carousel, {
-      showProgress: true,
-      items: feedImages.map((item, index) => /*#__PURE__*/_jsx(CarouselItemImage, {
-        accessibilityLabel: index + 1 + " of " + feedImages.length + ", Title/Headline",
-        image: item
-      }, item)),
-      onDismissItem: onDismissItem,
-      onDismissLastItem: onDismissLastItem
-    }), /*#__PURE__*/_jsx(Divider, {})]
-  });
-}

package/esm/media/__stories__/CarouselMedia.stories.js

@@ -1,180 +0,0 @@
-import React, { memo, useCallback, useMemo, useRef } from 'react';
-import { useIndexCounter } from '@coinbase/cds-common/hooks/useIndexCounter';
-import { svgs } from '@coinbase/cds-common/internal/data/assets';
-import { Button } from '../../buttons';
-import { Card } from '../../cards';
-import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { HStack } from '../../layout';
-import { Text } from '../../typography/Text';
-import { Carousel } from '../Carousel/Carousel';
-import { useCarousel } from '../Carousel/useCarousel';
-import { useCarouselItem } from '../Carousel/useCarouselItem';
-import { RemoteImage } from '../RemoteImage';
-import { ProgressBarsExample } from './CarouselAlphaExample';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ExampleCarouselItem = /*#__PURE__*/memo(_ref => {
-  let {
-    svgId = 1
-  } = _ref;
-  const {
-    dismiss
-  } = useCarouselItem();
-  return /*#__PURE__*/_jsxs(Card, {
-    onPress: () => dismiss(),
-    padding: 2,
-    children: [/*#__PURE__*/_jsx(Text, {
-      ellipsize: "tail",
-      font: "label1",
-      children: "Label"
-    }), /*#__PURE__*/_jsx(Text, {
-      color: "fgMuted",
-      ellipsize: "tail",
-      font: "headline",
-      numberOfLines: 2,
-      paddingBottom: 0.5,
-      children: "Title"
-    }), /*#__PURE__*/_jsx(RemoteImage, {
-      height: 120,
-      resizeMode: "cover",
-      shape: "squircle",
-      source: svgs[svgId],
-      width: 120
-    })]
-  });
-});
-const SimpleExample = () => {
-  return /*#__PURE__*/_jsx(Example, {
-    title: "Carousel",
-    children: /*#__PURE__*/_jsx(Carousel, {
-      items: [/*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 3
-      }, "item1"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 2
-      }, "item2"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 4
-      }, "item3"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 2
-      }, "item4"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 1
-      }, "item5"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 2
-      }, "item6")]
-    })
-  });
-};
-const UpdateOnMountExample = () => {
-  const handleOnReady = useCallback(_ref2 => {
-    let {
-      scrollToId
-    } = _ref2;
-    scrollToId('item3', {
-      animated: false
-    });
-  }, []);
-  return /*#__PURE__*/_jsx(Example, {
-    title: "Carousel - snap to index on mount",
-    children: /*#__PURE__*/_jsx(Carousel, {
-      items: [/*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 4
-      }, "item1"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 3
-      }, "item2"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 2
-      }, "item3"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 5
-      }, "item4"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 2
-      }, "item5"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 2
-      }, "item6")],
-      onReady: handleOnReady
-    })
-  });
-};
-const TriggerViaButton = () => {
-  const carousel = useCarousel();
-  const triggerScrollTo = useCallback(() => {
-    carousel.current.scrollToId('item3');
-  }, [carousel]);
-  return /*#__PURE__*/_jsxs(Example, {
-    title: "Carousel - trigger scrollTo via button",
-    children: [/*#__PURE__*/_jsx(Button, {
-      onPress: triggerScrollTo,
-      children: "Test scrollTo"
-    }), /*#__PURE__*/_jsx(Carousel, {
-      carouselRef: carousel,
-      items: [/*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 1
-      }, "item1"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 2
-      }, "item2"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 3
-      }, "item3"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 4
-      }, "item4"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 5
-      }, "item5"), /*#__PURE__*/_jsx(ExampleCarouselItem, {
-        svgId: 2
-      }, "item6")]
-    })]
-  });
-};
-const DynamicItemsExample = () => {
-  const carousel = useCarousel();
-  const triggerScrollToEnd = useRef(false);
-  const onIncrement = useCallback(() => {
-    triggerScrollToEnd.current = true;
-  }, []);
-  const {
-    activeIndex: itemsLength,
-    handleIncrement
-  } = useIndexCounter({
-    length: 100,
-    startIndex: 4,
-    onIncrement
-  });
-  const handleScrollToEnd = useCallback(() => {
-    carousel.current.scrollToEnd();
-  }, [carousel]);
-  const onContentSizeChange = useCallback(() => {
-    if (triggerScrollToEnd.current) {
-      handleScrollToEnd();
-      triggerScrollToEnd.current = false;
-    }
-  }, [handleScrollToEnd]);
-  const items = useMemo(() => {
-    return Array.from({
-      length: itemsLength
-    }).map((_, index) => {
-      return /*#__PURE__*/_jsx(ExampleCarouselItem, {}, "add-item-example-" + index);
-    });
-  }, [itemsLength]);
-  return /*#__PURE__*/_jsxs(Example, {
-    title: "Carousel - dynamic items",
-    children: [/*#__PURE__*/_jsxs(HStack, {
-      alignItems: "flex-start",
-      gap: 2,
-      paddingBottom: 2,
-      children: [/*#__PURE__*/_jsx(Button, {
-        compact: true,
-        onPress: handleIncrement,
-        children: "Add item"
-      }), /*#__PURE__*/_jsx(Button, {
-        compact: true,
-        onPress: handleScrollToEnd,
-        children: "Scroll to end"
-      })]
-    }), /*#__PURE__*/_jsx(Carousel, {
-      carouselRef: carousel,
-      items: items,
-      onContentSizeChange: onContentSizeChange
-    })]
-  });
-};
-const CarouselScreen = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(ProgressBarsExample, {}), /*#__PURE__*/_jsx(DynamicItemsExample, {}), /*#__PURE__*/_jsx(SimpleExample, {}), /*#__PURE__*/_jsx(UpdateOnMountExample, {}), /*#__PURE__*/_jsx(TriggerViaButton, {})]
-  });
-};
-export default CarouselScreen;
-ExampleCarouselItem.displayName = 'ExampleCarouselItem';

package/esm/system/__figma__/AndroidNavigationBar.figma.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { figma } from '@figma/code-connect';
-import { AndroidNavigationBar } from '../AndroidNavigationBar';
-import { jsx as _jsx } from "react/jsx-runtime";
-figma.connect(AndroidNavigationBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10414%3A896', {
-  imports: ["import { AndroidNavigationBar } from '@coinbase/cds-mobile/system/AndroidNavigationBar'"],
-  props: {
-    showsearch27799: figma.boolean('show search'),
-    showhelpcenter176314: figma.boolean('show help center'),
-    showsecondarycta24034: figma.boolean('show secondary cta'),
-    shownotification24028: figma.boolean('show notification'),
-    type156900: figma.instance('type'),
-    showpagetitle80: figma.boolean('show page title'),
-    showtabs24024: figma.boolean('show tabs'),
-    showprimarycta24032: figma.boolean('show primary cta'),
-    showbackarrow24022: figma.boolean('show back arrow'),
-    device: figma.enum('device', {
-      desktop: 'desktop',
-      tablet: 'tablet',
-      'responsive mobile': 'responsive-mobile'
-    })
-  },
-  example: () => /*#__PURE__*/_jsx(AndroidNavigationBar, {})
-});