Form Field

1/** @jsxImportSource hono/jsx */
2import type { Child } from "hono/jsx"
3import { cloneElement, isValidElement } from "hono/jsx"
4import { cn, type ClassValue } from "@/registry/lib/cn"
5 
6// Form Field — shadcn-htmx, htmx v4 + Tailwind v4.
7//
8// A field-row wrapper that composes a <label>, a single control slot, an
9// optional description, and an optional error message — auto-wiring the
10// label's `for`, the control's `aria-describedby` (description + error ids),
11// and `aria-invalid`. The visual error state is driven by the native
12// `:user-invalid` pseudo-class so the field only "turns red" AFTER the user
13// has interacted and a submit was attempted — no JS, no premature errors.
14//
15// Source of truth (shadcn anatomy — FormField / FormItem / FormLabel /
16// FormControl / FormDescription / FormMessage):
17//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/form.tsx
18// Upstream couples those parts to react-hook-form via React context. We have
19// no client form runtime, so instead we lift the wiring to the server: one
20// component reads `id`/`invalid`/`description`/`error`, derives the ids, and
21// clones them onto the control child. Same semantic HTML, zero client state.
22//
23// Built on web platform primitives:
24//   - <fieldset>/<legend> for grouping multiple controls under one caption.
25//     repos/mdn/files/en-us/web/html/reference/elements/fieldset/index.md
26//     repos/mdn/files/en-us/web/html/reference/elements/legend/index.md
27//   - Constraint Validation + :user-invalid for "show error only after the
28//     user tried" styling. :invalid fires before interaction (confusing);
29//     :user-invalid fires only after a submit attempt + interaction.
30//     repos/mdn/files/en-us/web/css/reference/selectors/_colon_user-invalid/index.md
31//     repos/web.dev/src/site/content/en/learn/forms/validation/index.md (#javascript, :user-invalid aside)
32//   - aria-describedby to connect the control to its description + error.
33//     repos/mdn/files/en-us/web/accessibility/aria/reference/attributes/aria-describedby/index.md
34//     repos/web.dev/src/site/content/en/learn/forms/accessibility/index.md ("Help users find the error message")
35//
36// htmx: the field forwards hx-* untouched, so a server can swap the whole
37// field via hx-swap="outerHTML" and flip aria-invalid + inject the error in
38// one shot. See repos/htmx/www/reference.md.
39 
40// Root row. `grid gap-2` mirrors shadcn FormItem. The `[&:has(:user-invalid)]`
41// … truncated