@coinbase/cds-mobile 8.29.0 → 8.30.0

package/CHANGELOG.md

@@ -8,6 +8,15 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.30.0 (12/12/2025 PST)
+
+#### 🚀 Updates
+
+- Add overflow gradient to the left side of TabbedChips alpha. [[#232](https://github.com/coinbase/cds/pull/232)] [DX-5070]
+- Add autoScrollOffset prop to TabbedChips alpha. [[#232](https://github.com/coinbase/cds/pull/232)] [DX-5070]
+- Add maxWidth prop to SelectChip alpha [[#232](https://github.com/coinbase/cds/pull/232)] [DX-5072]
+- Add displayValue prop to SelectChip alpha [[#232](https://github.com/coinbase/cds/pull/232)]
+
 ## 8.29.0 (12/12/2025 PST)
 
 #### 🚀 Updates

package/dts/alpha/select-chip/SelectChip.d.ts

@@ -2,18 +2,24 @@ import React from 'react';
 import type { ChipBaseProps } from '../../chips/ChipProps';
 import { type SelectRef } from '../select/Select';
 import type { SelectProps, SelectType } from '../select/types';
-export type SelectChipBaseProps = Pick<ChipBaseProps, 'invertColorScheme' | 'numberOfLines'>;
-/**
- * Chip-styled Select control built on top of the Alpha Select.
- * Supports both single and multi selection via Select's `type` prop.
- */
+export type SelectChipBaseProps = Pick<
+  ChipBaseProps,
+  'invertColorScheme' | 'numberOfLines' | 'maxWidth'
+> & {
+  /**
+   * Override the displayed value in the chip control.
+   * Useful for avoiding truncation, especially in multi-select scenarios where multiple option labels might be too long to display.
+   * When provided, this value takes precedence over the default label generation.
+   */
+  displayValue?: React.ReactNode;
+};
 export type SelectChipProps<
   Type extends SelectType = 'single',
   SelectOptionValue extends string = string,
 > = SelectChipBaseProps &
   Omit<
     SelectProps<Type, SelectOptionValue>,
-    'SelectControlComponent' | 'helperText' | 'labelVariant' | 'variant'
+    'SelectControlComponent' | 'helperText' | 'labelVariant' | 'variant' | 'maxWidth'
   >;
 export declare const SelectChip: <
   Type extends SelectType = 'single',

package/dts/alpha/select-chip/SelectChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAsB,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,mBAAmB,GAAG,eAAe,CAAC,CAAC;AAE7F;;;GAGG;AACH,MAAM,MAAM,eAAe,CACzB,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,IACvC,mBAAmB,GACrB,IAAI,CACF,WAAW,CAAC,IAAI,EAAE,iBAAiB,CAAC,EACpC,wBAAwB,GAAG,YAAY,GAAG,cAAc,GAAG,SAAS,CACrE,CAAC;AAkCJ,eAAO,MAAM,UAAU,EAA0B,CAC/C,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,eAAe,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;CAAE,KAC7E,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAsB,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,aAAa,EACb,mBAAmB,GAAG,eAAe,GAAG,UAAU,CACnD,GAAG;IACF;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,CACzB,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,IACvC,mBAAmB,GACrB,IAAI,CACF,WAAW,CAAC,IAAI,EAAE,iBAAiB,CAAC,EACpC,wBAAwB,GAAG,YAAY,GAAG,cAAc,GAAG,SAAS,GAAG,UAAU,CAClF,CAAC;AA8CJ,eAAO,MAAM,UAAU,EAA0B,CAC/C,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,eAAe,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;CAAE,KAC7E,KAAK,CAAC,YAAY,CAAC"}

package/dts/alpha/select-chip/SelectChipControl.d.ts

@@ -9,6 +9,7 @@ export declare const SelectChipControl: <
   props: SelectControlProps<Type, SelectOptionValue> &
     Partial<Pick<ChipBaseProps, 'invertColorScheme' | 'numberOfLines'>> & {
       ref?: React.Ref<View>;
+      displayValue?: React.ReactNode;
     },
 ) => React.ReactElement;
 //# sourceMappingURL=SelectChipControl.d.ts.map

package/dts/alpha/select-chip/SelectChipControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChipControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChipControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AAuJzB,eAAO,MAAM,iBAAiB,EAAiC,CAC7D,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAChD,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,mBAAmB,GAAG,eAAe,CAAC,CAAC,GAAG;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,KACA,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"SelectChipControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChipControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AA4JzB,eAAO,MAAM,iBAAiB,EAAiC,CAC7D,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAChD,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,mBAAmB,GAAG,eAAe,CAAC,CAAC,GAAG;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,KACA,KAAK,CAAC,YAAY,CAAC"}

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

@@ -25,6 +25,11 @@ export type TabbedChipsBaseProps<T extends string = string> = Omit<
    * @default false
    */
   compact?: boolean;
+  /**
+   * X position offset when auto-scrolling to active tab (to avoid active tab being covered by the overflow gradient on the left side, default: 30px)
+   * @default 30
+   */
+  autoScrollOffset?: number;
 };
 export type TabbedChipsProps<T extends string = string> = TabbedChipsBaseProps<T> &
   SharedProps &

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,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE7F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAElE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EAAO,KAAK,QAAQ,EAAoB,MAAM,cAAc,CAAC;AACpE,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AA0BtE,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,SAAS,CAAC,GAC9F,QAAQ,CAAC,CAAC,CAAC,GAAG;IACZ,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;CACjE,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAChE,aAAa,CAAC,CAAC,CAAC,EACd,cAAc,GACd,8BAA8B,GAC9B,MAAM,GACN,0BAA0B,GAC1B,kBAAkB,CACrB,GAAG;IACF,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,4BAA4B,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC;IAC5E;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAC/E,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;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,KAAK,aAAa,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC7C,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AA0ExB,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,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE7F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAElE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EAAO,KAAK,QAAQ,EAAoB,MAAM,cAAc,CAAC;AACpE,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AA0BtE,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,SAAS,CAAC,GAC9F,QAAQ,CAAC,CAAC,CAAC,GAAG;IACZ,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;CACjE,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAChE,aAAa,CAAC,CAAC,CAAC,EACd,cAAc,GACd,8BAA8B,GAC9B,MAAM,GACN,0BAA0B,GAC1B,kBAAkB,CACrB,GAAG;IACF,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,4BAA4B,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC;IAC5E;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAC/E,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;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,KAAK,aAAa,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC7C,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AA+ExB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}

package/dts/chips/Chip.d.ts

@@ -6,7 +6,7 @@ import type { View } from 'react-native';
 export declare const Chip: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
     import('@coinbase/cds-common').SharedProps &
-      Omit<import('../system').PressableProps, 'children' | 'maxWidth' | 'style'> &
+      Omit<import('../system').PressableProps, 'children' | 'maxWidth' | 'style' | 'onChange'> &
       Pick<import('@coinbase/cds-common').SharedAccessibilityProps, 'accessibilityLabel'> & {
         children?: React.ReactNode;
         start?: React.ReactNode;

package/dts/chips/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AASzC;;GAEG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;YAyDR,CAAC;eACS,CAAC;;+BA8BnB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AASzC;;GAEG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;YA0DT,CAAA;eAAqC,CAAC;;+BA8B7C,CAAC"}

package/dts/chips/ChipProps.d.ts

@@ -6,7 +6,7 @@ import {
 } from '@coinbase/cds-common/types';
 import type { PressableProps } from '../system';
 export type ChipBaseProps = SharedProps &
-  Omit<PressableProps, 'children' | 'maxWidth' | 'style'> &
+  Omit<PressableProps, 'children' | 'maxWidth' | 'style' | 'onChange' | 'maxWidth'> &
   Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
     /** ReactNode placed in the center of the Chip */
     children?: React.ReactNode;

package/dts/chips/ChipProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipProps.d.ts","sourceRoot":"","sources":["../../src/chips/ChipProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EACjB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,GACvD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iDAAiD;IACjD,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAChC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
+{"version":3,"file":"ChipProps.d.ts","sourceRoot":"","sources":["../../src/chips/ChipProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EACjB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,GACjF,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,iDAAiD;IACjD,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAChC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/dts/chips/InputChip.d.ts

@@ -3,7 +3,7 @@ import type { View } from 'react-native';
 export declare const InputChip: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<
     import('@coinbase/cds-common').SharedProps &
-      Omit<import('../system').PressableProps, 'children' | 'maxWidth' | 'style'> &
+      Omit<import('../system').PressableProps, 'children' | 'maxWidth' | 'style' | 'onChange'> &
       Pick<import('@coinbase/cds-common').SharedAccessibilityProps, 'accessibilityLabel'> & {
         children?: React.ReactNode;
         start?: React.ReactNode;

package/dts/chips/InputChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputChip.d.ts","sourceRoot":"","sources":["../../src/chips/InputChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAOzC,eAAO,MAAM,SAAS;;;;;;;;;;;;YAiC4vB,CAAC;eAAqC,CAAC;;;;+BADxzB,CAAC"}
+{"version":3,"file":"InputChip.d.ts","sourceRoot":"","sources":["../../src/chips/InputChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAOzC,eAAO,MAAM,SAAS;;;;;;;;;;;;YAiCsxB,CAAC;eAAqC,CAAC;;;;+BADl1B,CAAC"}

package/dts/chips/MediaChip.d.ts

@@ -4,7 +4,7 @@ export type MediaChipProps = ChipProps;
 export declare const MediaChip: import('react').MemoExoticComponent<
   import('react').ForwardRefExoticComponent<
     import('@coinbase/cds-common').SharedProps &
-      Omit<import('../system').PressableProps, 'children' | 'maxWidth' | 'style'> &
+      Omit<import('../system').PressableProps, 'children' | 'maxWidth' | 'style' | 'onChange'> &
       Pick<import('@coinbase/cds-common').SharedAccessibilityProps, 'accessibilityLabel'> & {
         children?: React.ReactNode;
         start?: React.ReactNode;

package/dts/chips/MediaChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaChip.d.ts","sourceRoot":"","sources":["../../src/chips/MediaChip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AAEvC,eAAO,MAAM,SAAS;;;;;;;;;;;;YAsDiL,CAAC;eAAqC,CAAC;;yCAD7O,CAAC"}
+{"version":3,"file":"MediaChip.d.ts","sourceRoot":"","sources":["../../src/chips/MediaChip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AAEvC,eAAO,MAAM,SAAS;;;;;;;;;;;;YAsD2M,CAAC;eAAqC,CAAC;;yCADvQ,CAAC"}

package/dts/hooks/useHorizontalScrollToTarget.d.ts

@@ -8,19 +8,29 @@ import type {
 export type UseHorizontalScrollToTargetOptions = {
   scrollThrottleWaitTime?: number;
   activeTarget?: View | null;
+  autoScrollOffset?: number;
+  overflowThreshold?: number;
 };
 /**
  * A hook for managing horizontal scrolling with overflow detection.
  * Useful for horizontally scrollable content that needs to show overflow indicators.
  * Optionally handles scrolling to an active target element.
+ *
+ * @param scrollThrottleWaitTime - Throttle time for scroll events (default: 200ms)
+ * @param activeTarget - The active element to scroll to when it's offscreen
+ * @param autoScrollOffset - X position offset when auto-scrolling to active target
+ * @param overflowThreshold - Threshold for detecting if content is offscreen (default: 1)
  */
 export declare const useHorizontalScrollToTarget: ({
   scrollThrottleWaitTime,
   activeTarget,
+  autoScrollOffset,
+  overflowThreshold,
 }?: UseHorizontalScrollToTargetOptions) => {
   scrollRef: import('react').RefObject<ScrollView>;
   isScrollContentOverflowing: boolean;
   isScrollContentOffscreenRight: boolean;
+  isScrollContentOffscreenLeft: boolean;
   handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   handleScrollContainerLayout: (event: LayoutChangeEvent) => void;
   handleScrollContentSizeChange: (contentWidth: number) => void;

package/dts/hooks/useHorizontalScrollToTarget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHorizontalScrollToTarget.d.ts","sourceRoot":"","sources":["../../src/hooks/useHorizontalScrollToTarget.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,UAAU,EACV,IAAI,EACL,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,kCAAkC,GAAG;IAC/C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CAC5B,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,GAAI,4CAGzC,kCAAuC;;;;0BAsB9B,oBAAoB,CAAC,iBAAiB,CAAC;yCAOvC,iBAAiB;kDAQV,MAAM;CAgCxB,CAAC"}
+{"version":3,"file":"useHorizontalScrollToTarget.d.ts","sourceRoot":"","sources":["../../src/hooks/useHorizontalScrollToTarget.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,UAAU,EACV,IAAI,EACL,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,kCAAkC,GAAG;IAC/C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAIF;;;;;;;;;GASG;AAEH,eAAO,MAAM,2BAA2B,GAAI,iFAKzC,kCAAuC;;;;;0BAwB9B,oBAAoB,CAAC,iBAAiB,CAAC;yCAOvC,iBAAiB;kDAQV,MAAM;CAiCxB,CAAC"}

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

@@ -1,27 +1,30 @@
-const _excluded = ["invertColorScheme", "numberOfLines"];
+const _excluded = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue"];
 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 } from 'react';
 import { Select } from '../select/Select';
 import { SelectChipControl } from './SelectChipControl';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Chip-styled Select control built on top of the Alpha Select.
  * Supports both single and multi selection via Select's `type` prop.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const SelectChipComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       invertColorScheme,
-      numberOfLines
+      numberOfLines,
+      maxWidth,
+      displayValue
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const SelectChipControlComponent = useCallback(props => {
     return /*#__PURE__*/_jsx(SelectChipControl, _extends({
+      displayValue: displayValue,
       invertColorScheme: invertColorScheme,
+      maxWidth: maxWidth,
       numberOfLines: numberOfLines
     }, props));
-  }, [invertColorScheme, numberOfLines]);
+  }, [displayValue, invertColorScheme, maxWidth, numberOfLines]);
   return /*#__PURE__*/_jsx(Select, _extends({
     ref: ref,
     SelectControlComponent: SelectChipControlComponent

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

@@ -21,7 +21,9 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     label,
     compact,
     invertColorScheme,
-    numberOfLines
+    numberOfLines,
+    maxWidth,
+    displayValue
   } = _ref;
   const isMultiSelect = type === 'multi';
   const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
@@ -64,6 +66,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
   const labelContent = useMemo(() => {
     var _ref3, _ref6, _ref7, _ref8, _opt$label2;
     if (!hasValue) return (_ref3 = label != null ? label : placeholder) != null ? _ref3 : null;
+    if (displayValue) return displayValue;
     if (isMultiSelect) {
       const values = value;
       const visible = values.slice(0, maxSelectedOptionsToShow);
@@ -77,7 +80,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     }
     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, isMultiSelect, optionsMap, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel]);
+  }, [hasValue, label, placeholder, displayValue, isMultiSelect, optionsMap, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel]);
   const endNode = useMemo(() => {
     return customEndNode != null ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
       active: true,
@@ -102,6 +105,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_r
     disabled: disabled,
     end: endNode,
     invertColorScheme: invertColorScheme,
+    maxWidth: maxWidth,
     numberOfLines: numberOfLines,
     onPress: () => setOpen(s => !s),
     start: startNode,

package/esm/alpha/select-chip/__stories__/{SelectChip.stories.js → AlphaSelectChip.stories.js}

@@ -491,6 +491,45 @@ export const WithDescriptions = () => {
     })]
   });
 };
+export const WithDisplayValue = () => {
+  const exampleOptions = [{
+    value: '1',
+    label: 'Option 1'
+  }, {
+    value: '2',
+    label: 'Option 2'
+  }, {
+    value: '3',
+    label: 'Option 3'
+  }, {
+    value: '4',
+    label: 'Option 4'
+  }, {
+    value: '5',
+    label: 'Option 5'
+  }];
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  const displayValue = Array.isArray(value) && value.length > 0 ? value.length + " " + (value.length === 1 ? 'option' : 'options') + " selected" : undefined;
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      children: "Select with custom displayed value:"
+    }), /*#__PURE__*/_jsx(SelectChip, {
+      accessibilityLabel: "Select multiple values",
+      displayValue: displayValue,
+      onChange: onChange,
+      options: exampleOptions,
+      placeholder: "Choose options",
+      type: "multi",
+      value: value
+    })]
+  });
+};
 const SelectChipScreen = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -532,6 +571,9 @@ const SelectChipScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "With Descriptions",
       children: /*#__PURE__*/_jsx(WithDescriptions, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Display Value",
+      children: /*#__PURE__*/_jsx(WithDisplayValue, {})
     })]
   });
 };

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

