Active Search

1/** @jsxImportSource hono/jsx */
2import type { Child } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Active Search — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// A debounced live-search box that filters an external results list/table as
8// the user types, with an inline loading indicator and stale-request
9// cancellation. It degrades to a normal GET search on Enter when JS is off.
10//
11// **Native-first.** The control is a real <form> wrapping <input type="search">.
12//   - The <form action> means Enter submits a normal navigation search with
13//     zero JS — progressive enhancement, not emulation.
14//   - <input type="search"> gives the platform clear-field affordance + a
15//     `search` event that fires on Enter and when the field is cleared.
16//     We add `search` to hx-trigger so clearing re-runs the filter.
17//     See repos/mdn/files/en-us/web/html/reference/elements/input/search/index.md
18//        repos/mdn/files/en-us/web/api/htmlinputelement/search_event/index.md
19//
20// htmx wiring (verified against the vendored v4 source):
21//   - hx-trigger="input changed delay:Nms, search" — `input changed delay`
22//     debounces keystrokes and ignores no-op keys (arrows); the `search`
23//     event covers Enter + the native clear button.
24//     See repos/htmx/www/src/content/reference/01-attributes/06-hx-trigger.md
25//        repos/htmx/www/src/content/patterns/02-forms/01-active-search.md
26//   - hx-sync="this:replace" — aborts the in-flight request and replaces it
27//     with the latest one, so stale responses never clobber fresh input.
28//     See repos/htmx/www/src/content/reference/01-attributes/21-hx-sync.md
29//   - hx-indicator — htmx toggles the `.htmx-request` class on the indicator
30//     while a request is in flight; we drive an opacity transition off it.
31//     See repos/htmx/www/src/content/reference/01-attributes/19-hx-indicator.md
32//
33// No custom JS: the debounce, cancellation, and indicator are all htmx; the
34// no-JS fallback is the native <form>. data-slot is for styling/testing hooks.
35 
36const formBase = "relative w-full"
37 
38const inputBase =
39  "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent py-1 pr-9 pl-9 text-base shadow-xs transition-[color,box-shadow] outline-none " +
40  "selection:bg-primary selection:text-primary-foreground " +
41  "placeholder:text-muted-foreground " +
42  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " +
43  "md:text-sm dark:bg-input/30 " +
44// … truncated