@coinbase/cds-mcp-server 8.48.3 → 8.49.0

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

@@ -10,9 +10,13 @@ import { SegmentedTabs } from '@coinbase/cds-web/tabs/SegmentedTabs'
 
 ## Examples
 
-### Basic Example
+SegmentedTabs is a controlled component that uses `activeTab` and `onChange` to manage selection state.
 
-Use the `onChange` prop to listen and make changes to the `activeTab` state.
+### Basics
+
+#### Initial Value
+
+You can set any tab as the initial active tab by passing it to the `activeTab` state.
 
 ```jsx live
 function Example() {
@@ -34,9 +38,7 @@ function Example() {
 }
 ```
 
-### With Initial Value
-
-You can set any tab as the initial active tab.
+SegmentedTabs can also start with no active selection by passing `null`.
 
 ```jsx live
 function Example() {
@@ -45,7 +47,7 @@ function Example() {
     { id: 'sell', label: 'Sell' },
     { id: 'convert', label: 'Convert' },
   ];
-  const [activeTab, updateActiveTab] = useState(tabs[1]); // Start with 'Sell'
+  const [activeTab, updateActiveTab] = useState(null);
   const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []);
   return (
     <SegmentedTabs
@@ -58,9 +60,9 @@ function Example() {
 }
 ```
 
-### No Initial Value
+#### Disabled
 
-SegmentedTabs can start with no active selection.
+The entire component can be disabled with the `disabled` prop.
 
 ```jsx live
 function Example() {
@@ -69,12 +71,13 @@ function Example() {
     { id: 'sell', label: 'Sell' },
     { id: 'convert', label: 'Convert' },
   ];
-  const [activeTab, updateActiveTab] = useState(null); // No initial selection
+  const [activeTab, updateActiveTab] = useState(tabs[0]);
   const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []);
   return (
     <SegmentedTabs
       accessibilityLabel="Switch token action views"
       activeTab={activeTab}
+      disabled
       onChange={handleChange}
       tabs={tabs}
     />
@@ -82,15 +85,13 @@ function Example() {
 }
 ```
 
-### Disabled State
-
-You can disable the entire SegmentedTabs component.
+Individual tabs can also be disabled while keeping others interactive.
 
 ```jsx live
 function Example() {
   const tabs = [
     { id: 'buy', label: 'Buy' },
-    { id: 'sell', label: 'Sell' },
+    { id: 'sell', label: 'Sell', disabled: true },
     { id: 'convert', label: 'Convert' },
   ];
   const [activeTab, updateActiveTab] = useState(tabs[0]);
@@ -99,7 +100,6 @@ function Example() {
     <SegmentedTabs
       accessibilityLabel="Switch token action views"
       activeTab={activeTab}
-      disabled
       onChange={handleChange}
       tabs={tabs}
     />
@@ -107,15 +107,17 @@ function Example() {
 }
 ```
 
-### Disabled Individual Tab
+### Styling
+
+#### Border Radius
 
-Individual tabs can be disabled while keeping others interactive.
+Set `borderRadius` to change the shape of both the container and the active indicator.
 
 ```jsx live
 function Example() {
   const tabs = [
     { id: 'buy', label: 'Buy' },
-    { id: 'sell', label: 'Sell', disabled: true },
+    { id: 'sell', label: 'Sell' },
     { id: 'convert', label: 'Convert' },
   ];
   const [activeTab, updateActiveTab] = useState(tabs[0]);
@@ -124,6 +126,7 @@ function Example() {
     <SegmentedTabs
       accessibilityLabel="Switch token action views"
       activeTab={activeTab}
+      borderRadius={300}
       onChange={handleChange}
       tabs={tabs}
     />
@@ -131,26 +134,43 @@ function Example() {
 }
 ```
 
