import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
import * as DividerStories from './Divider.stories'

<Meta of={DividerStories} />

# Divider

A hairline in `border-subtle`. Horizontal it is inset 12px each side;
`orientation="vertical"` stands it up to its row's height, no inset. It is
Base UI's `Separator`, which gives it the `separator` role and its
orientation for assistive tech.

<Canvas of={DividerStories.Default} />

## When

- Between sections of a panel, a rail or a card.
- Vertical: between clusters in a toolbar or a dense row.

<Canvas of={DividerStories.Vertical} />

- With a `label`, words sit in the middle of the line — a date between two
  days of messages, or where "new since you last read this" begins.
  `tone="warning"` for the second: the label in the warning colour, the
  lines in its wash. The line is named by its label for assistive tech.

<Canvas of={DividerStories.Warning} />

## When not

- Between groups in a menu → **MenuSeparator**: this line with its own 4px
  above and below.
- Between every row of a list — spacing does that; a hairline per row is
  noise.
- To title what follows → **SectionLabel** or **SectionHeader**; a heading
  separates better than a line.

## How

```tsx
import { Divider } from '@estiva-app/ui'

<Divider />
<Divider orientation="vertical" />
<Divider label="Today" />
<Divider label="New since you last read this" tone="warning" />
```

- **Inside a `Menu` or a `Popover` it has no inset**: the hairline runs the
  width of the rows. The panel tells it so; nothing is passed in.

- The line is 1px; the room around it is yours.

## What it owns

It does these by itself. Write none of them around it.

| It does | So you never write | Refused when written by hand |
|---|---|---|
| Says what it is to assistive technology: a separator | `role="separator"` | ✓ |
| Keeps its 1px line in a scrolling column | `shrink-0` |  |

## Props

<Controls of={DividerStories.Default} />