@coinbase/cds-mcp-server 8.17.2 → 8.17.3

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

@@ -0,0 +1,166 @@
+# TableCell
+
+Defines individual cells within a Table.
+
+## Import
+
+```jsx
+import { TableCell } from '@coinbase/cds-web/tables/TableCell'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `'center'` | This prop us useful for aligning the last item to the right, or top-aligning cells |
+| `as` | `td \| th` | No | ``th` when rendered inside a TableHeader, `td` when rendered inside a TableBody or TableFooter` | Use as=th to mark this cell as a header for screen readers |
+| `dangerouslySetHtmlWidth` | `string \| number` | No | `undefined` | - |
+| `direction` | `horizontal \| vertical` | No | `vertical` | Direction provides content flow control. Use vertical to inherit a VStask, horizontal for an HStack |
+| `end` | `ReactElement` | No | `undefined` | Element (icon, asset, image, etc) to display at the end of the cell |
+| `innerSpacing` | `CellSpacing` | No | `{ spacingHorizontal: 0 }` | The spacing to use on the inner content of Cell |
+| `justifyContent` | `space-evenly \| FlexAxisValue \| FlexSpaceCommon` | No | `'flex-start'` | This prop us useful for right-aligning the last column |
+| `onChange` | `FormEventHandler<HTMLTableCellElement>` | No | `-` | - |
+| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell |
+| `overflow` | `clip \| wrap \| truncate \| break` | No | `false` | Should the title/subtitle text truncate |
+| `start` | `ReactElement` | No | `undefined` | Element (icon, asset, image, etc) to display at the start of the cell |
+| `subtitle` | `string` | No | `undefined` | A subtitle will appear below the title with font=label2. |
+| `subtitleColor` | `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 | `-` | - |
+| `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 |
+| `titleColor` | `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 | `-` | - |
+
+
+## Examples
+
+### Basic usage
+
+```tsx live
+<Table variant="ruled" bordered>
+  <TableHeader>
+    <TableRow backgroundColor="bgAlternate">
+      <TableCell title="First Header" />
+      <TableCell>
+        <TextHeadline as="p" color="currentColor">
+          Second Header
+        </TextHeadline>
+      </TableCell>
+      <TableCell title="Third Header" />
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell
+        overflow="truncate"
+        start={
+          <Box spacingEnd={1}>
+            <Avatar
+              name="John Doe"
+              src="https://avatars.slack-edge.com/2019-12-09/865473396980_e8c83b072b452e4d03f7_192.jpg"
+            />
+          </Box>
+        }
+        title="Bitcoin"
+        subtitle="BTC and I'm like please please truncate me"
+      />
+      <TableCell
+        overflow="truncate"
+        alignItems="flex-start"
+        title="$2,475.68"
+        subtitle="0.11882557"
+      />
+      <TableCell>
+        <TextHeadline as="h2" color="currentColor">
+          $2,221.01
+        </TextHeadline>
+        <TextLabel2 as="p" color="foregroundMuted">
+          0.1519581 BTC
+        </TextLabel2>
+      </TableCell>
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell title="First Item (footer)" />
+      <TableCell title="Second Item (footer)" />
+      <TableCell title="Third Item (footer)" />
+    </TableRow>
+  </TableFooter>
+</Table>
+```
+
+### Custom Cell Spacing
+
+```tsx live
+<Table
+  variant="ruled"
+  bordered
+  cellSpacing={{
+    outer: { spacingHorizontal: 2, spacingVertical: 2 },
+    inner: { spacingHorizontal: 2, spacingVertical: 2 },
+  }}
+>
+  <TableHeader>
+    <TableRow>
+      <TableCell title="Name" />
+      <TableCell title="Email" />
+      <TableCell title="Role" />
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell
+        innerSpacing={{ spacingHorizontal: 2, spacingVertical: 0 }}
+        outerSpacing={{ spacingHorizontal: 2, spacingVertical: 0 }}
+        start={<Avatar name="Bob Smith" />}
+        title="Bob Smith"
+        subtitle="Junior Developer"
+      />
+      <TableCell title="example@example.com" />
+      <TableCell title="Engineering" subtitle="Full-time" />
+    </TableRow>
+    <TableRow>
+      <TableCell
+        innerSpacing={{ spacingHorizontal: 5, spacingVertical: 5 }}
+        outerSpacing={{ spacingHorizontal: 5, spacingVertical: 5 }}
+        start={<Avatar name="Alice Smith" />}
+        title="Alice Smith"
+        subtitle="Senior Developer"
+      />
+      <TableCell title="example@example.com" />
+      <TableCell title="Engineering" subtitle="Full-time" />
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Accessibility Example - Multiple Headers
+
+```tsx live
+<Table maxHeight={300} bordered variant="ruled">
+  <TableHeader sticky>
+    <TableRow backgroundColor="bgAlternate">
+      <TableCell title="Currency" />
+      <TableCell title="Balance" />
+      <TableCell title="Status" alignItems="flex-end" />
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell title="BTC" as="th" scope="row" />
+      <TableCell title="$100" />
+      <TableCell title="Pending" alignItems="flex-end" />
+    </TableRow>
+    <TableRow>
+      <TableCell title="ETH" as="th" scope="row" />
+      <TableCell title="$200" />
+      <TableCell title="Complete" alignItems="flex-end" />
+    </TableRow>
+    <TableRow>
+      <TableCell title="APE" as="th" scope="row" />
+      <TableCell title="$300" />
+      <TableCell title="Complete" alignItems="flex-end" />
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+

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

