# Schedule Days (Moonarc)

A programme by day: a row of day chips (radio buttons, each a weekday over its date in a colour block) picks the day, and under it the day's sessions in order, with the time in the mono face, the title, who leads it, the stage as a chip in the stage's own colour and the kind of session beside it. A session can carry an id, so a lineup card links straight to it and it is marked when it is the target; one small script makes such a link pick the session's day, whose panel is hidden until then.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/schedule-days` (license key required)
- Tier B · category section · trigger click, load
- Readout: `<ScheduleDays days={[{ label, date, sessions: [{ start, end, title, stage }] }]} />`
- Browser support: newly (Chrome 105 · Firefox 121 · Safari 15.4); elsewhere: every day's sessions show one under another, each under its own date
- Measured cost: 419 B raw JS · 309 B gzip · + runtime (with dependencies 2.1 kB raw; CSS 12.3 kB raw)
- Page: https://moonarc.dev/components/schedule-days/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `days` | `{ label, date, note?, block?, sessions: { start, end?, title, people?, stage?, kind?, id? }[] }[]` | none | One to seven days. A session's times are 24-hour; id makes it a link target. |
| `stages` | `Record<string, 1 | 2 | 3 | 4 | 5>` | none | Each stage's colour block by its name; a stage not listed takes the blocks in turn. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
| `label` | `string` | `'Day'` | Accessible name of the row of days (the fieldset's legend). |
| `stageLabel` | `string` | `'Stage'` | The word a screen reader hears before a stage. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the section's heading; each day's title is one below. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; the chips keep their blocks on every tone. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import ScheduleDays from '@/components/moonarc/pro/ScheduleDays.astro';
---
<ScheduleDays
  eyebrow="Schedule"
  stages={{ 'Main stage': 1, 'Hall B': 2 }}
  days={[
    { label: 'Fri', date: '14 May', sessions: [
      { start: '10:00', end: '10:30', title: 'Opening', stage: 'Main stage', kind: 'Talk' },
      { id: 'letters', start: '10:30', end: '11:15', title: 'Letters that move', people: 'Type designer', stage: 'Main stage', kind: 'Talk' },
    ] },
    { label: 'Sat', date: '15 May', sessions: [{ start: '10:00', title: 'Fast pages', stage: 'Hall B', kind: 'Workshop' }] },
  ]}
>
  <span slot="headline">Three days, <em>one hall</em></span>
</ScheduleDays>
```

## Reduced motion

A day's sessions appear at once, without their short rise.

## With ClientRouter

CSS only; the picked day lives in the radio buttons and resets with the page.

## Craft

- The days are radio buttons in a fieldset: the arrow keys move along them, a screen reader says which is picked, and the panel that shows is plain CSS state.
- Each day keeps a title of its own (hidden while the chips pick it), so without :has() the days stack and still say which is which.
- A stage's colour is the same chip on every day, so a stage is found by its colour at a glance.
- The times are tabular figures in the mono face, so a column of them lines up.

## Replaces

- Agenda widgets (event platforms)
- Schedule tabs

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/schedule-days` with a key in components.json (https://moonarc.dev/account/).