@blurrow/ui 0.1.0 → 0.2.1

package/dist/ColorPicker.js

@@ -0,0 +1,366 @@
+"use client";
+
+// ../../components/ui/ColorPicker.tsx
+import { useId, useRef, useState } from "react";
+import { Portal } from "./Floating.js";
+import { FieldLabel, FieldMessage } from "./FieldMessage.js";
+import { useFloatingPanel } from "./useFloatingPanel.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var clamp = (n, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, n));
+function normalizeHex(input) {
+  const s = input.trim().replace(/^#/, "").toLowerCase();
+  if (/^[0-9a-f]{3}$/.test(s)) return "#" + s.split("").map((c) => c + c).join("");
+  if (/^[0-9a-f]{6}$/.test(s)) return "#" + s;
+  return null;
+}
+function hexToHsv(hex) {
+  const n = parseInt(hex.slice(1), 16);
+  const r = (n >> 16 & 255) / 255;
+  const g = (n >> 8 & 255) / 255;
+  const b = (n & 255) / 255;
+  const max = Math.max(r, g, b);
+  const d = max - Math.min(r, g, b);
+  let h = 0;
+  if (d) {
+    if (max === r) h = (g - b) / d % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h = (h * 60 + 360) % 360;
+  }
+  return { h, s: max ? d / max : 0, v: max };
+}
+function hsvToHex({ h, s, v }) {
+  const f = (n) => {
+    const k = (n + h / 60) % 6;
+    return Math.round((v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255);
+  };
+  return "#" + [f(5), f(3), f(1)].map((x) => x.toString(16).padStart(2, "0")).join("");
+}
+var DEFAULT_SWATCHES = [
+  "#171717",
+  "#737373",
+  "#dc2626",
+  "#ea580c",
+  "#ca8a04",
+  "#16a34a",
+  "#0891b2",
+  "#2563eb",
+  "#7c3aed",
+  "#db2777"
+];
+function ColorPanel({ value, onChange, swatches = DEFAULT_SWATCHES, autoFocus = false }) {
+  const [hsv, setHsv] = useState(() => hexToHsv(value));
+  const [draft, setDraft] = useState(value);
+  const [seen, setSeen] = useState(value);
+  if (value !== seen) {
+    setSeen(value);
+    if (value !== hsvToHex(hsv)) {
+      setHsv(hexToHsv(value));
+      setDraft(value);
+    }
+  }
+  const update = (next) => {
+    setHsv(next);
+    const hex = hsvToHex(next);
+    setDraft(hex);
+    if (hex !== value) onChange(hex);
+  };
+  const pickHex = (hex) => {
+    setHsv(hexToHsv(hex));
+    setDraft(hex);
+    if (hex !== value) onChange(hex);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-[236px] flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(SaturationArea, { hsv, onChange: update, autoFocus }),
+    /* @__PURE__ */ jsx(HueStrip, { hue: hsv.h, onChange: (h) => update({ ...hsv, h }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "h-9 w-9 shrink-0 rounded-[10px]",
+          style: { background: hsvToHex(hsv), boxShadow: "var(--tile-shadow), inset 0 0 0 1px var(--hairline)" }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 z-20 -translate-y-1/2 text-[12.5px] text-ink-faint", children: "#" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-label": "hex colour",
+            value: draft.replace(/^#/, ""),
+            maxLength: 7,
+            spellCheck: false,
+            autoComplete: "off",
+            onChange: (e) => {
+              setDraft("#" + e.target.value.replace(/^#/, ""));
+              const hex = normalizeHex(e.target.value);
+              if (hex && e.target.value.replace(/^#/, "").length === 6) pickHex(hex);
+            },
+            onBlur: () => {
+              const hex = normalizeHex(draft);
+              if (hex) pickHex(hex);
+              else setDraft(hsvToHex(hsv));
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                e.target.blur();
+              }
+            },
+            className: "field relative z-10 w-full rounded-[10px] py-2 pl-6 pr-3 font-mono text-[12.5px] uppercase text-ink caret-ink"
+          }
+        )
+      ] })
+    ] }),
+    swatches.length > 0 && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "swatches", className: "grid grid-cols-10 gap-1.5 border-t border-line-strong pt-3", children: swatches.map((s) => {
+      const hex = normalizeHex(s) ?? s;
+      const on = hex === hsvToHex(hsv);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": hex,
+          "aria-pressed": on,
+          onClick: () => pickHex(hex),
+          className: "relative aspect-square cursor-pointer rounded-full transition-transform duration-200 ease-[var(--ease-spring)] hover:scale-115 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+          style: {
+            background: hex,
+            boxShadow: on ? "0 0 0 2px var(--panel-face), 0 0 0 3.5px var(--ink)" : "inset 0 0 0 1px var(--hairline), inset 0 1px 1px rgba(255,255,255,0.3), var(--dot-shadow)"
+          }
+        },
+        s
+      );
+    }) })
+  ] });
+}
+function useDrag(onMove) {
+  const ref = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const at = (e) => {
+    const r = ref.current.getBoundingClientRect();
+    onMove(clamp((e.clientX - r.left) / r.width), clamp((e.clientY - r.top) / r.height));
+  };
+  const handlers = {
+    onPointerDown: (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      e.currentTarget.querySelector("[data-thumb]")?.focus();
+      setDragging(true);
+      at(e);
+    },
+    onPointerMove: (e) => dragging && at(e),
+    onPointerUp: () => setDragging(false),
+    onPointerCancel: () => setDragging(false)
+  };
+  return { ref, dragging, handlers };
+}
+var thumbStyle = (color, dragging) => ({
+  background: color,
+  boxShadow: "0 0 0 2.5px #fff, 0 0 0 3px rgba(17,17,17,0.1), 0 2px 6px rgba(17,17,17,0.3), inset 0 0 0 1px rgba(17,17,17,0.1)",
+  transform: `translate(-50%, -50%) scale(${dragging ? 1.15 : 1})`,
+  transition: "transform 200ms var(--ease-spring)"
+});
+function SaturationArea({ hsv, onChange, autoFocus }) {
+  const { ref, dragging, handlers } = useDrag((x, y) => onChange({ ...hsv, s: x, v: 1 - y }));
+  const onKeyDown = (e) => {
+    const d = e.shiftKey ? 0.1 : 0.01;
+    const moves = {
+      ArrowLeft: { s: clamp(hsv.s - d) },
+      ArrowRight: { s: clamp(hsv.s + d) },
+      ArrowUp: { v: clamp(hsv.v + d) },
+      ArrowDown: { v: clamp(hsv.v - d) }
+    };
+    if (moves[e.key]) {
+      e.preventDefault();
+      onChange({ ...hsv, ...moves[e.key] });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...handlers,
+      className: "relative h-[148px] cursor-crosshair touch-none rounded-[10px]",
+      style: {
+        background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hsv.h} 100% 50%))`,
+        /* Cut into the face like a field: shade inside, lit lip below */
+        boxShadow: "inset 0 0 0 1px var(--hairline), inset 0 1px 3px rgba(0,0,0,0.25)"
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-thumb": true,
+          ref: autoFocus ? (el) => el?.focus({ preventScroll: true }) : void 0,
+          role: "slider",
+          tabIndex: 0,
+          "aria-label": "saturation and brightness",
+          "aria-valuetext": `saturation ${Math.round(hsv.s * 100)}%, brightness ${Math.round(hsv.v * 100)}%`,
+          "aria-valuenow": Math.round(hsv.s * 100),
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          onKeyDown,
+          className: "absolute h-3.5 w-3.5 rounded-full focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-ink",
+          style: { left: `${hsv.s * 100}%`, top: `${(1 - hsv.v) * 100}%`, ...thumbStyle(hsvToHex(hsv), dragging) }
+        }
+      )
+    }
+  );
+}
+function HueStrip({ hue, onChange }) {
+  const { ref, dragging, handlers } = useDrag((x) => onChange(Math.min(359.9, x * 360)));
+  const onKeyDown = (e) => {
+    const d = e.shiftKey ? 10 : 1;
+    if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      onChange((hue - d + 360) % 360);
+    }
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      onChange((hue + d) % 360);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      ...handlers,
+      className: "relative mx-[7px] h-3 cursor-pointer touch-none",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute -inset-x-[7px] inset-y-0 rounded-full",
+            style: {
+              background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+              boxShadow: "inset 0 0 0 1px var(--hairline), inset 0 1px 2px rgba(0,0,0,0.3)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-thumb": true,
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": "hue",
+            "aria-valuenow": Math.round(hue),
+            "aria-valuemin": 0,
+            "aria-valuemax": 360,
+            onKeyDown,
+            className: "absolute top-1/2 h-3.5 w-3.5 rounded-full focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-ink",
+            style: { left: `${hue / 360 * 100}%`, ...thumbStyle(`hsl(${hue} 100% 50%)`, dragging) }
+          }
+        )
+      ]
+    }
+  );
+}
+function ColorPicker({
+  value,
+  defaultValue = "#2563eb",
+  onChange,
+  label,
+  hint,
+  swatches,
+  inline = false,
+  name,
+  disabled = false,
+  fullWidth = false,
+  className = ""
+}) {
+  const uid = useId();
+  const ref = useRef(null);
+  const buttonRef = useRef(null);
+  const [internal, setInternal] = useState(normalizeHex(defaultValue) ?? "#000000");
+  const color = (value !== void 0 ? normalizeHex(value) : null) ?? internal;
+  const panel = useFloatingPanel(ref, { onEscape: () => buttonRef.current?.focus() });
+  const { setFloating, panelStyle } = panel;
+  const set = (hex) => {
+    setInternal(hex);
+    onChange?.(hex);
+  };
+  const labelEl = label && /* @__PURE__ */ jsx(FieldLabel, { id: `${uid}-label`, children: label });
+  const hintEl = /* @__PURE__ */ jsx(FieldMessage, { hint });
+  const hidden = name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: color });
+  if (inline) {
+    return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": label ? `${uid}-label` : void 0, className: ["flex flex-col gap-1.5", className].join(" "), children: [
+      labelEl,
+      /* @__PURE__ */ jsx("div", { className: "w-fit rounded-[16px] p-1.5", style: { background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }, children: /* @__PURE__ */ jsx("div", { className: "rounded-[11px] bg-panel-face p-3", style: { boxShadow: "var(--panel-face-shadow)" }, children: /* @__PURE__ */ jsx(ColorPanel, { value: color, onChange: set, swatches }) }) }),
+      hintEl,
+      hidden
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: ["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" "), children: [
+    labelEl,
+    /* @__PURE__ */ jsxs("div", { ref, className: ["relative", fullWidth ? "w-full" : "inline-block w-48", className].join(" "), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: buttonRef,
+          type: "button",
+          disabled,
+          onClick: panel.toggle,
+          "aria-haspopup": "dialog",
+          "aria-expanded": panel.open,
+          "aria-controls": panel.open ? `${uid}-panel` : void 0,
+          "aria-labelledby": label ? `${uid}-label ${uid}-value` : void 0,
+          "data-open": panel.open || void 0,
+          className: "field group/color relative isolate flex w-full cursor-pointer items-center gap-2.5 rounded-xl py-2.5 pl-2.5 pr-4 text-left focus:outline-none disabled:opacity-40 disabled:pointer-events-none",
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "h-6 w-6 shrink-0 rounded-[7px] transition-transform duration-300 ease-[var(--ease-spring)] group-hover/color:scale-105",
+                style: {
+                  background: color,
+                  boxShadow: "var(--key-shadow), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 0 0 1px var(--hairline)"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { id: `${uid}-value`, className: "flex-1 font-mono text-[13px] uppercase tracking-[0.02em] text-ink", children: color }),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": true,
+                width: "14",
+                height: "14",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                viewBox: "0 0 24 24",
+                className: [
+                  "shrink-0 transition-[transform,color] duration-300 ease-[var(--ease-spring)]",
+                  panel.open ? "rotate-180 text-ink" : "text-ink-faint group-hover/color:text-ink-label"
+                ].join(" "),
+                children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              }
+            )
+          ]
+        }
+      ),
+      hidden
+    ] }),
+    panel.mounted && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setFloating,
+        id: `${uid}-panel`,
+        role: "dialog",
+        "aria-label": label ? `choose ${label}` : "choose a colour",
+        className: "rounded-[16px] p-1.5",
+        style: panelStyle,
+        children: /* @__PURE__ */ jsx("div", { className: "rounded-[11px] bg-panel-face p-3", style: { boxShadow: "var(--panel-face-shadow)" }, children: /* @__PURE__ */ jsx(ColorPanel, { value: color, onChange: set, swatches, autoFocus: true }) })
+      }
+    ) }),
+    hintEl
+  ] });
+}
+export {
+  ColorPicker,
+  normalizeHex
+};
+//# sourceMappingURL=ColorPicker.js.map

package/dist/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/ColorPicker.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useRef, useState } from \"react\";\nimport { Portal } from \"./Floating\";\nimport { FieldLabel, FieldMessage } from \"./FieldMessage\";\nimport { useFloatingPanel } from \"./useFloatingPanel\";\n\n/* ── Colour maths ─────────────────────────────────────────────────── */\ntype HSV = { h: number; s: number; v: number };\n\nconst clamp = (n: number, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, n));\n\n/** Accepts #rgb, #rrggbb, with or without the hash. Returns #rrggbb or null */\nexport function normalizeHex(input: string): string | null {\n  const s = input.trim().replace(/^#/, \"\").toLowerCase();\n  if (/^[0-9a-f]{3}$/.test(s)) return \"#\" + s.split(\"\").map((c) => c + c).join(\"\");\n  if (/^[0-9a-f]{6}$/.test(s)) return \"#\" + s;\n  return null;\n}\n\nfunction hexToHsv(hex: string): HSV {\n  const n = parseInt(hex.slice(1), 16);\n  const r = ((n >> 16) & 255) / 255;\n  const g = ((n >> 8) & 255) / 255;\n  const b = (n & 255) / 255;\n  const max = Math.max(r, g, b);\n  const d = max - Math.min(r, g, b);\n  let h = 0;\n  if (d) {\n    if (max === r) h = ((g - b) / d) % 6;\n    else if (max === g) h = (b - r) / d + 2;\n    else h = (r - g) / d + 4;\n    h = (h * 60 + 360) % 360;\n  }\n  return { h, s: max ? d / max : 0, v: max };\n}\n\nfunction hsvToHex({ h, s, v }: HSV): string {\n  const f = (n: number) => {\n    const k = (n + h / 60) % 6;\n    return Math.round((v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255);\n  };\n  return \"#\" + [f(5), f(3), f(1)].map((x) => x.toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nconst DEFAULT_SWATCHES = [\n  \"#171717\", \"#737373\", \"#dc2626\", \"#ea580c\", \"#ca8a04\",\n  \"#16a34a\", \"#0891b2\", \"#2563eb\", \"#7c3aed\", \"#db2777\",\n];\n\n/* ── The panel: area, hue strip, hex field, swatches ──────────────── */\ninterface ColorPanelProps {\n  value: string;\n  onChange: (hex: string) => void;\n  swatches?: string[];\n  /** Focus the saturation knob as soon as the panel mounts */\n  autoFocus?: boolean;\n}\n\nfunction ColorPanel({ value, onChange, swatches = DEFAULT_SWATCHES, autoFocus = false }: ColorPanelProps) {\n  // Hue and saturation are kept apart from the hex, so dragging through\n  // grey or black doesn't forget which colour you were on\n  const [hsv, setHsv] = useState<HSV>(() => hexToHsv(value));\n  const [draft, setDraft] = useState(value);\n\n  // A colour set from outside (not one we just sent up) resets the panel\n  const [seen, setSeen] = useState(value);\n  if (value !== seen) {\n    setSeen(value);\n    if (value !== hsvToHex(hsv)) {\n      setHsv(hexToHsv(value));\n      setDraft(value);\n    }\n  }\n\n  const update = (next: HSV) => {\n    setHsv(next);\n    const hex = hsvToHex(next);\n    setDraft(hex);\n    if (hex !== value) onChange(hex);\n  };\n\n  const pickHex = (hex: string) => {\n    setHsv(hexToHsv(hex));\n    setDraft(hex);\n    if (hex !== value) onChange(hex);\n  };\n\n  return (\n    <div className=\"flex w-[236px] flex-col gap-3\">\n      <SaturationArea hsv={hsv} onChange={update} autoFocus={autoFocus} />\n      <HueStrip hue={hsv.h} onChange={(h) => update({ ...hsv, h })} />\n\n      <div className=\"flex items-center gap-2\">\n        <span\n          aria-hidden\n          className=\"h-9 w-9 shrink-0 rounded-[10px]\"\n          style={{ background: hsvToHex(hsv), boxShadow: \"var(--tile-shadow), inset 0 0 0 1px var(--hairline)\" }}\n        />\n        <div className=\"relative flex-1\">\n          <span className=\"pointer-events-none absolute left-3 top-1/2 z-20 -translate-y-1/2 text-[12.5px] text-ink-faint\">#</span>\n          <input\n            aria-label=\"hex colour\"\n            value={draft.replace(/^#/, \"\")}\n            maxLength={7}\n            spellCheck={false}\n            autoComplete=\"off\"\n            onChange={(e) => {\n              setDraft(\"#\" + e.target.value.replace(/^#/, \"\"));\n              const hex = normalizeHex(e.target.value);\n              if (hex && e.target.value.replace(/^#/, \"\").length === 6) pickHex(hex);\n            }}\n            onBlur={() => {\n              const hex = normalizeHex(draft);\n              if (hex) pickHex(hex);\n              else setDraft(hsvToHex(hsv));\n            }}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\") {\n                e.preventDefault();\n                (e.target as HTMLInputElement).blur();\n              }\n            }}\n            className=\"field relative z-10 w-full rounded-[10px] py-2 pl-6 pr-3 font-mono text-[12.5px] uppercase text-ink caret-ink\"\n          />\n        </div>\n      </div>\n\n      {swatches.length > 0 && (\n        <div role=\"group\" aria-label=\"swatches\" className=\"grid grid-cols-10 gap-1.5 border-t border-line-strong pt-3\">\n          {swatches.map((s) => {\n            const hex = normalizeHex(s) ?? s;\n            const on = hex === hsvToHex(hsv);\n            return (\n              <button\n                key={s}\n                type=\"button\"\n                aria-label={hex}\n                aria-pressed={on}\n                onClick={() => pickHex(hex)}\n                className=\"relative aspect-square cursor-pointer rounded-full transition-transform duration-200 ease-[var(--ease-spring)] hover:scale-115 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink\"\n                style={{\n                  background: hex,\n                  boxShadow: on\n                    ? \"0 0 0 2px var(--panel-face), 0 0 0 3.5px var(--ink)\"\n                    : \"inset 0 0 0 1px var(--hairline), inset 0 1px 1px rgba(255,255,255,0.3), var(--dot-shadow)\",\n                }}\n              />\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* Drag anywhere on an element and get back where you are, 0…1 on each axis */\nfunction useDrag(onMove: (x: number, y: number) => void) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [dragging, setDragging] = useState(false);\n  const at = (e: React.PointerEvent) => {\n    const r = ref.current!.getBoundingClientRect();\n    onMove(clamp((e.clientX - r.left) / r.width), clamp((e.clientY - r.top) / r.height));\n  };\n  const handlers = {\n    onPointerDown: (e: React.PointerEvent) => {\n      if (e.button !== 0) return;\n      e.preventDefault();\n      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n      (e.currentTarget.querySelector(\"[data-thumb]\") as HTMLElement | null)?.focus();\n      setDragging(true);\n      at(e);\n    },\n    onPointerMove: (e: React.PointerEvent) => dragging && at(e),\n    onPointerUp: () => setDragging(false),\n    onPointerCancel: () => setDragging(false),\n  };\n  return { ref, dragging, handlers };\n}\n\n/* A raised white ring that rides on the area and the strip */\nconst thumbStyle = (color: string, dragging: boolean): React.CSSProperties => ({\n  background: color,\n  boxShadow:\n    \"0 0 0 2.5px #fff, 0 0 0 3px rgba(17,17,17,0.1), 0 2px 6px rgba(17,17,17,0.3), inset 0 0 0 1px rgba(17,17,17,0.1)\",\n  transform: `translate(-50%, -50%) scale(${dragging ? 1.15 : 1})`,\n  transition: \"transform 200ms var(--ease-spring)\",\n});\n\nfunction SaturationArea({ hsv, onChange, autoFocus }: { hsv: HSV; onChange: (hsv: HSV) => void; autoFocus?: boolean }) {\n  const { ref, dragging, handlers } = useDrag((x, y) => onChange({ ...hsv, s: x, v: 1 - y }));\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    const d = e.shiftKey ? 0.1 : 0.01;\n    const moves: Record<string, Partial<HSV>> = {\n      ArrowLeft: { s: clamp(hsv.s - d) },\n      ArrowRight: { s: clamp(hsv.s + d) },\n      ArrowUp: { v: clamp(hsv.v + d) },\n      ArrowDown: { v: clamp(hsv.v - d) },\n    };\n    if (moves[e.key]) {\n      e.preventDefault();\n      onChange({ ...hsv, ...moves[e.key] });\n    }\n  };\n  return (\n    <div\n      ref={ref}\n      {...handlers}\n      className=\"relative h-[148px] cursor-crosshair touch-none rounded-[10px]\"\n      style={{\n        background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hsv.h} 100% 50%))`,\n        /* Cut into the face like a field: shade inside, lit lip below */\n        boxShadow: \"inset 0 0 0 1px var(--hairline), inset 0 1px 3px rgba(0,0,0,0.25)\",\n      }}\n    >\n      <span\n        data-thumb\n        ref={autoFocus ? (el) => el?.focus({ preventScroll: true }) : undefined}\n        role=\"slider\"\n        tabIndex={0}\n        aria-label=\"saturation and brightness\"\n        aria-valuetext={`saturation ${Math.round(hsv.s * 100)}%, brightness ${Math.round(hsv.v * 100)}%`}\n        aria-valuenow={Math.round(hsv.s * 100)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        onKeyDown={onKeyDown}\n        className=\"absolute h-3.5 w-3.5 rounded-full focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-ink\"\n        style={{ left: `${hsv.s * 100}%`, top: `${(1 - hsv.v) * 100}%`, ...thumbStyle(hsvToHex(hsv), dragging) }}\n      />\n    </div>\n  );\n}\n\nfunction HueStrip({ hue, onChange }: { hue: number; onChange: (h: number) => void }) {\n  const { ref, dragging, handlers } = useDrag((x) => onChange(Math.min(359.9, x * 360)));\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    const d = e.shiftKey ? 10 : 1;\n    if (e.key === \"ArrowLeft\" || e.key === \"ArrowDown\") { e.preventDefault(); onChange((hue - d + 360) % 360); }\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowUp\") { e.preventDefault(); onChange((hue + d) % 360); }\n  };\n  return (\n    <div\n      ref={ref}\n      {...handlers}\n      className=\"relative mx-[7px] h-3 cursor-pointer touch-none\"\n    >\n      <span\n        aria-hidden\n        className=\"absolute -inset-x-[7px] inset-y-0 rounded-full\"\n        style={{\n          background: \"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)\",\n          boxShadow: \"inset 0 0 0 1px var(--hairline), inset 0 1px 2px rgba(0,0,0,0.3)\",\n        }}\n      />\n      <span\n        data-thumb\n        role=\"slider\"\n        tabIndex={0}\n        aria-label=\"hue\"\n        aria-valuenow={Math.round(hue)}\n        aria-valuemin={0}\n        aria-valuemax={360}\n        onKeyDown={onKeyDown}\n        className=\"absolute top-1/2 h-3.5 w-3.5 rounded-full focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-ink\"\n        style={{ left: `${(hue / 360) * 100}%`, ...thumbStyle(`hsl(${hue} 100% 50%)`, dragging) }}\n      />\n    </div>\n  );\n}\n\n/* ── ColorPicker ──────────────────────────────────────────────────── */\ninterface ColorPickerProps {\n  /** A hex colour, like \"#2563eb\" */\n  value?: string;\n  defaultValue?: string;\n  onChange?: (hex: string) => void;\n  label?: string;\n  hint?: string;\n  /** Preset colours under the picker; pass [] to hide them */\n  swatches?: string[];\n  /** Render the panel straight onto the page instead of behind a field */\n  inline?: boolean;\n  /** Submit the colour with a form */\n  name?: string;\n  disabled?: boolean;\n  fullWidth?: boolean;\n  className?: string;\n}\n\n/* Closed, it's a sunken field holding a small raised chip of the colour.\n   Open, a floating panel with a saturation area cut into its face, a hue\n   strip, a hex field and a row of swatches.                            */\nexport function ColorPicker({\n  value,\n  defaultValue = \"#2563eb\",\n  onChange,\n  label,\n  hint,\n  swatches,\n  inline = false,\n  name,\n  disabled = false,\n  fullWidth = false,\n  className = \"\",\n}: ColorPickerProps) {\n  const uid = useId();\n  const ref = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [internal, setInternal] = useState(normalizeHex(defaultValue) ?? \"#000000\");\n  const color = (value !== undefined ? normalizeHex(value) : null) ?? internal;\n  const panel = useFloatingPanel(ref, { onEscape: () => buttonRef.current?.focus() });\n  const { setFloating, panelStyle } = panel;\n\n  const set = (hex: string) => {\n    setInternal(hex);\n    onChange?.(hex);\n  };\n\n  const labelEl = label && <FieldLabel id={`${uid}-label`}>{label}</FieldLabel>;\n  const hintEl = <FieldMessage hint={hint} />;\n  const hidden = name && <input type=\"hidden\" name={name} value={color} />;\n\n  if (inline) {\n    return (\n      <div role=\"group\" aria-labelledby={label ? `${uid}-label` : undefined} className={[\"flex flex-col gap-1.5\", className].join(\" \")}>\n        {labelEl}\n        <div className=\"w-fit rounded-[16px] p-1.5\" style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--panel-shadow)\" }}>\n          <div className=\"rounded-[11px] bg-panel-face p-3\" style={{ boxShadow: \"var(--panel-face-shadow)\" }}>\n            <ColorPanel value={color} onChange={set} swatches={swatches} />\n          </div>\n        </div>\n        {hintEl}\n        {hidden}\n      </div>\n    );\n  }\n\n  return (\n    <div className={[\"group/field flex flex-col gap-1.5\", fullWidth ? \"w-full\" : \"\"].join(\" \")}>\n      {labelEl}\n      <div ref={ref} className={[\"relative\", fullWidth ? \"w-full\" : \"inline-block w-48\", className].join(\" \")}>\n        <button\n          ref={buttonRef}\n          type=\"button\"\n          disabled={disabled}\n          onClick={panel.toggle}\n          aria-haspopup=\"dialog\"\n          aria-expanded={panel.open}\n          aria-controls={panel.open ? `${uid}-panel` : undefined}\n          aria-labelledby={label ? `${uid}-label ${uid}-value` : undefined}\n          data-open={panel.open || undefined}\n          className=\"field group/color relative isolate flex w-full cursor-pointer items-center gap-2.5 rounded-xl py-2.5 pl-2.5 pr-4 text-left focus:outline-none disabled:opacity-40 disabled:pointer-events-none\"\n        >\n          <span\n            aria-hidden\n            className=\"h-6 w-6 shrink-0 rounded-[7px] transition-transform duration-300 ease-[var(--ease-spring)] group-hover/color:scale-105\"\n            style={{\n              background: color,\n              boxShadow:\n                \"var(--key-shadow), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 0 0 1px var(--hairline)\",\n            }}\n          />\n          <span id={`${uid}-value`} className=\"flex-1 font-mono text-[13px] uppercase tracking-[0.02em] text-ink\">\n            {color}\n          </span>\n          <svg\n            aria-hidden\n            width=\"14\"\n            height=\"14\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 24 24\"\n            className={[\n              \"shrink-0 transition-[transform,color] duration-300 ease-[var(--ease-spring)]\",\n              panel.open ? \"rotate-180 text-ink\" : \"text-ink-faint group-hover/color:text-ink-label\",\n            ].join(\" \")}\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n          </svg>\n        </button>\n\n        {hidden}\n      </div>\n      {panel.mounted && (\n        <Portal>\n          <div\n            ref={setFloating}\n            id={`${uid}-panel`}\n            role=\"dialog\"\n            aria-label={label ? `choose ${label}` : \"choose a colour\"}\n            className=\"rounded-[16px] p-1.5\"\n            style={panelStyle}\n          >\n            <div className=\"rounded-[11px] bg-panel-face p-3\" style={{ boxShadow: \"var(--panel-face-shadow)\" }}>\n              <ColorPanel value={color} onChange={set} swatches={swatches} autoFocus />\n            </div>\n          </div>\n        </Portal>\n      )}\n      {hintEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Combobox.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    /** A second, quieter line under the label */
+    description?: string;
+    /** Extra words to match on that aren't shown */
+    keywords?: string[];
+    disabled?: boolean;
+}
+interface ComboboxProps {
+    options: ComboboxOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+    placeholder?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+    /** Shown when nothing matches */
+    emptyText?: string;
+    /** Replace the default "contains" match */
+    filter?: (option: ComboboxOption, query: string) => boolean;
+    /** Show a key that empties the field */
+    clearable?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    name?: string;
+    className?: string;
+}
+declare function Combobox({ options, value, defaultValue, onChange, placeholder, label, hint, error, emptyText, filter, clearable, disabled, fullWidth, name, className, }: ComboboxProps): react_jsx_runtime.JSX.Element;
+
+export { Combobox, type ComboboxOption };