Combobox

1/** @jsxImportSource hono/jsx */
2import { cn, type ClassValue } from "@/registry/lib/cn"
3 
4// Combobox — shadcn-htmx, htmx v4 + Tailwind v4.
5//
6// **Native-first.** This component is just `<input list>` + `<datalist>`.
7// The browser handles:
8//   - The dropdown UI
9//   - Filtering as the user types
10//   - Click + keyboard selection
11//   - Focus management
12//   - aria-controls / aria-expanded wiring (implicit)
13//
14// No custom JS event handlers, no MutationObserver, no race conditions.
15// If you need server-driven suggestions, point htmx at the <datalist> and
16// have the server return `<option>` tags — the browser uses them
17// transparently.
18//
19// Refs:
20//   repos/mdn/files/en-us/web/html/reference/elements/datalist/index.md
21//   repos/mdn/files/en-us/web/html/reference/elements/input/index.md#list
22//   repos/aria-practices/content/patterns/combobox/
23 
24// `disabled` marks an option non-checkable (browsers grey it out, it gets
25// no click/focus events).
26// repos/mdn/files/en-us/web/html/reference/elements/option/index.md:45
27export type ComboboxOption = { value: string; label?: string; disabled?: boolean }
28 
29type ComboboxProps = {
30  // The input's id. The <datalist> gets `${id}-list`; if you wire htmx
31  // to fetch options dynamically, target that id.
32  id: string
33  name?: string
34  // Initial options. Server-filtered comboboxes can pass [] and let
35  // htmx populate the datalist on input.
36  options?: ComboboxOption[]
37  // `list` is valid on these 13 input types, not just text — a url/email/
38  // search combobox, or a number/date/time/range/color picker with suggested
39  // values, are all native datalist use cases.
40  // repos/mdn/files/en-us/web/html/reference/elements/input/index.md:492
41  type?:
42    | "text"
43    | "search"
44    | "url"
45    | "tel"
46    | "email"
47    | "number"
48    | "date"
49    | "datetime-local"
50    | "month"
51    | "week"
52    | "time"
53    | "range"
54    | "color"
55  placeholder?: string
56  value?: string
57  required?: boolean
58  disabled?: boolean
59  // The user can type any value that passes validation, even one not in the
60  // suggestion list, so constrain the free-typed value with these.
61  // repos/mdn/files/en-us/web/html/reference/elements/input/index.md:505
62  maxlength?: number
63  minlength?: number
64  pattern?: string
65  // Explains the pattern to AT / on validation failure (spec accessibility note).
66  title?: string
67  // Focusable + copy-selectable but not editable. Not supported on range/color.
68// … truncated