@coinbase/cds-mcp-server 8.62.1 → 8.66.0

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

@@ -1,5 +1,7 @@
 # Tour
 
+**📖 Live documentation:** https://cds.coinbase.com/components/navigation/Tour/
+
 Creates guided tours of a user interface.
 
 ## Import
@@ -565,10 +567,12 @@ function CallbacksExample() {
 | `steps` | `TourStepValue<TourStepId>[]` | Yes | `-` | - |
 | `TourMaskComponent` | `TourMaskComponent` | No | `DefaultTourMask` | The Component to render as a tour overlay and mask. |
 | `TourStepArrowComponent` | `TourStepArrowComponent` | No | `DefaultTourStepArrow` | The default Component to render for each TourStep arrow element. |
+| `classNames` | `{ readonly root?: string; readonly mask?: string \| undefined; readonly stepArrow?: string \| undefined; readonly stepContainer?: string \| undefined; } \| undefined` | No | `-` | - |
 | `disableAutoScroll` | `boolean` | No | `-` | Disable automatically scrolling to active elements. |
 | `disablePortal` | `boolean` | No | `-` | - |
 | `hideOverlay` | `boolean` | No | `-` | Hide overlay when tour is active |
 | `scrollOptions` | `TourScrollOptions` | No | `-` | Controls the scrolling behavior and margins when calling element.scrollTo() to scroll to an active TourStep target. |
+| `styles` | `{ readonly root?: CSSProperties; readonly mask?: CSSProperties \| undefined; readonly stepArrow?: CSSProperties \| undefined; readonly stepContainer?: CSSProperties \| undefined; } \| undefined` | 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 |
 | `tourMaskBorderRadius` | `string \| number` | No | `-` | Corner radius for the TourMasks content mask. Uses SVG rect elements rx and ry attributes https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx. |
 | `tourMaskPadding` | `string \| number` | No | `-` | Padding to add around the edges of the TourMasks content mask. |
@@ -577,3 +581,13 @@ function CallbacksExample() {
 | `tourStepShift` | `{ padding?: Padding; rootBoundary?: RootBoundary \| undefined; elementContext?: ElementContext \| undefined; altBoundary?: boolean \| undefined; crossAxis?: boolean \| undefined; mainAxis?: boolean \| undefined; limiter?: { fn: (state: MiddlewareState) => Coords; options?: any; } \| undefined; boundary?: Boundary \| undefined; } \| undefined` | No | `-` | Configures @floating-ui shift options for Tour Step component. See https://floating-ui.com/docs/shift. |
 
 
+## Styles
+
+| Selector | Static class name | Description |
+| --- | --- | --- |
+| `root` | `cds-Tour` | Root element |
+| `mask` | `cds-Tour-mask` | The opaque overlay/mask that emphasizes current step |
+| `stepArrow` | `cds-Tour-stepArrow` | A steps arrow element |
+| `stepContainer` | `cds-Tour-stepContainer` | A step elements positioned container |
+
+

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

@@ -1,5 +1,7 @@
 # Tray
 
+**📖 Live documentation:** https://cds.coinbase.com/components/overlay/Tray/
+
 An elevated overlay container that slides in from any edge of the screen.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # UpsellCard
 
+**📖 Live documentation:** https://cds.coinbase.com/components/cards/UpsellCard/
+
 A card component for promoting new features, products, or actions.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # VStack
 
+**📖 Live documentation:** https://cds.coinbase.com/components/layout/VStack/
+
 A Box with flexDirection="column" set by default.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # XAxis
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/XAxis/
+
 A horizontal axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting and data domains.
 
 ## Import

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

@@ -1,5 +1,7 @@
 # YAxis
 
+**📖 Live documentation:** https://cds.coinbase.com/components/charts/YAxis/
+
 A vertical axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting, positioning, and data domains.
 
 ## Import

package/mcp-docs/web/getting-started/ai-overview.txt

@@ -1,3 +1,5 @@
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/ai-overview/
+
 ---
 id: ai-overview
 title: AI Overview

package/mcp-docs/web/getting-started/colors.txt

@@ -0,0 +1,66 @@
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/colors/
+
+---
+id: colors
+title: Colors
+hide_title: true
+---
+
+import { VStack } from '@coinbase/cds-web/layout';
+import { ContentHeader } from '@site/src/components/page/ContentHeader';
+import { MDXSection } from '@site/src/components/page/MDXSection';
+import { MDXArticle } from '@site/src/components/page/MDXArticle';
+import { ColorSchemeProvider } from '@site/src/components/page/ColorSheet/ColorSchemeProvider';
+import { ColorSwatchGrid } from '@site/src/components/page/ColorSheet/ColorSwatchGrid';
+import { SpectrumGrid } from '@site/src/components/page/ColorSheet/SpectrumGrid';
+
+<VStack gap={5}>
+<ContentHeader
+  title="Colors"
+  description="The default CDS theme ships two sets of color values: semantic color tokens (used by components) and the raw color spectrum (the underlying palette)."
+/>
+
+<MDXSection>
+<MDXArticle>
+
+## Color Tokens
+
+Semantic tokens like `bgPrimary` or `fgMuted` automatically adapt to the active color scheme. Use these tokens when styling components so that light and dark mode work without any extra code.
+
+<ColorSchemeProvider>
+  <ColorSwatchGrid />
+</ColorSchemeProvider>
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## Color Spectrum
+
+The full color palette available in the default theme, organized by family (rows) and step 0–100 (columns). Hover any swatch to see its name.
+
+<ColorSchemeProvider>
+  <SpectrumGrid />
+</ColorSchemeProvider>
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## Accessibility
+
+Every designer and engineer should uphold WCAG AA 2.1 accessibility standards. Using CDS, especially for color, gets you 90% of the way there!
+
+### Key concepts to know
+
+**Text contrast (4.5:1)** — Any text displayed on interfaces should follow a 4.5:1 color contrast between the text color and background.
+
+**Non-text contrast (3:1)** — Any graphical objects such as icons, or any shape that provides understanding like the stroke of a text input, must meet a 3:1 color contrast between the element color and its background.
+
+</MDXArticle>
+</MDXSection>
+</VStack>

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

@@ -1,5 +1,7 @@
 # installation
 
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/installation/
+
 This guide will help you get started with installing CDS in your React project. Follow the instructions below to set up CDS and start building with our cross-platform components.
 
 ### Installation
@@ -62,7 +64,7 @@ export default Index;
 
 :::tip
 The MediaQueryProvider prevents issues with `window.matchMedia()` in SSR environments.
-[Read more here →](/components/other/MediaQueryProvider#server-side-rendering)
+[Read more here →](/components/other/MediaQueryProvider#ssr-support)
 :::
 
 #### 3. Verify the installation

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

@@ -1,3 +1,5 @@
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/introduction/
+
 ---
 id: introduction
 title: Introduction

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

@@ -1,3 +1,5 @@
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/playground/
+
 ---
 id: playground
 title: Playground

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

@@ -1,5 +1,7 @@
 # styling
 
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/styling/
+
 CDS includes powerful and flexible APIs for styling components. Easily access values from the theme, or go rogue with full customization.
 
 import { media } from '@coinbase/cds-web/styles/media';

package/mcp-docs/web/getting-started/templates.txt

@@ -1,5 +1,7 @@
 # templates
 
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/templates/
+
 Get started quickly with pre-built templates for common app architectures. Choose from Next.js, Vite, or Webpack templates, all configured with CDS components and best practices.
 
 import { TemplateCard } from '@site/src/components/page/TemplateCard';

package/mcp-docs/web/getting-started/theming.txt

@@ -1,5 +1,7 @@
 # theming
 
+**📖 Live documentation:** https://cds.coinbase.com/getting-started/theming/
+
 The theme contains design tokens like colors, fonts, spacing, and more. The ThemeProvider provides access to these values via CSS Variables for web, and React Context for both web and React Native.
 
 import { JSONCodeBlock } from '@site/src/components/page/JSONCodeBlock';

package/mcp-docs/web/guides/v8-migration-guide.txt

@@ -1,3 +1,5 @@
+**📖 Live documentation:** https://cds.coinbase.com/guides/v8-migration-guide/
+
 ---
 id: v8-migration-guide
 title: v8 Migration Guide

package/mcp-docs/web/hooks/useBreakpoints.txt

@@ -1,5 +1,7 @@
 # useBreakpoints
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/useBreakpoints/
+
 Returns an object with a boolean for each breakpoint of the window. Useful for conditionally rendering components or component trees based on the current window breakpoint.
 
 ## Import

package/mcp-docs/web/hooks/useDimensions.txt

@@ -1,5 +1,7 @@
 # useDimensions
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/useDimensions/
+
 Measures an element's dimensions using ResizeObserver.
 
 ## Import

package/mcp-docs/web/hooks/useEventHandler.txt

@@ -1,5 +1,7 @@
 # useEventHandler
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/useEventHandler/
+
 Creates event handlers for components based on the EventHandlerProvider configuration. It enables centralized event handling and analytics tracking by mapping component actions to configured handlers.
 
 ## Import

package/mcp-docs/web/hooks/useHasMounted.txt

@@ -1,5 +1,7 @@
 # useHasMounted
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/useHasMounted/
+
 Returns a boolean indicating if the component has mounted.
 
 ## Import

package/mcp-docs/web/hooks/useIsoEffect.txt

@@ -1,5 +1,7 @@
 # useIsoEffect
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/useIsoEffect/
+
 A safe way of calling useLayoutEffect only on the client. Does nothing on the server.
 
 ## Import

package/mcp-docs/web/hooks/useMediaQuery.txt

@@ -1,5 +1,7 @@
 # useMediaQuery
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/useMediaQuery/
+
 Subscribes to window.matchMedia changes with SSR support.
 
 ## Import

package/mcp-docs/web/hooks/useMergeRefs.txt

@@ -1,5 +1,7 @@
 # useMergeRefs
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/useMergeRefs/
+
 Combines multiple refs into a single ref callback, allowing a component to work with multiple ref instances simultaneously. Useful when you need to combine refs from different sources, such as forwarded refs and internal component state.
 
 ## Import

package/mcp-docs/web/hooks/useOverlayContentContext.txt

@@ -1,5 +1,7 @@
 # useOverlayContentContext
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/useOverlayContentContext/
+
 A React context and hook for detecting if components are rendered inside overlay containers like modals, drawers, tours, and trays.
 
 ## Import

package/mcp-docs/web/hooks/usePreviousValue.txt

@@ -1,5 +1,7 @@
 # usePreviousValue
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/usePreviousValue/
+
 Returns the previous value of a given variable, useful for comparing current and previous states in effects or for tracking changes over time.
 
 ## Import

package/mcp-docs/web/hooks/useRefMap.txt

@@ -1,5 +1,7 @@
 # useRefMap
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/useRefMap/
+
 Manages a collection of refs using a key-value map structure, allowing dynamic registration and retrieval of refs by their unique identifiers. Commonly used in components that need to track multiple DOM elements, such as tabs, tours, or complex navigation systems.
 
 ## Import

package/mcp-docs/web/hooks/useScrollBlocker.txt

@@ -1,5 +1,7 @@
 # useScrollBlocker
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/useScrollBlocker/
+
 Block and unblock page scrolling.
 
 ## Import

package/mcp-docs/web/hooks/useTheme.txt

@@ -1,5 +1,7 @@
 # useTheme
 
+**📖 Live documentation:** https://cds.coinbase.com/hooks/useTheme/
+
 Returns the currently active theme including color schemes, spacing, typography, and other design tokens.
 
 ## Import

package/mcp-docs/web/routes.txt

@@ -9,6 +9,7 @@
 - [playground](web/getting-started/playground.txt)
 - [introduction](web/getting-started/introduction.txt)
 - [installation](web/getting-started/installation.txt): This guide will help you get started with installing CDS in your React project. Follow the instructions below to set up CDS and start building with our cross-platform components.
+- [colors](web/getting-started/colors.txt)
 - [ai-overview](web/getting-started/ai-overview.txt)
 
 ## Components
@@ -20,6 +21,7 @@
 - [Tooltip](web/components/Tooltip.txt): A component that displays additional information on hover.
 - [Toast](web/components/Toast.txt): A temporary notification that appears at the bottom of the screen.
 - [PortalProvider](web/components/PortalProvider.txt): A component that manages the rendering of portals for overlay components.
+- [PopoverPanel](web/components/PopoverPanel.txt): PopoverPanel anchors an elevated floating panel to a trigger element.
 - [Overlay](web/components/Overlay.txt): A semi-transparent layer that covers content.
 - [ModalHeader](web/components/ModalHeader.txt): A component that provides a consistent header section for Modal.
 - [ModalFooter](web/components/ModalFooter.txt): A footer component for Modal.
@@ -40,7 +42,7 @@
 - [Calendar](web/components/Calendar.txt): Calendar is a flexible, accessible date grid component for selecting dates, supporting keyboard navigation, disabled/highlighted dates, and custom rendering.
 - [RollingNumber](web/components/RollingNumber.txt): A numeric display that animates value changes with rolling digits.
 - [Tour](web/components/Tour.txt): Creates guided tours of a user interface.
-- [Tabs](web/components/Tabs.txt): Tabs is a flexible, accessible tab navigation component for switching between content sections. It supports custom tab components, animated active indicators, and full keyboard navigation.
+- [Tabs](web/components/Tabs.txt): Tabs is a flexible, accessible tab list for switching between related views. Use `DefaultTab` and `DefaultTabsActiveIndicator` for a standard underline tab row without wiring custom components, or supply your own `TabComponent` and `TabsActiveIndicatorComponent` for full control. For pill-style selection, see SegmentedTabs.
 - [TabbedChipsAlpha](web/components/TabbedChipsAlpha.txt): A chip component commonly used in filter context to refine a date source
 - [TabbedChips](web/components/TabbedChips.txt): Tab chips are to be used in a filter setting where the user is given the ability to refine the data source they are accessing.
 - [TabNavigation](web/components/TabNavigation.txt): Organizes content across different screens or data sets.
@@ -140,6 +142,7 @@
 - [ReferenceLine](web/components/ReferenceLine.txt): A horizontal or vertical reference line to mark important values on a chart, such as targets, thresholds, or baseline values.
 - [Point](web/components/Point.txt): Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and interactivity.
 - [PeriodSelector](web/components/PeriodSelector.txt): A selector component for choosing time periods in charts.
+- [PercentageBarChart](web/components/PercentageBarChart.txt): A bar chart component for comparing share or mix across categories as percentages. Supports horizontal and vertical orientations, 100% stacked bars, and a fixed 0–100% value axis.
 - [LineChart](web/components/LineChart.txt): A flexible line chart component for displaying data trends over time. Supports multiple series, custom curves, areas, scrubbing, and interactive data exploration.
 - [Legend](web/components/Legend.txt): A legend component for displaying series information in charts. Supports customizable shapes, layouts, and custom item components.
 - [CartesianChart](web/components/CartesianChart.txt): A flexible, low-level chart component for displaying data in an x/y coordinate space. Provides a foundation for building custom chart visualizations with full control over rendering.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.62.1",
+  "version": "8.66.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",