Number Input

1/** @jsxImportSource hono/jsx */
2import { cn, type ClassValue } from "@/registry/lib/cn"
3 
4// Number Input — shadcn-htmx, htmx v4 + Tailwind v4.
5//
6// shadcn/ui has no dedicated "number input" — it composes one from <Input
7// type="number"> + Button (see repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/input.tsx
8// for the Input we mirror). We do the same, but lean entirely on the platform.
9//
10// The control IS a native <input type="number">. Per MDN that element ships:
11//   - implicit role="spinbutton"
12//   - aria-valuenow / aria-valuemin / aria-valuemax auto-managed from
13//     value / min / max — no manual ARIA
14//   - the full APG spinbutton keyboard contract built in: ArrowUp increases,
15//     ArrowDown decreases, plus standard single-line text editing
16//   - stepUp() / stepDown() DOM methods used by the optional +/- buttons
17//   See repos/mdn/files/en-us/web/html/reference/elements/input/number/index.md:298,468
18//   APG: repos/aria-practices/content/patterns/spinbutton/spinbutton-pattern.html
19//
20// Because the native input already satisfies the spinbutton pattern, the only
21// JS is a 3-line stepUp/stepDown handler for the optional buttons (public/site.js,
22// keyed on data-slot="number-input"). With `steppers={false}` it is zero-JS.
23//
24// We hide the browser's default up/down spinners (they are tiny and inconsistent
25// across engines) and supply our own larger, accessible buttons instead — the
26// APG quantity-spinbutton example takes the same approach
27// (repos/aria-practices/content/patterns/spinbutton/examples/quantity-spinbutton.html).
28 
29// Shared <Input> base — kept byte-for-byte in sync with registry/ui/input.tsx
30// so a number input looks identical to every other field. We add rules to hide
31// the native spinner buttons and reserve right padding when our own steppers
32// sit inside the field.
33const inputBase =
34  "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none " +
35  "selection:bg-primary selection:text-primary-foreground " +
36  "placeholder:text-muted-foreground " +
37  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " +
38  "md:text-sm dark:bg-input/30 " +
39  "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " +
40  "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " +
41  "[&.htmx-request]:opacity-70 " +
42// … truncated