Storybook stories file for the `DatePicker` component, showcasing all variants, modes, and sub-components with interactive state management. ## Key Components | Story | Description | |---|---| | `Single` | Basic single-date picker, empty initial state | | `SingleWithValue` | Single-date picker pre-seeded with today's date | | `Range` | Date range picker with `from`/`to` selection | | `RangeWithValue` | Range picker pre-seeded with a 7-day window | | `RangeTwoMonths` | Range picker rendering two calendar months | | `Disabled` | Non-interactive picker in disabled state | | `WithLabel` / `WithLabelAndError` | Picker with a field label and optional error message | | `CustomFormat` | Single picker using a custom `formatDate` callback | | `WithConstraints` | Single picker locked to the next 30 days via `fromDate`/`toDate` | | `InputStyle` | `DatePickerInput` — calendar-icon input field variant | | `InputWithTime` / `InputWithTimeEmpty` | `DatePickerInput` with 12-hour time selector | | `InputWithTime24Hour` | `DatePickerInput` with 24-hour time selector | | `AllVariants` | Side-by-side showcase of every picker variant | ## Usage Example ```typescript import { DatePicker, DatePickerInput, type DateRange } from "../components/ui/date-picker"; import { useState } from "react"; // Single date function SingleExample() { const [date, setDate] = useState(); return ( ); } // Date range with constraints function RangeExample() { const [range, setRange] = useState(); const today = new Date(); const maxDate = new Date(); maxDate.setDate(today.getDate() + 30); return ( ); } // Input style with time selector function InputWithTimeExample() { const [date, setDate] = useState(new Date()); return ( ); } ``` ## Source [`DatePicker.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/DatePicker.stories.tsx)