@tempoxyz/ds 0.3.9 → 0.3.11

package/dist/docs/components/list-group.md

@@ -0,0 +1,981 @@
+# ListGroup
+
+Stacks rows for details, pickers, checklists, and settings.
+
+[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/ListGroup.tsx)
+
+Figma: [Content/List Group](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-1837), [Content/List Row](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-1666) (`ListGroup.Row`), [Content/Prompt Row](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3419) (`ListGroup.Row`)
+
+## Overview
+
+ListGroup lays out key-value facts, pickable items, and checklists, and groups them plain, boxed, or spaced. Plain rows line up with the content around them.
+
+## Examples
+
+### Basic
+
+```tsx
+import { ListGroup, style } from '@tempoxyz/ds'
+
+export const fill = true
+export function Demo() {
+  return (
+    <ListGroup.Root {...styles.rows()}>
+      <ListGroup.Row>
+        <ListGroup.Label>Network</ListGroup.Label>
+        Tempo
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Chain ID</ListGroup.Label>
+        4217
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Network fee</ListGroup.Label>
+        $0.0001
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Status</ListGroup.Label>
+        Confirmed
+      </ListGroup.Row>
+    </ListGroup.Root>
+  )
+}
+
+namespace styles {
+  export const rows = style({ maxWidth: '24rem !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ListGroup/Basic.tsx)
+
+### Variant
+
+Set `variant` on `ListGroup.Root` to `plain` (default), `boxed`, or `spaced`. Name the group with a `ListGroup.Heading` right before it.
+
+```tsx
+import { ListGroup, style } from '@tempoxyz/ds'
+import { Check } from '@tempoxyz/ds/icons'
+
+export function Demo() {
+  return (
+    <div {...styles.grid()}>
+      <div>
+        <ListGroup.Heading>Fees</ListGroup.Heading>
+        <ListGroup.Root variant="boxed">
+          <ListGroup.Row>
+            <ListGroup.Label>Network fee</ListGroup.Label>
+            0.001 USDC
+          </ListGroup.Row>
+          <ListGroup.Row>
+            <ListGroup.Label>Paid in</ListGroup.Label>
+            USDC
+          </ListGroup.Row>
+          <ListGroup.Row>
+            <ListGroup.Label>Arrives</ListGroup.Label>
+            Seconds
+          </ListGroup.Row>
+        </ListGroup.Root>
+      </div>
+      <div>
+        <ListGroup.Heading>Fees</ListGroup.Heading>
+        <ListGroup.Root variant="plain">
+          <ListGroup.Row>
+            <ListGroup.Label>Network fee</ListGroup.Label>
+            0.001 USDC
+          </ListGroup.Row>
+          <ListGroup.Row>
+            <ListGroup.Label>Paid in</ListGroup.Label>
+            USDC
+          </ListGroup.Row>
+          <ListGroup.Row>
+            <ListGroup.Label>Arrives</ListGroup.Label>
+            Seconds
+          </ListGroup.Row>
+        </ListGroup.Root>
+      </div>
+      <div>
+        <ListGroup.Heading>Benefits</ListGroup.Heading>
+        <ListGroup.Root variant="spaced">
+          <ListGroup.Row>
+            <Check {...styles.check()} />
+            Never get locked out if you lose email access
+          </ListGroup.Row>
+          <ListGroup.Row>
+            <Check {...styles.check()} />
+            Approve with your device, no codes
+          </ListGroup.Row>
+          <ListGroup.Row>
+            <Check {...styles.check()} />
+            Stays on your device. Tempo never sees it
+          </ListGroup.Row>
+        </ListGroup.Root>
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const check = style({ color: 'content.positive', flexShrink: '0 !custom', fontSize: '16' })
+
+  export const grid = style({
+    alignItems: 'start',
+    display: 'grid',
+    gap: '24',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(20rem, 1fr)) !custom',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ListGroup/Variant.tsx)
+
+### Title and Description
+
+Stack a `ListGroup.Title` over a `ListGroup.Description` in `ListGroup.Info`, after an [Avatar](/docs/components/avatar). The row grows to 64px.
+
+```tsx
+import { Avatar, ListGroup, style } from '@tempoxyz/ds'
+import { Wallet } from '@tempoxyz/ds/icons'
+
+export function Demo() {
+  return (
+    <div {...styles.list()}>
+      <ListGroup.Heading>Recent</ListGroup.Heading>
+      <ListGroup.Root dividers={false}>
+        <ListGroup.Row action="navigation" onClick={() => {}}>
+          <Avatar size="32">
+            <Avatar.Fallback>MR</Avatar.Fallback>
+          </Avatar>
+          <ListGroup.Info>
+            <ListGroup.Title>Maya Rao</ListGroup.Title>
+            <ListGroup.Description>maya@studio.co</ListGroup.Description>
+          </ListGroup.Info>
+        </ListGroup.Row>
+        <ListGroup.Row action="navigation" onClick={() => {}}>
+          <Avatar size="32">
+            <Avatar.Fallback>AC</Avatar.Fallback>
+          </Avatar>
+          <ListGroup.Info>
+            <ListGroup.Title>Acme Co.</ListGroup.Title>
+            <ListGroup.Description>0x5d21…7e9a</ListGroup.Description>
+          </ListGroup.Info>
+        </ListGroup.Row>
+        <ListGroup.Row action="navigation" onClick={() => {}}>
+          <Avatar size="32">
+            <Avatar.Fallback>
+              <Wallet />
+            </Avatar.Fallback>
+          </Avatar>
+          <ListGroup.Info>
+            <ListGroup.Title>Savings wallet</ListGroup.Title>
+            <ListGroup.Description>0x19be…c044</ListGroup.Description>
+          </ListGroup.Info>
+        </ListGroup.Row>
+      </ListGroup.Root>
+    </div>
+  )
+}
+
+namespace styles {
+  export const list = style({ maxWidth: '25rem !custom', width: '100% !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ListGroup/Items.tsx)
+
+### Large Info
+
+Set `size="large"` on `ListGroup.Info` for the row that introduces a boxed group. It sets a 16px title over a monospace address.
+
+```tsx
+import { Button, formatHex, ListGroup, style } from '@tempoxyz/ds'
+
+const address = '0x7a3f2c1e9b4d5a6f7c8e9d0a1b2c3d4e5fb8e091c2'
+
+export function Demo() {
+  return (
+    <ListGroup.Root variant="boxed" {...styles.rows()}>
+      <ListGroup.Row>
+        <span aria-hidden="true" {...styles.art()} />
+        <ListGroup.Info size="large">
+          <ListGroup.Title>Tempo Wallet</ListGroup.Title>
+          <ListGroup.Description>{formatHex(address, { min: 6 })}</ListGroup.Description>
+        </ListGroup.Info>
+        <Button
+          aria-label="Copy wallet address"
+          onClick={() => void navigator.clipboard.writeText(address)}
+          size="xsmall"
+          variant="secondary"
+        >
+          Copy
+        </Button>
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Network</ListGroup.Label>
+        Tempo Mainnet
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Signed in as</ListGroup.Label>
+        piri@tempo.xyz
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Signers</ListGroup.Label>1 · email
+      </ListGroup.Row>
+    </ListGroup.Root>
+  )
+}
+
+namespace styles {
+  export const art = style({
+    backgroundImage: 'linear-gradient(#1f1a14, #eda866, #261f1a) !custom',
+    borderRadius: 'xs',
+    flexShrink: '0 !custom',
+    height: '40',
+    width: '40',
+  })
+
+  export const rows = style({ maxWidth: '25rem !custom', width: '100% !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ListGroup/Entity.tsx)
+
+### Networks
+
+Lead with a [NetworkLogo](/docs/components/network-logo), and list supported assets in [AssetChip](/docs/components/asset-chip) elements inside a `ListGroup.Chips` under the title.
+
+```tsx
+import { AssetChip, ListGroup, NetworkLogo, style } from '@tempoxyz/ds'
+
+const networks = [
+  { name: 'Base', network: 'base' },
+  { name: 'Ethereum', network: 'ethereum' },
+  { name: 'Polygon', network: 'polygon' },
+] as const
+
+export function Demo() {
+  return (
+    <ListGroup.Root dividers={false} {...styles.rows()}>
+      {networks.map((entry) => (
+        <ListGroup.Row action="navigation" key={entry.network} onClick={() => {}}>
+          <NetworkLogo network={entry.network} size="large" />
+          <ListGroup.Info>
+            <ListGroup.Title>{entry.name}</ListGroup.Title>
+            <ListGroup.Chips>
+              <AssetChip>USDC</AssetChip>
+              <AssetChip>USDT</AssetChip>
+            </ListGroup.Chips>
+          </ListGroup.Info>
+        </ListGroup.Row>
+      ))}
+    </ListGroup.Root>
+  )
+}
+
+namespace styles {
+  export const rows = style({ maxWidth: '25rem !custom', width: '100% !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ListGroup/Networks.tsx)
+
+### Meter
+
+Lead with an [AgentLogo](/docs/components/agent-logo) and end with a `ListGroup.Meter` to show how much of a limit each agent used. The bars line up from row to row.
+
+```tsx
+/** Demonstrates ListGroup rows that show how much of a spending limit each agent used. @module */
+import { AgentLogo, ListGroup, style } from '@tempoxyz/ds'
+
+const agents = [
+  { agent: 'claude', limit: 10, name: 'Claude', spent: 6.6 },
+  { agent: 'codex', limit: 25, name: 'Codex', spent: 4 },
+  { agent: 'cursor', limit: 5, name: 'Cursor', spent: 4.75 },
+] as const
+
+export function Demo() {
+  return (
+    <div {...styles.rows()}>
+      <ListGroup.Heading>Agents</ListGroup.Heading>
+      <ListGroup.Root>
+        {agents.map((entry) => (
+          <ListGroup.Row key={entry.agent}>
+            <AgentLogo agent={entry.agent} />
+            <ListGroup.Info>
+              <ListGroup.Title>{entry.name}</ListGroup.Title>
+            </ListGroup.Info>
+            <ListGroup.Meter
+              aria-label={`${entry.name} spending limit used`}
+              getAriaValueText={() => `${entry.spent.toFixed(2)} of ${entry.limit} USDC`}
+              max={entry.limit}
+              value={entry.spent}
+            >
+              {entry.spent.toFixed(2)} USDC
+            </ListGroup.Meter>
+          </ListGroup.Row>
+        ))}
+      </ListGroup.Root>
+    </div>
+  )
+}
+
+namespace styles {
+  export const rows = style({ maxWidth: '25rem !custom', width: '100% !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ListGroup/Meter.tsx)
+
+### Stacked Value
+
+Put a `ListGroup.Description` above the value in `ListGroup.Info` for a single fact.
+
+```tsx
+import { ListGroup, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <ListGroup.Root variant="spaced" {...styles.rows()}>
+      <ListGroup.Row>
+        <ListGroup.Info>
+          <ListGroup.Description>Signing with</ListGroup.Description>
+          This device
+        </ListGroup.Info>
+      </ListGroup.Row>
+    </ListGroup.Root>
+  )
+}
+
+namespace styles {
+  export const rows = style({ maxWidth: '25rem !custom', width: '100% !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ListGroup/Fact.tsx)
+
+### Action
+
+Set `action="navigation"` on a `ListGroup.Row` that opens something, which adds a chevron. Pass `render` to make it a link, or `onClick` to make it a button.
+
+```tsx
+import { ListGroup, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <ListGroup.Root {...styles.rows()}>
+      <ListGroup.Row action="navigation" render={<a href="#action" />}>
+        Activity
+      </ListGroup.Row>
+      <ListGroup.Row action="navigation" render={<a href="#action" />}>
+        Access keys
+      </ListGroup.Row>
+      <ListGroup.Row onClick={() => {}}>Sign out</ListGroup.Row>
+    </ListGroup.Root>
+  )
+}
+
+namespace styles {
+  export const rows = style({ maxWidth: '24rem !custom', width: '100% !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ListGroup/Action.tsx)
+
+### Radio
+
+Give each row a `value` inside a `ListGroup.RadioGroup` to pick one option. Each row is a bordered radio. Set `disabled` on a row to keep it visible but unavailable.
+
+```tsx
+/** Demonstrates ListGroup rows that pick one account in a ListGroup.RadioGroup. @module */
+import { Avatar, ListGroup, style } from '@tempoxyz/ds'
+
+const accounts = [
+  { detail: 'maya@studio.co', disabled: false, initials: 'MR', name: 'Maya Rao', value: 'maya' },
+  { detail: 'ops@acme.co', disabled: false, initials: 'AC', name: 'Acme Co.', value: 'acme' },
+  {
+    detail: 'Signed out',
+    disabled: true,
+    initials: 'SW',
+    name: 'Savings wallet',
+    value: 'savings',
+  },
+] as const
+
+export function Demo() {
+  return (
+    <ListGroup.RadioGroup aria-label="Account" defaultValue="maya" {...styles.rows()}>
+      {accounts.map((entry) => (
+        <ListGroup.Row disabled={entry.disabled} key={entry.value} value={entry.value}>
+          <Avatar size="32">
+            <Avatar.Fallback>{entry.initials}</Avatar.Fallback>
+          </Avatar>
+          <ListGroup.Info>
+            <ListGroup.Title>{entry.name}</ListGroup.Title>
+            <ListGroup.Description>{entry.detail}</ListGroup.Description>
+          </ListGroup.Info>
+        </ListGroup.Row>
+      ))}
+    </ListGroup.RadioGroup>
+  )
+}
+
+namespace styles {
+  export const rows = style({ maxWidth: '25rem !custom', width: '100% !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ListGroup/Radio.tsx)
+
+### Option
+
+Set `variant="option"` on a `ListGroup.RadioGroup` for the options of a picker. The selected row fills, without a border or a ring.
+
+```tsx
+/** Demonstrates ListGroup option rows that pick one account in a picker. @module */
+import { Avatar, ListGroup, style } from '@tempoxyz/ds'
+
+const accounts = [
+  { detail: 'maya@studio.co', initials: 'MR', name: 'Maya Rao', value: 'maya' },
+  { detail: 'ops@acme.co', initials: 'AC', name: 'Acme Co.', value: 'acme' },
+] as const
+
+export function Demo() {
+  return (
+    <ListGroup.RadioGroup
+      aria-label="Account"
+      defaultValue="maya"
+      variant="option"
+      {...styles.rows()}
+    >
+      {accounts.map((entry) => (
+        <ListGroup.Row key={entry.value} value={entry.value}>
+          <Avatar size="32">
+            <Avatar.Fallback>{entry.initials}</Avatar.Fallback>
+          </Avatar>
+          <ListGroup.Info>
+            <ListGroup.Title>{entry.name}</ListGroup.Title>
+            <ListGroup.Description>{entry.detail}</ListGroup.Description>
+          </ListGroup.Info>
+        </ListGroup.Row>
+      ))}
+    </ListGroup.RadioGroup>
+  )
+}
+
+namespace styles {
+  export const rows = style({ maxWidth: '25rem !custom', width: '100% !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ListGroup/Option.tsx)
+
+### Dividers
+
+A list group draws a divider above every row after the first. Set `dividers={false}` on `ListGroup.Root` to drop them.
+
+```tsx
+import { ListGroup, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <div {...styles.grid()}>
+      <ListGroup.Root>
+        <ListGroup.Row>
+          <ListGroup.Label>Network</ListGroup.Label>
+          Tempo
+        </ListGroup.Row>
+        <ListGroup.Row>
+          <ListGroup.Label>Chain ID</ListGroup.Label>
+          4217
+        </ListGroup.Row>
+      </ListGroup.Root>
+      <ListGroup.Root dividers={false}>
+        <ListGroup.Row>
+          <ListGroup.Label>TokenLogo</ListGroup.Label>
+          USDT · TRC-20
+        </ListGroup.Row>
+        <ListGroup.Row>
+          <ListGroup.Label>Rate</ListGroup.Label>1 USDT = 1 USD
+        </ListGroup.Row>
+      </ListGroup.Root>
+    </div>
+  )
+}
+
+namespace styles {
+  export const grid = style({
+    alignItems: 'start',
+    display: 'grid',
+    gap: '24',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(20rem, 1fr)) !custom',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/ListGroup/Dividers.tsx)
+
+## Anatomy
+
+Import the component and assemble its parts.
+
+```tsx
+import { ListGroup } from '@tempoxyz/ds'
+
+<ListGroup.Heading />
+<ListGroup.Root>
+  <ListGroup.Row>
+    <ListGroup.Icon />
+    <ListGroup.Label />
+  </ListGroup.Row>
+  <ListGroup.Row>
+    <ListGroup.Info>
+      <ListGroup.Title />
+      <ListGroup.Description />
+      <ListGroup.Chips />
+    </ListGroup.Info>
+    <ListGroup.Meter />
+  </ListGroup.Row>
+</ListGroup.Root>
+<ListGroup.RadioGroup>
+  <ListGroup.Row />
+</ListGroup.RadioGroup>
+<ListGroup>
+  <ListGroup.Row />
+</ListGroup>
+```
+
+## Guidelines
+
+### When to Use
+
+* Show the facts a person checks as label and value pairs, such as the amount, fee, and recipient of a payment.
+* Let a person pick one contact, wallet, network, or vault from a short list.
+* Show how much of a spending limit each agent used, with `ListGroup.Meter`.
+* List up to three benefits in an onboarding step with `variant="spaced"`.
+* List settings or pages to open, such as Access keys and Connected apps.
+
+### When Not to Use
+
+* Use [Table](/docs/components/table) to compare many records across the same fields.
+* Use [Accordion](/docs/components/accordion) to reveal details under a heading, such as a fee breakdown or help answers.
+* Use [Menu](/docs/components/menu) for a list of actions that opens from a button.
+* Use [SidebarMenu](/docs/components/sidebar-menu) for the main navigation of an app.
+* Use [Field](/docs/components/field) with form controls when people edit the values.
+* Use [RadioGroup](/docs/components/radio-group) to pick one short text option in a form, without an avatar or a description.
+
+### Pick a Variant by What the Group Holds
+
+* **Boxed (boxed):** For reviews and receipts: what goes out, what comes in, fees, and key changes.
+* **Plain (plain):** For pickers and recent contacts, where a person taps a row to choose it.
+* **Spaced (spaced):** For checklists, benefits, and short facts that need no dividers between them.
+
+### Use One Boxed Group per Topic
+
+Give each topic its own boxed group, and name it by what it holds, not by the screen it sits on.
+
+**Do:** Name each group by its contents, such as Assets out and Fees.
+
+```tsx
+<div style={{ display: 'grid', gap: 16, width: 280 }}>
+  <div>
+    <ListGroup.Heading>Assets out</ListGroup.Heading>
+    <ListGroup.Root variant="boxed">
+      <ListGroup.Row>
+        <ListGroup.Label>Amount</ListGroup.Label>
+        120.00 USDC
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>To</ListGroup.Label>
+        Maya Rao
+      </ListGroup.Row>
+    </ListGroup.Root>
+  </div>
+  <div>
+    <ListGroup.Heading>Fees</ListGroup.Heading>
+    <ListGroup.Root variant="boxed">
+      <ListGroup.Row>
+        <ListGroup.Label>Network fee</ListGroup.Label>
+        0.001 USDC
+      </ListGroup.Row>
+    </ListGroup.Root>
+  </div>
+</div>
+```
+
+**Don't:** Mix topics in one group named after the screen.
+
+```tsx
+<div style={{ width: 280 }}>
+  <ListGroup.Heading>Review send</ListGroup.Heading>
+  <ListGroup.Root variant="boxed">
+    <ListGroup.Row>
+      <ListGroup.Label>Amount</ListGroup.Label>
+      120.00 USDC
+    </ListGroup.Row>
+    <ListGroup.Row>
+      <ListGroup.Label>To</ListGroup.Label>
+      Maya Rao
+    </ListGroup.Row>
+    <ListGroup.Row>
+      <ListGroup.Label>Network fee</ListGroup.Label>
+      0.001 USDC
+    </ListGroup.Row>
+  </ListGroup.Root>
+</div>
+```
+
+### Put the Label First
+
+`ListGroup.Label` keeps its width and pushes the value to the end of the row. Format values with [Amount](/docs/components/amount), [Hex](/docs/components/hex), and [Badge](/docs/components/badge).
+
+**Do:** Pair each `ListGroup.Label` with a formatted value, such as an `Amount` or a `Hex`.
+
+```tsx
+/**
+ * Do example for "Put the Label First" on the ListGroup page.
+ * Pair each `ListGroup.Label` with a formatted value, such as an `Amount` or a `Hex`.
+ * @module
+ */
+import { Amount, Badge, Hex, ListGroup, style } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <ListGroup {...styles.rows()}>
+      <ListGroup.Row>
+        <ListGroup.Label>Amount</ListGroup.Label>
+        <Amount symbol="USDC" value="48.50" />
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Network fee</ListGroup.Label>
+        <Amount symbol="USDC" value="0.0004" />
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Recipient</ListGroup.Label>
+        <span {...styles.value()}>
+          <Hex value="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />
+        </span>
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Status</ListGroup.Label>
+        <Badge>Confirmed</Badge>
+      </ListGroup.Row>
+    </ListGroup>
+  )
+}
+
+namespace styles {
+  export const rows = style({ width: '100% !custom' })
+
+  // Hex shrinks to its container, so the cap goes on a wrapper.
+  export const value = style({ display: 'inline-flex', maxWidth: '10rem !custom', minWidth: '0' })
+}
+```
+
+**Don't:** Use a `Table` with Field and Value columns for one record.
+
+```tsx
+/**
+ * Don't example for "Put the Label First" on the ListGroup page.
+ * Don't use a `Table` with Field and Value columns for one record.
+ * @module
+ */
+import { Table } from '@tempoxyz/ds'
+
+const fields = [
+  ['Amount', '48.50 USDC'],
+  ['Network fee', '0.0004 USDC'],
+  ['Recipient', '0xd8dA…6045'],
+  ['Status', 'Confirmed'],
+] as const
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <Table size="small">
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Field</Table.HeaderCell>
+          <Table.HeaderCell>Value</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {fields.map(([field, value]) => (
+          <Table.Row key={field}>
+            <Table.Cell>{field}</Table.Cell>
+            <Table.Cell>{value}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+```
+
+### Shorten Addresses in Rows
+
+A [Hex](/docs/components/hex) fills the space beside its label, so a long address crowds the label and ends short of the other values. Wrap it in an element capped at about `10rem`, and add `copy`. Before a payment, show the full recipient outside the rows, as the [Hex](/docs/components/hex) page shows.
+
+**Do:** Cap the width of a `Hex` so it ends with the other values.
+
+```tsx
+/**
+ * Do example for "Shorten Addresses in ListGroup" on the ListGroup page.
+ * Cap the width of a `Hex` so it ends with the other values.
+ * @module
+ */
+import { Amount, Hex, ListGroup, style } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <ListGroup {...styles.rows()}>
+      <ListGroup.Row>
+        <ListGroup.Label>Amount</ListGroup.Label>
+        <Amount symbol="USDC" value="48.50" />
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Recipient</ListGroup.Label>
+        <span {...styles.value()}>
+          <Hex copy value="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />
+        </span>
+      </ListGroup.Row>
+    </ListGroup>
+  )
+}
+
+namespace styles {
+  export const rows = style({ width: '100% !custom' })
+
+  // Hex shrinks to its container, so the cap goes on a wrapper.
+  export const value = style({ display: 'inline-flex', maxWidth: '10rem !custom', minWidth: '0' })
+}
+```
+
+**Don't:** Let a `Hex` fill the row up to its label.
+
+```tsx
+/**
+ * Don't example for "Shorten Addresses in ListGroup" on the ListGroup page.
+ * Don't let a `Hex` fill the row up to its label.
+ * @module
+ */
+import { Amount, Hex, ListGroup, style } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <ListGroup {...styles.rows()}>
+      <ListGroup.Row>
+        <ListGroup.Label>Amount</ListGroup.Label>
+        <Amount symbol="USDC" value="48.50" />
+      </ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Recipient</ListGroup.Label>
+        <Hex copy value="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />
+      </ListGroup.Row>
+    </ListGroup>
+  )
+}
+
+namespace styles {
+  export const rows = style({ width: '100% !custom' })
+}
+```
+
+### Pick an Action by What the Row Does
+
+* **None (none):** For read-only details, such as Chain ID. With `onClick`, the row becomes a button.
+* **Navigation (navigation):** Opens another page and shows a trailing chevron. Renders a button, or a link through `render`.
+* **Copy (Button):** Copies a value. Keep the row static, which fills on hover, and end it with an `xsmall` [Button](/docs/components/button).
+
+### Keep Pressable Rows Free of Other Controls
+
+A pressable row is one button or link. If a row holds its own control, such as a [Switch](/docs/components/switch), leave `action` and `onClick` off and place the control at the end. The row fills on hover, and the control stays the only target.
+
+**Do:** Place the control at the end of a static row.
+
+```tsx
+/**
+ * Do example for "Keep Pressable ListGroup Free of Other Controls" on the ListGroup page.
+ * Place the control at the end of a static row.
+ * @module
+ */
+import { ListGroup, style, Switch } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <ListGroup {...styles.rows()}>
+      <ListGroup.Row action="navigation">Access keys</ListGroup.Row>
+      <ListGroup.Row>
+        <ListGroup.Label>Payment emails</ListGroup.Label>
+        <Switch aria-label="Payment emails" defaultChecked />
+      </ListGroup.Row>
+    </ListGroup>
+  )
+}
+
+namespace styles {
+  export const rows = style({ width: '100% !custom' })
+}
+```
+
+**Don't:** Nest a control in a row with an `action`.
+
+```tsx
+/**
+ * Don't example for "Keep Pressable ListGroup Free of Other Controls" on the ListGroup page.
+ * Don't nest a control in a row with an `action`.
+ * @module
+ */
+import { ListGroup, style, Switch } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <ListGroup {...styles.rows()}>
+      <ListGroup.Row action="navigation">Access keys</ListGroup.Row>
+      <ListGroup.Row action="navigation">
+        <ListGroup.Label>Payment emails</ListGroup.Label>
+        <Switch aria-label="Payment emails" defaultChecked />
+      </ListGroup.Row>
+    </ListGroup>
+  )
+}
+
+namespace styles {
+  export const rows = style({ width: '100% !custom' })
+}
+```
+
+## Content
+
+* **Row text:** Name the destination or setting, such as Access keys, not Manage. The chevron is hidden from screen readers.
+* **Labels:** Short nouns without colons, such as Network fee.
+* **Descriptions:** One line of current state in `ListGroup.Description`, such as 2 active keys.
+* **Group headings:** Name what the group holds, such as Fees, Assets out, or Contacts.
+* **Checklists:** Three benefits at most, each a short line, such as Approve with your device, no codes.
+* **Order:** Keep the same labels in the same order wherever a record appears, such as a review and its receipt.
+
+**Do:** Name the page each row opens.
+
+```tsx
+/**
+ * Do example for the Content section on the ListGroup page.
+ * Name the page each row opens.
+ * @module
+ */
+import { ListGroup, style } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <ListGroup {...styles.rows()}>
+      <ListGroup.Row action="navigation">Access keys</ListGroup.Row>
+      <ListGroup.Row action="navigation">Recovery methods</ListGroup.Row>
+      <ListGroup.Row action="navigation">Connected apps</ListGroup.Row>
+    </ListGroup>
+  )
+}
+
+namespace styles {
+  export const rows = style({ width: '100% !custom' })
+}
+```
+
+**Don't:** Use vague labels such as Manage, View more, or Other.
+
+```tsx
+/**
+ * Don't example for the Content section on the ListGroup page.
+ * Don't use vague labels such as Manage, View more, or Other.
+ * @module
+ */
+import { ListGroup, style } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <ListGroup {...styles.rows()}>
+      <ListGroup.Row action="navigation">Manage</ListGroup.Row>
+      <ListGroup.Row action="navigation">View more</ListGroup.Row>
+      <ListGroup.Row action="navigation">Other</ListGroup.Row>
+    </ListGroup>
+  )
+}
+
+namespace styles {
+  export const rows = style({ width: '100% !custom' })
+}
+```
+
+## Accessibility
+
+### Semantics
+
+* **ListGroup.Root (div):** Adds no role. The rows read as plain content.
+* **Row Elements (button):** Pressable rows render a `button`, or the `render` element.
+* **Chevron (aria-hidden):** The navigation chevron is hidden from screen readers.
+* **ListGroup.Label (span):** A key-value row reads as plain text, such as "Network Tempo".
+* **Radio Rows (radio):** A row with a `value` reads as a radio, named by its text.
+* **ListGroup.Meter (meter):** Reads its name and `aria-valuetext`, not the value shown.
+* **Disabled Rows (disabled):** Sets `disabled` or `aria-disabled`, and dims the row.
+
+### Keyboard
+
+* **Move Between Rows (Tab):** Moves focus to the next button, link, or radio group.
+* **Activate a Row (Enter):** Activates a button or link row.
+* **Press a Button Row (Space):** Activates a button row.
+* **Pick a Radio Row (Down Arrow):** Moves focus and selection to the next radio row.
+
+### Your Responsibilities
+
+* **Render Links for Navigation (render):** Use a real link through `render`, so middle-click, the context menu, and screen reader link lists work.
+* **Head Each Group (ListGroup.Heading):** ListGroup adds no role or name. Pass a heading element to `ListGroup.Heading` through `render`.
+* **Name Radio Groups and Meters (aria-label):** Name each `ListGroup.RadioGroup` and `ListGroup.Meter`, and pass `getAriaValueText` to a meter.
+
+## Related
+
+[Table](/docs/components/table)
+
+Use for comparing many records.
+
+[Accordion](/docs/components/accordion)
+
+Use for collapsible sections of content.
+
+[Surface](/docs/components/surface)
+
+Use for grouping rows in a card.
+
+[Amount](/docs/components/amount)
+
+Use for values.
+
+[Hex](/docs/components/hex)
+
+Use for values.
+
+[Avatar](/docs/components/avatar)
+
+Use for the leading image of a contact row.
+
+[NetworkLogo](/docs/components/network-logo)
+
+Use for the leading logo of a network row.
+
+[AssetChip](/docs/components/asset-chip)
+
+Use for the assets a network row supports.
+
+[AgentLogo](/docs/components/agent-logo)
+
+Use for the leading logo of an agent row.
+
+[RadioGroup](/docs/components/radio-group)
+
+Use for picking one short text option in a form.
+
+[Tables and Lists](/docs/patterns/tables-and-lists)
+
+Covers choosing a layout.