BreakRows

The gaps in a working day, a row each — from, to, a red trash to remove it — and Add a break. As many as the day needs: working 8–10, 11–14 and 15–18 is one day from 8:00 to 18:00 with two breaks. The usual week's days and a changed date use the same rows.

Playground

Breaks

Works 8:00–10:00, 11:00–14:00, 15:00–18:00

import { BreakRows } from "@/components/shared/break-rows";

<BreakRows
  breaks={breaks}
  open="08:00"
  close="18:00"
  onChange={setBreaks}
/>

The day

Opens

Closes

API

Prop	Type	Default	Description
breaks	ExceptionBreak[]	—	The day's gaps, {start, end} in HH:MM.
open / close	string	—	The day's hours. Add a break places the next gap inside what's left after the last one.
onChange	(breaks) => void	—	Every edit, addition and removal.
invalid / describedBy	boolean / string	false / —	The gaps don't fit the day: the inputs say so, pointing at the error that says why.
id	string	generated	Prefix for the inputs' ids.
labels	Partial<BreakRowsLabels>	English	Every word, the inputs' names included.

Guidelines

Gaps sit inside the day, in order, without overlapping (breaksFit); check before saving, the server checks again.
Read a day back as the stretches worked, not as hours and gaps: “8:00–10:00, 11:00–14:00, 15:00–18:00” (formatSpans).
Add a break disappears when less than an hour of the day is left after the last gap.