KQ-880 · AWAY/TIMER

Away Timer

Going away dims the disc, hangs a clock on its corner in place of the presence dot, and draws a ring that drains linearly across the period, because a minute is a minute and no easing may borrow from it. The remainder lives in one motion value the ring reads and the mm:ss figure steps from, so the two can never disagree and no clock is read during render. Expiry returns the presence dot with a pop from 0.4 on recoil, and coming back early plays the same pop.

KQ-880 · AWAY/TIMER

Marta VieiraOnline

Online · here

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/away-timer

Props

name: string; default —; The member, shown and spoken.
seconds: number; default 600; The away period counted from, in seconds. Changing it restarts the run.
away / defaultAway: boolean; default false; Controlled or initial away state.
onAwayChange: (away: boolean) => void; default —; Fires when away is set or cleared, including at expiry.
note: string; default "Back shortly"; The away note shown beside the countdown.
warnSeconds: number; default 60; Remainder at which the ring and the figure warm to warn.
onExpire: () => void; default —; Fires once when the remainder reaches zero.
onRemainingChange: (seconds: number) => void; default —; Fires from the timer each time the whole second changes.
disabled: boolean; default false; Holds the control; the countdown still runs and still reads.

Prop	Type	Default	Description
name	string	—	The member, shown and spoken.
seconds	number	600	The away period counted from, in seconds. Changing it restarts the run.
away / defaultAway	boolean	false	Controlled or initial away state.
onAwayChange	(away: boolean) => void	—	Fires when away is set or cleared, including at expiry.
note	string	"Back shortly"	The away note shown beside the countdown.
warnSeconds	number	60	Remainder at which the ring and the figure warm to warn.
onExpire	() => void	—	Fires once when the remainder reaches zero.
onRemainingChange	(seconds: number) => void	—	Fires from the timer each time the whole second changes.
disabled	boolean	false	Holds the control; the countdown still runs and still reads.