import { Canvas, Meta } from '@storybook/blocks'
import * as Stories from './DateRangeField.stories'

<Meta of={Stories} />

# DateRangeField

A date range picker with dual calendar view for selecting start and end dates.

## Usage

```tsx
import { DateRangeField } from '@/components/onboarding'
import type { DateRange } from '@/components/onboarding'

<DateRangeField
  id="project-dates"
  label="Project Timeline"
  placeholder="Pick a date range"
  value={dateRange}
  onChange={setDateRange}
  numberOfMonths={2}
/>
```

## Examples

### Default

<Canvas of={Stories.Default} />

### With Value

<Canvas of={Stories.WithValue} />

### With Description

<Canvas of={Stories.WithDescription} />

### Single Month View

<Canvas of={Stories.SingleMonth} />

### With Min/Max Dates

<Canvas of={Stories.WithMinMaxDates} />

### With Error

<Canvas of={Stories.WithError} />

### Disabled

<Canvas of={Stories.Disabled} />