@coinbase/cds-mobile 8.69.0 → 8.70.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.70.0 (5/8/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support active color on Tabs. [[#669](https://github.com/coinbase/cds/pull/669)]
+
+## 8.69.1 (5/6/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: support BoxBaseProps in mobile ListCell. [[#667](https://github.com/coinbase/cds/pull/666)]
+
 ## 8.69.0 ((5/5/2026, 02:27 PM PST))
 
 This is an artificial version bump with no new change.

package/dts/cells/Cell.d.ts

@@ -22,7 +22,8 @@ export type CellSpacing = Pick<
   | 'marginBottom'
   | 'marginStart'
 >;
-export type CellBaseProps = SharedProps &
+export type CellBaseProps = BoxBaseProps &
+  SharedProps &
   LinkableProps &
   Pick<PressableProps, 'blendStyles'> & {
     accessory?: React.ReactElement<CellAccessoryProps>;

package/dts/cells/Cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../src/cells/Cell.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../src/cells/Cell.tsx"],"names":[],"mappings":"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"}

package/dts/tabs/DefaultTab.d.ts

@@ -15,7 +15,7 @@ export type DefaultTabLabelProps = Partial<Pick<DotCountBaseProps, 'count' | 'ma
   Pick<SharedAccessibilityProps, 'accessibilityLabel'>;
 export type DefaultTabProps<TabId extends string = string> = Omit<
   PressableProps,
-  'children' | 'onPress' | 'style'
+  'children' | 'onPress' | 'style' | 'color'
 > &
   TabComponentProps<TabId, TabValue<TabId> & DefaultTabLabelProps> & {
     /** Callback that is fired when the tab is pressed, after the active tab updates. */
@@ -29,7 +29,7 @@ type DefaultTabComponent = <TabId extends string = string>(
 ) => React.ReactElement;
 declare const DefaultTabComponent: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
-    Omit<PressableProps, 'children' | 'style' | 'onPress'> &
+    Omit<PressableProps, 'children' | 'color' | 'style' | 'onPress'> &
       Omit<
         TabValue<string> &
           Partial<Pick<DotCountBaseProps, 'max' | 'count'>> &
@@ -37,6 +37,8 @@ declare const DefaultTabComponent: React.MemoExoticComponent<
         'id' | 'Component'
       > & {
         id: string;
+        color?: import('@coinbase/cds-common').ThemeVars.Color;
+        activeColor?: import('@coinbase/cds-common').ThemeVars.Color;
         style?: StyleProp<ViewStyle>;
       } & {
         /** Callback that is fired when the tab is pressed, after the active tab updates. */

package/dts/tabs/DefaultTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultTab.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EACL,KAAK,qBAAqB,EAE1B,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGlE,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,qEAAqE;AACrE,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,GAClF,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AAEvD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,cAAc,EACd,UAAU,GAAG,SAAS,GAAG,OAAO,CACjC,GACC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAC,GAAG;IACjE,oFAAoF;IACpF,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEJ,KAAK,mBAAmB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAC/D,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,mBAAmB;;;;IATrB,oFAAoF;mCACvD,qBAAqB,KAAK,IAAI;YACnD,SAAS,CAAC,SAAS,CAAC;+BA0E/B,CAAC;AAIF,eAAO,MAAM,UAAU,EAA0B,mBAAmB,CAAC"}
+{"version":3,"file":"DefaultTab.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EACL,KAAK,qBAAqB,EAE1B,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGlE,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAEhD,qEAAqE;AACrE,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,GAClF,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AAEvD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,cAAc,EACd,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAC3C,GACC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,oBAAoB,CAAC,GAAG;IACjE,oFAAoF;IACpF,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEJ,KAAK,mBAAmB,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAC/D,KAAK,CAAC,YAAY,CAAC;AAExB,QAAA,MAAM,mBAAmB;;;;;;IATrB,oFAAoF;mCACvD,qBAAqB,KAAK,IAAI;YACnD,SAAS,CAAC,SAAS,CAAC;+BA4E/B,CAAC;AAIF,eAAO,MAAM,UAAU,EAA0B,mBAAmB,CAAC"}

package/dts/tabs/DefaultTabsActiveIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultTabsActiveIndicator.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTabsActiveIndicator.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,wBAAwB,EAAoB,MAAM,QAAQ,CAAC;AAQzE,eAAO,MAAM,0BAA0B,+FAOlC,wBAAwB,oDAmC5B,CAAC"}
+{"version":3,"file":"DefaultTabsActiveIndicator.d.ts","sourceRoot":"","sources":["../../src/tabs/DefaultTabsActiveIndicator.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,wBAAwB,EAAoB,MAAM,QAAQ,CAAC;AAOzE,eAAO,MAAM,0BAA0B,+FAOlC,wBAAwB,oDAmC5B,CAAC"}

package/dts/tabs/SegmentedTab.d.ts

@@ -13,13 +13,13 @@ export type SegmentedTabBaseProps<TabId extends string = string> = TabValue<TabI
   Pick<TextBaseProps, 'font' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'lineHeight'> &
   Omit<PressableBaseProps, 'children' | 'disabled' | 'onPress' | 'style'> & {
     /**
-     * Text color when the SegmentedTab is active.
-     * @default negativeForeground
+     * Text color when active.
+     * @default fgInverse
      */
     activeColor?: ThemeVars.Color;
     /**
-     * Text color when the SegmentedTab is inactive.
-     * @default foreground
+     * Text color when inactive.
+     * @default fg
      */
     color?: ThemeVars.Color;
   };

package/dts/tabs/Tabs.d.ts

@@ -18,6 +18,14 @@ export type TabComponentProps<
   TTab extends TabValue<TabId> = TabValue<TabId>,
 > = Omit<TTab, 'Component' | 'id'> & {
   id: TabId;
+  /**
+   * Color when a tab is inactive.
+   */
+  color?: ThemeVars.Color;
+  /**
+   * Color when a tab is active.
+   */
+  activeColor?: ThemeVars.Color;
   style?: StyleProp<ViewStyle>;
 };
 export type TabComponent<
@@ -29,7 +37,8 @@ export type TabsBaseProps<
   TabId extends string = string,
   TTab extends TabValue<TabId> = TabValue<TabId>,
 > = Omit<BoxBaseProps, 'onChange'> &
-  Omit<TabsOptions<TabId, TTab>, 'tabs'> & {
+  Omit<TabsOptions<TabId, TTab>, 'tabs'> &
+  Pick<TabComponentProps<TabId, TTab>, 'color' | 'activeColor'> & {
     /** The array of tabs data. Each tab may optionally define a custom Component to render. */
     tabs: (TTab & {
       Component?: TabComponent<TabId, TTab>;

package/dts/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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"}

package/esm/system/__stories__/componentConfigStickerSheet/StickerSheet.js

@@ -16,6 +16,7 @@ import { SearchExample } from './examples/Search';
 import { SegmentedTabsExample } from './examples/SegmentedTabs';
 import { SelectExample } from './examples/Select';
 import { SelectChipExample } from './examples/SelectChip';
+import { TabsExample } from './examples/Tabs';
 import { TagExample } from './examples/Tag';
 import { TextInputExample } from './examples/TextInput';
 import { Container } from './Container';
@@ -38,6 +39,9 @@ export const StickerSheet = /*#__PURE__*/memo(() => {
         }), /*#__PURE__*/_jsx(Container, {
           title: "Segmented Tabs",
           children: /*#__PURE__*/_jsx(SegmentedTabsExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Tabs",
+          children: /*#__PURE__*/_jsx(TabsExample, {})
         }), /*#__PURE__*/_jsx(Container, {
           title: "Select Input (SelectOption)",
           children: /*#__PURE__*/_jsx(SelectExample, {})

package/esm/system/__stories__/componentConfigStickerSheet/customComponentConfig.js

@@ -112,5 +112,17 @@ export const customComponentConfig = {
     font: props.compact ? 'label2' : 'body',
     labelColor: 'fgMuted',
     labelFont: props.compact ? props.align === 'end' ? 'label1' : 'label2' : 'body'
-  })
+  }),
+  ListCell: props => {
+    var _props$spacingVariant;
+    const spacingVariant = (_props$spacingVariant = props.spacingVariant) != null ? _props$spacingVariant : props.compact ? 'compact' : 'normal';
+    return _extends({}, spacingVariant === 'normal' ? {
+      minHeight: 36
+    } : {});
+  },
+  Tabs: {
+    activeColor: 'fg',
+    color: 'fgMuted',
+    activeBackground: 'fg'
+  }
 };

package/esm/system/__stories__/componentConfigStickerSheet/examples/ListCell.js

@@ -43,6 +43,8 @@ export const ListCellExample = /*#__PURE__*/memo(() => {
       onPress: () => undefined,
       subtitle: "XRP",
       title: "XRP"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      title: "Short"
     })]
   });
 });

package/esm/system/__stories__/componentConfigStickerSheet/examples/Tabs.js

@@ -0,0 +1,24 @@
+import React, { memo, useState } from 'react';
+import { Tabs } from '../../../../tabs/Tabs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const tabs = [{
+  id: 'orderBook',
+  label: 'Order book'
+}, {
+  id: 'tradeHistory',
+  label: 'Trade history'
+}, {
+  id: 'orders',
+  label: 'Orders'
+}];
+export const TabsExample = /*#__PURE__*/memo(() => {
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return /*#__PURE__*/_jsx(Tabs, {
+    accessibilityLabel: "Market views",
+    activeTab: activeTab,
+    background: "bg",
+    gap: 4,
+    onChange: setActiveTab,
+    tabs: tabs
+  });
+});

package/esm/tabs/DefaultTab.js

@@ -1,4 +1,4 @@
-const _excluded = ["id", "label", "disabled", "onPress", "count", "max", "accessibilityLabel", "style", "testID"];
+const _excluded = ["id", "label", "disabled", "onPress", "count", "max", "accessibilityLabel", "style", "testID", "color", "activeColor"];
 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, useCallback, useMemo } from 'react';
@@ -22,7 +22,9 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       max,
       accessibilityLabel,
       style,
-      testID
+      testID,
+      color = 'fg',
+      activeColor = 'fgPrimary'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -60,7 +62,7 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       alignItems: "center",
       gap: 0.5,
       children: [/*#__PURE__*/_jsx(Text, {
-        color: isActive ? 'fgPrimary' : 'fg',
+        color: isActive ? activeColor : color,
         font: "headline",
         style: labelPaddingStyle,
         children: label

package/esm/tabs/DefaultTabsActiveIndicator.js

@@ -7,8 +7,7 @@ import { Box } from '../layout';
 import { tabsSpringConfig } from './Tabs';
 
 /**
- * Default underline-style indicator for mobile `Tabs`. Pass as
- * `TabsActiveIndicatorComponent={DefaultTabsActiveIndicator}` with `TabComponent={DefaultTab}`.
+ * Default underline-style indicator for mobile `Tabs`.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const AnimatedBox = Animated.createAnimatedComponent(Box);

package/esm/tabs/Tabs.js

@@ -1,5 +1,5 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "testID"],
+  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "color", "activeColor", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "testID"],
   _excluded3 = ["id", "Component"],
   _excluded4 = ["activeTabRect", "position", "style", "testID"];
 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); }
@@ -42,6 +42,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       TabComponent = DefaultTab,
       TabsActiveIndicatorComponent = DefaultTabsActiveIndicator,
       activeBackground,
+      color,
+      activeColor,
       activeTab,
       disabled,
       onChange,
@@ -100,6 +102,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     borderRadius: borderRadius,
     borderTopLeftRadius: borderTopLeftRadius,
     borderTopRightRadius: borderTopRightRadius,
+    color: color,
     onLayout: updateActiveTabRect,
     opacity: opacity != null ? opacity : disabled ? accessibleOpacityDisabled : 1,
     position: position,
@@ -119,20 +122,23 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
         borderTopRightRadius: borderTopRightRadius,
         style: styles == null ? void 0 : styles.activeIndicator,
         testID: testID ? testID + "-active-indicator" : undefined
-      }), tabs.map(_ref2 => {
-        let {
+      }), tabs.map(tabProps => {
+        const {
             id,
             Component: CustomTabComponent
-          } = _ref2,
-          props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+          } = tabProps,
+          tabRest = _objectWithoutPropertiesLoose(tabProps, _excluded3);
         const RenderedTab = CustomTabComponent != null ? CustomTabComponent : TabComponent;
+        const renderedTabProps = _extends({}, tabRest, {
+          activeColor,
+          color,
+          id,
+          style: styles == null ? void 0 : styles.tab
+        });
         return /*#__PURE__*/_jsx(TabContainer, {
           id: id,
           registerRef: registerRef,
-          children: /*#__PURE__*/_jsx(RenderedTab, _extends({
-            id: id,
-            style: styles == null ? void 0 : styles.tab
-          }, props))
+          children: /*#__PURE__*/_jsx(RenderedTab, _extends({}, renderedTabProps))
         }, id);
       })]
     })
