Date Time Picker

1/** @jsxImportSource hono/jsx */
2import { cn, type ClassValue } from "@/registry/lib/cn"
3 
4// Date Time Picker — shadcn-htmx, htmx v4 + Tailwind v4.
5//
6// A family of native temporal fields. The control IS a real
7// <input type="date|time|datetime-local|month|week"> — there is no JS calendar
8// library and no userland popup. The browser ships the picker UI, the keyboard
9// editing of each segment, locale-aware display, and constraint validation; we
10// only restyle to match the rest of the form controls.
11//
12// Per MDN every variant normalises its submitted value to a fixed,
13// machine-readable, locale-independent format regardless of how it is shown:
14//   - date            → "yyyy-mm-dd"            step is days  (default 1)
15//   - time            → "HH:mm" / "HH:mm:ss"    step is seconds (default 60);
16//                        min/max have a *periodic domain* (may cross midnight)
17//   - datetime-local  → "yyyy-mm-ddTHH:mm"      (a local date + time, no zone)
18//   - month           → "YYYY-MM"
19//   - week            → "yyyy-Www"              (ISO 8601 week number)
20//
21// Sources read for this component:
22//   repos/mdn/files/en-us/web/html/reference/elements/input/date/index.md
23//   repos/mdn/files/en-us/web/html/reference/elements/input/time/index.md
24//   repos/mdn/files/en-us/web/html/reference/elements/input/datetime-local/index.md
25//   repos/mdn/files/en-us/web/html/reference/elements/input/month/index.md
26//   repos/mdn/files/en-us/web/html/reference/elements/input/week/index.md
27//   htmx attrs verified against repos/htmx/www/reference.md
28// Style analogue: registry/ui/input.tsx (same base + tokens, kept in sync).
29 
30export type DateTimeType = "date" | "time" | "datetime-local" | "month" | "week"
31 
32// Shared <Input> base — kept byte-for-byte in sync with registry/ui/input.tsx
33// so a temporal field looks identical to every other control. We append rules
34// to tame the engine-specific picker affordances:
35//   - the calendar/clock indicator inherits the foreground colour and shows a
36//     pointer cursor (it is the only chrome the browser exposes to CSS);
37//   - the inner spin/edit fields drop their padding so the value sits flush.
38const base =
39  "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none " +
40  "selection:bg-primary selection:text-primary-foreground " +
41  "placeholder:text-muted-foreground " +
42// … truncated