@coinbase/cds-mobile-visualization 3.7.0 → 3.8.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.8.1 (5/18/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix(CDS-2065): keep Gradient colors in sync with positions on stop count changes. [[#3455](https://github.com/coinbase/cds/pull/3455)]
+
+## 3.8.0 (5/8/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support active color on Tabs. [[#669](https://github.com/coinbase/cds/pull/669)]
+
 ## 3.7.0 (4/20/2026 PST)
 
 #### 🚀 Updates

package/dts/chart/PeriodSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAG3E,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;+BAyCZ,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc;;YA9Hd,CAAC;WAGZ,CAAC;uBAGE,CAAC;;8BAkJL,CAAC"}
+{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAG3E,eAAO,MAAM,6BAA6B,GAAI,wDAK3C,wBAAwB,wDAmD1B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAStD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;IAxBvB;;;OAGG;YACK,MAAM;IACd;;OAEG;cACO,OAAO;IACjB;;OAEG;YACK,GAAG;+BAyCZ,CAAC;AAQF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc;;YA7Hd,CAAC;WAGZ,CAAC;uBAGE,CAAC;;8BAmJL,CAAC"}

package/dts/chart/gradient/Gradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../src/chart/gradient/Gradient.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAyD,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClG,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,qDA6IpB,CAAC"}
+{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../src/chart/gradient/Gradient.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAyD,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClG,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,qDAyJpB,CAAC"}

package/esm/chart/PeriodSelector.js

@@ -1,5 +1,5 @@
 const _excluded = ["color", "label", "font", "hideDot", "style"],
-  _excluded2 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
+  _excluded2 = ["background", "activeBackground", "activeColor", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
 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, { forwardRef, memo, useMemo } from 'react';
@@ -107,11 +107,8 @@ export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, re
     }))]
   });
 }));
