@coinbase/cds-mcp-server 8.52.0 → 8.52.1

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

@@ -265,7 +265,9 @@ function SeriesStacks() {
 
 ### Axes
 
-You can configure your x and y axes with the `xAxis` and `yAxis` props. `xAxis` accepts an object while `yAxis` accepts an object or array.
+You can configure your x and y axes with the `xAxis` and `yAxis` props. `xAxis` accepts an object or array, while `yAxis` accepts an object or array.
+
+When `layout="horizontal"`, you can define multiple x-axes (for multiple value scales) but only one y-axis.
 
 ```jsx
 <CartesianChart
@@ -1100,6 +1102,7 @@ function TradingTrends() {
 | `inset` | `number \| Partial<ChartInset>` | No | `-` | Inset around the entire chart (outside the axes). |
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
+| `layout` | `horizontal \| vertical` | No | `'vertical'` | Chart layout - describes the direction bars/areas grow. - vertical (default): Bars grow vertically. X is category axis, Y is value axis. - horizontal: Bars grow horizontally. Y is category axis, X is value axis. |
 | `left` | `string \| number` | No | `-` | - |
 | `legend` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
 | `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
@@ -1155,8 +1158,8 @@ function TradingTrends() {
 | `transform` | `string \| (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleX: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
 | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
 | `width` | `string \| number` | No | `-` | - |
-| `xAxis` | `Partial<Omit<AxisConfigProps, id>>` | No | `-` | Configuration for x-axis. |
-| `yAxis` | `Partial<AxisConfigProps> \| Partial<AxisConfigProps>[]` | No | `-` | Configuration for y-axis(es). Can be a single config or array of configs. |
+| `xAxis` | `Partial<CartesianAxisConfigProps> \| Partial<CartesianAxisConfigProps>[]` | No | `-` | Configuration for x-axis(es). Can be a single config or array of configs. |
+| `yAxis` | `Partial<Omit<CartesianAxisConfigProps, data>> \| Partial<Omit<CartesianAxisConfigProps, data>>[]` | No | `-` | Configuration for y-axis(es). Can be a single config or array of configs. |
 | `zIndex` | `number` | No | `-` | - |
 
 

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

@@ -1,6 +1,6 @@
 # Chip
 
-A compact, interactive content element.
+A compact content element for tags, filters, and selections.
 
 ## Import
 
@@ -10,60 +10,46 @@ import { Chip } from '@coinbase/cds-mobile/chips/Chip'
 
 ## Examples
 
-### Basic usage
+### Basics
+
+Render a Chip with text. Without `onPress`, it displays as a static pill. With `onPress`, it becomes a pressable element. Use `disabled` to prevent interaction on an otherwise interactive chip.
 
 ```tsx
 function Example() {
   return (
-    <HStack gap={2}>
+    <HStack gap={2} flexWrap="wrap">
       <Chip>Basic Chip</Chip>
-      <Chip disabled>Disabled Chip</Chip>
       <Chip onPress={() => alert('Pressed!')}>Interactive Chip</Chip>
+      <Chip disabled onPress={() => alert('Pressed!')}>
+        Disabled Chip
+      </Chip>
     </HStack>
   );
 }
 ```
 
-### Variants
-
-```tsx
-function Example() {
-  return (
-    <VStack gap={2}>
-      <HStack gap={2}>
-        <Chip compact>Compact</Chip>
-        <Chip inverted>Inverted</Chip>
-        <Chip maxWidth={100} numberOfLines={1}>
-          Long text that should truncate nicely
-        </Chip>
-      </HStack>
-    </VStack>
-  );
-}
-```
-
-### With Icons and Images
+### Icons and Images
 
 ```tsx
 function Example() {
   return (
     <VStack gap={2}>
-      <HStack gap={2}>
+      <HStack gap={2} flexWrap="wrap">
         <Chip start={<Icon name="star" />}>With Start Icon</Chip>
-        <Chip end={<Icon name="chevronDown" />}>With End Icon</Chip>
-        <Chip start={<Icon name="star" />} end={<Icon name="chevronDown" />}>
+        <Chip end={<Icon name="caretDown" />}>With End Icon</Chip>
+        <Chip start={<Icon name="star" />} end={<Icon name="caretDown" />}>
           Both Icons
         </Chip>
       </HStack>
-      <HStack gap={2}>
+      <HStack gap={2} flexWrap="wrap">
         <Chip
-          start={<RemoteImage source={assets.btc.imageUrl} width={16} height={16} />}
+          start={<RemoteImage source={assets.btc.imageUrl} width={24} height={24} shape="circle" />}
           onPress={() => alert('BTC selected')}
         >
           BTC
         </Chip>
         <Chip
-          start={<RemoteImage source={assets.eth.imageUrl} width={16} height={16} />}
+          start={<RemoteImage source={assets.eth.imageUrl} width={24} height={24} shape="circle" />}
           onPress={() => alert('ETH selected')}
         >
           ETH
@@ -74,6 +60,65 @@ function Example() {
 }
 ```
 
+### Styling
+
+#### Color
+
+Use `invertColorScheme` to invert foreground and background for emphasis.
+
+```tsx
+function Example() {
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      <Chip>Default</Chip>
+      <Chip invertColorScheme>Inverted</Chip>
+    </HStack>
+  );
+}
+```
+
+#### Compact
+
+Use `compact` for smaller chips with reduced padding.
+
+```tsx
+function Example() {
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      <Chip>Default</Chip>
+      <Chip compact>Compact</Chip>
+    </HStack>
+  );
+}
+```
+
+### Accessibility
+
+When using `onPress`, provide an `accessibilityLabel` for screen readers, especially when the label text alone is ambiguous or when the chip has non-text content.
+
+```tsx
+function Example() {
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      <Chip
+        accessibilityLabel="Select Bitcoin"
+        onPress={() => alert('BTC')}
+        start={<RemoteImage source={assets.btc.imageUrl} width={24} height={24} shape="circle" />}
+      >
+        BTC
+      </Chip>
+      <Chip
+        accessibilityLabel="Filter by category"
+        end={<Icon name="caretDown" />}
+        onPress={() => alert('Filter')}
+      >
+        Category
+      </Chip>
+    </HStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |

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

@@ -33,6 +33,45 @@ The only prop required is `series`, which takes an array of series objects. Each
 />
 ```
 
+### Layout
+
+Lines can be rendered horizontally or vertically by setting the `layout` prop.
+
+```jsx
+function HorizontalLine() {
+  const dataset = [
+    { month: 'Jan', seoul: 21 },
+    { month: 'Feb', seoul: 28 },
+    { month: 'Mar', seoul: 41 },
+    { month: 'Apr', seoul: 73 },
+    { month: 'May', seoul: 99 },
+    { month: 'June', seoul: 144 },
+    { month: 'July', seoul: 319 },
+    { month: 'Aug', seoul: 249 },
+    { month: 'Sept', seoul: 131 },
+    { month: 'Oct', seoul: 55 },
+    { month: 'Nov', seoul: 48 },
+    { month: 'Dec', seoul: 25 },
+  ];
+
+  return (
+    <LineChart
+      height={400}
+      layout="horizontal"
+      series={[
+        { id: 'seoul', data: dataset.map((d) => d.seoul), color: 'var(--color-accentBoldBlue)' },
+      ]}
+      showXAxis
+      showYAxis
+      xAxis={{ label: 'rainfall (mm)' }}
+      yAxis={{
+        data: dataset.map((d) => d.month),
+      }}
+    />
+  );
+}
+```
+
 LineChart also supports multiple lines, interaction, and axes.
 Other props, such as `areaType` can be applied to the chart as a whole or per series.
 
@@ -557,140 +596,20 @@ By default, charts will not track gestures that go outside of the chart bounds.
 You can configure chart transitions using `transitions` on Line (or LineChart) and `transitions` on [Scrubber](/components/charts/Scrubber). The `transitions` prop accepts an object with `enter` (the reveal animation) and `update` (data change animation) keys. Set either to `null` to disable that animation phase. You can also disable animations by setting `animate` on LineChart to `false`.
 
 ```tsx
-function Transitions() {
-  const theme = useTheme();
-  const dataCount = 20;
-  const maxDataOffset = 15000;
-  const minStepOffset = 2500;
-  const maxStepOffset = 10000;
-  const domainLimit = 20000;
-  const updateInterval = 500;
-
-  const myTransitionConfig: Transition = { type: 'spring', stiffness: 700, damping: 20 };
-  const negativeColor = `rgb(${theme.spectrum.gray15})`;
-  const positiveColor = theme.color.fgPositive;
-
-  function generateNextValue(previousValue: number) {
-    const range = maxStepOffset - minStepOffset;
-    const offset = Math.random() * range + minStepOffset;
-
-    let direction;
-    if (previousValue >= maxDataOffset) {
-      direction = -1;
-    } else if (previousValue <= -maxDataOffset) {
-      direction = 1;
-    } else {
-      direction = Math.random() < 0.5 ? -1 : 1;
-    }
-
-    let newValue = previousValue + offset * direction;
-    newValue = Math.max(-maxDataOffset, Math.min(maxDataOffset, newValue));
-    return newValue;
-  }
-
-  function generateInitialData() {
-    const data = [];
-
-    let previousValue = Math.random() * 2 * maxDataOffset - maxDataOffset;
-    data.push(previousValue);
-
-    for (let i = 1; i < dataCount; i++) {
-      const newValue = generateNextValue(previousValue);
-      data.push(newValue);
-      previousValue = newValue;
-    }
-
-    return data;
-  }
-
-  const MyGradient = memo((props: DottedAreaProps) => {
-    const areaGradient = {
-      stops: ({ min, max }: AxisBounds) => [
-        { offset: min, color: negativeColor, opacity: 1 },
-        { offset: 0, color: negativeColor, opacity: 0 },
-        { offset: 0, color: positiveColor, opacity: 0 },
-        { offset: max, color: positiveColor, opacity: 1 },
-      ],
-    };
-
-    return <DottedArea {...props} gradient={areaGradient} />;
-  });
-
-  function CustomTransitionsChart() {
-    const [data, setData] = useState(generateInitialData);
-
-    useEffect(() => {
-      const intervalId = setInterval(() => {
-        setData((currentData) => {
-          const lastValue = currentData[currentData.length - 1] ?? 0;
-          const newValue = generateNextValue(lastValue);
-
-          return [...currentData.slice(1), newValue];
-        });
-      }, updateInterval);
-
-      return () => clearInterval(intervalId);
-    }, []);
-
-    const tickLabelFormatter = useCallback(
-      (value: number) =>
-        new Intl.NumberFormat('en-US', {
-          style: 'currency',
-          currency: 'USD',
-          maximumFractionDigits: 0,
-        }).format(value),
-      [],
-    );
-
-    const valueAtIndexFormatter = useCallback(
-      (dataIndex: number) =>
-        new Intl.NumberFormat('en-US', {
-          style: 'currency',
-          currency: 'USD',
-        }).format(data[dataIndex]),
-      [data],
-    );
-
-    const lineGradient = {
-      stops: [
-        { offset: 0, color: negativeColor },
-        { offset: 0, color: positiveColor },
-      ],
-    };
+<Line
+  {...lineProps}
+  transitions={{ update: { type: 'spring', stiffness: 700, damping: 20 } }}
+/>
+<Scrubber
+  {...scrubberProps}
+  transitions={{ update: { type: 'spring', stiffness: 700, damping: 20 } }}
+/>
+```
 
-    return (
-      <CartesianChart
-        enableScrubbing
-        height={200}
-        inset={{ top: 32, bottom: 32, left: 16, right: 16 }}
-        series={[
-          {
-            id: 'prices',
-            data: data,
-            gradient: lineGradient,
-          },
-        ]}
-        yAxis={{ domain: { min: -domainLimit, max: domainLimit } }}
-      >
-        <YAxis showGrid requestedTickCount={2} tickLabelFormatter={tickLabelFormatter} />
-        <Line
-          showArea
-          AreaComponent={MyGradient}
-          seriesId="prices"
-          strokeWidth={3}
-          transitions={{ update: myTransitionConfig }}
-        />
-        <Scrubber
-          hideOverlay
-          label={valueAtIndexFormatter}
-          transitions={{ update: myTransitionConfig }}
-        />
-      </CartesianChart>
-    );
-  }
+Also, you can toggle animations by setting `animate` to `true` or `false`.
 
-  return <CustomTransitionsChart />;
-}
+```tsx
+<LineChart {...props} animate={false} />
 ```
 
 ### Accessibility
@@ -1963,6 +1882,7 @@ function ForecastAssetPrice() {
 | `inset` | `number \| Partial<ChartInset>` | No | `-` | Inset around the entire chart (outside the axes). |
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
+| `layout` | `horizontal \| vertical` | No | `'vertical'` | Chart layout - describes the direction bars/areas grow. - vertical (default): Bars grow vertically. X is category axis, Y is value axis. - horizontal: Bars grow horizontally. Y is category axis, X is value axis. |
 | `left` | `string \| number` | No | `-` | - |
 | `legend` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
 | `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
@@ -2027,8 +1947,8 @@ function ForecastAssetPrice() {
 | `type` | `solid \| dotted` | No | `'solid'` | The type of line to render. |
 | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
 | `width` | `string \| number` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
-| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `xAxis` | `(Partial<CartesianAxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<CartesianAxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
 | `zIndex` | `number` | No | `-` | - |
 
 

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

@@ -305,6 +305,7 @@ function ScatterplotWithCustomLabels() {
 | `strokeWidth` | `number` | No | `2` | Outer stroke width of the point. Set to  0 to remove the stroke. |
 | `transition` | `{ type: timing; } & TimingConfig & { delay?: number \| undefined; } \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: number \| undefined; damping?: number \| undefined; duration?: undefined; dampingRatio?: undefined; clamp?: undefined; } & { delay?: number \| undefined; } \| { type: spring; } & { stiffness?: number \| undefined; overshootClamping?: boolean \| undefined; restDisplacementThreshold?: number \| undefined; restSpeedThreshold?: number \| undefined; velocity?: number \| undefined; reduceMotion?: ReduceMotion \| undefined; } & { mass?: undefined; damping?: undefined; duration?: number \| undefined; dampingRatio?: number \| undefined; clamp?: { min?: number \| undefined; max?: number \| undefined; } \| undefined; } & { delay?: number \| undefined; }` | No | `-` | Transition for updates. |
 | `transitions` | `{ enter?: Transition \| null; update?: Transition \| null \| undefined; } \| undefined` | No | `-` | Transition configuration for enter and update animations. |
+| `xAxisId` | `string` | No | `first x-axis defined in chart props.` | Optional X-axis id to specify which axis to plot along. |
 | `yAxisId` | `string` | No | `first y-axis defined in chart props.` | Optional Y-axis id to specify which axis to plot along. |
 
 

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

@@ -35,6 +35,7 @@ Scrubber can be used to provide horizontal interaction with a chart. As you drag
 ```
 
 All series will be scrubbed by default. You can set `seriesIds` to show only specific series.
+In `layout="horizontal"`, beacon labels are intentionally hidden to avoid overlap with scrubber beacons.
 
 ```jsx
 <LineChart
@@ -1002,7 +1003,7 @@ function MatchupBeaconLabels() {
 | `beaconLabelPreferredSide` | `left \| right` | No | `'right'` | Preferred side for beacon labels. |
 | `beaconStroke` | `string` | No | `theme.color.bg` | Stroke color of the scrubber beacon circle. |
 | `beaconTransitions` | `{ enter?: Transition \| null; update?: Transition \| null \| undefined; pulse?: Transition \| undefined; pulseRepeatDelay?: number \| undefined; } \| undefined` | No | `-` | Transition configuration for the scrubber beacon. |
-| `hideBeaconLabels` | `boolean` | No | `-` | Hides the beacon labels while keeping the line label visible (if provided). |
+| `hideBeaconLabels` | `boolean` | No | `true in horizontal layout, false in vertical layout.` | Hides the beacon labels while keeping the line label visible (if provided). |
 | `hideLine` | `boolean` | No | `-` | Hides the scrubber line. |
 | `hideOverlay` | `boolean` | No | `-` | Hides the overlay rect which obscures data beyond the scrubber position. |
 | `idlePulse` | `boolean` | No | `-` | Pulse the beacons while at rest. |

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

@@ -34,6 +34,58 @@ The XAxis component provides a horizontal axis for charts with automatic tick ge
 </CartesianChart>
 ```
 
+### Multiple X Axes (Horizontal Layout)
+
+When `layout="horizontal"`, you can configure multiple x-axes and bind each series to an axis with `xAxisId`.
+Use `XAxis`'s `axisId` prop to render each axis configuration.
+
+```jsx
+<CartesianChart
+  enableScrubbing
+  height={300}
+  layout="horizontal"
+  series={[
+    {
+      id: 'temperature',
+      label: 'Temperature',
+      data: [72, 68, 74, 70],
+      color: 'var(--color-accentBoldBlue)',
+      xAxisId: 'temperature-axis',
+    },
+    {
+      id: 'volume',
+      label: 'Volume',
+      data: [1200, 900, 1500, 1100],
+      color: 'var(--color-accentBoldOrange)',
+      xAxisId: 'volume-axis',
+    },
+  ]}
+  xAxis={[
+    {
+      id: 'temperature-axis',
+      domain: { min: 60, max: 80 },
+      domainLimit: 'strict',
+    },
+    {
+      id: 'volume-axis',
+      domain: { min: 0, max: 2000 },
+      domainLimit: 'strict',
+    },
+  ]}
+  yAxis={{
+    scaleType: 'band',
+    data: ['Mon', 'Tue', 'Wed', 'Thu'],
+  }}
+>
+  <YAxis showLine showTickMarks />
+  <XAxis axisId="temperature-axis" label="Temp (F)" position="bottom" showLine />
+  <XAxis axisId="volume-axis" label="Volume" position="top" showLine />
+  <Line seriesId="temperature" />
+  <Line seriesId="volume" />
+  <Scrubber />
+</CartesianChart>
+```
+
 ### Axis Config
 
 Properties related to the scale of an axis are set on the Chart component. This includes `scaleType`, `domain`, `domainLimit`, `range`, `data`, and `categoryPadding`.
@@ -733,6 +785,7 @@ function CustomTickLabelExample() {
 | `LineComponent` | `LineComponent` | No | `SolidLine` | Component to render the axis line. |
 | `TickLabelComponent` | `AxisTickLabelComponent` | No | `DefaultAxisTickLabel` | Component to render tick labels. Allows for custom styling and formatting that works cross-platform. |
 | `TickMarkLineComponent` | `LineComponent` | No | `SolidLine` | Component to render the tick marks. |
+| `axisId` | `string` | No | `-` | The ID of the axis to render. Defaults to defaultAxisId if not specified. |
 | `bandGridLinePlacement` | `end \| start \| middle \| edges` | No | `'edges'` | Placement of grid lines relative to each band. Options: start, middle, end, edges |
 | `bandTickMarkPlacement` | `end \| start \| middle \| edges` | No | `'middle'` | Placement of tick marks relative to each band. Options: start, middle, end, edges |
 | `height` | `number` | No | `32 when no label is provided, 52 when a label is provided` | Height of the axis. This value is inclusive of the padding. |
@@ -740,7 +793,7 @@ function CustomTickLabelExample() {
 | `labelGap` | `number` | No | `4` | Gap between the tick labels and the axis label. |
 | `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. |
+| `requestedTickCount` | `number` | No | `5 for value axes by layout: - X axis when chart layout is horizontal - Y axis when chart layout is vertical` | 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. |

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

@@ -158,6 +158,8 @@ You can set the position of an axis to `left` or `right` (default).
 </CartesianChart>
 ```
 
+When `layout="horizontal"`, CartesianChart supports only one y-axis configuration.
+
 #### Grid
 
 You can show grid lines at each tick position using the `showGrid` prop.
@@ -611,7 +613,7 @@ function MultipleYAxesExample() {
 | `labelGap` | `number` | No | `4` | Gap between the tick labels and the axis label. |
 | `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. |
+| `requestedTickCount` | `number` | No | `5 for value axes by layout: - X axis when chart layout is horizontal - Y axis when chart layout is vertical` | 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. |

package/mcp-docs/mobile/routes.txt

@@ -95,7 +95,7 @@
 - [IconButton](mobile/components/IconButton.txt): A Button with an Icon for content.
 - [ControlGroup](mobile/components/ControlGroup.txt): A layout component that arranges and manages a group of related controls, such as radio buttons, switches, or checkboxes.
 - [Combobox](mobile/components/Combobox.txt): A flexible combobox component for both single and multi-selection, built for mobile applications with comprehensive accessibility support.
-- [Chip](mobile/components/Chip.txt): A compact, interactive content element.
+- [Chip](mobile/components/Chip.txt): A compact content element for tags, filters, and selections.
 - [CheckboxGroup](mobile/components/CheckboxGroup.txt): CheckboxGroup is a control component that allows users to select multiple options from a set of choices. It manages the state and layout of multiple checkbox inputs as a cohesive group.
 - [CheckboxCell](mobile/components/CheckboxCell.txt): A selectable cell that pairs a checkbox with a title and description for multi-choice selections.
 - [Checkbox](mobile/components/Checkbox.txt): Checkbox is a type of control component that allows user to select one or more options from a set. They can also be used alone to switch between on and off.