# Timeline

> A record's activity as an ordered list: a 2px rail threading 16px event icons toned by what happened, one line per event (avatar, bold actor, muted verb, time), an optional comment card, and a native `<details>` folding a run of quiet events into "N more".

```ts
import { Timeline } from "@sdxc/ui";
```

Renders the `<ol>` and its rail. The rail is drawn once, behind every icon from the
first to the last, so a folded run keeps the line continuous when it opens; icons sit on
the page's background, `--ui-timeline-surface`, which masks the rail where they meet it.

## Examples

```tsx
<Timeline>
	<Timeline.Event icon={<CircleDotIcon />} tone="danger" actor="Uptime" time={<RelativeTime date={opened} />}>
		opened the incident
	</Timeline.Event>
	<Timeline.Event icon={<MessageSquareIcon />} avatar={<Avatar size="xs" />} actor="Ana" body={<p>Rolling back.</p>}>
		commented
	</Timeline.Event>
</Timeline>
```

## Props

Also accepts everything in `TagProps<"ol">`.


### Timeline.Event

Renders one event: its toned icon on the rail, then a single wrapping line of avatar, actor, description and time, then the body card when one is given.

| Prop | Type | Description |
| --- | --- | --- |
| `icon` | `RemixNode` | A 16px glyph naming the kind of event, decorative beside the line's words. |
| `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger"` |  |
| `avatar?` | `RemixNode` | A small avatar of the actor, shown before the name. |
| `actor?` | `RemixNode` | Who did it, set in bold. |
| `time?` | `RemixNode` | When it happened: a `RelativeTime` or plain text. |
| `body?` | `RemixNode` | A comment or other body, set as a card under the line. |
| `children?` | `RemixNode` | What happened, in muted text after the actor: "resolved the incident". |

Also accepts everything in `Omit<TagProps<"li">, "children">`.


### Timeline.More

Renders a run of events folded behind a `<details>`: its summary sits on the rail with an ellipsis glyph, and its events open in place, in the same list and on the same rail.

| Prop | Type | Description |
| --- | --- | --- |
| `summary` | `RemixNode` | The disclosure's label, such as "4 more events". |
| `open?` | `boolean` | Starts unfolded. |
| `children` | `RemixNode` | The folded Timeline.Event items. |

Also accepts everything in `Omit<TagProps<"li">, "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Tone` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger"` | The semantic role an event's icon is drawn in. |