# Meter and ProgressBar

> A segmented meter for small counts (seats used) and a bar for progress through a total.

Category: Data display. Docs page: https://rime.mjsons.net/components/meter

## Installation

```bash
npx shadcn@latest add KezLahd/rime/meter
```

Meter draws one segment per unit up to max (default 5). ProgressBar is a continuous bar for larger totals. Both announce value text.

## Usage

```tsx
import { Meter, ProgressBar } from "@/components/ui";

<Meter label="Seats" value={3} max={5} valueText="3 of 5 used" />
```

## Props: Meter

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `number` |  |  |
| `max` | `number` | `5` | Discrete slots. The team member cap is 5. |
| `label` (required) | `string` |  | Visible caption and the basis of the accessible name, e.g. "Slots in use". |
| `valueText` | `string` |  | Spoken value; defaults to "3 of 5". |
| `note` | `ReactNode` |  | Line under the segments, e.g. "At capacity: withdraw a customer to free a slot". |
| `size` | `"sm" \| "md"` | `"md"` | md = dashboard header block. sm = inline in a table cell. |
| `className` | `string` |  |  |

## Props: ProgressBar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `number` |  |  |
| `max` (required) | `number` |  |  |
| `label` (required) | `string` |  |  |
| `valueText` | `string` |  |  |
| `className` | `string` |  |  |

## Examples

### Default

```tsx
<Meter label="Seats" value={3} max={5} />
<ProgressBar label="Quarterly target" value={240} max={400} />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--r-flat` | `3px` / `2px` |

System tokens it reads: `--brand-deep`, `--brand-gradient`, `--brand-soft`, `--danger-base`, `--danger-base-solid`, `--danger-ink`, `--dur-slow`, `--ease`, `--ink-heading`, `--ink-muted`, `--ink-secondary`, `--rgb-brand`, `--rgb-brand-deep`, `--rgb-contact`, `--rgb-danger`, `--shadow-specular-dark`, `--text-caption`, `--text-micro`, `--tracking-eyebrow`.

## Accessibility

- role="meter" / role="progressbar" with aria-valuenow, -min, -max and aria-valuetext.

## Do

- Write valueText in words people use: "3 of 5 seats used".

## Don't

- Don't use a meter for a task that is in progress over time; that is a Spinner or a toast.