KQ-595 · STATEMENT/FOLD

Statement Fold

A month's statement folded in three: pressing the header unfolds income, spend and net, each rotating from -90 degrees about its own top edge on glide in a cascade, so the letter opens from the top down instead of all at once. Folding back reverses the order on the exit ease, and the card's height comes from a ResizeObserver on the open content rather than a reserved minimum. Each panel's bar draws with scaleX against the largest of the three figures, the net colours by sign and never bounces, and the header is a real aria-expanded button that Enter, Space and Escape drive.

KQ-595 · STATEMENT/FOLD

Income: +$6,480.00
Spend: -$5,195.80
Net: +$1,284.20

August · open · net +$1,284.20

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/statement-fold

Props

month: string; default —; The statement's month, as printed.
year: string | number; default —; Optional year beside the month.
accountName: string; default —; The account the statement belongs to, printed under the month.
income: number; default —; Money in, major units.
spend: number; default —; Money out, positive major units.
net: number; default income - spend; Overrides the computed net when the host has its own figure.
open / defaultOpen: boolean; default false; Controlled or initial fold state.
onOpenChange: (open: boolean) => void; default —; Fires from the press or the Escape that changed it.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats an unsigned amount; the card composes the signs itself.

Prop	Type	Default	Description
month	string	—	The statement's month, as printed.
year	string \| number	—	Optional year beside the month.
accountName	string	—	The account the statement belongs to, printed under the month.
income	number	—	Money in, major units.
spend	number	—	Money out, positive major units.
net	number	income - spend	Overrides the computed net when the host has its own figure.
open / defaultOpen	boolean	false	Controlled or initial fold state.
onOpenChange	(open: boolean) => void	—	Fires from the press or the Escape that changed it.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats an unsigned amount; the card composes the signs itself.