@coinbase/cds-mobile-visualization 3.4.0-beta.8 → 3.4.0

package/esm/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.js

@@ -6,7 +6,7 @@ import { IconButton } from '@coinbase/cds-mobile/buttons';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { Icon } from '@coinbase/cds-mobile/icons';
 import { Box, HStack } from '@coinbase/cds-mobile/layout';
-import { TextTitle3 } from '@coinbase/cds-mobile/typography/TextTitle3';
+import { Text } from '@coinbase/cds-mobile/typography';
 import { SparklineInteractive } from '../../sparkline-interactive/SparklineInteractive';
 import { SparklineInteractiveHeader } from '../SparklineInteractiveHeader';
 import { useSparklineInteractiveHeaderStyles } from '../useSparklineInteractiveHeaderStyles';
@@ -155,7 +155,8 @@ const HeaderLabel = () => {
       active: true,
       name: "wallet",
       size: "s"
-    }), /*#__PURE__*/_jsx(TextTitle3, {
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "title3",
       children: "CustomHeader"
     })]
   });
@@ -452,11 +453,13 @@ const SparklineInteractiveHeaderScreen = () => {
       gap: 1,
       children: [/*#__PURE__*/_jsx(IconButton, {
         active: true,
+        accessibilityLabel: "Star",
         feedback: "heavy",
         name: "star",
         onPress: handlePress,
         variant: "secondary"
       }), /*#__PURE__*/_jsx(IconButton, {
+        accessibilityLabel: "Share",
         feedback: "heavy",
         name: "share",
         onPress: handlePress,
@@ -468,7 +471,8 @@ const SparklineInteractiveHeaderScreen = () => {
     children: [/*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example"
@@ -480,7 +484,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Trailing"
@@ -493,7 +498,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Custom Label"
@@ -506,7 +512,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example with AltHeader"
@@ -518,7 +525,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example with Smaller Period Set"
@@ -530,7 +538,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Example with No Period Set"
@@ -543,7 +552,8 @@ const SparklineInteractiveHeaderScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       padding: 0,
       children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(TextTitle3, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title3",
           paddingX: 3,
           paddingY: 3,
           children: "SparklineInteractive Header Custom Title"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.8",
+  "version": "3.4.0",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -16,6 +16,10 @@
       "types": "./dts/index.d.ts",
       "default": "./esm/index.js"
     },
+    "./chart": {
+      "types": "./dts/chart/index.d.ts",
+      "default": "./esm/chart/index.js"
+    },
     "./sparkline": {
       "types": "./dts/sparkline/index.d.ts",
       "default": "./esm/sparkline/index.js"
@@ -32,10 +36,10 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.27.2",
-    "@coinbase/cds-lottie-files": "^3.3.3",
-    "@coinbase/cds-mobile": "^8.27.2",
-    "@coinbase/cds-utils": "^2.3.4",
+    "@coinbase/cds-common": "^8.62.1",
+    "@coinbase/cds-lottie-files": "^3.3.4",
+    "@coinbase/cds-mobile": "^8.62.1",
+    "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
     "react-native": "^0.74.5",
@@ -53,11 +57,10 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.27.2",
-    "@coinbase/cds-lottie-files": "^3.3.3",
-    "@coinbase/cds-mobile": "^8.27.2",
-    "@coinbase/cds-utils": "^2.3.4",
-    "@figma/code-connect": "^1.3.4",
+    "@coinbase/cds-common": "^8.62.1",
+    "@coinbase/cds-lottie-files": "^3.3.4",
+    "@coinbase/cds-mobile": "^8.62.1",
+    "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",
     "react-native-gesture-handler": "2.16.2",

package/esm/chart/__stories__/Chart.stories.js

@@ -1,77 +0,0 @@
-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 { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { CartesianChart, DottedArea, Line, LineChart, SolidLine } from '../';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defaultChartHeight = 250;
-const BasicLineChart = () => {
-  const chartData = [65, 78, 45, 88, 92, 73, 69];
-  return /*#__PURE__*/_jsx(LineChart, {
-    showYAxis: true,
-    height: defaultChartHeight,
-    series: [{
-      id: 'monthly-growth',
-      data: chartData,
-      label: 'Monthly Growth',
-      color: '#2ca02c'
-    }],
-    yAxis: {
-      requestedTickCount: 2,
-      tickLabelFormatter: value => "$" + value,
-      showGrid: true
-    }
-  });
-};
-const LineStyles = () => {
-  const topChartData = [15, 28, 32, 44, 46, 36, 40, 45, 48, 38];
-  const upperMiddleChartData = [12, 23, 21, 29, 34, 28, 31, 38, 42, 35];
-  const lowerMiddleChartData = [8, 15, 14, 25, 20, 18, 22, 28, 24, 30];
-  const bottomChartData = [4, 8, 11, 15, 16, 14, 16, 10, 12, 14];
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    height: defaultChartHeight,
-    series: [{
-      id: 'top',
-      data: topChartData
-    }, {
-      id: 'upperMiddle',
-      data: upperMiddleChartData,
-      color: '#ef4444'
-    }, {
-      id: 'lowerMiddle',
-      data: lowerMiddleChartData,
-      color: '#f59e0b'
-    }, {
-      id: 'bottom',
-      data: bottomChartData,
-      color: '#800080'
-    }],
-    children: [/*#__PURE__*/_jsx(Line, {
-      seriesId: "top"
-    }), /*#__PURE__*/_jsx(Line, {
-      seriesId: "upperMiddle",
-      type: "dotted"
-    }), /*#__PURE__*/_jsx(Line, {
-      LineComponent: props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
-        strokeWidth: 4
-      })),
-      curve: "natural",
-      seriesId: "lowerMiddle"
-    }), /*#__PURE__*/_jsx(Line, {
-      showArea: true,
-      AreaComponent: DottedArea,
-      curve: "step",
-      seriesId: "bottom"
-    })]
-  });
-};
-const ChartStories = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Basic Line Chart",
-      children: /*#__PURE__*/_jsx(BasicLineChart, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Line Styles",
-      children: /*#__PURE__*/_jsx(LineStyles, {})
-    })]
-  });
-};
-export default ChartStories;