@coinbase/cds-mcp-server 8.17.2 → 8.17.4

package/mcp-docs/mobile/components/ListCell.txt

@@ -0,0 +1,412 @@
+# ListCell
+
+A versatile cell component used for displaying content in a list format, supporting various layouts and interactions.
+
+## Import
+
+```tsx
+import { ListCell } from '@coinbase/cds-mobile/cells/ListCell'
+```
+
+## Examples
+
+### Basic usage
+
+```tsx
+<ListCell
+  spacingVariant="condensed"
+  title="Basic List Cell"
+  description="A simple example of ListCell"
+/>
+```
+
+:::note
+Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` may be removed in a future major release.
+:::
+
+```tsx
+<VStack>
+  {/* Preferred (new design) */}
+  <ListCell
+    accessory="arrow"
+    description="New design (condensed)"
+    detail="$12,345.00"
+    spacingVariant="condensed"
+    media={<Avatar src={assets.eth.imageUrl} size="m" />}
+    onClick={console.log}
+    title="Condensed"
+    variant="positive"
+  />
+
+  {/* Deprecated options kept for backward compatibility */}
+  <ListCell
+    accessory="arrow"
+    detail="$12,345.00"
+    spacingVariant="compact"
+    media={<Avatar src={assets.eth.imageUrl} size="m" />}
+    onClick={console.log}
+    title="Compact (deprecated)"
+    variant="positive"
+  />
+  <ListCell
+    accessory="arrow"
+    detail="$12,345.00"
+    spacingVariant="normal"
+    media={<Avatar src={assets.eth.imageUrl} size="m" />}
+    onClick={console.log}
+    title="Normal"
+    variant="positive"
+  />
+</VStack>
+```
+
+### With Media
+
+```tsx
+<ListCell
+  spacingVariant="condensed"
+  title="List Cell with Media"
+  description="Shows usage with media"
+  media={<Icon active name="info" />}
+/>
+```
+
+### With Detail and Subdetail
+
+```tsx
+<ListCell
+  spacingVariant="condensed"
+  title="List Cell with Details"
+  description="Shows usage with detail and subdetail"
+  detail="$1,234.56"
+  subdetail="+2.5%"
+  variant="positive"
+/>
+```
+
+### With Accessory
+
+```tsx
+<ListCell
+  spacingVariant="condensed"
+  title="List Cell with Accessory"
+  description="Shows usage with accessory"
+  accessory="arrow"
+/>
+```
+
+### Interactive Cell
+
+```tsx
+<ListCell
+  spacingVariant="condensed"
+  title="Interactive List Cell"
+  description="Tap to interact"
+  media={<Icon active name="info" />}
+  accessory="arrow"
+  onPress={() => alert('Cell pressed!')}
+/>
+```
+
+### With Helper Text
+
+```tsx
+<VStack gap={3}>
+  <ListCell
+    spacingVariant="condensed"
+    title="List Cell with Helper Text"
+    description="Shows usage with helper text below the cell"
+    helperText={<CellHelperText>This is a default helper message.</CellHelperText>}
+    media={<Avatar src={assets.btc.imageUrl} />}
+    end={<Button compact>Action</Button>}
+  />
+  <ListCell
+    spacingVariant="condensed"
+    title="List Cell with Warning"
+    description="Shows usage with a warning message"
+    helperText={<CellHelperText variant="warning">This is a warning message.</CellHelperText>}
+    media={<Avatar src={assets.btc.imageUrl} />}
+    end={<Button compact>Action</Button>}
+  />
+  <ListCell
+    spacingVariant="condensed"
+    title="List Cell with Error"
+    description="Shows usage with an error message"
+    helperText={<CellHelperText variant="error">This is an error message.</CellHelperText>}
+    media={<Avatar src={assets.btc.imageUrl} />}
+    end={<Button compact>Action</Button>}
+  />
+</VStack>
+```
+
+### Accessibility Label
+
+The accessibility props are only applied when the `<ListCell>` has a value for the `onPress` prop. Otherwise, content passed into the `<ListCell>` must use accessibility props and attributes as needed.
+
+```tsx
+<VStack gap={1}>
+  <ListCell
+    accessibilityLabel="Accessibility label. Describes content for entire list cell. Applied when onPress prop has a value"
+    intermediary={<Icon name="chartLine" />}
+    media={<Avatar src={assets.btc.imageUrl} />}
+    onPress={() => console.log('List cell pressed')}
+    title="BTC"
+  />
+
+  <ListCell
+    intermediary={<Icon accessibilityLabel="Chart icon" name="chartLine" />}
+    media={<Avatar accessibilityLabel="Bitcoin" src={assets.btc.imageUrl} />}
+    title="BTC"
+  />
+</VStack>
+```
+
+### Compact Mode
+
+```tsx
+<ListCell
+  spacingVariant="compact"
+  title="Compact List Cell"
+  description="Shows compact variant"
+  media={<Icon active name="info" />}
+/>
+```
+
+### Selected State
+
+```tsx
+<ListCell
+  spacingVariant="condensed"
+  selected
+  title="Selected List Cell"
+  description="Shows selected state"
+  media={<Icon active name="info" />}
+/>
+```
+
+### Loading States
+
+The ListCellFallback component provides loading state representations of ListCell. It uses placeholder rectangles to indicate where content will appear, creating a smooth loading experience. The mobile version leverages the theme system for consistent line heights and reuses the ListCell component structure for layout consistency.
+
+```tsx
+<VStack gap={3}>
+  {/* Basic loading state */}
+  <ListCellFallback spacingVariant="condensed" title description />
+
+  {/* Loading state with media */}
+  <ListCellFallback spacingVariant="condensed" title description media="icon" />
+
+  {/* Loading state with details */}
+  <ListCellFallback spacingVariant="condensed" title description detail subdetail />
+
+  {/* Full loading state with custom widths */}
+  <ListCellFallback
+    spacingVariant="condensed"
+    title
+    description
+    detail
+    subdetail
+    media="icon"
+    compact
+    rectWidthVariant={1} // Creates a deterministic variant of the loading state
+    disableRandomRectWidth
+  />
+</VStack>
+```
+
+:::note
+The mobile ListCellFallback uses theme-based line heights and reuses the ListCell component structure, resulting in a more consistent loading state appearance. The compact prop is also supported for loading states.
+:::
+
+### Anatomy
+
+Without helper text (top-only layout):
+
+```text
+┌───────────────────────────────────────────────────────────────────────────┐
+│                               root (Box)                                  │
+│┌─────────────────────────────────────────────────────────────────────────┐│
+││                              pressable                                  ││
+││┌───────────────────────────────────────────────────────────────────────┐││
+│││                contentContainer & mainContent (HStack)                │││
+│││  ┌─────┐ ┌────────────────┐ ┌────────────┐ ┌────────────┐ ┌─────────┐ │││
+│││  │media│ │  VStack        │ │intermediary│ │    end     │ │accessory│ │││
+│││  │     │ │ ┌──────────┐   │ │            │ │ (detail    │ │         │ │││
+│││  │     │ │ │  title   │   │ │            │ │    or      │ │         │ │││
+│││  │     │ │ └──────────┘   │ │            │ │  action)   │ │         │ │││
+│││  │     │ │ ┌────────────┐ │ │            │ │            │ │         │ │││
+│││  │     │ │ │ description│ │ │            │ │            │ │         │ │││
+│││  │     │ │ └────────────┘ │ │            │ │            │ │         │ │││
+│││  └─────┘ └────────────────┘ └────────────┘ └────────────┘ └─────────┘ │││
+││└───────────────────────────────────────────────────────────────────────┘││
+│└─────────────────────────────────────────────────────────────────────────┘│
+└───────────────────────────────────────────────────────────────────────────┘
+```
+
+With helper text (top + bottom layout):
+
+```text
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                                 root (Box)                                  │
+│┌───────────────────────────────────────────────────────────────────────────┐│
+││                                pressable                                  ││
+││┌─────────────────────────────────────────────────────────────────────────┐││
+│││                        contentContainer (VStack)                        │││
+│││┌───────────────────────────────────────────────────────────────────────┐│││
+││││                          mainContent (HStack)                         ││││
+││││  ┌─────┐ ┌────────────────┐ ┌────────────┐ ┌────────────┐ ┌─────────┐ ││││
+││││  │media│ │  VStack        │ │intermediary│ │    end     │ │accessory│ ││││
+││││  │     │ │ ┌──────────┐   │ │            │ │ (detail    │ │         │ ││││
+││││  │     │ │ │  title   │   │ │            │ │    or      │ │         │ ││││
+││││  │     │ │ └──────────┘   │ │            │ │  action)   │ │         │ ││││
+││││  │     │ │ ┌────────────┐ │ │            │ │            │ │         │ ││││
+││││  │     │ │ │ description│ │ │            │ │            │ │         │ ││││
+││││  │     │ │ └────────────┘ │ │            │ │            │ │         │ ││││
+││││  └─────┘ └────────────────┘ └────────────┘ └────────────┘ └─────────┘ ││││
+│││└───────────────────────────────────────────────────────────────────────┘│││
+│││┌───────────────────────────────────────────────────────────────────────┐│││
+││││                              helperText                               ││││
+│││└───────────────────────────────────────────────────────────────────────┘│││
+││└─────────────────────────────────────────────────────────────────────────┘││
+│└───────────────────────────────────────────────────────────────────────────┘│
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+Mapping to `styles` / `classNames` keys:
+
+- root: outer `Box` wrapping the entire cell
+- pressable: interactive overlay when `href` / `onPress` event handlers are present
+- contentContainer: container around top and optional bottom content
+- mainContent: inner horizontal layout that holds the main pieces
+- title/description: stacked text column within `topContent`
+- media: leading media container
+- intermediary: middle container between main and end
+- end: container for `detail` / `subdetail` or `end` prop you pass in
+- accessory: trailing accessory container
+- helperText: container below main content to display helper text
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `accessory` | `more \| selected \| arrow` | No | `-` | Accessory to display at the end of the cell. |
+| `action` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
+| `adjustsFontSizeToFit` | `boolean` | No | `-` | Specifies whether font should be scaled down automatically to fit given style constraints. |
+| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
+| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
+| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
+| `animated` | `boolean` | No | `-` | - |
+| `aspectRatio` | `string \| number` | 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` | `string \| number` | No | `-` | - |
+| `bottomContent` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The content to display below the main cell content. |
+| `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 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `compact` | `boolean` | No | `-` | - |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. |
+| `detail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label and/or extra detail. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. |
+| `detailWidth` | `string \| number` | No | `-` | - |
+| `disableMultilineTitle` | `boolean` | No | `false When there is no description the title will take up two lines by default. When this is set to true multiline title behavior is overwritten, and regardless of description text state the title will take up a single line truncating with ellipses.` | - |
+| `disableSelectionAccessory` | `boolean` | No | `-` | Disable the default accessory that is displayed when the cell is selected. If accessory is provided, that will continue to be displayed, otherwise no accessory will be displayed when the cell is selected. |
+| `disabled` | `boolean` | No | `-` | Is the cell disabled? Will apply opacity and disable interaction. |
+| `display` | `flex \| none` | No | `-` | - |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
+| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. End-aligned content (e.g., CTA, form element, metric). Replacement for the deprecated action prop, and takes precedence over it. If the content is a action (like button, link, etc), we recommand avoid using alongside onPress. If used alongside onClick, the end action is triggered first and then the onClick handler. |
+| `flexBasis` | `string \| number` | No | `-` | - |
+| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
+| `flexGrow` | `number` | No | `-` | - |
+| `flexShrink` | `number` | No | `-` | - |
+| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
+| `font` | `inherit \| FontFamily` | No | `-` | - |
+| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
+| `fontSize` | `inherit \| FontSize` | No | `-` | - |
+| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `height` | `string \| number` | No | `-` | - |
+| `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Assistive message to display below the cell content. |
+| `innerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the inner content of Cell |
+| `intermediary` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Middle content between main content and detail. For internal use only. |
+| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
+| `left` | `string \| number` | No | `-` | - |
+| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
+| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `maxHeight` | `string \| number` | No | `-` | - |
+| `maxWidth` | `string \| number` | No | `-` | - |
+| `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
+| `minHeight` | `string \| number` | No | `-` | - |
+| `minWidth` | `string \| number` | No | `-` | - |
+| `multiline` | `boolean` | No | `-` | Allow the description to span multiple lines. This *will* break fixed height requirements, so should not be used in a FlatList. |
+| `onLayout` | `((event: LayoutChangeEvent) => void)` | No | `-` | Measure the dimensions of the cell. Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
+| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
+| `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
+| `opacity` | `number \| AnimatedNode` | No | `-` | - |
+| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell |
+| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
+| `priority` | `end \| start \| middle \| (end \| start \| middle)[]` | No | `-` | Which piece of content has the highest priority in regards to text truncation, growing, and shrinking. |
+| `right` | `string \| number` | No | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `selected` | `boolean` | No | `-` | Is the cell selected? Will apply a background and selected accessory. |
+| `spacingVariant` | `compact \| normal \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed.  When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) 4. when there is a description, titles numberOfLines={1} otherwise titles numberOfLines={2} 5. description and subdetail have font body  When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px  When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is --borderRadius-0 4. titles numberOfLines={2} 5. description and subdetail have font label2 |
+| `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
+| `styles` | `({ root?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; topContent?: StyleProp<ViewStyle>; bottomContent?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; } & { root?: StyleProp<ViewStyle>; media?: StyleProp<ViewStyle>; intermediary?: StyleProp<ViewStyle>; end?: StyleProp<ViewStyle>; accessory?: StyleProp<ViewStyle>; contentContainer?: StyleProp<ViewStyle>; pressable?: StyleProp<ViewStyle>; mainContent?: StyleProp<ViewStyle>; helperText?: StyleProp<ViewStyle>; title?: StyleProp<TextStyle>; description?: StyleProp<TextStyle>; })` | No | `-` | Styles for the components |
+| `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subdetail providing more information. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. |
+| `subdetailFont` | `inherit \| FontFamily` | No | `-` | Font to apply to the subdetail text. |
+| `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 Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
+| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
+| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
+| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
+| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. |
+| `top` | `string \| number` | No | `-` | - |
+| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
+| `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
+| `variant` | `warning \| positive \| negative \| foregroundMuted` | No | `-` | Variant color to apply to the subdetail text. |
+| `width` | `string \| number` | No | `-` | - |
+| `zIndex` | `number` | No | `-` | - |
+
+

