<!-- source-hash: 62c605b851ea957354fc89970178b5ca -->
Storybook stories for the `DatePicker` UI component, covering single date, date range, input variants, time selection, constraints, and all-variants showcase.

## Key Components

| Export | Description |
|--------|-------------|
| `Single` | Basic single-date picker, uncontrolled initial state |
| `SingleWithValue` | Single picker pre-seeded with today's date |
| `Range` | Date range picker (from/to selection) |
| `RangeWithValue` | Range picker pre-filled with today + 7 days |
| `RangeTwoMonths` | Range picker showing two calendar months simultaneously |
| `Disabled` | Non-interactive picker in disabled state |
| `WithLabel` / `WithLabelAndError` | Picker with ODS label and optional error message |
| `RangeWithLabel` | Range picker with label |
| `CustomFormat` | Single picker with custom `formatDate` callback (en-GB locale) |
| `WithConstraints` | Single picker limited to the next 30 days via `fromDate`/`toDate` |
| `InputStyle` | `DatePickerInput` — calendar-icon-styled input variant |
| `InputWithLabel` / `InputWithLabelAndError` | Input variant with label/error |
| `InputWithTimeEmpty` | `DatePickerInput` with `showTime`, no initial value |
| `InputWithTime` | `DatePickerInput` with `showTime`, pre-seeded with today |
| `InputWithTime24Hour` | `DatePickerInput` with `use24HourFormat` flag |
| `AllVariants` | Side-by-side showcase of all major variants |

## Usage Example

```typescript
import { useState } from "react";
import {
  DatePicker,
  DatePickerInput,
  type DateRange,
} from "../components/ui/date-picker";

// Single date picker
function SingleExample() {
  const [date, setDate] = useState<Date | undefined>();
  return (
    <DatePicker
      mode="single"
      placeholder="Select date"
      value={date}
      onChange={setDate}
      label="Start Date"
    />
  );
}

// Range picker with two months
function RangeExample() {
  const [range, setRange] = useState<DateRange | undefined>();
  return (
    <DatePicker
      mode="range"
      placeholder="Select date range"
      value={range}
      onChange={setRange}
      numberOfMonths={2}
    />
  );
}

// Input variant with time (12h)
function InputTimeExample() {
  const [date, setDate] = useState<Date | undefined>(new Date());
  return (
    <DatePickerInput
      placeholder="Select date and time"
      value={date}
      onChange={setDate}
      showTime
      label="Event Date"
    />
  );
}
```