@@ -140,14 +146,14 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
 }));
 TabsComponent.displayName = 'Tabs';
 export const Tabs = TabsComponent;
-export const TabsActiveIndicator = _ref3 => {
+export const TabsActiveIndicator = _ref2 => {
   let {
       activeTabRect,
       position = 'absolute',
       style,
       testID = 'tabs-active-indicator'
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded4);
   const previousActiveTabRect = useRef(activeTabRect);
   const newActiveTabRect = {
     x: activeTabRect.x,

package/esm/tabs/__stories__/SegmentedTabs.stories.js

@@ -292,7 +292,14 @@ const SegmentedTabsScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     defaultActiveTab: basicSegments[0],
     tabs: basicSegments,
     title: "Border Radius"
-  }), /*#__PURE__*/_jsx(CustomStylesExample, {}), /*#__PURE__*/_jsx(IconLabelsExample, {})]
+  }), /*#__PURE__*/_jsx(CustomStylesExample, {}), /*#__PURE__*/_jsx(IconLabelsExample, {}), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    activeBackground: "bgPositiveWash",
+    activeColor: "bgPositive",
+    color: "fgMuted",
+    defaultActiveTab: basicSegments[0],
+    tabs: basicSegments,
+    title: "Label Colors"
+  })]
 });
 const CustomStylesExample = () => {
   const theme = useTheme();

package/esm/tabs/__stories__/Tabs.stories.js

@@ -97,7 +97,6 @@ const TabsWithPanelsExample = () => {
         children: "Pair tab buttons with content regions that follow the active tab (see panel below)."
       }), /*#__PURE__*/_jsx(Tabs, {
         TabComponent: DefaultTab,
-        TabsActiveIndicatorComponent: DefaultTabsActiveIndicator,
         accessibilityLabel: "Content sections",
         activeBackground: "bg",
         activeTab: activeTab,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.69.0",
+  "version": "8.70.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -196,7 +196,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.69.0",
+    "@coinbase/cds-common": "^8.70.0",
     "@coinbase/cds-icons": "^5.16.0",
     "@coinbase/cds-illustrations": "^4.38.0",
     "@coinbase/cds-lottie-files": "^3.3.4",