A polymorphic date picker component supporting both single-date and date-range selection modes, built on `react-day-picker` and `@radix-ui/react-popover` with custom Figma-aligned styling. ## Key Components | Export | Type | Description | |---|---|---| | `DatePickerProps` | Type | Discriminated union of `SingleDatePickerProps` \| `RangeDatePickerProps` | | `DatePickerBaseProps` | Interface | Shared props: `placeholder`, `formatDate`, `disabled`, `fromDate`, `toDate`, `label`, `error`, `invalid`, `numberOfMonths` | | `SingleDatePickerProps` | Interface | `mode: "single"`, `value?: Date`, `onChange?: (date) => void` | | `RangeDatePickerProps` | Interface | `mode: "range"`, `value?: DateRange`, `onChange?: (range) => void` | | `DatePickerCalendar` | Component | Internal calendar renderer; supports `fluid` layout for filter menus | | `CalendarNavButton` | Component | Prev/next month navigation using `ChevronLeft`/`ChevronRight` icons | | `defaultFormatDate` | Function | Formats a `Date` as `MM/DD/YYYY` | | `formatDateRange` | Function | Formats a `DateRange` as `"from - to"` or just `"from"` if no end date | ## Key Behaviors - **Range hover preview**: Highlights dates between the first selected date and the hovered date before the range is completed. - **Fluid mode**: When `fluid={true}`, day cells flex to fill container width (used by `DateFilterMenu`). - **Responsive months**: On screens smaller than `md`, always shows 1 month regardless of `numberOfMonths`. - **External sync**: `useEffect` keeps internal `draftRange` in sync when `selected` changes externally (e.g., on reset). ## Usage Example ```typescript import { DatePicker } from "@openframe-oss-lib/ui"; import { useState } from "react"; import type { DateRange } from "react-day-picker"; // Single mode function SingleExample() { const [date, setDate] = useState(); return ( ); } // Range mode function RangeExample() { const [range, setRange] = useState(); return ( ); } ``` **Source:** [`date-picker.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/date-picker.tsx)