## Date Range Presets (S—122)

Quick ranges like Last 7 days alongside a month grid where two clicks set a custom range, with live hover preview.

- URL: https://sundaeui.dev/components/date-range-presets
- Category: Forms & inputs · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/date-range-presets.json`
- Tags: date-range, filter, presets, picker, analytics, calendar

Presets fill the range instantly and highlight it on the calendar. Clicking a start date and hovering shows the range forming before the second click commits it.
The header spells out the range and its length in days.

### Usage

```tsx
import { DateRangePresets } from '@/components/sundae/date-range-presets'

<DateRangePresets />
```

### Props

- `value` (`{ from: Date; to: Date }`): Range.
- `onValueChange` (`(r: { from: Date; to: Date }) => void`): Called when a range is complete.
- `today` (`Date`, default `new Date()`): Reference date.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Analytics dashboards, reports, booking searches.

### When not to use

- Single dates: use a date picker.

### Accessibility

- Presets are a radiogroup; days are buttons with full date labels and aria-pressed for range ends.
- The range summary is a polite live region.
- Reduced motion removes the movement and keeps every state change.