-### Custom Tab Component
-
-You can customize individual tabs by providing a custom `Component` for specific tabs.
+Use the `styles` prop to set a different `borderRadius` on the active indicator than the outer container, with `padding` to create an inset effect.
 
 ```jsx live
 function Example() {
-  const CustomSegmentedTabColor = useCallback(
-    (props) => <SegmentedTab {...props} activeColor="fgWarning" color="bgPrimary" font="label2" />,
-    [],
+  const tabs = [
+    { id: 'buy', label: 'Buy' },
+    { id: 'sell', label: 'Sell' },
+    { id: 'convert', label: 'Convert' },
+  ];
+  const [activeTab, updateActiveTab] = useState(tabs[0]);
+  const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []);
+  return (
+    <SegmentedTabs
+      accessibilityLabel="Switch token action views"
+      activeTab={activeTab}
+      borderRadius={300}
+      onChange={handleChange}
+      padding={0.5}
+      styles={{
+        activeIndicator: { borderRadius: 'var(--borderRadius-200)' },
+      }}
+      tabs={tabs}
+    />
   );
+}
+```
 
-  const CustomSegmentedTabFont = useCallback(
-    (props) => <SegmentedTab {...props} font="label2" />,
-    [],
-  );
+#### Labels
 
+Labels can be customized with any `ReactNode`, including instances of `Icon`.
+
+```jsx live
+function Example() {
   const tabs = [
-    { id: 'buy', label: 'Buy', Component: CustomSegmentedTabColor },
-    { id: 'sell', label: 'Sell', Component: CustomSegmentedTabFont },
-    { id: 'convert', label: 'Convert', Component: CustomSegmentedTabColor },
+    { id: 'buy', label: <Icon name="chartLine" size="s" color="currentColor" active /> },
+    { id: 'sell', label: <Icon name="chartCandles" size="s" color="currentColor" active /> },
+    { id: 'convert', label: <Icon name="chartBar" size="s" color="currentColor" active /> },
   ];
   const [activeTab, updateActiveTab] = useState(tabs[0]);
   const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []);
@@ -158,16 +178,23 @@ function Example() {
     <SegmentedTabs
       accessibilityLabel="Switch token action views"
       activeTab={activeTab}
+      borderRadius={300}
+      gap={0.5}
       onChange={handleChange}
+      padding={0.5}
+      styles={{
+        activeIndicator: { borderRadius: 'var(--borderRadius-200)' },
+      }}
       tabs={tabs}
+      width="fit-content"
     />
   );
 }
 ```
 
-### Custom Active Indicator
+### Custom Components
 
