@coinbase/cds-web 8.20.2 → 8.21.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.21.0 (11/12/2025 PST)
+
+#### 🚀 Updates
+
+- Deprecate TabbedChips and create new TabbedChips(Alpha), whose props mirror Tabs' props. [[#138](https://github.com/coinbase/cds/pull/138)]
+
 ## 8.20.2 (11/12/2025 PST)
 
 #### 🐞 Fixes

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { SharedAccessibilityProps, SharedProps, ThemeVars } from '@coinbase/cds-common';
+import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
+import type { ChipProps } from '../../chips/ChipProps';
+import { type HStackDefaultElement, type HStackProps } from '../../layout';
+import { type TabsBaseProps, type TabsProps } from '../../tabs';
+export type TabbedChipProps<T extends string = string> = Omit<ChipProps, 'children' | 'onClick'> &
+  TabValue<T> & {
+    Component?: React.FC<Omit<ChipProps, 'children'> & TabValue<T>>;
+  };
+export type TabbedChipsBaseProps<T extends string = string> = Omit<
+  TabsBaseProps<T>,
+  | 'TabComponent'
+  | 'TabsActiveIndicatorComponent'
+  | 'tabs'
+  | 'onActiveTabElementChange'
+  | 'activeBackground'
+> & {
+  TabComponent?: React.FC<TabbedChipProps<T>>;
+  TabsActiveIndicatorComponent?: TabsProps<T>['TabsActiveIndicatorComponent'];
+  tabs: TabbedChipProps<T>[];
+  /**
+   * Turn on to use a compact Chip component for each tab.
+   * @default false
+   */
+  compact?: boolean;
+};
+export type TabbedChipsProps<T extends string = string> = TabbedChipsBaseProps<T> &
+  SharedProps &
+  SharedAccessibilityProps & {
+    background?: ThemeVars.Color;
+    previousArrowAccessibilityLabel?: string;
+    nextArrowAccessibilityLabel?: string;
+    /**
+     * The spacing between Tabs
+     * @default 1
+     */
+    gap?: HStackProps<HStackDefaultElement>['gap'];
+    /**
+     * The width of the scroll container, defaults to 100% of the parent container
+     * If the tabs are wider than the width of the container, paddles will be shown to scroll the tabs.
+     * @default 100%
+     */
+    width?: HStackProps<HStackDefaultElement>['width'];
+    styles?: {
+      /**
+       * Style applied to the root container.
+       */
+      root?: React.CSSProperties;
+      /**
+       * Style applied to the scroll container.
+       */
+      scrollContainer?: React.CSSProperties;
+      /**
+       * Style applied to the paddle icon buttons.
+       */
+      paddle?: React.CSSProperties;
+      /**
+       * Style applied to the root of the Tabs component.
+       */
+      tabs?: React.CSSProperties;
+    };
+    classNames?: {
+      /**
+       * Class name applied to the root container.
+       */
+      root?: string;
+      /**
+       * Class name applied to the scroll container.
+       */
+      scrollContainer?: string;
+      /**
+       * Class name applied to the root of the Tabs component.
+       */
+      tabs?: string;
+    };
+  };
+type TabbedChipsFC = <T extends string = string>(
+  props: TabbedChipsProps<T> & {
+    ref?: React.ForwardedRef<HTMLElement>;
+  },
+) => React.ReactElement;
+export declare const TabbedChips: TabbedChipsFC;
+export {};
+//# sourceMappingURL=TabbedChips.d.ts.map

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

@@ -0,0 +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,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE7F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGlE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIvD,OAAO,EAAU,KAAK,oBAAoB,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,YAAY,CAAC;AAyCpB,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,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,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B;;;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,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B,+BAA+B,CAAC,EAAE,MAAM,CAAC;IACzC,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC,KAAK,CAAC,CAAC;IAC/C;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,CAAC;IACnD,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACtC;;WAEG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC5B,CAAC;IACF,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,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,WAAW,CAAC,CAAA;CAAE,KACnE,KAAK,CAAC,YAAY,CAAC;AAuGxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}

package/dts/chips/TabbedChips.d.ts

@@ -9,6 +9,9 @@ type TabbedChipsFC = <T extends string = string>(
     ref?: React.ForwardedRef<HTMLElement>;
   },
 ) => React.ReactElement;
+/**
+ * @deprecated Use `TabbedChips(Alpha)` instead.
+ */
 export declare const TabbedChips: TabbedChipsFC;
 export {};
 //# sourceMappingURL=TabbedChips.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../src/chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAMhF,OAAO,EAAE,KAAK,YAAY,EAAU,MAAM,WAAW,CAAC;AACtD,OAAO,EAAU,KAAK,sBAAsB,EAAQ,MAAM,SAAS,CAAC;AAiCpE,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,GACxE,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAE7C,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAElF,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,WAAW,CAAC,CAAA;CAAE,KACnE,KAAK,CAAC,YAAY,CAAC;AAkGxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}
