@coinbase/cds-mcp-server 8.17.1 → 8.17.3

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

@@ -0,0 +1,105 @@
+
+# useTheme
+Returns the currently active theme including color schemes, spacing, typography, and other design tokens.
+
+## Import
+
+```tsx
+import { useTheme } from '@coinbase/cds-web'
+```
+
+## Examples
+
+### `useTheme` hook
+
+The `useTheme` hook provides access to the current `theme` and `activeColorScheme`.
+
+The `color` and `spectrum` objects automatically change based on the `activeColorScheme`.
+
+```jsx
+const theme = useTheme();
+theme.activeColorScheme; // "light" or "dark"
+theme.spectrum; // Resolves to lightSpectrum or darkSpectrum, depends on activeColorScheme
+theme.color; // Resolves to lightColor or darkColor, depends on activeColorScheme
+theme.color.bgPrimary; // "rgb(0,82,255)" or "rgb(87,139,250)", depends on activeColorScheme
+theme.space[2]; // 16
+theme.borderRadius[200]; // 8
+theme.fontSize.display3; // "2.5rem"
+```
+
+:::tip
+For best performance, prefer to use CSS Variables instead of the `useTheme` hook whenever possible. [Read more about CSS Variables here →](/components/other/ThemeProvider#themeprovider-css-variables)
+:::
+
+### Basic usage
+
+```tsx live
+function Example() {
+  const theme = useTheme();
+
+  return (
+    <VStack gap={2}>
+      <Box padding={3} background="bgAlternate" borderRadius={300}>
+        <TextHeadline>Current Color Scheme: {theme.activeColorScheme}</TextHeadline>
+      </Box>
+
+      <VStack padding={3} background="bgAlternate" borderRadius={300}>
+        <Text font="headline">Theme Colors</Text>
+        <Text>Background: {theme.color.bg}</Text>
+        <Text>Foreground: {theme.color.fg}</Text>
+        <Text>Background Primary: {theme.color.bgPrimary}</Text>
+        <Text>Foreground Primary: {theme.color.fgPrimary}</Text>
+      </VStack>
+    </VStack>
+  );
+}
+```
+
+### Styling with Theme values
+
+```tsx live
+function Example() {
+  const theme = useTheme();
+
+  const styles = {
+    container: {
+      padding: theme.space[3],
+      backgroundColor: theme.color.bgAlternate,
+      borderRadius: theme.borderRadius[300],
+      boxShadow: theme.shadow.elevation1,
+    },
+    text: {
+      fontSize: theme.fontSize.body,
+      lineHeight: theme.lineHeight.body,
+      fontFamily: theme.fontFamily.body,
+      color: theme.color.fgPrimary,
+    },
+  };
+
+  return (
+    <Box style={styles.container}>
+      <Text style={styles.text}>Styled using theme values</Text>
+    </Box>
+  );
+}
+```
+
+### Color scheme detection
+
+```tsx live
+function Example() {
+  const theme = useTheme();
+  const isDarkMode = theme.activeColorScheme === 'dark';
+
+  return (
+    <Box gap={0.5} borderRadius={300} alignItems="baseline">
+      <Text as="span">This box adapts to {isDarkMode ? 'dark' : 'light'} mode</Text>
+      <TextHeadline as="span" color={isDarkMode ? 'fgMuted' : 'fgPrimary'}>
+        with adaptive text colors
+      </TextHeadline>
+    </Box>
+  );
+}
+```
+
+

package/mcp-docs/web/routes.txt

@@ -0,0 +1,155 @@
+
+# CDS Routes
+
+## Getting Started
+
+- [playground](web/getting-started/playground.txt)
+- [mcp-server](web/getting-started/mcp-server.txt)
+- [introduction](web/getting-started/introduction.txt)
+
+## Components
+
+- [Text](web/components/Text.txt): A generic text element.
+- [Tag](web/components/Tag.txt): A small label for categorizing or labeling content.
+- [Link](web/components/Link.txt): A pressable Text component.
+- [Tray](web/components/Tray.txt): An elevated container pinned to the bottom of the screen.
+- [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.
+- [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.
+- [ModalBody](web/components/ModalBody.txt): A main content area component for Modal.
+- [Modal](web/components/Modal.txt): A component that displays content in a window that requires user interaction.
+- [FullscreenModalLayout](web/components/FullscreenModalLayout.txt): Provides the layout structure, overlay, focus trapping, and animations for fullscreen modals. Intended for internal use within Modal component variants.
+- [FullscreenModal](web/components/FullscreenModal.txt): FullscreenModal is a component that displays content in a full-screen overlay, typically used for immersive experiences or complex interactions.
+- [FullscreenAlert](web/components/FullscreenAlert.txt): A fullscreen alert component for displaying important messages that require user attention.
+- [Alert](web/components/Alert.txt): A dialog that communicates critical information and blocks user interaction.
+- [ThemeProvider](web/components/ThemeProvider.txt): Provides the theme context to all child components, and automatically generates CSS Variables for dynamic theming.
+- [MediaQueryProvider](web/components/MediaQueryProvider.txt): Manages window.matchMedia subscriptions with SSR support.
+- [DotSymbol](web/components/DotSymbol.txt): Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
+- [DotStatusColor](web/components/DotStatusColor.txt): Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
+- [DotCount](web/components/DotCount.txt): Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
+- [DatePicker](web/components/DatePicker.txt): Date Picker allows our global users to input past, present, future and important dates into our interface in a simple and intuitive manner. Date Picker offers both manual and calendar entry options - accommodating both internationalization and accessibility needs while being adaptable across screen platforms.
+- [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.
+- [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.
+- [TabLabel](web/components/TabLabel.txt): A text label component used within tab navigation.
+- [TabIndicator](web/components/TabIndicator.txt): A visual indicator that shows the active tab position.
+- [Stepper](web/components/Stepper.txt): A component that visualizes states within a multi-step process.
+- [SidebarMoreMenu](web/components/SidebarMoreMenu.txt): SidebarMoreMenu provides a dropdown menu for additional navigation options in the Sidebar.
+- [SidebarItem](web/components/SidebarItem.txt): SidebarItem represents a single navigation item within the Sidebar component.
+- [Sidebar](web/components/Sidebar.txt): A vertical navigation menu for accessing different sections.
+- [SegmentedTabs](web/components/SegmentedTabs.txt): Switches between different views of content.
+- [SectionHeader](web/components/SectionHeader.txt): A header component used to organize and label sections of content, with support for icons, descriptions, and additional content.
+- [Pagination](web/components/Pagination.txt): Pagination is used to navigate through a list of items.
+- [PageHeader](web/components/PageHeader.txt): A flexible header component for pages.
+- [PageFooter](web/components/PageFooter.txt): PageFooter is a layout component that provides a consistent footer area for pages, with responsive padding and justification, typically used for action buttons or navigation elements.
+- [NavigationTitleSelect](web/components/NavigationTitleSelect.txt): A select component styled as a navigation title, allowing users to switch between different views or contexts from the header.
+- [NavigationTitle](web/components/NavigationTitle.txt): Navigation Title is used to display the current page or section title in the Navigation Bar.
+- [NavigationBar](web/components/NavigationBar.txt): A universal header component for navigation and wayfinding.
+- [Coachmark](web/components/Coachmark.txt): Coachmark is a flexible, accessible overlay component for onboarding, feature tours, and contextual help. It supports custom content, actions, and media.
+- [SubBrandLogoWordMark](web/components/SubBrandLogoWordMark.txt): Coinbase sub-brand logo wordmarks for specialized branding.
+- [SubBrandLogoMark](web/components/SubBrandLogoMark.txt): Coinbase sub-brand logo marks for specialized branding.
+- [SpotSquare](web/components/SpotSquare.txt): A square-shaped illustration component for displaying spot graphics.
+- [SpotRectangle](web/components/SpotRectangle.txt): A rectangular illustration component for displaying spot graphics.
+- [SpotIcon](web/components/SpotIcon.txt): An icon-sized illustration component for displaying spot graphics.
+- [RemoteImageGroup](web/components/RemoteImageGroup.txt): A component to display a group of RemoteImage components in a stack.
+- [RemoteImage](web/components/RemoteImage.txt): A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.
+- [Pictogram](web/components/Pictogram.txt): Displays elevated product icons.
+- [LogoWordMark](web/components/LogoWordMark.txt): The full Coinbase logo with text for branding.
+- [LogoMark](web/components/LogoMark.txt): The Coinbase logo mark for branding.
+- [Icon](web/components/Icon.txt): Displays icons from the icon font.
+- [HeroSquare](web/components/HeroSquare.txt): Displays a square-shaped hero illustration.
+- [CellMedia](web/components/CellMedia.txt): Displays media within cells.
+- [Avatar](web/components/Avatar.txt): Avatar is a visual representation of a user, company, or entity.
+- [VStack](web/components/VStack.txt): A Box with flexDirection="column" set by default.
+- [Spacer](web/components/Spacer.txt): Creates space between elements.
+- [MultiContentModule](web/components/MultiContentModule.txt): A versatile container designed to streamline user experiences across Critical User Journeys. Accommodates a range of content including an illustration, input fields (text inputs, list cells, etc.), and an action button.
+- [HStack](web/components/HStack.txt): A Box with flexDirection="row" set by default.
+- [GridColumn](web/components/GridColumn.txt): Place children of a Grid between specific grid lines.
+- [Grid](web/components/Grid.txt): A Box with extra props to make it easier to use the CSS grid API.
+- [Dropdown](web/components/Dropdown.txt): An overlay that opens and closes.
+- [Divider](web/components/Divider.txt): Separates content into sections.
+- [Collapsible](web/components/Collapsible.txt): A container that can be expanded or collapsed.
+- [Carousel](web/components/Carousel.txt): A flexible carousel component for displaying sequences of content with navigation and pagination options.
+- [ButtonGroup](web/components/ButtonGroup.txt): Groups buttons with consistent spacing.
+- [Box](web/components/Box.txt): A generic container, like a supercharged div.
+- [AccordionItem](web/components/AccordionItem.txt): An individual collapsible item within an Accordion.
+- [Accordion](web/components/Accordion.txt): A collapsible component for displaying auxiliary content.
+- [TileButton](web/components/TileButton.txt): A pressable tile component that displays a pictogram or custom content with a title and optional count. Used for grid-based navigation and quick actions.
+- [TextInput](web/components/TextInput.txt): A control for entering text.
+- [Switch](web/components/Switch.txt): A control for toggling between on and off.
+- [SelectOption](web/components/SelectOption.txt): A single option of a Select component.
+- [SelectChip](web/components/SelectChip.txt): A Chip and Select control for selecting from a list of options.
+- [Select](web/components/Select.txt): A Dropdown control for selecting from a list of options.
+- [SearchInput](web/components/SearchInput.txt): A control for searching a dataset.
+- [RadioGroup](web/components/RadioGroup.txt): Radio is a control component that allows users to select one option from a set.
+- [RadioCell](web/components/RadioCell.txt): A selectable cell that pairs a radio button with a title and description for single-choice selections.
+- [Radio](web/components/Radio.txt): Radio is a control component that allows users to select one option from a set of mutually exclusive options.
+- [Pressable](web/components/Pressable.txt): Extends the Interactable component to add accessibility support for press interactions.
+- [Interactable](web/components/Interactable.txt): A generic component for creating interactable elements. Provides dynamic styling for hovered, pressed, and disabled states.
+- [InputChip](web/components/InputChip.txt): A Chip used for removable selections.
+- [IconButton](web/components/IconButton.txt): A Button with an Icon for content.
+- [ControlGroup](web/components/ControlGroup.txt): A layout component that arranges and manages a group of related controls, such as radio buttons, switches, or checkboxes.
+- [Chip](web/components/Chip.txt): A compact, interactive content element.
+- [CheckboxGroup](web/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](web/components/CheckboxCell.txt): A selectable cell that pairs a checkbox with a title and description for multi-choice selections.
+- [Checkbox](web/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.
+- [Button](web/components/Button.txt): A pressable button element.
+- [AvatarButton](web/components/AvatarButton.txt): A pressable Avatar.
+- [YAxis](web/components/YAxis.txt): A vertical axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting, positioning, and data domains.
+- [XAxis](web/components/XAxis.txt): A horizontal axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting and data domains.
+- [SparklineInteractiveHeader](web/components/SparklineInteractiveHeader.txt): The SparklineInteractiveHeader is used to display chart information that changes over time
+- [SparklineInteractive](web/components/SparklineInteractive.txt): The SparklineInteractive is used to display a Sparkline that has multiple time periods
+- [SparklineGradient](web/components/SparklineGradient.txt): A small line chart component with gradient fill below the line.
+- [Sparkline](web/components/Sparkline.txt): A small line chart component for displaying data trends.
+- [Scrubber](web/components/Scrubber.txt): An interactive scrubber component for exploring individual data points in charts. Displays values on hover or drag and supports custom labels and formatting.
+- [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.
+- [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.
+- [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.
+- [BarChart](web/components/BarChart.txt): A bar chart component for comparing values across categories. Supports horizontal and vertical orientations, stacked bars, and grouped series.
+- [AreaChart](web/components/AreaChart.txt): A chart component that displays data as filled areas beneath lines. Ideal for showing cumulative values, stacked data, or emphasizing volume over time.
+- [Spinner](web/components/Spinner.txt): A component that displays a spinning animation.
+- [ProgressCircle](web/components/ProgressCircle.txt): A circular visual indicator of completion progress.
+- [ProgressBarWithFloatLabel](web/components/ProgressBarWithFloatLabel.txt): A ProgressBar with a floating label that moves with progress.
+- [ProgressBarWithFixedLabels](web/components/ProgressBarWithFixedLabels.txt): A ProgressBar with fixed labels at defined positions.
+- [ProgressBar](web/components/ProgressBar.txt): A visual indicator of completion progress.
+- [Fallback](web/components/Fallback.txt): A component that displays a fallback animation.
+- [Banner](web/components/Banner.txt): Displays important messages and actions to users.
+- [TableRow](web/components/TableRow.txt): Defines rows within a Table.
+- [TableHeader](web/components/TableHeader.txt): Defines the header section of Table.
+- [TableFooter](web/components/TableFooter.txt): Defines the footer section of Table.
+- [TableCellFallback](web/components/TableCellFallback.txt): Shows a loading state for Table cells.
+- [TableCell](web/components/TableCell.txt): Defines individual cells within a Table.
+- [TableCaption](web/components/TableCaption.txt): Sets an accessible title or caption for Table.
+- [TableBody](web/components/TableBody.txt): Defines the body section of Table.
+- [Table](web/components/Table.txt): Displays data in rows and columns.
+- [ListCell](web/components/ListCell.txt): A versatile cell component used for displaying content in a list format, supporting various layouts and interactions.
+- [ContentCell](web/components/ContentCell.txt): A versatile cell component for displaying content with optional metadata.
+- [UpsellCard](web/components/UpsellCard.txt): A card component for promoting new features, products, or actions.
+- [NudgeCard](web/components/NudgeCard.txt): A card component designed to encourage users to take essential actions.
+- [FloatingAssetCard](web/components/FloatingAssetCard.txt): A card component for displaying and managing asset holdings.
+- [ContentCardHeader](web/components/ContentCardHeader.txt): A header component for ContentCard.
+- [ContentCardFooter](web/components/ContentCardFooter.txt): A footer component for ContentCard.
+- [ContentCardBody](web/components/ContentCardBody.txt): A main content area component for ContentCard.
+- [ContentCard](web/components/ContentCard.txt): A flexible card component for displaying content.
+- [ContainedAssetCard](web/components/ContainedAssetCard.txt): A card component for displaying and managing asset holdings.
+- [LottieStatusAnimation](web/components/LottieStatusAnimation.txt): A specialized component for displaying trade status animations.
+- [Lottie](web/components/Lottie.txt): Renders After Effects animations as vectors.
+
+## Hooks
+
+- [useTheme](web/hooks/useTheme.txt): Returns the currently active theme including color schemes, spacing, typography, and other design tokens.
+- [useScrollBlocker](web/hooks/useScrollBlocker.txt): Block and unblock page scrolling.
+- [useOverlayContentContext](web/hooks/useOverlayContentContext.txt): A React context and hook for detecting if components are rendered inside overlay containers like modals, drawers, tours, and trays.
+- [useMediaQuery](web/hooks/useMediaQuery.txt): Subscribes to window.matchMedia changes with SSR support.
+- [useIsoEffect](web/hooks/useIsoEffect.txt): A safe way of calling useLayoutEffect only on the client. Does nothing on the server.
+- [useHasMounted](web/hooks/useHasMounted.txt): Returns a boolean indicating if the component has mounted.
+- [useDimensions](web/hooks/useDimensions.txt): Measures an element's dimensions using ResizeObserver.
+- [useBreakpoints](web/hooks/useBreakpoints.txt): 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.

package/package.json

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