@enigmax/primitives 0.22.0 → 0.24.0

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-BHpOZncw.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-BD9-5O5U.js';
-import { G as GeneratePasswordOptions, E as EstimateOptions, b as PasswordStrengthReport } from './password-C8lG4Zm9.js';
+import { c as SearchOptions, F as FuseConstructor, b as SearchMatch } from './search-DYgqRp37.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 };

package/dist/index.d.ts

@@ -1,13 +1,17 @@
 export { M as MarqueeHover, a as MarqueeInstance, b as MarqueeOptions, c as createMarquee } from './marquee-CJ3Uwy3E.js';
 export { I as InputAction, a as InputActionState, b as InputIcon, c as InputInstance, d as InputOptions, e as createInput } from './input-BwXjFenq.js';
-export { F as FuseConstructor, a as FuseLike, S as SearchInstance, b as SearchMatch, c as SearchOptions, d as createSearch, s as subsequenceMatcher } from './search-BD9-5O5U.js';
+export { F as FuseConstructor, a as FuseLike, S as SearchInstance, b as SearchMatch, c as SearchOptions, d as createSearch, s as shortenQuery, e as subsequenceMatcher } from './search-DYgqRp37.js';
 export { B as ButtonCooldown, a as ButtonElement, b as ButtonInstance, c as ButtonOptions, d as ButtonState, e as createButton } from './button-CaXaqG_K.js';
-export { E as EstimateOptions, G as GeneratePasswordOptions, P as PasswordAlphabet, a as PasswordScore, b as PasswordStrengthReport, e as estimatePasswordStrength, g as generatePassword } from './password-C8lG4Zm9.js';
+export { C as ColorFormat, E as EstimateOptions, F as FormatColorOptions, G as GeneratePasswordOptions, H as Hsl, a as Hsv, P as PasswordAlphabet, b as PasswordScore, c as PasswordStrengthReport, R as Rgb, d as colorEquals, e as estimatePasswordStrength, f as formatColor, g as generatePassword, h as hslToRgb, i as hsvToRgb, p as parseColor, r as rgbToHsl, j as rgbToHsv, t as toHex } from './color-D_rZ83Oc.js';
 export { N as Notification, a as NotificationAction, b as NotificationInput, c as NotificationTone, d as Notifications, e as NotificationsOptions, P as PromiseMessages, f as createNotifications } from './notifications-BpVV6sel.js';
 export { N as NetworkMonitor, a as NetworkState, S as SERVER_NETWORK_STATE, c as createNetworkMonitor } from './network-D2LsBG_k.js';
 export { R as RelativeTimeFormat, a as RelativeTimeOptions, b as RelativeTimePrecision, c as RelativeTimeStyle, d as RelativeTimeTense, e as RelativeTimeView, f as ensureZone, n as normalizeDate, p as parseDuration, r as relativeTimeAttributes, g as relativeTimeView } from './relative-time-YpRTG7YH.js';
 export { F as FLAG_CDN, a as FLAG_RATIO, b as FlagConfig, c as FlagFormat, d as FlagOptions, e as FlagShape, f as FlagSource, g as FlagView, h as configureFlags, i as flagAttributes, j as flagConfig, k as flagName, l as flagSrc, m as flagView, n as normalizeFlagCode, r as resetFlagConfig } from './flags-BQU1V9rE.js';
 export { P as PaletteKey, a as PositionedRow, R as RecentEntry, b as RecentStore, c as RecentStoreOptions, d as RowGroup, e as createRecentStore, g as groupRows, i as isPaletteShortcut, m as moveActive, r as recentKey, s as shortcutLabel } from './palette-D7iuQh_T.js';
