@coinbase/cds-mcp-server 8.40.2 → 8.42.0

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

@@ -0,0 +1,800 @@
+# DataCard
+
+A flexible card component for displaying data with visualizations like progress bars and circles. It supports horizontal and vertical layouts with customizable thumbnails and title accessories.
+
+## Import
+
+```tsx
+import { DataCard } from '@coinbase/cds-web/alpha/data-card'
+```
+
+## Examples
+
+DataCard is a flexible card component for displaying data with visualizations. It provides a structured layout for thumbnails, titles, subtitles, and visualization content. Pass any visualization component as children, such as `ProgressBar`, `ProgressCircle`, `LineChart`, or custom content.
+
+:::info Migrating from Legacy DataCard?
+See the [Migration Guide](#migration-from-legacy-datacard) at the end of this page.
+:::
+
+### Basic Examples
+
+DataCard supports two layouts: `vertical` (stacked) and `horizontal` (side-by-side). Pass visualization components as children.
+
+```jsx live
+function Example() {
+  const exampleThumbnail = (
+    <RemoteImage alt="Ethereum thumbnail" shape="circle" size="l" src={ethBackground} />
+  );
+
+  return (
+    <VStack gap={2} width={480}>
+      <DataCard
+        layout="vertical"
+        subtitle="Progress indicator"
+        thumbnail={exampleThumbnail}
+        title="Progress Bar Card"
+        titleAccessory={
+          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+            ↗ 25.25%
+          </Text>
+        }
+      >
+        <Box paddingTop={6}>
+          <ProgressBarWithFixedLabels
+            labelPlacement="below"
+            startLabel={{
+              value: 45,
+              render: (num) => (
+                <Text color="fgMuted" font="legal">
+                  {num}%
+                </Text>
+              ),
+            }}
+          >
+            <ProgressBar accessibilityLabel="45% complete" progress={0.45} weight="semiheavy" />
+          </ProgressBarWithFixedLabels>
+        </Box>
+      </DataCard>
+      <DataCard
+        layout="horizontal"
+        subtitle="Circular progress"
+        thumbnail={exampleThumbnail}
+        title="Progress Circle Card"
+        titleAccessory={
+          <Text color="fgNegative" font="label1">
+            ↘ 3.12%
+          </Text>
+        }
+      >
+        <Box alignItems="center" height="100%">
+          <ProgressCircle
+            accessibilityLabel="60% complete"
+            progress={0.6}
+            size={100}
+            weight="heavy"
+          />
+        </Box>
+      </DataCard>
+    </VStack>
+  );
+}
+```
+
+### With LineChart
+
+DataCard can also display chart visualizations like LineChart for showing price trends or time-series data.
+
+```jsx live
+function Example() {
+  const lineChartData = useMemo(
+    () => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58, 42, 65, 78, 55, 40, 62],
+    [],
+  );
+
+  const lineChartSeries = useMemo(
+    () => [
+      {
+        id: 'price',
+        data: lineChartData,
+        color: 'var(--color-accentBoldBlue)',
+      },
+    ],
+    [lineChartData],
+  );
+
+  return (
+    <VStack gap={2} width={480}>
+      <DataCard
+        layout="vertical"
+        subtitle="Price trend"
+        thumbnail={
+          <RemoteImage alt="Ethereum thumbnail" shape="circle" size="l" src={ethBackground} />
+        }
+        title="Line Chart Card"
+      >
+        <LineChart
+          showArea
+          accessibilityLabel="Ethereum price chart"
+          areaType="dotted"
+          height={120}
+          inset={0}
+          series={lineChartSeries}
+        />
+      </DataCard>
+      <DataCard
+        layout="vertical"
+        subtitle="Price trend"
+        thumbnail={
+          <RemoteImage alt="Bitcoin thumbnail" shape="circle" size="l" src={assets.btc.imageUrl} />
+        }
+        title="Chart with Trend"
+        titleAccessory={
+          <Text color="fgNegative" font="label1">
+            ↘ 5.8%
+          </Text>
+        }
+      >
+        <LineChart
+          showArea
+          accessibilityLabel="Bitcoin price chart"
+          areaType="dotted"
+          height={100}
+          inset={0}
+          series={lineChartSeries}
+        />
+      </DataCard>
+      <DataCard
+        renderAsPressable
+        as="a"
+        href="https://www.coinbase.com"
+        layout="vertical"
+        subtitle="Clickable line chart card"
+        target="_blank"
+        thumbnail={
+          <RemoteImage alt="Ethereum thumbnail" shape="circle" size="l" src={ethBackground} />
+        }
+        title="Actionable Chart Card"
+        titleAccessory={
+          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+            ↗ 8.5%
+          </Text>
+        }
+      >
+        <LineChart
+          showArea
+          accessibilityLabel="Ethereum price chart"
+          areaType="dotted"
+          height={120}
+          inset={0}
+          series={lineChartSeries}
+        />
+      </DataCard>
+    </VStack>
+  );
+}
+```
+
+### Layout Variations
+
+Use `layout="vertical"` for stacked layouts (thumbnail on left, visualization below) or `layout="horizontal"` for side-by-side layouts (header on left, visualization on right).
+
+```jsx live
+function Example() {
+  const exampleThumbnail = (
+    <RemoteImage alt="Ethereum thumbnail" shape="circle" size="l" src={ethBackground} />
+  );
+
+  return (
+    <VStack gap={2} width={480}>
+      <DataCard
+        layout="vertical"
+        subtitle="Vertical layout stacks content"
+        thumbnail={exampleThumbnail}
+        title="Vertical Layout"
+      >
+        <Box paddingTop={6}>
+          <ProgressBarWithFixedLabels
+            labelPlacement="below"
+            startLabel={{
+              value: 75,
+              render: (num) => (
+                <Text color="fgMuted" font="legal">
+                  {num}%
+                </Text>
+              ),
+            }}
+          >
+            <ProgressBar accessibilityLabel="75% complete" progress={0.75} weight="semiheavy" />
+          </ProgressBarWithFixedLabels>
+        </Box>
+      </DataCard>
+      <DataCard
+        layout="horizontal"
+        subtitle="Horizontal layout places content side by side"
+        thumbnail={exampleThumbnail}
+        title="Horizontal Layout"
+      >
+        <Box alignItems="center" height="100%">
+          <ProgressCircle
+            accessibilityLabel="75% complete"
+            progress={0.75}
+            size={100}
+            weight="heavy"
+          />
+        </Box>
+      </DataCard>
+    </VStack>
+  );
+}
+```
+
+### Title Accessory
+
+Use `titleAccessory` to display supplementary information inline with the title, such as trends, percentages, or status indicators.
+
+```jsx live
+function Example() {
+  const exampleThumbnail = (
+    <RemoteImage alt="Ethereum thumbnail" shape="circle" size="l" src={ethBackground} />
+  );
+
+  return (
+    <VStack gap={2} width={480}>
+      <DataCard
+        layout="vertical"
+        subtitle="With positive trend"
+        thumbnail={exampleThumbnail}
+        title="Positive Trend"
+        titleAccessory={
+          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+            ↗ 8.5%
+          </Text>
+        }
+      >
+        <Box paddingTop={6}>
+          <ProgressBarWithFixedLabels
+            labelPlacement="below"
+            startLabel={{
+              value: 90,
+              render: (num) => (
+                <Text color="fgMuted" font="legal">
+                  {num}%
+                </Text>
+              ),
+            }}
+          >
+            <ProgressBar accessibilityLabel="90% complete" progress={0.9} weight="semiheavy" />
+          </ProgressBarWithFixedLabels>
+        </Box>
+      </DataCard>
+      <DataCard
+        layout="horizontal"
+        subtitle="With negative trend"
+        thumbnail={exampleThumbnail}
+        title="Negative Trend"
+        titleAccessory={
+          <Text color="fgNegative" font="label1">
+            ↘ 4.2%
+          </Text>
+        }
+      >
+        <Box alignItems="center" height="100%">
+          <ProgressCircle
+            accessibilityLabel="70% complete"
+            progress={0.7}
+            size={100}
+            weight="heavy"
+          />
+        </Box>
+      </DataCard>
+    </VStack>
+  );
+}
+```
+
+### Interactive Cards
+
+Use `renderAsPressable` to make the card interactive. You can render as a button with `onClick` or as a link with `as="a"` and `href`.
+
+```jsx live
+function Example() {
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+
+  const exampleThumbnail = (
+    <RemoteImage alt="Ethereum thumbnail" shape="circle" size="l" src={ethBackground} />
+  );
+
+  return (
+    <VStack gap={2} width={480}>
+      <DataCard
+        ref={ref1}
+        renderAsPressable
+        aria-label="View progress details"
+        layout="vertical"
+        onClick={() => alert('Progress bar card clicked!')}
+        subtitle="Clickable progress card"
+        thumbnail={exampleThumbnail}
+        title="Click to View Details"
+        titleAccessory={
+          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+            ↗ 8.5%
+          </Text>
+        }
+      >
+        <Box paddingTop={6}>
+          <ProgressBarWithFixedLabels
+            labelPlacement="below"
+            startLabel={{
+              value: 75,
+              render: (num) => (
+                <Text color="fgMuted" font="legal">
+                  {num}%
+                </Text>
+              ),
+            }}
+          >
+            <ProgressBar accessibilityLabel="75% complete" progress={0.75} weight="semiheavy" />
+          </ProgressBarWithFixedLabels>
+        </Box>
+      </DataCard>
+      <DataCard
+        ref={ref2}
+        renderAsPressable
+        aria-label="Open Coinbase in new tab"
+        as="a"
+        href="https://www.coinbase.com"
+        layout="horizontal"
+        subtitle="Card with link"
+        target="_blank"
+        thumbnail={exampleThumbnail}
+        title="Open in New Tab"
+        titleAccessory={
+          <Text color="fgMuted" font="label1">
+            External
+          </Text>
+        }
+      >
+        <Box alignItems="center" height="100%">
+          <ProgressCircle
+            accessibilityLabel="85% complete"
+            progress={0.85}
+            size={100}
+            weight="heavy"
+          />
+        </Box>
+      </DataCard>
+    </VStack>
+  );
+}
+```
+
+### Style Customization
+
+Use `styles` and `classNames` props to customize specific parts of the card layout.
+
+```jsx live
+function Example() {
+  const exampleThumbnail = (
+    <RemoteImage alt="Ethereum thumbnail" shape="circle" size="l" src={ethBackground} />
+  );
+
+  return (
+    <VStack gap={2} width={480}>
+      <DataCard
+        layout="vertical"
+        styles={{
+          root: { borderWidth: 2, borderColor: '#0066FF' },
+        }}
+        subtitle="Custom border"
+        thumbnail={exampleThumbnail}
+        title="Custom Root Styles"
+      >
+        <Box paddingTop={6}>
+          <ProgressBarWithFixedLabels
+            labelPlacement="below"
+            startLabel={{
+              value: 50,
+              render: (num) => (
+                <Text color="fgMuted" font="legal">
+                  {num}%
+                </Text>
+              ),
+            }}
+          >
+            <ProgressBar accessibilityLabel="50% complete" progress={0.5} weight="semiheavy" />
+          </ProgressBarWithFixedLabels>
+        </Box>
+      </DataCard>
+      <DataCard
+        layout="horizontal"
+        styles={{
+          root: { backgroundColor: '#F5F5F5' },
+          headerContainer: { paddingInlineStart: 'var(--space-4)' },
+        }}
+        subtitle="Custom background and padding"
+        thumbnail={exampleThumbnail}
+        title="Custom Layout Styles"
+      >
+        <Box alignItems="center" height="100%">
+          <ProgressCircle
+            accessibilityLabel="70% complete"
+            progress={0.7}
+            size={100}
+            weight="heavy"
+          />
+        </Box>
+      </DataCard>
+    </VStack>
+  );
+}
+```
+
+### Multiple Cards
+
+DataCards work well in lists or dashboards to display multiple data points.
+
+```jsx live
+function Example() {
+  const exampleThumbnail = (
+    <RemoteImage alt="Ethereum thumbnail" shape="circle" size="l" src={ethBackground} />
+  );
+
+  return (
+    <VStack gap={2} width={480}>
+      <DataCard
+        layout="vertical"
+        subtitle="Daily goal progress"
+        thumbnail={exampleThumbnail}
+        title="Steps Today"
+        titleAccessory={
+          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+            6,500 / 10,000
+          </Text>
+        }
+      >
+        <Box paddingTop={6}>
+          <ProgressBarWithFixedLabels
+            labelPlacement="below"
+            startLabel={{
+              value: 65,
+              render: (num) => (
+                <Text color="fgMuted" font="legal">
+                  {num}%
+                </Text>
+              ),
+            }}
+          >
+            <ProgressBar accessibilityLabel="65% complete" progress={0.65} weight="semiheavy" />
+          </ProgressBarWithFixedLabels>
+        </Box>
+      </DataCard>
+      <DataCard
+        layout="horizontal"
+        subtitle="Below target this week"
+        thumbnail={exampleThumbnail}
+        title="Workout Goal"
+        titleAccessory={
+          <Text color="fgNegative" font="label1">
+            2 / 7 days
+          </Text>
+        }
+      >
+        <Box alignItems="center" height="100%">
+          <ProgressCircle
+            accessibilityLabel="29% complete"
+            progress={0.29}
+            size={100}
+            weight="heavy"
+          />
+        </Box>
+      </DataCard>
+    </VStack>
+  );
+}
+```
+
+### Accessibility
+
+Ensure all visualization components have appropriate `accessibilityLabel` props to convey the progress information to screen readers.
+
+#### Interactive Cards
+
+When making DataCard interactive with `renderAsPressable`:
+
+- If `as` is set to `"button"` or `"a"`, `renderAsPressable` defaults to `true` automatically. Add an `accessibilityLabel` to summarize the card's content for screen reader users, ensuring all visual text of the card is included in the label (e.g., `accessibilityLabel="ETH Holdings, 45% progress, View details"`)
+
+```jsx live
+<DataCard
+  renderAsPressable
+  accessibilityLabel="ETH Holdings, 45% progress, View details"
+  as="button"
+  onClick={() => handleClick()}
+  title="ETH Holdings"
+  subtitle="45% progress"
+  width={480}
+>
+  <Box paddingTop={6}>
+    <ProgressBarWithFixedLabels
+      labelPlacement="below"
+      startLabel={{
+        value: 45,
+        render: (num) => (
+          <Text color="fgMuted" font="legal">
+            {num}%
+          </Text>
+        ),
+      }}
+    >
+      <ProgressBar accessibilityLabel="45% complete" progress={0.45} weight="semiheavy" />
+    </ProgressBarWithFixedLabels>
+  </Box>
+</DataCard>
+```
+
+:::warning Avoid Nested Interactive Elements
+Don't place buttons or links inside an interactive card, as this creates accessibility issues for screen reader users and can cause unexpected behavior when clicking.
+:::
+
+#### Heading Semantics
+
+By default, the `title` prop renders as a `<div>`. If you need the title to be a proper heading element for document structure, pass a custom `Text` node with the `as` prop:
+
+```jsx
+<DataCard
+  title={
+    <Text as="h3" font="headline">
+      Card Title
+    </Text>
+  }
+  // ...other props
+/>
+```
+
+#### Color Contrast for Gain/Loss Text
+
+When displaying gain or loss percentages in DataCard, be aware of color contrast differences between light and dark modes.
+
+**Why this matters:** DataCard uses `bgAlternate` as its background color. In **light mode**, the semantic `fgPositive` token does not meet WCAG AA contrast requirements:
+
+| Mode  | Color                    | Background               | Contrast Ratio | WCAG AA (4.5:1) |
+| ----- | ------------------------ | ------------------------ | -------------- | --------------- |
+| Light | `fgPositive` (`green60`) | `bgAlternate` (`gray10`) | ~3.6:1         | ❌ Fails        |
+| Light | `green70`                | `bgAlternate` (`gray10`) | ~4.8:1         | ✅ Passes       |
+| Dark  | `fgPositive` (`green60`) | `bgAlternate` (`gray5`)  | ~6.2:1         | ✅ Passes       |
+
+**Recommendation:**
+
+- **Light mode**: Use `green70` for positive values instead of `fgPositive`
+- **Dark mode**: `fgPositive` meets WCAG AA requirements and can be used as-is
+- **Both modes**: `fgNegative` meets WCAG AA requirements
+
+**On web**, use CSS variables for light mode compatibility:
+
+```jsx
+{
+  /* Gain text */
+}
+<Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+  ↗ 12.5%
+</Text>;
+
+{
+  /* Loss text */
+}
+<Text color="fgNegative" font="label1">
+  ↘ 3.2%
+</Text>;
+```
+
+```jsx live
+function Example() {
+  const exampleThumbnail = (
+    <RemoteImage alt="Ethereum logo" shape="circle" size="l" src={ethBackground} />
+  );
+
+  return (
+    <VStack gap={2} width={480}>
+      <DataCard
+        layout="vertical"
+        subtitle="Portfolio allocation"
+        thumbnail={exampleThumbnail}
+        title="ETH Holdings"
+        titleAccessory={
+          <Text dangerouslySetColor="rgb(var(--green70))" font="label1">
+            ↗ 12.5%
+          </Text>
+        }
+      >
+        <Box paddingTop={6}>
+          <ProgressBarWithFixedLabels
+            labelPlacement="below"
+            startLabel={{
+              value: 80,
+              render: (num) => (
+                <Text color="fgMuted" font="legal">
+                  {num}%
+                </Text>
+              ),
+            }}
+          >
+            <ProgressBar
+              accessibilityLabel="ETH holdings at 80% of target, currently $4,000 of $5,000 goal"
+              progress={0.8}
+              weight="semiheavy"
+            />
+          </ProgressBarWithFixedLabels>
+        </Box>
+      </DataCard>
+    </VStack>
+  );
+}
+```
+
+### Migration from Legacy DataCard
+
+The new `DataCard` from `@coinbase/cds-web/alpha/data-card` replaces the legacy `DataCard`. The new version provides more flexibility with custom layouts and visualization components.
+
+**Before:**
+
+```jsx
+import { DataCard } from '@coinbase/cds-web/cards/DataCard';
+
+<DataCard
+  title="Progress"
+  description="45% complete"
+  progress={0.45}
+  progressVariant="bar"
+  startLabel={45}
+/>;
+```
+
+**After:**
+
+```jsx
+import { DataCard } from '@coinbase/cds-web/alpha/data-card';
+
+<DataCard
+  title="Progress"
+  subtitle="45% complete"
+  layout="vertical"
+  thumbnail={<RemoteImage src={assetUrl} shape="circle" size="l" />}
+>
+  <Box paddingTop={6}>
+    <ProgressBarWithFixedLabels
+      startLabel={{
+        value: 45,
+        render: (num) => (
+          <Text color="fgMuted" font="legal">
+            {num}%
+          </Text>
+        ),
+      }}
+      labelPlacement="below"
+    >
+      <ProgressBar accessibilityLabel="45% complete" progress={0.45} weight="semiheavy" />
+    </ProgressBarWithFixedLabels>
+  </Box>
+</DataCard>;
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `layout` | `horizontal \| vertical` | Yes | `'vertical'` | Layout orientation of the card. Horizontal places header and visualization side by side, vertical stacks them. |
+| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Text or React node to display as the card title. Use a Text component to override default color and font. |
+| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `as` | `symbol \| object \| style \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | The underlying element or component the polymorphic component will render.  Changing as also changes the inherited native props (e.g. href for as=a) and the expected ref type. |
+| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | 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 | `-` | Background color of the overlay (element being interacted with). |
+| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
+| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
+| `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 | `-` | Border color of the element. |
+| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
+| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
+| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
+| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
+| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
+| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
+| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
+| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
+| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Child node to display as the visualization (e.g., ProgressBar or ProgressCircle). |
+| `className` | `string` | No | `-` | Apply class names to the outer container. |
+| `classNames` | `({ layoutContainer?: string; headerContainer?: string \| undefined; textContainer?: string \| undefined; titleContainer?: string \| undefined; } & { root?: string \| undefined; }) \| undefined` | No | `-` | - |
+| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
+| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
+| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
+| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
+| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
+| `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
+| `focusable` | `boolean` | No | `-` | - |
+| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
+| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
+| `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
+| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
+| `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
+| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
+| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
+| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| space-between \| space-around \| space-evenly>` | No | `-` | - |
+| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
+| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
+| `loading` | `boolean` | No | `-` | Is the element currenty loading. When set to true, will disable element from press and keyboard events |
+| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
+| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
+| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
+| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
+| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
+| `pressed` | `boolean` | No | `-` | Is the element being pressed. Primarily a mobile feature, but can be used on the web. |
+| `ref` | `any` | No | `-` | - |
+| `renderAsPressable` | `boolean` | No | `true if `as` is 'button' or 'a', otherwise false` | If true, the CardRoot will be rendered as a Pressable component. When false, renders as an HStack for layout purposes. |
+| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `style` | `CSSProperties` | No | `-` | - |
+| `styles` | `({ layoutContainer?: CSSProperties; headerContainer?: CSSProperties \| undefined; textContainer?: CSSProperties \| undefined; titleContainer?: CSSProperties \| undefined; } & { root?: CSSProperties \| undefined; }) \| undefined` | No | `-` | - |
+| `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or React node to display as the card subtitle. Use a Text component to override default color and font. |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
+| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
+| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
+| `thumbnail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to display as a thumbnail in the header area. |
+| `titleAccessory` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to display as a title accessory. |
+| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
+| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
+| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
+| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
+| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
+| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
+| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+
+