# Rows

Stacks divided rows for settings, details, and navigation.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Rows.tsx)

## Overview

Rows stack divided rows for settings, details, and navigation lists.

Write row text that names the destination or action, since chevrons are hidden from assistive technology.

## Examples

### Basic

```tsx
import { Rows, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Rows.Root {...styles.rows()}>
      <Rows.Row>
        <Rows.Label>Network</Rows.Label>
        Tempo
      </Rows.Row>
      <Rows.Row>
        <Rows.Label>Chain ID</Rows.Label>
        4217
      </Rows.Row>
      <Rows.Row>
        <Rows.Label>Network fee</Rows.Label>
        $0.0001
      </Rows.Row>
      <Rows.Row>
        <Rows.Label>Status</Rows.Label>
        Confirmed
      </Rows.Row>
    </Rows.Root>
  )
}

namespace styles {
  export const rows = style({ maxWidth: '24rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Rows/Basic.tsx)

### Action

Set `action` on `Rows.Row` to `expand`, `navigation`, or `none`. It defaults to `none`. Mount a `Rows.Panel` after an expanded row.

```tsx
import { Rows, style, Surface } from '@tempoxyz/ds'
import { useState } from 'react'

export function Demo() {
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)

  return (
    <div {...styles.grid()}>
      <Rows.Root>
        <Rows.Row action="expand" aria-expanded={open} onClick={() => setOpen(!open)}>
          Details
        </Rows.Row>
        {open && <Rows.Panel>Chain ID 4217, fee 0.0001</Rows.Panel>}
        <Rows.Row action="expand" aria-expanded={loading} onClick={() => setLoading(!loading)}>
          Loading
        </Rows.Row>
        {loading && <Rows.PanelLoader />}
        <Rows.Row action="navigation" render={<a href="#action" />}>
          Activity
        </Rows.Row>
      </Rows.Root>
      <Surface size="small">
        <Rows.Root dividers="full">
          <Rows.Row action="expand" aria-expanded onClick={() => {}}>
            Access key activity
          </Rows.Row>
          <Rows.Group>
            <Rows.Row action="navigation" render={<a href="#action" />}>
              Authorized
            </Rows.Row>
          </Rows.Group>
          <Rows.RowGroupLoader />
        </Rows.Root>
      </Surface>
    </div>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(20rem, 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Rows/Action.tsx)

### Dividers

Set `dividers` on `Rows.Root` to `inset`, `full`, or `none`. It defaults to `inset`.

```tsx
import { Rows, style, Surface } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Rows.Root dividers="inset">
        <Rows.Row>
          <Rows.Label>Network</Rows.Label>
          Tempo
        </Rows.Row>
        <Rows.Row>
          <Rows.Label>Chain ID</Rows.Label>
          4217
        </Rows.Row>
      </Rows.Root>
      <Surface size="small">
        <Rows.Root dividers="full">
          <Rows.Row>
            <Rows.Label>Network</Rows.Label>
            Tempo
          </Rows.Row>
          <Rows.Row>
            <Rows.Label>Chain ID</Rows.Label>
            4217
          </Rows.Row>
          <Rows.Row>
            <Rows.Label>Network fee</Rows.Label>
            $0.0001
          </Rows.Row>
          <Rows.Row>
            <Rows.Label>Status</Rows.Label>
            Confirmed
          </Rows.Row>
        </Rows.Root>
      </Surface>
      <Rows.Root dividers="none">
        <Rows.Row>
          <Rows.Label>Token</Rows.Label>
          USDT · TRC-20
        </Rows.Row>
        <Rows.Row>
          <Rows.Label>Rate</Rows.Label>1 USDT = 1 USD
        </Rows.Row>
      </Rows.Root>
    </div>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(20rem, 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Rows/Dividers.tsx)

### Size

Set `size` on `Rows.Root` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Rows, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Rows.Root key={size} size={size}>
          <Rows.Row>
            <Rows.Label>Network</Rows.Label>
            Tempo
          </Rows.Row>
          <Rows.Row>
            <Rows.Label>Chain ID</Rows.Label>
            4217
          </Rows.Row>
          <Rows.Row action="navigation" render={<a href="#size" />}>
            Activity
          </Rows.Row>
        </Rows.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    display: 'grid',
    gap: '6',
    gridTemplateColumns: 'repeat(auto-fill, minmax(20rem, 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Rows/Size.tsx)

### Disabled

Set `disabled` on a pressable `Rows.Row`.

```tsx
import { Rows, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Rows.Root {...styles.rows()}>
      <Rows.Row onClick={() => {}}>Enabled</Rows.Row>
      <Rows.Row disabled onClick={() => {}}>
        Disabled
      </Rows.Row>
    </Rows.Root>
  )
}

namespace styles {
  export const rows = style({ maxWidth: '24rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Rows/Disabled.tsx)

## Guidelines

TODO: Write guidelines for Rows.