KQ-930 · AVAILABILITY/GRID

Availability Grid

A message that asks a room when it is free and answers itself as the answers arrive. Each cell fills from its bottom edge on glide by the share of the room that can make that slot, the figure rolls to its new value on snap, and the crown ring travels from the old leader to the new one on snap through a useId-prefixed layoutId. It is a real role=grid with a roving tabindex — arrows move a cell, Home and End jump along the row, Space toggles your answer — and posting the leader stamps a tick on recoil.

KQ-930 · AVAILABILITY/GRID

Marta Ferreira · 08:55When can everyone make the depot run?
TimeTueWedThuFri
08:00
13:00
18:00
4 of 6 can make the best slot so far

4 of 6 · Thu 18:00 leads

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/availability-grid

Props

days: string[]; default —; Column headings in order; long names truncate with a title.
times: string[]; default —; Row headings in order, one per time band.
people: number; default —; The room's size. Every count is out of it, and it sizes each fill's share.
votes: Record<string, number>; default {}; Everyone else's answers, keyed "<dayIndex>-<timeIndex>".
mine / defaultMine: string[]; default []; Controlled or initial list of slot keys you said yes to — the only vote a viewer can change.
onMineChange: (keys: string[]) => void; default —; Fires from the setter that toggled a cell, with the next whole list.
decided: string | null; default null; The posted slot key. Only the host sets it; it locks the grid and stamps the chosen cell.
onPost: (key: string) => void; default —; Fires from the post control with the leading slot's key.
postLabel: string; default "Post this time"; The word on the post control.
disabled: boolean; default false; Holds every cell and the post control.
label: string; default —; Names the grid for assistive technology.
className: string; default —; Extra classes on the card.

Prop	Type	Default	Description
days	string[]	—	Column headings in order; long names truncate with a title.
times	string[]	—	Row headings in order, one per time band.
people	number	—	The room's size. Every count is out of it, and it sizes each fill's share.
votes	Record<string, number>	{}	Everyone else's answers, keyed "<dayIndex>-<timeIndex>".
mine / defaultMine	string[]	[]	Controlled or initial list of slot keys you said yes to — the only vote a viewer can change.
onMineChange	(keys: string[]) => void	—	Fires from the setter that toggled a cell, with the next whole list.
decided	string \| null	null	The posted slot key. Only the host sets it; it locks the grid and stamps the chosen cell.
onPost	(key: string) => void	—	Fires from the post control with the leading slot's key.
postLabel	string	"Post this time"	The word on the post control.
disabled	boolean	false	Holds every cell and the post control.
label	string	—	Names the grid for assistive technology.
className	string	—	Extra classes on the card.