@enigmax/primitives 0.23.0 → 0.24.0

package/dist/color-D_rZ83Oc.d.ts

@@ -0,0 +1,152 @@
+/**
+ * Making a password, and judging one.
+ *
+ * Both are opt-in. A sign-in form wants neither: offering to generate a password where one
+ * already exists is noise, and scoring one the visitor cannot change is worse. They belong
+ * on a registration form and a change-password form, which is where an agent should switch
+ * them on.
+ */
+/** Character classes a generated password can draw from. */
+interface PasswordAlphabet {
+    lowercase?: boolean;
+    uppercase?: boolean;
+    digits?: boolean;
+    symbols?: boolean;
+}
+interface GeneratePasswordOptions extends PasswordAlphabet {
+    /** Default 20. Long beats clever: length is the only term that scales. */
+    length?: number;
+    /**
+     * Drop the characters that are read wrong off a screen or off paper - I l 1 O 0.
+     * Worth it when the password will be typed by hand, not worth the entropy otherwise.
+     */
+    excludeAmbiguous?: boolean;
+    /** Characters to remove from every class, e.g. ones your backend rejects. */
+    exclude?: string;
+    /**
+     * Guarantee at least one character from every class asked for. Most password policies
+     * demand it; it costs a little entropy, because it removes every password that happens
+     * to lack one.
+     */
+    requireEachClass?: boolean;
+}
+/**
+ * A random password from the classes asked for.
+ *
+ * @throws when the runtime has no CSPRNG, or when the options ask for something impossible
+ *         (every class excluded, or a length too short to hold one of each).
+ */
+declare function generatePassword(options?: GeneratePasswordOptions): string;
+type PasswordScore = 0 | 1 | 2 | 3 | 4;
+interface PasswordStrengthReport {
+    /** 0 worst, 4 best. What the bars under the field render. */
+    score: PasswordScore;
+    /** Estimated bits of entropy after the penalties below. */
+    bits: number;
+    /**
+     * Why it scored what it scored, worst first. Show the first one; showing all of them
+     * turns a hint into a lecture.
+     */
+    warnings: string[];
+    /** Empty field. Render nothing rather than a zero score, which reads as a failure. */
+    empty: boolean;
+}
+interface EstimateOptions {
+    /**
+     * Values the visitor has already typed elsewhere - email, name, company. A password
+     * containing one of them is guessable by anyone who has the sign-up form in front of
+     * them, and no character-class rule catches it.
+     */
+    userInputs?: string[];
+}
+/**
+ * Score a password.
+ *
+ * The bits are an estimate and the bands are a convention, not a measurement - they exist
+ * to move a bar, not to certify anything. Swap this out for zxcvbn where the number has to
+ * mean something, and check the breach corpus for the cases no estimator can see.
+ */
+declare function estimatePasswordStrength(password: string, options?: EstimateOptions): PasswordStrengthReport;
+
+/**
+ * Reading a colour, writing one, and converting between the two models a picker needs.
+ *
+ * Arithmetic only, like every other core here: no DOM, no framework. The picker drags a
+ * saturation/value square and a hue rail, which are HSV; a form field holds `#3b82f6`,
+ * `rgb(59, 130, 246)` or an `hsl()`, which is what a stylesheet and a database take. This
+ * module is the translation between them.
+ *
+ * Two things it does NOT do, both on purpose:
+ *
+ * - **Named colours.** `red`, `rebeccapurple` and the other 146 are a table nobody needs in
+ *   a bundle to drag a square, and the DOM already resolves them for free (assign the name
+ *   to `style.color` and read it back). The picker's canonical value is a hex string.
+ * - **Colour spaces past sRGB.** `oklch()` and `color()` describe colours a hex cannot, so
+ *   accepting one here and handing back `#rrggbb` would silently clip it. Parsing returns
+ *   null instead, which the field reports as unparseable rather than as a different colour.
+ */
+/** sRGB, 0-255 per channel, with alpha 0-1. The transport shape everything converts through. */
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/** Hue 0-360, saturation and value 0-1, alpha 0-1. What the picker's two controls move. */
+interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+/** Hue 0-360, saturation and lightness 0-1, alpha 0-1. Only used by `hsl()` in and out. */
+interface Hsl {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+/** How a colour is written back into the field. */
+type ColorFormat = "hex" | "rgb" | "hsl";
+interface FormatColorOptions {
+    /** Write the alpha channel. Off drops it, so a half-transparent colour becomes opaque. */
+    alpha?: boolean;
+}
+/**
+ * A colour string to sRGB, or null when it is not one.
+ *
+ * Null is the whole point of the return type: a field is unparseable for as long as someone
+ * is halfway through typing `#3b8`, and a picker that guesses at that moment fights the
+ * caret. Everything here is tolerant of what a person types - a missing `#`, upper case,
+ * stray spaces - and intolerant of what would be a guess.
+ */
+declare function parseColor(input: string): Rgb | null;
+/** `#rrggbb`, or `#rrggbbaa` when alpha is asked for and the colour is not opaque. */
+declare function toHex(color: Rgb, options?: FormatColorOptions): string;
+/**
+ * A colour back to a string.
+ *
+ * The legacy comma syntax for `rgb()` and `hsl()`, deliberately: this string is going into a
+ * field someone will paste into a stylesheet, a spreadsheet or an older toolchain, and the
+ * space-and-slash form is the one those still refuse.
+ */
+declare function formatColor(color: Rgb, format?: ColorFormat, options?: FormatColorOptions): string;
+/**
+ * sRGB to HSV, keeping a hue the arithmetic cannot see.
+ *
+ * THE colour picker bug, and it is in almost every hand-rolled one: hue is undefined at
+ * black, at white and at every grey, because those have no dominant channel. Recomputing it
+ * from the RGB therefore returns 0 - red - so dragging the square into its bottom-left
+ * corner and back out again resets a hue the visitor picked, and the rail jumps under their
+ * finger. `fallbackHue` is the hue they last chose, and it is what the picker keeps its own
+ * state for.
+ */
+declare function rgbToHsv(color: Rgb, fallbackHue?: number): Hsv;
+declare function hsvToRgb(color: Hsv): Rgb;
+/** sRGB to HSL. Same undefined hue at the greys, same reason to pass the one being kept. */
+declare function rgbToHsl(color: Rgb, fallbackHue?: number): Hsl;
+declare function hslToRgb(color: Hsl): Rgb;
+/** Same colour, to the byte. Used to tell a value the picker wrote from one someone typed. */
+declare function colorEquals(a: Rgb | null, b: Rgb | null): boolean;
+
+export { type ColorFormat as C, type EstimateOptions as E, type FormatColorOptions as F, type GeneratePasswordOptions as G, type Hsl as H, type PasswordAlphabet as P, type Rgb as R, type Hsv as a, type PasswordScore as b, type PasswordStrengthReport as c, colorEquals as d, estimatePasswordStrength as e, formatColor as f, generatePassword as g, hslToRgb as h, hsvToRgb as i, rgbToHsv as j, parseColor as p, rgbToHsl as r, toHex as t };

package/dist/color-OPV3BJV6.js

@@ -0,0 +1,452 @@
+import { parseColor, rgbToHsv, colorEquals, hsvToRgb, formatColor, toHex } from './chunk-S2FPN5ID.js';
+import { writeValue } from './chunk-S7EE57YB.js';
+import { useLayoutEffect, useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/react/input/color-styles.ts
+var COLOR_STYLES = `
+:root {
+    --enigma-color-panel-bg: #1c1c1c;
+    --enigma-color-panel-border: #333333;
+    --enigma-color-panel-radius: 0.625rem;
+    --enigma-color-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+    --enigma-color-panel-width: 13.5rem;
+    --enigma-color-text: #f5f5f5;
+    --enigma-color-muted: #a3a3a3;
+    --enigma-color-border: #404040;
+    --enigma-color-focus: #a3a3a3;
+    --enigma-color-area-height: 8rem;
+    --enigma-color-rail-height: 0.625rem;
+    --enigma-color-thumb: #ffffff;
+    --enigma-color-thumb-ring: rgba(0, 0, 0, 0.55);
+    /* The light square of the transparency chequerboard. The dark one is the surface it sits
+       on, which is why only one colour is a property. */
+    --enigma-color-checker: rgba(255, 255, 255, 0.22);
+    --enigma-color-checker-size: 0.5rem;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --enigma-color-panel-bg: #ffffff;
+        --enigma-color-panel-border: #e5e5e5;
+        --enigma-color-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        --enigma-color-text: #171717;
+        --enigma-color-muted: #737373;
+        --enigma-color-border: #d4d4d4;
+        --enigma-color-focus: #737373;
+        --enigma-color-thumb-ring: rgba(0, 0, 0, 0.35);
+        --enigma-color-checker: rgba(0, 0, 0, 0.14);
+    }
+}
+
+/* The anchor the panel hangs from. Inline so it sits in the field's own row, and the
+   positioning context so the panel needs no portal and no scroll listener: it moves with
+   the field because it is INSIDE it. */
+[data-enigma-color] { position: relative; display: inline-flex; flex: none; }
+
+[data-enigma-color-swatch] {
+    display: block; width: 1.25rem; height: 1.25rem; padding: 0;
+    background: none; border: 1px solid var(--enigma-color-border); border-radius: 0.3125rem;
+    cursor: pointer; overflow: hidden;
+}
+[data-enigma-color-swatch]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 2px; }
+[data-enigma-color-swatch]:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* The chequerboard, so a colour with alpha reads as transparent rather than as a lighter
+   colour - which is the whole difference between #ff000080 and #ff8080. */
+[data-enigma-color-checkers] {
+    background-image:
+        conic-gradient(var(--enigma-color-checker) 0 25%, transparent 0 50%, var(--enigma-color-checker) 0 75%, transparent 0);
+    background-size: var(--enigma-color-checker-size) var(--enigma-color-checker-size);
+}
+
+[data-enigma-color-fill] { display: block; width: 100%; height: 100%; }
+/* An unparseable field has no colour to show, so the swatch shows the chequerboard alone
+   rather than the last good colour: a stale swatch says the value is fine when it is not. */
+[data-enigma-color-swatch][data-invalid] [data-enigma-color-fill] { background: none; }
+
+[data-enigma-color-panel] {
+    position: absolute; z-index: 60; top: calc(100% + 0.375rem); left: 0;
+    display: grid; gap: 0.625rem;
+    box-sizing: border-box; width: var(--enigma-color-panel-width); padding: 0.625rem;
+    color: var(--enigma-color-text); background: var(--enigma-color-panel-bg);
+    border: 1px solid var(--enigma-color-panel-border);
+    border-radius: var(--enigma-color-panel-radius);
+    box-shadow: var(--enigma-color-panel-shadow);
+}
+/* Flipped when the field sits near the bottom of the window. Without it the panel opens off
+   the screen and the controls are unreachable, which is the same defect the select fixes. */
+[data-enigma-color-panel][data-side="top"] { top: auto; bottom: calc(100% + 0.375rem); }
+
+[data-enigma-color-area] {
+    position: relative; height: var(--enigma-color-area-height);
+    border-radius: 0.375rem; cursor: crosshair;
+    /* The drag IS the control here, so the page must not scroll under it. The marquee's
+       warning about touch-action is the opposite case: a full-width row still has to let the
+       page move. */
+    touch-action: none;
+    background:
+        linear-gradient(to top, #000000, rgba(0, 0, 0, 0)),
+        linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)),
+        hsl(var(--enigma-color-hue, 0), 100%, 50%);
+}
+[data-enigma-color-area]:focus-visible,
+[data-enigma-color-rail]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 2px; }
+
+[data-enigma-color-controls] { display: flex; align-items: center; gap: 0.5rem; }
+[data-enigma-color-rails] { display: grid; gap: 0.5rem; flex: 1; min-width: 0; }
+
+[data-enigma-color-rail] {
+    position: relative; height: var(--enigma-color-rail-height);
+    border-radius: 999px; cursor: pointer; touch-action: none;
+}
+[data-enigma-color-rail="hue"] {
+    background: linear-gradient(to right, #ff0000, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000);
+}
+[data-enigma-color-rail="alpha"] { background-image: none; }
+[data-enigma-color-rail="alpha"] [data-enigma-color-gradient] {
+    position: absolute; inset: 0; border-radius: inherit;
+    background: linear-gradient(to right, transparent, var(--enigma-color-opaque, #000000));
+}
+
+/* One handle for the square and the rails. It must never take the pointer: a press that
+   lands on the handle instead of the surface under it would start no drag at all. */
+[data-enigma-color-thumb] {
+    position: absolute; pointer-events: none;
+    width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem;
+    border: 2px solid var(--enigma-color-thumb); border-radius: 999px;
+    box-shadow: 0 0 0 1px var(--enigma-color-thumb-ring), inset 0 0 0 1px var(--enigma-color-thumb-ring);
+}
+[data-enigma-color-rail] [data-enigma-color-thumb] { top: 50%; }
+
+[data-enigma-color-preview] {
+    position: relative; flex: none; width: 1.75rem; height: 1.75rem;
+    border: 1px solid var(--enigma-color-border); border-radius: 999px; overflow: hidden;
+}
+
+[data-enigma-color-eyedropper] {
+    display: grid; place-items: center; flex: none;
+    width: 1.75rem; height: 1.75rem; padding: 0;
+    color: var(--enigma-color-muted); background: none;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.375rem; cursor: pointer;
+}
+[data-enigma-color-eyedropper]:hover { color: var(--enigma-color-text); }
+[data-enigma-color-eyedropper]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 2px; }
+
+[data-enigma-color-swatches] { display: flex; flex-wrap: wrap; gap: 0.25rem; }
+[data-enigma-color-preset] {
+    width: 1.125rem; height: 1.125rem; padding: 0;
+    border: 1px solid var(--enigma-color-border); border-radius: 0.25rem; cursor: pointer;
+}
+[data-enigma-color-preset]:focus-visible { outline: 2px solid var(--enigma-color-focus); outline-offset: 2px; }
+[data-enigma-color-preset][aria-pressed="true"] { box-shadow: 0 0 0 2px var(--enigma-color-focus); }
+`;
+var INITIAL = { h: 0, s: 0, v: 0, a: 1 };
+var STEP = { fine: 0.01, coarse: 0.1, hue: 1, hueCoarse: 10 };
+var MARGIN = 12;
+var injected = false;
+function injectStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  if (document.querySelector("[data-enigma-color-styles]")) return;
+  const element = document.createElement("style");
+  element.setAttribute("data-enigma-color-styles", "");
+  element.textContent = COLOR_STYLES;
+  document.head.prepend(element);
+}
+function clamp01(value) {
+  return value < 0 ? 0 : value > 1 ? 1 : value;
+}
+function ColorExtras({
+  input,
+  value,
+  format = "hex",
+  alpha = false,
+  swatches,
+  eyedropper = true,
+  placement = "auto",
+  styles = true,
+  locked = false,
+  labels
+}) {
+  useLayoutEffect(() => {
+    if (styles) injectStyles();
+  }, [styles]);
+  const anchorRef = useRef(null);
+  const panelRef = useRef(null);
+  const swatchRef = useRef(null);
+  const areaRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [side, setSide] = useState(placement === "top" ? "top" : "bottom");
+  const parsed = useMemo(() => parseColor(value), [value]);
+  const [hsv, setHsv] = useState(() => parsed ? rgbToHsv(parsed) : INITIAL);
+  useEffect(() => {
+    if (!parsed) return;
+    setHsv((current) => colorEquals(hsvToRgb(current), parsed) ? current : rgbToHsv(parsed, current.h));
+  }, [parsed]);
+  const rgb = useMemo(() => hsvToRgb(hsv), [hsv]);
+  const commit = useCallback((next) => {
+    setHsv(next);
+    if (input) writeValue(input, formatColor(hsvToRgb(next), format, { alpha }));
+  }, [input, format, alpha]);
+  useEffect(() => {
+    if (!input) return;
+    const onBlur = () => {
+      const colour = parseColor(input.value);
+      if (!colour) return;
+      const canonical = formatColor(colour, format, { alpha });
+      if (canonical !== input.value) writeValue(input, canonical);
+    };
+    input.addEventListener("blur", onBlur);
+    return () => input.removeEventListener("blur", onBlur);
+  }, [input, format, alpha]);
+  const setOpenState = useCallback((next) => {
+    setOpen((current) => current === next ? current : next);
+  }, []);
+  const close = useCallback((focusSwatch) => {
+    setOpenState(false);
+    if (focusSwatch) swatchRef.current?.focus();
+  }, [setOpenState]);
+  const place = useCallback(() => {
+    if (placement !== "auto") return setSide(placement);
+    const anchor = anchorRef.current?.getBoundingClientRect();
+    const panel = panelRef.current?.getBoundingClientRect();
+    if (!anchor || !panel) return;
+    const below = window.innerHeight - anchor.bottom;
+    setSide(below < panel.height + MARGIN && anchor.top > below ? "top" : "bottom");
+  }, [placement]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    place();
+  }, [open, place]);
+  useEffect(() => {
+    if (!open) return;
+    areaRef.current?.focus();
+    const inside = (target) => Boolean(anchorRef.current?.contains(target));
+    const onPointerDown = (event) => {
+      if (!inside(event.target)) setOpenState(false);
+    };
+    const onFocusIn = (event) => {
+      if (event.target === document.body || inside(event.target)) return;
+      setOpenState(false);
+    };
+    const onResize = () => place();
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("focusin", onFocusIn, true);
+    window.addEventListener("resize", onResize);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("focusin", onFocusIn, true);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open, place, setOpenState]);
+  const track = useCallback((event, onMove) => {
+    if (event.button !== 0) return;
+    const element = event.currentTarget;
+    event.preventDefault();
+    element.focus();
+    const apply = (clientX, clientY) => {
+      const rect = element.getBoundingClientRect();
+      onMove(
+        rect.width ? clamp01((clientX - rect.left) / rect.width) : 0,
+        rect.height ? clamp01((clientY - rect.top) / rect.height) : 0
+      );
+    };
+    const move = (moved) => apply(moved.clientX, moved.clientY);
+    const stop = () => {
+      element.removeEventListener("pointermove", move);
+      element.removeEventListener("pointerup", stop);
+      element.removeEventListener("pointercancel", stop);
+    };
+    element.addEventListener("pointermove", move);
+    element.addEventListener("pointerup", stop);
+    element.addEventListener("pointercancel", stop);
+    try {
+      element.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    apply(event.clientX, event.clientY);
+  }, []);
+  const areaKeys = useCallback((event) => {
+    const step = event.shiftKey ? STEP.coarse : STEP.fine;
+    const moves = {
+      ArrowLeft: [-step, 0],
+      ArrowRight: [step, 0],
+      ArrowUp: [0, step],
+      ArrowDown: [0, -step]
+    };
+    const move = moves[event.key];
+    if (!move) return;
+    event.preventDefault();
+    commit({ ...hsv, s: clamp01(hsv.s + move[0]), v: clamp01(hsv.v + move[1]) });
+  }, [commit, hsv]);
+  const railKeys = useCallback((event, kind) => {
+    const step = kind === "hue" ? event.shiftKey ? STEP.hueCoarse : STEP.hue : event.shiftKey ? STEP.coarse : STEP.fine;
+    const max = kind === "hue" ? 360 : 1;
+    const at = kind === "hue" ? hsv.h : hsv.a;
+    let next = at;
+    if (event.key === "ArrowLeft" || event.key === "ArrowDown") next = at - step;
+    else if (event.key === "ArrowRight" || event.key === "ArrowUp") next = at + step;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = max;
+    else return;
+    event.preventDefault();
+    const value2 = kind === "hue" ? (next % 360 + 360) % 360 : clamp01(next);
+    commit(kind === "hue" ? { ...hsv, h: value2 } : { ...hsv, a: value2 });
+  }, [commit, hsv]);
+  const dropper = eyedropper && typeof window !== "undefined" && "EyeDropper" in window;
+  const pick = useCallback(async () => {
+    const api = window.EyeDropper;
+    if (!api) return;
+    try {
+      const result = await new api().open();
+      const colour = parseColor(result.sRGBHex);
+      if (colour) commit(rgbToHsv({ ...colour, a: hsv.a }, hsv.h));
+    } catch {
+    }
+  }, [commit, hsv]);
+  const css = useMemo(() => formatColor(rgb, "hex", { alpha: true }), [rgb]);
+  const opaque = useMemo(() => toHex({ ...rgb, a: 1 }), [rgb]);
+  const text = labels ?? {};
+  const valueText = `${text.color ?? "Colour"} ${css}`;
+  const panelStyle = { "--enigma-color-hue": Math.round(hsv.h), "--enigma-color-opaque": opaque };
+  return /* @__PURE__ */ jsxs("span", { ref: anchorRef, "data-enigma-color": "", "data-open": open ? "" : void 0, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: swatchRef,
+        type: "button",
+        "data-enigma-color-swatch": "",
+        "data-enigma-color-checkers": "",
+        "data-invalid": parsed ? void 0 : "",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-label": text.open ?? "Pick a colour",
+        title: text.open ?? "Pick a colour",
+        disabled: locked,
+        onClick: () => open ? close(true) : setOpenState(true),
+        children: /* @__PURE__ */ jsx("span", { "data-enigma-color-fill": "", style: { background: parsed ? css : void 0 } })
+      }
+    ),
+    open && !locked && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        "data-enigma-color-panel": "",
+        "data-side": side,
+        role: "dialog",
+        "aria-label": text.panel ?? "Colour picker",
+        style: panelStyle,
+        onKeyDown: (event) => {
+          if (event.key !== "Escape") return;
+          event.stopPropagation();
+          close(true);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: areaRef,
+              "data-enigma-color-area": "",
+              role: "slider",
+              tabIndex: 0,
+              "aria-label": text.area ?? "Saturation and brightness",
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": Math.round(hsv.s * 100),
+              "aria-valuetext": `${Math.round(hsv.s * 100)}% saturation, ${Math.round(hsv.v * 100)}% brightness, ${valueText}`,
+              onKeyDown: areaKeys,
+              onPointerDown: (event) => track(event, (x, y) => commit({ ...hsv, s: x, v: 1 - y })),
+              children: /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.s * 100}%`, top: `${(1 - hsv.v) * 100}%` } })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { "data-enigma-color-controls": "", children: [
+            /* @__PURE__ */ jsx("span", { "data-enigma-color-preview": "", "data-enigma-color-checkers": "", children: /* @__PURE__ */ jsx("span", { "data-enigma-color-fill": "", style: { background: css } }) }),
+            dropper && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-enigma-color-eyedropper": "",
+                "aria-label": text.eyedropper ?? "Pick a colour from the screen",
+                title: text.eyedropper ?? "Pick a colour from the screen",
+                onClick: () => {
+                  void pick();
+                },
+                children: /* @__PURE__ */ jsx(EyedropperIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { "data-enigma-color-rails": "", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-enigma-color-rail": "hue",
+                  role: "slider",
+                  tabIndex: 0,
+                  "aria-label": text.hue ?? "Hue",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 360,
+                  "aria-valuenow": Math.round(hsv.h),
+                  "aria-valuetext": `${Math.round(hsv.h)} degrees`,
+                  onKeyDown: (event) => railKeys(event, "hue"),
+                  onPointerDown: (event) => track(event, (x) => commit({ ...hsv, h: x * 360 })),
+                  children: /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.h / 360 * 100}%` } })
+                }
+              ),
+              alpha && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-enigma-color-rail": "alpha",
+                  "data-enigma-color-checkers": "",
+                  role: "slider",
+                  tabIndex: 0,
+                  "aria-label": text.alpha ?? "Opacity",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": Math.round(hsv.a * 100),
+                  "aria-valuetext": `${Math.round(hsv.a * 100)}% opacity`,
+                  onKeyDown: (event) => railKeys(event, "alpha"),
+                  onPointerDown: (event) => track(event, (x) => commit({ ...hsv, a: x })),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { "data-enigma-color-gradient": "" }),
+                    /* @__PURE__ */ jsx("span", { "data-enigma-color-thumb": "", style: { left: `${hsv.a * 100}%` } })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          swatches && swatches.length > 0 && /* @__PURE__ */ jsx("div", { "data-enigma-color-swatches": "", role: "group", "aria-label": text.swatches ?? "Preset colours", children: swatches.map((preset) => {
+            const colour = parseColor(preset);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-enigma-color-preset": "",
+                "data-enigma-color-checkers": "",
+                style: { background: preset },
+                "aria-label": preset,
+                title: preset,
+                "aria-pressed": colourEqualsPreset(colour, css),
+                onClick: () => {
+                  if (colour) commit(rgbToHsv(alpha ? colour : { ...colour, a: 1 }, hsv.h));
+                }
+              },
+              preset
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+function colourEqualsPreset(preset, current) {
+  return colorEquals(preset, parseColor(current));
+}
+function EyedropperIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "m2 22 1-1h3l9-9" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 21v-3l9-9" }),
+    /* @__PURE__ */ jsx("path", { d: "m15 6 3-3a2.83 2.83 0 0 1 4 4l-3 3-1-1-4 4-3-3 4-4Z" })
+  ] });
+}
+
+export { ColorExtras };