-
-// Custom tab component with primary color for active state
 const PeriodSelectorTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SegmentedTab, _extends({
   ref: ref,
-  activeColor: "fgPrimary",
   font: "label1"
 }, props))));
 /**
@@ -122,6 +119,7 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
   let {
       background = 'transparent',
       activeBackground = 'bgPrimaryWash',
+      activeColor = 'fgPrimary',
       width = '100%',
       justifyContent = 'space-between',
       TabComponent = PeriodSelectorTab,
@@ -133,6 +131,7 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
     TabComponent: TabComponent,
     TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
     activeBackground: activeBackground,
+    activeColor: activeColor,
     background: background,
     justifyContent: justifyContent,
     width: width

package/esm/chart/area/__stories__/AreaChart.stories.js

@@ -1,9 +1,10 @@
 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 { memo, useCallback } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
+import { Button } from '@coinbase/cds-mobile/buttons/Button';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { VStack } from '@coinbase/cds-mobile/layout';
+import { Box, VStack } from '@coinbase/cds-mobile/layout';
 import { DefaultReferenceLineLabel, DottedLine, ReferenceLine } from '../../line';
 import { Scrubber } from '../../scrubber/Scrubber';
 import { AreaChart } from '..';
@@ -211,6 +212,44 @@ const AxisBaselineThresholdExample = () => {
     })]
   });
 };
+
+// Regression repro for CDS-2065. The default baseline is 0; alternating between
+// an all-positive dataset (2 gradient stops) and a negative-crossing dataset
+// (3 gradient stops) causes the Gradient component to swap stop counts between
+// renders. Before the fix this crashed with `ReanimatedError: Positions array
+// must have the same size as colors array`.
+const positiveOnlyData = [10, 25, 15, 40, 30, 50, 35];
+const crossesBaselineData = [-20, 25, -15, 40, -30, 50, 35];
+const BaselineCrossingExample = () => {
+  const [crosses, setCrosses] = useState(false);
+  const data = crosses ? crossesBaselineData : positiveOnlyData;
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(AreaChart, {
+      showLines: true,
+      showYAxis: true,
+      accessibilityLabel: "Area chart toggling across the y-axis baseline",
+      height: 220,
+      series: [{
+        id: 'flow',
+        data
+      }],
+      type: "gradient",
+      yAxis: {
+        baseline: 0,
+        showGrid: true
+      }
+    }), /*#__PURE__*/_jsx(Box, {
+      paddingX: 2,
+      children: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: () => setCrosses(c => !c),
+        variant: "secondary",
+        children: "Toggle baseline crossing"
+      })
+    })]
+  });
+};
 const AreaChartStories = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -238,6 +277,9 @@ const AreaChartStories = () => {
         },
         children: /*#__PURE__*/_jsx(Scrubber, {})
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Baseline Crossing (CDS-2065 repro)",
+      children: /*#__PURE__*/_jsx(BaselineCrossingExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Axis Baseline",
       children: /*#__PURE__*/_jsx(AreaChart, {

package/esm/chart/gradient/Gradient.js

@@ -64,7 +64,7 @@ export const Gradient = /*#__PURE__*/memo(_ref => {
   };
 
   // Extract colors and positions for LinearGradient.
-  const colors = useMemo(() => (stops != null ? stops : []).map(stop => {
+  const targetColors = useMemo(() => (stops != null ? stops : []).map(stop => {
     var _stop$opacity;
     return getColorWithOpacity(stop.color, (_stop$opacity = stop.opacity) != null ? _stop$opacity : 1);
   }), [stops]);
@@ -73,6 +73,11 @@ export const Gradient = /*#__PURE__*/memo(_ref => {
   const startY = useSharedValue(targetStart.y);
   const endX = useSharedValue(targetEnd.x);
   const endY = useSharedValue(targetEnd.y);
+
+  // colors lives on the worklet so it flips in lockstep with positions; updating
+  // it via useMemo on the JS thread races the worklet-driven positions and Skia
+  // can paint mismatched array sizes when the stop count changes.
+  const currentColors = useSharedValue(targetColors);
   const fromPositions = useSharedValue(targetPositions);
   const toPositions = useSharedValue(targetPositions);
   const positionsProgress = useSharedValue(1);
@@ -88,6 +93,7 @@ export const Gradient = /*#__PURE__*/memo(_ref => {
       startY.value = targetStart.y;
       endX.value = targetEnd.x;
       endY.value = targetEnd.y;
+      currentColors.value = targetColors;
       fromPositions.value = [...targetPositions];
       toPositions.value = [...targetPositions];
       positionsProgress.value = 1;
@@ -99,16 +105,18 @@ export const Gradient = /*#__PURE__*/memo(_ref => {
     endY.value = buildTransition(targetEnd.y, transition);
     const canAnimatePositions = toPositions.value.length === targetPositions.length;
     if (canAnimatePositions) {
+      currentColors.value = targetColors;
       fromPositions.value = [...toPositions.value];
       toPositions.value = [...targetPositions];
       positionsProgress.value = 0;
       positionsProgress.value = buildTransition(1, transition);
     } else {
+      currentColors.value = targetColors;
       fromPositions.value = [...targetPositions];
       toPositions.value = [...targetPositions];
       positionsProgress.value = 1;
     }
-  }, [transition, targetStart.x, targetStart.y, targetEnd.x, targetEnd.y, targetPositions, startX, startY, endX, endY, fromPositions, toPositions, positionsProgress, shouldRender]);
+  }, [transition, targetStart.x, targetStart.y, targetEnd.x, targetEnd.y, targetColors, targetPositions, startX, startY, endX, endY, currentColors, fromPositions, toPositions, positionsProgress, shouldRender]);
   const start = useDerivedValue(() => {
     return {
       x: startX.value,
@@ -121,6 +129,7 @@ export const Gradient = /*#__PURE__*/memo(_ref => {
       y: endY.value
     };
   }, [endX, endY]);
+  const colors = useDerivedValue(() => currentColors.value, [currentColors]);
   const positions = useDerivedValue(() => {
     const from = fromPositions.value;
     const to = toPositions.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.7.0",
+  "version": "3.8.1",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.66.0",
+    "@coinbase/cds-common": "^8.75.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.66.0",
+    "@coinbase/cds-mobile": "^8.75.1",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
@@ -57,9 +57,9 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.66.0",
+    "@coinbase/cds-common": "^8.75.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.66.0",
+    "@coinbase/cds-mobile": "^8.75.1",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",