@coinbase/cds-mobile-visualization 3.4.0-beta.19 → 3.4.0-beta.20

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.20 (2/27/2026 PST)
+
+#### 🚀 Updates
+
+- Add styles props to PeriodSelector. [[#438](https://github.com/coinbase/cds/pull/438/)]
+
+#### 📘 Misc
+
+- Update outdated doc links. [[#440](https://github.com/coinbase/cds/pull/440)]
+
 ## 3.4.0-beta.19 (2/20/2026 PST)
 
 #### 🚀 Updates

package/dts/chart/PeriodSelector.d.ts

@@ -62,23 +62,16 @@ export declare const LiveTabLabel: React.MemoExoticComponent<
     } & React.RefAttributes<View>
   >
 >;
-export type PeriodSelectorProps = SegmentedTabsProps;
+export type PeriodSelectorProps = Omit<SegmentedTabsProps, 'styles'> &
+  Pick<SegmentedTabsProps, 'styles'>;
 /**
  * PeriodSelector is a specialized version of SegmentedTabs optimized for chart period selection.
  * It provides transparent background, primary wash active state, and full-width layout by default.
  */
 export declare const PeriodSelector: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
-    Partial<
-      Pick<
-        import('@coinbase/cds-mobile/tabs').TabsProps<string>,
-        'TabComponent' | 'TabsActiveIndicatorComponent'
-      >
-    > &
-      Omit<
-        import('@coinbase/cds-mobile/tabs').TabsProps<string>,
-        'TabComponent' | 'TabsActiveIndicatorComponent'
-      > &
+    Omit<SegmentedTabsProps, 'styles'> &
+      Pick<SegmentedTabsProps, 'styles'> &
       React.RefAttributes<any>
   >
 >;

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,EAAkB,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,6TA0B1B,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,EAAkB,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,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,GAClE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AAErC;;;GAGG;AACH,eAAO,MAAM,cAAc,gKA0B1B,CAAC"}

package/esm/chart/ChartProvider.js

@@ -3,7 +3,7 @@ export const CartesianChartContext = /*#__PURE__*/createContext(undefined);
 export const useCartesianChartContext = () => {
   const context = useContext(CartesianChartContext);
   if (!context) {
-    throw new Error('useCartesianChartContext must be used within a CartesianChart component. See http://cds.coinbase.com/components/graphs/CartesianChart.');
+    throw new Error('useCartesianChartContext must be used within a CartesianChart component. See https://cds.coinbase.com/components/charts/CartesianChart.');
   }
   return context;
 };

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

@@ -2,15 +2,18 @@ const _excluded = ["label"],
   _excluded2 = ["label", "font", "hideDot", "style"];
 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 { forwardRef, memo, useMemo, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { ScrollView, View } from 'react-native';
+import { interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withSpring } from 'react-native-reanimated';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { IconButton } from '@coinbase/cds-mobile/buttons';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Icon } from '@coinbase/cds-mobile/icons';
 import { HStack } from '@coinbase/cds-mobile/layout';
 import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
+import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
 import { Text } from '@coinbase/cds-mobile/typography';
 import { LiveTabLabel, PeriodSelector, PeriodSelectorActiveIndicator } from '../PeriodSelector';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -318,6 +321,74 @@ const ColoredExcludingLivePeriodSelectorExample = () => {
     tabs: tabs
   });
 };
+const ColoredIcon = /*#__PURE__*/memo(_ref3 => {
+  let {
+    tabId,
+    name
+  } = _ref3;
+  const {
+    activeTab
+  } = useTabsContext();
+  const isActive = (activeTab == null ? void 0 : activeTab.id) === tabId;
+  const theme = useTheme();
+  const progress = useSharedValue(isActive ? 1 : 0);
+  const [color, setColor] = useState(isActive ? theme.color.fgPrimary : theme.color.fg);
+  useEffect(() => {
+    progress.value = withSpring(isActive ? 1 : 0, tabsSpringConfig);
+  }, [isActive, progress]);
+  useAnimatedReaction(() => interpolateColor(progress.value, [0, 1], [theme.color.fg, theme.color.fgPrimary]), newColor => {
+    runOnJS(setColor)(newColor);
+  });
+  return /*#__PURE__*/_jsx(Icon, {
+    active: true,
+    name: name,
+    size: "s",
+    styles: {
+      icon: {
+        color
+      }
+    }
+  });
+});
+function IconsPeriodSelectorExample() {
+  const theme = useTheme();
+  const tabs = [{
+    id: 'buy',
+    label: /*#__PURE__*/_jsx(ColoredIcon, {
+      name: "chartLine",
+      tabId: "buy"
+    })
+  }, {
+    id: 'sell',
+    label: /*#__PURE__*/_jsx(ColoredIcon, {
+      name: "chartCandles",
+      tabId: "sell"
+    })
+  }, {
+    id: 'convert',
+    label: /*#__PURE__*/_jsx(ColoredIcon, {
+      name: "chartBar",
+      tabId: "convert"
+    })
+  }];
+  const [activeTab, updateActiveTab] = useState(tabs[0]);
+  const handleChange = useCallback(activeTab => updateActiveTab(activeTab), []);
+  return /*#__PURE__*/_jsx(PeriodSelector, {
+    accessibilityLabel: "Switch token action views",
+    activeTab: activeTab,
+    borderRadius: 300,
+    gap: 0.5,
+    onChange: handleChange,
+    padding: 0.5,
+    styles: {
+      activeIndicator: {
+        borderRadius: theme.borderRadius[200]
+      }
+    },
+    tabs: tabs,
+    width: "fit-content"
+  });
+}
 export default function All() {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -341,6 +412,9 @@ export default function All() {
     }), /*#__PURE__*/_jsx(Example, {
       title: "With Padding",
       children: /*#__PURE__*/_jsx(PaddedPeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Icons",
+      children: /*#__PURE__*/_jsx(IconsPeriodSelectorExample, {})
     })]
   });
 }