@@ -1,5 +1,5 @@
 const _excluded = ["label", "id"],
-  _excluded2 = ["tabs", "activeTab", "testID", "TabComponent", "onChange", "width", "gap", "compact", "styles"];
+  _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; }
 import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
@@ -45,19 +45,22 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
       width,
       gap = 1,
       compact,
-      styles
+      styles,
+      autoScrollOffset = 30
     } = _ref2,
     accessibilityProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const [scrollTarget, setScrollTarget] = useState(null);
   const {
     scrollRef,
     isScrollContentOverflowing,
+    isScrollContentOffscreenLeft,
     isScrollContentOffscreenRight,
     handleScroll,
     handleScrollContainerLayout,
     handleScrollContentSizeChange
   } = useHorizontalScrollToTarget({
-    activeTarget: scrollTarget
+    activeTarget: scrollTarget,
+    autoScrollOffset
   });
   const TabComponentWithCompact = useCallback(props => {
     return /*#__PURE__*/_jsx(TabComponent, _extends({
@@ -66,7 +69,7 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
   }, [TabComponent, compact]);
   return /*#__PURE__*/_jsxs(Box, {
     ref: ref,
-    overflow: isScrollContentOverflowing && isScrollContentOffscreenRight ? undefined : 'visible',
+    overflow: isScrollContentOverflowing ? undefined : 'visible',
     style: styles == null ? void 0 : styles.root,
     testID: testID,
     width: width,
@@ -88,7 +91,11 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
         style: styles == null ? void 0 : styles.tabs,
         tabs: tabs
       }, accessibilityProps))
-    }), isScrollContentOverflowing && isScrollContentOffscreenRight ? /*#__PURE__*/_jsx(OverflowGradient, {}) : null]
+    }), isScrollContentOverflowing && isScrollContentOffscreenLeft && /*#__PURE__*/_jsx(OverflowGradient, {
+      pin: "left"
+    }), isScrollContentOverflowing && isScrollContentOffscreenRight && /*#__PURE__*/_jsx(OverflowGradient, {
+      pin: "right"
+    })]
   });
 }));
 TabbedChipsComponent.displayName = 'TabbedChips';

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

