@coinbase/cds-mcp-server 8.20.1 → 8.21.0

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.21.0 ((11/12/2025, 11:45 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.20.2 ((11/12/2025, 10:01 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.20.1 ((11/7/2025, 01:20 PM PST))
 
 This is an artificial version bump with no new change.

package/mcp-docs/mobile/components/TabbedChipsAlpha.txt

@@ -0,0 +1,174 @@
+# TabbedChipsAlpha
+
+A chip component commonly used in filter context to refine a date source
+
+## Import
+
+```tsx
+import { TabbedChips } from '@coinbase/cds-mobile/alpha/tabbed-chips/TabbedChips'
+```
+
+## Examples
+
+### Basic usage
+
+```tsx
+function ExampleDefault() {
+  const tabs = [
+    { id: 'all', label: 'All' },
+    { id: 'swap', label: 'Swap' },
+    { id: 'collect', label: 'Collect' },
+    { id: 'bridge', label: 'Bridge' },
+  ];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />;
+}
+```
+
+### Compact
+
+```tsx
+function ExampleCompactNoStart() {
+  const tabs = [
+    { id: 'all', label: 'All' },
+    { id: 'swap', label: 'Swap' },
+    { id: 'collect', label: 'Collect' },
+    { id: 'bridge', label: 'Bridge' },
+  ];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return <TabbedChips activeTab={activeTab} compact onChange={setActiveTab} tabs={tabs} />;
+}
+```
+
+### Many tabs (scrollable)
+
+:::tip Scrolling behavior
+The list becomes horizontally scrollable when content overflows; an `OverflowGradient` appears on the edge to hint more content.
+:::
+
+```tsx
+function ExampleManyTabs() {
+  const tabs = Array.from({ length: 12 }).map((_, i) => ({
+    id: `tab_${i + 1}`,
+    label: `Tab ${i + 1}`,
+  }));
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />;
+}
+```
+
+### Long text tabs
+
+```tsx
+function ExampleLongText() {
+  const tabs = [
+    { id: 'a', label: 'Very long tab label that can wrap on small widths' },
+    { id: 'b', label: 'Another extra long label to test overflow' },
+    { id: 'c', label: 'Short' },
+  ];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />;
+}
+```
+
+### Disabled tab
+
+```tsx
+function ExampleDisabled() {
+  const tabs = [
+    { id: 'first', label: 'First' },
+    { id: 'second', label: 'Second', disabled: true },
+    { id: 'third', label: 'Third' },
+  ];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />;
+}
+```
+
+### With start media
+
+:::tip Media sizing
+For start media, use circular images sized 24×24 for regular chips and 16×16 for compact chips.
+:::
+
+```tsx
+function ExampleWithStart() {
+  const icon = { height: 24, width: 24, shape: 'circle', source: assets.eth.imageUrl };
+  const compactIcon = { height: 16, width: 16, shape: 'circle', source: assets.eth.imageUrl };
+  const tabs = [
+    { id: 'all', label: 'All', start: <RemoteImage {...icon} /> },
+    { id: 'swap', label: 'Swap', start: <RemoteImage {...icon} /> },
+    { id: 'collect', label: 'Collect', start: <RemoteImage {...icon} /> },
+    { id: 'bridge', label: 'Bridge', start: <RemoteImage {...icon} /> },
+  ];
+  const compactTabs = tabs.map((tab) => ({ ...tab, start: <RemoteImage {...compactIcon} /> }));
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <VStack gap={2}>
+      <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />
+      <TabbedChips compact activeTab={activeTab} onChange={setActiveTab} tabs={compactTabs} />
+    </VStack>
+  );
+}
+```
+
+### Custom TabComponent
+
+:::tip Custom Tab behavior
+When providing a custom TabComponent, use `useTabsContext()` and call `updateActiveTab(id)` to update selection state. Reflect the active state (e.g., end icon state) based on `activeTab?.id === id`.
+:::
+
+```tsx
+function CustomTab({ id, label, ...props }: TabbedChipProps) {
+  const { activeTab, updateActiveTab } = useTabsContext();
+  const isActive = activeTab?.id === id;
+  return (
+    <MediaChip
+      onPress={() => updateActiveTab(id)}
+      end={<Icon size="s" active={isActive} name="star" />}
+      {...props}
+    >
+      {label}
+    </MediaChip>
+  );
+}
+
+const tabs = [
+  { id: 'all', label: 'All' },
+  { id: 'swap', label: 'Swap' },
+  { id: 'collect', label: 'Collect' },
+];
+
+function Example() {
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <TabbedChips
+      activeTab={activeTab}
+      onChange={setActiveTab}
+      tabs={tabs}
+      TabComponent={CustomTab}
+    />
+  );
+}
+
+render(<Example />);
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `activeTab` | `TabValue<T> \| null` | Yes | `-` | React state for the currently active tab. Setting it to null results in no active tab. |
+| `onChange` | `(activeTab: TabValue<T> \| null) => void` | Yes | `-` | Callback that is fired when the active tab changes. Use this callback to update the activeTab state. |
+| `tabs` | `TabbedChipProps<T>[]` | Yes | `-` | - |
+| `TabComponent` | `FC<TabbedChipProps<T>>` | No | `-` | - |
+| `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | - |
+| `compact` | `boolean` | No | `false` | Turn on to use a compact Chip component for each tab. |
+| `disabled` | `boolean` | No | `-` | Disable interactions on all the tabs. |
+| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `1` | The spacing between Tabs |
+| `ref` | `null \| (instance: View \| null) => void \| MutableRefObject<View \| null>` | No | `-` | - |
+| `styles` | `{ root?: StyleProp<ViewStyle>; tabs?: StyleProp<ViewStyle>; }` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+| `width` | `string \| number` | No | `-` | 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. |
+
+

package/mcp-docs/mobile/components/Toast.txt

@@ -59,7 +59,7 @@ function ToastExample() {
 
     const handleVariant = () => {
       toast.show('Toast copy', {
-        variant: 'negative',
+        variant: 'bgNegative',
       });
     };
 

package/mcp-docs/mobile/getting-started/theming.txt

@@ -147,7 +147,7 @@ The `color` variables have semantic names which describe their application in th
 const theme = useTheme();
 theme.lightSpectrum.gray0; // "255,255,255"
 theme.darkSpectrum.gray0; // "10,11,13"
-theme.spectrum.gray100; // "255,255,255" or "10,11,13", depends on activeColorScheme
+theme.spectrum.gray0; // "255,255,255" or "10,11,13", depends on activeColorScheme
 theme.lightColor.bg; // "rgb(255,255,255)"
 theme.darkColor.bg; // "rgb(10,11,13)"
 theme.color.bg; // "rgb(255,255,255)" or "rgb(10,11,13)", depends on activeColorScheme

package/mcp-docs/mobile/routes.txt

@@ -34,6 +34,7 @@
 - [Tour](mobile/components/Tour.txt): Creates guided tours of a user interface.
 - [TopNavBar](mobile/components/TopNavBar.txt): A customizable top navigation bar that can contain start, middle, and end content, as well as a bottom section for elements like tabs. It remains sticky at the top of the screen.
 - [Tabs](mobile/components/Tabs.txt): Tabs is a flexible, accessible tab navigation component for React Native, supporting animated indicators, custom tab components, and full accessibility.
+- [TabbedChipsAlpha](mobile/components/TabbedChipsAlpha.txt): A chip component commonly used in filter context to refine a date source
 - [TabbedChips](mobile/components/TabbedChips.txt): Tab chips are to be used in a filter setting where the user is given the ability to refine the data source they are accessing.
 - [TabNavigation](mobile/components/TabNavigation.txt): Organizes content across different screens or data sets.
 - [TabLabel](mobile/components/TabLabel.txt): A text label component used within tab navigation.

package/mcp-docs/web/components/TabbedChips.txt

@@ -39,7 +39,7 @@ function TabbedChipsExample() {
         <TextTitle3 as="p">Popular assets</TextTitle3>
       </VStack>
       <SearchInput compact placeholder="Search by name" />
-      <TabbedChips value={value} onChange={setValue} tabs={tabs} />
+      <OldTabbedChips value={value} onChange={setValue} tabs={tabs} />
     </VStack>
   );
 }

package/mcp-docs/web/components/TabbedChipsAlpha.txt

@@ -0,0 +1,202 @@
+# TabbedChipsAlpha
+
+A chip component commonly used in filter context to refine a date source
+
+## Import
+
+```tsx
+import { TabbedChips } from '@coinbase/cds-web/alpha/tabbed-chips/TabbedChips'
+```
+
+## Examples
+
+### Basic usage
+
+```jsx live
+function ExampleDefault() {
+  const tabs = [
+    { id: 'all', label: 'All' },
+    { id: 'swap', label: 'Swap' },
+    { id: 'collect', label: 'Collect' },
+    { id: 'bridge', label: 'Bridge' },
+  ];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />;
+}
+```
+
+### Compact
+
+```jsx live
+function ExampleCompactNoStart() {
+  const tabs = [
+    { id: 'all', label: 'All' },
+    { id: 'swap', label: 'Swap' },
+    { id: 'collect', label: 'Collect' },
+    { id: 'bridge', label: 'Bridge' },
+  ];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return <TabbedChips activeTab={activeTab} compact onChange={setActiveTab} tabs={tabs} />;
+}
+```
+
+### Many tabs (paddles)
+
+:::tip Paddles & overflow
+Paddles appear automatically when the tab list overflows.
+:::
+
+```jsx live
+function ExampleWithPaddles() {
+  const tabs = Array.from({ length: 12 }).map((_, i) => ({
+    id: `tab_${i + 1}`,
+    label: `Tab ${i + 1}`,
+  }));
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />;
+}
+```
+
+### With custom sized paddles
+
+:::tip Paddle styling
+You can adjust the size of the paddles via `styles.paddle`.
+:::
+
+```jsx live
+function ExampleCustomPaddles() {
+  const tabs = Array.from({ length: 10 }).map((_, i) => ({
+    id: `t_${i + 1}`,
+    label: `Item ${i + 1}`,
+  }));
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <TabbedChips
+      activeTab={activeTab}
+      onChange={setActiveTab}
+      tabs={tabs}
+      styles={{ paddle: { transform: 'scale(0.8)' } }}
+    />
+  );
+}
+```
+
+### Long text tabs
+
+```jsx live
+function ExampleLongText() {
+  const tabs = [
+    { id: 'a', label: 'Very long tab label that can wrap on small widths' },
+    { id: 'b', label: 'Another extra long label to test overflow' },
+    { id: 'c', label: 'Short' },
+  ];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />;
+}
+```
+
+### Disabled tab
+
+```jsx live
+function ExampleDisabled() {
+  const tabs = [
+    { id: 'first', label: 'First' },
+    { id: 'second', label: 'Second', disabled: true },
+    { id: 'third', label: 'Third' },
+  ];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />;
+}
+```
+
+### With start media
+
+:::tip Media sizing
+For start media, use circular images sized 24×24 for regular chips and 16×16 for compact chips.
+:::
+
+```jsx live
+function ExampleWithStart() {
+  const icon = { height: 24, width: 24, shape: 'circle', source: assets.eth.imageUrl };
+  const compactIcon = { height: 16, width: 16, shape: 'circle', source: assets.eth.imageUrl };
+  const tabs = [
+    { id: 'all', label: 'All', start: <RemoteImage {...icon} /> },
+    { id: 'swap', label: 'Swap', start: <RemoteImage {...icon} /> },
+    { id: 'collect', label: 'Collect', start: <RemoteImage {...icon} /> },
+    { id: 'bridge', label: 'Bridge', start: <RemoteImage {...icon} /> },
+  ];
+  const compactTabs = tabs.map((tab) => ({ ...tab, start: <RemoteImage {...compactIcon} /> }));
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <VStack gap={2}>
+      <TabbedChips activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />
+      <TabbedChips compact activeTab={activeTab} onChange={setActiveTab} tabs={compactTabs} />
+    </VStack>
+  );
+}
+```
+
+### Custom TabComponent
+
+:::tip Custom Tab behavior
+When providing a custom TabComponent, use `useTabsContext()` and call `updateActiveTab(id)` to update selection state. Reflect the active state (e.g., end icon state) based on `activeTab?.id === id`.
+:::
+
+```jsx live noInline
+function CustomTab({ id, label, ...props }: TabbedChipProps) {
+  const { activeTab, updateActiveTab } = useTabsContext();
+  const isActive = activeTab?.id === id;
+  return (
+    <MediaChip
+      end={<Icon size="s" active={isActive} name="star" />}
+      onClick={() => updateActiveTab(id)}
+      {...props}
+    >
+      {label}
+    </MediaChip>
+  );
+}
+
+const tabs = [
+  { id: 'all', label: 'All' },
+  { id: 'swap', label: 'Swap' },
+  { id: 'collect', label: 'Collect' },
+];
+
+function Example() {
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <TabbedChips
+      activeTab={activeTab}
+      onChange={setActiveTab}
+      tabs={tabs}
+      TabComponent={CustomTab}
+    />
+  );
+}
+
+render(<Example />);
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `activeTab` | `TabValue<T> \| null` | Yes | `-` | React state for the currently active tab. Setting it to null results in no active tab. |
+| `onChange` | `(activeTab: TabValue<T> \| null) => void` | Yes | `-` | Callback that is fired when the active tab changes. Use this callback to update the activeTab state. |
+| `tabs` | `TabbedChipProps<T>[]` | Yes | `-` | - |
+| `TabComponent` | `FC<TabbedChipProps<T>>` | No | `-` | - |
+| `TabsActiveIndicatorComponent` | `TabsActiveIndicatorComponent` | No | `-` | - |
+| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `classNames` | `{ root?: string; scrollContainer?: string \| undefined; tabs?: string \| undefined; } \| undefined` | No | `-` | - |
+| `compact` | `boolean` | No | `false` | Turn on to use a compact Chip component for each tab. |
+| `disabled` | `boolean` | No | `-` | Disable interactions on all the tabs. |
+| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `1` | The spacing between Tabs |
+| `nextArrowAccessibilityLabel` | `string` | No | `-` | - |
+| `previousArrowAccessibilityLabel` | `string` | No | `-` | - |
+| `ref` | `null \| (instance: HTMLElement \| null) => void \| MutableRefObject<HTMLElement \| null>` | No | `-` | - |
+| `styles` | `{ root?: CSSProperties; scrollContainer?: CSSProperties \| undefined; paddle?: CSSProperties \| undefined; tabs?: CSSProperties \| undefined; } \| undefined` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+| `width` | `ResponsiveProp<Width<string \| number>>` | No | `100%` | 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. |
+
+

package/mcp-docs/web/components/Toast.txt

@@ -59,7 +59,7 @@ function ToastExample() {
 
     const handleVariant = () => {
       toast.show('Toast copy', {
-        variant: 'negative',
+        variant: 'bgNegative',
       });
     };
 

package/mcp-docs/web/getting-started/theming.txt

@@ -186,7 +186,7 @@ The `color` variables have semantic names which describe their application in th
 const theme = useTheme();
 theme.lightSpectrum.gray0; // "255,255,255"
 theme.darkSpectrum.gray0; // "10,11,13"
-theme.spectrum.gray100; // "255,255,255" or "10,11,13", depends on activeColorScheme
+theme.spectrum.gray0; // "255,255,255" or "10,11,13", depends on activeColorScheme
 theme.lightColor.bg; // "rgb(255,255,255)"
 theme.darkColor.bg; // "rgb(10,11,13)"
 theme.color.bg; // "rgb(255,255,255)" or "rgb(10,11,13)", depends on activeColorScheme

package/mcp-docs/web/routes.txt

@@ -39,6 +39,7 @@
 - [RollingNumber](web/components/RollingNumber.txt): A numeric display that animates value changes with rolling digits.
 - [Tour](web/components/Tour.txt): Creates guided tours of a user interface.
 - [Tabs](web/components/Tabs.txt): Tabs is a flexible, accessible tab navigation component for switching between content sections. It supports custom tab components, animated active indicators, and full keyboard navigation.
+- [TabbedChipsAlpha](web/components/TabbedChipsAlpha.txt): A chip component commonly used in filter context to refine a date source
 - [TabbedChips](web/components/TabbedChips.txt): Tab chips are to be used in a filter setting where the user is given the ability to refine the data source they are accessing.
 - [TabNavigation](web/components/TabNavigation.txt): Organizes content across different screens or data sets.
 - [TabLabel](web/components/TabLabel.txt): A text label component used within tab navigation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.20.1",
+  "version": "8.21.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",