Color Picker

1/** @jsxImportSource hono/jsx */
2import { cn, type ClassValue } from "@/registry/lib/cn"
3 
4// Color Picker — shadcn-htmx, htmx v4 + Tailwind v4.
5//
6// Built on native <input type="color">. The browser owns the entire picker
7// UI (a platform color dialog or a validating text field) and guarantees the
8// value is a valid CSS color — we never reimplement any of that. shadcn/ui has
9// no color-picker; we mirror the Input anatomy
10// (repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/input.tsx) and lean on the
11// platform exactly like registry/ui/slider.tsx does for <input type=range>.
12//
13// What the platform gives us, per MDN:
14//   - the whole color-selection UI + value validation; an invalid value is
15//     coerced and :invalid is applied (we never parse colors ourselves)
16//   - `value` is a CSS <color>; default is #000000 when omitted/invalid
17//   - `alpha` (boolean) lets the user edit the alpha channel
18//   - `colorspace` ("limited-srgb" | "display-p3") hints the picker + gamut
19//   - `input` fires continuously as the color changes, `change` on dismiss
20//   - supported common attributes: autocomplete, list (a <datalist> of swatches)
21//   - it has NO implicit ARIA role, so a visible <label for> or ariaLabel is
22//     required for an accessible name
23//   See repos/mdn/files/en-us/web/html/reference/elements/input/color/index.md
24//       (Value:54, alpha/colorspace:63-69, events:96, common attrs:219,
25//        validation:121, Implicit ARIA Role: none:244)
26//
27// We hide the browser's default swatch chrome via Tailwind v4's pseudo-element
28// selectors ([&::-webkit-color-swatch] / [&::-moz-color-swatch]) so the control
29// reads as one rounded shadcn swatch — the same -webkit-/-moz- pairing the
30// Slider uses for its thumb. Both engines need separate rules.
31//
32// JS budget: none for the swatch itself (it is a real <input>). The optional
33// `showValue` hex readout is synced by a 6-line handler in public/site.js keyed
34// on data-slot="color-picker"; with showValue={false} it is zero-JS.
35 
36export type ColorSpace = "limited-srgb" | "display-p3"
37 
38const swatchBase =
39  // The native <input type=color> styled as a single rounded swatch button.
40  "size-9 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1 shadow-xs outline-none transition-[color,box-shadow] " +
41  "dark:bg-input/30 " +
42  "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " +
43// … truncated