@@ -21,11 +21,13 @@ const Demo = _ref => {
   let {
     tabs = defaultTabs,
     compact = false,
-    width
+    width,
+    autoScrollOffset
   } = _ref;
   const [value, setValue] = useState(tabs[0]);
   return /*#__PURE__*/_jsx(TabbedChips, {
     activeTab: value,
+    autoScrollOffset: autoScrollOffset,
     compact: compact,
     onChange: setValue,
     tabs: tabs,
@@ -94,6 +96,12 @@ const TabbedChipsScreen = () => {
         compact: true,
         tabs: compactTabsWithStart
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With auto scroll offset",
+      children: /*#__PURE__*/_jsx(Demo, {
+        autoScrollOffset: 100,
+        tabs: sampleTabs
+      })
     })]
   });
 };

package/esm/hooks/useHorizontalScrollToTarget.js

@@ -4,11 +4,19 @@ import throttle from 'lodash/throttle';
  * A hook for managing horizontal scrolling with overflow detection.
  * Useful for horizontally scrollable content that needs to show overflow indicators.
  * Optionally handles scrolling to an active target element.
+ *
+ * @param scrollThrottleWaitTime - Throttle time for scroll events (default: 200ms)
+ * @param activeTarget - The active element to scroll to when it's offscreen
+ * @param autoScrollOffset - X position offset when auto-scrolling to active target
+ * @param overflowThreshold - Threshold for detecting if content is offscreen (default: 1)
  */
