KQ-916 · TIMEOUT/RING

Timeout Ring

A moderator's timeout hung on a member's avatar as an arc that retreats linearly across the span, ticked at each minute, while the disc dims on glide and a mute glyph takes the corner. Extend does not restart the run: the arc springs back out to its new share on glide and hands over to the drain from its own onComplete, and either ending clears the ring with a pop as the disc returns on recoil. Extend and Lift are real buttons in the tab order, the state is a visible sentence rather than a colour, and a polite region speaks one frozen line per change.

KQ-916 · TIMEOUT/RING

Marta Vieira@martaClear

Can post in Coldbrook.

Marta · can post · no timeout

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/timeout-ring

Props

name: string; default —; The member, shown and spoken.
handle: string; default —; The member's handle, shown under the name.
room: string; default "Coldbrook"; Where the timeout applies; named in both sentences.
reason: string; default "Room rule 3"; The house rule cited on the row.
seconds: number; default 600; The timeout span. Changing it starts a new run.
active / defaultActive: boolean; default false; Controlled or initial timeout state.
onActiveChange: (active: boolean) => void; default —; Fires when the timeout starts, is lifted, or runs out.
extendSeconds: number; default 300; Seconds Extend adds to the remainder.
onExtend: (total: number) => void; default —; Fires from Extend with the new whole span.
onRemainingChange: (seconds: number) => void; default —; Fires each time the whole second changes.
onExpire: () => void; default —; Fires once when the remainder reaches zero.
onLift: () => void; default —; Fires when a moderator ends the timeout early.
canModerate: boolean; default true; False hides Extend and Lift, for a member reading their own timeout.
disabled: boolean; default false; Holds both controls; the ring still drains and still reads.
className: string; default —; Extra classes on the row.

Prop	Type	Default	Description
name	string	—	The member, shown and spoken.
handle	string	—	The member's handle, shown under the name.
room	string	"Coldbrook"	Where the timeout applies; named in both sentences.
reason	string	"Room rule 3"	The house rule cited on the row.
seconds	number	600	The timeout span. Changing it starts a new run.
active / defaultActive	boolean	false	Controlled or initial timeout state.
onActiveChange	(active: boolean) => void	—	Fires when the timeout starts, is lifted, or runs out.
extendSeconds	number	300	Seconds Extend adds to the remainder.
onExtend	(total: number) => void	—	Fires from Extend with the new whole span.
onRemainingChange	(seconds: number) => void	—	Fires each time the whole second changes.
onExpire	() => void	—	Fires once when the remainder reaches zero.
onLift	() => void	—	Fires when a moderator ends the timeout early.
canModerate	boolean	true	False hides Extend and Lift, for a member reading their own timeout.
disabled	boolean	false	Holds both controls; the ring still drains and still reads.
className	string	—	Extra classes on the row.