@fab1o978/react-ui 0.1.0

package/dist/components/ColorPicker/index.js

@@ -0,0 +1,521 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ColorPicker/ColorPicker.tsx
+
+// src/components/ColorPicker/ColorPicker.module.scss
+var ColorPicker_module_default = {
+  colorPicker: "ColorPicker_module_colorPicker2",
+  topRow: "ColorPicker_module_topRow2",
+  discWrapper: "ColorPicker_module_discWrapper2",
+  disc: "ColorPicker_module_disc2",
+  dot: "ColorPicker_module_dot2",
+  lSlider: "ColorPicker_module_lSlider2",
+  lThumb: "ColorPicker_module_lThumb2",
+  alphaSlider: "ColorPicker_module_alphaSlider2",
+  alphaThumb: "ColorPicker_module_alphaThumb2",
+  previewSwatch: "ColorPicker_module_previewSwatch2",
+  eyedropperBtn: "ColorPicker_module_eyedropperBtn2",
+  inputSection: "ColorPicker_module_inputSection2",
+  tabs: "ColorPicker_module_tabs2",
+  tab: "ColorPicker_module_tab2",
+  tabActive: "ColorPicker_module_tabActive2",
+  inputWrapper: "ColorPicker_module_inputWrapper2",
+  inputAddon: "ColorPicker_module_inputAddon2",
+  input: "ColorPicker_module_input2",
+  inputCopyBtn: "ColorPicker_module_inputCopyBtn2",
+  recents: "ColorPicker_module_recents2",
+  recentsLabel: "ColorPicker_module_recentsLabel2",
+  swatches: "ColorPicker_module_swatches2",
+  recentSwatch: "ColorPicker_module_recentSwatch2"
+};
+
+// src/utils/color.ts
+function hexToHsl(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToHex(h, s, l) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+function hslToRgb(h, s, l) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    return Math.round(255 * (ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)));
+  };
+  return { r: f(0), g: f(8), b: f(4) };
+}
+function rgbToHsl(r, g, b) {
+  const rr = r / 255, gg = g / 255, bb = b / 255;
+  const max = Math.max(rr, gg, bb);
+  const min = Math.min(rr, gg, bb);
+  const l = (max + min) / 2;
+  let h = 0, s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case rr:
+        h = ((gg - bb) / d + (gg < bb ? 6 : 0)) / 6;
+        break;
+      case gg:
+        h = ((bb - rr) / d + 2) / 6;
+        break;
+      case bb:
+        h = ((rr - gg) / d + 4) / 6;
+        break;
+    }
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToRgba(h, s, l, alpha) {
+  const { r, g, b } = hslToRgb(h, s, l);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function buildColorValue(h, s, l, a) {
+  const { r, g, b } = hslToRgb(h, s, l);
+  const hex = hslToHex(h, s, l);
+  const alphaHex = Math.round(a * 255).toString(16).padStart(2, "0");
+  const hR = Math.round(h), sR = Math.round(s), lR = Math.round(l);
+  const aR = Math.round(a * 100) / 100;
+  return {
+    hex,
+    hexa: `${hex}${alphaHex}`,
+    hsl: `hsl(${hR}, ${sR}%, ${lR}%)`,
+    hsla: `hsla(${hR}, ${sR}%, ${lR}%, ${aR})`,
+    rgb: `rgb(${r}, ${g}, ${b})`,
+    rgba: `rgba(${r}, ${g}, ${b}, ${aR})`,
+    h,
+    s,
+    l,
+    a
+  };
+}
+function deriveAccent(hex) {
+  const [h, s, l] = hexToHsl(hex);
+  return {
+    base: hex,
+    dot: hslToHex(h, s, Math.min(l + 12, 95)),
+    track: hex,
+    ring: hex,
+    glow: hslToRgba(h, s, l, 0.3),
+    light: hslToHex(h, Math.max(s - 20, 0), Math.min(l + 45, 96))
+  };
+}
+function accentToCssVars(tokens, prefix) {
+  return {
+    [`--${prefix}-accent`]: tokens.base,
+    [`--${prefix}-accent-dot`]: tokens.dot,
+    [`--${prefix}-accent-track`]: tokens.track,
+    [`--${prefix}-accent-ring`]: tokens.ring,
+    [`--${prefix}-accent-glow`]: tokens.glow,
+    [`--${prefix}-accent-light`]: tokens.light
+  };
+}
+var DISC = 200;
+var CopyIcon = () => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "7", height: "7", rx: "1.5", stroke: "currentColor", strokeWidth: "1.4" }),
+  /* @__PURE__ */ jsx("path", { d: "M2 9V2.5A.5.5 0 0 1 2.5 2H9", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" })
+] });
+var CheckIcon = () => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M2.5 7L5.5 10L11.5 4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var EyedropperIcon = () => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+  /* @__PURE__ */ jsx("path", { d: "M9.5 2.5L11.5 4.5L6 10L3 11L4 8L9.5 2.5Z", stroke: "currentColor", strokeWidth: "1.4", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 4L10 6", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("circle", { cx: "2.5", cy: "11.5", r: "1", fill: "currentColor" })
+] });
+function formatValue(mode, h, s, l, r, g, b, hex) {
+  if (mode === "hex") return hex.replace("#", "");
+  if (mode === "hsl") return `${Math.round(h)} ${Math.round(s)} ${Math.round(l)}`;
+  return `${r} ${g} ${b}`;
+}
+function parseValue(mode, raw) {
+  if (mode === "hex") {
+    const clean = raw.replace(/^#/, "");
+    if (!/^[0-9a-fA-F]{6}$/.test(clean)) return null;
+    const [h, s, l] = hexToHsl(`#${clean}`);
+    return [h, s, l];
+  }
+  const parts = raw.trim().split(/[\s,]+/).map(Number);
+  if (parts.length !== 3 || parts.some(isNaN)) return null;
+  if (mode === "hsl") {
+    const [h, s, l] = parts;
+    if (h < 0 || h > 360 || s < 0 || s > 100 || l < 0 || l > 100) return null;
+    return [h, s, l];
+  }
+  const [r, g, b] = parts;
+  if ([r, g, b].some((v) => v < 0 || v > 255)) return null;
+  return rgbToHsl(r, g, b);
+}
+var ColorInput = ({ mode, h, s, l, r, g, b, hex, onChange, onCopy, copied }) => {
+  const [draft, setDraft] = useState(() => formatValue(mode, h, s, l, r, g, b, hex));
+  const [focused, setFocused] = useState(false);
+  useEffect(() => {
+    if (!focused) setDraft(formatValue(mode, h, s, l, r, g, b, hex));
+  }, [focused, mode, h, s, l, r, g, b, hex]);
+  const placeholder = mode === "hex" ? "3b82f6" : mode === "hsl" ? "217 91 60" : "59 130 246";
+  return /* @__PURE__ */ jsxs("div", { className: ColorPicker_module_default.inputWrapper, children: [
+    mode === "hex" && /* @__PURE__ */ jsx("span", { className: ColorPicker_module_default.inputAddon, children: "#" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: ColorPicker_module_default.input,
+        value: draft,
+        placeholder,
+        spellCheck: false,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        onChange: (e) => {
+          const raw = e.target.value;
+          setDraft(raw);
+          const result = parseValue(mode, raw);
+          if (result) onChange(...result);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("button", { className: ColorPicker_module_default.inputCopyBtn, onClick: onCopy, tabIndex: -1, title: "Copia", children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}) })
+  ] });
+};
+function parseInitial(value) {
+  if (value?.startsWith("#")) {
+    const [h, s, l] = hexToHsl(value);
+    return [h, s, l, 1];
+  }
+  return [217, 91, 60, 1];
+}
+var ColorPicker = ({
+  value,
+  onChange,
+  showAlpha = true,
+  recentColors = [],
+  accent,
+  className
+}) => {
+  const init = parseInitial(value);
+  const [h, setH] = useState(init[0]);
+  const [s, setS] = useState(init[1]);
+  const [l, setL] = useState(init[2]);
+  const [a, setA] = useState(init[3]);
+  const [mode, setMode] = useState("hex");
+  const [copied, setCopied] = useState(false);
+  const [hasEyeDropper, setHasEyeDropper] = useState(false);
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    setHasEyeDropper(typeof window !== "undefined" && "EyeDropper" in window);
+  }, []);
+  useEffect(() => {
+    if (value?.startsWith("#")) {
+      const [nh, ns, nl] = hexToHsl(value);
+      setH(nh);
+      setS(ns);
+      setL(nl);
+    }
+  }, [value]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const img = ctx.createImageData(DISC, DISC);
+    const data = img.data;
+    const cx = DISC / 2;
+    const cy = DISC / 2;
+    const radius = DISC / 2;
+    for (let py = 0; py < DISC; py++) {
+      for (let px = 0; px < DISC; px++) {
+        const dx = px - cx;
+        const dy = py - cy;
+        const r = Math.sqrt(dx * dx + dy * dy);
+        const idx = (py * DISC + px) * 4;
+        if (r > radius) {
+          data[idx + 3] = 0;
+          continue;
+        }
+        const theta = Math.atan2(dy, dx) * 180 / Math.PI;
+        const hue = (theta + 360) % 360;
+        const sat = r / radius * 100;
+        const { r: rr2, g: gg2, b: bb2 } = hslToRgb(hue, sat, l);
+        data[idx] = rr2;
+        data[idx + 1] = gg2;
+        data[idx + 2] = bb2;
+        data[idx + 3] = r > radius - 1 ? Math.round(255 * (radius - r)) : 255;
+      }
+    }
+    ctx.putImageData(img, 0, 0);
+  }, [l]);
+  const notify = useCallback(
+    (nh, ns, nl, na) => {
+      onChange?.(buildColorValue(nh, ns, nl, na));
+    },
+    [onChange]
+  );
+  const updateDisc = useCallback(
+    (clientX, clientY, rect) => {
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const dx = clientX - cx;
+      const dy = clientY - cy;
+      const r = Math.sqrt(dx * dx + dy * dy);
+      const radius = rect.width / 2;
+      const clampedR = Math.min(r, radius);
+      const theta = Math.atan2(dy, dx) * 180 / Math.PI;
+      const nh = (theta + 360) % 360;
+      const ns = clampedR / radius * 100;
+      setH(nh);
+      setS(ns);
+      notify(nh, ns, l, a);
+    },
+    [l, a, notify]
+  );
+  const handleDiscPointerDown = useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      updateDisc(e.clientX, e.clientY, e.currentTarget.getBoundingClientRect());
+    },
+    [updateDisc]
+  );
+  const handleDiscPointerMove = useCallback(
+    (e) => {
+      if (e.buttons === 0) return;
+      updateDisc(e.clientX, e.clientY, e.currentTarget.getBoundingClientRect());
+    },
+    [updateDisc]
+  );
+  const updateL = useCallback(
+    (clientX, rect) => {
+      const nl = Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100));
+      setL(nl);
+      notify(h, s, nl, a);
+    },
+    [h, s, a, notify]
+  );
+  const handleLPointerDown = useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      updateL(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateL]
+  );
+  const handleLPointerMove = useCallback(
+    (e) => {
+      if (e.buttons === 0) return;
+      updateL(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateL]
+  );
+  const updateA = useCallback(
+    (clientX, rect) => {
+      const na = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      setA(na);
+      notify(h, s, l, na);
+    },
+    [h, s, l, notify]
+  );
+  const handleAPointerDown = useCallback(
+    (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      updateA(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateA]
+  );
+  const handleAPointerMove = useCallback(
+    (e) => {
+      if (e.buttons === 0) return;
+      updateA(e.clientX, e.currentTarget.getBoundingClientRect());
+    },
+    [updateA]
+  );
+  const { r: rr, g: gg, b: bb } = hslToRgb(h, s, l);
+  const hexStr = hslToHex(h, s, l);
+  const rgbStr = `rgb(${rr}, ${gg}, ${bb})`;
+  const colorValue = buildColorValue(h, s, l, a);
+  const dotX = DISC / 2 + s / 100 * (DISC / 2) * Math.cos(h * Math.PI / 180);
+  const dotY = DISC / 2 + s / 100 * (DISC / 2) * Math.sin(h * Math.PI / 180);
+  const lGradient = `linear-gradient(to right,
+    hsl(${h}, ${s}%, 5%),
+    hsl(${h}, ${s}%, 50%),
+    hsl(${h}, ${s}%, 95%))`;
+  const alphaGradient = `linear-gradient(to right, transparent, ${rgbStr})`;
+  const handleEyeDropper = async () => {
+    if (!window.EyeDropper) return;
+    try {
+      const result = await new window.EyeDropper().open();
+      const [nh, ns, nl] = hexToHsl(result.sRGBHex);
+      setH(nh);
+      setS(ns);
+      setL(nl);
+      notify(nh, ns, nl, a);
+    } catch {
+    }
+  };
+  const handleCopy = () => {
+    const text = mode === "hex" ? colorValue.hexa : mode === "hsl" ? colorValue.hsla : colorValue.rgba;
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+  const handleSwatch = (color) => {
+    const [nh, ns, nl] = hexToHsl(color);
+    setH(nh);
+    setS(ns);
+    setL(nl);
+    notify(nh, ns, nl, a);
+  };
+  const accentVars = accent ? accentToCssVars(deriveAccent(accent), "colorpicker") : {};
+  mode === "hex" ? colorValue.hexa : mode === "hsl" ? colorValue.hsla : colorValue.rgba;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [ColorPicker_module_default.colorPicker, className ?? ""].filter(Boolean).join(" "),
+      style: accentVars,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: ColorPicker_module_default.topRow, children: /* @__PURE__ */ jsxs("div", { className: ColorPicker_module_default.discWrapper, children: [
+          /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              width: DISC,
+              height: DISC,
+              className: ColorPicker_module_default.disc,
+              onPointerDown: handleDiscPointerDown,
+              onPointerMove: handleDiscPointerMove
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: ColorPicker_module_default.dot,
+              style: {
+                left: dotX,
+                top: dotY,
+                borderColor: l > 55 ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.85)"
+              }
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: ColorPicker_module_default.lSlider,
+            style: { backgroundImage: lGradient },
+            onPointerDown: handleLPointerDown,
+            onPointerMove: handleLPointerMove,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: ColorPicker_module_default.lThumb,
+                style: { left: `${l}%` }
+              }
+            )
+          }
+        ),
+        showAlpha && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: ColorPicker_module_default.alphaSlider,
+            style: { backgroundImage: alphaGradient },
+            onPointerDown: handleAPointerDown,
+            onPointerMove: handleAPointerMove,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: ColorPicker_module_default.alphaThumb,
+                style: { left: `${a * 100}%` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: ColorPicker_module_default.previewSwatch,
+            style: { background: showAlpha ? colorValue.rgba : hexStr },
+            children: hasEyeDropper && /* @__PURE__ */ jsx("button", { className: ColorPicker_module_default.eyedropperBtn, onClick: handleEyeDropper, title: "Pick color", children: /* @__PURE__ */ jsx(EyedropperIcon, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: ColorPicker_module_default.inputSection, children: [
+          /* @__PURE__ */ jsx("div", { className: ColorPicker_module_default.tabs, children: ["hex", "hsl", "rgb"].map((m) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: [ColorPicker_module_default.tab, mode === m ? ColorPicker_module_default.tabActive : ""].filter(Boolean).join(" "),
+              onClick: () => setMode(m),
+              children: m.toUpperCase()
+            },
+            m
+          )) }),
+          /* @__PURE__ */ jsx(
+            ColorInput,
+            {
+              mode,
+              h,
+              s,
+              l,
+              r: rr,
+              g: gg,
+              b: bb,
+              hex: hexStr,
+              onChange: (nh, ns, nl) => {
+                setH(nh);
+                setS(ns);
+                setL(nl);
+                notify(nh, ns, nl, a);
+              },
+              onCopy: handleCopy,
+              copied
+            }
+          )
+        ] }),
+        recentColors.length > 0 && /* @__PURE__ */ jsxs("div", { className: ColorPicker_module_default.recents, children: [
+          /* @__PURE__ */ jsx("span", { className: ColorPicker_module_default.recentsLabel, children: "Recent" }),
+          /* @__PURE__ */ jsx("div", { className: ColorPicker_module_default.swatches, children: recentColors.slice(0, 8).map((c, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: ColorPicker_module_default.recentSwatch,
+              style: { background: c },
+              onClick: () => handleSwatch(c),
+              title: c
+            },
+            i
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+
+export { ColorPicker };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map