A client-side React date and time picker component that wraps `react-datepicker` with OpenFrame's ODS (OpenFrame Design System) dark theme styling and consistent input patterns. ## Key Components ### `DateTimePicker` The primary exported component. Renders a labeled date/time input with a fully styled dark-theme calendar popup matching the admin UI theme tokens (`ods-card`, `ods-border`, `ods-accent`, etc.). ### `DateTimePickerProps` | Prop | Type | Default | Description | |---|---|---|---| | `value` | `Date` | — | Controlled selected date | | `onChange` | `(date: Date \| null) => void` | — | Change handler | | `disabled` | `boolean` | `false` | Disables the input | | `label` | `string` | — | Optional field label | | `placeholder` | `string` | `"Select date and time"` | Input placeholder | | `className` | `string` | — | Additional wrapper classes | | `showTimeSelect` | `boolean` | `true` | Enables time selection panel | | `timeFormat` | `string` | `"HH:mm"` | Time display format | | `timeIntervals` | `number` | `15` | Minutes between time options | | `dateFormat` | `string` | `"MMMM d, yyyy h:mm aa"` | Full date/time display format | ### `inputClassName` A shared `cn()`-composed class string that mirrors the `Input` component's styling, including mobile zoom prevention (`text-base` on small screens). ## Usage Example ```typescript import { DateTimePicker } from "@/components/date-time-picker"; import { useState } from "react"; export function ScheduleForm() { const [scheduledAt, setScheduledAt] = useState(null); return ( setScheduledAt(date)} timeIntervals={30} dateFormat="MM/dd/yyyy HH:mm" /> ); } ``` > **Note:** Inline `