+export { S as SELECT_SEARCH_KEYS, a as SelectInstance, b as SelectMoveKey, c as SelectOption, d as SelectOptions, e as SelectState, f as createSelect } from './select-ClSy-J1f.js';
+export { C as CLIPBOARD_PREFIX, a as CONTEXT_MENU_SEARCH_KEYS, b as ClipboardAction, c as ClipboardMenuLabels, d as ClipboardMenuOptions, e as ClipboardTarget, f as ContextMenuAction, g as ContextMenuEntry, h as ContextMenuInstance, i as ContextMenuLabel, j as ContextMenuLevel, k as ContextMenuMoveKey, l as ContextMenuOptions, m as ContextMenuPoint, n as ContextMenuSeparator, o as ContextMenuState, p as clipboardAction, q as clipboardEntries, r as clipboardHasText, s as createContextMenu, t as inspectClipboardTarget, u as isAction, v as performClipboardAction } from './clipboard-menu-B_ouitfS.js';
+export { D as DEFAULT_SELECTION_SHORTCUTS, S as SelectionClickModifiers, a as SelectionCommand, b as SelectionCommandEvent, c as SelectionCommandName, d as SelectionInstance, e as SelectionOptions, f as SelectionShortcuts, g as SelectionState, h as createSelection } from './selection-B_pmzHpy.js';
+export { S as Shortcut, a as ShortcutEvent, b as ShortcutSpec, T as TYPEAHEAD_MS, c as TypeaheadState, d as TypeaheadStep, i as isApplePlatform, m as matchesShortcut, p as parseShortcut, s as shortcutList, e as shortcutText, f as shortcutTokens, t as typeaheadStep } from './keys-D2zJs1uB.js';
 
 /**
  * The icon shapes both renderers draw.

package/dist/index.js

@@ -1,11 +1,16 @@
 export { createInput } from './chunk-KJINGUQN.js';
+export { ensureZone, normalizeDate, parseDuration, relativeTimeAttributes, relativeTimeView } from './chunk-IXVMRVD4.js';
 export { estimatePasswordStrength, generatePassword } from './chunk-HC2ME5PU.js';
+export { colorEquals, formatColor, hslToRgb, hsvToRgb, parseColor, rgbToHsl, rgbToHsv, toHex } from './chunk-S2FPN5ID.js';
+export { CLIPBOARD_PREFIX, CONTEXT_MENU_SEARCH_KEYS, clipboardAction, clipboardEntries, clipboardHasText, createContextMenu, inspectClipboardTarget, isAction, performClipboardAction } from './chunk-Z3VDE7OA.js';
+export { DEFAULT_SELECTION_SHORTCUTS, createSelection } from './chunk-WSQC3PCC.js';
+export { createButton } from './chunk-MMQPZGSU.js';
 export { FLAG_CDN, FLAG_RATIO, configureFlags, flagAttributes, flagConfig, flagName, flagSrc, flagView, normalizeFlagCode, resetFlagConfig } from './chunk-LMZJBOZG.js';
+export { createNotifications } from './chunk-SNYUBXWQ.js';
 export { createMarquee } from './chunk-UOSSNUSC.js';
 export { SERVER_NETWORK_STATE, createNetworkMonitor } from './chunk-2QFTRNAZ.js';
-export { createNotifications } from './chunk-SNYUBXWQ.js';
-export { ensureZone, normalizeDate, parseDuration, relativeTimeAttributes, relativeTimeView } from './chunk-IXVMRVD4.js';
 export { INPUT_ICON_PATHS, iconMarkup } from './chunk-F25CGNQC.js';
+export { SELECT_SEARCH_KEYS, createSelect } from './chunk-NONGREXC.js';
+export { TYPEAHEAD_MS, isApplePlatform, matchesShortcut, parseShortcut, shortcutList, shortcutText, shortcutTokens, typeaheadStep } from './chunk-4VUHQFAT.js';
 export { createRecentStore, groupRows, isPaletteShortcut, moveActive, recentKey, shortcutLabel } from './chunk-DTWZDONY.js';
-export { createSearch, subsequenceMatcher } from './chunk-D5A2ZMAG.js';
-export { createButton } from './chunk-MMQPZGSU.js';
+export { createSearch, shortenQuery, subsequenceMatcher } from './chunk-4ZPMP47J.js';