@coinbase/cds-mobile 9.4.2 → 9.4.3

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.4.3 (6/23/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: Add `activeBackground` and `activeColor` props to alpha `TabbedChips`. `activeBackground` sets a custom chip background color when active (replacing the default `invertColorScheme` behavior); `activeColor` sets a custom chip label text color when active. [[#766](https://github.com/coinbase/cds/pull/766)]
+
 ## 9.4.2 ((6/23/2026, 07:32 AM PST))
 
 This is an artificial version bump with no new change.

package/dts/alpha/tabbed-chips/TabbedChips.d.ts

@@ -5,6 +5,7 @@ import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
 import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import type { ChipProps } from '../../chips/ChipProps';
+import { type MediaChipBaseProps } from '../../chips/MediaChip';
 import { type BoxProps } from '../../layout/Box';
 import { type TabsBaseProps, type TabsProps } from '../../tabs/Tabs';
 export type TabbedChipProps<TabId extends string = string> = Omit<
@@ -13,6 +14,15 @@ export type TabbedChipProps<TabId extends string = string> = Omit<
 > &
   TabValue<TabId> & {
     Component?: React.FC<Omit<ChipProps, 'children'> & TabValue<TabId>>;
+    /**
+     * Custom background color applied to the chip when it is the active tab.
+     * When set, takes precedence over the default `invertColorScheme` behavior.
+     */
+    activeBackground?: MediaChipBaseProps['background'];
+    /**
+     * Custom foreground color applied to the chip label when it is the active tab.
+     */
+    activeColor?: MediaChipBaseProps['color'];
   };
 export type TabbedChipsBaseProps<TabId extends string = string> = Omit<
   TabsBaseProps<TabId>,
@@ -21,6 +31,7 @@ export type TabbedChipsBaseProps<TabId extends string = string> = Omit<
   | 'tabs'
   | 'onActiveTabElementChange'
   | 'activeBackground'
+  | 'activeColor'
 > & {
   tabs: TabbedChipProps<TabId>[];
   TabComponent?: React.FC<TabbedChipProps<TabId>>;

package/dts/alpha/tabbed-chips/TabbedChips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../../src/alpha/tabbed-chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIvD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA0B3E,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,SAAS,EACT,UAAU,GAAG,SAAS,CACvB,GACC,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;CACrE,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACpE,aAAa,CAAC,KAAK,CAAC,EAClB,cAAc,GACd,8BAA8B,GAC9B,MAAM,GACN,0BAA0B,GAC1B,kBAAkB,CACrB,GAAG;IACF,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,4BAA4B,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,8BAA8B,CAAC,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,KAAK,CAAC,GACvF,WAAW,GACX,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,KAAK,aAAa,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACjD,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC;AAiFxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}
+{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../../src/alpha/tabbed-chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG3E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA+B3E,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,SAAS,EACT,UAAU,GAAG,SAAS,CACvB,GACC,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IACpE;;;OAGG;IACH,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACpD;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;CAC3C,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACpE,aAAa,CAAC,KAAK,CAAC,EAClB,cAAc,GACd,8BAA8B,GAC9B,MAAM,GACN,0BAA0B,GAC1B,kBAAkB,GAClB,aAAa,CAChB,GAAG;IACF,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,4BAA4B,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,8BAA8B,CAAC,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,KAAK,CAAC,GACvF,WAAW,GACX,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,KAAK,aAAa,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACjD,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC;AAiFxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}

package/esm/alpha/tabbed-chips/TabbedChips.js

@@ -1,4 +1,4 @@
-const _excluded = ["label", "id"],
+const _excluded = ["label", "id", "activeBackground", "activeColor", "color"],
   _excluded2 = ["tabs", "activeTab", "testID", "TabComponent", "onChange", "width", "gap", "compact", "styles", "autoScrollOffset"];
 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; }
@@ -15,7 +15,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DefaultTabComponent = _ref => {
   let {
       label = '',
-      id
+      id,
+      activeBackground,
+      activeColor,
+      color
     } = _ref,
     tabProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -28,7 +31,9 @@ const DefaultTabComponent = _ref => {
     accessibilityState: {
       selected: isActive
     },
-    invertColorScheme: isActive,
+    background: isActive && activeBackground ? activeBackground : undefined,
+    color: isActive && activeColor ? activeColor : color,
+    invertColorScheme: isActive && !activeBackground,
     onPress: handlePress
   }, tabProps, {
     children: label

package/esm/alpha/tabbed-chips/__stories__/AlphaTabbedChips.stories.js

@@ -60,6 +60,12 @@ const tabsWithStart = defaultTabs.map(tab => _extends({}, tab, {
 const compactTabsWithStart = defaultTabs.map(tab => _extends({}, tab, {
   start: /*#__PURE__*/_jsx(RemoteImage, _extends({}, compactAssetIconProps))
 }));
+const activeBackgroundTabs = defaultTabs.map(tab => _extends({}, tab, {
+  activeBackground: 'bgPositive'
+}));
+const activeColorTabs = defaultTabs.map(tab => _extends({}, tab, {
+  activeColor: 'fgPositive'
+}));
 const TabbedChipsScreen = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -102,6 +108,16 @@ const TabbedChipsScreen = () => {
         autoScrollOffset: 100,
         tabs: sampleTabs
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With activeBackground",
+      children: /*#__PURE__*/_jsx(Demo, {
+        tabs: activeBackgroundTabs
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With activeColor",
+      children: /*#__PURE__*/_jsx(Demo, {
+        tabs: activeColorTabs
+      })
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.4.2",
+  "version": "9.4.3",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -206,7 +206,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.4.2",
+    "@coinbase/cds-common": "^9.4.3",
     "@coinbase/cds-icons": "^5.19.0",
     "@coinbase/cds-illustrations": "^4.43.0",
     "@coinbase/cds-lottie-files": "^3.3.4",