KQ-596 · RESERVE/GAUGE

Reserve Gauge

A balance bar split to scale between spendable money and the holds sitting on it, each hold hatched and sized by its share. Clearing a hold shrinks its segment away on the exit ease while the available run glides wider and the figure rolls its digits on snap; a reader caret slides to whichever segment is being read on snap. The holds are one Tab stop with a roving tabindex — Left and Right step, Home and End jump, Enter pins the reason open, Escape unpins.

KQ-596 · RESERVE/GAUGE

Coldbrook current accountof $1,284.60

available

3 holds · $318.40 held

Available 966.20 · 3 holds 318.40

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/reserve-gauge

Props

total: number; default —; Cleared balance, holds included.
holds: ReserveHold[]; default []; Each hold's id, amount, reason and clearing note, drawn left to right.
label: string; default —; Names the account and labels the bar.
format: (amount: number) => string; default en-US currency; Renders every amount; the locale is pinned so the server and client agree.
activeHoldId / defaultActiveHoldId: string | null; default —; Controlled or initial pinned hold — the one whose reason stays open.
onActiveHoldChange: (id: string | null) => void; default —; Fires from the press that pinned or unpinned a hold.
onHoldReveal: (id: string | null) => void; default —; Fires when hover or focus changes which reason is showing.

Prop	Type	Default	Description
total	number	—	Cleared balance, holds included.
holds	ReserveHold[]	[]	Each hold's id, amount, reason and clearing note, drawn left to right.
label	string	—	Names the account and labels the bar.
format	(amount: number) => string	en-US currency	Renders every amount; the locale is pinned so the server and client agree.
activeHoldId / defaultActiveHoldId	string \| null	—	Controlled or initial pinned hold — the one whose reason stays open.
onActiveHoldChange	(id: string \| null) => void	—	Fires from the press that pinned or unpinned a hold.
onHoldReveal	(id: string \| null) => void	—	Fires when hover or focus changes which reason is showing.