Meter group | Arcadia Design

Five accounts52% left

import { useState } from "react";
import { MeterGroup } from "@arcadia/ui";

function Accounts() {
  const [active, setActive] = useState<string | null>(null);
  const shown = ACCOUNTS.find((a) => a.id === (active ?? "work"))!;
  const value = shown.state === "off" ? "Signed out" : shown.tone === "danger" ? "Limit reached" : `${shown.value}% left`;
  return (
    <div {...sx("cmp-meter-group-row", s.row)}>
      <span {...sx("cmp-meter-group-name", s.name)}>Five accounts</span>
      <span {...sx("cmp-meter-group-meter", s.meter)}><MeterGroup segments={ACCOUNTS} active={active} onActiveChange={setActive} /></span>
      <span {...sx("cmp-meter-group-value", s.value)}>{value}</span>
    </div>
  );
}

A provider with five accounts: the strong segment answers next, a spent one is a red track with its week held faintly, a signed out one a dashed line.

TSX

import { MeterGroup } from "@arcadia/ui";

<MeterGroup segments={[{ id: "a", value: 52, emphasis: "strong" }, { id: "b", value: 0, tone: "danger", held: 40 }]} />

One meter cut into segments: several things of one kind measured side by side, each with its own level and state, sharing the width equally. A segment is a Meter of its own, so one segment reads exactly as a Meter, held included. Give the one the number beside the group speaks for emphasis="strong" and leave the rest normal (quiet is for room that cannot be used now); with active and onActiveChange, the segment under the pointer keeps its ink and its siblings step back, which is how a hover card or a detail line follows the pointer along the bar. A segment's hit area is as tall as the group.

It takes one to fifteen segments. Past five it goes dense (data-dense): the gap halves and a segment may get as narrow as it must, so fifteen still fit a 144px row and a 96px one. When the order changes, each segment glides to its new place, unless the pointer or focus is on the group or motion is reduced.

Examples

Counts

Up to five, a segment never gets narrower than --meter-group-min-w; past five the group packs closer.

1 segment

3 segments

5 segments

8 segments, dense

10 segments, dense

15 segments, dense

15 segments at 96px

States

A segment that is not a level says which; stale steps a level back.

level: what is left

off: a sign-in to renew

unknown: nothing reported

pending: not read yet

busy: working on it

stale: an old number

Reorder

Segments are keyed by id: a segment that changes place glides there on the settle curve.

import { useState } from "react";
import { Button, MeterGroup } from "@arcadia/ui";

function Reorder() {
  const [spent, setSpent] = useState<string[]>([]);
  const order = [...READY.filter((id) => !spent.includes(id)), ...spent];
  return (
    <div {...sx("cmp-meter-group-stack", s.stack)}>
      <span {...sx("cmp-meter-group-cell", s.cell)}><MeterGroup segments={order.map((id) => reading(id, spent.includes(id)))} /></span>
      <div {...sx("cmp-meter-group-actions", s.actions)}>
        <Button size="sm" variant="secondary" disabled={spent.length === READY.length}
          onClick={() => setSpent((x) => [...x, READY.find((id) => !x.includes(id))!])}>Spend the next</Button>
        <Button size="sm" variant="ghost" disabled={!spent.length} onClick={() => setSpent((x) => x.slice(1))}>Reset the first</Button>
      </div>
    </div>
  );
}

rootStyle takes layout and these knobs.

--meter-group-gap: Ref<Space>Default var(--space-1); The gap between two segments.
--meter-group-min-w: Ref<Space> | 0Default var(--space-6); The narrowest a segment gets: 24px, 0 once dense.

Without a label the group is decorative: say what it shows in the words beside it, or in the name of the control it sits in. With a label it is a group of its labelled segments, each a meter (or, when it is not a level, an img named by its state). Tone and emphasis are colour only, so the words carry spent, low and signed out too. A glide never runs under the pointer or the focus, so nothing moves while someone is reading it.

MeterGroup

segmentsrequired: readonly MeterSegment[]; One to fifteen, in drawing order; dense past five.
size: "sm" | "md"Default "md"
active: string | nullDefault null; The segment with the pointer: it keeps its ink, the others go quiet.
onActiveChange: (id: string | null) => void; The pointer came to a segment, or left the group (null).
label: string; Accessible name ("ChatGPT accounts"): with one it is a group of its labelled segments.
rootStyle: RootStyle<MeterGroupKnobs>; Typed StyleX override: layout and the --meter-group-* knobs.

Usage

Examples

Counts

States

Reorder

Customising

Accessibility

API reference

MeterGroup