@coinbase/cds-mcp-server 8.17.3 → 8.17.4

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

@@ -4,35 +4,10 @@ A horizontal axis component for CartesianChart. Displays tick marks, labels, gri
 
 ## Import
 
-```jsx
+```tsx
 import { XAxis } from '@coinbase/cds-mobile-visualization'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `GridLineComponent` | `LineComponent` | No | `DottedLine` | Component to render the grid lines. |
-| `className` | `string` | No | `-` | Custom className for the axis. |
-| `classNames` | `{ root?: string; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined` | No | `-` | Custom classNames for the axis. |
-| `height` | `number` | No | `32` | Height of the axis. This value is inclusive of the padding. |
-| `minTickLabelGap` | `number` | No | `4` | Minimum gap between tick labels. Labels will be hidden if they are closer than this gap. |
-| `position` | `top \| bottom` | No | `'bottom'` | The position of the axis relative to the charts drawing area. |
-| `requestedTickCount` | `number` | No | `5 (for y-axis)` | Requested number of ticks to display. This value is passed into d3 and may not be respected. |
-| `showGrid` | `boolean` | No | `-` | Whether to show grid lines at each tick position. |
-| `showLine` | `boolean` | No | `-` | Whether to show the axis line. |
-| `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
-| `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
-| `styles` | `{ root?: CSSProperties; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
-| `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
-| `tickLabelFormatter` | `((value: any) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
-| `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |
-| `tickMarkSize` | `number` | No | `4` | Size of the tick marks. |
-| `tickMaxStep` | `number` | No | `-` | Maximum step size for tick generation. Prevents the step from being larger than this value. |
-| `tickMinStep` | `number` | No | `1` | Minimum step size for tick generation. Prevents the step from being smaller than this value. |
-| `ticks` | `number[] \| ((value: number) => boolean)` | No | `-` | Custom tick configuration for the axis. When provided, this overrides the requestedTickCount property.  - **Array**: Uses these exact values for tick positioning and labels. - **Function**: Filters based on the predicate function.   - For **x-axis**: Checks every data index (0, 1, 2, ..., dataLength-1)   - For **y-axis**: Filters d3-generated tick values |
-
-
 ## Examples
 
 ### Basic Example
@@ -619,4 +594,28 @@ If no data is set for the axis, it will receive the regular number value of the
 </CartesianChart>
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `GridLineComponent` | `LineComponent` | No | `DottedLine` | Component to render the grid lines. |
+| `className` | `string` | No | `-` | Custom className for the axis. |
+| `classNames` | `{ root?: string; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined` | No | `-` | Custom classNames for the axis. |
+| `height` | `number` | No | `32` | Height of the axis. This value is inclusive of the padding. |
+| `minTickLabelGap` | `number` | No | `4` | Minimum gap between tick labels. Labels will be hidden if they are closer than this gap. |
+| `position` | `top \| bottom` | No | `'bottom'` | The position of the axis relative to the charts drawing area. |
+| `requestedTickCount` | `number` | No | `5 (for y-axis)` | Requested number of ticks to display. This value is passed into d3 and may not be respected. |
+| `showGrid` | `boolean` | No | `-` | Whether to show grid lines at each tick position. |
+| `showLine` | `boolean` | No | `-` | Whether to show the axis line. |
+| `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
+| `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
+| `styles` | `{ root?: CSSProperties; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
+| `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
+| `tickLabelFormatter` | `((value: any) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
+| `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |
+| `tickMarkSize` | `number` | No | `4` | Size of the tick marks. |
+| `tickMaxStep` | `number` | No | `-` | Maximum step size for tick generation. Prevents the step from being larger than this value. |
+| `tickMinStep` | `number` | No | `1` | Minimum step size for tick generation. Prevents the step from being smaller than this value. |
+| `ticks` | `number[] \| ((value: number) => boolean)` | No | `-` | Custom tick configuration for the axis. When provided, this overrides the requestedTickCount property.  - **Array**: Uses these exact values for tick positioning and labels. - **Function**: Filters based on the predicate function.   - For **x-axis**: Checks every data index (0, 1, 2, ..., dataLength-1)   - For **y-axis**: Filters d3-generated tick values |
+
 

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