+
 export const useHorizontalScrollToTarget = function (_temp) {
   let {
     scrollThrottleWaitTime = 200,
-    activeTarget
+    activeTarget,
+    autoScrollOffset = 0,
+    overflowThreshold = 1
   } = _temp === void 0 ? {} : _temp;
   const scrollRef = useRef(null);
   const scrollDetails = useRef({
@@ -18,6 +26,7 @@ export const useHorizontalScrollToTarget = function (_temp) {
   });
   const [isScrollContentOverflowing, setIsScrollContentOverflowing] = useState(false);
   const [isScrollContentOffscreenRight, setIsScrollContentOffscreenRight] = useState(false);
+  const [isScrollContentOffscreenLeft, setIsScrollContentOffscreenLeft] = useState(false);
   const checkScrollState = useCallback(() => {
     const {
       xPosition,
@@ -26,8 +35,9 @@ export const useHorizontalScrollToTarget = function (_temp) {
     } = scrollDetails.current;
     const maxScroll = contentWidth - containerWidth;
     setIsScrollContentOverflowing(contentWidth > containerWidth);
-    setIsScrollContentOffscreenRight(xPosition < maxScroll - 1); // -1 offset for fractional values
-  }, []);
+    setIsScrollContentOffscreenRight(xPosition < maxScroll - overflowThreshold); // -1 offset for fractional values
+    setIsScrollContentOffscreenLeft(xPosition > overflowThreshold); // 1 offset for fractional values
+  }, [overflowThreshold]);
   const throttledHandleScroll = useRef(throttle(xPosition => {
     scrollDetails.current.xPosition = xPosition;
     checkScrollState();
@@ -56,7 +66,7 @@ export const useHorizontalScrollToTarget = function (_temp) {
         if (isOffscreenLeft || isOffscreenRight) {
           var _scrollRef$current;
           (_scrollRef$current = scrollRef.current) == null || _scrollRef$current.scrollTo({
-            x,
+            x: x - autoScrollOffset,
             y: 0,
             animated: true
           });
@@ -64,11 +74,12 @@ export const useHorizontalScrollToTarget = function (_temp) {
       });
     }
     return () => throttledHandleScroll.cancel();
-  }, [activeTarget, throttledHandleScroll]);
+  }, [activeTarget, autoScrollOffset, throttledHandleScroll]);
   return {
     scrollRef,
     isScrollContentOverflowing,
     isScrollContentOffscreenRight,
+    isScrollContentOffscreenLeft,
     handleScroll,
     handleScrollContainerLayout,
     handleScrollContentSizeChange

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.29.0",
+  "version": "8.30.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -154,7 +154,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.29.0",
+    "@coinbase/cds-common": "^8.30.0",
     "@coinbase/cds-icons": "^5.8.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.3",