KQ-738 · DAY/CLOSE

Day Close

An end-of-day card whose figures read as dashes until totalled, then reveal in sequence: each figure's digit columns mount at zero and roll up on snap, offset by cascade per figure and a shorter step per column, so the card reads as one sweep from top to bottom. Once the last column lands the category bars draw, each fill scaling from the left on glide in its own cascade with its share fading in behind, and closing stamps a rotated CLOSED over the figures on recoil, two bounces of ink hitting paper. One button carries the flow, Total the day, Close the day, Closed, and locks once closed.

KQ-738 · DAY/CLOSE

Waylight Pay · Terminal 2

Tuesday 9 September

Sales: not totalled
Refunds: not totalled
Tips: not totalled
Net: not totalled

Drinks, not totalled
Food, not totalled
Retail, not totalled
Other, not totalled

Open · not totalled

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/day-close

Props

figures: DayFigure[]; default —; The figures top to bottom: id, label, value and an optional tone of neutral, success or danger. The last one is announced as the net.
categories: DayCategory[]; default —; The bars: id, label and value; shares are computed from their sum.
state / defaultState: "open" | "totalled" | "closed"; default "open"; Controlled or initial state.
onStateChange: (state: DayState) => void; default —; Fires from the press that advanced it.
heading: string; default —; The day, as text.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats every figure and bar amount. The default pins an explicit locale so server and client agree.
label: string; default "Day close"; Names the card for the group.

Prop	Type	Default	Description
figures	DayFigure[]	—	The figures top to bottom: id, label, value and an optional tone of neutral, success or danger. The last one is announced as the net.
categories	DayCategory[]	—	The bars: id, label and value; shares are computed from their sum.
state / defaultState	"open" \| "totalled" \| "closed"	"open"	Controlled or initial state.
onStateChange	(state: DayState) => void	—	Fires from the press that advanced it.
heading	string	—	The day, as text.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats every figure and bar amount. The default pins an explicit locale so server and client agree.
label	string	"Day close"	Names the card for the group.