package/mcp-docs/mobile/components/LogoMark.txt

@@ -0,0 +1,84 @@
+# LogoMark
+
+The Coinbase logo mark for branding.
+
+## Import
+
+```tsx
+import { LogoMark } from '@coinbase/cds-mobile/icons/LogoMark'
+```
+
+## Examples
+
+### Basic usage
+
+```tsx
+<VStack alignItems="center">
+  <Box width="100%">
+    <LogoMark size={32} />
+  </Box>
+</VStack>
+```
+
+### Different Sizes
+
+```tsx
+<VStack gap={4}>
+  <VStack gap={2}>
+    <Text font="label2" color="fgMuted">
+      Size 16
+    </Text>
+    <Box width="100%">
+      <LogoMark size={16} />
+    </Box>
+  </VStack>
+  <VStack gap={2}>
+    <Text font="label2" color="fgMuted">
+      Size 24
+    </Text>
+    <Box width="100%">
+      <LogoMark size={24} />
+    </Box>
+  </VStack>
+  <VStack gap={2}>
+    <Text font="label2" color="fgMuted">
+      Size 32
+    </Text>
+    <Box width="100%">
+      <LogoMark size={32} />
+    </Box>
+  </VStack>
+</VStack>
+```
+
+### Foreground Variations
+
+```tsx
+<VStack gap={4}>
+  <VStack gap={2}>
+    <Text font="label2" color="fgMuted">
+      Default (brand blue in light mode, white in dark mode)
+    </Text>
+    <Box width="100%">
+      <LogoMark size={32} />
+    </Box>
+  </VStack>
+  <VStack gap={2}>
+    <Text font="label2" color="fgMuted">
+      Foreground (high contrast black in light mode, white in dark mode)
+    </Text>
+    <Box width="100%">
+      <LogoMark size={32} foreground={true} />
+    </Box>
+  </VStack>
+</VStack>
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `foreground` | `boolean` | No | `-` | - |
+| `size` | `16 \| 24 \| 32` | No | `-` | - |
+
+

package/mcp-docs/mobile/components/LogoWordMark.txt

@@ -0,0 +1,93 @@
+# LogoWordMark
+
+The full Coinbase logo with text for branding.
+
+## Import
+
+```tsx
+import { LogoWordmark } from '@coinbase/cds-mobile/icons/LogoWordmark'
+```
+
+## Examples
+
+### Basic usage
+
+```tsx
+<VStack alignItems="center">
+  <Box height="40px">
+    <LogoWordmark />
+  </Box>
+</VStack>
+```
+
+### Foreground Variations
+
+```tsx
+<VStack gap={4}>
+  <VStack gap={2}>
+    <Text font="label2" color="fgMuted">
+      Default (brand blue in light mode, white in dark mode)
+    </Text>
+    <Box height="40px">
+      <LogoWordmark />
+    </Box>
+  </VStack>
+  <VStack gap={2}>
+    <Text font="label2" color="fgMuted">
+      Foreground (high contrast black in light mode, white in dark mode)
+    </Text>
+    <Box height="40px">
+      <LogoWordmark foreground={true} />
+    </Box>
+  </VStack>
+</VStack>
+```
+
+### Sizing
+
+LogoWordmark doesn't have a `size` prop. Instead, control its size by setting the width or height of its container. The component will automatically maintain its aspect ratio.
+
+```tsx
+<VStack gap={4}>
+  <VStack gap={2}>
+    <Text font="label2" color="fgMuted">
+      Small (24px height)
+    </Text>
+    <Box height="24px">
+      <LogoWordmark />
+    </Box>
+  </VStack>
+  <VStack gap={2}>
+    <Text font="label2" color="fgMuted">
+      Medium (40px height)
+    </Text>
+    <Box height="40px">
+      <LogoWordmark />
+    </Box>
+  </VStack>
+  <VStack gap={2}>
+    <Text font="label2" color="fgMuted">
+      Large (60px height)
+    </Text>
+    <Box height="60px">
+      <LogoWordmark />
+    </Box>
+  </VStack>
+  <VStack gap={2}>
+    <Text font="label2" color="fgMuted">
+      Width-constrained (150px width)
+    </Text>
+    <Box width="150px">
+      <LogoWordmark />
+    </Box>
+  </VStack>
+</VStack>
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `foreground` | `boolean` | No | `-` | - |
+
+