Weekly time grid

<TimeGrid
  days={days}
  cells={cells}
  focused={focused}
  weekendDays={[0, 6]}
  workingHours={{ startHour: 8, endHour: 18 }}
  gridLabel="Availability slots"
  hourLabel={(hour) => `${String(hour % 24).padStart(2, '0')}:00`}
  cellLabel={(day, start, end, selected) =>
    `${day.long} ${start}–${end}, ${selected ? 'selected' : 'unselected'}`
  }
  matrixRef={matrixRef}
  onFocus={setFocused}
  {...interaction}
/>
<Legend
  label="Availability legend"
  items={[
    { id: 'selected', label: 'Selected', tone: 'selected' },
    { id: 'outside', label: 'Outside working hours', tone: 'outside' },
    { id: 'weekend', label: 'Weekend', tone: 'muted' },
  ]}
/>
<output aria-label="Time selection commits">
  {commits} {commits === 1 ? 'change' : 'changes'} committed
</output>