@@ -0,0 +1,98 @@
+# TableCellFallback
+
+Shows a loading state for Table cells.
+
+## Import
+
+```jsx
+import { TableCellFallback } from '@coinbase/cds-web/tables/TableCellFallback'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `as` | `td \| th` | No | ``th` when rendered inside a TableHeader, `td` when rendered inside a TableBody or TableFooter` | Use as=th to mark this cell as a header for screen readers |
+| `disableRandomRectWidth` | `boolean` | No | `-` | Disables randomization of rectangle fallback width. |
+| `end` | `avatar \| image \| icon \| pictogram \| asset` | No | `-` | Display end shimmer with a shape according to type. |
+| `innerSpacing` | `CellSpacing` | No | `{ spacingHorizontal: 0 }` | The spacing to use on the inner content of Cell |
+| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell |
+| `rectWidthVariant` | `number` | No | `-` | Creates a variant that contains rectangle fallbacks of deterministic width. Variants map to a predetermined set of width values, which are cycled through repeatedly when the set is exhausted. |
+| `start` | `avatar \| image \| icon \| pictogram \| asset` | No | `-` | Display start shimmer with a shape according to type. |
+| `subtitle` | `boolean` | No | `-` | Display subtitle shimmer. |
+| `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 |
+| `title` | `boolean` | No | `-` | Display title shimmer. |
+
+
+## Examples
+
+### Basic usage
+
+```tsx live
+<Table bordered variant="graph">
+  <TableHeader>
+    <TableRow>
+      <TableCellFallback title />
+      <TableCellFallback title subtitle />
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCellFallback title subtitle start="image" />
+      <TableCellFallback title subtitle end="image" />
+    </TableRow>
+    <TableRow>
+      <TableCellFallback title subtitle start="asset" />
+      <TableCellFallback title subtitle end="asset" />
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Media Types
+
+```tsx live
+<Table bordered variant="graph">
+  <TableBody>
+    <TableRow>
+      <TableCellFallback title subtitle start="avatar" />
+      <TableCellFallback title subtitle start="icon" />
+    </TableRow>
+    <TableRow>
+      <TableCellFallback title subtitle start="pictogram" />
+      <TableCellFallback title subtitle start="image" />
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Custom Rectangle Widths
+
+:::tip Rectangular fallback widths
+
+This component contains rectangular fallbacks, the widths for which are randomized within a predetermined threshold by default (e.g. to add some variety when mulitple fallbacks are presented together). If this behavior is undesirable (e.g. in server-side rendered web apps), randomization can be disabled with the `disableRandomRectWidth` prop.
+
+<br />
+
+Alternatively, you may create a variant with different rectangle widths by setting a number value on the `rectWidthVariant` prop. Variants map to a predetermined set of width values, which are cycled through repeatedly when the set is exhausted. Therefore, it's still possible to achieve some variety in your fallbacks, but in a deterministic manner (i.e. safe for server-side rendering). Here's an example:
+
+<br />
+:::
+<br />
+
+```tsx live
+<Table bordered variant="graph">
+  <TableBody>
+    <TableRow>
+      <TableCellFallback title subtitle start="image" rectWidthVariant={0} disableRandomRectWidth />
+      <TableCellFallback title subtitle end="image" rectWidthVariant={1} disableRandomRectWidth />
+    </TableRow>
+    <TableRow>
+      <TableCellFallback title subtitle start="asset" rectWidthVariant={2} disableRandomRectWidth />
+      <TableCellFallback title subtitle end="asset" rectWidthVariant={3} disableRandomRectWidth />
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+

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

@@ -0,0 +1,84 @@
+# TableFooter
+
+Defines the footer section of Table.
+
+## Import
+
+```jsx
+import { TableFooter } from '@coinbase/cds-web/tables/TableFooter'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `as` | `div \| tbody \| tfoot \| thead` | No | `undefined` | Internal only |
+| `className` | `string` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
+
+## Examples
+
+### Basic usage
+
+```tsx live
+<Table bordered variant="ruled">
+  <TableHeader>
+    <TableRow>
+      <TableCell title="Item" />
+      <TableCell title="Price" />
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell title="Product A" />
+      <TableCell title="$100" />
+    </TableRow>
+    <TableRow>
+      <TableCell title="Product B" />
+      <TableCell title="$200" />
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell title="Total" />
+      <TableCell title="$300" />
+    </TableRow>
+  </TableFooter>
+</Table>
+```
+
+### Footer with Summary Data
+
+```tsx live
+<Table bordered variant="ruled">
+  <TableHeader>
+    <TableRow>
+      <TableCell title="Quarter" />
+      <TableCell title="Revenue" />
+      <TableCell title="Growth" alignItems="flex-end" />
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell title="Q1" />
+      <TableCell title="$1.2M" />
+      <TableCell title="+5%" alignItems="flex-end" />
+    </TableRow>
+    <TableRow>
+      <TableCell title="Q2" />
+      <TableCell title="$1.4M" />
+      <TableCell title="+16%" alignItems="flex-end" />
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow backgroundColor="bgAlternate">
+      <TableCell title="YTD" color="primary" />
+      <TableCell title="$2.6M" color="primary" />
+      <TableCell title="+21%" color="primary" alignItems="flex-end" />
+    </TableRow>
+  </TableFooter>
+</Table>
+```
+
+

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