+{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../src/chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAMhF,OAAO,EAAE,KAAK,YAAY,EAAU,MAAM,WAAW,CAAC;AACtD,OAAO,EAAU,KAAK,sBAAsB,EAAQ,MAAM,SAAS,CAAC;AAiCpE,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,YAAY,GACxE,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAE7C,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAElF,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,WAAW,CAAC,CAAA;CAAE,KACnE,KAAK,CAAC,YAAY,CAAC;AA2FxB;;GAEG;AACH,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}

package/dts/tabs/Tabs.d.ts

@@ -18,7 +18,7 @@ export type TabsActiveIndicatorProps = {
   MotionProps;
 export type TabComponent<T extends string = string> = React.FC<TabValue<T>>;
 export type TabsActiveIndicatorComponent = React.FC<TabsActiveIndicatorProps>;
-export type TabsProps<T extends string = string> = {
+export type TabsBaseProps<T extends string = string> = {
   /** The array of tabs data. Each tab may optionally define a custom Component to render. */
   tabs: (TabValue<T> & {
     Component?: TabComponent<T>;
@@ -31,7 +31,8 @@ export type TabsProps<T extends string = string> = {
   activeBackground?: ThemeVars.Color;
   /** Optional callback to receive the active tab element. */
   onActiveTabElementChange?: (element: HTMLElement | null) => void;
-} & Omit<TabsOptions<T>, 'tabs'> &
+} & Omit<TabsOptions<T>, 'tabs'>;
+export type TabsProps<T extends string = string> = TabsBaseProps<T> &
   Omit<HStackProps<HStackDefaultElement>, 'onChange' | 'ref'>;
 type TabsFC = <T extends string = string>(
   props: TabsProps<T> & {

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EAEd,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAe,KAAK,WAAW,EAAmB,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAU,KAAK,oBAAoB,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAkBvF,eAAO,MAAM,oBAAoB;;;;;;CAMF,CAAC;AAEhC,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,IAAI,CAAC;CACrB,GAAG,QAAQ,CAAC,iBAAiB,CAAC,GAC7B,WAAW,CAAC;AAEd,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5E,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC;AAE9E,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACjD,2FAA2F;IAC3F,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG;QAAE,SAAS,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,EAAE,CAAC;IACxD,gDAAgD;IAChD,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,iEAAiE;IACjE,4BAA4B,EAAE,4BAA4B,CAAC;IAC3D,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACnC,2DAA2D;IAC3D,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAClE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAC9B,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;AAE9D,KAAK,MAAM,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EACtC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AA0FxB,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC;AAE5C,eAAO,MAAM,mBAAmB,GAAI,uCAIjC,wBAAwB,mDAgB1B,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EAEd,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAe,KAAK,WAAW,EAAmB,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAU,KAAK,oBAAoB,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAkBvF,eAAO,MAAM,oBAAoB;;;;;;CAMF,CAAC;AAEhC,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,IAAI,CAAC;CACrB,GAAG,QAAQ,CAAC,iBAAiB,CAAC,GAC7B,WAAW,CAAC;AAEd,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5E,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC;AAE9E,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACrD,2FAA2F;IAC3F,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG;QAAE,SAAS,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,EAAE,CAAC;IACxD,gDAAgD;IAChD,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,iEAAiE;IACjE,4BAA4B,EAAE,4BAA4B,CAAC;IAC3D,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACnC,2DAA2D;IAC3D,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAClE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAEjC,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,GACjE,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;AAE9D,KAAK,MAAM,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EACtC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AA0FxB,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC;AAE5C,eAAO,MAAM,mBAAmB,GAAI,uCAIjC,wBAAwB,mDAgB1B,CAAC"}

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

@@ -0,0 +1 @@
+@layer cds{.scrollContainerCss-sb6ypby{-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.scrollContainerCss-sb6ypby::-webkit-scrollbar{display:none;}}

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

@@ -0,0 +1,145 @@
+const _excluded = ["label", "id"],
+  _excluded2 = ["tabs", "activeTab", "onChange", "TabComponent", "testID", "background", "gap", "previousArrowAccessibilityLabel", "nextArrowAccessibilityLabel", "width", "TabsActiveIndicatorComponent", "disabled", "compact", "styles", "classNames"];
+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, useCallback, useMemo, useState } from 'react';
+import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { MediaChip } from '../../chips/MediaChip';
+import { cx } from '../../cx';
+import { useHorizontalScrollToTarget } from '../../hooks/useHorizontalScrollToTarget';
+import { HStack } from '../../layout';
+import { Paddle, Tabs } from '../../tabs';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const scrollContainerCss = "scrollContainerCss-sb6ypby";
+const DefaultTabComponent = _ref => {
+  let {
+      label = '',
+      id
+    } = _ref,
+    tabProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+    activeTab,
+    updateActiveTab
+  } = useTabsContext();
+  const isActive = useMemo(() => (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === id, [activeTab, id]);
+  const handleClick = useCallback(event => {
+    event.preventDefault();
+    updateActiveTab(id);
+  }, [id, updateActiveTab]);
+  return /*#__PURE__*/_jsx(MediaChip, _objectSpread(_objectSpread({
+    "aria-selected": isActive,
+    invertColorScheme: isActive,
+    onClick: handleClick,
+    role: "tab",
+    width: "max-content"
+  }, tabProps), {}, {
+    children: label
+  }));
+};
+const DefaultTabsActiveIndicatorComponent = () => {
+  return null;
+};
+const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function TabbedChips(_ref2, ref) {
+  let {
+      tabs,
+      activeTab,
+      onChange,
+      TabComponent = DefaultTabComponent,
+      testID,
+      background = 'bg',
+      gap = 1,
+      previousArrowAccessibilityLabel = 'Previous',
+      nextArrowAccessibilityLabel = 'Next',
+      width = '100%',
+      TabsActiveIndicatorComponent = DefaultTabsActiveIndicatorComponent,
+      disabled,
+      compact,
+      styles,
+      classNames
+    } = _ref2,
+    accessibilityProps = _objectWithoutProperties(_ref2, _excluded2);
+  const [scrollTarget, setScrollTarget] = useState(null);
+  const {
+    scrollRef,
+    isScrollContentOffscreenLeft,
+    isScrollContentOffscreenRight,
+    handleScroll
+  } = useHorizontalScrollToTarget({
+    activeTarget: scrollTarget,
+    scrollPadding: 50
+  });
+  const handleScrollLeft = useCallback(() => {
+    var _scrollRef$current;
+    scrollRef === null || scrollRef === void 0 || (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 || _scrollRef$current.scrollTo({
+      left: 0,
+      behavior: 'smooth'
+    });
+  }, [scrollRef]);
+  const handleScrollRight = useCallback(() => {
+    if (!scrollRef.current) return;
+    const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
+    scrollRef.current.scrollTo({
+      left: maxScroll,
+      behavior: 'smooth'
+    });
+  }, [scrollRef]);
+  const TabComponentWithCompact = useCallback(props => {
+    return /*#__PURE__*/_jsx(TabComponent, _objectSpread({
+      compact: compact
+    }, props));
+  }, [TabComponent, compact]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    alignItems: "center",
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.root,
+    position: "relative",
+    style: styles === null || styles === void 0 ? void 0 : styles.root,
+    testID: testID,
+    width: width,
+    children: [/*#__PURE__*/_jsx(Paddle, {
+      accessibilityLabel: previousArrowAccessibilityLabel,
+      background: background,
+      direction: "left",
+      onClick: handleScrollLeft,
+      paddleStyle: styles === null || styles === void 0 ? void 0 : styles.paddle,
+      show: isScrollContentOffscreenLeft,
+      variant: "secondary"
+    }), /*#__PURE__*/_jsx(HStack, {
+      ref: scrollRef,
+      alignItems: "center",
+      className: cx(scrollContainerCss, classNames === null || classNames === void 0 ? void 0 : classNames.scrollContainer),
+      onScroll: handleScroll,
+      overflow: "auto",
+      style: styles === null || styles === void 0 ? void 0 : styles.scrollContainer,
+      children: /*#__PURE__*/_jsx(Tabs, _objectSpread({
+        ref: ref,
+        TabComponent: TabComponentWithCompact,
+        TabsActiveIndicatorComponent: DefaultTabsActiveIndicatorComponent,
+        activeTab: activeTab || null,
+        background: background,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.tabs,
+        disabled: disabled,
+        gap: gap,
+        onActiveTabElementChange: setScrollTarget,
+        onChange: onChange,
+        style: styles === null || styles === void 0 ? void 0 : styles.tabs,
+        tabs: tabs
+      }, accessibilityProps))
+    }), /*#__PURE__*/_jsx(Paddle, {
+      accessibilityLabel: nextArrowAccessibilityLabel,
+      background: background,
+      direction: "right",
+      onClick: handleScrollRight,
+      paddleStyle: styles === null || styles === void 0 ? void 0 : styles.paddle,
+      show: isScrollContentOffscreenRight,
+      variant: "secondary"
+    })]
+  });
+}));
+TabbedChipsComponent.displayName = 'TabbedChips';
+export const TabbedChips = TabbedChipsComponent;
+import "./TabbedChips.css";

package/esm/chips/TabbedChips.js

@@ -87,7 +87,6 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
   }, [scrollRef]);
   return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: "center",
-    overflow: "hidden",
     position: "relative",
     testID: testID,
     width: width
@@ -130,5 +129,9 @@ const TabbedChipsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function
   }));
 }));
 TabbedChipsComponent.displayName = 'TabbedChips';
+
+/**
+ * @deprecated Use `TabbedChips(Alpha)` instead.
+ */
 export const TabbedChips = TabbedChipsComponent;
 import "./TabbedChips.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.20.2",
+  "version": "8.21.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -147,7 +147,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.20.2",
+    "@coinbase/cds-common": "^8.21.0",
     "@coinbase/cds-icons": "^5.5.1",
     "@coinbase/cds-illustrations": "^4.26.1",
     "@coinbase/cds-lottie-files": "^3.3.3",