---

## DateRangePicker
Date range picker with a dual-calendar popup for selecting a start and end date — min/max constraints, disabled dates, and native form submission via paired hidden inputs.

**Import:** `import { DateRangePicker } from '@urbicon-ui/blocks';`

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| calendarVariant | `'default' | 'bordered' | 'ghost'` | no |  | calendarVariant property |
| class | `string` | no |  | Additional CSS classes to apply to the DateRangePicker component |
| clearable | `boolean` | no |  | Clearable property for the DateRangePicker component |
| closeOnClickOutside | `boolean` | no | true | Whether the popover closes on outside click. |
| closeOnEscape | `boolean` | no | true | Whether the popover closes on Escape key. |
| closeOnSelect | `boolean` | no | true | Close popover after selecting both dates. |
| defaultMonth | `MonthIndex` | no |  | Default month shown when the picker opens without a value. `0`–`11`. |
| defaultYear | `number` | no |  | Default year shown when the picker opens without a value. |
| disabled | `boolean` | no |  | Whether the DateRangePicker is disabled and non-interactive |
| disabledDates | `Date[]` | no |  | disabledDates property |
| displayFormat | `DateFormatOptions` | no |  | Intl.DateTimeFormat options for displayed dates. |
| error | `string` | no |  | Error property for the DateRangePicker component |
| fixedWeeks | `boolean` | no |  | FixedWeeks property for the DateRangePicker component |
| helper | `string` | no |  | Helper property for the DateRangePicker component |
| inputVariant | `'outlined' | 'filled' | 'ghost' | 'underline'` | no |  | inputVariant property |
| isDateDisabled | `(date: Date) => boolean` | no |  | Predicate that disables specific dates. Throws are caught and logged; the date is then treated as allowed. |
| label | `string` | no |  | Label above the input. |
| locale | `string` | no | 'auto' | BCP 47 locale tag for date formatting — month names, weekday names and the header title. Defaults to `'auto'`, which follows the active `<I18nProvider>` locale, so an app that already declares its language does not have to repeat it here. SSR-safe: the locale comes from context, so the server and the client resolve the same tag (`Intl` with `undefined` would follow the runtime and disagree across hydration). Falls back to the base locale (`en`) when no provider is mounted. Pass an explicit tag (e.g. `'de-DE'`, `'ja-JP'`) to override.  Until 2026-07-31 this defaulted to the literal `'de-DE'`, so an English app rendered German month names unless every date component was passed `locale` by hand. |
| maxDate | `Date` | no |  | MaxDate property for the DateRangePicker component |
| minDate | `Date` | no |  | MinDate property for the DateRangePicker component |
| mint | `MintProp` | no | 'none' | Micro-interaction preset forwarded to the inner Input. |
| name | `string` | no |  | Shared base `name` for native form submission. When set, two hidden inputs are rendered — `{name}_start` and `{name}_end` — each carrying the serialized date, so the visible input's locale-formatted display string is never submitted instead.  Empty range submits both halves as `""`. The `_start` / `_end` convention reflects the picker's domain language — date ranges read naturally as start/end rather than min/max. |
| onClickOutside | `() => void` | no |  | Notification only — does NOT govern close behavior. |
| onEscape | `() => void` | no |  | Notification only — does NOT govern close behavior. |
| onOpenChange | `(open: boolean) => void` | no |  | onOpenChange property |
| onValueChange | `(value: DateRange | undefined) => void` | no |  | Fires when the selected range changes. During calendar selection the user clicks twice — once to set the start, once to set the end. `onValueChange` only fires when the range is *complete* (start ≠ end); the intermediate `{ start: d, end: d }` state does NOT fire this callback. Use `bind:value` if you need the in-progress state. |
| placeholder | `string` | no |  | Placeholder when no range is selected. |
| required | `boolean` | no |  | Required property for the DateRangePicker component |
| showOutsideDays | `boolean` | no |  | showOutsideDays property |
| showWeekNumbers | `boolean` | no |  | showWeekNumbers property |
| size | `'xs' | 'sm' | 'md' | 'lg' | 'xl'` | no |  | Size variant that controls dimensions and spacing of the DateRangePicker |
| value | `DateRange` | no |  | Currently selected date range. Supports bind:value. |
| valueFormat | `'date' | 'iso'` | no | 'date' | Format used to serialise both range halves. See `DatePickerProps.valueFormat` for semantics. |
| weekStartsOn | `WeekdayIndex` | no |  | weekStartsOn property |

Inherited from:
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)

### Types
```ts
interface DatePickerPreset {
label: string;
  value: Date;
}
```

```ts
interface DateRangePreset {
label: string;
  value: DateRange;
}
```

```ts
type MintProp = | MintName
  | { name: MintName; config?: MintConfig & Record<string, unknown> }
  | Array<MintName>
  | Array<MintName | { name: MintName; config?: MintConfig & Record<string, unknown> }>
```

```ts
type MonthIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11
```

```ts
type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6
```

```ts
interface DateRange {
start: Date;
  end: Date;
}
```

```ts
type DateFormatOptions = Intl.DateTimeFormatOptions
```

```ts
type MintName = BuiltinMintName | 'none' | (string & {})
```

```ts
interface MintConfig {
/**
   * `hover` and `focus` hold the effect while the pointer/visible focus stays
   * on the element; `click` and `load` run it once.
   */
  trigger?: 'hover' | 'click' | 'focus' | 'load';
  /**
   * Effect duration in ms. Written as an inline per-effect custom property
   * (`--blocks-mint-<effect>-duration`), so the CSS transition/animation
   * actually runs at this speed; unset, the theme duration tokens apply.
   */
  duration?: number;
  /** Delay in ms before the effect applies. */
  delay?: number;
  /**
   * CSS easing for the effect (`--blocks-mint-<effect>-easing` inline);
   * unset, the per-effect theme default applies.
   */
  easing?: string;
  disabled?: boolean;
}
```

```ts
type BuiltinMintName = (typeof BUILTIN_MINT_NAMES)[number]
```