@viax.io/uxm 4.36.0

package/dist/ui/color-input/color-input-preview.js

@@ -0,0 +1,74 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { ColorInput, ColorInputPopover } from "../../ui/index.js";
+function buildVars(styles) {
+  return {
+    "--uxm-color-input-bg": styles.backgroundColor,
+    "--uxm-color-input-border-color": styles.borderColor,
+    "--uxm-color-input-color": styles.color,
+    "--uxm-color-input-border-radius": `${styles.borderRadius}px`,
+    "--uxm-color-input-padding-x": `${styles.paddingX}px`,
+    "--uxm-color-input-padding-y": `${styles.paddingY}px`,
+    "--uxm-color-input-font-size": `${styles.fontSize}px`,
+    "--uxm-color-input-area-height": `${styles.areaHeight}px`,
+    "--uxm-color-input-hover-border": styles.hoverBorder,
+    "--uxm-color-input-focus-border": styles.focusBorder,
+    "--uxm-color-input-focus-ring": styles.focusRing,
+    "--uxm-color-input-error-border": styles.errorBorder,
+    "--uxm-color-input-error-color": styles.errorColor,
+    "--uxm-color-input-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-color-input-panel-bg": styles.backgroundColor,
+    "--uxm-color-input-panel-border": styles.borderColor
+  };
+}
+function ColorInputPreview({ styles, variants }) {
+  const variant = variants.variant ?? "inline";
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ jsx(
+    ColorInputDemo,
+    {
+      variant,
+      state,
+      styles
+    },
+    `${variant}-${state}`
+  );
+}
+function ColorInputDemo({
+  variant,
+  state,
+  styles
+}) {
+  const [color, setColor] = useState("#4f46e5");
+  const [open, setOpen] = useState(variant === "popover" && state !== "disabled");
+  const cssVars = buildVars(styles);
+  const isDisabled = state === "disabled";
+  const isError = state === "error";
+  const forcedClass = cn(
+    state === "hover" && "uxm-color-input--state-hover",
+    state === "focus" && "uxm-color-input--state-focus"
+  );
+  const shared = {
+    value: color,
+    onChange: setColor,
+    disabled: isDisabled,
+    error: isError ? "Enter a valid color." : void 0
+  };
+  if (variant === "popover") {
+    return /* @__PURE__ */ jsx("div", { style: cssVars, children: /* @__PURE__ */ jsx(
+      ColorInputPopover,
+      {
+        ...shared,
+        open,
+        onOpenChange: setOpen,
+        triggerLabel: "Choose color"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { style: cssVars, children: /* @__PURE__ */ jsx(ColorInput, { ...shared, className: forcedClass || void 0 }) });
+}
+export {
+  ColorInputPreview
+};
+//# sourceMappingURL=color-input-preview.js.map

package/dist/ui/color-input/color-input-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/color-input/color-input-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { ColorInput, ColorInputPopover } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project the registry knobs onto the `--uxm-color-input-*` custom props the\n * SCSS reads. Set on the demo wrapper so they cascade into the inline panel\n * and the field chrome.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-color-input-bg': styles.backgroundColor as string,\n    '--uxm-color-input-border-color': styles.borderColor as string,\n    '--uxm-color-input-color': styles.color as string,\n    '--uxm-color-input-border-radius': `${styles.borderRadius}px`,\n    '--uxm-color-input-padding-x': `${styles.paddingX}px`,\n    '--uxm-color-input-padding-y': `${styles.paddingY}px`,\n    '--uxm-color-input-font-size': `${styles.fontSize}px`,\n    '--uxm-color-input-area-height': `${styles.areaHeight}px`,\n    '--uxm-color-input-hover-border': styles.hoverBorder as string,\n    '--uxm-color-input-focus-border': styles.focusBorder as string,\n    '--uxm-color-input-focus-ring': styles.focusRing as string,\n    '--uxm-color-input-error-border': styles.errorBorder as string,\n    '--uxm-color-input-error-color': styles.errorColor as string,\n    '--uxm-color-input-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-color-input-panel-bg': styles.backgroundColor as string,\n    '--uxm-color-input-panel-border': styles.borderColor as string,\n  } as CSSProperties;\n}\n\nexport function ColorInputPreview({ styles, variants }: PreviewProps) {\n  const variant = (variants.variant as string) ?? 'inline';\n  const state = (variants.state as string) ?? 'default';\n  return (\n    <ColorInputDemo\n      key={`${variant}-${state}`}\n      variant={variant}\n      state={state}\n      styles={styles}\n    />\n  );\n}\n\n// Keyed on variant+state in the parent so switching either knob remounts and\n// re-seeds the color — no effect needed to sync. The representation (HEX / RGB\n// / RGBA / HSL) is switched live from the component's own format select, and\n// `onChange` always returns hex (the `outputFormat` default) regardless.\nfunction ColorInputDemo({\n  variant,\n  state,\n  styles,\n}: {\n  variant: string;\n  state: string;\n  styles: Styles;\n}) {\n  const [color, setColor] = useState('#4f46e5');\n  const [open, setOpen] = useState(variant === 'popover' && state !== 'disabled');\n\n  const cssVars = buildVars(styles);\n  const isDisabled = state === 'disabled';\n  const isError = state === 'error';\n\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-color-input--state-hover',\n    state === 'focus' && 'uxm-color-input--state-focus',\n  );\n\n  const shared = {\n    value: color,\n    onChange: setColor,\n    disabled: isDisabled,\n    error: isError ? 'Enter a valid color.' : undefined,\n  };\n\n  if (variant === 'popover') {\n    return (\n      <div style={cssVars}>\n        <ColorInputPopover\n          {...shared}\n          open={open}\n          onOpenChange={setOpen}\n          triggerLabel=\"Choose color\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div style={cssVars}>\n      <ColorInput {...shared} className={forcedClass || undefined} />\n    </div>\n  );\n}\n"],"mappings":"AAuCI;AAvCJ,SAAS,gBAAoC;AAE7C,SAAS,UAAU;AAEnB,SAAS,YAAY,yBAAyB;AAS9C,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,wBAAwB,OAAO;AAAA,IAC/B,kCAAkC,OAAO;AAAA,IACzC,2BAA2B,OAAO;AAAA,IAClC,mCAAmC,GAAG,OAAO,YAAY;AAAA,IACzD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,iCAAiC,GAAG,OAAO,UAAU;AAAA,IACrD,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,OAAO;AAAA,IACzC,gCAAgC,OAAO;AAAA,IACvC,kCAAkC,OAAO;AAAA,IACzC,iCAAiC,OAAO;AAAA,IACxC,sCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,8BAA8B,OAAO;AAAA,IACrC,kCAAkC,OAAO;AAAA,EAC3C;AACF;AAEO,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,UAAW,SAAS,WAAsB;AAChD,QAAM,QAAS,SAAS,SAAoB;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAHK,GAAG,OAAO,IAAI,KAAK;AAAA,EAI1B;AAEJ;AAMA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,SAAS;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,YAAY,aAAa,UAAU,UAAU;AAE9E,QAAM,UAAU,UAAU,MAAM;AAChC,QAAM,aAAa,UAAU;AAC7B,QAAM,UAAU,UAAU;AAE1B,QAAM,cAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO,UAAU,yBAAyB;AAAA,EAC5C;AAEA,MAAI,YAAY,WAAW;AACzB,WACE,oBAAC,SAAI,OAAO,SACV;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,cAAc;AAAA,QACd,cAAa;AAAA;AAAA,IACf,GACF;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAI,OAAO,SACV,8BAAC,cAAY,GAAG,QAAQ,WAAW,eAAe,QAAW,GAC/D;AAEJ;","names":[]}

package/dist/ui/color-input/color-input.cjs

@@ -0,0 +1,536 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_input_exports = {};
+__export(color_input_exports, {
+  ColorInput: () => ColorInput,
+  ColorInputPopover: () => ColorInputPopover
+});
+module.exports = __toCommonJS(color_input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_contrast = require("../../lib/contrast.cjs");
+var import_field_error = require("../field-error/index.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_input = require("../input/index.cjs");
+var import_popover = require("../popover/index.cjs");
+var import_color_model = require("./color-model.cjs");
+const DEFAULT_FORMATS = ["hex", "rgb", "rgba", "hsl"];
+const FORMAT_LABELS = {
+  hex: "HEX",
+  rgb: "RGB",
+  rgba: "RGBA",
+  hsl: "HSL"
+};
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+function getEyeDropper() {
+  if (typeof window === "undefined") return null;
+  return window.EyeDropper ?? null;
+}
+function ChannelInput({
+  label,
+  short,
+  value,
+  min,
+  max,
+  disabled,
+  onCommit,
+  onEnter,
+  onEsc
+}) {
+  const [draft, setDraft] = (0, import_react.useState)(null);
+  const shown = draft ?? String(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "uxm-color-input__channel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "text",
+        inputMode: "numeric",
+        className: "uxm-color-input__channel-field",
+        "aria-label": label,
+        value: shown,
+        disabled,
+        spellCheck: false,
+        autoComplete: "off",
+        onChange: (e) => {
+          const raw = e.target.value;
+          setDraft(raw);
+          const n = Number(raw);
+          if (raw.trim() !== "" && !Number.isNaN(n)) onCommit(clamp(n, min, max));
+        },
+        onFocus: () => setDraft(String(value)),
+        onBlur: () => setDraft(null),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            const n = Number(draft ?? value);
+            if (!Number.isNaN(n)) onCommit(clamp(n, min, max));
+            onEnter();
+          } else if (e.key === "Escape") {
+            setDraft(null);
+            onEsc();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-color-input__channel-label", "aria-hidden": "true", children: short })
+  ] });
+}
+const DEFAULT_LABELS = {
+  area: "Color",
+  areaValueText: (s, v) => `Saturation ${s}%, Brightness ${v}%`,
+  hue: "Hue",
+  alpha: "Opacity",
+  eyedropper: "Pick color from screen",
+  format: "Color format",
+  hex: "Hex color value"
+};
+function ColorInput({
+  value,
+  defaultValue,
+  onChange,
+  formats,
+  outputFormat = "hex",
+  onEnter,
+  onEsc,
+  alpha = true,
+  eyedropper = true,
+  disabled = false,
+  error,
+  labels,
+  className,
+  style,
+  ...rest
+}) {
+  const isControlled = value !== void 0;
+  const l = { ...DEFAULT_LABELS, ...labels };
+  const [hsva, setHsva] = (0, import_react.useState)(() => {
+    const parsed = (0, import_color_model.parseColorString)((isControlled ? value : defaultValue) ?? "#000000");
+    return parsed ? (0, import_color_model.rgbaToHsva)(parsed) : { h: 0, s: 0, v: 0, a: 1 };
+  });
+  const availableFormats = formats && formats.length > 0 ? formats : DEFAULT_FORMATS;
+  const [displayFormat, setDisplayFormat] = (0, import_react.useState)(
+    () => availableFormats.includes("hex") ? "hex" : availableFormats[0]
+  );
+  const [hexDraft, setHexDraft] = (0, import_react.useState)(null);
+  const [hexInvalid, setHexInvalid] = (0, import_react.useState)(false);
+  const currentRgba = (0, import_color_model.hsvaToRgba)(hsva);
+  const resolvedOutput = outputFormat;
+  const lastEmittedRef = (0, import_react.useRef)(isControlled ? value ?? null : null);
+  (0, import_react.useEffect)(() => {
+    if (!isControlled) return;
+    if (value === lastEmittedRef.current) return;
+    const incoming = (0, import_color_model.parseColorString)(value ?? "");
+    if (!incoming) return;
+    setHsva((0, import_color_model.rgbaToHsva)(incoming));
+  }, [value, isControlled]);
+  const emit = (next, opts) => {
+    setHsva(next);
+    const out = (0, import_color_model.formatColor)((0, import_color_model.hsvaToRgba)(next), resolvedOutput);
+    lastEmittedRef.current = out;
+    onChange?.(out);
+    if (opts?.enter) onEnter?.(out);
+  };
+  const satRef = (0, import_react.useRef)(null);
+  const updateSaturation = (clientX, clientY) => {
+    const el = satRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const s = clamp((clientX - rect.left) / rect.width, 0, 1) * 100;
+    const v = (1 - clamp((clientY - rect.top) / rect.height, 0, 1)) * 100;
+    emit({ ...hsva, s, v });
+  };
+  const handleSatPointerDown = (e) => {
+    if (disabled) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    updateSaturation(e.clientX, e.clientY);
+  };
+  const handleSatPointerMove = (e) => {
+    if (disabled || e.buttons !== 1) return;
+    updateSaturation(e.clientX, e.clientY);
+  };
+  const handleSatKeyDown = (e) => {
+    if (disabled) return;
+    const step = e.shiftKey ? 10 : 1;
+    let { s, v } = hsva;
+    switch (e.key) {
+      case "ArrowRight":
+        s = clamp(s + step, 0, 100);
+        break;
+      case "ArrowLeft":
+        s = clamp(s - step, 0, 100);
+        break;
+      case "ArrowUp":
+        v = clamp(v + step, 0, 100);
+        break;
+      case "ArrowDown":
+        v = clamp(v - step, 0, 100);
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    emit({ ...hsva, s, v });
+  };
+  const hueRef = (0, import_react.useRef)(null);
+  const updateHue = (clientX) => {
+    const el = hueRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    emit({ ...hsva, h: clamp((clientX - rect.left) / rect.width, 0, 1) * 360 });
+  };
+  const handleHuePointerDown = (e) => {
+    if (disabled) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    updateHue(e.clientX);
+  };
+  const handleHuePointerMove = (e) => {
+    if (disabled || e.buttons !== 1) return;
+    updateHue(e.clientX);
+  };
+  const handleHueKeyDown = (e) => {
+    if (disabled) return;
+    const step = e.shiftKey ? 10 : 1;
+    let h = hsva.h;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") h = clamp(h + step, 0, 360);
+    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") h = clamp(h - step, 0, 360);
+    else if (e.key === "Home") h = 0;
+    else if (e.key === "End") h = 360;
+    else return;
+    e.preventDefault();
+    emit({ ...hsva, h });
+  };
+  const alphaRef = (0, import_react.useRef)(null);
+  const updateAlpha = (clientX) => {
+    const el = alphaRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    emit({ ...hsva, a: clamp((clientX - rect.left) / rect.width, 0, 1) });
+  };
+  const handleAlphaPointerDown = (e) => {
+    if (disabled) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    updateAlpha(e.clientX);
+  };
+  const handleAlphaPointerMove = (e) => {
+    if (disabled || e.buttons !== 1) return;
+    updateAlpha(e.clientX);
+  };
+  const handleAlphaKeyDown = (e) => {
+    if (disabled) return;
+    const step = e.shiftKey ? 0.1 : 0.01;
+    let a = hsva.a;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") a = clamp(a + step, 0, 1);
+    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") a = clamp(a - step, 0, 1);
+    else if (e.key === "Home") a = 0;
+    else if (e.key === "End") a = 1;
+    else return;
+    e.preventDefault();
+    emit({ ...hsva, a });
+  };
+  const emitEnter = () => onEnter?.((0, import_color_model.formatColor)(currentRgba, resolvedOutput));
+  const emitEsc = () => onEsc?.();
+  const hexShown = hexDraft ?? (0, import_color_model.formatColor)(currentRgba, "hex");
+  const commitHex = () => {
+    if (hexDraft === null) return true;
+    const parsed = (0, import_color_model.parseColorString)(hexDraft);
+    if (!parsed) {
+      setHexInvalid(true);
+      return false;
+    }
+    setHexInvalid(false);
+    emit((0, import_color_model.rgbaToHsva)(parsed));
+    return true;
+  };
+  const setRgbChannel = (patch) => emit((0, import_color_model.rgbaToHsva)({ ...currentRgba, ...patch }));
+  const hslNow = (0, import_contrast.rgbToHsl)(currentRgba);
+  const commitHsl = (patch) => {
+    const next = { h: hsva.h, s: hslNow.s, l: hslNow.l, ...patch };
+    const rgb = (0, import_contrast.hslToRgb)(next);
+    const hsvaNext = (0, import_color_model.rgbaToHsva)({ ...rgb, a: currentRgba.a });
+    emit({ ...hsvaNext, h: next.h });
+  };
+  const EyeDropperCtor = getEyeDropper();
+  const showEyedropper = eyedropper && EyeDropperCtor !== null;
+  const handleEyeDropper = async () => {
+    if (!EyeDropperCtor || disabled) return;
+    try {
+      const result = await new EyeDropperCtor().open();
+      const parsed = (0, import_color_model.parseColorString)(result.sRGBHex);
+      if (parsed) emit((0, import_color_model.rgbaToHsva)({ ...parsed, a: hsva.a }));
+    } catch {
+    }
+  };
+  const showFormat = availableFormats.length > 1;
+  const cssVars = {
+    "--uxm-color-input-hue": hsva.h,
+    "--uxm-color-input-solid": `rgb(${Math.round(currentRgba.r)}, ${Math.round(currentRgba.g)}, ${Math.round(currentRgba.b)})`,
+    "--uxm-color-input-value": (0, import_color_model.formatColor)(currentRgba, "rgba"),
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_helpers.cn)(
+        "uxm-color-input",
+        disabled && "uxm-color-input--disabled",
+        error && "uxm-color-input--error",
+        !alpha && "uxm-color-input--no-alpha",
+        className
+      ),
+      style: cssVars,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ref: satRef,
+            className: "uxm-color-input__saturation",
+            role: "slider",
+            "aria-label": l.area,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(hsva.s),
+            "aria-valuetext": l.areaValueText(Math.round(hsva.s), Math.round(hsva.v)),
+            "aria-disabled": disabled || void 0,
+            tabIndex: disabled ? -1 : 0,
+            onPointerDown: handleSatPointerDown,
+            onPointerMove: handleSatPointerMove,
+            onKeyDown: handleSatKeyDown,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: "uxm-color-input__saturation-thumb",
+                style: { left: `${hsva.s}%`, top: `${100 - hsva.v}%` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-color-input__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-color-input__sliders", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ref: hueRef,
+                className: "uxm-color-input__hue",
+                role: "slider",
+                "aria-label": l.hue,
+                "aria-valuemin": 0,
+                "aria-valuemax": 360,
+                "aria-valuenow": Math.round(hsva.h),
+                "aria-disabled": disabled || void 0,
+                tabIndex: disabled ? -1 : 0,
+                onPointerDown: handleHuePointerDown,
+                onPointerMove: handleHuePointerMove,
+                onKeyDown: handleHueKeyDown,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-color-input__track-thumb", style: { left: `${hsva.h / 360 * 100}%` } })
+              }
+            ),
+            alpha && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ref: alphaRef,
+                className: "uxm-color-input__alpha",
+                role: "slider",
+                "aria-label": l.alpha,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round(hsva.a * 100),
+                "aria-disabled": disabled || void 0,
+                tabIndex: disabled ? -1 : 0,
+                onPointerDown: handleAlphaPointerDown,
+                onPointerMove: handleAlphaPointerMove,
+                onKeyDown: handleAlphaKeyDown,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-color-input__track-thumb", style: { left: `${hsva.a * 100}%` } })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-color-input__swatch", "aria-hidden": "true" }),
+          showEyedropper && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "uxm-color-input__eyedropper",
+              "aria-label": l.eyedropper,
+              disabled,
+              onClick: handleEyeDropper,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "eyedropper", size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-color-input__controls", children: [
+          showFormat && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input.Select,
+            {
+              className: "uxm-color-input__format",
+              "aria-label": l.format,
+              value: displayFormat,
+              disabled,
+              onChange: (e) => {
+                setDisplayFormat(e.target.value);
+                setHexDraft(null);
+                setHexInvalid(false);
+              },
+              children: availableFormats.map((f) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: f, children: FORMAT_LABELS[f] }, f))
+            }
+          ),
+          displayFormat === "hex" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "text",
+              className: (0, import_helpers.cn)("uxm-color-input__field", hexInvalid && "uxm-color-input__field--invalid"),
+              value: hexShown,
+              disabled,
+              "aria-label": l.hex,
+              "aria-invalid": hexInvalid || void 0,
+              spellCheck: false,
+              autoComplete: "off",
+              onChange: (e) => setHexDraft(e.target.value),
+              onFocus: () => {
+                setHexDraft((0, import_color_model.formatColor)(currentRgba, "hex"));
+                setHexInvalid(false);
+              },
+              onBlur: () => {
+                commitHex();
+                setHexDraft(null);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  if (commitHex()) emitEnter();
+                } else if (e.key === "Escape") {
+                  setHexDraft(null);
+                  setHexInvalid(false);
+                  emitEsc();
+                }
+              }
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-color-input__channels", children: [
+            (displayFormat === "rgb" || displayFormat === "rgba") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannelInput, { label: "Red", short: "R", value: Math.round(currentRgba.r), min: 0, max: 255, disabled, onCommit: (n) => setRgbChannel({ r: n }), onEnter: emitEnter, onEsc: emitEsc }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannelInput, { label: "Green", short: "G", value: Math.round(currentRgba.g), min: 0, max: 255, disabled, onCommit: (n) => setRgbChannel({ g: n }), onEnter: emitEnter, onEsc: emitEsc }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannelInput, { label: "Blue", short: "B", value: Math.round(currentRgba.b), min: 0, max: 255, disabled, onCommit: (n) => setRgbChannel({ b: n }), onEnter: emitEnter, onEsc: emitEsc }),
+              displayFormat === "rgba" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannelInput, { label: "Alpha", short: "A", value: Math.round(currentRgba.a * 100), min: 0, max: 100, disabled, onCommit: (n) => emit({ ...hsva, a: n / 100 }), onEnter: emitEnter, onEsc: emitEsc })
+            ] }),
+            displayFormat === "hsl" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannelInput, { label: "Hue", short: "H", value: Math.round(hsva.h), min: 0, max: 360, disabled, onCommit: (n) => commitHsl({ h: n }), onEnter: emitEnter, onEsc: emitEsc }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannelInput, { label: "Saturation", short: "S", value: Math.round(hslNow.s), min: 0, max: 100, disabled, onCommit: (n) => commitHsl({ s: n }), onEnter: emitEnter, onEsc: emitEsc }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannelInput, { label: "Lightness", short: "L", value: Math.round(hslNow.l), min: 0, max: 100, disabled, onCommit: (n) => commitHsl({ l: n }), onEnter: emitEnter, onEsc: emitEsc })
+            ] })
+          ] })
+        ] }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { className: "uxm-color-input__error-message", children: error })
+      ]
+    }
+  );
+}
+ColorInput.hasError = true;
+function ColorInputPopover({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom-start",
+  triggerLabel = "Choose color",
+  value,
+  defaultValue,
+  onChange,
+  onEnter,
+  onEsc,
+  formats,
+  outputFormat = "hex",
+  alpha,
+  eyedropper,
+  disabled,
+  error,
+  className,
+  style,
+  ...rest
+}) {
+  const triggerRef = (0, import_react.useRef)(null);
+  const isOpenControlled = open !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react.useState)(defaultOpen);
+  const isOpen = isOpenControlled ? open : uncontrolledOpen;
+  const setOpen = (next) => {
+    if (!isOpenControlled) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  const isColorControlled = value !== void 0;
+  const [internalColor, setInternalColor] = (0, import_react.useState)(defaultValue ?? "#000000");
+  const currentColor = isColorControlled ? value : internalColor;
+  const handleChange = (color) => {
+    if (!isColorControlled) setInternalColor(color);
+    onChange?.(color);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ...rest,
+        ref: triggerRef,
+        type: "button",
+        className: (0, import_helpers.cn)("uxm-color-input-popover__trigger", className),
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-label": `${triggerLabel}: ${currentColor}`,
+        disabled,
+        style: { "--uxm-color-input-value": currentColor, ...style },
+        onClick: () => setOpen(!isOpen)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_popover.Popover,
+      {
+        open: isOpen,
+        onOpenChange: setOpen,
+        anchor: triggerRef,
+        placement,
+        role: "dialog",
+        "aria-label": triggerLabel,
+        className: "uxm-color-input-popover__panel",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ColorInput,
+          {
+            value: currentColor,
+            onChange: handleChange,
+            onEnter: (color) => {
+              onEnter?.(color);
+              setOpen(false);
+            },
+            onEsc: () => {
+              onEsc?.();
+              setOpen(false);
+            },
+            formats,
+            outputFormat,
+            alpha,
+            eyedropper,
+            error
+          }
+        )
+      }
+    )
+  ] });
+}
+ColorInputPopover.hasError = true;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorInput,
+  ColorInputPopover
+});
+//# sourceMappingURL=color-input.cjs.map