@coinbase/cds-mcp-server 8.17.3 → 8.17.5

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

@@ -4,10 +4,146 @@ A chart component that displays data as filled areas beneath lines. Ideal for sh
 
 ## Import
 
-```jsx
+```tsx
 import { AreaChart } from '@coinbase/cds-web-visualization'
 ```
 
+## Examples
+
+AreaChart is a cartesian chart variant that allows for easy visualization of stacked data.
+
+### Basic Example
+
+```jsx live
+<AreaChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 2, 68, 20, 21, 58],
+    },
+  ]}
+  type="gradient"
+  showLines
+  curve="monotone"
+  showYAxis
+  yAxis={{
+    showGrid: true,
+    width: 32,
+  }}
+/>
+```
+
+### Simple
+
+```jsx live
+<AreaChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  inset={0}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 2, 68, 20, 21, 58],
+    },
+  ]}
+  type="gradient"
+  showLines
+  curve="monotone"
+/>
+```
+
+### Stacking
+
+You can use the `stacked` prop to stack all areas on top of each other. You can also use the `stackId` prop on a series to create different stack groups. See [CartesianChart](/components/graphs/CartesianChart/#series-stacks) for more details.
+
+```jsx live
+<AreaChart
+  showLines
+  stacked
+  curve="natural"
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  inset={0}
+  series={[
+    {
+      id: 'currentRewards',
+      data: [
+        100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260,
+        3700, 4170,
+      ],
+      color: 'var(--color-fg)',
+    },
+    {
+      id: 'potentialRewards',
+      data: [
+        150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160,
+        3520, 3900,
+      ],
+      color: 'var(--color-fgPositive)',
+      LineComponent: DottedLine,
+    },
+  ]}
+  AreaComponent={(props) => <DottedArea {...props} peakOpacity={0.4} baselineOpacity={0.4} />}
+  type="dotted"
+/>
+```
+
+### Negative Values
+
+When an area chart contains negative values, the baseline automatically adjusts to zero instead of the bottom of the chart. The area fills from the data line to the zero baseline, properly showing both positive and negative regions.
+
+```jsx live
+<AreaChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  inset={0}
+  series={[
+    {
+      id: 'pageViews',
+      data: [24, 13, -98, 39, 48, 38, 43],
+    },
+  ]}
+  AreaComponent={(props) => <SolidArea {...props} opacity={0.4} />}
+  showLines
+  showYAxis
+  yAxis={{
+    showGrid: true,
+  }}
+/>
+```
+
+### Area Styles
+
+You can have different area styles for each series.
+
+```jsx live
+<AreaChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  inset={0}
+  series={[
+    {
+      id: 'visitors',
+      data: [450, 520, 480, 600, 750, 680, 590],
+      label: 'Weekly Visitors',
+      color: '#fb4d3d',
+      type: 'dotted',
+    },
+    {
+      id: 'repeatVisitors',
+      data: [250, 200, 150, 140, 100, 80, 50],
+      label: 'Weekly Repeat Visitors',
+      color: '#16a34a',
+    },
+    {
+      id: 'signups',
+      data: [45, 62, 55, 250, 380, 400, 450],
+      label: 'Weekly Signups',
+      color: '#2563eb',
+      type: 'gradient',
+    },
+  ]}
+/>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -372,140 +508,3 @@ import { AreaChart } from '@coinbase/cds-web-visualization'
 | `zoomAndPan` | `string` | No | `-` | - |
 
 
