## Alarm List (S—286)

Phone-style alarms: toggle each one, repeat days as letter chips, delete in edit mode, and the time to the next alarm.

- URL: https://sundaeui.dev/components/alarm-list
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/alarm-list.json`
- Tags: clock, list, toggle, time, repeat, alarm

Each alarm shows its time large, its label and repeat days. The header states how long until the next active alarm, computed from a fixed now.
Edit mode reveals delete buttons; tapping an alarm in edit mode expands its day chips.

### Usage

```tsx
import { AlarmList } from '@/components/sundae/alarm-list'

<AlarmList />
```

### Props

- `alarms` (`{ id: string; h: number; m: number; label?: string; days: number[]; on: boolean }[]`, required): Alarms (days 0=Sun).
- `now` (`Date`): Reference time.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Clock and wellness apps, reminder settings.

### When not to use

- Calendar events: use an agenda.

### Accessibility

- Each alarm has a labelled switch stating its time and label.
- Day chips are toggle buttons with full day names.
- Reduced motion removes the movement and keeps every state change.