package/esm/chart/bar/BarStackGroup.js

@@ -57,7 +57,7 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
     return configs;
   }, [xScale, yScale, drawingArea, dataLength, stackIndex, totalStacks, barPadding]);
   if (xScale && !isCategoricalScale(xScale)) {
-    throw new Error('BarStackGroup requires a band scale for x-axis. See https://cds.coinbase.com/components/graphs/XAxis/#scale-type');
+    throw new Error('BarStackGroup requires a band scale for x-axis. See https://cds.coinbase.com/components/charts/XAxis/#scale-type');
   }
   if (!yScale || !drawingArea || stackConfigs.length === 0) return;
   return stackConfigs.map(_ref2 => {

package/esm/chart/bar/__stories__/BarChart.stories.js

@@ -6,6 +6,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var 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 { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';
 import { useDerivedValue } from 'react-native-reanimated';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
 import { Button, IconButton } from '@coinbase/cds-mobile/buttons';
 import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
@@ -993,6 +994,41 @@ const SunlightChart = () => {
     })]
   });
 };
+const PriceRange = () => {
+  const candles = btcCandles.slice(0, 180).reverse();
+  const data = useMemo(() => candles.map(candle => [parseFloat(candle.low), parseFloat(candle.high)]), [candles]);
+  const min = useMemo(() => Math.min(...data.map(_ref13 => {
+    let [low] = _ref13;
+    return low;
+  })), [data]);
+  const max = useMemo(() => Math.max(...data.map(_ref14 => {
+    let [, high] = _ref14;
+    return high;
+  })), [data]);
+  const tickFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    notation: 'compact',
+    maximumFractionDigits: 0
+  }).format(value), []);
+  return /*#__PURE__*/_jsx(BarChart, {
+    showYAxis: true,
+    height: 150,
+    series: [{
+      id: 'prices',
+      data,
+      color: assets.btc.color
+    }],
+    yAxis: {
+      domain: {
+        min,
+        max
+      },
+      showGrid: true,
+      tickLabelFormatter: tickFormatter
+    }
+  });
+};
 function ExampleNavigator() {
   const [currentIndex, setCurrentIndex] = useState(0);
   const examples = useMemo(() => [{
@@ -1054,6 +1090,9 @@ function ExampleNavigator() {
   }, {
     title: 'Monthly Sunlight',
     component: /*#__PURE__*/_jsx(SunlightChart, {})
+  }, {
+    title: 'Price Range',
+    component: /*#__PURE__*/_jsx(PriceRange, {})
   }], []);
   const currentExample = examples[currentIndex];
   const handlePrevious = useCallback(() => {

package/esm/chart/utils/axis.js

@@ -83,7 +83,7 @@ export const getAxisScale = _ref => {
       max: (_config$domain$max = config.domain.max) != null ? _config$domain$max : dataDomain.max
     };
   }
-  if (!isValidBounds(adjustedDomain)) throw new Error('Invalid domain bounds. See https://cds.coinbase.com/http://localhost:3000/components/graphs/XAxis/#domain');
+  if (!isValidBounds(adjustedDomain)) throw new Error('Invalid domain bounds. See https://cds.coinbase.com/components/charts/XAxis/#domain');
   if (scaleType === 'band') {
     var _config$categoryPaddi;
     return getCategoricalScale({
@@ -137,7 +137,7 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
       } = _ref2;
       return id === undefined;
     })) {
-      throw new Error('When defining multiple axes, each must have a unique id. See https://cds.coinbase.com/components/graphs/YAxis/#multiple-y-axes.');
+      throw new Error('When defining multiple axes, each must have a unique id. See https://cds.coinbase.com/components/charts/YAxis/#multiple-y-axes.');
     }
     return axes.map(_ref3 => {
       let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.19",
+  "version": "3.4.0-beta.20",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.48.0",
+    "@coinbase/cds-common": "^8.49.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.48.0",
+    "@coinbase/cds-mobile": "^8.49.0",
     "@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.48.0",
+    "@coinbase/cds-common": "^8.49.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.48.0",
+    "@coinbase/cds-mobile": "^8.49.0",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",