@coinbase/cds-mcp-server 8.17.2 → 8.17.3

package/mcp-docs/mobile/getting-started/mcp-server.txt

@@ -0,0 +1,94 @@
+---
+id: mcp-server
+title: MCP Server
+hide_title: true
+---
+
+import { MDXSection } from '@site/src/components/page/MDXSection';
+import { MDXArticle } from '@site/src/components/page/MDXArticle';
+import { ContentHeader } from '@site/src/components/page/ContentHeader';
+
+<ContentHeader
+  title="MCP Server"
+  description="CDS includes an MCP Server that is automatically updated with each new version of our libraries."
+/>
+
+<MDXSection>
+<MDXArticle>
+## What is it?
+
+The CDS MCP Server provides CDS context to LLMs, allowing AI models to understand and work with CDS APIs and components.
+
+From [modelcontextprotocol.io](https://modelcontextprotocol.io/docs/getting-started/intro):
+
+> _MCP is an open protocol that standardizes how applications provide context to large language models (LLMs). MCP provides a standardized way to connect AI models to different data sources and tools. MCP enables you build agents and complex workflows on top of LLMs and connects your models with the world._
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+## Basic installation
+
+The CDS MCP server is published in the `@coinbase/cds-mcp-server` package.
+
+This package is automatically included as a dependency of the CDS libraries, ensuring the CDS library and CDS MCP Server versions match. You do not need to install it separately if you are using the CDS libraries.
+
+</MDXArticle>
+<MDXArticle>
+
+### First time setup
+
+Run the setup command to install the CDS MCP Server for Cursor or Claude Code, then enable the MCP server in your agent.
+
+```bash
+npx --package=@coinbase/cds-mcp-server cds-mcp-setup
+```
+
+:::tip
+Make sure to enable the MCP server after installation.<br />
+See the [Cursor docs here](https://cursor.com/docs/context/mcp#using-mcp-in-chat) and the [Claude Code docs here](https://docs.claude.com/en/docs/claude-code/mcp#managing-your-servers) for more information.
+:::
+
+</MDXArticle>
+<MDXArticle>
+
+### Using the MCP server
+
+Once the CDS MCP Server is enabled in your agent, the agent will automatically be able to use the CDS MCP tools to interact with the CDS APIs and components.
+
+Try asking a question like "How can I add an icon to a CDS Button?" or "How can I customize the CDS Stepper component behavior?"
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+## Advanced installation
+
+To install the MCP server separately as a standalone package and add it as a dependency to your project, run the following command:
+
+```bash
+npm install @coinbase/cds-mcp-server
+```
+
+Alternatively, if you are using Yarn:
+
+```bash
+yarn add @coinbase/cds-mcp-server
+```
+
+:::tip
+Avoid installing mismatched versions of the CDS libraries and the CDS MCP Server.
+:::
+
+### Executing with npx directly
+
+You can also execute the MCP server with npx directly, but it will not have the associated CDS agent rules installed.
+
+```bash
+npx @coinbase/cds-mcp-server
+```
+
+</MDXArticle>
+</MDXSection>

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

@@ -0,0 +1,25 @@
+---
+id: playground
+title: Playground
+hide_title: true
+---
+
+import { MDXSection } from '@site/src/components/page/MDXSection';
+import { MDXArticle } from '@site/src/components/page/MDXArticle';
+import { ContentHeader } from '@site/src/components/page/ContentHeader';
+import { PlaygroundBanner } from '@site/src/components/page/ComponentBanner/PlaygroundBanner';
+import { ShareablePlayground } from '@site/src/components/page/ShareablePlayground';
+
+<ContentHeader
+  title="Playground"
+  description="Live code playground for testing and sharing CDS components and code examples. All CDS components and hooks and all React exports are available to use in the playground without importing them. You must call render() to render your code."
+  banner={<PlaygroundBanner />}
+/>
+
+<MDXSection>
+<MDXArticle>
+
+<ShareablePlayground />
+
+</MDXArticle>
+</MDXSection>

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

@@ -0,0 +1,47 @@
+
+# useDimensions
+Measures the screen dimensions and status bar height.
+
+## Import
+
+```tsx
+import { useDimensions } from '@coinbase/cds-mobile/hooks/useDimensions'
+```
+
+## Examples
+
+### Basic usage
+
+```tsx
+function Example() {
+  const { screenWidth, screenHeight, statusBarHeight } = useDimensions();
+
+  return (
+    <Box backgroundColor="bgAlternate" padding={3} borderRadius={300} width="100%">
+      <VStack gap={2}>
+        <TextHeadline>
+          Screen dimensions: {screenWidth}x{screenHeight}
+        </TextHeadline>
+        <TextHeadline>Status bar height: {statusBarHeight}px</TextHeadline>
+      </VStack>
+    </Box>
+  );
+}
+```
+
+### With Safe Area Layout
+
+```tsx
+function Example() {
+  const { screenHeight, statusBarHeight } = useDimensions();
+  const contentHeight = screenHeight - statusBarHeight;
+
+  return (
+    <Box backgroundColor="bgAlternate" height={contentHeight} paddingTop={statusBarHeight}>
+      <TextHeadline>Content below status bar</TextHeadline>
+    </Box>
+  );
+}
+```
+
+

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

@@ -0,0 +1,215 @@
+
+# useOverlayContentContext
+A React context and hook for detecting if components are rendered inside overlay containers like modals, drawers, tours, and trays.
+
+## Import
+
+```tsx
+import { OverlayContentContext, useOverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext'
+```
+
+## Examples
+
+The `useOverlayContentContext` hook provides information about whether a component is rendered inside various types of overlay containers on mobile. This is useful for conditional rendering and behavior based on the overlay context.
+
+### Basic usage
+
+```tsx
+function ExampleComponent() {
+  const { isOverlay, isModal, isDrawer, isTour } = useOverlayContentContext();
+
+  return (
+    <VStack gap={2}>
+      <Text variant="title3">Overlay Context Information</Text>
+      <Text>Is inside any overlay: {isOverlay ? 'Yes' : 'No'}</Text>
+      <Text>Is inside modal: {isModal ? 'Yes' : 'No'}</Text>
+      <Text>Is inside drawer/tray: {isDrawer ? 'Yes' : 'No'}</Text>
+      <Text>Is inside tour: {isTour ? 'Yes' : 'No'}</Text>
+    </VStack>
+  );
+}
+```
+
+### Real Modal Example
+
+This example shows how the hook works inside an actual mobile modal:
+
+```tsx
+function ModalExample() {
+  const { openModal } = useModal();
+
+  const ExampleComponent = () => {
+    const { isOverlay, isModal, isDrawer, isTour } = useOverlayContentContext();
+
+    return (
+      <VStack gap={2}>
+        <Text variant="title3">Overlay Context Information</Text>
+        <Text>Is inside any overlay: {isOverlay ? 'Yes' : 'No'}</Text>
+        <Text>Is inside modal: {isModal ? 'Yes' : 'No'}</Text>
+        <Text>Is inside drawer/tray: {isDrawer ? 'Yes' : 'No'}</Text>
+        <Text>Is inside tour: {isTour ? 'Yes' : 'No'}</Text>
+      </VStack>
+    );
+  };
+
+  const ModalContent = () => {
+    return (
+      <VStack gap={3}>
+        <Text>This content is rendered inside a mobile modal. Notice the context values:</Text>
+        <VStack gap={2} padding={3} backgroundColor="surface1">
+          <ExampleComponent />
+        </VStack>
+        <Text color="muted" variant="caption">
+          The hook automatically detects it's inside a modal context on mobile!
+        </Text>
+      </VStack>
+    );
+  };
+
+  const handleOpenModal = () => {
+    openModal({
+      children: <ModalContent />,
+      header: 'Mobile Modal with Context',
+    });
+  };
+
+  return (
+    <VStack gap={3}>
+      <VStack gap={2} padding={3} backgroundColor="surface2">
+        <Text variant="title3">Outside Modal</Text>
+        <ExampleComponent />
+      </VStack>
+
+      <Button onPress={handleOpenModal}>Open Modal to See Context Change</Button>
+    </VStack>
+  );
+}
+```
+
+### Using the Context Provider
+
+You can also use the `OverlayContentContext` directly to provide context values:
+
+```tsx
+function ContextProviderExample() {
+  const ExampleComponent = () => {
+    const { isOverlay, isModal, isDrawer, isTour } = useOverlayContentContext();
+
+    return (
+      <VStack gap={2}>
+        <Text variant="title3">Overlay Context Information</Text>
+        <Text>Is inside any overlay: {isOverlay ? 'Yes' : 'No'}</Text>
+        <Text>Is inside modal: {isModal ? 'Yes' : 'No'}</Text>
+        <Text>Is inside drawer/tray: {isDrawer ? 'Yes' : 'No'}</Text>
+        <Text>Is inside tour: {isTour ? 'Yes' : 'No'}</Text>
+      </VStack>
+    );
+  };
+
+  const contextValue = {
+    isModal: true,
+    isDrawer: false,
+    isTour: false,
+  };
+
+  return (
+    <OverlayContentContext.Provider value={contextValue}>
+      <VStack gap={2} padding={3} backgroundColor="surface2">
+        <Text variant="title3">Inside Context Provider</Text>
+        <ExampleComponent />
+      </VStack>
+    </OverlayContentContext.Provider>
+  );
+}
+```
+
+### Conditional Rendering
+
+Use the hook to conditionally render content based on overlay context:
+
+```tsx
+function ConditionalRenderingExample() {
+  const { openModal } = useModal();
+
+  const ConditionalContent = () => {
+    const { isOverlay, isModal } = useOverlayContentContext();
+
+    return (
+      <VStack gap={2}>
+        <Text variant="title3">Conditional Content</Text>
+        {isOverlay ? (
+          <VStack gap={1}>
+            <Text color="positive">✓ This content shows when inside an overlay</Text>
+            {isModal && <Text color="primary">🎯 Specifically inside a modal!</Text>}
+          </VStack>
+        ) : (
+          <Text color="muted">This content shows when not in an overlay</Text>
+        )}
+      </VStack>
+    );
+  };
+
+  const handleOpenConditionalModal = () => {
+    openModal({
+      children: <ConditionalContent />,
+      header: 'Conditional Content Demo',
+    });
+  };
+
+  return (
+    <VStack gap={3}>
+      <VStack gap={2} padding={3} backgroundColor="surface2">
+        <Text variant="title3">Outside Modal</Text>
+        <ConditionalContent />
+      </VStack>
+
+      <Button onPress={handleOpenConditionalModal}>Open Modal to See Different Content</Button>
+    </VStack>
+  );
+}
+```
+
+### Mobile-Specific Behavior
+
+```tsx
+function MobileBehaviorExample() {
+  const { isModal, isDrawer, isTour } = useOverlayContentContext();
+
+  // Adjust touch behavior based on overlay type
+  const getTouchHandler = () => {
+    if (isModal) return handleModalTouch;
+    if (isDrawer) return handleDrawerTouch;
+    if (isTour) return handleTourTouch;
+    return handleDefaultTouch;
+  };
+
+  return (
+    <Pressable onPress={getTouchHandler()}>
+      <VStack gap={2} padding={3}>
+        <Text variant="title3">Touch Behavior</Text>
+        <Text>Touch handling adapts to overlay context</Text>
+      </VStack>
+    </Pressable>
+  );
+}
+```
+
+### Safe Area Adjustments
+
+```tsx
+function SafeAreaExample() {
+  const { isModal, isDrawer } = useOverlayContentContext();
+
+  // Adjust safe area behavior for different overlay types
+  const shouldUseSafeArea = !isModal && !isDrawer;
+
+  return (
+    <VStack gap={2} padding={3} paddingTop={shouldUseSafeArea ? 'safeTop' : 3}>
+      <Text variant="title3">Safe Area Handling</Text>
+      <Text>Safe area behavior adapts to overlay context</Text>
+    </VStack>
+  );
+}
+```
+
+

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

@@ -0,0 +1,110 @@
+
+# useTheme
+Returns the currently active theme including color schemes, spacing, typography, and other design tokens.
+
+## Import
+
+```tsx
+import { useTheme } from '@coinbase/cds-mobile'
+```
+
+## 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; // 40
+```
+
+### Basic usage
+
+```tsx
+function Example() {
+  const theme = useTheme();
+
+  return (
+    <VStack gap={2}>
+      <Box padding={3} background="bgAlternate" borderRadius={300}>
+        <Text>Current Color Scheme: {theme.activeColorScheme}</Text>
+      </Box>
+
+      <Box padding={3} background="bgAlternate" borderRadius={300}>
+        <Text font="headline">Theme Colors</Text>
+        <Text>Primary: {theme.color.bgPrimary}</Text>
+        <Text>Background: {theme.color.bg}</Text>
+        <Text>Text: {theme.color.fg}</Text>
+      </Box>
+    </VStack>
+  );
+}
+```
+
+### Styling with Theme values
+
+```tsx
+function Example() {
+  const theme = useTheme();
+
+  const styles = StyleSheet.create({
+    container: {
+      padding: theme.space[3],
+      backgroundColor: theme.color.bgAlternate,
+      borderRadius: theme.borderRadius[300],
+      ...Platform.select({
+        ios: {
+          shadowColor: theme.shadow.elevation1.shadowColor,
+          shadowOffset: theme.shadow.elevation1.shadowOffset,
+          shadowOpacity: theme.shadow.elevation1.shadowOpacity,
+          shadowRadius: theme.shadow.elevation1.shadowRadius,
+        },
+        android: {
+          elevation: 1,
+        },
+      }),
+    },
+    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
+function Example() {
+  const theme = useTheme();
+  const isDarkMode = theme.activeColorScheme === 'dark';
+
+  return (
+    <Box padding={3} background={isDarkMode ? 'bgElevation1' : 'bgAlternate'} borderRadius={300}>
+      <Text>This box adapts to {isDarkMode ? 'dark' : 'light'} mode</Text>
+      <Text color={isDarkMode ? 'fgMuted' : 'fgPrimary'} font="headline">
+        With adaptive text colors
+      </Text>
+    </Box>
+  );
+}
+```
+
+

package/mcp-docs/mobile/routes.txt

@@ -0,0 +1,132 @@
+
+# CDS Routes
+
+## Getting Started
+
+- [playground](mobile/getting-started/playground.txt)
+- [mcp-server](mobile/getting-started/mcp-server.txt)
+- [introduction](mobile/getting-started/introduction.txt)
+
+## Components
+
+- [Text](mobile/components/Text.txt): A generic text element.
+- [Tag](mobile/components/Tag.txt): A small label for categorizing or labeling content.
+- [Link](mobile/components/Link.txt): A pressable Text component.
+- [Tray](mobile/components/Tray.txt): An elevated container pinned to the bottom of the screen.
+- [Tooltip](mobile/components/Tooltip.txt): A component that displays additional information on press.
+- [Toast](mobile/components/Toast.txt): A temporary notification that appears at the bottom of the screen.
+- [PortalProvider](mobile/components/PortalProvider.txt): A component that manages the rendering of portals for overlay components.
+- [Overlay](mobile/components/Overlay.txt): A semi-transparent layer that covers content.
+- [ModalHeader](mobile/components/ModalHeader.txt): A component that provides a consistent header section for Modal.
+- [ModalFooter](mobile/components/ModalFooter.txt): A footer component for Modal.
+- [ModalBody](mobile/components/ModalBody.txt): A main content area component for Modal.
+- [Modal](mobile/components/Modal.txt): A component that displays content in a window that requires user interaction.
+- [Alert](mobile/components/Alert.txt): A dialog that communicates critical information and blocks user interaction.
+- [ThemeProvider](mobile/components/ThemeProvider.txt): Provides the theme context to all child components.
+- [DotSymbol](mobile/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](mobile/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](mobile/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](mobile/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.
+- [RollingNumber](mobile/components/RollingNumber.txt): A numeric display that animates value changes with rolling digits.
+- [Tour](mobile/components/Tour.txt): Creates guided tours of a user interface.
+- [TopNavBar](mobile/components/TopNavBar.txt): A customizable top navigation bar that can contain start, middle, and end content, as well as a bottom section for elements like tabs. It remains sticky at the top of the screen.
+- [Tabs](mobile/components/Tabs.txt): Tabs is a flexible, accessible tab navigation component for React Native, supporting animated indicators, custom tab components, and full accessibility.
+- [TabbedChips](mobile/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](mobile/components/TabNavigation.txt): Organizes content across different screens or data sets.
+- [TabLabel](mobile/components/TabLabel.txt): A text label component used within tab navigation.
+- [TabIndicator](mobile/components/TabIndicator.txt): A visual indicator that shows the active tab position.
+- [Stepper](mobile/components/Stepper.txt): A component that visualizes states within a multi-step process.
+- [SegmentedTabs](mobile/components/SegmentedTabs.txt): Switches between different views of content.
+- [SectionHeader](mobile/components/SectionHeader.txt): A header component used to organize and label sections of content, with support for icons, descriptions, and additional content, optimized for mobile platforms.
+- [PageHeader](mobile/components/PageHeader.txt): Page Header is a flexible header component.
+- [PageFooter](mobile/components/PageFooter.txt): PageFooter is a layout component that provides a consistent footer area for pages, with centered alignment and fixed height, typically used for action buttons or navigation elements.
+- [NavigationTitleSelect](mobile/components/NavigationTitleSelect.txt): A select component styled as a navigation title, allowing users to switch between different views or contexts from the header. It opens a Tray on mobile.
+- [NavigationTitle](mobile/components/NavigationTitle.txt): A component used to display a title within a navigation bar, with default styling for headlines.
+- [Coachmark](mobile/components/Coachmark.txt): Coachmark is a flexible, accessible overlay component for onboarding, feature tours, and contextual help in React Native apps. It supports custom content, actions, and media.
+- [BrowserBar](mobile/components/BrowserBar.txt): A navigation bar designed for browser-like interfaces, featuring slots for start, end, and central content. It provides a structured layout for controls and information within a browser context.
+- [SubBrandLogoWordMark](mobile/components/SubBrandLogoWordMark.txt): Coinbase sub-brand logo wordmarks for specialized branding.
+- [SubBrandLogoMark](mobile/components/SubBrandLogoMark.txt): Coinbase sub-brand logo marks for specialized branding.
+- [SpotSquare](mobile/components/SpotSquare.txt): A square-shaped illustration component for displaying spot graphics.
+- [SpotRectangle](mobile/components/SpotRectangle.txt): A rectangular illustration component for displaying spot graphics.
+- [SpotIcon](mobile/components/SpotIcon.txt): An icon-sized illustration component for displaying spot graphics.
+- [RemoteImageGroup](mobile/components/RemoteImageGroup.txt): A component to display a group of RemoteImage components in a stack.
+- [RemoteImage](mobile/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](mobile/components/Pictogram.txt): Displays elevated product icons.
+- [LogoWordMark](mobile/components/LogoWordMark.txt): The full Coinbase logo with text for branding.
+- [LogoMark](mobile/components/LogoMark.txt): The Coinbase logo mark for branding.
+- [Icon](mobile/components/Icon.txt): Displays icons from the icon font.
+- [HeroSquare](mobile/components/HeroSquare.txt): Displays a square-shaped hero illustration.
+- [CellMedia](mobile/components/CellMedia.txt): Displays media within cells.
+- [Avatar](mobile/components/Avatar.txt): Avatar is a visual representation of a user, company, or entity.
+- [VStack](mobile/components/VStack.txt): A Box with flexDirection="column" set by default.
+- [Spacer](mobile/components/Spacer.txt): Creates space between elements.
+- [MultiContentModule](mobile/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](mobile/components/HStack.txt): A Box with flexDirection="row" set by default.
+- [Divider](mobile/components/Divider.txt): Separates content into sections.
+- [Collapsible](mobile/components/Collapsible.txt): A container that can be expanded or collapsed.
+- [Carousel](mobile/components/Carousel.txt): A flexible carousel component for displaying sequences of content with navigation and pagination options.
+- [ButtonGroup](mobile/components/ButtonGroup.txt): Groups buttons with consistent spacing.
+- [Box](mobile/components/Box.txt): A generic container, like a supercharged View.
+- [AccordionItem](mobile/components/AccordionItem.txt): An individual collapsible item within an Accordion.
+- [Accordion](mobile/components/Accordion.txt): A collapsible component for displaying auxiliary content.
+- [TextInput](mobile/components/TextInput.txt): A control for entering text.
+- [Switch](mobile/components/Switch.txt): A control for toggling between on and off.
+- [SlideButton](mobile/components/SlideButton.txt): A button that slides to confirm an action.
+- [SelectOption](mobile/components/SelectOption.txt): A single option of a Select component.
+- [SelectChip](mobile/components/SelectChip.txt): A Chip and Select control for selecting from a list of options
+- [Select](mobile/components/Select.txt): A control for selecting from a list of options.
+- [SearchInput](mobile/components/SearchInput.txt): A control for searching a dataset.
+- [RadioGroup](mobile/components/RadioGroup.txt): Radio is a control component that allows users to select one option from a set.
+- [RadioCell](mobile/components/RadioCell.txt): A selectable cell that pairs a radio button with a title and description for single-choice selections.
+- [Radio](mobile/components/Radio.txt): Radio is a control component that allows users to select one option from a set of mutually exclusive options.
+- [Pressable](mobile/components/Pressable.txt): Extends the Interactable component to add accessibility support for press interactions.
+- [Numpad](mobile/components/Numpad.txt): A keypad for entering numbers.
+- [Interactable](mobile/components/Interactable.txt): A generic component for creating interactable elements. Provides dynamic styling for hovered, pressed, and disabled states.
+- [InputChip](mobile/components/InputChip.txt): A Chip used for removable selections.
+- [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.
+- [Chip](mobile/components/Chip.txt): A compact, interactive content element.
+- [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.
+- [Button](mobile/components/Button.txt): A pressable button element.
+- [AvatarButton](mobile/components/AvatarButton.txt): A pressable Avatar.
+- [YAxis](mobile/components/YAxis.txt): A vertical axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting, positioning, and data domains.
+- [XAxis](mobile/components/XAxis.txt): A horizontal axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting, positioning, and data domains.
+- [SparklineInteractiveHeader](mobile/components/SparklineInteractiveHeader.txt): The SparklineInteractiveHeader is used to display chart information that changes over time
+- [SparklineInteractive](mobile/components/SparklineInteractive.txt): The SparklineInteractive is used to display a Sparkline that has multiple time periods
+- [SparklineGradient](mobile/components/SparklineGradient.txt): A small line chart component with gradient fill below the line.
+- [Sparkline](mobile/components/Sparkline.txt): A small line chart component for displaying data trends.
+- [Scrubber](mobile/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](mobile/components/ReferenceLine.txt): A horizontal or vertical reference line to mark important values on a chart, such as targets, thresholds, or baseline values.
+- [Point](mobile/components/Point.txt): Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and interactivity.
+- [PeriodSelector](mobile/components/PeriodSelector.txt): A selector component for choosing time periods in charts.
+- [LineChart](mobile/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](mobile/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](mobile/components/BarChart.txt): A bar chart component for comparing values across categories. Supports horizontal and vertical orientations, stacked bars, and grouped series.
+- [AreaChart](mobile/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](mobile/components/Spinner.txt): A component that displays a spinning animation.
+- [ProgressCircle](mobile/components/ProgressCircle.txt): A circular visual indicator of completion progress.
+- [ProgressBarWithFloatLabel](mobile/components/ProgressBarWithFloatLabel.txt): A ProgressBar with a floating label that moves with progress.
+- [ProgressBarWithFixedLabels](mobile/components/ProgressBarWithFixedLabels.txt): A ProgressBar with fixed labels at defined positions.
+- [ProgressBar](mobile/components/ProgressBar.txt): A visual indicator of completion progress.
+- [Fallback](mobile/components/Fallback.txt): A component that displays a fallback animation.
+- [Banner](mobile/components/Banner.txt): Displays important messages and actions to users.
+- [ListCell](mobile/components/ListCell.txt): A versatile cell component used for displaying content in a list format, supporting various layouts and interactions.
+- [ContentCell](mobile/components/ContentCell.txt): A versatile cell component for displaying content with optional metadata.
+- [UpsellCard](mobile/components/UpsellCard.txt): Upsell Cards are used to promote new features, products, or actions within the app. They are part of the upsell framework and aim to drive user engagement and revenue.
+- [NudgeCard](mobile/components/NudgeCard.txt): A card component designed to encourage users to take essential actions.
+- [FloatingAssetCard](mobile/components/FloatingAssetCard.txt): Asset Cards display current and potential future assets, offering a straightforward method to view and manage a customer's holdings. They provide a clear visual and informative overview, simplifying asset management and investment considerations.
+- [ContentCardHeader](mobile/components/ContentCardHeader.txt): ContentCardHeader is a subcomponent of ContentCard that provides the header section of the card, typically used for the title and subtitle.
+- [ContentCardFooter](mobile/components/ContentCardFooter.txt): ContentCardFooter is a subcomponent of ContentCard that provides the footer section of the card, typically used for actions or additional information.
+- [ContentCardBody](mobile/components/ContentCardBody.txt): ContentCardBody is a subcomponent of ContentCard that provides the main content area of the card.
+- [ContentCard](mobile/components/ContentCard.txt): A flexible card component for displaying content with header, body, and footer sections.
+- [ContainedAssetCard](mobile/components/ContainedAssetCard.txt): Asset Cards display current and potential future assets, offering a straightforward method to view and manage a customer's holdings. They provide a clear visual and informative overview, simplifying asset management and investment considerations.
+- [LottieStatusAnimation](mobile/components/LottieStatusAnimation.txt): A specialized component for displaying trade status animations.
+- [Lottie](mobile/components/Lottie.txt): Renders After Effects animations as vectors.
+
+## Hooks
+
+- [useTheme](mobile/hooks/useTheme.txt): Returns the currently active theme including color schemes, spacing, typography, and other design tokens.
+- [useOverlayContentContext](mobile/hooks/useOverlayContentContext.txt): A React context and hook for detecting if components are rendered inside overlay containers like modals, drawers, tours, and trays.
+- [useDimensions](mobile/hooks/useDimensions.txt): Measures the screen dimensions and status bar height.