@tempoxyz/ds 0.3.10 → 0.3.11

package/dist/docs/components/dialog.md

@@ -0,0 +1,1332 @@
+# Dialog
+
+Opens a modal popup over the page.
+
+[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Dialog.tsx)
+
+Figma: [Modal/Header](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-1876) (`Dialog.Header`), [Modal/Wallet Modal](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-1902) (`Dialog.Popup`)
+
+## Overview
+
+A dialog is a modal popup over a dimmed backdrop. It stacks a header, a body and a footer of actions at one of three sizes. It traps focus and returns it to the trigger on close.
+
+## Examples
+
+### Basic
+
+Set `closeButton` on `Dialog.Popup` to add a visible close control.
+
+```tsx
+import { Button, ButtonGroup, Dialog, Field, TextInput } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Rename wallet</Dialog.Trigger>
+      <Dialog.Popup closeButton>
+        <Dialog.Header>
+          <Dialog.Title>Rename wallet</Dialog.Title>
+          <Dialog.Description>The name is only visible to you.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Field.Root>
+            <Field.Label>Name</Field.Label>
+            <TextInput.Group>
+              <TextInput.Control defaultValue="Main wallet" />
+            </TextInput.Group>
+          </Field.Root>
+        </Dialog.Body>
+        <ButtonGroup>
+          <Dialog.Close render={<Button size="large" variant="secondary" />}>Cancel</Dialog.Close>
+          <Dialog.Close render={<Button size="large" />}>Save name</Dialog.Close>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Basic.tsx)
+
+### Size
+
+Set `size` on `Dialog.Popup` to `small`, `medium` (default) or `large`. The size sets the width, radius, padding and title size together.
+
+```tsx
+import { Button, ButtonGroup, Dialog, Inline } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <Inline gap="12" wrap>
+      {(['small', 'medium', 'large'] as const).map((size) => (
+        <Dialog.Root key={size}>
+          <Dialog.Trigger render={<Button variant="secondary" />}>Open {size}</Dialog.Trigger>
+          <Dialog.Popup closeButton size={size}>
+            <Dialog.Header>
+              <Dialog.Title>Send USDC</Dialog.Title>
+              <Dialog.Description>Payments on Tempo settle in seconds.</Dialog.Description>
+            </Dialog.Header>
+            <ButtonGroup>
+              <Dialog.Close render={<Button size="large" variant="secondary" />}>
+                Cancel
+              </Dialog.Close>
+              <Button size="large">Continue</Button>
+            </ButtonGroup>
+          </Dialog.Popup>
+        </Dialog.Root>
+      ))}
+    </Inline>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Size.tsx)
+
+### Header Layout
+
+Set `layout` on `Dialog.Header` to `inline` (default), `stacked`, `centered` or `hero`. A `Dialog.Nav` holds `Dialog.Back` and a [Stepper](/docs/components/stepper) above the title.
+
+```tsx
+import { Button, ButtonGroup, Dialog, IconTile, Inline, Stepper } from '@tempoxyz/ds'
+import { Check } from '@tempoxyz/ds/icons'
+
+export function Demo() {
+  return (
+    <Inline gap="12" wrap>
+      <Dialog.Root>
+        <Dialog.Trigger render={<Button variant="secondary" />}>Inline</Dialog.Trigger>
+        <Dialog.Popup closeButton>
+          <Dialog.Header layout="inline">
+            <Dialog.Title>Send USDC</Dialog.Title>
+            <Dialog.Description>Payments on Tempo settle in seconds.</Dialog.Description>
+          </Dialog.Header>
+          <ButtonGroup>
+            <Button size="large">Review</Button>
+          </ButtonGroup>
+        </Dialog.Popup>
+      </Dialog.Root>
+      <Dialog.Root>
+        <Dialog.Trigger render={<Button variant="secondary" />}>Stacked</Dialog.Trigger>
+        <Dialog.Popup closeButton>
+          <Dialog.Header layout="stacked">
+            <Dialog.Nav>
+              <Dialog.Back />
+              <Stepper.Root aria-label="Send USDC" count={4} value={2} />
+            </Dialog.Nav>
+            <Dialog.Title>Choose a recipient</Dialog.Title>
+            <Dialog.Description>Step 2 of 4</Dialog.Description>
+          </Dialog.Header>
+          <ButtonGroup>
+            <Button size="large">Continue</Button>
+          </ButtonGroup>
+        </Dialog.Popup>
+      </Dialog.Root>
+      <Dialog.Root>
+        <Dialog.Trigger render={<Button variant="secondary" />}>Centered</Dialog.Trigger>
+        <Dialog.Popup closeButton size="small">
+          <Dialog.Header layout="centered">
+            <Dialog.Nav />
+            <IconTile intent="positive">
+              <Check />
+            </IconTile>
+            <Dialog.Title>Passkey ready</Dialog.Title>
+            <Dialog.Description>You can approve payments with Touch ID.</Dialog.Description>
+          </Dialog.Header>
+          <ButtonGroup>
+            <Dialog.Close render={<Button size="large" />}>Got it</Dialog.Close>
+          </ButtonGroup>
+        </Dialog.Popup>
+      </Dialog.Root>
+    </Inline>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Layout.tsx)
+
+## Use Cases
+
+Each screen pairs a size and a header layout with parts from the library.
+
+### Confirmation
+
+Confirms a destructive or irreversible action in an [AlertDialog](/docs/components/alert-dialog).
+
+```tsx
+import { Alert, AlertDialog, Button, ButtonGroup } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger render={<Button />}>Revoke all connections</AlertDialog.Trigger>
+      <AlertDialog.Popup closeButton>
+        <AlertDialog.Header>
+          <AlertDialog.Title>Revoke all connections?</AlertDialog.Title>
+          <AlertDialog.Description>
+            Apps and agents lose access to Personal right away.
+          </AlertDialog.Description>
+        </AlertDialog.Header>
+        <AlertDialog.Body>
+          <Alert intent="negative">
+            <Alert.Icon />
+            <Alert.Content>
+              <Alert.Title>Can’t be undone</Alert.Title>4 apps and 1 agent will be disconnected.
+            </Alert.Content>
+          </Alert>
+        </AlertDialog.Body>
+        <ButtonGroup>
+          <AlertDialog.Close render={<Button size="large" variant="secondary" />}>
+            Cancel
+          </AlertDialog.Close>
+          <AlertDialog.Close render={<Button size="large" />}>Revoke all</AlertDialog.Close>
+        </ButtonGroup>
+      </AlertDialog.Popup>
+    </AlertDialog.Root>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Confirmation.tsx)
+
+### Acknowledgment
+
+Reports that a change finished, with one way to move on.
+
+```tsx
+import { Button, ButtonGroup, Dialog, IconTile } from '@tempoxyz/ds'
+import { Check } from '@tempoxyz/ds/icons'
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Add passkey</Dialog.Trigger>
+      <Dialog.Popup closeButton size="small">
+        <Dialog.Header layout="centered">
+          <Dialog.Nav />
+          <IconTile intent="positive">
+            <Check />
+          </IconTile>
+          <Dialog.Title>Passkey ready</Dialog.Title>
+          <Dialog.Description>
+            You can approve payments with Touch ID from now on.
+          </Dialog.Description>
+        </Dialog.Header>
+        <ButtonGroup>
+          <Dialog.Close render={<Button size="large" />}>Got it</Dialog.Close>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Acknowledgment.tsx)
+
+### Form
+
+Collects what a task needs, such as an amount and a recipient, before a review.
+
+```tsx
+import {
+  Alert,
+  AmountInput,
+  Button,
+  ButtonGroup,
+  Dialog,
+  Field,
+  TextInput,
+  Token,
+} from '@tempoxyz/ds'
+import { Clipboard } from '@tempoxyz/ds/icons'
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Send USDC</Dialog.Trigger>
+      <Dialog.Popup closeButton>
+        <Dialog.Header>
+          <Dialog.Title>Send USDC</Dialog.Title>
+          <Dialog.Description>Payments on Tempo settle in seconds.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <TextInput.Group>
+            <TextInput.Control aria-label="Recipient" placeholder="Address, email or contact" />
+            <TextInput.Suffix>
+              <Clipboard />
+            </TextInput.Suffix>
+          </TextInput.Group>
+          <Field.Root>
+            <AmountInput.Root defaultValue="120.00">
+              <Field.Label>You send</Field.Label>
+              <AmountInput.Control />
+              <Token address="0x20c000000000000000000000b9537d11c60e8b50" symbol="USDC" />
+              <Field.Description>Balance 2,480.32</Field.Description>
+            </AmountInput.Root>
+          </Field.Root>
+          <Alert intent="warning">
+            <Alert.Icon />
+            <Alert.Content>
+              <Alert.Title>First time sending here</Alert.Title>
+              Check the first and last 4 characters with the recipient.
+            </Alert.Content>
+          </Alert>
+        </Dialog.Body>
+        <ButtonGroup>
+          <Button size="large">Review</Button>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Form.tsx)
+
+### Onboarding
+
+Introduces a feature and its benefits before setup.
+
+```tsx
+import { Button, ButtonGroup, Dialog, IconTile, ListGroup, Stepper, style } from '@tempoxyz/ds'
+import { Check, Passkey } from '@tempoxyz/ds/icons'
+
+const benefits = [
+  'Never get locked out if you lose email access',
+  'Approve with your device, no codes',
+  'Stays on your device. Tempo never sees it',
+]
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Set up a passkey</Dialog.Trigger>
+      <Dialog.Popup closeButton>
+        <Dialog.Header layout="centered">
+          <Dialog.Nav>
+            <Stepper.Root aria-label="Passkey setup" count={4} value={1} />
+          </Dialog.Nav>
+          <IconTile>
+            <Passkey />
+          </IconTile>
+          <Dialog.Title>Add a passkey</Dialog.Title>
+          <Dialog.Description>A second way in that never needs a code.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <ListGroup.Root variant="spaced">
+            {benefits.map((benefit) => (
+              <ListGroup.Row key={benefit}>
+                <Check {...styles.check()} />
+                {benefit}
+              </ListGroup.Row>
+            ))}
+          </ListGroup.Root>
+        </Dialog.Body>
+        <ButtonGroup orientation="vertical">
+          <Button size="large">Create passkey</Button>
+          <Dialog.Close render={<Button size="large" variant="tertiary" />}>Not now</Dialog.Close>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+
+namespace styles {
+  export const check = style({ color: 'content.positive', flexShrink: '0 !custom', fontSize: '16' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Onboarding.tsx)
+
+### Picker
+
+Searches a known set and closes on a row press, so it needs no footer.
+
+```tsx
+import { Avatar, Button, Dialog, ListGroup, TextInput } from '@tempoxyz/ds'
+import { Search, Wallet } from '@tempoxyz/ds/icons'
+import { useState } from 'react'
+
+const recipients = [
+  { detail: 'maya@studio.co', initials: 'MR', name: 'Maya Rao' },
+  { detail: '0x5d21…7e9a', initials: 'AC', name: 'Acme Co.' },
+  { detail: '0x19be…c044', initials: undefined, name: 'Savings wallet' },
+]
+
+export function Demo() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Dialog.Root onOpenChange={setOpen} open={open}>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Choose a recipient</Dialog.Trigger>
+      <Dialog.Popup closeButton>
+        <Dialog.Header layout="stacked">
+          <Dialog.Nav>
+            <Dialog.Back onClick={() => setOpen(false)} />
+          </Dialog.Nav>
+          <Dialog.Title>Choose a recipient</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.Body>
+          <TextInput.Group>
+            <TextInput.Prefix>
+              <Search />
+            </TextInput.Prefix>
+            <TextInput.Control
+              aria-label="Search recipients"
+              placeholder="Name, email or address"
+            />
+          </TextInput.Group>
+          <div>
+            <ListGroup.Heading>Recent</ListGroup.Heading>
+            <ListGroup.Root dividers={false}>
+              {recipients.map((recipient) => (
+                <ListGroup.Row
+                  action="navigation"
+                  key={recipient.name}
+                  onClick={() => setOpen(false)}
+                >
+                  <Avatar size="32">
+                    <Avatar.Fallback>{recipient.initials ?? <Wallet />}</Avatar.Fallback>
+                  </Avatar>
+                  <ListGroup.Info>
+                    <ListGroup.Title>{recipient.name}</ListGroup.Title>
+                    <ListGroup.Description>{recipient.detail}</ListGroup.Description>
+                  </ListGroup.Info>
+                </ListGroup.Row>
+              ))}
+            </ListGroup.Root>
+          </div>
+        </Dialog.Body>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Picker.tsx)
+
+### Announcement
+
+Shows a new feature once with a visual, and never blocks a task.
+
+```tsx
+import { Button, ButtonGroup, Dialog, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>What’s new</Dialog.Trigger>
+      <Dialog.Popup closeButton>
+        <Dialog.Header>
+          <Dialog.Title>Earn on idle USDC</Dialog.Title>
+          <Dialog.Description>
+            Choose a vault and an amount. Nothing moves until you do.
+          </Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <div aria-hidden="true" {...styles.visual()} />
+        </Dialog.Body>
+        <ButtonGroup orientation="vertical">
+          <Button size="large">See vaults</Button>
+          <Dialog.Close render={<Button size="large" variant="tertiary" />}>Not now</Dialog.Close>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+
+namespace styles {
+  // Stands in for a 2:1 feature image.
+  export const visual = style({
+    aspectRatio: '2 !custom',
+    backgroundImage: 'linear-gradient(#0a1217, #17384a) !custom',
+    borderRadius: 'sm',
+    flexShrink: '0 !custom',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Announcement.tsx)
+
+### Conversion
+
+Moves value between networks or tokens and shows the route before a quote.
+
+```tsx
+import { AmountInput, Button, ButtonGroup, Dialog, Field, ListGroup, Token } from '@tempoxyz/ds'
+
+const usdc = '0x20c000000000000000000000b9537d11c60e8b50'
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Move to Tempo</Dialog.Trigger>
+      <Dialog.Popup closeButton>
+        <Dialog.Header>
+          <Dialog.Title>Move to Tempo</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Field.Root>
+            <AmountInput.Root defaultValue="2500.00">
+              <Field.Label>From · Ethereum</Field.Label>
+              <AmountInput.Control />
+              <Token address={usdc} symbol="USDC" />
+              <Field.Description>Balance 4,120.00</Field.Description>
+            </AmountInput.Root>
+          </Field.Root>
+          <Field.Root>
+            <AmountInput.Root defaultValue="2500.00">
+              <Field.Label>To · Tempo</Field.Label>
+              <AmountInput.Control readOnly />
+              <Token address={usdc} symbol="USDC" />
+              <Field.Description>Arrives in ~2 min</Field.Description>
+            </AmountInput.Root>
+          </Field.Root>
+          <ListGroup.Root variant="boxed">
+            <ListGroup.Row>
+              <ListGroup.Label>Rate</ListGroup.Label>1 USDC = 1 USDC
+            </ListGroup.Row>
+            <ListGroup.Row>
+              <ListGroup.Label>Fee</ListGroup.Label>
+              0.42 USDC
+            </ListGroup.Row>
+          </ListGroup.Root>
+        </Dialog.Body>
+        <ButtonGroup>
+          <Button size="large">View quote</Button>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Conversion.tsx)
+
+### Review
+
+Lays out every asset, fee and key change before a signature, at the `large` size.
+
+```tsx
+import { Button, ButtonGroup, Dialog, ListGroup, Stepper } from '@tempoxyz/ds'
+
+const groups = [
+  {
+    rows: [
+      ['Amount', '120.00 USDC'],
+      ['To', 'Maya Rao'],
+    ],
+    title: 'Assets out',
+  },
+  {
+    rows: [
+      ['Network fee', '0.001 USDC'],
+      ['Paid in', 'USDC'],
+    ],
+    title: 'Fees',
+  },
+  {
+    rows: [
+      ['TokenLogo approvals', 'None'],
+      ['Signers', 'No change'],
+    ],
+    title: 'Approvals and key changes',
+  },
+]
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Review send</Dialog.Trigger>
+      <Dialog.Popup closeButton size="large">
+        <Dialog.Header layout="stacked">
+          <Dialog.Nav>
+            <Dialog.Back />
+            <Stepper.Root aria-label="Send USDC" count={4} value={3} />
+          </Dialog.Nav>
+          <Dialog.Title>Review send</Dialog.Title>
+          <Dialog.Description>Check every line before you approve.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          {groups.map((group) => (
+            <div key={group.title}>
+              <ListGroup.Heading>{group.title}</ListGroup.Heading>
+              <ListGroup.Root variant="boxed">
+                {group.rows.map(([label, value]) => (
+                  <ListGroup.Row key={label}>
+                    <ListGroup.Label>{label}</ListGroup.Label>
+                    {value}
+                  </ListGroup.Row>
+                ))}
+              </ListGroup.Root>
+            </div>
+          ))}
+        </Dialog.Body>
+        <ButtonGroup>
+          <Button size="large">Confirm send</Button>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Review.tsx)
+
+### Progress
+
+Holds the person in place while a signer or the network responds.
+
+```tsx
+import { Button, ButtonGroup, Dialog, Spinner, style } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Sign in</Dialog.Trigger>
+      <Dialog.Popup closeButton size="small">
+        <Dialog.Header layout="centered">
+          <Dialog.Nav>
+            <Dialog.Back />
+          </Dialog.Nav>
+          <Dialog.Title>Approve with your sign-in</Dialog.Title>
+          <Dialog.Description>Check the prompt from your Privy signer.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body {...styles.center()}>
+          <Spinner aria-label="Waiting for approval" />
+        </Dialog.Body>
+        <ButtonGroup>
+          <Button disabled size="large">
+            Waiting for approval
+          </Button>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+
+namespace styles {
+  export const center = style({ alignItems: 'center' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Progress.tsx)
+
+### Success
+
+Confirms a settled payment with a receipt and the next step.
+
+```tsx
+import { Button, ButtonGroup, Dialog, IconTile, ListGroup } from '@tempoxyz/ds'
+import { Check } from '@tempoxyz/ds/icons'
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Send $120.00</Dialog.Trigger>
+      <Dialog.Popup closeButton size="small">
+        <Dialog.Header layout="centered">
+          <Dialog.Nav />
+          <IconTile intent="positive">
+            <Check />
+          </IconTile>
+          <Dialog.Title>$120.00 sent</Dialog.Title>
+          <Dialog.Description>Maya Rao has it. Settled in seconds.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <ListGroup.Root variant="boxed">
+            <ListGroup.Row>
+              <ListGroup.Label>To</ListGroup.Label>
+              Maya Rao
+            </ListGroup.Row>
+            <ListGroup.Row>
+              <ListGroup.Label>Fee</ListGroup.Label>
+              0.001 USDC
+            </ListGroup.Row>
+            <ListGroup.Row>
+              <ListGroup.Label>Transaction</ListGroup.Label>
+              0x6b1d…f20e
+            </ListGroup.Row>
+          </ListGroup.Root>
+        </Dialog.Body>
+        <ButtonGroup>
+          <Dialog.Close render={<Button size="large" variant="secondary" />}>
+            Send another
+          </Dialog.Close>
+          <Dialog.Close render={<Button size="large" />}>Done</Dialog.Close>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Success.tsx)
+
+### Account Ready
+
+Confirms a new account and shows the details the person needs next.
+
+```tsx
+import { Button, ButtonGroup, Dialog, formatHex, ListGroup, style } from '@tempoxyz/ds'
+
+const address = '0x7a3f2c1e9b4d5a6f7c8e9d0a1b2c3d4e5fb8e091c2'
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Create wallet</Dialog.Trigger>
+      <Dialog.Popup closeButton>
+        <Dialog.Header>
+          <Dialog.Title>Account ready</Dialog.Title>
+          <Dialog.Description>Wallet ready. Add a passkey as a backup.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <ListGroup.Root variant="boxed">
+            <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={() => 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>
+        </Dialog.Body>
+        <ButtonGroup orientation="vertical">
+          <Button size="large">Add a passkey</Button>
+          <Dialog.Close render={<Button size="large" variant="tertiary" />}>
+            Go to dashboard
+          </Dialog.Close>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+
+namespace styles {
+  // Stands in for the wallet's artwork.
+  export const art = style({
+    backgroundImage: 'linear-gradient(#1f1a14, #eda866, #261f1a) !custom',
+    borderRadius: 'xs',
+    flexShrink: '0 !custom',
+    height: '40',
+    width: '40',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/AccountReady.tsx)
+
+### Receive Networks
+
+Picks the network to receive on before the address appears.
+
+```tsx
+import {
+  AssetChip,
+  Button,
+  ButtonGroup,
+  Dialog,
+  Inline,
+  ListGroup,
+  NetworkLogo,
+} from '@tempoxyz/ds'
+
+const networks = [
+  { name: 'Base', network: 'base' },
+  { name: 'Ethereum', network: 'ethereum' },
+  { name: 'HyperEVM', network: 'hyperevm' },
+  { name: 'Polygon', network: 'polygon' },
+  { name: 'Solana', network: 'solana' },
+] as const
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Receive</Dialog.Trigger>
+      <Dialog.Popup closeButton>
+        <Dialog.Header>
+          <Dialog.Title>Receive crypto</Dialog.Title>
+          <Dialog.Description>Send supported stablecoins to this address.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <ListGroup.Root dividers={false}>
+            {networks.map((entry) => (
+              <ListGroup.Row key={entry.network} onClick={() => {}}>
+                <NetworkLogo network={entry.network} size="large" />
+                <ListGroup.Info>
+                  <ListGroup.Title>{entry.name}</ListGroup.Title>
+                  <Inline gap="4">
+                    <AssetChip>USDC</AssetChip>
+                    <AssetChip>USDT</AssetChip>
+                  </Inline>
+                </ListGroup.Info>
+              </ListGroup.Row>
+            ))}
+          </ListGroup.Root>
+        </Dialog.Body>
+        <ButtonGroup>
+          <Dialog.Close render={<Button size="large" />}>Done</Dialog.Close>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/ReceiveNetworks.tsx)
+
+### Receive Address
+
+Shows the address and its QR code for the chosen network, with a copy action.
+
+```tsx
+import { Button, ButtonGroup, Dialog, formatHex, ListGroup, Qr, style } from '@tempoxyz/ds'
+
+const address = '0x7a3f2c1e9b4d5a6f7c8e9d0a1b2c3d4e6b8e91c2'
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Receive on Ethereum</Dialog.Trigger>
+      <Dialog.Popup closeButton>
+        <Dialog.Header layout="stacked">
+          <Dialog.Nav>
+            <Dialog.Back />
+          </Dialog.Nav>
+          <Dialog.Title>Receive crypto</Dialog.Title>
+          <Dialog.Description>Send supported stablecoins to this address.</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Qr aria-label="Ethereum address QR code" size="small" value={address} {...styles.qr()} />
+          <ListGroup.Root variant="boxed">
+            <ListGroup.Row>
+              <ListGroup.Info size="large">
+                <ListGroup.Title>Your address</ListGroup.Title>
+                <ListGroup.Description>{formatHex(address, { min: 12 })}</ListGroup.Description>
+              </ListGroup.Info>
+              <Button
+                aria-label="Copy address"
+                onClick={() => navigator.clipboard.writeText(address)}
+                size="xsmall"
+                variant="secondary"
+              >
+                Copy
+              </Button>
+            </ListGroup.Row>
+            <ListGroup.Row>
+              <ListGroup.Label>Network to send from</ListGroup.Label>
+              Ethereum
+            </ListGroup.Row>
+          </ListGroup.Root>
+        </Dialog.Body>
+        <ButtonGroup>
+          <Dialog.Close render={<Button size="large" />}>Done</Dialog.Close>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+
+namespace styles {
+  export const qr = style({ alignSelf: 'center' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/ReceiveAddress.tsx)
+
+### Verify Code
+
+Confirms an email or phone number with a one-time code.
+
+```tsx
+import { Button, ButtonGroup, Dialog, Field, TextInput } from '@tempoxyz/ds'
+
+export function Demo() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button variant="secondary" />}>Verify email</Dialog.Trigger>
+      <Dialog.Popup closeButton>
+        <Dialog.Header layout="stacked">
+          <Dialog.Nav>
+            <Dialog.Back />
+          </Dialog.Nav>
+          <Dialog.Title>Check your email</Dialog.Title>
+          <Dialog.Description>
+            Enter the 6-digit code we sent to you@example.com.
+          </Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Field.Root>
+            <TextInput.Group>
+              <TextInput.Control
+                aria-label="Code"
+                autoComplete="one-time-code"
+                defaultValue="48291"
+                inputMode="numeric"
+              />
+            </TextInput.Group>
+            <Field.Description>Didn’t get it? Check spam. Resend in 0:30</Field.Description>
+          </Field.Root>
+        </Dialog.Body>
+        <ButtonGroup orientation="vertical">
+          <Button size="large">Continue</Button>
+          <Dialog.Close render={<Button size="large" variant="tertiary" />}>
+            Use a different email
+          </Dialog.Close>
+        </ButtonGroup>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/VerifyCode.tsx)
+
+## Anatomy
+
+Import the component and assemble its parts.
+
+```tsx
+import { ButtonGroup, Dialog } from '@tempoxyz/ds'
+
+<Dialog.Root>
+  <Dialog.Trigger />
+  <Dialog.Popup>
+    <Dialog.Header>
+      <Dialog.Nav>
+        <Dialog.Back />
+      </Dialog.Nav>
+      <Dialog.Title />
+      <Dialog.Description />
+    </Dialog.Header>
+    <Dialog.Body />
+    <ButtonGroup>
+      <Dialog.Close />
+    </ButtonGroup>
+  </Dialog.Popup>
+</Dialog.Root>
+```
+
+## Guidelines
+
+### When to Use
+
+* Complete a short task in place, such as Rename wallet.
+* Walk through a short flow one step at a time, such as Send or Add a passkey.
+* Review details before you commit, such as a payment before Send.
+* Show something to read before you continue, such as a new API key that appears once.
+
+### When Not to Use
+
+* Use an [AlertDialog](/docs/components/alert-dialog) to confirm a destructive or irreversible action.
+* Use a [Drawer](/docs/components/drawer) for long forms, filters, or record details.
+* Use a [Popover](/docs/components/popover) for a sentence or one setting anchored to its trigger.
+* Use a page for content that still scrolls at the `large` size.
+* Use a [Toast](/docs/components/toast) to confirm that an action finished.
+
+See [Choosing a Component](/docs/components#popups) to compare overlays.
+
+### Pick the Size From the Content
+
+Start at `medium`. Choose the size from what the dialog holds, not from how important it is.
+
+* **One Decision (small):** One decision or outcome, with no fields.
+* **One Task (medium):** Up to three fields, or one list.
+* **Side-by-Side Review (large):** Several groups to read before you sign.
+
+### Keep One Size per Flow
+
+Every step of a flow keeps the size of its first step. Swap the header and body for the next step instead of opening another dialog. Past 420px the body scrolls while the header and footer stay. If the body still scrolls at `large`, move the content to a page.
+
+**Do:** Keep one task and one primary action in the dialog.
+
+```tsx
+/**
+ * Do example for "Keep One Task per Dialog" on the Dialog page.
+ * Keep one task and one primary action in the dialog.
+ * @module
+ */
+import { Button, Field, style, TextInput } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <div {...styles.popup()}>
+        <span {...styles.title()}>Rename wallet</span>
+        <Field.Root>
+          <Field.Label>Name</Field.Label>
+          <TextInput.Group>
+            <TextInput.Control defaultValue="Main wallet" />
+          </TextInput.Group>
+        </Field.Root>
+        <div {...styles.actions()}>
+          <Button size="small" variant="secondary">
+            Cancel
+          </Button>
+          <Button size="small">Save name</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const actions = style({
+    columnGap: '8',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: '8',
+  })
+
+  export const frame = style({
+    height: '15rem !custom',
+    position: 'relative',
+    width: '19rem !custom',
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    left: '0',
+    padding: '24',
+    position: 'absolute',
+    rowGap: '12',
+    top: '0',
+    width: '17rem !custom',
+  })
+
+  export const title = style({ color: 'content.primary', typography: 'heading.h3' })
+}
+```
+
+**Don't:** Open a dialog from a dialog.
+
+```tsx
+/** Don't example for "Keep One Task per Dialog" on the Dialog page. Don't open a dialog from a dialog. @module */
+import { Button, Field, style, TextInput } from '@tempoxyz/ds'
+import { Safe, Savings, Wallet } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.frame()}>
+      <div {...styles.popup()}>
+        <span {...styles.title()}>Rename wallet</span>
+        <Field.Root>
+          <Field.Label>Name</Field.Label>
+          <TextInput.Group>
+            <TextInput.Control defaultValue="Main wallet" />
+          </TextInput.Group>
+        </Field.Root>
+        <div {...styles.actions()}>
+          <Button size="small" variant="secondary">
+            Cancel
+          </Button>
+          <Button size="small">Save name</Button>
+        </div>
+      </div>
+      <div {...styles.stacked()}>
+        <span {...styles.title()}>Choose an icon</span>
+        <div {...styles.icons()}>
+          <Button aria-label="Wallet" shape="icon" size="small" variant="secondary">
+            <Wallet />
+          </Button>
+          <Button aria-label="Safe" shape="icon" size="small" variant="secondary">
+            <Safe />
+          </Button>
+          <Button aria-label="Savings" shape="icon" size="small" variant="secondary">
+            <Savings />
+          </Button>
+        </div>
+        <div {...styles.actions()}>
+          <Button size="small">Use icon</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const actions = style({
+    columnGap: '8',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: '8',
+  })
+
+  export const frame = style({
+    height: '15rem !custom',
+    position: 'relative',
+    width: '19rem !custom',
+  })
+
+  export const icons = style({ columnGap: '8', display: 'flex' })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    left: '0',
+    padding: '24',
+    position: 'absolute',
+    rowGap: '12',
+    top: '0',
+    width: '17rem !custom',
+  })
+
+  export const stacked = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    bottom: '0',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '20',
+    position: 'absolute',
+    right: '0',
+    rowGap: '12',
+    width: '13rem !custom',
+  })
+
+  export const title = style({ color: 'content.primary', typography: 'heading.h3' })
+}
+```
+
+### Provide a Visible Way Out
+
+Touch screens have no Escape key, and the backdrop doesn't look pressable. Set `closeButton` on `Dialog.Popup`, or add a `Dialog.Close` action such as Cancel. From step 2 of a flow, add a `Dialog.Back`.
+
+**Do:** Offer a close button and a Cancel action beside the primary action.
+
+```tsx
+/**
+ * Do example for "Provide a Visible Way Out" on the Dialog page.
+ * Offer a close button and a Cancel action beside the primary action.
+ * @module
+ */
+import { Button, Field, style, TextInput } from '@tempoxyz/ds'
+import { Close } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <div {...styles.header()}>
+        <span {...styles.title()}>Rename wallet</span>
+        <Button aria-label="Close" shape="icon" size="small" variant="secondary">
+          <Close />
+        </Button>
+      </div>
+      <Field.Root>
+        <Field.Label>Name</Field.Label>
+        <TextInput.Group>
+          <TextInput.Control defaultValue="Main wallet" />
+        </TextInput.Group>
+      </Field.Root>
+      <div {...styles.actions()}>
+        <Button size="small" variant="secondary">
+          Cancel
+        </Button>
+        <Button size="small">Save name</Button>
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const actions = style({
+    columnGap: '8',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: '8',
+  })
+
+  export const header = style({
+    alignItems: 'center',
+    columnGap: '12',
+    display: 'flex',
+    justifyContent: 'space-between',
+  })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '24',
+    rowGap: '12',
+    width: '17rem !custom',
+  })
+
+  export const title = style({ color: 'content.primary', typography: 'heading.h3' })
+}
+```
+
+**Don't:** Make the primary action the only visible way out.
+
+```tsx
+/**
+ * Don't example for "Provide a Visible Way Out" on the Dialog page.
+ * Don't make the primary action the only visible way out.
+ * @module
+ */
+import { Button, Field, style, TextInput } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.popup()}>
+      <span {...styles.title()}>Rename wallet</span>
+      <Field.Root>
+        <Field.Label>Name</Field.Label>
+        <TextInput.Group>
+          <TextInput.Control defaultValue="Main wallet" />
+        </TextInput.Group>
+      </Field.Root>
+      <div {...styles.actions()}>
+        <Button size="small">Save name</Button>
+      </div>
+    </div>
+  )
+}
+
+namespace styles {
+  export const actions = style({ display: 'flex', justifyContent: 'flex-end', marginTop: '8' })
+
+  export const popup = style({
+    backgroundColor: 'background.elevated',
+    borderRadius: 'sm',
+    boxShadow: 'regular',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '24',
+    rowGap: '12',
+    width: '17rem !custom',
+  })
+
+  export const title = style({ color: 'content.primary', typography: 'heading.h3' })
+}
+```
+
+### Protect Unsaved Input
+
+A backdrop press closes the dialog. Escape and the close controls work in both cases.
+
+* **Forms (disablePointerDismissal):** Set it on `Dialog.Root` so a stray backdrop press can't discard input.
+* **Content to Read (default):** Keep the default for content with no input, so a backdrop press closes the dialog.
+
+## Content
+
+### Title With the Task
+
+Write a verb and an object, without end punctuation. Reuse the trigger's label, such as Rename wallet. Save questions for an [AlertDialog](/docs/components/alert-dialog).
+
+### Describe the Effect
+
+In `Dialog.Description`, state what the task changes in one or two sentences, such as The name is only visible to you.
+
+### Repeat the Verb on the Primary Action
+
+Label the primary action with the title's verb, such as Save name. Use Cancel to close without changes.
+
+### Write One Headline
+
+Give each dialog one `Dialog.Title`. Name the groups in the body with a [ListGroup](/docs/components/list-group) heading instead of a second headline.
+
+## Accessibility
+
+A dialog follows the [WAI-ARIA Authoring Practices modal dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
+
+### Semantics
+
+* **Dialog.Trigger (button):** Announces the dialog and whether it is open.
+* **Dialog.Popup (dialog):** Modal by default.
+* **Dialog.Title (h2):** Names the dialog.
+* **Dialog.Description (p):** Describes the dialog.
+* **Dialog.Back (button):** A "Back" icon button, first in the focus order.
+* **Stepper (progressbar):** Name the flow with `aria-label` on the [Stepper](/docs/components/stepper).
+* **Close Button (closeButton):** A "Close" icon button, last in the focus order.
+* **Page Behind (inert):** Ignores pointer input and scroll while open.
+
+### Keyboard
+
+* **Open or Activate (Enter or Space):** Opens the dialog, or activates the focused control.
+* **Move to the Next Element (Tab):** Moves to the next element, and wraps.
+* **Move to the Previous Element (Shift+Tab):** Moves to the previous element, and wraps.
+* **Close the Dialog (Escape):** Closes the dialog and returns focus to the trigger.
+
+### Focus
+
+* **Opening (initialFocus):** Moves to the first tabbable element, or the popup on touch. Pass `initialFocus` to start elsewhere, such as the amount field.
+* **Trapping:** Tab and Shift+Tab wrap inside the dialog, so focus stays inside while it is open.
+* **Backdrop Press:** Closes the dialog. In a form, set `disablePointerDismissal` on `Dialog.Root` to keep it open.
+* **Closing (finalFocus):** Returns to the trigger. Pass `finalFocus` if the task removes the trigger.
+
+### Motion
+
+Under reduced motion, the dialog fades in and out without scaling or sliding.
+
+### Your Responsibilities
+
+* **Render a Title (Dialog.Title):** Without it, the dialog has no accessible name.
+
+## Related
+
+[AlertDialog](/docs/components/alert-dialog)
+
+Use for confirming destructive actions.
+
+[ButtonGroup](/docs/components/button-group)
+
+Use for the actions in the footer.
+
+[Drawer](/docs/components/drawer)
+
+Use for long forms and details panels.
+
+[Popover](/docs/components/popover)
+
+Use for anchored, non-blocking content.
+
+[Stepper](/docs/components/stepper)
+
+Use for progress through the steps of a flow.
+
+[Forms](/docs/patterns/forms)
+
+Covers laying out fields and actions.
+
+[Payments](/docs/patterns/payments)
+
+Covers reviewing a payment before you send it.