KQ-677 · WEEK/STRIP

Week Strip

A week of spend, seven bars in one plot. The bars draw up from the baseline on glide in a cascade — a quantity settling, so no overshoot — while today's column keeps a ring that breathes on a mirrored opacity tween and stops when the tab is hidden. Swiping changes week: the pointer is captured only after 4px of travel, the strip follows the finger with rubber-band resistance at the ends, and on release the same seven bars keep their identity and glide to the new week's heights while the strip springs back on snap. Left and Right step days, Home and End reach the ends of the week, PageUp and PageDown change week, Enter and Space select.

KQ-677 · WEEK/STRIP

Week of Oct 20$412.90 · 3 over budget

Week $412.90 · budget $60.00 a day

Week of Oct 20 · $412.90 · 3 days over · reading —

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/week-strip

Props

weeks: SpendWeek[]; default —; Weeks oldest first; each carries seven days and an optional todayIndex.
value / defaultValue: string; default the most recent week; Controlled or initial week id.
onValueChange: (id: string) => void; default —; Fires from the swipe, the chevrons, or PageUp and PageDown that changed week.
onDayChange: (day: SpendDay | null, index: number) => void; default —; Fires from the press or keypress that selected a day.
dailyBudget: number; default —; Draws a dashed guide across the plot; bars above it read warn.
format: (value: number) => string; default USD Intl.NumberFormat; Formats every amount.
label: string; default Weekly spend; Names the strip for assistive technology.

Prop	Type	Default	Description
weeks	SpendWeek[]	—	Weeks oldest first; each carries seven days and an optional todayIndex.
value / defaultValue	string	the most recent week	Controlled or initial week id.
onValueChange	(id: string) => void	—	Fires from the swipe, the chevrons, or PageUp and PageDown that changed week.
onDayChange	(day: SpendDay \| null, index: number) => void	—	Fires from the press or keypress that selected a day.
dailyBudget	number	—	Draws a dashed guide across the plot; bars above it read warn.
format	(value: number) => string	USD Intl.NumberFormat	Formats every amount.
label	string	Weekly spend	Names the strip for assistive technology.