@coinbase/cds-mcp-server 8.17.2 → 8.17.4

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

@@ -0,0 +1,173 @@
+# Spacer
+
+Creates space between elements.
+
+## Import
+
+```tsx
+import { Spacer } from '@coinbase/cds-web/layout/Spacer'
+```
+
+## Examples
+
+### Vertical Spacer
+
+```tsx live
+<VStack>
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 1
+  </Box>
+  <Spacer vertical={2} />
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 2
+  </Box>
+  <Spacer vertical={4} />
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 3
+  </Box>
+  <Spacer vertical={6} />
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 4
+  </Box>
+</VStack>
+```
+
+### Horizontal Spacer
+
+```tsx live
+<HStack>
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 1
+  </Box>
+  <Spacer horizontal={2} />
+  <Box padding={2} background="bgAlternate" borderRadius="300">
+    Box 2
+  </Box>
+  <Spacer horizontal={4} display={{ base: 'none', tablet: 'block', desktop: 'block' }} />
+  <Box
+    padding={2}
+    background="bgAlternate"
+    borderRadius="300"
+    display={{ base: 'none', tablet: 'block', desktop: 'block' }}
+  >
+    Box 3
+  </Box>
+  <Spacer horizontal={6} display={{ base: 'none', tablet: 'block', desktop: 'block' }} />
+  <Box
+    padding={2}
+    background="bgAlternate"
+    borderRadius="300"
+    display={{ base: 'none', tablet: 'block', desktop: 'block' }}
+  >
+    Box 4
+  </Box>
+</HStack>
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
+| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `background` | `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 | `-` | - |
+| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderColor` | `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 | `-` | - |
+| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
+| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
+| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
+| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
+| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
+| `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 | `-` | - |
+| `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 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
+| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
+| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
+| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
+| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
+| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
+| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
+| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
+| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
+| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
+| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
+| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
+| `horizontal` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Space in the horizontal direction |
+| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
+| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
+| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
+| `maxHorizontal` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Max space in the horizontal direction |
+| `maxVertical` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Max space in the vertical direction |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
+| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
+| `minHorizontal` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Min space in the horizontal direction |
+| `minVertical` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Min space in the vertical direction |
+| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
+| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
+| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
+| `ref` | `any` | No | `-` | - |
+| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
+| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `style` | `CSSProperties` | No | `-` | - |
+| `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 | `-` | - |
+| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
+| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
+| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
+| `vertical` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Space in the vertical direction |
+| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
+| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
+| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+
+

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

@@ -0,0 +1,122 @@
+# Sparkline
+
+A small line chart component for displaying data trends.
+
+## Import
+
+```tsx
+import { Sparkline } from '@coinbase/cds-web-visualization'
+```
+
+## Examples
+
+### Basic Example
+
+The global warning banner is used to communicate important alerts or warnings to users across the entire platform, ensuring universal visibility and building trust.
+
+```jsx live
+function Example() {
+  const dimensions = { width: 64, height: 20 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  return (
+    <ListCell
+      media={<CellMedia type="image" source={assets.btc.imageUrl} title="BTC" />}
+      intermediary={<Sparkline {...dimensions} path={path} color={assets.btc.color} />}
+      title={assets.btc.name}
+      description={assets.btc.symbol}
+      detail={prices[0]}
+      subdetail="+4.55%"
+      variant="positive"
+      onClick={() => console.log('clicked')}
+    />
+  );
+}
+```
+
+### Dynamic path colors
+
+```jsx live
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((color) => (
+        <Sparkline key={color} {...dimensions} path={path} color={color} />
+      ))}
+    </VStack>
+  );
+}
+```
+
+### Dynamic background colors
+
+```jsx live
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((background) => (
+        <VStack key={background} dangerouslySetBackground={background}>
+          <Sparkline {...dimensions} path={path} background={background} color="auto" />
+        </VStack>
+      ))}
+    </VStack>
+  );
+}
+```
+
+### y axis scaling
+
+```jsx live
+function Example() {
+  const yAxisScalingFactor = 0.2;
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices, yAxisScalingFactor });
+  return (
+    <VStack gap={2}>
+      <TextLabel1 as="p">Scale {yAxisScalingFactor}</TextLabel1>
+      <Sparkline {...dimensions} path={path} color="auto" yAxisScalingFactor={yAxisScalingFactor} />
+    </VStack>
+  );
+}
+```
+
+### Sparkline fill
+
+```jsx live
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  const area = useSparklineArea({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((color) => (
+        <Sparkline key={color} {...dimensions} path={path} color={color}>
+          <SparklineArea area={area} />
+        </Sparkline>
+      ))}
+    </VStack>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `string` | Yes | `-` | The color of the Sparkline graphs line. Accepts any raw color value (hex, rgba, hsl, etc) or auto. Using auto dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like fgPrimary or CSS variables. |
+| `height` | `number` | Yes | `-` | Height of the Sparkline |
+| `width` | `number` | Yes | `-` | Width of the Sparkline |
+| `background` | `string` | No | `-` | - |
+| `children` | `null \| false \| ReactElement<SparklineAreaBaseProps, string \| JSXElementConstructor<any>> \| OptionalElement<SparklineAreaBaseProps>[]` | No | `-` | an optional SparklineArea that can be used to fill in the Sparkline |
+| `fillType` | `dotted \| gradient \| gradientDotted` | No | `'dotted'` | Type of fill to use for the area |
+| `key` | `Key \| null` | No | `-` | - |
+| `path` | `string` | No | `-` | Svg path as string. CDS offers a useSparklinePath which is useful to generate this string. This is accessible via import { useSparklinePath } from @coinbase/cds-common/visualizations/useSparklinePath;. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. |
+| `ref` | `((instance: SparklinePathRef) => void) \| RefObject<SparklinePathRef> \| null` | No | `-` | - |
+| `strokeType` | `solid \| gradient` | No | `'solid'` | Type of stroke to use for the line |
+| `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 |
+| `yAxisScalingFactor` | `number` | No | `-` | Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. |
+
+

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

@@ -0,0 +1,106 @@
+# SparklineGradient
+
+A small line chart component with gradient fill below the line.
+
+## Import
+
+```tsx
+import { SparklineGradient } from '@coinbase/cds-web-visualization'
+```
+
+## Examples
+
+Expands upon the [Sparkline](/components/graphs/Sparkline) component to provide a gradient stroke. However, for dark mode we disable the gradient effect. These are typically used at a larger size for portfolio charts or on detail Asset pages.
+
+### Dynamic path colors
+
+```jsx live
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((color) => (
+        <SparklineGradient key={color} {...dimensions} path={path} color={color} />
+      ))}
+    </VStack>
+  );
+}
+```
+
+### Dynamic background colors
+
+```jsx live
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((background) => (
+        <VStack key={background} dangerouslySetBackground={background}>
+          <SparklineGradient {...dimensions} path={path} background={background} color="auto" />
+        </VStack>
+      ))}
+    </VStack>
+  );
+}
+```
+
+### y axis scaling
+
+```jsx live
+function Example() {
+  const yAxisScalingFactor = 0.2;
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices, yAxisScalingFactor });
+  return (
+    <VStack gap={2}>
+      <TextLabel1 as="p">Scale {yAxisScalingFactor}</TextLabel1>
+      <SparklineGradient
+        {...dimensions}
+        path={path}
+        color="auto"
+        yAxisScalingFactor={yAxisScalingFactor}
+      />
+    </VStack>
+  );
+}
+```
+
+### Sparkline fill
+
+```jsx live
+function Example() {
+  const dimensions = { width: 400, height: 200 };
+  const path = useSparklinePath({ ...dimensions, data: prices });
+  const area = useSparklineArea({ ...dimensions, data: prices });
+  return (
+    <VStack gap={2}>
+      {assetColors.map((color) => (
+        <SparklineGradient key={color} {...dimensions} path={path} color={color}>
+          <SparklineArea area={area} />
+        </SparklineGradient>
+      ))}
+    </VStack>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `string` | Yes | `-` | The color of the Sparkline graphs line. Accepts any raw color value (hex, rgba, hsl, etc) or auto. Using auto dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like fgPrimary or CSS variables. |
+| `height` | `number` | Yes | `-` | Height of the Sparkline |
+| `width` | `number` | Yes | `-` | Width of the Sparkline |
+| `background` | `string` | No | `-` | - |
+| `children` | `null \| false \| ReactElement<SparklineAreaBaseProps, string \| JSXElementConstructor<any>> \| OptionalElement<SparklineAreaBaseProps>[]` | No | `-` | an optional SparklineArea that can be used to fill in the Sparkline |
+| `fillType` | `dotted \| gradient \| gradientDotted` | No | `'dotted'` | Type of fill to use for the area |
+| `key` | `Key \| null` | No | `-` | - |
+| `path` | `string` | No | `-` | Svg path as string. CDS offers a useSparklinePath which is useful to generate this string. This is accessible via import { useSparklinePath } from @coinbase/cds-common/visualizations/useSparklinePath;. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. |
+| `ref` | `((instance: SparklinePathRef) => void) \| RefObject<SparklinePathRef> \| null` | No | `-` | - |
+| `strokeType` | `solid \| gradient` | No | `'solid'` | Type of stroke to use for the line |
+| `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 |
+| `yAxisScalingFactor` | `number` | No | `-` | Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. |
+
+

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

@@ -0,0 +1,153 @@
+# SparklineInteractive
+
+The SparklineInteractive is used to display a Sparkline that has multiple time periods
+
+## Import
+
+```tsx
+import { SparklineInteractive } from '@coinbase/cds-web-visualization'
+```
+
+## Examples
+
+### Default usage
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePrice data={sparklineInteractiveData} strokeColor="#F7931A" />
+</Box>
+```
+
+### Fill Type
+
+The fill will be added by default with a gradient style. You can set `fillType="dotted"` to get a dotted gradient fill.
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePrice
+    fill
+    data={sparklineInteractiveData}
+    fillType="dotted"
+    strokeColor="#F7931A"
+  />
+</Box>
+```
+
+### Compact
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePrice data={sparklineInteractiveData} compact strokeColor="#F7931A" />
+</Box>
+```
+
+### Hide period selector
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePrice
+    data={sparklineInteractiveData}
+    hidePeriodSelector
+    strokeColor="#F7931A"
+  />
+</Box>
+```
+
+### Scaling Factor
+
+The scaling factor is usually used when you want to show less variance in the chart. An example of this is a stable coin that doesn't change price by more than a few cents.
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePrice
+    data={sparklineInteractiveData}
+    strokeColor="#F7931A"
+    yAxisScalingFactor={0.1}
+  />
+</Box>
+```
+
+### With header
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePriceWithHeader data={sparklineInteractiveData} fill strokeColor="#F7931A" />
+</Box>
+```
+
+### Custom hover data
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePrice
+    fill
+    data={sparklineInteractiveData}
+    hoverData={sparklineInteractiveHoverData}
+    strokeColor="#F7931A"
+  />
+</Box>
+```
+
+### Period selector placement
+
+`periodSelectorPlacement` can be used to place the period selector in different positions (`above` or `below`).
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePrice
+    data={sparklineInteractiveData}
+    strokeColor="#F7931A"
+    periodSelectorPlacement="below"
+  />
+</Box>
+```
+
+### Custom styles
+
+You can also provide custom styles, such as to remove any horizontal padding from the header.
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePriceWithHeader
+    data={sparklineInteractiveData}
+    fill
+    strokeColor="#F7931A"
+    styles={{ header: { paddingLeft: 0, paddingRight: 0 } }}
+  />
+</Box>
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `defaultPeriod` | `string` | Yes | `-` | default period value that the chart will use |
+| `formatDate` | `ChartFormatDate<Period>` | Yes | `-` | function used to format the date that is shown in the bottom of the chart as the user scrubs |
+| `periods` | `{ label: string; value: Period; }[]` | Yes | `-` | A list of periods that the chart will use. label is what is shown in the bottom of the chart and the value is the key. |
+| `strokeColor` | `string` | Yes | `-` | Color of the line* |
+| `className` | `string` | No | `-` | Custom class name for the root element. |
+| `classNames` | `{ header?: string; root?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the component. |
+| `compact` | `boolean` | No | `false` | Show the chart in compact height |
+| `data` | `Record<Period, ChartData>` | No | `-` | Chart data bucketed by Period. Period is a string key |
+| `disableScrubbing` | `boolean` | No | `false` | Disables the scrub user interaction from the chart |
+| `fallback` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Fallback shown in the chart when data is not available. This is usually a loading state. |
+| `fallbackType` | `positive \| negative` | No | `-` | If you use the default fallback then this specifies if the fallback line is decreasing or increasing |
+| `fill` | `boolean` | No | `true` | Adds an area fill to the Sparkline |
+| `fillType` | `dotted \| gradient` | No | `'gradient'` | Type of fill to use for the area |
+| `formatHoverDate` | `((date: Date, period: Period) => string)` | No | `-` | Formats the date above the chart as you scrub. Omit this if you dont want to show the date as the user scrubs |
+| `formatHoverPrice` | `((price: number) => string)` | No | `-` | Formats the price above the chart as you scrub. Omit this if you dont want to show the price as the user scrubs |
+| `headerNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds a header node above the chart. It will be placed next to the period selector on web. |
+| `headerTestID` | `string` | No | `-` | Test ID for the header |
+| `hidePeriodSelector` | `boolean` | No | `false` | Hides the period selector at the bottom of the chart |
+| `hoverData` | `Record<Period, ChartTimeseries[]>` | No | `-` | Optional data to show on hover/scrub instead of the original sparkline. This allows multiple timeseries lines.  Period => timeseries list |
+| `onPeriodChanged` | `((period: Period) => void)` | No | `-` | Callback when the user selects a new period. |
+| `onScrub` | `((params: ChartScrubParams<Period>) => void)` | No | `-` | Callback used when the user is scrubbing. This will be called for every data point change. |
+| `onScrubEnd` | `(() => void)` | No | `-` | Callback when a user finishes scrubbing |
+| `onScrubStart` | `(() => void)` | No | `-` | Callback when the user starts scrubbing |
+| `periodSelectorPlacement` | `above \| below` | No | `-` | Optional placement prop that position the period selector component above or below the chart |
+| `style` | `CSSProperties` | No | `-` | Custom styles for the root element. |
+| `styles` | `{ header?: CSSProperties; root?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the component. |
+| `timePeriodGutter` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Optional gutter to add to the Period selector. This is useful if you choose to use the full screen width for the chart |
+| `yAxisScalingFactor` | `number` | No | `-` | Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. |
+
+

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

@@ -0,0 +1,76 @@
+# SparklineInteractiveHeader
+
+The SparklineInteractiveHeader is used to display chart information that changes over time
+
+## Import
+
+```tsx
+import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization'
+```
+
+## Examples
+
+:::tip Accessibility tip
+When possible combining content that is contextually related benefits screen reader users. The interactive header within Sparkline is one of these moments. Use an accessibilityLabel prop or aria-label to set the entire context of the interactive header. This way screen reader users will hear the asset name, price, and direction all in one sentence.
+:::
+
+### Default usage
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePriceWithHeader data={sparklineInteractiveData} strokeColor="#F7931A" />
+</Box>
+```
+
+### Fill
+
+The fill will be added by default
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePriceWithHeader data={sparklineInteractiveData} fill strokeColor="#F7931A" />
+</Box>
+```
+
+### Compact
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePriceWithHeader
+    compact
+    fill
+    strokeColor="#F7931A"
+    data={sparklineInteractiveData}
+  />
+</Box>
+```
+
+### Custom Label
+
+```jsx live
+<Box padding={3} width="100%">
+  <SparklineInteractivePriceWithHeader
+    data={sparklineInteractiveData}
+    strokeColor="#F7931A"
+    labelNode={
+      <HStack gap={1} alignItems="center">
+        <Icon active name="wallet" size="s" />
+        <TextTitle3 as="span">CustomHeader</TextTitle3>
+      </HStack>
+    }
+  />
+</Box>
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `percent` | `string` | Yes | `-` | Free form percentage change |
+| `sign` | ` \| positive \| negative \| upwardTrend \| downwardTrend` | Yes | `-` | Sign to denote the change in price |
+| `variant` | `positive \| negative \| foregroundMuted` | Yes | `-` | The variant to use for the price and percentage change |
+| `accessibilityLabel` | `string` | No | `-` | The accessibilityLabel to show for the price and / or percentage change. This should be localized |
+| `accessoryText` | `string` | No | `-` | The accessoryText to show after the price and / or percentage change. An example is All time |
+| `priceChange` | `string` | No | `-` | Show the dollar amount of price change |
+
+