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

package/CHANGELOG.md

@@ -8,6 +8,17 @@ 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 classnames and styles props to PeriodSelector. [[#438](https://github.com/coinbase/cds/pull/438/)]
+
+#### 📘 Misc
+
+- Clarify framer-motion is a peerDependency. [[#437](https://github.com/coinbase/cds/pull/437)]
+- Update oudated 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

@@ -9,6 +9,7 @@ export declare const PeriodSelectorActiveIndicator: React.MemoExoticComponent<
     position,
     borderRadius,
     style,
+    ...props
   }: TabsActiveIndicatorProps) => import('react/jsx-runtime').JSX.Element | null
 >;
 export declare const liveTabLabelDefaultElement = 'span';
@@ -33,23 +34,16 @@ type LiveTabLabelComponent = (<AsComponent extends React.ElementType = LiveTabLa
 ) => Polymorphic.ReactReturn) &
   Polymorphic.ReactNamed;
 export declare const LiveTabLabel: LiveTabLabelComponent;
-export type PeriodSelectorProps = SegmentedTabsProps;
+export type PeriodSelectorProps = Omit<SegmentedTabsProps, 'styles' | 'classNames'> &
+  Pick<SegmentedTabsProps, 'styles' | 'classNames'>;
 /**
  * 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-web/tabs').TabsProps<string>,
-        'TabComponent' | 'TabsActiveIndicatorComponent'
-      >
-    > &
-      Omit<
-        import('@coinbase/cds-web/tabs').TabsProps<string>,
-        'TabComponent' | 'TabsActiveIndicatorComponent'
-      > &
+    Omit<SegmentedTabsProps, 'styles' | 'classNames'> &
+      Pick<SegmentedTabsProps, 'styles' | 'classNames'> &
       React.RefAttributes<HTMLElement>
   >
 >;

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,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAEvE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAE9B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAOxE,eAAO,MAAM,6BAA6B,4FAOrC,wBAAwB,oDAyB5B,CAAC;AAEF,eAAO,MAAM,0BAA0B,SAAS,CAAC;AAEjD,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC;AAE3E,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACtF,WAAW,EACX,qBAAqB,CACtB,CAAC;AAYF,KAAK,qBAAqB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,0BAA0B,EAC/F,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAClC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,YAAY,EAAE,qBAiC1B,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC;AAErD;;;GAGG;AACH,eAAO,MAAM,cAAc,+TA0B1B,CAAC"}
+{"version":3,"file":"PeriodSelector.d.ts","sourceRoot":"","sources":["../../src/chart/PeriodSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAEvE,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,wBAAwB,EAE9B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAOxE,eAAO,MAAM,6BAA6B,qGAQrC,wBAAwB,oDA0B5B,CAAC;AAEF,eAAO,MAAM,0BAA0B,SAAS,CAAC;AAEjD,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC;AAE3E,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG;IAClD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACtF,WAAW,EACX,qBAAqB,CACtB,CAAC;AAYF,KAAK,qBAAqB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,0BAA0B,EAC/F,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,KAClC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,YAAY,EAAE,qBAiC1B,CAAC;AASF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,YAAY,CAAC,GACjF,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,YAAY,CAAC,CAAC;AAEpD;;;GAGG;AACH,eAAO,MAAM,cAAc,sMAwC1B,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/PeriodSelector.js

@@ -1,13 +1,15 @@
-const _excluded = ["as", "color", "label", "display", "alignItems", "font", "hideDot"],
-  _excluded2 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-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; }
+const _excluded = ["activeTabRect", "background", "position", "borderRadius", "style"],
+  _excluded2 = ["as", "color", "label", "display", "alignItems", "font", "hideDot"],
+  _excluded3 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent", "className", "classNames", "style", "styles"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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';
+import { cx } from '@coinbase/cds-web';
 import { Box } from '@coinbase/cds-web/layout';
 import { SegmentedTabs, tabsTransitionConfig } from '@coinbase/cds-web/tabs';
 import { SegmentedTab } from '@coinbase/cds-web/tabs/SegmentedTab';
@@ -19,12 +21,13 @@ const MotionBox = motion(Box);
 // Animated active indicator to support smooth transition of background color
 export const PeriodSelectorActiveIndicator = /*#__PURE__*/memo(_ref => {
   let {
-    activeTabRect,
-    background = 'bgPrimaryWash',
-    position = 'absolute',
-    borderRadius = 1000,
-    style
-  } = _ref;
+      activeTabRect,
+      background = 'bgPrimaryWash',
+      position = 'absolute',
+      borderRadius = 1000,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const {
     width,
     height,
@@ -35,7 +38,7 @@ export const PeriodSelectorActiveIndicator = /*#__PURE__*/memo(_ref => {
     x
   }), [width, x]);
   if (!width) return null;
-  return /*#__PURE__*/_jsx(MotionBox, {
+  return /*#__PURE__*/_jsx(MotionBox, _objectSpread({
     animate: activeAnimation,
     borderRadius: borderRadius,
     "data-testid": "period-selector-active-indicator",
@@ -49,7 +52,7 @@ export const PeriodSelectorActiveIndicator = /*#__PURE__*/memo(_ref => {
       transition: 'background-color 0.2s ease'
     }, style),
     transition: tabsTransitionConfig
-  });
+  }, props));
 });
 export const liveTabLabelDefaultElement = 'span';
 // is this bad to use var(--space-1) for height and width?
@@ -64,7 +67,7 @@ export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, re
       font = 'label1',
       hideDot
     } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded);
