react-headless-color-picker 1.0.0 → 1.0.1

package/dist/index.mjs

@@ -1,180 +1,18 @@
-// src/hooks/useColorManipulation.ts
-import { useState, useEffect, useCallback, useRef as useRef2 } from "react";
+// 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/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/components/Interactive.tsx
+import { memo, useEffect, useMemo, useRef as useRef2 } from "react";
 
 // src/hooks/useEventCallback.ts
 import { useRef } from "react";
@@ -187,41 +25,7 @@ function useEventCallback(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;
@@ -244,11 +48,11 @@ var Interactive = memo(function Interactive2({
   style,
   ...rest
 }) {
-  const container = useRef3(null);
+  const container = useRef2(null);
   const onMoveCallback = useEventCallback(onMove);
   const onKeyCallback = useEventCallback(onKey);
-  const touchId = useRef3(null);
-  const hasTouch = useRef3(false);
+  const touchId = useRef2(null);
+  const hasTouch = useRef2(false);
   const [handleMoveStart, handleKeyDown, toggleDocumentEvents] = useMemo(() => {
     const handleMoveStart2 = ({
       nativeEvent
@@ -312,7 +116,7 @@ var Interactive = memo(function Interactive2({
     }
     return [handleMoveStart2, handleKeyDown2, toggleDocumentEvents2];
   }, [onKeyCallback, onMoveCallback]);
-  useEffect2(() => {
+  useEffect(() => {
     return () => toggleDocumentEvents(false);
   }, [toggleDocumentEvents]);
   return /* @__PURE__ */ jsx(
@@ -393,6 +197,161 @@ var Hue = memo2(function Hue2({
 
 // src/components/Saturation.tsx
 import { memo as memo3 } from "react";
+
+// 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/components/Saturation.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var Saturation = memo3(function Saturation2({
   hsva,
@@ -474,56 +433,49 @@ var Alpha = memo4(function Alpha2({
   );
 });
 
-// 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/hooks/useColorManipulation.ts
+import { useState, useEffect as useEffect2, useCallback, useRef as useRef3 } from "react";
 
-// src/components/HexColorPicker.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var hexColorModel = {
-  defaultColor: "#ff0000",
-  toHsva: hexToHsva,
-  fromHsva: (hsva) => hsvaToHex(hsva),
-  equal: equalHex
+// 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;
 };
-function HexColorPicker({
-  color = "#ff0000",
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx7(ColorPicker, { colorModel: hexColorModel, color, ...rest });
+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/useColorManipulation.ts
+function useColorManipulation(colorModel, color, onChange) {
+  const onChangeCallback = useEventCallback(onChange);
+  const [hsva, updateHsva] = useState(() => colorModel.toHsva(color));
+  const cache = useRef3({ color, hsva });
+  useEffect2(() => {
+    if (!colorModel.equal(color, cache.current.color)) {
+      const newHsva = colorModel.toHsva(color);
+      cache.current = { hsva: newHsva, color };
+      updateHsva(newHsva);
+    }
+  }, [color, colorModel]);
+  useEffect2(() => {
+    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/utils/validate.ts
@@ -552,8 +504,6 @@ var setNonce = (hash) => {
 var formatClassName = (names) => names.filter(Boolean).join(" ");
 export {
   Alpha,
-  ColorPicker,
-  HexColorPicker,
   Hue,
   Interactive,
   Pointer,
@@ -564,7 +514,6 @@ export {
   equalHex,
   formatClassName,
   getNonce,
-  hexColorModel,
   hexToHsva,
   hexToRgba,
   hslStringToHsva,