## Week Strip (S—091)

A one-week date strip: swipe or arrow to the next week, tap a day, dots mark days with events.

- URL: https://sundaeui.dev/components/week-strip
- Category: Forms & inputs · 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/week-strip.json`
- Tags: date, schedule, strip, calendar, week, mobile

Seven days in a row with the selected day filled and today underlined. The arrows (or a horizontal swipe) slide the whole week in from the side.
Small dots under a day show how many things are scheduled, up to three. Below, the selected date is spelled out.

### Usage

```tsx
import { WeekStrip } from '@/components/sundae/week-strip'

<WeekStrip />
```

### Props

- `value / defaultValue` (`Date`): Selected day.
- `onValueChange` (`(d: Date) => void`): Called on change.
- `events` (`Record<string, number>`): Event counts by YYYY-MM-DD.
- `weekStartsOn` (`0 | 1`, default `1`): Sunday or Monday.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Agenda, habit, fitness and booking screens on mobile.

### When not to use

- Picking dates far away: use a month calendar.

### Accessibility

- Days form a radiogroup with full date labels such as "Thursday 12 November, 2 events".
- Arrow keys move by a day and cross into the next week.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Previous / next day
- Page Up / Down: Previous / next week