-## Examples
-
-AreaChart is a cartesian chart variant that allows for easy visualization of stacked data.
-
-### Basic Example
-
-```jsx live
-<AreaChart
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
-  series={[
-    {
-      id: 'prices',
-      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 2, 68, 20, 21, 58],
-    },
-  ]}
-  type="gradient"
-  showLines
-  curve="monotone"
-  showYAxis
-  yAxis={{
-    showGrid: true,
-    width: 32,
-  }}
-/>
-```
-
-### Simple
-
-```jsx live
-<AreaChart
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  inset={0}
-  series={[
-    {
-      id: 'prices',
-      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 2, 68, 20, 21, 58],
-    },
-  ]}
-  type="gradient"
-  showLines
-  curve="monotone"
-/>
-```
-
-### Stacking
-
-You can use the `stacked` prop to stack all areas on top of each other. You can also use the `stackId` prop on a series to create different stack groups. See [CartesianChart](/components/graphs/CartesianChart/#series-stacks) for more details.
-
-```jsx live
-<AreaChart
-  showLines
-  stacked
-  curve="natural"
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  inset={0}
-  series={[
-    {
-      id: 'currentRewards',
-      data: [
-        100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260,
-        3700, 4170,
-      ],
-      color: 'var(--color-fg)',
-    },
-    {
-      id: 'potentialRewards',
-      data: [
-        150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160,
-        3520, 3900,
-      ],
-      color: 'var(--color-fgPositive)',
-      LineComponent: DottedLine,
-    },
-  ]}
-  AreaComponent={(props) => <DottedArea {...props} peakOpacity={0.4} baselineOpacity={0.4} />}
-  type="dotted"
-/>
-```
-
-### Negative Values
-
-When an area chart contains negative values, the baseline automatically adjusts to zero instead of the bottom of the chart. The area fills from the data line to the zero baseline, properly showing both positive and negative regions.
-
-```jsx live
-<AreaChart
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  inset={0}
-  series={[
-    {
-      id: 'pageViews',
-      data: [24, 13, -98, 39, 48, 38, 43],
-    },
-  ]}
-  AreaComponent={(props) => <SolidArea {...props} opacity={0.4} />}
-  showLines
-  showYAxis
-  yAxis={{
-    showGrid: true,
-  }}
-/>
-```
-
-### Area Styles
-
-You can have different area styles for each series.
-
-```jsx live
-<AreaChart
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  inset={0}
-  series={[
-    {
-      id: 'visitors',
-      data: [450, 520, 480, 600, 750, 680, 590],
-      label: 'Weekly Visitors',
-      color: '#fb4d3d',
-      type: 'dotted',
-    },
-    {
-      id: 'repeatVisitors',
-      data: [250, 200, 150, 140, 100, 80, 50],
-      label: 'Weekly Repeat Visitors',
-      color: '#16a34a',
-    },
-    {
-      id: 'signups',
-      data: [45, 62, 55, 250, 380, 400, 450],
-      label: 'Weekly Signups',
-      color: '#2563eb',
-      type: 'gradient',
-    },
-  ]}
-/>
-```
-
-

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

@@ -4,10 +4,100 @@ Avatar is a visual representation of a user, company, or entity.
 
 ## Import
 
-```jsx
+```tsx
 import { Avatar } from '@coinbase/cds-web/media/Avatar'
 ```
 
+## Examples
+
+### Basic Example
+
+```jsx live
+<VStack gap={2}>
+  <HStack gap={2} alignItems="center">
+    <Avatar src={assets.btc.imageUrl} />
+  </HStack>
+</VStack>
+```
+
+### Sizes
+
+Avatar comes in six different sizes. The default size is `l`.
+
+```jsx live
+<VStack gap={2}>
+  <HStack gap={2} alignItems="center">
+    <Avatar src={assets.btc.imageUrl} size="s" />
+    <Avatar src={assets.btc.imageUrl} size="m" />
+    <Avatar src={assets.btc.imageUrl} size="l" />
+    <Avatar src={assets.btc.imageUrl} size="xl" />
+    <Avatar src={assets.btc.imageUrl} size="xxl" />
+    <Avatar src={assets.btc.imageUrl} size="xxxl" />
+  </HStack>
+</VStack>
+```
+
+### Shapes
+
+Avatar supports three different shapes: `circle`, `square`, and `hexagon`. The default shape is `circle`.
+
+```jsx live
+<HStack gap={2} alignItems="center">
+  <Avatar name="Alice" colorScheme="blue" size="xl" shape="circle" />
+  <Avatar name="Bob" colorScheme="purple" size="xl" shape="square" />
+  <Avatar name="Charlie" colorScheme="green" size="xl" shape="hexagon" />
+</HStack>
+```
+
+### Selected State
+
+Avatars can show a selected state with a border indicator.
+
+```jsx live
+<HStack gap={2}>
+  <Avatar name="Alice" colorScheme="blue" size="xl" />
+  <Avatar name="Alice" colorScheme="blue" size="xl" selected />
+  <Avatar name="Bob" colorScheme="purple" size="xl" shape="square" />
+  <Avatar name="Bob" colorScheme="purple" size="xl" shape="square" selected />
+</HStack>
+```
+
+### Fallback Image
+
+If you do not provide a src or if the provided src does not resolve, Avatar will surface a placeholder image.
+
+```jsx live
+<HStack gap={2} alignItems="center">
+  <Avatar />
+  <Avatar selected />
+</HStack>
+```
+
+### Fallback with Colors
+
+We've created a palette of identity colors using our CDS spectrum colors. When used as fallback, these colors will generate based on the provided name.
+
+```jsx live
+<VStack gap={2}>
+  <HStack gap={2} alignItems="center">
+    <Avatar name="Alice" colorScheme="blue" size="xl" />
+    <Avatar name="Bob" colorScheme="purple" size="xl" />
+    <Avatar name="Charlie" colorScheme="green" size="xl" />
+    <Avatar name="Diana" colorScheme="teal" size="xl" />
+    <Avatar name="Eve" colorScheme="pink" size="xl" />
+    <Avatar name="Frank" colorScheme="gray" size="xl" />
+  </HStack>
+  <HStack gap={2} alignItems="center">
+    <Avatar name="Alice" colorScheme="blue" size="xl" selected />
+    <Avatar name="Bob" colorScheme="purple" size="xl" selected />
+    <Avatar name="Charlie" colorScheme="green" size="xl" selected />
+    <Avatar name="Diana" colorScheme="teal" size="xl" selected />
+    <Avatar name="Eve" colorScheme="pink" size="xl" selected />
+    <Avatar name="Frank" colorScheme="gray" size="xl" selected />
+  </HStack>
+</VStack>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -119,94 +209,3 @@ import { Avatar } from '@coinbase/cds-web/media/Avatar'
 | `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
 
 
-## Examples
-
-### Basic Example
-
-```jsx live
-<VStack gap={2}>
-  <HStack gap={2} alignItems="center">
-    <Avatar src={assets.btc.imageUrl} />
-  </HStack>
-</VStack>
-```
-
-### Sizes
-
-Avatar comes in six different sizes. The default size is `l`.
-
-```jsx live
-<VStack gap={2}>
-  <HStack gap={2} alignItems="center">
-    <Avatar src={assets.btc.imageUrl} size="s" />
-    <Avatar src={assets.btc.imageUrl} size="m" />
-    <Avatar src={assets.btc.imageUrl} size="l" />
-    <Avatar src={assets.btc.imageUrl} size="xl" />
-    <Avatar src={assets.btc.imageUrl} size="xxl" />
-    <Avatar src={assets.btc.imageUrl} size="xxxl" />
-  </HStack>
-</VStack>
-```
-
-### Shapes
-
-Avatar supports three different shapes: `circle`, `square`, and `hexagon`. The default shape is `circle`.
-
-```jsx live
-<HStack gap={2} alignItems="center">
-  <Avatar name="Alice" colorScheme="blue" size="xl" shape="circle" />
-  <Avatar name="Bob" colorScheme="purple" size="xl" shape="square" />
-  <Avatar name="Charlie" colorScheme="green" size="xl" shape="hexagon" />
-</HStack>
-```
-
-### Selected State
-
-Avatars can show a selected state with a border indicator.
-
-```jsx live
-<HStack gap={2}>
-  <Avatar name="Alice" colorScheme="blue" size="xl" />
-  <Avatar name="Alice" colorScheme="blue" size="xl" selected />
-  <Avatar name="Bob" colorScheme="purple" size="xl" shape="square" />
-  <Avatar name="Bob" colorScheme="purple" size="xl" shape="square" selected />
-</HStack>
-```
-
-### Fallback Image
-
-If you do not provide a src or if the provided src does not resolve, Avatar will surface a placeholder image.
-
-```jsx live
-<HStack gap={2} alignItems="center">
-  <Avatar />
-  <Avatar selected />
-</HStack>
-```
-
-### Fallback with Colors
-
-We've created a palette of identity colors using our CDS spectrum colors. When used as fallback, these colors will generate based on the provided name.
-
-```jsx live
-<VStack gap={2}>
-  <HStack gap={2} alignItems="center">
-    <Avatar name="Alice" colorScheme="blue" size="xl" />
-    <Avatar name="Bob" colorScheme="purple" size="xl" />
-    <Avatar name="Charlie" colorScheme="green" size="xl" />
-    <Avatar name="Diana" colorScheme="teal" size="xl" />
-    <Avatar name="Eve" colorScheme="pink" size="xl" />
-    <Avatar name="Frank" colorScheme="gray" size="xl" />
-  </HStack>
-  <HStack gap={2} alignItems="center">
-    <Avatar name="Alice" colorScheme="blue" size="xl" selected />
-    <Avatar name="Bob" colorScheme="purple" size="xl" selected />
-    <Avatar name="Charlie" colorScheme="green" size="xl" selected />
-    <Avatar name="Diana" colorScheme="teal" size="xl" selected />
-    <Avatar name="Eve" colorScheme="pink" size="xl" selected />
-    <Avatar name="Frank" colorScheme="gray" size="xl" selected />
-  </HStack>
-</VStack>
-```
-
-