@fab1o978/react-ui 0.1.7 → 0.2.0

package/dist/index.cjs

@@ -651,6 +651,7 @@ var SliderControl = ({
   step = 1,
   onChange,
   showTooltip = "drag",
+  showPercentage = false,
   leftIcon,
   rightIcon,
   railBackground,
@@ -744,7 +745,8 @@ var SliderControl = ({
     [disabled, step, min, max, value, setValue]
   );
   const tooltipVisible = showTooltip === "always" || showTooltip === "drag" && (isDragging || isFocused);
-  const displayValue = `${Math.round(value)}%`;
+  const decimals = step < 1 ? Math.ceil(-Math.log10(step)) : 0;
+  const displayValue = showPercentage ? `${Math.round((value - min) / (max - min) * 100)}%` : value.toFixed(decimals);
   const tooltipOffset = `calc(${pct * 100}% + ${(0.5 - pct) * 20}px)`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -4693,6 +4695,593 @@ var PageBreakButton = () => {
   );
 };
 
+// src/components/ColorWheel/ColorWheel.module.scss
+var ColorWheel_module_default = {
+  root: "ColorWheel_module_root",
+  recents: "ColorWheel_module_recents",
+  chipWrap: "ColorWheel_module_chipWrap",
+  chip: "ColorWheel_module_chip",
+  chipRemove: "ColorWheel_module_chipRemove",
+  picker: "ColorWheel_module_picker",
+  glow: "ColorWheel_module_glow",
+  modeToggle: "ColorWheel_module_modeToggle",
+  modePill: "ColorWheel_module_modePill",
+  modeButton: "ColorWheel_module_modeButton",
+  active: "ColorWheel_module_active",
+  stage: "ColorWheel_module_stage",
+  stageShadow: "ColorWheel_module_stageShadow",
+  ring: "ColorWheel_module_ring",
+  hueHandlePivot: "ColorWheel_module_hueHandlePivot",
+  hueHandle: "ColorWheel_module_hueHandle",
+  alphaArcShadowWrap: "ColorWheel_module_alphaArcShadowWrap",
+  alphaArcShadow: "ColorWheel_module_alphaArcShadow",
+  alphaArc: "ColorWheel_module_alphaArc",
+  alphaArcFill: "ColorWheel_module_alphaArcFill",
+  alphaArcCap: "ColorWheel_module_alphaArcCap",
+  alphaArcCapStart: "ColorWheel_module_alphaArcCapStart",
+  alphaArcCapEnd: "ColorWheel_module_alphaArcCapEnd",
+  alphaArcHandle: "ColorWheel_module_alphaArcHandle",
+  currentDisc: "ColorWheel_module_currentDisc",
+  discFill: "ColorWheel_module_discFill",
+  currentHex: "ColorWheel_module_currentHex",
+  currentHexInput: "ColorWheel_module_currentHexInput",
+  copied: "ColorWheel_module_copied",
+  discBadge: "ColorWheel_module_discBadge",
+  discBadgeTop: "ColorWheel_module_discBadgeTop",
+  pulse: "ColorWheel_module_pulse",
+  discBadgeBottom: "ColorWheel_module_discBadgeBottom"
+};
+function usePointerDrag(ref, onMove, onEnd, onDraggingChange) {
+  const onMoveRef = React.useRef(onMove);
+  onMoveRef.current = onMove;
+  const onEndRef = React.useRef(onEnd);
+  onEndRef.current = onEnd;
+  const onDraggingChangeRef = React.useRef(onDraggingChange);
+  onDraggingChangeRef.current = onDraggingChange;
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    function pointerPos(e) {
+      return { x: e.clientX, y: e.clientY };
+    }
+    function move(e) {
+      onMoveRef.current(pointerPos(e));
+    }
+    function up() {
+      onDraggingChangeRef.current?.(false);
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      onEndRef.current?.();
+    }
+    function down(e) {
+      const pe = e;
+      pe.preventDefault();
+      pe.stopPropagation();
+      onDraggingChangeRef.current?.(true);
+      onMoveRef.current(pointerPos(pe));
+      window.addEventListener("pointermove", move);
+      window.addEventListener("pointerup", up);
+    }
+    el.addEventListener("pointerdown", down);
+    return () => {
+      el.removeEventListener("pointerdown", down);
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, [ref]);
+}
+function useUnwrappedAngle(targetDeg) {
+  const continuousRef = React.useRef(targetDeg);
+  const targetMod = (targetDeg % 360 + 360) % 360;
+  const currentMod = (continuousRef.current % 360 + 360) % 360;
+  let delta = targetMod - currentMod;
+  if (delta > 180) delta -= 360;
+  else if (delta < -180) delta += 360;
+  continuousRef.current += delta;
+  return continuousRef.current;
+}
+
+// src/components/ColorWheel/colorMath.ts
+function hsvToRgb(h, s, v) {
+  s /= 100;
+  v /= 100;
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let r, g, b;
+  if (h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255)
+  };
+}
+function rgbToHsv(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === r) h = (g - b) / d % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  const s = max === 0 ? 0 : d / max;
+  return { h, s: s * 100, v: max * 100 };
+}
+function toHexByte(n) {
+  const h = Math.max(0, Math.min(255, Math.round(n))).toString(16);
+  return h.length === 1 ? "0" + h : h;
+}
+function rgbToHex(c) {
+  return ("#" + toHexByte(c.r) + toHexByte(c.g) + toHexByte(c.b)).toUpperCase();
+}
+function hsvaToHex(hsv, a) {
+  const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
+  let hex = rgbToHex(rgb);
+  if (a < 1) hex += toHexByte(Math.round(a * 255));
+  return hex;
+}
+function hexToHsva(input) {
+  let clean = input.trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{3}$/.test(clean)) {
+    clean = clean.split("").map((ch) => ch + ch).join("");
+  }
+  if (!/^[0-9a-fA-F]{6}$/.test(clean) && !/^[0-9a-fA-F]{8}$/.test(clean)) return null;
+  const r = parseInt(clean.slice(0, 2), 16);
+  const g = parseInt(clean.slice(2, 4), 16);
+  const b = parseInt(clean.slice(4, 6), 16);
+  const a = clean.length === 8 ? parseInt(clean.slice(6, 8), 16) / 255 : 1;
+  return { hsv: rgbToHsv(r, g, b), a };
+}
+function clamp2(v, min, max) {
+  return Math.min(max, Math.max(min, v));
+}
+function round2(n) {
+  return Math.round(n * 100) / 100;
+}
+function angleDistance(a, b) {
+  const d = Math.abs(a - b) % 360;
+  return d > 180 ? 360 - d : d;
+}
+function relativeLuminance(c) {
+  return (0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b) / 255;
+}
+var RING_SPECTRUM = "conic-gradient(from 180deg, hsl(0 100% 50%) 0%, hsl(60 100% 50%) 16.667%, hsl(120 100% 50%) 33.333%, hsl(180 100% 50%) 50%, hsl(240 100% 50%) 66.667%, hsl(300 100% 50%) 83.333%, hsl(360 100% 50%) 100%)";
+var RING_INNER_FRAC = 0.3382;
+var RING_OUTER_FRAC = 0.5;
+var ARC_A0 = 30;
+var ARC_A1 = 150;
+var ARC_HANDLE_R_FRAC = 152 / 380;
+var MODES_HSV = ["h", "s", "v"];
+var MODES_HSVA = ["h", "s", "v", "a"];
+function ringGradient(mode, hsv) {
+  if (mode === "s") {
+    const grey = rgbToHex(hsvToRgb(hsv.h, 0, hsv.v));
+    const full = rgbToHex(hsvToRgb(hsv.h, 100, hsv.v));
+    return `conic-gradient(from 180deg, ${grey} 0deg, ${full} 360deg)`;
+  }
+  if (mode === "v") {
+    const bright = rgbToHex(hsvToRgb(hsv.h, hsv.s, 100));
+    return `conic-gradient(from 180deg, #000000 0deg, ${bright} 360deg)`;
+  }
+  if (mode === "a") {
+    const full = rgbToHex(hsvToRgb(hsv.h, hsv.s, hsv.v));
+    return `conic-gradient(from 180deg, transparent 0deg, ${full} 360deg)`;
+  }
+  return RING_SPECTRUM;
+}
+var EMPTY_FAVORITES = [];
+function ColorWheel({
+  value,
+  onChange,
+  favorites = EMPTY_FAVORITES,
+  onFavoritesChange,
+  maxFavorites = 5,
+  showAlphaControl = true,
+  alphaMode = "arc",
+  theme = "system",
+  size = 1,
+  accent,
+  className
+}) {
+  const ringIsFourWay = showAlphaControl && alphaMode === "ring";
+  const arcVisible = showAlphaControl && alphaMode === "arc";
+  const modes = ringIsFourWay ? MODES_HSVA : MODES_HSV;
+  const parsed = React.useMemo(() => hexToHsva(value), [value]);
+  const [hsv, setHsv] = React.useState(() => parsed?.hsv ?? { h: 0, s: 0, v: 100 });
+  const [alpha, setAlpha] = React.useState(() => parsed?.a ?? 1);
+  const [mode, setMode] = React.useState("h");
+  const [dragging, setDragging] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
+  const [pulseFavorite, setPulseFavorite] = React.useState(false);
+  const [editing, setEditing] = React.useState(false);
+  const [editValue, setEditValue] = React.useState("");
+  const [eyedropperSupported, setEyedropperSupported] = React.useState(false);
+  const accentVars = accent ? accentToCssVars(deriveAccent(accent), "colorwheel") : {};
+  const lastEmitted = React.useRef(value);
+  React.useEffect(() => {
+    if (value === lastEmitted.current) return;
+    const next = hexToHsva(value);
+    if (next) {
+      setHsv(next.hsv);
+      setAlpha(next.a);
+    }
+    lastEmitted.current = value;
+  }, [value]);
+  React.useEffect(() => {
+    setEyedropperSupported(typeof window !== "undefined" && "EyeDropper" in window);
+  }, []);
+  React.useEffect(() => {
+    if (!ringIsFourWay && mode === "a") setMode("h");
+  }, [ringIsFourWay, mode]);
+  const stageRef = React.useRef(null);
+  const alphaArcRef = React.useRef(null);
+  const modeToggleRef = React.useRef(null);
+  const hexInputRef = React.useRef(null);
+  function commit(nextHsv, nextAlpha) {
+    setHsv(nextHsv);
+    setAlpha(nextAlpha);
+    const hex = hsvaToHex(nextHsv, nextAlpha);
+    lastEmitted.current = hex;
+    onChange(hex);
+  }
+  const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
+  const solidHex = rgbToHex(rgb);
+  const hexString = hsvaToHex(hsv, alpha);
+  const luminance = relativeLuminance(rgb);
+  const isLight = luminance > 0.58;
+  const discText = isLight ? "#1A1913" : "#FFFFFF";
+  const badgeBg = isLight ? "rgba(0,0,0,0.02)" : "rgba(255,255,255,0.03)";
+  const badgeGrooveDark = isLight ? "rgba(0,0,0,0.2)" : "rgba(0,0,0,0.32)";
+  const badgeGrooveLight = isLight ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.12)";
+  const badgeIcon = isLight ? "rgba(0,0,0,0.72)" : "rgba(255,255,255,0.88)";
+  const badgeShadow = {
+    background: badgeBg,
+    color: badgeIcon,
+    boxShadow: `inset 0 1px 1px ${badgeGrooveDark}, inset 0 -1px 1px ${badgeGrooveLight}`
+  };
+  const ringLogicalAngle = mode === "h" ? hsv.h : mode === "a" ? alpha * 360 : (mode === "s" ? hsv.s : hsv.v) / 100 * 360;
+  const ringAngleFromTopDeg = useUnwrappedAngle(180 + ringLogicalAngle);
+  const arcLogicalAngle = ARC_A1 - alpha * (ARC_A1 - ARC_A0);
+  const arcAngleFromTop = (90 + arcLogicalAngle) * (Math.PI / 180);
+  const arcHandleR = ARC_HANDLE_R_FRAC * 380;
+  const arcHandleDx = arcHandleR * Math.sin(arcAngleFromTop);
+  const arcHandleDy = -arcHandleR * Math.cos(arcAngleFromTop);
+  function applyRingAngle(angle) {
+    if (mode === "h") commit({ ...hsv, h: angle }, alpha);
+    else if (mode === "s") commit({ ...hsv, s: angle / 360 * 100 }, alpha);
+    else if (mode === "a") commit(hsv, angle / 360);
+    else commit({ ...hsv, v: angle / 360 * 100 }, alpha);
+  }
+  const dragPrevAngleRef = React.useRef(null);
+  const dragAccumRef = React.useRef(0);
+  usePointerDrag(
+    stageRef,
+    (pos) => {
+      const rect = stageRef.current.getBoundingClientRect();
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const dx = pos.x - cx;
+      const dy = pos.y - cy;
+      const dist = Math.hypot(dx, dy);
+      if (dist < rect.width * RING_INNER_FRAC || dist > rect.width * RING_OUTER_FRAC) return;
+      let angle = Math.atan2(dy, dx) * (180 / Math.PI) - 90;
+      angle = (angle % 360 + 360) % 360;
+      if (mode === "h") {
+        applyRingAngle(angle);
+        return;
+      }
+      if (dragPrevAngleRef.current === null) {
+        dragAccumRef.current = angle;
+      } else {
+        let delta = angle - dragPrevAngleRef.current;
+        if (delta > 180) delta -= 360;
+        else if (delta < -180) delta += 360;
+        dragAccumRef.current = clamp2(dragAccumRef.current + delta, 0, 360);
+      }
+      dragPrevAngleRef.current = angle;
+      applyRingAngle(dragAccumRef.current);
+    },
+    void 0,
+    (dragging2) => {
+      if (!dragging2) dragPrevAngleRef.current = null;
+      setDragging(dragging2);
+    }
+  );
+  React.useEffect(() => {
+    const el = stageRef.current;
+    if (!el) return;
+    function onWheel(e) {
+      const rect = el.getBoundingClientRect();
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const dist = Math.hypot(e.clientX - cx, e.clientY - cy);
+      if (dist < rect.width * RING_INNER_FRAC || dist > rect.width * RING_OUTER_FRAC) return;
+      e.preventDefault();
+      const dir = e.deltaY > 0 ? -1 : 1;
+      if (mode === "h") commit({ ...hsv, h: (hsv.h + dir * 4 + 360) % 360 }, alpha);
+      else if (mode === "s") commit({ ...hsv, s: clamp2(hsv.s + dir * 3, 0, 100) }, alpha);
+      else if (mode === "a") commit(hsv, clamp2(round2(alpha + dir * 0.03), 0, 1));
+      else commit({ ...hsv, v: clamp2(hsv.v + dir * 3, 0, 100) }, alpha);
+    }
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [mode, hsv, alpha]);
+  usePointerDrag(
+    alphaArcRef,
+    (pos) => {
+      const rect = alphaArcRef.current.getBoundingClientRect();
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      let angle = Math.atan2(pos.y - cy, pos.x - cx) * (180 / Math.PI);
+      if (angle < 0) angle += 360;
+      if (angle < ARC_A0 || angle > ARC_A1) {
+        angle = angleDistance(angle, ARC_A0) < angleDistance(angle, ARC_A1) ? ARC_A0 : ARC_A1;
+      }
+      commit(hsv, round2((ARC_A1 - angle) / (ARC_A1 - ARC_A0)));
+    },
+    void 0,
+    setDragging
+  );
+  React.useEffect(() => {
+    const el = alphaArcRef.current;
+    if (!el) return;
+    function onWheel(e) {
+      e.preventDefault();
+      const dir = e.deltaY > 0 ? -1 : 1;
+      commit(hsv, clamp2(round2(alpha + dir * 0.05), 0, 1));
+    }
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [hsv, alpha]);
+  React.useEffect(() => {
+    const el = modeToggleRef.current;
+    if (!el) return;
+    function onWheel(e) {
+      e.preventDefault();
+      const idx = modes.indexOf(mode);
+      const dir = e.deltaY > 0 ? -1 : 1;
+      setMode(modes[clamp2(idx + dir, 0, modes.length - 1)]);
+    }
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [mode, modes]);
+  function handleDiscClick() {
+    const done = () => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 900);
+    };
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(hexString).then(done, done);
+    } else {
+      done();
+    }
+  }
+  function beginEdit(e) {
+    e.stopPropagation();
+    setEditValue(hexString);
+    setEditing(true);
+    requestAnimationFrame(() => {
+      hexInputRef.current?.focus();
+      hexInputRef.current?.setSelectionRange(1, hexString.length);
+    });
+  }
+  function commitEdit(cancelled) {
+    if (!cancelled) {
+      const next = hexToHsva(editValue);
+      if (next) commit(next.hsv, next.a);
+    }
+    setEditing(false);
+  }
+  function pickFromScreen() {
+    const dropper = new window.EyeDropper();
+    dropper.open().then((result) => {
+      const next = hexToHsva(result.sRGBHex);
+      if (next) commit(next.hsv, next.a);
+    }).catch(() => {
+    });
+  }
+  function saveFavorite() {
+    const next = [hexString, ...favorites.filter((h) => h !== hexString)].slice(0, maxFavorites);
+    onFavoritesChange?.(next);
+    setPulseFavorite(false);
+    requestAnimationFrame(() => setPulseFavorite(true));
+  }
+  function applyFavorite(hex) {
+    const next = hexToHsva(hex);
+    if (next) commit(next.hsv, next.a);
+  }
+  function removeFavorite(hex) {
+    onFavoritesChange?.(favorites.filter((h) => h !== hex));
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [ColorWheel_module_default.root, className].filter(Boolean).join(" "),
+      "data-theme": theme === "system" ? void 0 : theme,
+      "data-dragging": dragging ? "true" : void 0,
+      style: {
+        ...accentVars,
+        ...size !== 1 ? { transform: `scale(${size})`, transformOrigin: "top center" } : void 0
+      },
+      children: [
+        favorites.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorWheel_module_default.recents, children: favorites.map((hex, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ColorWheel_module_default.chipWrap, style: { animationDelay: `${i * 0.02}s` }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: ColorWheel_module_default.chip,
+              style: { background: hex.length > 7 ? hex.slice(0, 7) : hex },
+              title: hex,
+              "aria-label": `Apply color ${hex}`,
+              onClick: () => applyFavorite(hex)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: ColorWheel_module_default.chipRemove,
+              "aria-label": `Remove ${hex} from favorites`,
+              onClick: (e) => {
+                e.stopPropagation();
+                removeFavorite(hex);
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })
+            }
+          )
+        ] }, hex + i)) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ColorWheel_module_default.picker, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: ColorWheel_module_default.glow,
+              style: { background: `radial-gradient(closest-side, ${solidHex}, transparent 72%)` }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: ColorWheel_module_default.modeToggle,
+              ref: modeToggleRef,
+              style: { width: modes.length * 28, gridTemplateColumns: `repeat(${modes.length}, 1fr)` },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: ColorWheel_module_default.modePill,
+                    style: {
+                      width: `calc(${100 / modes.length}% - 2px)`,
+                      transform: `translateX(calc(${modes.indexOf(mode)} * (100% + 1px)))`
+                    }
+                  }
+                ),
+                modes.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: [ColorWheel_module_default.modeButton, mode === m ? ColorWheel_module_default.active : ""].join(" "),
+                    onClick: () => setMode(m),
+                    children: m.toUpperCase()
+                  },
+                  m
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ColorWheel_module_default.stage, ref: stageRef, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorWheel_module_default.stageShadow }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorWheel_module_default.ring, style: { background: ringGradient(mode, hsv) } }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ColorWheel_module_default.currentDisc, onClick: handleDiscClick, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorWheel_module_default.discFill, style: { background: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})` } }),
+              !editing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: [ColorWheel_module_default.currentHex, copied ? ColorWheel_module_default.copied : ""].join(" "), style: { color: discText }, onClick: beginEdit, children: copied ? "Copied" : hexString }),
+              editing && /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: hexInputRef,
+                  className: ColorWheel_module_default.currentHexInput,
+                  style: { color: discText },
+                  type: "text",
+                  inputMode: "text",
+                  autoComplete: "off",
+                  spellCheck: false,
+                  maxLength: 9,
+                  value: editValue,
+                  onClick: (e) => e.stopPropagation(),
+                  onChange: (e) => setEditValue(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") hexInputRef.current?.blur();
+                    else if (e.key === "Escape") {
+                      commitEdit(true);
+                    }
+                  },
+                  onBlur: () => commitEdit(false)
+                }
+              )
+            ] }),
+            eyedropperSupported && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: [ColorWheel_module_default.discBadge, ColorWheel_module_default.discBadgeBottom].join(" "),
+                style: badgeShadow,
+                "aria-label": "Pick color from screen",
+                onClick: pickFromScreen,
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 32 32", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M27.7,3.3c-1.5-1.5-3.9-1.5-5.4,0L17,8.6l-1.3-1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l1.3,1.3L5,20.6c-0.6,0.6-1,1.4-1.1,2.3C3.3,23.4,3,24.2,3,25c0,1.7,1.3,3,3,3c0.8,0,1.6-0.3,2.2-0.9C9,27,9.8,26.6,10.4,26L21,15.4l1.3,1.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L22.4,14l5.3-5.3C29.2,7.2,29.2,4.8,27.7,3.3z M9,24.6c-0.4,0.4-0.8,0.6-1.3,0.5c-0.4,0-0.7,0.2-0.9,0.5C6.7,25.8,6.3,26,6,26c-0.6,0-1-0.4-1-1c0-0.3,0.2-0.7,0.5-0.8c0.3-0.2,0.5-0.5,0.5-0.9c0-0.5,0.2-1,0.5-1.3L17,11.4l2.6,2.6L9,24.6z" }) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: [ColorWheel_module_default.discBadge, ColorWheel_module_default.discBadgeTop, pulseFavorite ? ColorWheel_module_default.pulse : ""].join(" "),
+                style: badgeShadow,
+                "aria-label": "Save current color to favorites",
+                onClick: saveFavorite,
+                onAnimationEnd: () => setPulseFavorite(false),
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14" }) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorWheel_module_default.hueHandlePivot, style: { transform: `translate(-50%, -50%) rotate(${ringAngleFromTopDeg}deg)` }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorWheel_module_default.hueHandle, style: { background: solidHex } }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: arcVisible ? "contents" : "none" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorWheel_module_default.alphaArcShadowWrap, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorWheel_module_default.alphaArcShadow }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ColorWheel_module_default.alphaArc, ref: alphaArcRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: ColorWheel_module_default.alphaArcFill,
+                style: { background: `conic-gradient(from 90deg, ${solidHex} 30deg, transparent 150deg)` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: [ColorWheel_module_default.alphaArcCap, ColorWheel_module_default.alphaArcCapStart].join(" "), style: { background: solidHex } }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: [ColorWheel_module_default.alphaArcCap, ColorWheel_module_default.alphaArcCapEnd].join(" ") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: ColorWheel_module_default.alphaArcHandle,
+                style: {
+                  transform: `translate(calc(-50% + ${arcHandleDx}px), calc(-50% + ${arcHandleDy}px))`,
+                  background: solidHex
+                }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
 Object.defineProperty(exports, "useCurrentEditor", {
   enumerable: true,
   get: function () { return react.useCurrentEditor; }
@@ -4700,6 +5289,7 @@ Object.defineProperty(exports, "useCurrentEditor", {
 exports.Badge = Badge;
 exports.Button = Button;
 exports.ColorPicker = ColorPicker;
+exports.ColorWheel = ColorWheel;
 exports.Highlight = Highlight;
 exports.HighlightButton = HighlightButton;
 exports.Input = Input;