Meter

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

<Meter value={52} label="Weekly" valueText="52% left, resets October 11 at 16:37" />

A linear bar of what is left, never of what is used: a full bar is room, an empty one is spent. value is the remaining share, 0 to 100. tone says how it reads: neutral, warning (a yellow fill) at 15% left or under, danger once the window is spent, when the whole track takes a red tint. Pair it with the plan formatters (fmtLeft, fmtReset, leftTone) so the number beside it reads the same on every surface.

rootStyle takes layout and these knobs. tone sets the fill and the track; set them yourself only for a meter whose tones mean something else.

With a label the bar is a meter with its value and range, and a valueText that says the whole fact: "52% left, resets October 11 at 16:37". Without a label it is decorative, beside text that already says it. Tone is colour only, so the words beside the bar carry low and spent too: a window under one percent reads as less than 1% left, a spent one as Limit reached.