@coinbase/cds-mcp-server 8.48.3 → 8.49.0

package/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.49.0 ((2/26/2026, 04:03 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.48.3 ((2/25/2026, 08:36 PM PST))
 
 This is an artificial version bump with no new change.

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

@@ -10,10 +10,12 @@ import { PeriodSelector } from '@coinbase/cds-mobile-visualization'
 
 ## Examples
 
-### Basic Example
+PeriodSelector is a specialized [SegmentedTabs](/components/navigation/SegmentedTabs) optimized for chart time-period selection. It provides a transparent background, primary wash active state, and full-width layout by default.
+
+### Basics
 
 ```jsx
-function BasicExample() {
+function Example() {
   const tabs = [
     { id: '1H', label: '1H' },
     { id: '1D', label: '1D' },
@@ -29,12 +31,12 @@ function BasicExample() {
 }
 ```
 
-### Minimum Width
+### Sizing
 
-You can set the `width` prop to `fit-content` to make the period selector as small as possible.
+Set `width` to `fit-content` to make the selector only as wide as its content, and use `gap` to control spacing between tabs.
 
 ```jsx
-function MinimumWidthExample() {
+function Example() {
   const tabs = [
     { id: '1W', label: '1W' },
     { id: '1M', label: '1M' },
@@ -55,16 +57,49 @@ function MinimumWidthExample() {
 }
 ```
 
-### Many Periods with Overflow
+### Live Indicator
+
+Use the `LiveTabLabel` component (exported from PeriodSelector) to indicate a live data period. Pair it with a conditional `activeBackground` to visually differentiate the live state.
+
+```jsx
+function Example() {
+  const tabs = useMemo(
+    () => [
+      { id: '1H', label: <LiveTabLabel /> },
+      { id: '1D', label: '1D' },
+      { id: '1W', label: '1W' },
+      { id: '1M', label: '1M' },
+      { id: '1Y', label: '1Y' },
+      { id: 'All', label: 'All' },
+    ],
+    [],
+  );
+
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  const isLive = useMemo(() => activeTab?.id === '1H', [activeTab]);
+
+  const activeBackground = useMemo(() => (isLive ? 'bgNegativeWash' : 'bgPrimaryWash'), [isLive]);
+
+  return (
+    <PeriodSelector
+      activeBackground={activeBackground}
+      activeTab={activeTab}
+      onChange={setActiveTab}
+      tabs={tabs}
+    />
+  );
+}
+```
+
+### Overflow
+
+When there are too many tabs to fit in a single row, wrap the selector in a horizontal `ScrollView` with an optional action button.
 
 ```jsx
-function ManyPeriodsExample() {
+function Example() {
   const tabs = useMemo(
     () => [
-      {
-        id: '1H',
-        label: <LiveTabLabel />,
-      },
+      { id: '1H', label: <LiveTabLabel /> },
       { id: '1D', label: '1D' },
       { id: '1W', label: '1W' },
       { id: '1M', label: '1M' },
@@ -110,149 +145,17 @@ function ManyPeriodsExample() {
 }
 ```
 
-### Live Indicator
-
-```jsx
-function LiveExample() {
-  const tabs = useMemo(
-    () => [
-      // LiveTabLabel is exported from PeriodSelector
-      { id: '1H', label: <LiveTabLabel /> },
-      { id: '1D', label: '1D' },
-      { id: '1W', label: '1W' },
-      { id: '1M', label: '1M' },
-      { id: '1Y', label: '1Y' },
-      { id: 'All', label: 'All' },
-    ],
-    [],
-  );
-
-  const [activeTab, setActiveTab] = useState(tabs[0]);
-  const isLive = useMemo(() => activeTab?.id === '1H', [activeTab]);
-
-  const activeBackground = useMemo(() => (isLive ? 'bgNegativeWash' : 'bgPrimaryWash'), [isLive]);
-
-  return (
-    <PeriodSelector
-      activeBackground={activeBackground}
-      activeTab={activeTab}
-      onChange={setActiveTab}
-      tabs={tabs}
-    />
-  );
-}
-```
-
 ### Customization
 
 #### Custom Colors
 
-```jsx
-function ColoredBTCExample() {
-  const btcColor = assets.btc.color;
-
-  // Custom active indicator with BTC color
-  const BTCActiveIndicator = memo((props) => {
-    const theme = useTheme();
-    const { activeTab } = useTabsContext();
-    const isLive = useMemo(() => activeTab?.id === '1H', [activeTab]);
-
-    const backgroundColor = useMemo(
-      () => (isLive ? theme.color.bgNegativeWash : `${btcColor}1A`),
-      [isLive, theme.color.bgNegativeWash],
-    );
-
-    return <PeriodSelectorActiveIndicator {...props} background={backgroundColor} />;
-  });
-
-  // Custom tab component with BTC color
-  const BTCTab = memo(
-    forwardRef(({ label, ...props }, ref) => {
-      const { activeTab } = useTabsContext();
-      const isActive = activeTab?.id === props.id;
-      const theme = useTheme();
-
-      const wrappedLabel =
-        typeof label === 'string' ? (
-          <Text font="label1" dangerouslySetColor={isActive ? btcColor : theme.color.fg}>
-            {label}
-          </Text>
-        ) : (
-          label
-        );
-
-      return <SegmentedTab ref={ref} label={wrappedLabel} {...props} />;
-    }),
-  );
-
-  // Custom live label with BTC color
-  const BTCLiveLabel = memo(
-    forwardRef(({ label = 'LIVE', font = 'label1', hideDot, style, ...props }, ref) => {
-      const theme = useTheme();
-
-      const dotStyle = useMemo(
-        () => ({
-          width: theme.space[1],
-          height: theme.space[1],
-          borderRadius: 1000,
-          marginRight: theme.space[0.75],
-          backgroundColor: btcColor,
-        }),
-        [theme.space],
-      );
-
-      return (
-        <View
-          ref={ref}
-          style={[
-            {
-              flexDirection: 'row',
-              alignItems: 'center',
-            },
-            style,
-          ]}
-        >
-          {!hideDot && <View style={dotStyle} />}
-          <Text font={font} style={{ color: btcColor }} {...props}>
-            {label}
-          </Text>
-        </View>
-      );
-    }),
-  );
-
-  const tabs = [
-    { id: '1H', label: <BTCLiveLabel /> },
-    { id: '1D', label: '1D' },
-    { id: '1W', label: '1W' },
-    { id: '1M', label: '1M' },
-    { id: '1Y', label: '1Y' },
-    { id: 'All', label: 'All' },
-  ];
-  const [activeTab, setActiveTab] = useState(tabs[0]);
-
-  return (
-    <PeriodSelector
-      TabComponent={BTCTab}
-      TabsActiveIndicatorComponent={BTCActiveIndicator}
-      activeTab={activeTab}
-      onChange={setActiveTab}
-      tabs={tabs}
-    />
-  );
-}
-```
-
-#### Custom Colors Excluding Live
-
-Customize colors for regular periods while keeping the default red styling for live periods.
+Use `TabComponent` and `TabsActiveIndicatorComponent` to fully brand the selector. This example applies a custom asset color to both the active indicator background and the tab text, while keeping the default red styling for live periods.
 
 ```jsx
-function ColoredExcludingLiveExample() {
+function Example() {
   const btcColor = assets.btc.color;
 
-  // Custom active indicator that only applies BTC color to non-live periods
-  const BTCActiveExcludingLiveIndicator = memo((props) => {
+  const BTCActiveIndicator = memo((props) => {
     const theme = useTheme();
     const { activeTab } = useTabsContext();
     const isLive = useMemo(() => activeTab?.id === '1H', [activeTab]);
@@ -265,7 +168,6 @@ function ColoredExcludingLiveExample() {
     return <PeriodSelectorActiveIndicator {...props} background={backgroundColor} />;
   });
 
-  // Custom tab component with BTC color
   const BTCTab = memo(
     forwardRef(({ label, ...props }, ref) => {
       const { activeTab } = useTabsContext();
@@ -293,12 +195,12 @@ function ColoredExcludingLiveExample() {
     { id: '1Y', label: '1Y' },
     { id: 'All', label: 'All' },
   ];
-  const [activeTab, setActiveTab] = useState(tabs[0]);
+  const [activeTab, setActiveTab] = useState(tabs[1]);
 
   return (
     <PeriodSelector
       TabComponent={BTCTab}
-      TabsActiveIndicatorComponent={BTCActiveExcludingLiveIndicator}
+      TabsActiveIndicatorComponent={BTCActiveIndicator}
       activeTab={activeTab}
       onChange={setActiveTab}
       tabs={tabs}
@@ -402,6 +304,7 @@ function ColoredExcludingLiveExample() {
 | `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` | `false \| RegisteredStyle<ViewStyle> \| WithAnimatedObject<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>> \| readonly (ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
+| `styles` | `{ root?: StyleProp<ViewStyle>; tab?: StyleProp<ViewStyle>; activeIndicator?: StyleProp<ViewStyle>; }` | 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. Used to locate this view in end-to-end tests. |
 | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
 | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
@@ -414,3 +317,12 @@ function ColoredExcludingLiveExample() {
 | `zIndex` | `number` | No | `-` | - |
 
 
+## Styles
+
+| Selector | Static class name | Description |
+| --- | --- | --- |
+| `root` | `-` | Root container element |
+| `tab` | `-` | Tab element |
+| `activeIndicator` | `-` | Active indicator element |
+
+

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

@@ -10,9 +10,13 @@ import { SegmentedTabs } from '@coinbase/cds-mobile/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
 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
 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
 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
 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
 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,76 @@ 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
 function Example() {
-  const CustomSegmentedTabColor = useCallback(
-    (props) => <SegmentedTab {...props} activeColor="fgWarning" color="bgPrimary" font="label2" />,
-    [],
+  const theme = useTheme();
+  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: theme.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
+import {
+  interpolateColor,
+  runOnJS,
+  useAnimatedReaction,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
+
+function ColoredIcon({ tabId, name }) {
+  const { activeTab } = useTabsContext();
+  const isActive = activeTab?.id === tabId;
+  const theme = useTheme();
+
+  const progress = useSharedValue(isActive ? 1 : 0);
+  const [color, setColor] = useState(isActive ? theme.color.fgInverse : theme.color.fg);
+
+  useEffect(() => {
+    progress.value = withSpring(isActive ? 1 : 0, tabsSpringConfig);
+  }, [isActive, progress]);
+
+  useAnimatedReaction(
+    () => interpolateColor(progress.value, [0, 1], [theme.color.fg, theme.color.fgInverse]),
+    (newColor) => {
+      runOnJS(setColor)(newColor);
+    },
   );
 
+  return <Icon active name={name} size="s" styles={{ icon: { color } }} />;
+}
+
+function Example() {
+  const theme = useTheme();
   const tabs = [
-    { id: 'buy', label: 'Buy', Component: CustomSegmentedTabColor },
-    { id: 'sell', label: 'Sell', Component: CustomSegmentedTabFont },
-    { id: 'convert', label: 'Convert', Component: CustomSegmentedTabColor },
+    { id: 'buy', label: <ColoredIcon name="chartLine" tabId="buy" /> },
+    { id: 'sell', label: <ColoredIcon name="chartCandles" tabId="sell" /> },
+    { id: 'convert', label: <ColoredIcon name="chartBar" tabId="convert" /> },
   ];
   const [activeTab, updateActiveTab] = useState(tabs[0]);
   const handleChange = useCallback((activeTab) => updateActiveTab(activeTab), []);
@@ -158,16 +211,23 @@ function Example() {
     <SegmentedTabs
       accessibilityLabel="Switch token action views"
       activeTab={activeTab}
+      borderRadius={300}
+      gap={0.5}
       onChange={handleChange}
+      padding={0.5}
+      styles={{
+        activeIndicator: { borderRadius: theme.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
 function Example() {
@@ -175,7 +235,7 @@ function Example() {
     <TabsActiveIndicator activeTabRect={activeTabRect} background="bgOverlay" />
   );
 
-  const AnotherCustomSegmentedTab = ({ id, label, disabled }) => {
+  const CustomTab = ({ id, label, disabled }) => {
     const { activeTab } = useTabsContext();
     const isActive = activeTab?.id === id;
     const renderedLabel = (
@@ -201,7 +261,7 @@ function Example() {
       borderRadius={0}
       onChange={handleChange}
       tabs={tabs}
-      TabComponent={AnotherCustomSegmentedTab}
+      TabComponent={CustomTab}
       TabsActiveIndicatorComponent={CustomActiveIndicator}
     />
   );
@@ -302,6 +362,7 @@ function Example() {
 | `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` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
+| `styles` | `{ root?: StyleProp<ViewStyle>; tab?: StyleProp<ViewStyle>; activeIndicator?: StyleProp<ViewStyle>; }` | 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. Used to locate this view in end-to-end tests. |
 | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
 | `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
@@ -314,3 +375,12 @@ function Example() {
 | `zIndex` | `number` | No | `-` | - |
 
 
+## Styles
+
+| Selector | Static class name | Description |
+| --- | --- | --- |
+| `root` | `-` | Root container element |
+| `tab` | `-` | Tab element |
+| `activeIndicator` | `-` | Active indicator element |
+
+

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

@@ -226,6 +226,26 @@ function Example() {
 }
 ```
 
+### Custom Border Radius
+
+Use `borderRadius` to customize the shape of both the handle and the background. Token values are resolved through the theme, so the handle and background always match.
+
+```jsx
+function Example() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <SlideButton
+      checked={checked}
+      onChange={setChecked}
+      uncheckedLabel="Swipe to confirm"
+      checkedLabel="Confirming..."
+      borderRadius={200}
+    />
+  );
+}
+```
+
 ### Custom Background and Handle Components
 
 You can fully customize the background and handle by providing your own components via `SlideButtonBackgroundComponent` and `SlideButtonHandleComponent`. Your components receive typed props (`SlideButtonBackgroundProps` and `SlideButtonHandleProps`) including a `progress` spring value and the current `checked` state.

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

@@ -197,7 +197,7 @@ render(<Example />);
 | `disabled` | `boolean` | No | `-` | Disable interactions on all the tabs. |
 | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `1` | The spacing between Tabs |
 | `ref` | `null \| (instance: View \| null) => void \| MutableRefObject<View \| null>` | No | `-` | - |
-| `styles` | `{ root?: StyleProp<ViewStyle>; tabs?: StyleProp<ViewStyle>; }` | No | `-` | - |
+| `styles` | `({ root?: StyleProp<ViewStyle>; tab?: StyleProp<ViewStyle>; activeIndicator?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; tabs?: StyleProp<ViewStyle>; })` | 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 |
 | `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. |
 
@@ -207,6 +207,8 @@ render(<Example />);
 | Selector | Static class name | Description |
 | --- | --- | --- |
 | `root` | `-` | Root container element |
+| `tab` | `-` | Tab element |
+| `activeIndicator` | `-` | Active indicator element |
 | `tabs` | `-` | Tabs root element |