# ElapsedTime

> A live timer in tabular numerals.

Source: https://ui.jcsoftdev.com/docs/components/elapsed-time

A live timer in tabular numerals. Every instance shares one ticker (a single timer, aligned to
the second, running only while something is mounted). It renders `<time>` with an ISO duration
in `dateTime`, exposes plain text such as "12 minutes" to assistive tech and is never an
`aria-live` region, so it does not interrupt anyone.

## Import

```ts
import { ElapsedTime } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/elapsed-time`.

## Usage

```tsx
<ElapsedTime />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `since` * | `string \| Date` |  | Moment the timer counts from. |
| `serverOffsetMs` | `number` |  | Server clock minus the client clock in ms, so a skewed device still shows the server's elapsed time. |
| `format` | `"mm:ss" \| "minutes"` | `"mm:ss"` | `mm:ss` (default) shows a ticking clock; `minutes` shows whole minutes. With reduced motion requested, `mm:ss` is shown as whole minutes so the digits stop ticking. |
| `warnAt` | `number` |  | Minutes from which the text turns warning (counting up), or down to which it does (countdown). |
| `dangerAt` | `number` |  | Minutes from which the text turns danger (counting up), or down to which it does (countdown). A countdown past its target is always danger. |
| `countdownTo` | `string \| Date` |  | Turns the timer into a countdown to this moment; `since` is then only the fallback reference. |
| `classNames` | `Partial<Record<ElapsedTimePart, string>>` |  | Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/atoms-elapsedtime--default)
- [Minutes](/storybook/?path=/story/atoms-elapsedtime--minutes)
- [Warning](/storybook/?path=/story/atoms-elapsedtime--warning)
- [Danger](/storybook/?path=/story/atoms-elapsedtime--danger)
- [Countdown](/storybook/?path=/story/atoms-elapsedtime--countdown)
- [Server Offset](/storybook/?path=/story/atoms-elapsedtime--server-offset)
- [Shared Ticker](/storybook/?path=/story/atoms-elapsedtime--shared-ticker)
- [Spanish](/storybook/?path=/story/atoms-elapsedtime--spanish)
- [Dark](/storybook/?path=/story/atoms-elapsedtime--dark)

## Source

`packages/ui/src/atoms/elapsed-time/elapsed-time.tsx`