KQ-860 · SCHEDULE/CHIP
Schedule Chip
A composer whose send button can wear a clock. The schedule control opens a list of times that rises above the field from eight pixels on snap; choosing one puts the time in a chip on the composer's foot, scaling in from 0.9 on the same spring, and turns the send button into a clock — the arrow crosses out as a face crosses in and the two hands sweep from twelve to the hour and the minute on snap, each on its own rotation. Sending with a time queues instead: a card lands under the composer on glide with the text, the time in words, a ring that drains across the wait and a seconds readout, both holding where they are while the tab is hidden. Arrows move the list, Home and End jump, Enter or Space picks, Escape closes and hands focus back to the control.
ready · send now
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/schedule-chip
Props
- options
- ScheduleOption[]
- default —
- The times offered: id, a label read on the chip and by the send button, the hour and minute the hands sweep to, and delayMs — the wait each one means.
- value / defaultValue
- string | null
- default null
- Controlled or initial chosen option id. Null sends now.
- onValueChange
- (id: string | null) => void
- default —
- Fires from a pick, a clear, and after a queue clears the chip.
- queue
- ScheduledMessage[]
- default —
- The queued messages the parent holds, oldest first: id, text and the optionId that queued them. Each card runs its own wait.
- draft / defaultDraft
- string
- default ""
- Controlled or initial composer text.
- onDraftChange
- (text: string) => void
- default —
- Fires from every edit and from the clear after a send or a queue.
- onSend
- (text: string) => void
- default —
- Fires from Enter or Send with no time chosen.
- onQueue
- (text: string, option: ScheduleOption) => void
- default —
- Fires from Enter or Send with a time chosen; append the message to queue.
- onDeliver
- (id: string) => void
- default —
- Fires when a queued message's wait reaches zero; remove it from queue and deliver it.
- placeholder
- string
- default "Message"
- Composer placeholder.
- label
- string
- default —
- Names the composer for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | ScheduleOption[] | — | The times offered: id, a label read on the chip and by the send button, the hour and minute the hands sweep to, and delayMs — the wait each one means. |
| value / defaultValue | string | null | null | Controlled or initial chosen option id. Null sends now. |
| onValueChange | (id: string | null) => void | — | Fires from a pick, a clear, and after a queue clears the chip. |
| queue | ScheduledMessage[] | — | The queued messages the parent holds, oldest first: id, text and the optionId that queued them. Each card runs its own wait. |
| draft / defaultDraft | string | "" | Controlled or initial composer text. |
| onDraftChange | (text: string) => void | — | Fires from every edit and from the clear after a send or a queue. |
| onSend | (text: string) => void | — | Fires from Enter or Send with no time chosen. |
| onQueue | (text: string, option: ScheduleOption) => void | — | Fires from Enter or Send with a time chosen; append the message to queue. |
| onDeliver | (id: string) => void | — | Fires when a queued message's wait reaches zero; remove it from queue and deliver it. |
| placeholder | string | "Message" | Composer placeholder. |
| label | string | — | Names the composer for assistive technology. |