@@ -4,36 +4,10 @@ A vertical axis component for CartesianChart. Displays tick marks, labels, gridl
 
 ## Import
 
-```jsx
+```tsx
 import { YAxis } from '@coinbase/cds-mobile-visualization'
 ```
 
-## Props
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `GridLineComponent` | `LineComponent` | No | `DottedLine` | Component to render the grid lines. |
-| `axisId` | `string` | No | `-` | The ID of the axis to render. Defaults to defaultAxisId if not specified. |
-| `className` | `string` | No | `-` | Custom className for the axis. |
-| `classNames` | `{ root?: string; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined` | No | `-` | Custom classNames for the axis. |
-| `minTickLabelGap` | `number` | No | `4` | Minimum gap between tick labels. Labels will be hidden if they are closer than this gap. |
-| `position` | `left \| right` | No | `'right'` | The position of the axis relative to the charts drawing area. |
-| `requestedTickCount` | `number` | No | `5 (for y-axis)` | Requested number of ticks to display. This value is passed into d3 and may not be respected. |
-| `showGrid` | `boolean` | No | `-` | Whether to show grid lines at each tick position. |
-| `showLine` | `boolean` | No | `-` | Whether to show the axis line. |
-| `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
-| `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
-| `styles` | `{ root?: CSSProperties; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
-| `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
-| `tickLabelFormatter` | `((value: any) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
-| `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |
-| `tickMarkSize` | `number` | No | `4` | Size of the tick marks. |
-| `tickMaxStep` | `number` | No | `-` | Maximum step size for tick generation. Prevents the step from being larger than this value. |
-| `tickMinStep` | `number` | No | `1` | Minimum step size for tick generation. Prevents the step from being smaller than this value. |
-| `ticks` | `number[] \| ((value: number) => boolean)` | No | `-` | Custom tick configuration for the axis. When provided, this overrides the requestedTickCount property.  - **Array**: Uses these exact values for tick positioning and labels. - **Function**: Filters based on the predicate function.   - For **x-axis**: Checks every data index (0, 1, 2, ..., dataLength-1)   - For **y-axis**: Filters d3-generated tick values |
-| `width` | `number` | No | `44` | Width of the axis. This value is inclusive of the padding. |
-
-
 ## Examples
 
 ### Basic Example
@@ -565,4 +539,29 @@ function MultipleYAxesExample() {
 }
 ```
 
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `GridLineComponent` | `LineComponent` | No | `DottedLine` | Component to render the grid lines. |
+| `axisId` | `string` | No | `-` | The ID of the axis to render. Defaults to defaultAxisId if not specified. |
+| `className` | `string` | No | `-` | Custom className for the axis. |
+| `classNames` | `{ root?: string; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined` | No | `-` | Custom classNames for the axis. |
+| `minTickLabelGap` | `number` | No | `4` | Minimum gap between tick labels. Labels will be hidden if they are closer than this gap. |
+| `position` | `left \| right` | No | `'right'` | The position of the axis relative to the charts drawing area. |
+| `requestedTickCount` | `number` | No | `5 (for y-axis)` | Requested number of ticks to display. This value is passed into d3 and may not be respected. |
+| `showGrid` | `boolean` | No | `-` | Whether to show grid lines at each tick position. |
+| `showLine` | `boolean` | No | `-` | Whether to show the axis line. |
+| `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
+| `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
+| `styles` | `{ root?: CSSProperties; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
+| `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
+| `tickLabelFormatter` | `((value: any) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
+| `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |
+| `tickMarkSize` | `number` | No | `4` | Size of the tick marks. |
+| `tickMaxStep` | `number` | No | `-` | Maximum step size for tick generation. Prevents the step from being larger than this value. |
+| `tickMinStep` | `number` | No | `1` | Minimum step size for tick generation. Prevents the step from being smaller than this value. |
+| `ticks` | `number[] \| ((value: number) => boolean)` | No | `-` | Custom tick configuration for the axis. When provided, this overrides the requestedTickCount property.  - **Array**: Uses these exact values for tick positioning and labels. - **Function**: Filters based on the predicate function.   - For **x-axis**: Checks every data index (0, 1, 2, ..., dataLength-1)   - For **y-axis**: Filters d3-generated tick values |
+| `width` | `number` | No | `44` | Width of the axis. This value is inclusive of the padding. |
+
 

package/mcp-docs/mobile/getting-started/{mcp-server.txt → ai-overview.txt}

@@ -1,41 +1,30 @@
 ---
-id: mcp-server
-title: MCP Server
+id: ai-overview
+title: AI Overview
 hide_title: true
 ---
 
+import { VStack } from '@coinbase/cds-web/layout';
 import { MDXSection } from '@site/src/components/page/MDXSection';
 import { MDXArticle } from '@site/src/components/page/MDXArticle';
 import { ContentHeader } from '@site/src/components/page/ContentHeader';
 
+<VStack gap={5}>
 <ContentHeader
-  title="MCP Server"
-  description="CDS includes an MCP Server that is automatically updated with each new version of our libraries."
+  title="AI Overview"
+  description="Use AI as your CDS development partner to build consistent, accessible user interfaces across web and mobile platforms."
 />
 
 <MDXSection>
 <MDXArticle>
-## What is it?
 
-The CDS MCP Server provides CDS context to LLMs, allowing AI models to understand and work with CDS APIs and components.
+## MCP Server
 
-From [modelcontextprotocol.io](https://modelcontextprotocol.io/docs/getting-started/intro):
-
-> _MCP is an open protocol that standardizes how applications provide context to large language models (LLMs). MCP provides a standardized way to connect AI models to different data sources and tools. MCP enables you build agents and complex workflows on top of LLMs and connects your models with the world._
-
-</MDXArticle>
-</MDXSection>
+The CDS MCP Server provides direct CDS context to LLMs, allowing AI models to understand and work with CDS APIs and components.
 
-<MDXSection>
-<MDXArticle>
-## Basic installation
-
-The CDS MCP server is published in the `@coinbase/cds-mcp-server` package.
-
-This package is automatically included as a dependency of the CDS libraries, ensuring the CDS library and CDS MCP Server versions match. You do not need to install it separately if you are using the CDS libraries.
+From [modelcontextprotocol.io](https://modelcontextprotocol.io/docs/getting-started/intro):
 
-</MDXArticle>
-<MDXArticle>
+> _MCP is an open protocol that standardizes how applications provide context to large language models (LLMs). MCP provides a standardized way to connect AI models to different data sources and tools._
 
 ### First time setup
 
@@ -50,45 +39,70 @@ Make sure to enable the MCP server after installation.<br />
 See the [Cursor docs here](https://cursor.com/docs/context/mcp#using-mcp-in-chat) and the [Claude Code docs here](https://docs.claude.com/en/docs/claude-code/mcp#managing-your-servers) for more information.
 :::
 
-</MDXArticle>
-<MDXArticle>
-
 ### Using the MCP server
 
 Once the CDS MCP Server is enabled in your agent, the agent will automatically be able to use the CDS MCP tools to interact with the CDS APIs and components.
 
 Try asking a question like "How can I add an icon to a CDS Button?" or "How can I customize the CDS Stepper component behavior?"
 
-</MDXArticle>
-</MDXSection>
-
-<MDXSection>
-<MDXArticle>
-## Advanced installation
+### Advanced installation
 
-To install the MCP server separately as a standalone package and add it as a dependency to your project, run the following command:
+To install the MCP server separately as a standalone package and add it as a dependency to your project:
 
 ```bash
 npm install @coinbase/cds-mcp-server
 ```
 
-Alternatively, if you are using Yarn:
+Or with Yarn:
 
 ```bash
 yarn add @coinbase/cds-mcp-server
 ```
 
 :::tip
-Avoid installing mismatched versions of the CDS libraries and the CDS MCP Server.
+Avoid installing mismatched versions of the CDS libraries and the CDS MCP Server. The MCP server is automatically included as a dependency of the CDS libraries.
 :::
 
-### Executing with npx directly
+</MDXArticle>
+</MDXSection>
 
-You can also execute the MCP server with npx directly, but it will not have the associated CDS agent rules installed.
+<MDXSection>
+<MDXArticle>
+
+## Documentation
+
+Documentation pages include "View as markdown" and "Copy page" buttons in a markdown like format.
+This is useful when pasting documentation into ChatGPT, Claude, or Perplexity for help with implementation.
+
+### Documentation indexes
+
+CDS also provides a comprehensive index of documentation in markdown format per platform:
+
+**Web:**
 
-```bash
-npx @coinbase/cds-mcp-server
 ```
+https://cds.coinbase.com/llms/web/routes.txt
+```
+
+**Mobile:**
+
+```
+https://cds.coinbase.com/llms/mobile/routes.txt
+```
+
+Each routes file contains links to all component documentation, React hooks, getting started guides, and brief descriptions for each item.
+
+#### Adding indexes to Cursor
+
+You can add these indexes to Cursor for searchable access to the entire CDS documentation library:
+
+1. Open Cursor Settings
+2. Navigate to "Indexing & Docs"
+3. Add the docs URL for your platform (web or mobile) using the routes links above
+4. AI will automatically fetch relevant docs when you reference components
+
+Other AI IDEs and assistants can be given these indexes as needed or added to their rule files.
 
 </MDXArticle>
 </MDXSection>
+</VStack>

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

@@ -0,0 +1,57 @@
+# installation
+
+This guide will help you get started with installing CDS in your React Native project. Follow the instructions below to set up CDS and start building with our cross-platform components.
+
+### Installation
+
+To install the CDS library for React Native applications, run the following command:
+
+```bash
+npm install @coinbase/cds-mobile
+```
+
+Alternatively, if you are using Yarn:
+
+```bash
+yarn add @coinbase/cds-mobile
+```
+
+:::tip
+For React Native projects, ensure you have set up your environment for React Native development. Refer to the [React Native Environment Setup Guide](https://reactnative.dev/docs/environment-setup) if needed.
+:::
+
+### Getting started
+#### 1. Render a ThemeProvider
+
+Render a ThemeProvider at the root of your application, and pass the `theme` and `activeColorScheme`.
+
+```tsx
+import { ThemeProvider } from '@coinbase/cds-mobile';
+import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme';
+import App from './App';
+
+const Index = () => (
+  <ThemeProvider theme={defaultTheme} activeColorScheme="light">
+    <App />
+  </ThemeProvider>
+);
+
+export default Index;
+```
+
+#### 2. Verify the installation
+
+Try importing and rendering a simple CDS component.
+
+```tsx
+import { Button } from '@coinbase/cds-mobile/buttons';
+
+const Test = () => <Button>Click Me</Button>;
+```
+
+### Next steps
+
+Learn how to customize CDS's appearance.
+
+[See the theming docs here &rarr;](/getting-started/theming)
+

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

@@ -4,11 +4,13 @@ title: Introduction
 hide_title: true
 ---
 
+import { VStack } from '@coinbase/cds-web/layout';
 import { MDXSection } from '@site/src/components/page/MDXSection';
 import { MDXArticle } from '@site/src/components/page/MDXArticle';
 import { ContentHeader } from '@site/src/components/page/ContentHeader';
 import { GettingStartedBanner } from '@site/src/components/page/ComponentBanner/GettingStartedBanner';
 
+<VStack gap={5}>
 <ContentHeader
   title="Introduction"
   description="Coinbase Design System is a cross-platform component library for React and React Native. CDS has high adoption in every product at Coinbase, accelerating development and ensuring a consistent user experience across all platforms."
@@ -97,3 +99,4 @@ Learn how to install and use CDS.
 
 </MDXArticle>
 </MDXSection>
+</VStack>

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

@@ -4,12 +4,14 @@ title: Playground
 hide_title: true
 ---
 
+import { VStack } from '@coinbase/cds-web/layout';
 import { MDXSection } from '@site/src/components/page/MDXSection';
 import { MDXArticle } from '@site/src/components/page/MDXArticle';
 import { ContentHeader } from '@site/src/components/page/ContentHeader';
 import { PlaygroundBanner } from '@site/src/components/page/ComponentBanner/PlaygroundBanner';
 import { ShareablePlayground } from '@site/src/components/page/ShareablePlayground';
 
+<VStack gap={5}>
 <ContentHeader
   title="Playground"
   description="Live code playground for testing and sharing CDS components and code examples. All CDS components and hooks and all React exports are available to use in the playground without importing them. You must call render() to render your code."
@@ -23,3 +25,4 @@ import { ShareablePlayground } from '@site/src/components/page/ShareablePlaygrou
 
 </MDXArticle>
 </MDXSection>
+</VStack>

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

@@ -0,0 +1,84 @@
+# styling
+
+CDS includes powerful and flexible APIs for styling components. Easily access values from the theme, or go rogue with full customization.
+
+### `StyleProps` API
+
+Most components support the StyleProps API. StyleProps automatically have access to the values in the theme, and some StyleProps are limited to only the theme values.
+
+[See the full list of StyleProps here →](/components/layout/Box/?platform=mobile&tab=props)
+
+```jsx
+// ✅ The `bgNegative` token will automatically update with the theme!
+<Box background="bgNegative" width={100} />
+
+// ❌ Error: Type '"#0000ff"' is not assignable to type 'Color | undefined'.
+<Box background="#0000ff" width={100} />
+```
+
+:::tip
+The docs page of every component has a props table listing all the available props!
+:::
+
+:::note
+The StyleProps API uses the ThemeProvider Context under the hood to enable dynamic theming.
+:::
+
+### `style` and `styles` props
+
+Most components support the native `style` prop for inline styles.
+
+```jsx
+<Box style={{ backgroundColor: '#0000ff' }} />
+```
+
+Some complex components support passing inline styles to subcomponents with the `styles` prop.
+
+```jsx
+<ProgressCircle
+  styles={{
+    circle: {
+      stroke: 'transparent',
+    },
+    progress: {
+      strokeLinecap: 'square',
+    },
+  }}
+  color="fgPositive"
+  progress={0.75}
+  size={100}
+/>
+```
+
+Styles are combined using React Native's style arrays, and are added in order of specificity.
+
+```jsx
+<PageHeader style={{ backgroundColor: 'red' }} styles={{ root: { backgroundColor: 'blue' } }} />
+```
+
+In the example above, `backgroundColor` will be blue.
+
+:::tip
+We will continue to add the `styles` prop to more components over time. Please feel free to request specific components that you think would benefit from this API.
+:::
+
+### Component specific props
+
+Many components have their own specific props that can affect styling.
+
+```jsx
+<Button compact variant="primary">
+  Click me
+</Button>
+```
+
+### Combining techniques
+
+Mix and match these styling techniques for complete customization!
+
+```jsx
+<Button variant="primary" borderColor="accentBoldPurple" style={{ fontFamily: 'Times' }}>
+  Click me
+</Button>
+```
+