@misoto22/folio 0.0.0 → 0.16.0

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,334 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import {
+  clamp,
+  colorFormat,
+  colorToRgb,
+  fitGamut,
+  formatColor,
+  maxChroma,
+  parseColor
+} from "../../lib/color.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+import { warnBlankName } from "../../lib/warn.js";
+import { useFieldControl } from "../Field/field-control.js";
+import { Input } from "../Input/Input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
+import { ToggleGroup, ToggleGroupItem } from "../ToggleGroup/ToggleGroup.js";
+const PLANE_W = 256;
+const PLANE_H = 160;
+const HUE_STOPS = 73;
+const BLACK = { l: 0, c: 0, h: 0, a: 1 };
+const FORMAT_LABELS = {
+  hex: "Hex",
+  oklch: "OKLCH",
+  // Not "Display P3": the three segments share the strip evenly, and the long
+  // name wraps to two lines inside its third and makes the whole row twice as
+  // tall as the two beside it.
+  p3: "P3"
+};
+const checkerboard = (square) => `repeating-conic-gradient(var(--stone) 0% 25%, var(--paper) 0% 50%) 0 0 / ${square} ${square}`;
+function ColorPicker({
+  label,
+  value: controlled,
+  defaultValue = "#000000",
+  onValueChange,
+  disabled,
+  invalid,
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
+}) {
+  warnBlankName("ColorPicker", "label", label, "the trigger is announced with no name");
+  const bad = isInvalid(invalid, ariaInvalid);
+  const field = useFieldControl();
+  const generated = useId();
+  const triggerId = id ?? generated;
+  const valueId = `${triggerId}-value`;
+  const nameId = field?.labelId ?? `${triggerId}-name`;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const value = controlled ?? uncontrolled;
+  const [color, setColor] = useState(() => parseColor(defaultValue) ?? BLACK);
+  const [format, setFormat] = useState(() => colorFormat(defaultValue));
+  const emitted = useRef(null);
+  const saturationRef = useRef(0);
+  useEffect(() => {
+    if (value === emitted.current) return;
+    const parsed = parseColor(value);
+    if (!parsed) return;
+    setColor((prev) => ({ ...parsed, h: parsed.c < 1e-7 ? prev.h : parsed.h }));
+    setFormat(colorFormat(value));
+  }, [value]);
+  const space = format === "hex" ? "srgb" : "p3";
+  const ceiling = maxChroma(color.l, color.h, space);
+  const saturation = ceiling > 0 ? clamp(color.c / ceiling) : saturationRef.current;
+  useEffect(() => {
+    if (ceiling > 0) saturationRef.current = saturation;
+  }, [ceiling, saturation]);
+  const commit = (next, nextFormat = format) => {
+    const fitted = nextFormat === "oklch" ? next : fitGamut(next, nextFormat === "p3" ? "p3" : "srgb");
+    setColor(fitted);
+    setFormat(nextFormat);
+    const text = formatColor(fitted, nextFormat);
+    emitted.current = text;
+    if (controlled === void 0) setUncontrolled(text);
+    onValueChange?.(text);
+  };
+  const setPlane = (nextSaturation, lightness) => {
+    saturationRef.current = nextSaturation;
+    commit({ ...color, l: lightness, c: nextSaturation * maxChroma(lightness, color.h, space) });
+  };
+  const planeRef = useRef(null);
+  const canvasRef = useRef(null);
+  const painted = useRef("");
+  const trackPointer = (event) => {
+    const rect = planeRef.current?.getBoundingClientRect();
+    if (!rect || rect.width === 0 || rect.height === 0) return;
+    setPlane(
+      clamp((event.clientX - rect.left) / rect.width),
+      clamp(1 - (event.clientY - rect.top) / rect.height)
+    );
+  };
+  const paint = (canvas) => {
+    if (!canvas) return;
+    const key = `${color.h.toFixed(3)}:${space}`;
+    if (painted.current === key) return;
+    const context = canvas.getContext("2d");
+    if (!context || typeof context.createImageData !== "function") return;
+    painted.current = key;
+    const pixels = context.createImageData(PLANE_W, PLANE_H);
+    for (let y = 0; y < PLANE_H; y++) {
+      const l = 1 - y / (PLANE_H - 1);
+      const rowMax = maxChroma(l, color.h, space);
+      for (let x = 0; x < PLANE_W; x++) {
+        const rgb = colorToRgb({ l, c: x / (PLANE_W - 1) * rowMax, h: color.h, a: 1 }, "srgb");
+        const at = (y * PLANE_W + x) * 4;
+        for (let channel = 0; channel < 3; channel++) {
+          pixels.data[at + channel] = Math.round(clamp(rgb[channel] ?? 0) * 255);
+        }
+        pixels.data[at + 3] = 255;
+      }
+    }
+    context.putImageData(pixels, 0, 0);
+  };
+  useEffect(() => {
+    paint(canvasRef.current);
+  });
+  const opaque = formatColor({ ...color, a: 1 }, "oklch");
+  const hueTrack = Array.from({ length: HUE_STOPS }, (_, i) => {
+    const h = i * (360 / (HUE_STOPS - 1));
+    return formatColor({ l: color.l, c: saturation * maxChroma(color.l, h, space), h, a: 1 }, "oklch");
+  }).join(", ");
+  const typed = parseColor(value);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id: triggerId,
+        disabled,
+        "aria-labelledby": `${nameId} ${valueId}`,
+        "aria-describedby": describedBy,
+        "aria-required": ariaRequired,
+        "aria-invalid": bad || void 0,
+        className: cn(
+          CONTROL_BASE,
+          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
+          "flex cursor-pointer items-center gap-2.5 text-start",
+          className
+        ),
+        children: [
+          field?.labelId == null && /* @__PURE__ */ jsx("span", { id: nameId, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "size-4 shrink-0 rounded-(--radius-xs) border border-(--rule-2)",
+              style: { background: `linear-gradient(${value}, ${value}), ${checkerboard("4px")}` }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { id: valueId, className: "mono-meta truncate", children: value })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { label: `${label} picker`, className: "flex w-72 flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          type: "single",
+          value: format,
+          onValueChange: (next) => next && commit(color, next),
+          "aria-label": "Colour notation",
+          className: "w-full",
+          children: Object.keys(FORMAT_LABELS).map((option) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: option, className: "flex-1", children: FORMAT_LABELS[option] }, option))
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: planeRef,
+          role: "group",
+          "aria-label": `${label} field`,
+          onPointerDown: (event) => {
+            if (event.button !== 0) return;
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            trackPointer(event);
+          },
+          onPointerMove: (event) => {
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) trackPointer(event);
+          },
+          onPointerUp: (event) => {
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+              event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+          },
+          className: "relative h-40 w-full cursor-crosshair touch-none select-none rounded-(--radius) focus-within:[outline:var(--focus-w)_solid_var(--focus)] focus-within:[outline-offset:var(--focus-off)]",
+          children: [
+            /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: (node) => {
+                  canvasRef.current = node;
+                  if (!node) painted.current = "";
+                  paint(node);
+                },
+                width: PLANE_W,
+                height: PLANE_H,
+                "aria-hidden": "true",
+                className: "block size-full rounded-(--radius)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute inset-0 rounded-(--radius) shadow-[inset_0_0_0_1px_var(--rule)]"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute -m-1.5 size-3 rounded-(--radius-pill) border-2 border-(--paper) shadow-[0_0_0_1px_var(--rule-hard)]",
+                style: { left: `${saturation * 100}%`, top: `${(1 - color.l) * 100}%`, background: opaque }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 100,
+                step: 1,
+                value: Math.round(saturation * 100),
+                "aria-label": "Chroma",
+                "aria-valuetext": `${Math.round(saturation * 100)} percent chroma`,
+                onChange: (event) => setPlane(Number(event.target.value) / 100, color.l),
+                className: "sr-only"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 100,
+                step: 1,
+                value: Math.round(color.l * 100),
+                "aria-label": "Lightness",
+                "aria-valuetext": `${Math.round(color.l * 100)} percent lightness`,
+                onChange: (event) => setPlane(saturation, Number(event.target.value) / 100),
+                className: "sr-only"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorTrack,
+        {
+          name: "Hue",
+          max: 360,
+          step: 1,
+          value: color.h,
+          announce: `${Math.round(color.h)} degrees`,
+          thumb: opaque,
+          track: `linear-gradient(to right in oklab, ${hueTrack})`,
+          onChange: (h) => commit({ ...color, h, c: saturation * maxChroma(color.l, h, space) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorTrack,
+        {
+          name: "Opacity",
+          max: 100,
+          step: 1,
+          value: color.a * 100,
+          announce: `${Math.round(color.a * 100)} percent`,
+          thumb: formatColor(color, "oklch"),
+          track: `linear-gradient(to right, transparent, ${opaque}), ${checkerboard("8px")}`,
+          onChange: (percent) => commit({ ...color, a: percent / 100 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value,
+          spellCheck: false,
+          autoComplete: "off",
+          "aria-label": `${label} as CSS`,
+          invalid: typed === null,
+          onChange: (event) => {
+            const next = event.target.value;
+            emitted.current = next;
+            if (controlled === void 0) setUncontrolled(next);
+            const parsed = parseColor(next);
+            if (parsed) {
+              setColor(parsed);
+              setFormat(colorFormat(next));
+            }
+            onValueChange?.(next);
+          },
+          className: "mono-meta"
+        }
+      )
+    ] })
+  ] });
+}
+function ColorTrack({ name, max, step, value, announce, track, thumb, onChange }) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-(--ink-2)", children: [
+    /* @__PURE__ */ jsx("span", { className: "w-14 shrink-0", children: name }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max,
+        step,
+        value,
+        "aria-valuetext": announce,
+        onChange: (event) => onChange(Number(event.target.value)),
+        style: { background: track },
+        className: cn(
+          "h-4 w-full cursor-pointer appearance-none rounded-(--radius-xs) shadow-[inset_0_0_0_1px_var(--rule)]",
+          "[&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-(--radius-xs) [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-(--paper) [&::-webkit-slider-thumb]:bg-(--thumb) [&::-webkit-slider-thumb]:bg-clip-padding [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]",
+          "[&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-(--radius-xs) [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-(--paper) [&::-moz-range-thumb]:bg-(--thumb) [&::-moz-range-thumb]:bg-clip-padding [&::-moz-range-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]"
+        ),
+        ref: (node) => {
+          node?.style.setProperty("--thumb", thumb);
+        }
+      }
+    )
+  ] });
+}
+var ColorPicker_default = ColorPicker;
+export {
+  ColorPicker,
+  ColorPicker_default as default
+};
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/ColorPicker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useId, useRef, useState, type PointerEvent } from 'react'\nimport { cn } from '../../lib/cn'\nimport {\n  clamp,\n  colorFormat,\n  colorToRgb,\n  fitGamut,\n  formatColor,\n  maxChroma,\n  parseColor,\n  type Color,\n  type ColorFormat,\n  type ColorSpace,\n} from '../../lib/color'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\nimport { warnBlankName } from '../../lib/warn'\nimport { useFieldControl } from '../Field/field-control'\nimport { Input } from '../Input/Input'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\nimport { ToggleGroup, ToggleGroupItem } from '../ToggleGroup/ToggleGroup'\n\n/** The plane's pixel grid. Wider than it is tall, like the panel holding it. */\nconst PLANE_W = 256\nconst PLANE_H = 160\n\n/** Hue stops in the strip behind the hue slider. Every 5°, plus the wrap. */\nconst HUE_STOPS = 73\n\nconst BLACK: Color = { l: 0, c: 0, h: 0, a: 1 }\n\nconst FORMAT_LABELS: Record<ColorFormat, string> = {\n  hex: 'Hex',\n  oklch: 'OKLCH',\n  // Not \"Display P3\": the three segments share the strip evenly, and the long\n  // name wraps to two lines inside its third and makes the whole row twice as\n  // tall as the two beside it.\n  p3: 'P3',\n}\n\n/**\n * A checkerboard, so alpha reads as alpha rather than as a lighter colour.\n *\n * Sized per surface: 8px checks read as a texture behind a full-width track and\n * as two grey squares inside a 16px swatch.\n */\nconst checkerboard = (square: string) =>\n  `repeating-conic-gradient(var(--stone) 0% 25%, var(--paper) 0% 50%) 0 0 / ${square} ${square}`\n\nexport interface ColorPickerProps {\n  /**\n   * Names the control. Required — the trigger shows a colour, and a colour is\n   * not a name.\n   *\n   * Announced together with the value, the way `Select`'s is: a reader hears\n   * \"Brand colour, #a78bfa\". Inside a `Field` with a label, that label is used\n   * and this one is not repeated.\n   */\n  label: string\n  /** The colour, as any absolute CSS colour string. */\n  value?: string\n  defaultValue?: string\n  /**\n   * Fires with a CSS colour string in whichever notation the panel is set to —\n   * so the notation a caller passes in is the notation they get back until\n   * somebody changes it in the panel.\n   */\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  className?: string\n  /** The TRIGGER's id — the element a label points at. A `Field` sets it. */\n  id?: string\n  /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */\n  'aria-describedby'?: string\n  /** The spelling a form library sets; read together with `invalid`. */\n  'aria-invalid'?: boolean | 'true' | 'false'\n  /** Announced on the trigger. A `Field` sets it from `required`. */\n  'aria-required'?: boolean\n}\n\n/**\n * A colour, chosen or typed.\n *\n * The panel works in OKLCH, and that is the reason to reach for this rather\n * than `<input type=\"color\">`. In HSV — which is what the native picker and\n * most libraries use — dragging along a row of constant \"lightness\" walks\n * through colours the eye reads as getting darker, so a reader tuning a palette\n * is fighting the instrument. OKLCH's lightness is the one a person sees, so\n * two colours at the same height on the plane genuinely match, and the hue\n * strip stays at the lightness already chosen instead of showing a rainbow that\n * belongs to some other colour.\n *\n * The plane is normalised to the gamut ROW BY ROW: its right edge is the most\n * chroma that exists at that lightness and hue, so the whole surface is\n * reachable rather than a lens of colour inside a field of clipped duplicates.\n *\n * **What it accepts.** Hex, `rgb()`, `hsl()`, `oklch()` and\n * `color(display-p3 …)`, in both syntaxes. Named colours are not accepted:\n * resolving them needs a table of every CSS name or a live DOM, and a box that\n * takes \"rebeccapurple\" but not \"papayawhip\" is worse than one that takes\n * neither.\n *\n * **Keyboard.** The plane is a group of two real sliders — chroma across,\n * lightness up — so the arrows move it and a screen reader announces where it\n * is. That is the part a 2D canvas usually leaves out, and leaving it out makes\n * the control unusable rather than merely awkward.\n *\n * @example\n * <Field label=\"Brand colour\"><ColorPicker label=\"Brand colour\" defaultValue=\"#a78bfa\" /></Field>\n */\nexport function ColorPicker({\n  label,\n  value: controlled,\n  defaultValue = '#000000',\n  onValueChange,\n  disabled,\n  invalid,\n  className,\n  id,\n  'aria-describedby': describedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n}: ColorPickerProps) {\n  warnBlankName('ColorPicker', 'label', label, 'the trigger is announced with no name')\n  const bad = isInvalid(invalid, ariaInvalid)\n\n  const field = useFieldControl()\n  const generated = useId()\n  const triggerId = id ?? generated\n  const valueId = `${triggerId}-value`\n  const nameId = field?.labelId ?? `${triggerId}-name`\n\n  const [uncontrolled, setUncontrolled] = useState(defaultValue)\n  const value = controlled ?? uncontrolled\n\n  const [color, setColor] = useState<Color>(() => parseColor(defaultValue) ?? BLACK)\n  const [format, setFormat] = useState<ColorFormat>(() => colorFormat(defaultValue))\n  // What this component last wrote out, so its own emission does not read back\n  // as an outside change and re-derive the hue it just preserved.\n  const emitted = useRef<string | null>(null)\n\n  // The plane's horizontal position, kept across the two rows where it cannot\n  // be derived: at pure black and pure white every chroma is zero, so `c / max`\n  // is 0/0 and the handle would jump to the left edge on the way past.\n  const saturationRef = useRef(0)\n\n  useEffect(() => {\n    if (value === emitted.current) return\n    const parsed = parseColor(value)\n    if (!parsed) return\n    // A grey has no hue — only the angle of its rounding error. Keeping the\n    // last real one is what stops the strip spinning when a reader drags the\n    // handle through the neutral column.\n    setColor((prev) => ({ ...parsed, h: parsed.c < 1e-7 ? prev.h : parsed.h }))\n    setFormat(colorFormat(value))\n  }, [value])\n\n  // Hex is bounded to sRGB; both of the others can address the wider gamut, so\n  // the plane shows what the notation can actually hold.\n  const space: ColorSpace = format === 'hex' ? 'srgb' : 'p3'\n  const ceiling = maxChroma(color.l, color.h, space)\n  const saturation = ceiling > 0 ? clamp(color.c / ceiling) : saturationRef.current\n\n  useEffect(() => {\n    if (ceiling > 0) saturationRef.current = saturation\n  }, [ceiling, saturation])\n\n  const commit = (next: Color, nextFormat: ColorFormat = format) => {\n    const fitted = nextFormat === 'oklch' ? next : fitGamut(next, nextFormat === 'p3' ? 'p3' : 'srgb')\n    setColor(fitted)\n    setFormat(nextFormat)\n    const text = formatColor(fitted, nextFormat)\n    emitted.current = text\n    if (controlled === undefined) setUncontrolled(text)\n    onValueChange?.(text)\n  }\n\n  /** Moves the plane handle, in the 0–1 coordinates the plane is drawn in. */\n  const setPlane = (nextSaturation: number, lightness: number) => {\n    saturationRef.current = nextSaturation\n    commit({ ...color, l: lightness, c: nextSaturation * maxChroma(lightness, color.h, space) })\n  }\n\n  const planeRef = useRef<HTMLDivElement>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const painted = useRef<string>('')\n\n  const trackPointer = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = planeRef.current?.getBoundingClientRect()\n    if (!rect || rect.width === 0 || rect.height === 0) return\n    setPlane(\n      clamp((event.clientX - rect.left) / rect.width),\n      clamp(1 - (event.clientY - rect.top) / rect.height),\n    )\n  }\n\n  /**\n   * Fills the plane, at most once per hue.\n   *\n   * Called from the canvas's own ref callback rather than only from an effect,\n   * because the canvas does not exist until the panel is open AND Radix's\n   * popper has measured it — which is a commit later than the one that opened\n   * it. An effect keyed to the open state runs on the commit BEFORE the node\n   * arrives, finds a ref holding null, and never runs again: a plane that\n   * stayed blank until the reader happened to move the hue.\n   */\n  const paint = (canvas: HTMLCanvasElement | null) => {\n    if (!canvas) return\n    const key = `${color.h.toFixed(3)}:${space}`\n    if (painted.current === key) return\n    const context = canvas.getContext('2d')\n    // A headless environment can hand back a 2D context with most of the\n    // drawing surface missing. Nothing here is load-bearing — the plane is the\n    // pointer's aim, and the two sliders under it work either way — so a\n    // partial context means no plane rather than a thrown render.\n    if (!context || typeof context.createImageData !== 'function') return\n    painted.current = key\n\n    const pixels = context.createImageData(PLANE_W, PLANE_H)\n    for (let y = 0; y < PLANE_H; y++) {\n      const l = 1 - y / (PLANE_H - 1)\n      // Each row is normalised to its OWN reachable chroma. Painted against one\n      // global maximum instead, the top and bottom thirds of the plane are\n      // bands of clipped duplicates a reader can never pick apart.\n      const rowMax = maxChroma(l, color.h, space)\n      for (let x = 0; x < PLANE_W; x++) {\n        const rgb = colorToRgb({ l, c: (x / (PLANE_W - 1)) * rowMax, h: color.h, a: 1 }, 'srgb')\n        const at = (y * PLANE_W + x) * 4\n        for (let channel = 0; channel < 3; channel++) {\n          pixels.data[at + channel] = Math.round(clamp(rgb[channel] ?? 0) * 255)\n        }\n        pixels.data[at + 3] = 255\n      }\n    }\n    context.putImageData(pixels, 0, 0)\n  }\n\n  /** Repaints a canvas that is already on screen when the hue moves under it. */\n  useEffect(() => {\n    paint(canvasRef.current)\n  })\n\n  const opaque = formatColor({ ...color, a: 1 }, 'oklch')\n  const hueTrack = Array.from({ length: HUE_STOPS }, (_, i) => {\n    const h = i * (360 / (HUE_STOPS - 1))\n    return formatColor({ l: color.l, c: saturation * maxChroma(color.l, h, space), h, a: 1 }, 'oklch')\n  }).join(', ')\n\n  const typed = parseColor(value)\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          id={triggerId}\n          disabled={disabled}\n          // Named by the label AND by its own value, in that order — the same\n          // arrangement Select uses, and for the same reason: `aria-label`\n          // outranks the content, so naming it \"Brand colour\" would tell a\n          // reader the noun and never the answer.\n          aria-labelledby={`${nameId} ${valueId}`}\n          aria-describedby={describedBy}\n          aria-required={ariaRequired}\n          aria-invalid={bad || undefined}\n          className={cn(\n            CONTROL_BASE,\n            bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n            'flex cursor-pointer items-center gap-2.5 text-start',\n            className,\n          )}\n        >\n          {/* Standing outside a Field there is no label to point at, so the\n              trigger carries its own — the name half of the two the\n              `aria-labelledby` above names, with the value as the other. */}\n          {field?.labelId == null && (\n            <span id={nameId} className=\"sr-only\">\n              {label}\n            </span>\n          )}\n          <span\n            aria-hidden=\"true\"\n            className=\"size-4 shrink-0 rounded-(--radius-xs) border border-(--rule-2)\"\n            // The colour as a flat GRADIENT, not as a colour. In the\n            // `background` shorthand a plain colour is only legal in the last\n            // layer, so `background: #a78bfa, <checks>` is invalid and the\n            // whole declaration is dropped — which drew an empty swatch.\n            style={{ background: `linear-gradient(${value}, ${value}), ${checkerboard('4px')}` }}\n          />\n          <span id={valueId} className=\"mono-meta truncate\">\n            {value}\n          </span>\n        </button>\n      </PopoverTrigger>\n\n      <PopoverContent label={`${label} picker`} className=\"flex w-72 flex-col gap-3\">\n        <ToggleGroup\n          type=\"single\"\n          value={format}\n          // `type=\"single\"` commits an empty string when the pressed segment is\n          // the selected one, which here would leave the panel with no notation\n          // to write in at all.\n          onValueChange={(next) => next && commit(color, next as ColorFormat)}\n          aria-label=\"Colour notation\"\n          className=\"w-full\"\n        >\n          {(Object.keys(FORMAT_LABELS) as ColorFormat[]).map((option) => (\n            <ToggleGroupItem key={option} value={option} className=\"flex-1\">\n              {FORMAT_LABELS[option]}\n            </ToggleGroupItem>\n          ))}\n        </ToggleGroup>\n\n        {/* A group of two real sliders rather than a canvas with key handlers:\n            the arrows, Home and End are then the platform's, and a reader is\n            told which axis they are on and where they are along it. The canvas\n            underneath is what a pointer aims at. */}\n        <div\n          ref={planeRef}\n          role=\"group\"\n          aria-label={`${label} field`}\n          onPointerDown={(event) => {\n            if (event.button !== 0) return\n            event.preventDefault()\n            event.currentTarget.setPointerCapture(event.pointerId)\n            trackPointer(event)\n          }}\n          onPointerMove={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) trackPointer(event)\n          }}\n          onPointerUp={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n              event.currentTarget.releasePointerCapture(event.pointerId)\n            }\n          }}\n          // The focus ring has to be drawn HERE: the two sliders that take the\n          // focus are `sr-only`, so the one the browser draws on them is\n          // clipped away with the rest of the box.\n          className=\"relative h-40 w-full cursor-crosshair touch-none select-none rounded-(--radius) focus-within:[outline:var(--focus-w)_solid_var(--focus)] focus-within:[outline-offset:var(--focus-off)]\"\n        >\n          <canvas\n            ref={(node) => {\n              canvasRef.current = node\n              // Closing destroys the canvas and its bitmap with it, so the next\n              // open has to repaint even at the same hue.\n              if (!node) painted.current = ''\n              paint(node)\n            }}\n            width={PLANE_W}\n            height={PLANE_H}\n            aria-hidden=\"true\"\n            className=\"block size-full rounded-(--radius)\"\n          />\n          {/* A hairline over the plane, so the light corner still has an edge. */}\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 rounded-(--radius) shadow-[inset_0_0_0_1px_var(--rule)]\"\n          />\n          <span\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute -m-1.5 size-3 rounded-(--radius-pill) border-2 border-(--paper) shadow-[0_0_0_1px_var(--rule-hard)]\"\n            style={{ left: `${saturation * 100}%`, top: `${(1 - color.l) * 100}%`, background: opaque }}\n          />\n          <input\n            type=\"range\"\n            min={0}\n            max={100}\n            step={1}\n            value={Math.round(saturation * 100)}\n            aria-label=\"Chroma\"\n            aria-valuetext={`${Math.round(saturation * 100)} percent chroma`}\n            onChange={(event) => setPlane(Number(event.target.value) / 100, color.l)}\n            className=\"sr-only\"\n          />\n          <input\n            type=\"range\"\n            min={0}\n            max={100}\n            step={1}\n            value={Math.round(color.l * 100)}\n            aria-label=\"Lightness\"\n            aria-valuetext={`${Math.round(color.l * 100)} percent lightness`}\n            onChange={(event) => setPlane(saturation, Number(event.target.value) / 100)}\n            className=\"sr-only\"\n          />\n        </div>\n\n        <ColorTrack\n          name=\"Hue\"\n          max={360}\n          step={1}\n          value={color.h}\n          announce={`${Math.round(color.h)} degrees`}\n          thumb={opaque}\n          track={`linear-gradient(to right in oklab, ${hueTrack})`}\n          onChange={(h) => commit({ ...color, h, c: saturation * maxChroma(color.l, h, space) })}\n        />\n        <ColorTrack\n          name=\"Opacity\"\n          max={100}\n          step={1}\n          value={color.a * 100}\n          announce={`${Math.round(color.a * 100)} percent`}\n          thumb={formatColor(color, 'oklch')}\n          track={`linear-gradient(to right, transparent, ${opaque}), ${checkerboard('8px')}`}\n          onChange={(percent) => commit({ ...color, a: percent / 100 })}\n        />\n\n        <Input\n          value={value}\n          spellCheck={false}\n          autoComplete=\"off\"\n          aria-label={`${label} as CSS`}\n          invalid={typed === null}\n          onChange={(event) => {\n            const next = event.target.value\n            emitted.current = next\n            if (controlled === undefined) setUncontrolled(next)\n            const parsed = parseColor(next)\n            if (parsed) {\n              setColor(parsed)\n              setFormat(colorFormat(next))\n            }\n            onValueChange?.(next)\n          }}\n          className=\"mono-meta\"\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\ninterface ColorTrackProps {\n  name: string\n  max: number\n  step: number\n  value: number\n  /** What the number MEANS, since a bare \"212\" on a hue slider is not a reading. */\n  announce: string\n  /** CSS for the strip behind the thumb. */\n  track: string\n  /** The colour the thumb is filled with. */\n  thumb: string\n  onChange: (value: number) => void\n}\n\n/**\n * One channel of the picker, as a native range input.\n *\n * Native rather than this system's `Slider`, and deliberately: the whole point\n * of these two is the strip BEHIND the thumb — a hue ramp taken at the current\n * lightness, an opacity ramp over a checkerboard — and Radix's track is not a\n * surface a caller can paint. A native range gives the same keyboard contract\n * for nothing, which is what made the trade worth taking.\n */\nfunction ColorTrack({ name, max, step, value, announce, track, thumb, onChange }: ColorTrackProps) {\n  return (\n    <label className=\"flex items-center gap-3 text-sm text-(--ink-2)\">\n      <span className=\"w-14 shrink-0\">{name}</span>\n      <input\n        type=\"range\"\n        min={0}\n        max={max}\n        step={step}\n        value={value}\n        aria-valuetext={announce}\n        onChange={(event) => onChange(Number(event.target.value))}\n        style={{ background: track }}\n        className={cn(\n          'h-4 w-full cursor-pointer appearance-none rounded-(--radius-xs) shadow-[inset_0_0_0_1px_var(--rule)]',\n          '[&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-(--radius-xs) [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-(--paper) [&::-webkit-slider-thumb]:bg-(--thumb) [&::-webkit-slider-thumb]:bg-clip-padding [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]',\n          '[&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-(--radius-xs) [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-(--paper) [&::-moz-range-thumb]:bg-(--thumb) [&::-moz-range-thumb]:bg-clip-padding [&::-moz-range-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]',\n        )}\n        // Read by both thumb rules above; a pseudo-element cannot take a style\n        // attribute of its own, so the colour has to arrive as a variable.\n        ref={(node) => {\n          node?.style.setProperty('--thumb', thumb)\n        }}\n      />\n    </label>\n  )\n}\n\nexport default ColorPicker\n"],"mappings":"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","names":[]}

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,77 @@
+import * as react from 'react';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    /** Extra text matched by the filter but not shown as the label. */
+    keywords?: string[];
+    disabled?: boolean;
+}
+interface CommonProps {
+    options: ComboboxOption[];
+    /**
+     * Names the control. Required — the trigger's text is a value, not a label.
+     *
+     * Announced together with the summary rather than instead of it, so a reader
+     * hears "Tags, 3 selected". Inside a `Field` with a label, that label names
+     * the trigger and this one is not repeated.
+     */
+    label: string;
+    /** Shown on the trigger when nothing is chosen. */
+    placeholder?: string;
+    /** Placeholder inside the filter field. */
+    searchPlaceholder?: string;
+    /** Shown when the filter matches nothing. Say what WOULD match. */
+    emptyMessage?: string;
+    disabled?: boolean;
+    className?: string;
+    /** The TRIGGER's id — the element a label points at. A `Field` sets it. */
+    id?: string;
+    /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */
+    'aria-describedby'?: string;
+    /** Paints the resting border with `--danger` and is announced. A `Field` sets it from `error`. */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** Announced on the trigger. A `Field` sets it from `required`. */
+    'aria-required'?: boolean;
+}
+interface SingleProps extends CommonProps {
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+interface MultipleProps extends CommonProps {
+    /**
+     * Several at once. The trigger then summarises the choice rather than naming
+     * it — "3 selected" past a threshold, because a trigger that grows with its
+     * value reflows the form every time someone picks another one.
+     */
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+type ComboboxProps = SingleProps | MultipleProps;
+/**
+ * A select you can type into, choosing one or several.
+ *
+ * The line against `Select` is length, and it is not a matter of taste: a
+ * styled select is better up to roughly a dozen options, because a list nobody
+ * can filter is faster to scan than one they have to think about. Past that,
+ * this is the right answer.
+ *
+ * Filtering, the highlighted row and the arrow keys come from cmdk, which
+ * implements the ARIA combobox pattern properly: the highlight moves through
+ * `aria-activedescendant` while focus stays in the input. Hand-rolled comboboxes
+ * move focus into the list instead, and the typed text stops being editable.
+ *
+ * Controlled or uncontrolled, like every other form control here.
+ *
+ * @example
+ * <Combobox label="Framework" options={FRAMEWORKS} placeholder="Pick one" />
+ * @example
+ * <Combobox multiple label="Tags" options={TAGS} />
+ */
+declare function Combobox(props: ComboboxProps): react.JSX.Element;
+
+export { Combobox, type ComboboxOption, type ComboboxProps, Combobox as default };

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiCheckLine, RiCloseLine, RiExpandUpDownLine } from "@remixicon/react";
+import { useId, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+import { useFieldControl } from "../Field/field-control.js";
+import { warnBlankName } from "../../lib/warn.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../Command/Command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
+const SUMMARISE_AFTER = 2;
+function Combobox(props) {
+  const {
+    options,
+    label,
+    placeholder = "Select\u2026",
+    searchPlaceholder = "Search\u2026",
+    emptyMessage = "Nothing matches.",
+    disabled = false,
+    className,
+    id,
+    "aria-describedby": describedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired
+  } = props;
+  const multiple = props.multiple === true;
+  warnBlankName("Combobox", "label", label, "the trigger is announced with no name");
+  const field = useFieldControl();
+  const generated = useId();
+  const triggerId = id ?? generated;
+  const summaryId = `${triggerId}-value`;
+  const nameId = field?.labelId ?? `${triggerId}-name`;
+  const bad = isInvalid(void 0, ariaInvalid);
+  const [open, setOpen] = useState(false);
+  const [uncontrolled, setUncontrolled] = useState(() => {
+    if (props.multiple === true) return props.defaultValue ?? [];
+    return props.defaultValue ? [props.defaultValue] : [];
+  });
+  const controlled = props.multiple === true ? props.value : props.value === void 0 ? void 0 : props.value === "" ? [] : [props.value];
+  const current = controlled ?? uncontrolled;
+  const commit = (next) => {
+    if (controlled === void 0) setUncontrolled(next);
+    if (props.multiple === true) props.onValueChange?.(next);
+    else props.onValueChange?.(next[0] ?? "");
+  };
+  const choose = (option) => {
+    if (multiple) {
+      commit(current.includes(option) ? current.filter((v) => v !== option) : [...current, option]);
+      return;
+    }
+    commit(current.includes(option) ? [] : [option]);
+    setOpen(false);
+  };
+  const chosen = options.filter((option) => current.includes(option.value));
+  const summary = chosen.length === 0 ? placeholder : chosen.length <= SUMMARISE_AFTER ? chosen.map((option) => option.label).join(", ") : `${chosen.length} selected`;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        role: "combobox",
+        id: triggerId,
+        "aria-expanded": open,
+        "aria-labelledby": `${nameId} ${summaryId}`,
+        "aria-describedby": describedBy,
+        "aria-required": ariaRequired,
+        "aria-invalid": bad || void 0,
+        disabled,
+        className: cn(
+          "group flex w-full items-center justify-between gap-2 rounded-(--radius) border bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
+          chosen.length > 0 ? "text-(--ink)" : "text-(--ink-3-aa)",
+          className
+        ),
+        children: [
+          field?.labelId == null && /* @__PURE__ */ jsx("span", { id: nameId, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx("span", { id: summaryId, className: "truncate", children: summary }),
+          /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
+            multiple && chosen.length > 0 && // A `<span role="button">` rather than a nested `<button>`, which
+            // is invalid inside the trigger and which browsers reparent — the
+            // clear control then falls outside the field entirely.
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Clear ${label}`,
+                onClick: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  commit([]);
+                },
+                onKeyDown: (event) => {
+                  if (event.key !== "Enter" && event.key !== " ") return;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  commit([]);
+                },
+                className: "grid size-5 cursor-pointer place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)",
+                children: /* @__PURE__ */ jsx(RiCloseLine, { size: 12, "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsx(RiExpandUpDownLine, { size: 14, "aria-hidden": true, className: "text-(--ink-3-aa)" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        label,
+        className: "w-(--radix-popover-trigger-width) overflow-hidden p-0",
+        align: "start",
+        children: /* @__PURE__ */ jsxs(Command, { label: `${label}: ${searchPlaceholder}`, className: "rounded-none border-0", children: [
+          /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
+          /* @__PURE__ */ jsxs(CommandList, { children: [
+            /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
+            /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+              const selected = current.includes(option.value);
+              return /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: option.value,
+                  keywords: [option.label, ...option.keywords ?? []],
+                  disabled: option.disabled,
+                  onSelect: choose,
+                  "aria-selected": selected,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "grid size-4 shrink-0 place-items-center transition-opacity duration-(--duration-fast)",
+                          multiple && "rounded-(--radius-sm) border border-(--rule-2) text-(--accent-foreground) data-[on=true]:border-(--accent) data-[on=true]:bg-(--accent)"
+                        ),
+                        "data-on": selected,
+                        children: /* @__PURE__ */ jsx(
+                          RiCheckLine,
+                          {
+                            size: 12,
+                            "aria-hidden": true,
+                            className: selected ? "opacity-100" : "opacity-0"
+                          }
+                        )
+                      }
+                    ),
+                    option.label
+                  ]
+                },
+                option.value
+              );
+            }) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+var Combobox_default = Combobox;
+export {
+  Combobox,
+  Combobox_default as default
+};
+//# sourceMappingURL=Combobox.js.map