react-headless-color-picker 1.0.0

package/dist/index.mjs

@@ -0,0 +1,600 @@
+// src/hooks/useColorManipulation.ts
+import { useState, useEffect, useCallback, useRef as useRef2 } from "react";
+
+// src/utils/round.ts
+var round = (number, digits = 0, base = Math.pow(10, digits)) => {
+  return Math.round(base * number) / base;
+};
+
+// src/utils/convert.ts
+var angleUnits = {
+  grad: 360 / 400,
+  turn: 360,
+  rad: 360 / (Math.PI * 2)
+};
+var hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));
+var hexToRgba = (hex) => {
+  if (hex[0] === "#") hex = hex.substring(1);
+  if (hex.length < 6) {
+    return {
+      r: parseInt(hex[0] + hex[0], 16),
+      g: parseInt(hex[1] + hex[1], 16),
+      b: parseInt(hex[2] + hex[2], 16),
+      a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1
+    };
+  }
+  return {
+    r: parseInt(hex.substring(0, 2), 16),
+    g: parseInt(hex.substring(2, 4), 16),
+    b: parseInt(hex.substring(4, 6), 16),
+    a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1
+  };
+};
+var parseHue = (value, unit = "deg") => {
+  return Number(value) * (angleUnits[unit] || 1);
+};
+var hslaStringToHsva = (hslString) => {
+  const matcher2 = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+  const match = matcher2.exec(hslString);
+  if (!match) return { h: 0, s: 0, v: 0, a: 1 };
+  return hslaToHsva({
+    h: parseHue(match[1], match[2]),
+    s: Number(match[3]),
+    l: Number(match[4]),
+    a: match[5] === void 0 ? 1 : Number(match[5]) / (match[6] ? 100 : 1)
+  });
+};
+var hslStringToHsva = hslaStringToHsva;
+var hslaToHsva = ({ h, s, l, a }) => {
+  s *= (l < 50 ? l : 100 - l) / 100;
+  return {
+    h,
+    s: s > 0 ? 2 * s / (l + s) * 100 : 0,
+    v: l + s,
+    a
+  };
+};
+var hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));
+var hsvaToHsla = ({ h, s, v, a }) => {
+  const hh = (200 - s) * v / 100;
+  return {
+    h: round(h),
+    s: round(hh > 0 && hh < 200 ? s * v / 100 / (hh <= 100 ? hh : 200 - hh) * 100 : 0),
+    l: round(hh / 2),
+    a: round(a, 2)
+  };
+};
+var hsvaToHslString = (hsva) => {
+  const { h, s, l } = hsvaToHsla(hsva);
+  return `hsl(${h}, ${s}%, ${l}%)`;
+};
+var hsvaToHsvString = (hsva) => {
+  const { h, s, v } = roundHsva(hsva);
+  return `hsv(${h}, ${s}%, ${v}%)`;
+};
+var hsvaToHsvaString = (hsva) => {
+  const { h, s, v, a } = roundHsva(hsva);
+  return `hsva(${h}, ${s}%, ${v}%, ${a})`;
+};
+var hsvaToHslaString = (hsva) => {
+  const { h, s, l, a } = hsvaToHsla(hsva);
+  return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+};
+var hsvaToRgba = ({ h, s, v, a }) => {
+  h = h / 360 * 6;
+  s = s / 100;
+  v = v / 100;
+  const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;
+  return {
+    r: round([v, c, b, b, d, v][module] * 255),
+    g: round([d, v, v, c, b, b][module] * 255),
+    b: round([b, b, d, v, v, c][module] * 255),
+    a: round(a, 2)
+  };
+};
+var hsvaToRgbString = (hsva) => {
+  const { r, g, b } = hsvaToRgba(hsva);
+  return `rgb(${r}, ${g}, ${b})`;
+};
+var hsvaToRgbaString = (hsva) => {
+  const { r, g, b, a } = hsvaToRgba(hsva);
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+var hsvaStringToHsva = (hsvString) => {
+  const matcher2 = /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+  const match = matcher2.exec(hsvString);
+  if (!match) return { h: 0, s: 0, v: 0, a: 1 };
+  return roundHsva({
+    h: parseHue(match[1], match[2]),
+    s: Number(match[3]),
+    v: Number(match[4]),
+    a: match[5] === void 0 ? 1 : Number(match[5]) / (match[6] ? 100 : 1)
+  });
+};
+var hsvStringToHsva = hsvaStringToHsva;
+var rgbaStringToHsva = (rgbaString) => {
+  const matcher2 = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+  const match = matcher2.exec(rgbaString);
+  if (!match) return { h: 0, s: 0, v: 0, a: 1 };
+  return rgbaToHsva({
+    r: Number(match[1]) / (match[2] ? 100 / 255 : 1),
+    g: Number(match[3]) / (match[4] ? 100 / 255 : 1),
+    b: Number(match[5]) / (match[6] ? 100 / 255 : 1),
+    a: match[7] === void 0 ? 1 : Number(match[7]) / (match[8] ? 100 : 1)
+  });
+};
+var rgbStringToHsva = rgbaStringToHsva;
+var format = (number) => {
+  const hex = number.toString(16);
+  return hex.length < 2 ? "0" + hex : hex;
+};
+var rgbaToHex = ({ r, g, b, a }) => {
+  const alphaHex = a < 1 ? format(round(a * 255)) : "";
+  return "#" + format(r) + format(g) + format(b) + alphaHex;
+};
+var rgbaToHsva = ({ r, g, b, a }) => {
+  const max = Math.max(r, g, b);
+  const delta = max - Math.min(r, g, b);
+  const hh = delta ? max === r ? (g - b) / delta : max === g ? 2 + (b - r) / delta : 4 + (r - g) / delta : 0;
+  return {
+    h: round(60 * (hh < 0 ? hh + 6 : hh)),
+    s: round(max ? delta / max * 100 : 0),
+    v: round(max / 255 * 100),
+    a
+  };
+};
+var roundHsva = (hsva) => ({
+  h: round(hsva.h),
+  s: round(hsva.s),
+  v: round(hsva.v),
+  a: round(hsva.a, 2)
+});
+var rgbaToRgb = ({ r, g, b }) => ({ r, g, b });
+var hslaToHsl = ({ h, s, l }) => ({ h, s, l });
+var hsvaToHsv = (hsva) => {
+  const { h, s, v } = roundHsva(hsva);
+  return { h, s, v };
+};
+var hsvaToHueHsl = (h) => {
+  return `hsl(${Math.round(h)}, 100%, 50%)`;
+};
+
+// src/utils/compare.ts
+var equalColorObjects = (first, second) => {
+  if (first === second) return true;
+  for (const prop in first) {
+    if (first[prop] !== second[prop])
+      return false;
+  }
+  return true;
+};
+var equalColorString = (first, second) => {
+  return first.replace(/\s/g, "") === second.replace(/\s/g, "");
+};
+var equalHex = (first, second) => {
+  if (first.toLowerCase() === second.toLowerCase()) return true;
+  return equalColorObjects(hexToRgba(first), hexToRgba(second));
+};
+
+// src/hooks/useEventCallback.ts
+import { useRef } from "react";
+function useEventCallback(handler) {
+  const callbackRef = useRef(handler);
+  const fn = useRef((value) => {
+    callbackRef.current && callbackRef.current(value);
+  });
+  callbackRef.current = handler;
+  return fn.current;
+}
+
+// src/hooks/useColorManipulation.ts
+function useColorManipulation(colorModel, color, onChange) {
+  const onChangeCallback = useEventCallback(onChange);
+  const [hsva, updateHsva] = useState(() => colorModel.toHsva(color));
+  const cache = useRef2({ color, hsva });
+  useEffect(() => {
+    if (!colorModel.equal(color, cache.current.color)) {
+      const newHsva = colorModel.toHsva(color);
+      cache.current = { hsva: newHsva, color };
+      updateHsva(newHsva);
+    }
+  }, [color, colorModel]);
+  useEffect(() => {
+    let newColor;
+    if (!equalColorObjects(hsva, cache.current.hsva) && !colorModel.equal(newColor = colorModel.fromHsva(hsva), cache.current.color)) {
+      cache.current = { hsva, color: newColor };
+      onChangeCallback(newColor);
+    }
+  }, [hsva, colorModel, onChangeCallback]);
+  const handleChange = useCallback((params) => {
+    updateHsva((current) => Object.assign({}, current, params));
+  }, []);
+  return [hsva, handleChange];
+}
+
+// src/components/Hue.tsx
+import { memo as memo2 } from "react";
+
+// src/utils/clamp.ts
+var clamp = (number, min = 0, max = 1) => {
+  return number > max ? max : number < min ? min : number;
+};
+
+// src/components/Interactive.tsx
+import { memo, useEffect as useEffect2, useMemo, useRef as useRef3 } from "react";
+import { jsx } from "react/jsx-runtime";
+var isTouch = (e) => "touches" in e;
+var getParentWindow = (node) => node?.ownerDocument?.defaultView ?? window;
+var getRelativePosition = (node, event, touchId) => {
+  const rect = node.getBoundingClientRect();
+  const pointer = isTouch(event) ? Array.from(event.touches).find((t) => t.identifier === touchId) ?? event.touches[0] : event;
+  return {
+    left: clamp(
+      (pointer.pageX - (rect.left + getParentWindow(node).pageXOffset)) / rect.width
+    ),
+    top: clamp(
+      (pointer.pageY - (rect.top + getParentWindow(node).pageYOffset)) / rect.height
+    )
+  };
+};
+var Interactive = memo(function Interactive2({
+  onMove,
+  onKey,
+  children,
+  style,
+  ...rest
+}) {
+  const container = useRef3(null);
+  const onMoveCallback = useEventCallback(onMove);
+  const onKeyCallback = useEventCallback(onKey);
+  const touchId = useRef3(null);
+  const hasTouch = useRef3(false);
+  const [handleMoveStart, handleKeyDown, toggleDocumentEvents] = useMemo(() => {
+    const handleMoveStart2 = ({
+      nativeEvent
+    }) => {
+      const el = container.current;
+      if (!el) return;
+      if (!isTouch(nativeEvent)) nativeEvent.preventDefault();
+      if (hasTouch.current && !isTouch(nativeEvent)) return;
+      if (isTouch(nativeEvent)) {
+        hasTouch.current = true;
+        touchId.current = nativeEvent.changedTouches?.[0]?.identifier ?? null;
+      }
+      el.focus();
+      onMoveCallback(
+        getRelativePosition(el, nativeEvent, touchId.current)
+      );
+      toggleDocumentEvents2(true);
+    };
+    const handleMove = (event) => {
+      if (!isTouch(event)) event.preventDefault();
+      const isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0;
+      if (isDown && container.current) {
+        onMoveCallback(
+          getRelativePosition(
+            container.current,
+            event,
+            touchId.current
+          )
+        );
+      } else {
+        toggleDocumentEvents2(false);
+      }
+    };
+    const handleMoveEnd = () => {
+      hasTouch.current = false;
+      touchId.current = null;
+      toggleDocumentEvents2(false);
+    };
+    const handleKeyDown2 = (event) => {
+      const k = event.key;
+      if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(k)) {
+        return;
+      }
+      event.preventDefault();
+      onKeyCallback({
+        left: k === "ArrowRight" ? 0.05 : k === "ArrowLeft" ? -0.05 : 0,
+        top: k === "ArrowDown" ? 0.05 : k === "ArrowUp" ? -0.05 : 0
+      });
+    };
+    function toggleDocumentEvents2(state) {
+      const el = container.current;
+      const win = getParentWindow(el);
+      const method = state ? win.addEventListener.bind(win) : win.removeEventListener.bind(win);
+      if (hasTouch.current) {
+        method("touchmove", handleMove);
+        method("touchend", handleMoveEnd);
+      } else {
+        method("mousemove", handleMove);
+        method("mouseup", handleMoveEnd);
+      }
+    }
+    return [handleMoveStart2, handleKeyDown2, toggleDocumentEvents2];
+  }, [onKeyCallback, onMoveCallback]);
+  useEffect2(() => {
+    return () => toggleDocumentEvents(false);
+  }, [toggleDocumentEvents]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: container,
+      onMouseDown: handleMoveStart,
+      onTouchStart: handleMoveStart,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "slider",
+      style: {
+        position: "relative",
+        cursor: "crosshair",
+        outline: "none",
+        ...style
+      },
+      children
+    }
+  );
+});
+
+// src/components/Pointer.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Pointer = function Pointer2({
+  left,
+  top = 0.5,
+  children,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ...rest,
+      style: {
+        position: "absolute",
+        left: `${left * 100}%`,
+        top: `${top * 100}%`,
+        transform: "translate(-50%, -50%)",
+        ...style
+      },
+      children
+    }
+  );
+};
+
+// src/components/Hue.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Hue = memo2(function Hue2({
+  hue,
+  onChange,
+  renderPointer,
+  style,
+  ...rest
+}) {
+  const handleMove = ({ left }) => onChange({ h: 360 * left });
+  const handleKey = ({ left }) => onChange({ h: clamp(hue + left * 360, 0, 360) });
+  return /* @__PURE__ */ jsx3(
+    Interactive,
+    {
+      onMove: handleMove,
+      onKey: handleKey,
+      "aria-label": "Hue",
+      "aria-valuenow": round(hue),
+      "aria-valuemax": 360,
+      "aria-valuemin": 0,
+      style: {
+        background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+        ...style
+      },
+      ...rest,
+      children: renderPointer ? renderPointer({ left: hue / 360, top: 0.5, hue }) : /* @__PURE__ */ jsx3(Pointer, { left: hue / 360 })
+    }
+  );
+});
+
+// src/components/Saturation.tsx
+import { memo as memo3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Saturation = memo3(function Saturation2({
+  hsva,
+  onChange,
+  style,
+  renderPointer,
+  ...rest
+}) {
+  const handleMove = ({ left, top }) => onChange({ s: left * 100, v: 100 - top * 100 });
+  const handleKey = ({ left, top }) => onChange({
+    s: clamp(hsva.s + left * 100, 0, 100),
+    v: clamp(hsva.v - top * 100, 0, 100)
+  });
+  return /* @__PURE__ */ jsx4(
+    Interactive,
+    {
+      onMove: handleMove,
+      onKey: handleKey,
+      "aria-label": "Color",
+      "aria-valuetext": `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`,
+      style: {
+        width: "100%",
+        height: "100%",
+        background: `
+          linear-gradient(to top, #000, transparent),
+          linear-gradient(to right, #fff, transparent),
+          ${hsvaToHueHsl(hsva.h)}
+        `,
+        ...style
+      },
+      ...rest,
+      children: renderPointer ? renderPointer({ left: hsva.s / 100, top: 1 - hsva.v / 100, hsva }) : /* @__PURE__ */ jsx4(Pointer, { left: hsva.s / 100, top: 1 - hsva.v / 100 })
+    }
+  );
+});
+
+// src/components/Alpha.tsx
+import { memo as memo4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Alpha = memo4(function Alpha2({
+  hsva,
+  onChange,
+  renderPointer,
+  style,
+  ...rest
+}) {
+  const handleMove = ({ left }) => onChange({ a: left });
+  const handleKey = ({ left }) => onChange({ a: clamp(hsva.a + left) });
+  const colorFrom = `hsla(${Math.round(hsva.h)}, 100%, 50%, 0)`;
+  const colorTo = `hsla(${Math.round(hsva.h)}, 100%, 50%, 1)`;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        position: "relative",
+        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='4' height='4' fill='%23ccc'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23ccc'/%3E%3C/svg%3E")`,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx5(
+        Interactive,
+        {
+          onMove: handleMove,
+          onKey: handleKey,
+          "aria-label": "Alpha",
+          "aria-valuenow": round(hsva.a * 100),
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuetext": `${round(hsva.a * 100)}%`,
+          style: {
+            width: "100%",
+            height: "100%",
+            background: `linear-gradient(90deg, ${colorFrom}, ${colorTo})`
+          },
+          ...rest,
+          children: renderPointer ? renderPointer({ left: hsva.a, top: 0.5, hsva }) : /* @__PURE__ */ jsx5(Pointer, { left: hsva.a })
+        }
+      )
+    }
+  );
+});
+
+// src/components/ColorPicker.tsx
+import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
+function ColorPicker({
+  colorModel,
+  color,
+  onChange,
+  children,
+  renderSaturationPointer,
+  renderHuePointer,
+  ...rest
+}) {
+  const [hsva, updateHsva] = useColorManipulation(colorModel, color, onChange);
+  if (children) {
+    return /* @__PURE__ */ jsx6(Fragment, { children: children({ hsva, updateHsva, Saturation, Hue, Alpha, Pointer }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ...rest, children: [
+    /* @__PURE__ */ jsx6(
+      Saturation,
+      {
+        hsva,
+        onChange: updateHsva,
+        renderPointer: renderSaturationPointer,
+        style: { width: "100%", aspectRatio: "1", borderRadius: "4px 4px 0 0" }
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Hue,
+      {
+        hue: hsva.h,
+        onChange: updateHsva,
+        renderPointer: renderHuePointer,
+        style: { width: "100%", height: 24, borderRadius: "0 0 4px 4px", marginTop: 4 }
+      }
+    )
+  ] });
+}
+
+// src/components/HexColorPicker.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var hexColorModel = {
+  defaultColor: "#ff0000",
+  toHsva: hexToHsva,
+  fromHsva: (hsva) => hsvaToHex(hsva),
+  equal: equalHex
+};
+function HexColorPicker({
+  color = "#ff0000",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx7(ColorPicker, { colorModel: hexColorModel, color, ...rest });
+}
+
+// src/utils/validate.ts
+var matcher = /^#?([0-9A-F]{3,8})$/i;
+var validHex = (value, alpha) => {
+  const match = matcher.exec(value);
+  const length = match ? match[1].length : 0;
+  return length === 3 || // '#rgb' format
+  length === 6 || // '#rrggbb' format
+  !!alpha && length === 4 || // '#rgba' format
+  !!alpha && length === 8;
+};
+
+// src/utils/nonce.ts
+var nonce;
+var getNonce = () => {
+  if (nonce) return nonce;
+  if (typeof __webpack_nonce__ !== "undefined") return __webpack_nonce__;
+  return void 0;
+};
+var setNonce = (hash) => {
+  nonce = hash;
+};
+
+// src/utils/format.ts
+var formatClassName = (names) => names.filter(Boolean).join(" ");
+export {
+  Alpha,
+  ColorPicker,
+  HexColorPicker,
+  Hue,
+  Interactive,
+  Pointer,
+  Saturation,
+  clamp,
+  equalColorObjects,
+  equalColorString,
+  equalHex,
+  formatClassName,
+  getNonce,
+  hexColorModel,
+  hexToHsva,
+  hexToRgba,
+  hslStringToHsva,
+  hslaStringToHsva,
+  hslaToHsl,
+  hslaToHsva,
+  hsvStringToHsva,
+  hsvaStringToHsva,
+  hsvaToHex,
+  hsvaToHslString,
+  hsvaToHsla,
+  hsvaToHslaString,
+  hsvaToHsv,
+  hsvaToHsvString,
+  hsvaToHsvaString,
+  hsvaToHueHsl,
+  hsvaToRgbString,
+  hsvaToRgba,
+  hsvaToRgbaString,
+  parseHue,
+  rgbStringToHsva,
+  rgbaStringToHsva,
+  rgbaToHex,
+  rgbaToHsva,
+  rgbaToRgb,
+  round,
+  roundHsva,
+  setNonce,
+  useColorManipulation,
+  useEventCallback,
+  validHex
+};
+//# sourceMappingURL=index.mjs.map