package/dist/{index-DQNnohoo.d.ts → index-ZPvlf9vs.d.ts}

@@ -1,6 +1,6 @@
+import { C as ColorFormat, G as GeneratePasswordOptions, E as EstimateOptions, c as PasswordStrengthReport } from './color-D_rZ83Oc.js';
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 import { c as SearchOptions, F as FuseConstructor, b as SearchMatch } from './search-DYgqRp37.js';
-import { G as GeneratePasswordOptions, E as EstimateOptions, b as PasswordStrengthReport } from './password-C8lG4Zm9.js';
 
 /**
  * The prop shapes for `<Input>`, split from the component so the per-type chunks can import
@@ -131,14 +131,62 @@ interface SearchOnlyProps<Item = unknown> {
     clearable?: boolean;
     clearLabel?: string;
 }
+/** Which side of the field the picker's panel opens on. `auto` measures the room there is. */
+type ColorPanelPlacement = "auto" | "top" | "bottom";
+/** The picker's accessible names, for a UI that is not in English. */
+interface ColorLabels {
+    /** The swatch that opens the panel. */
+    open?: string;
+    /** The panel itself. */
+    panel?: string;
+    /** The saturation and brightness square. */
+    area?: string;
+    hue?: string;
+    alpha?: string;
+    eyedropper?: string;
+    swatches?: string;
+    /** The word before the colour in what a screen reader announces. Default "Colour". */
+    color?: string;
+}
+/** The half only a colour field has. */
+interface ColorOnlyProps {
+    type: "color";
+    /**
+     * How the picker writes the value back: `#3b82f6`, `rgb(59, 130, 246)` or an `hsl()`.
+     * Default hex. Whatever the format, every one of them is READ - a pasted `rgb()` in a hex
+     * field is understood and normalized on blur rather than rejected.
+     */
+    format?: ColorFormat;
+    /**
+     * The opacity rail, and the alpha channel in the value. OFF by default: it turns
+     * `#3b82f6` into `#3b82f680`, which is not what a column typed as a 7-character hex, or a
+     * `<input type="color">` on the server side, is expecting.
+     */
+    alpha?: boolean;
+    /** Preset colours under the rails - a brand palette, or the last few that were used. */
+    swatches?: readonly string[];
+    /**
+     * The screen eyedropper, where the browser has one (Chromium today). Default true, and
+     * feature-detected: the button is not rendered at all where the API is missing.
+     */
+    eyedropper?: boolean;
+    /** Which side the panel opens on. Default `auto`, which flips near the bottom of the window. */
+    placement?: ColorPanelPlacement;
+    /**
+     * The panel's baseline stylesheet, injected once. Default true, and the one place this
+     * package ships a look - see `color-styles.ts` for why a picker cannot be unstyled.
+     */
+    styles?: boolean;
+    colorLabels?: ColorLabels;
+}
 /** Everything else: one `<input>`, its native props, and no extras to bundle. */
 interface PlainOnlyProps {
-    type?: Exclude<InputType, "password" | "search">;
+    type?: Exclude<InputType, "password" | "search" | "color">;
 }
-type InputProps<Item = unknown> = InputBaseProps & (PasswordOnlyProps | SearchOnlyProps<Item> | PlainOnlyProps);
+type InputProps<Item = unknown> = InputBaseProps & (PasswordOnlyProps | SearchOnlyProps<Item> | ColorOnlyProps | PlainOnlyProps);
 
 declare const Input: <Item = unknown>(props: InputProps<Item> & {
     ref?: React.Ref<HTMLInputElement>;
 }) => ReactNode;
 
-export { type BreachChecker as B, type FieldAction as F, Input as I, type PasswordOnlyProps as P, type SearchOnlyProps as S, type BreachState as a, type BreachStatus as b, type InputBaseProps as c, type InputProps as d, type InputType as e, type PasswordStrengthClassNames as f, type PlainOnlyProps as g };
+export { type BreachChecker as B, type ColorLabels as C, type FieldAction as F, Input as I, type PasswordOnlyProps as P, type SearchOnlyProps as S, type BreachState as a, type BreachStatus as b, type ColorOnlyProps as c, type ColorPanelPlacement as d, type InputBaseProps as e, type InputProps as f, type InputType as g, type PasswordStrengthClassNames as h, type PlainOnlyProps as i };