-You can customize the active indicator component and overall styling.
+Use `TabComponent` and `TabsActiveIndicatorComponent` to fully customize the tabs and active indicator. Individual tabs can also be customized by providing a `Component` in the tab definition.
 
 ```jsx live
 function Example() {
@@ -178,7 +205,7 @@ function Example() {
     [],
   );
 
-  const AnotherCustomSegmentedTab = useCallback(({ id, label, disabled }) => {
+  const CustomTab = useCallback(({ id, label, disabled }) => {
     const { activeTab } = useTabsContext();
     const isActive = activeTab?.id === id;
     const renderedLabel = (
@@ -206,7 +233,7 @@ function Example() {
       borderRadius={0}
       onChange={handleChange}
       tabs={tabs}
-      TabComponent={AnotherCustomSegmentedTab}
+      TabComponent={CustomTab}
       TabsActiveIndicatorComponent={CustomActiveIndicator}
     />
   );
@@ -248,6 +275,7 @@ function Example() {
 | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
+| `classNames` | `{ root?: string; tab?: string \| undefined; activeIndicator?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the SegmentedTabs component |
 | `color` | `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 | `-` | - |
 | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
@@ -311,6 +339,7 @@ function Example() {
 | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `style` | `CSSProperties` | No | `-` | - |
+| `styles` | `{ root?: CSSProperties; tab?: CSSProperties \| undefined; activeIndicator?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the SegmentedTabs component |
 | `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 |
 | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
 | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
@@ -323,3 +352,12 @@ function Example() {
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 
+## Styles
+
+| Selector | Static class name | Description |
+| --- | --- | --- |
+| `root` | `-` | Root element |
+| `tab` | `-` | Tab element |
+| `activeIndicator` | `-` | Active indicator element |
+
+

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

@@ -10,22 +10,28 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
 
 ## Examples
 
-### Basic usage
+Tabs is a low-level primitive for building custom tab interfaces. It requires a `TabComponent` and `TabsActiveIndicatorComponent` to render. For a ready-to-use tab experience, see [SegmentedTabs](/components/navigation/SegmentedTabs).
 
-```tsx live
-() => {
+### Basics
+
+#### Initial Value
+
+Use `useTabsContext` inside your `TabComponent` to access the active tab state. Pair with [TabLabel](/components/navigation/TabLabel) for consistent label styling and [TabsActiveIndicator](/components/navigation/TabIndicator) for the animated indicator.
+
+```jsx live
+function Example() {
   const tabs = [
     { id: 'tab1', label: 'Tab 1' },
     { id: 'tab2', label: 'Tab 2' },
     { id: 'tab3', label: 'Tab 3' },
   ];
-  // TabComponent that uses context and TabLabel, wrapped in Pressable
-  const TabComponent = ({ id, label, disabled, ...props }) => {
-    const api = useTabsContext();
-    const isActive = api.activeTab?.id === id;
+
+  const TabComponent = useCallback(({ id, label, disabled, ...props }) => {
+    const { activeTab, updateActiveTab } = useTabsContext();
+    const isActive = activeTab?.id === id;
     return (
       <Pressable
-        onClick={() => api.updateActiveTab(id)}
+        onClick={() => updateActiveTab(id)}
         disabled={disabled}
         aria-pressed={isActive}
         {...props}
@@ -35,12 +41,13 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
         </TabLabel>
       </Pressable>
     );
-  };
-
-  const CustomTabsActiveIndicator = useCallback((props) => {
-    return <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />;
   }, []);
 
+  const ActiveIndicator = useCallback(
+    (props) => <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />,
+    [],
+  );
+
   const [activeTab, setActiveTab] = useState(tabs[0]);
   return (
     <Tabs
@@ -49,28 +56,71 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
       activeTab={activeTab}
       onChange={setActiveTab}
       TabComponent={TabComponent}
-      TabsActiveIndicatorComponent={CustomTabsActiveIndicator}
-      activeBackground="bgPrimary"
+      TabsActiveIndicatorComponent={ActiveIndicator}
     />
   );
-};
+}
 ```
 
-### Custom Tab Component
+Tabs can also start with no active selection by passing `null`.
 
-```tsx live
-() => {
+```jsx live
+function Example() {
   const tabs = [
-    { id: 'home', label: 'Home', icon: '🏠' },
-    { id: 'profile', label: 'Profile', icon: '👤' },
-    { id: 'settings', label: 'Settings', icon: '⚙️' },
+    { id: 'tab1', label: 'Tab 1' },
+    { id: 'tab2', label: 'Tab 2' },
+    { id: 'tab3', label: 'Tab 3' },
   ];
 
-  const CustomTabsActiveIndicator = useCallback((props) => {
-    return <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />;
+  const TabComponent = useCallback(({ id, label, disabled, ...props }) => {
+    const { activeTab, updateActiveTab } = useTabsContext();
+    const isActive = activeTab?.id === id;
+    return (
+      <Pressable
+        onClick={() => updateActiveTab(id)}
+        disabled={disabled}
+        aria-pressed={isActive}
+        {...props}
+      >
+        <TabLabel id={id} active={isActive}>
+          {label}
+        </TabLabel>
+      </Pressable>
+    );
   }, []);
-  // CustomTab uses context and TabLabel, wrapped in Pressable
-  const CustomTab = ({ id, label, icon, disabled, ...props }) => {
+
+  const ActiveIndicator = useCallback(
+    (props) => <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />,
+    [],
+  );
+
+  const [activeTab, setActiveTab] = useState(null);
+  return (
+    <Tabs
+      gap={4}
+      tabs={tabs}
+      activeTab={activeTab}
+      onChange={setActiveTab}
+      TabComponent={TabComponent}
+      TabsActiveIndicatorComponent={ActiveIndicator}
+    />
+  );
+}
+```
+
+#### Disabled
+
+The entire component can be disabled with the `disabled` prop.
+
+```jsx live
+function Example() {
+  const tabs = [
+    { id: 'tab1', label: 'Tab 1' },
+    { id: 'tab2', label: 'Tab 2' },
+    { id: 'tab3', label: 'Tab 3' },
+  ];
+
+  const TabComponent = useCallback(({ id, label, disabled, ...props }) => {
     const { activeTab, updateActiveTab } = useTabsContext();
     const isActive = activeTab?.id === id;
     return (
@@ -82,11 +132,116 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
       >
         <TabLabel id={id} active={isActive}>
           {label}
-          {icon}
         </TabLabel>
       </Pressable>
     );
-  };
+  }, []);
+
+  const ActiveIndicator = useCallback(
+    (props) => <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />,
+    [],
+  );
+
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <Tabs
+      disabled
+      gap={4}
+      tabs={tabs}
+      activeTab={activeTab}
+      onChange={setActiveTab}
+      TabComponent={TabComponent}
+      TabsActiveIndicatorComponent={ActiveIndicator}
+    />
+  );
+}
+```
+
+Individual tabs can also be disabled while keeping others interactive.
+
+```jsx live
+function Example() {
+  const tabs = [
+    { id: 'tab1', label: 'Tab 1' },
+    { id: 'tab2', label: 'Tab 2', disabled: true },
+    { id: 'tab3', label: 'Tab 3' },
+  ];
+
+  const TabComponent = useCallback(({ id, label, disabled, ...props }) => {
+    const { activeTab, updateActiveTab } = useTabsContext();
+    const isActive = activeTab?.id === id;
+    return (
+      <Pressable
+        onClick={() => updateActiveTab(id)}
+        disabled={disabled}
+        aria-pressed={isActive}
+        {...props}
+      >
+        <TabLabel id={id} active={isActive}>
+          {label}
+        </TabLabel>
+      </Pressable>
+    );
+  }, []);
+
+  const ActiveIndicator = useCallback(
+    (props) => <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />,
+    [],
+  );
+
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return (
+    <Tabs
+      gap={4}
+      tabs={tabs}
+      activeTab={activeTab}
+      onChange={setActiveTab}
+      TabComponent={TabComponent}
+      TabsActiveIndicatorComponent={ActiveIndicator}
+    />
+  );
+}
+```
+
+### Custom Components
+
+#### Tab
+
+Pass additional data through the tab definitions and access it in your `TabComponent` to render custom content like icons.
+
+```jsx live
+function Example() {
+  const tabs = [
+    { id: 'home', label: 'Home', icon: 'home' },
+    { id: 'profile', label: 'Profile', icon: 'user' },
+    { id: 'settings', label: 'Settings', icon: 'settings' },
+  ];
+
+  const CustomTab = useCallback(({ id, label, icon, disabled, ...props }) => {
+    const { activeTab, updateActiveTab } = useTabsContext();
+    const isActive = activeTab?.id === id;
+    return (
+      <Pressable
+        onClick={() => updateActiveTab(id)}
+        disabled={disabled}
+        aria-pressed={isActive}
+        {...props}
+      >
+        <HStack gap={1} alignItems="center">
+          <Icon name={icon} size="s" color={isActive ? 'fgPrimary' : 'fgMuted'} />
+          <TabLabel id={id} active={isActive}>
+            {label}
+          </TabLabel>
+        </HStack>
+      </Pressable>
+    );
+  }, []);
+
+  const ActiveIndicator = useCallback(
+    (props) => <TabsActiveIndicator {...props} background="bgPrimary" bottom={0} height={2} />,
+    [],
+  );
+
   const [activeTab, setActiveTab] = useState(tabs[0]);
   return (
     <Tabs
@@ -95,10 +250,10 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
       activeTab={activeTab}
       onChange={setActiveTab}
       TabComponent={CustomTab}
-      TabsActiveIndicatorComponent={CustomTabsActiveIndicator}
+      TabsActiveIndicatorComponent={ActiveIndicator}
     />
   );
-};
+}
 ```
 
 ## Props
@@ -136,6 +291,7 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
 | `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
+| `classNames` | `{ root?: string; tab?: string \| undefined; activeIndicator?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the Tabs component |
 | `color` | `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 | `-` | - |
 | `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
@@ -199,6 +355,7 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
 | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `style` | `CSSProperties` | No | `-` | - |
+| `styles` | `{ root?: CSSProperties; tab?: CSSProperties \| undefined; activeIndicator?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the Tabs component |
 | `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 |
 | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
 | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
@@ -211,3 +368,12 @@ import { Tabs } from '@coinbase/cds-web/tabs/Tabs'
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 
+## Styles
+
+| Selector | Static class name | Description |
+| --- | --- | --- |
+| `root` | `-` | Root element |
+| `tab` | `-` | Tab element |
+| `activeIndicator` | `-` | Active indicator element |
+
+

package/package.json

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