@coinbase/cds-mobile 9.14.0 → 9.16.0

package/dts/tabs/SegmentedTabs.d.ts

@@ -4,7 +4,15 @@ import { type TabsBaseProps, type TabsProps } from './Tabs';
 export type SegmentedTabsBaseProps<TabId extends string = string> = Partial<
   Pick<TabsBaseProps<TabId>, 'TabComponent' | 'TabsActiveIndicatorComponent'>
 > &
-  Omit<TabsBaseProps<TabId>, 'TabComponent' | 'TabsActiveIndicatorComponent' | 'styles'>;
+  Omit<TabsBaseProps<TabId>, 'TabComponent' | 'TabsActiveIndicatorComponent' | 'styles'> & {
+    /**
+     * When true, each tab stretches to an equal share of the component width and the component
+     * fills its parent. This is the correct way to achieve distributed tab layout — do NOT use
+     * `justifyContent` for this, as it breaks the active indicator position calculation.
+     * @default false
+     */
+    equalWidth?: boolean;
+  };
 export type SegmentedTabsProps<TabId extends string = string> = SegmentedTabsBaseProps<TabId> &
   Partial<Pick<TabsProps<TabId>, 'TabComponent' | 'TabsActiveIndicatorComponent'>> &
   Omit<TabsProps<TabId>, 'TabComponent' | 'TabsActiveIndicatorComponent' | 'styles'> & {
@@ -12,7 +20,7 @@ export type SegmentedTabsProps<TabId extends string = string> = SegmentedTabsBas
     styles?: {
       /** Root container element */
       root?: StyleProp<ViewStyle>;
-      /** Container element wrapping each tab */
+      /** Wrapper View around each tab — use `{ flex: 1 }` for equal-width distribution */
       tabContainer?: StyleProp<ViewStyle>;
       /** Tab element */
       tab?: StyleProp<ViewStyle>;

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedTabs.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM/D,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAKlE,MAAM,MAAM,sBAAsB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACzE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAC5E,GACC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,GAAG,QAAQ,CAAC,CAAC;AAEzF,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,sBAAsB,CAAC,KAAK,CAAC,GAC3F,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAAC,GAChF,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,GAAG,QAAQ,CAAC,GAAG;IACnF,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,0CAA0C;QAC1C,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,+BAA+B;QAC/B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;CACH,CAAC;AAEJ,KAAK,eAAe,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACnD,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAClE,KAAK,CAAC,YAAY,CAAC;AAkCxB,eAAO,MAAM,aAAa,EAA6B,eAAe,CAAC"}
+{"version":3,"file":"SegmentedTabs.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM/D,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAQlE,MAAM,MAAM,sBAAsB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACzE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAC5E,GACC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,GAAG,QAAQ,CAAC,GAAG;IACvF;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEJ,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,sBAAsB,CAAC,KAAK,CAAC,GAC3F,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAAC,GAChF,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,8BAA8B,GAAG,QAAQ,CAAC,GAAG;IACnF,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oFAAoF;QACpF,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,+BAA+B;QAC/B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;CACH,CAAC;AAEJ,KAAK,eAAe,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACnD,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAClE,KAAK,CAAC,YAAY,CAAC;AAiDxB,eAAO,MAAM,aAAa,EAA6B,eAAe,CAAC"}

package/esm/accordion/Accordion.js

@@ -14,7 +14,9 @@ export const Accordion = /*#__PURE__*/memo(_props => {
     onChange,
     setActiveKey,
     testID,
-    style
+    style,
+    borderRadius,
+    showItemSeparators = true
   } = mergedProps;
   return /*#__PURE__*/_jsx(AccordionProvider, {
     activeKey: activeKey,
@@ -22,10 +24,12 @@ export const Accordion = /*#__PURE__*/memo(_props => {
     onChange: onChange,
     setActiveKey: setActiveKey,
     children: /*#__PURE__*/_jsx(VStack, {
+      borderRadius: borderRadius,
+      overflow: borderRadius !== undefined ? 'hidden' : undefined,
       style: style,
       testID: testID,
       width: "100%",
-      children: join(Children.toArray(children), /*#__PURE__*/_jsx(Divider, {}))
+      children: showItemSeparators ? join(Children.toArray(children), /*#__PURE__*/_jsx(Divider, {})) : children
     })
   });
 });

package/esm/accordion/AccordionHeader.js

@@ -1,5 +1,5 @@
 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 React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { useAccordionContext } from '@coinbase/cds-common/accordion/AccordionProvider';
 import { accordionIconHiddenRotate, accordionIconVisibleRotate } from '@coinbase/cds-common/animation/accordion';
 import { listHeight } from '@coinbase/cds-common/tokens/cell';
@@ -11,20 +11,28 @@ import { AnimatedCaret } from '../motion/AnimatedCaret';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const AccordionMedia = /*#__PURE__*/memo(_ref => {
+const compactPaddingProps = paddingProps => {
+  const entries = Object.entries(paddingProps).filter(_ref => {
+    let [, value] = _ref;
+    return value !== undefined;
+  });
+  if (entries.length === 0) return undefined;
+  return Object.fromEntries(entries);
+};
+export const AccordionMedia = /*#__PURE__*/memo(_ref2 => {
   let {
     media
-  } = _ref;
+  } = _ref2;
   return /*#__PURE__*/_jsx(Box, {
     children: media
   });
 });
-export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
+export const AccordionTitle = /*#__PURE__*/memo(_ref3 => {
   let {
     title,
     subtitle,
     tertiaryTitle
-  } = _ref2;
+  } = _ref3;
   return /*#__PURE__*/_jsx(Box, {
     flexGrow: 1,
     flexShrink: 1,
@@ -45,14 +53,16 @@ export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
     })
   });
 });
-export const AccordionIcon = /*#__PURE__*/memo(_ref3 => {
+export const AccordionIcon = /*#__PURE__*/memo(_ref4 => {
   let {
-    collapsed
-  } = _ref3;
+    collapsed,
+    caretSize = 's'
+  } = _ref4;
   return /*#__PURE__*/_jsx(Box, {
     justifyContent: "flex-end",
     children: /*#__PURE__*/_jsx(AnimatedCaret, {
-      rotate: collapsed ? accordionIconHiddenRotate : accordionIconVisibleRotate
+      rotate: collapsed ? accordionIconHiddenRotate : accordionIconVisibleRotate,
+      size: caretSize
     })
   });
 });
@@ -60,7 +70,7 @@ export const AccordionIcon = /*#__PURE__*/memo(_ref3 => {
  * Renders a Pressable element to use as the header to an AccordionItem.
  * Composes an Accordion Media, Title, and Icon.
  */
-export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
+export const AccordionHeader = /*#__PURE__*/memo(_ref5 => {
   let {
     ref: forwardedRef,
     itemKey,
@@ -70,13 +80,35 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
     onPress,
     media,
     collapsed,
-    testID
-  } = _ref4;
+    testID,
+    style,
+    background = 'bg',
+    caretSize,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd
+  } = _ref5;
   const {
     setActiveKey,
     activeKey
   } = useAccordionContext();
-  const spacing = useCellSpacing();
+  const outerSpacing = useMemo(() => compactPaddingProps({
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd
+  }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingStart, paddingEnd]);
+  // Header padding follows the same outer spacing rules as Cell.
+  const spacing = useCellSpacing({
+    outerSpacing
+  });
   const accessibilityLabel = [title, subtitle, tertiaryTitle].filter(Boolean).join(', ');
   const handlePress = useCallback(() => {
     onPress == null || onPress(itemKey);
@@ -85,15 +117,16 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
   return /*#__PURE__*/_jsx(Pressable, {
     ref: forwardedRef,
     noScaleOnPress: true,
-    transparentWhileInactive: true,
     accessibilityLabel: accessibilityLabel,
     accessibilityRole: "togglebutton",
     accessibilityState: {
       expanded: !collapsed
     },
-    background: "bg",
+    background: background,
     onPress: handlePress,
+    style: style,
     testID: testID,
+    transparentWhileInactive: true,
     children: /*#__PURE__*/_jsxs(HStack, _extends({
       alignItems: "center",
       gap: 2,
@@ -107,6 +140,7 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
         tertiaryTitle: tertiaryTitle,
         title: title
       }), /*#__PURE__*/_jsx(AccordionIcon, {
+        caretSize: caretSize,
         collapsed: collapsed
       })]
     }))

package/esm/accordion/AccordionItem.js

@@ -1,6 +1,8 @@
 import React, { memo } from 'react';
 import { useAccordionContext } from '@coinbase/cds-common/accordion/AccordionProvider';
 import { accordionMinWidth } from '@coinbase/cds-common/tokens/accordion';
+import { useComponentConfig } from '../hooks/useComponentConfig';
+import { Divider } from '../layout/Divider';
 import { VStack } from '../layout/VStack';
 import { AccordionHeader } from './AccordionHeader';
 import { AccordionPanel } from './AccordionPanel';
@@ -10,8 +12,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * It composes together an AccordionHeader and a collapsible AccordionPanel.
  * Accepts a unique `itemKey` prop to uniquely identify one item from another within the same Accordion.
  */
-export const AccordionItem = /*#__PURE__*/memo(_ref => {
-  let {
+export const AccordionItem = /*#__PURE__*/memo(_props => {
+  const mergedProps = useComponentConfig('AccordionItem', _props);
+  const {
     itemKey,
     title,
     subtitle,
@@ -22,30 +25,61 @@ export const AccordionItem = /*#__PURE__*/memo(_ref => {
     testID,
     headerRef,
     panelRef,
-    style
-  } = _ref;
+    style,
+    styles,
+    showHeaderBorder = false,
+    background,
+    caretSize,
+    borderRadius,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd
+  } = mergedProps;
   const {
     activeKey
   } = useAccordionContext();
   const collapsed = activeKey !== itemKey;
   return /*#__PURE__*/_jsxs(VStack, {
+    borderRadius: borderRadius,
     minWidth: accordionMinWidth,
-    style: style,
+    overflow: borderRadius !== undefined ? 'hidden' : undefined,
+    style: [style, styles == null ? void 0 : styles.root],
     testID: testID,
+    width: "100%",
     children: [/*#__PURE__*/_jsx(AccordionHeader, {
       ref: headerRef,
+      background: background,
+      caretSize: caretSize,
       collapsed: collapsed,
       itemKey: itemKey,
       media: media,
       onPress: onPress,
+      padding: padding,
+      paddingBottom: paddingBottom,
+      paddingEnd: paddingEnd,
+      paddingStart: paddingStart,
+      paddingTop: paddingTop,
+      paddingX: paddingX,
+      paddingY: paddingY,
+      style: styles == null ? void 0 : styles.header,
       subtitle: subtitle,
       tertiaryTitle: tertiaryTitle,
       testID: testID && testID + "-header",
       title: title
-    }), /*#__PURE__*/_jsx(AccordionPanel, {
+    }), showHeaderBorder ? /*#__PURE__*/_jsx(Divider, {
+      paddingEnd: paddingEnd,
+      paddingStart: paddingStart,
+      paddingX: paddingX,
+      testID: testID && testID + "-divider"
+    }) : null, /*#__PURE__*/_jsx(AccordionPanel, {
       ref: panelRef,
       collapsed: collapsed,
       itemKey: itemKey,
+      style: styles == null ? void 0 : styles.panel,
       testID: testID && testID + "-panel",
       children: children
     })]

package/esm/accordion/AccordionPanel.js

@@ -13,12 +13,14 @@ export const AccordionPanel = /*#__PURE__*/memo(_ref => {
     ref: forwardedRef,
     children,
     collapsed = true,
-    testID
+    testID,
+    style
   } = _ref;
   return /*#__PURE__*/_jsx(Collapsible, _extends({
     ref: forwardedRef,
     collapsed: collapsed,
     maxHeight: accordionVisibleMaxHeight,
+    style: style,
     testID: testID
   }, accordionSpacing, {
     children: children

package/esm/alpha/select-chip/SelectChip.js

@@ -1,12 +1,30 @@
 const _excluded = ["ref"],
-  _excluded2 = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue", "size", "compact"];
-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); }
+  _excluded2 = ["active", "invertColorScheme", "inverted", "value"],
+  _excluded3 = ["active", "activeBackground", "activeColor", "background", "color", "numberOfLines", "maxWidth", "displayValue", "size", "compact", "borderWidth", "borderColor", "bordered", "borderRadius", "invertColorScheme", "inverted"];
 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, { memo, useCallback } from 'react';
+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 React, { memo, useMemo } from 'react';
+import { getSelectChipActive } from '@coinbase/cds-common/chips/getSelectChipActive';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Select } from '../select/Select';
 import { SelectChipControl } from './SelectChipControl';
+
+// TODO(CDS-2544): SelectChipBaseProps should also compose SelectBaseProps.
+// https://linear.app/coinbase/issue/CDS-2544/selectchipbaseprops-should-compose-selectbaseprops
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Creates a wrapper component that injects chip-specific props into SelectChipControl.
+ * Select only forwards generic control props to `SelectControlComponent`; chip styling
+ * and `active` are owned by SelectChip and must be closed over here.
+ */
+function createSelectChipControlWrapper(chipProps) {
+  return /*#__PURE__*/memo(controlProps => {
+    // Chip props are spread last so they win at runtime; the cast bridges overlapping keys
+    // (`size`, borders) where SelectControlProps and SelectChipBaseProps use different types.
+    return /*#__PURE__*/_jsx(SelectChipControl, _extends({}, _extends({}, controlProps, chipProps)));
+  });
+}
+
 /**
  * Chip-styled Select control built on top of the Alpha Select.
  * Supports both single and multi selection via Select's `type` prop.
@@ -16,33 +34,67 @@ const SelectChipComponent = /*#__PURE__*/memo(_ref => {
       ref
     } = _ref,
     _props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const mergedProps = useComponentConfig('SelectChip', _props);
+  // Resolve `active` from instance props before config merge so state-aware resolvers
+  // (active vs inactive border styling) see the final selection state. `value` and
+  // legacy invert props are pulled out with `active` and passed back explicitly because
+  // they feed that resolution and must remain available to the config resolver input.
   const {
+      active: activeProp,
       invertColorScheme,
+      inverted,
+      value
+    } = _props,
+    restProps = _objectWithoutPropertiesLoose(_props, _excluded2);
+  const resolvedActive = getSelectChipActive(activeProp, value, invertColorScheme, inverted);
+  const mergedProps = useComponentConfig('SelectChip', _extends({}, restProps, {
+    value,
+    active: resolvedActive,
+    invertColorScheme,
+    inverted
+  }));
+  // SelectChip composes Select + MediaChip; peel chip props off merged props so the rest
+  // can flow to `<Select>` without chip-only fields leaking into the select interface.
+  const {
+      active,
+      activeBackground,
+      activeColor,
+      background,
+      color,
       numberOfLines,
       maxWidth,
       displayValue,
       size,
-      compact
+      compact,
+      borderWidth,
+      borderColor,
+      bordered,
+      borderRadius,
+      invertColorScheme: mergedInvertColorScheme,
+      inverted: mergedInverted
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
-  // Select doesn't pass the chip-specific props (size/compact/displayValue/etc.) down to the
-  // control, so they're injected here. They're listed AFTER the `controlProps` spread so the
-  // chip-level values win — matching the web SelectChip wrapper.
-  const SelectChipControlComponent = useCallback(controlProps => {
-    return /*#__PURE__*/_jsx(SelectChipControl, _extends({}, controlProps, {
-      compact: compact,
-      displayValue: displayValue,
-      invertColorScheme: invertColorScheme,
-      maxWidth: maxWidth,
-      numberOfLines: numberOfLines,
-      size: size
-    }));
-  }, [displayValue, invertColorScheme, maxWidth, numberOfLines, size, compact]);
+    selectProps = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
+  const WrappedSelectChipControl = useMemo(() => createSelectChipControlWrapper({
+    active,
+    activeBackground,
+    activeColor,
+    background,
+    color,
+    numberOfLines,
+    maxWidth,
+    displayValue,
+    size,
+    compact,
+    borderWidth,
+    borderColor,
+    bordered,
+    borderRadius,
+    invertColorScheme: mergedInvertColorScheme,
+    inverted: mergedInverted
+  }), [active, activeBackground, activeColor, background, color, displayValue, numberOfLines, maxWidth, size, compact, borderWidth, borderColor, bordered, borderRadius, mergedInvertColorScheme, mergedInverted]);
   return /*#__PURE__*/_jsx(Select, _extends({
     ref: ref,
-    SelectControlComponent: SelectChipControlComponent
-  }, props));
+    SelectControlComponent: WrappedSelectChipControl
+  }, selectProps));
 });
 SelectChipComponent.displayName = 'SelectChip';
 export const SelectChip = SelectChipComponent;

package/esm/alpha/select-chip/SelectChipControl.js

@@ -1,7 +1,19 @@
 import React, { memo, useMemo } from 'react';
+import { getSelectChipHasValue } from '@coinbase/cds-common/chips/getSelectChipActive';
 import { MediaChip } from '../../chips/MediaChip';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
 import { isSelectOptionGroup } from '../select/types';
+
+/**
+ * Chip props accepted by {@link SelectChipControl} and forwarded to {@link MediaChip}.
+ * Includes selection state, layout, borders, and `displayValue` for the control label.
+ */
+
+/**
+ * SelectControlProps fields superseded by {@link SelectChipControlChipProps}.
+ * Omit is required: intersection would merge overlapping keys (e.g. `size` as SelectSize &
+ * ChipSize, `background` as Box vs chip tokens) instead of replacing select-scale definitions.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
   let {
@@ -22,13 +34,23 @@ const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
     label,
     compact,
     size,
+    active,
+    activeBackground,
+    activeColor,
+    background,
+    color,
     invertColorScheme,
+    inverted,
     numberOfLines,
     maxWidth,
-    displayValue
+    displayValue,
+    borderWidth,
+    borderColor,
+    bordered,
+    borderRadius
   } = _ref;
   const isMultiSelect = type === 'multi';
-  const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
+  const hasValue = getSelectChipHasValue(value);
 
   // Map of options to their values
   // If multiple options share the same value, the first occurrence wins (matches native HTML select behavior)
@@ -83,30 +105,34 @@ const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
     const opt = optionsMap.get(value);
     return (_ref6 = (_ref7 = (_ref8 = (_opt$label2 = opt == null ? void 0 : opt.label) != null ? _opt$label2 : opt == null ? void 0 : opt.description) != null ? _ref8 : opt == null ? void 0 : opt.value) != null ? _ref7 : placeholder) != null ? _ref6 : null;
   }, [hasValue, label, placeholder, displayValue, isMultiSelect, optionsMap, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel]);
+  const resolvedColor = active && activeColor !== undefined ? activeColor : color;
   const endNode = useMemo(() => {
+    // Match Chip's label color. `fg` still inverts with the chip when active uses theme inversion.
     return customEndNode != null ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
       active: true,
-      color: hasValue ? 'fgInverse' : 'fg',
+      color: resolvedColor != null ? resolvedColor : 'fg',
       rotate: open ? 0 : 180,
       size: "xs"
     });
-  }, [customEndNode, open, hasValue]);
-  const color = useMemo(() => {
-    return hasValue ? 'fgInverse' : 'fg';
-  }, [hasValue]);
-  const background = useMemo(() => {
-    return hasValue ? 'bgInverse' : 'bgSecondary';
-  }, [hasValue]);
+  }, [customEndNode, open, resolvedColor]);
   return /*#__PURE__*/_jsx(MediaChip, {
     ref: ref,
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
+    active: active,
+    activeBackground: activeBackground,
+    activeColor: activeColor,
     background: background,
+    bordered: bordered,
+    borderColor: borderColor,
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
     color: color,
     compact: compact,
     disabled: disabled,
     end: endNode,
     invertColorScheme: invertColorScheme,
+    inverted: inverted,
     maxWidth: maxWidth,
     numberOfLines: numberOfLines,
     onPress: () => setOpen(s => !s),
@@ -115,4 +141,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
     children: labelContent
   });
 });
+SelectChipControlComponent.displayName = 'SelectChipControl';
+
+/** Generic memo components need an explicit cast for the public polymorphic signature. */
 export const SelectChipControl = SelectChipControlComponent;

package/esm/alpha/select-chip/__stories__/AlphaSelectChip.stories.js

@@ -217,7 +217,7 @@ export const MultiSelectWithAssets = () => {
     value: value
   });
 };
-export const InvertColorScheme = () => {
+export const Active = () => {
   const exampleOptions = [{
     value: '1',
     label: 'Option 1'
@@ -231,7 +231,7 @@ export const InvertColorScheme = () => {
     borderRadius: 200,
     padding: 2,
     children: /*#__PURE__*/_jsx(SelectChip, {
-      invertColorScheme: true,
+      active: true,
       onChange: setValue,
       options: exampleOptions,
       placeholder: "Choose an option",
@@ -587,8 +587,8 @@ const SelectChipScreen = () => {
       title: "Multi-Select with Assets",
       children: /*#__PURE__*/_jsx(MultiSelectWithAssets, {})
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Invert Color Scheme",
-      children: /*#__PURE__*/_jsx(InvertColorScheme, {})
+      title: "Active",
+      children: /*#__PURE__*/_jsx(Active, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Empty Options",
       children: /*#__PURE__*/_jsx(EmptyOptions, {})

package/esm/alpha/select-chip/index.js

@@ -1,2 +1,2 @@
 export * from './SelectChip';
-export * from './SelectChipControl';
+export { SelectChipControl } from './SelectChipControl';

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

@@ -1,4 +1,4 @@
-const _excluded = ["label", "id", "activeBackground", "activeColor", "color"],
+const _excluded = ["label", "id", "Component", "activeBackground", "activeColor", "color"],
   _excluded2 = ["ref"],
   _excluded3 = ["tabs", "activeTab", "testID", "TabComponent", "onChange", "width", "gap", "compact", "size", "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); }
@@ -32,9 +32,9 @@ const DefaultTabComponent = _ref => {
     accessibilityState: {
       selected: isActive
     },
+    active: isActive && !activeBackground,
     background: isActive && activeBackground ? activeBackground : undefined,
     color: isActive && activeColor ? activeColor : color,
-    invertColorScheme: isActive && !activeBackground,
     onPress: handlePress
   }, tabProps, {
     children: label

package/esm/chips/Chip.js

@@ -1,8 +1,8 @@
 const _excluded = ["ref"],
-  _excluded2 = ["alignSelf", "children", "start", "end", "invertColorScheme", "inverted", "maxWidth", "compact", "size", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "color", "font"];
+  _excluded2 = ["alignSelf", "children", "start", "end", "active", "activeBackground", "activeColor", "invertColorScheme", "inverted", "maxWidth", "compact", "size", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "color", "font"];
 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, { Fragment, memo } from 'react';
+import React, { Fragment, memo, useMemo } from 'react';
 import { chipMaxWidth } from '@coinbase/cds-common/tokens/chip';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
@@ -44,6 +44,9 @@ export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
       children,
       start,
       end,
+      active = false,
+      activeBackground,
+      activeColor,
       invertColorScheme,
       inverted,
       maxWidth = chipMaxWidth,
@@ -69,14 +72,20 @@ export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
       font = sizeConfig.font
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
-  const WrapperComponent = (invertColorScheme != null ? invertColorScheme : inverted) ? InvertedThemeProvider : Fragment;
+  const hasActiveColorOverrides = activeBackground !== undefined || activeColor !== undefined;
+  const activeUsesThemeInversion = active && !hasActiveColorOverrides;
+  const shouldInvert = Boolean(invertColorScheme != null ? invertColorScheme : inverted) || activeUsesThemeInversion;
+  const WrapperComponent = shouldInvert ? InvertedThemeProvider : Fragment;
+  const resolvedBackground = active && activeBackground !== undefined ? activeBackground : background;
+  const resolvedColor = active && activeColor !== undefined ? activeColor : color;
+  const containerStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
   const containerProps = {
     testID,
-    background,
+    background: resolvedBackground,
     borderRadius,
     ref,
     alignSelf,
-    style: [style, styles == null ? void 0 : styles.root]
+    style: containerStyle
   };
   const content = /*#__PURE__*/_jsxs(HStack, {
     alignItems: alignItems,
@@ -93,13 +102,13 @@ export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
     style: [contentStyle, styles == null ? void 0 : styles.content],
     testID: testID ? testID + "-content" : undefined,
     children: [start, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-      color: color,
+      color: resolvedColor,
       flexShrink: 1,
       font: font,
       numberOfLines: numberOfLines,
       children: children
     }) : children ? /*#__PURE__*/_jsx(Box, {
-      color: color,
+      color: resolvedColor,
       flexShrink: 1,
       children: children
     }) : null, end]