@@ -0,0 +1,101 @@
+# TableHeader
+
+Defines the header section of Table.
+
+## Import
+
+```jsx
+import { TableHeader } from '@coinbase/cds-web/tables/TableHeader'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `as` | `div \| tbody \| tfoot \| thead` | No | `undefined` | Internal only |
+| `className` | `string` | No | `-` | - |
+| `sticky` | `boolean` | No | `false` | Use to make a header stick to the top of the table when scrolled This will require setting a height or maxHeight on the Table or its parent |
+| `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 |
+
+
+## Examples
+
+### Basic usage
+
+```tsx live
+<Table bordered variant="ruled">
+  <TableHeader>
+    <TableRow>
+      <TableCell title="TableHeader" subtitle="This is the TableHeader" />
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell title="TableBody" subtitle="This is the TableBody" />
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell title="TableFooter" subtitle="This is the TableFooter" />
+    </TableRow>
+  </TableFooter>
+</Table>
+```
+
+### Sticky Header Example
+
+```tsx live
+<Box height={300} overflow="auto" border="1px solid" borderColor="border">
+  <Table>
+    <TableHeader sticky>
+      <TableRow>
+        <TableCell>Name</TableCell>
+        <TableCell>Role</TableCell>
+        <TableCell>Department</TableCell>
+        <TableCell>Location</TableCell>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {Array.from({ length: 20 }, (_, i) => (
+        <TableRow key={i}>
+          <TableCell>Employee {i + 1}</TableCell>
+          <TableCell>{['Developer', 'Designer', 'Manager', 'Analyst'][i % 4]}</TableCell>
+          <TableCell>{['Engineering', 'Design', 'Product', 'Sales'][i % 4]}</TableCell>
+          <TableCell>{['New York', 'London', 'Tokyo', 'Berlin'][i % 4]}</TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+</Box>
+```
+
+### Multiple Columns Example
+
+```tsx live
+<Table bordered>
+  <TableHeader>
+    <TableRow>
+      <TableCell>ID</TableCell>
+      <TableCell>Name</TableCell>
+      <TableCell>Status</TableCell>
+      <TableCell>Date</TableCell>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>001</TableCell>
+      <TableCell>Project Alpha</TableCell>
+      <TableCell>Active</TableCell>
+      <TableCell>2024-03-20</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>002</TableCell>
+      <TableCell>Project Beta</TableCell>
+      <TableCell>Pending</TableCell>
+      <TableCell>2024-03-21</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+

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

@@ -0,0 +1,141 @@
+# TableRow
+
+Defines rows within a Table.
+
+## Import
+
+```jsx
+import { TableRow } from '@coinbase/cds-web/tables/TableRow'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `backgroundColor` | `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 | `undefined` | Set the background color for this entire row to some CDS Palette background color name |
+| `disableHoverIndicator` | `boolean` | No | `false` | By default, we set a hover background color of palette.backgroundAlternate on hover for the row. Use this prop to disable this behavior |
+| `fullWidth` | `boolean` | No | `undefined` | Should this row span the entire width of the table? Useful for treating a row as a Control Strip. |
+| `innerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the inner content of Cell. Will only take effect when fullWidth is set to true |
+| `onChange` | `FormEventHandler<HTMLTableRowElement>` | No | `-` | - |
+| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell. Will only take effect when fullWidth is set to true |
+| `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 |
+
+
+## Examples
+
+### Basic usage
+
+```tsx live
+<Table bordered variant="ruled">
+  <TableBody>
+    <TableRow>
+      <TableCell title="Basic Row" />
+    </TableRow>
+    <TableRow backgroundColor="bgAlternate">
+      <TableCell title="Row with Background" />
+    </TableRow>
+    <TableRow color="fgPrimary">
+      <TableCell title="Row with Custom Text Color" />
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Interactive Rows
+
+```tsx live
+function InteractiveExample() {
+  const handlePress = () => console.log('Row clicked');
+
+  return (
+    <Table bordered>
+      <TableBody>
+        <TableRow onClick={handlePress}>
+          <TableCell
+            direction="horizontal"
+            title="Clickable Row"
+            end={
+              <Button variant="secondary" compact>
+                Action
+              </Button>
+            }
+          />
+        </TableRow>
+        <TableRow onClick={handlePress} disableHoverIndicator>
+          <TableCell
+            direction="horizontal"
+            title="Clickable Row (No Hover)"
+            end={
+              <Button variant="secondary" compact>
+                Action
+              </Button>
+            }
+          />
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Full Width Rows
+
+```tsx live
+<Table bordered>
+  <TableBody>
+    <TableRow fullWidth>
+      <HStack gap={2} alignItems="center">
+        <Icon name="check" />
+        <Text>Full Width Content</Text>
+        <Button variant="secondary" compact>
+          Action
+        </Button>
+      </HStack>
+    </TableRow>
+    <TableRow fullWidth>
+      <HStack gap={2} alignItems="center">
+        <Icon active name="warning" />
+        <Text>Another Full Width Row</Text>
+        <Button variant="secondary" compact>
+          Action
+        </Button>
+      </HStack>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Responsive Spacing
+
+```tsx live
+function ResponsiveExample() {
+  const responsiveConfig = {
+    phone: {
+      innerSpacing: { spacingHorizontal: 2 },
+      outerSpacing: { spacingVertical: 1 },
+    },
+    desktop: {
+      innerSpacing: { spacingHorizontal: 4 },
+      outerSpacing: { spacingVertical: 2 },
+    },
+  };
+
+  return (
+    <Table bordered>
+      <TableBody>
+        <TableRow fullWidth innerSpacing={responsiveConfig.phone.innerSpacing}>
+          <HStack gap={2} alignItems="center">
+            <Icon name="check" />
+            <Text>Responsive Spacing Row</Text>
+            <Button variant="secondary" compact>
+              Action
+            </Button>
+          </HStack>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+