Meter

1/** @jsxImportSource hono/jsx */
2import type { Child } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Meter — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// Source of truth:
8//   shadcn/ui ships no Meter component. This is a native-platform addition
9//   distinct from Progress: a gauge of a value within a known range
10//   (battery, disk usage, score) — NOT task completion.
11//
12// We render the real native <meter> element (implicit role="meter"), so the
13// browser supplies the role + value semantics and AT announces the gauge.
14//   repos/mdn/files/en-us/web/html/reference/elements/meter/index.md
15//     - value/min/max/low/high/optimum attributes (lines 33-48)
16//     - "Implicit ARIA role: meter" and "Permitted ARIA roles: No role
17//       permitted" (lines 123-134) — so we DO NOT set role/aria-value*; the
18//       element maps value/min/max onto aria-valuenow/min/max itself.
19//
20// APG: WAI-ARIA Meter pattern
21//   repos/aria-practices/content/patterns/meter/meter-pattern.html
22//     - Keyboard Interaction: "Not applicable" (line 46) — a meter is not
23//       interactive; no JS keyboard contract.
24//     - Accessible name via aria-labelledby (visible label) or aria-label
25//       (lines 61-64). We pair with a native <label for> in the docs.
26//     - aria-valuetext for human-readable values, e.g. "50% (6 hours)
27//       remaining" (lines 56-59) — surfaced via the `valuetext` prop.
28//
29// Cross-browser styling note: WebKit/Blink expose ::-webkit-meter-* and
30// Gecko exposes ::-moz-meter-bar. Both need `appearance: none` to accept
31// custom styles. Those pseudo-elements can't take Tailwind classes, so the
32// fill/track theming lives in app/styles/input.css scoped to
33// [data-slot="meter"]. Tailwind utilities here only size the box.
34 
35const meterBase =
36  "block h-2 w-full overflow-hidden rounded-full bg-primary/20 align-middle"
37 
38export function meterClasses(opts?: { class?: ClassValue }): string {
39  return cn(meterBase, opts?.class)
40}
41 
42type MeterProps = {
43  // Current value. Clamped by the browser to [min, max].
44  value: number
45  min?: number
46  max?: number
47  // Lower/upper bounds of the "low" and "high" zones. Combined with optimum
48  // they drive the optimum / suboptimum / even-less-good fill color.
49  low?: number
50  high?: number
51  optimum?: number
52  id?: string
53  // Free-form units hint. The WHATWG HTML spec notes <meter> has no units
54  // attribute and that title is the only standard way to convey units
55// … truncated