Output

1/** @jsxImportSource hono/jsx */
2import type { Child } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Output — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// A live result region: the outcome of a calculation or a server action,
8// tied to the inputs that produced it via the `for` attribute.
9//
10// Source of truth — we render the real native <output> element:
11//   repos/mdn/files/en-us/web/html/reference/elements/output/index.md
12//     - `for`  — space-separated list of the ids of elements that
13//       contributed input values to the calculation (lines 16-17).
14//     - `form` — associate the output with a <form> elsewhere in the
15//       document by its id; overrides an ancestor <form> (lines 18-21).
16//     - `name` — the element's name in the form.elements API (lines 23-24).
17//     - "Implicit ARIA role: status" (lines 119-120). shadcn/ui ships no
18//       Output component — this is a native-platform addition.
19//
20// Why no JS: <output>'s implicit role="status" IS a live region with an
21// implicit aria-live="polite" and aria-atomic="true":
22//   repos/mdn/files/en-us/web/accessibility/aria/reference/roles/status_role/index.md:18
23//   repos/mdn/files/en-us/web/accessibility/aria/guides/live_regions/index.md:12
24//     "Including ... role='status' ... works as long as you add the
25//      attribute before the changes occur ... Start with an empty live
26//      region, then change the content inside the region."
27// So an htmx swap of the output's CONTENT (hx-swap="innerHTML", with the
28// <output> itself as the persistent target) is announced automatically —
29// no aria-live wiring, no site.js. Native semantics do the work.
30//
31// htmx note: target the <output> and swap innerHTML so the live region
32// element persists across requests (a fresh outerHTML swap would replace
33// the region each time and defeat the announcement contract above).
34//   repos/htmx/www/reference.md — hx-target, hx-swap (innerHTML).
35 
36export type OutputTone = "default" | "muted" | "primary" | "destructive"
37 
38const base =
39  "inline-flex min-h-9 w-fit items-center gap-2 rounded-md border px-3 py-1.5 text-sm font-medium tabular-nums transition-colors " +
40  // htmx v4 adds .htmx-request to the swap target while a request that
41  // targets it is in flight — dim the stale value so the update reads as
42  // a refresh. See repos/htmx/www/reference.md (htmx-request class).
43  "[&.htmx-request]:opacity-60"
44 
45const tones: Record<OutputTone, string> = {
46// … truncated