+    props = _objectWithoutProperties(_ref2, _excluded2);
   const Component = as !== null && as !== void 0 ? as : liveTabLabelDefaultElement;
   return /*#__PURE__*/_jsxs(Text, _objectSpread(_objectSpread({
     ref: ref,
@@ -97,16 +100,30 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
       width = '100%',
       justifyContent = 'space-between',
       TabComponent = PeriodSelectorTab,
-      TabsActiveIndicatorComponent = PeriodSelectorActiveIndicator
+      TabsActiveIndicatorComponent = PeriodSelectorActiveIndicator,
+      className,
+      classNames,
+      style,
+      styles
     } = _ref3,
-    props = _objectWithoutProperties(_ref3, _excluded2);
+    props = _objectWithoutProperties(_ref3, _excluded3);
   return /*#__PURE__*/_jsx(SegmentedTabs, _objectSpread({
     ref: ref,
     TabComponent: TabComponent,
     TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
     activeBackground: activeBackground,
     background: background,
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    classNames: {
+      tab: classNames === null || classNames === void 0 ? void 0 : classNames.tab,
+      activeIndicator: classNames === null || classNames === void 0 ? void 0 : classNames.activeIndicator
+    },
     justifyContent: justifyContent,
+    style: styles !== null && styles !== void 0 && styles.root ? _objectSpread(_objectSpread({}, style), styles.root) : style,
+    styles: {
+      tab: styles === null || styles === void 0 ? void 0 : styles.tab,
+      activeIndicator: styles === null || styles === void 0 ? void 0 : styles.activeIndicator
+    },
     width: width
   }, props));
 }));

package/esm/chart/bar/BarStackGroup.js

@@ -63,7 +63,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 null;
   return stackConfigs.map(_ref2 => {

package/esm/chart/utils/axis.js

@@ -88,7 +88,7 @@ export const getAxisScale = _ref => {
       max: (_config$domain$max = config.domain.max) !== null && _config$domain$max !== void 0 ? _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({
@@ -138,7 +138,7 @@ export const getAxisConfig = function (type, axes) {
       } = _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-web-visualization",
-  "version": "3.4.0-beta.19",
+  "version": "3.4.0-beta.20",
   "description": "Coinbase Design System - Web Sparkline",
   "repository": {
     "type": "git",
@@ -38,10 +38,11 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.48.0",
+    "@coinbase/cds-common": "^8.49.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
-    "@coinbase/cds-web": "^8.48.0",
+    "@coinbase/cds-web": "^8.49.0",
+    "framer-motion": "^10.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -58,12 +59,13 @@
     "@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-utils": "^2.3.5",
-    "@coinbase/cds-web": "^8.48.0",
+    "@coinbase/cds-web": "^8.49.0",
     "@linaria/core": "^3.0.0-beta.22",
     "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1"
+    "@types/react-dom": "^18.3.1",
+    "framer-motion": "^10.18.0"
   }
 }