react-public-components 1.2.1 → 1.2.3

package/dist/chunk-BZXMWKD2.js

@@ -0,0 +1,922 @@
+import { CloseCircleFilled, DownOutlined } from './chunk-ISUXPTLV.js';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// ColorPicker/Color.ts
+var parseGradientStops = (gradientStr) => {
+  let clean = gradientStr.trim();
+  if (clean.toLowerCase().startsWith("linear-gradient")) {
+    const match = clean.match(/linear-gradient\([^,]+,\s*(.+)\)$/i);
+    if (match) {
+      clean = match[1];
+    }
+  }
+  const parts = clean.split(/,\s*(?=[a-zA-Z#])/);
+  const stops = [];
+  parts.forEach((part, index) => {
+    const percentMatch = part.match(/\s+(\d+(?:\.\d+)?)%\s*$/);
+    let percent = index === 0 ? 0 : 100;
+    let colorStr = part;
+    if (percentMatch) {
+      percent = parseFloat(percentMatch[1]);
+      colorStr = part.replace(/\s+\d+(?:\.\d+)?%\s*$/, "").trim();
+    }
+    stops.push({
+      color: generateColor(colorStr),
+      percent
+    });
+  });
+  if (stops.length === 0) {
+    return [
+      { color: generateColor("rgb(16,142,233)"), percent: 0 },
+      { color: generateColor("rgb(135,208,104)"), percent: 100 }
+    ];
+  }
+  return stops;
+};
+var formatGradientCss = (stops) => {
+  const sorted = [...stops].sort((a, b) => a.percent - b.percent);
+  return `linear-gradient(90deg, ${sorted.map((s) => `${s.color.toCssString()} ${s.percent}%`).join(", ")})`;
+};
+var formatGradientText = (stops) => {
+  const sorted = [...stops].sort((a, b) => a.percent - b.percent);
+  return sorted.map((s) => `${s.color.toCssString()} ${s.percent}%`).join(", ");
+};
+var Color = class _Color {
+  // 0 ~ 1
+  constructor(colorInput) {
+    this.h = 0;
+    // 0 ~ 360
+    this.s = 0;
+    // 0 ~ 100
+    this.b = 0;
+    // 0 ~ 100
+    this.a = 1;
+    var _a, _b;
+    if (!colorInput) {
+      this.h = 215;
+      this.s = 91;
+      this.b = 100;
+      this.a = 1;
+      return;
+    }
+    if (colorInput instanceof _Color) {
+      this.h = colorInput.h;
+      this.s = colorInput.s;
+      this.b = colorInput.b;
+      this.a = colorInput.a;
+      return;
+    }
+    if (typeof colorInput === "string") {
+      const parsed = _Color.parseString(colorInput);
+      this.h = parsed.h;
+      this.s = parsed.s;
+      this.b = parsed.b;
+      this.a = parsed.a;
+      return;
+    }
+    if (typeof colorInput === "object") {
+      if ("r" in colorInput && "g" in colorInput && "b" in colorInput) {
+        const hsb = _Color.rgbToHsb(colorInput.r, colorInput.g, colorInput.b, (_a = colorInput.a) != null ? _a : 1);
+        this.h = hsb.h;
+        this.s = hsb.s;
+        this.b = hsb.b;
+        this.a = hsb.a;
+      } else if ("h" in colorInput && "s" in colorInput && "b" in colorInput) {
+        this.h = Math.min(360, Math.max(0, colorInput.h));
+        this.s = Math.min(100, Math.max(0, colorInput.s));
+        this.b = Math.min(100, Math.max(0, colorInput.b));
+        this.a = Math.min(1, Math.max(0, (_b = colorInput.a) != null ? _b : 1));
+      }
+    }
+  }
+  static rgbToHsb(r, g, b, a = 1) {
+    const rNorm = r / 255;
+    const gNorm = g / 255;
+    const bNorm = b / 255;
+    const max = Math.max(rNorm, gNorm, bNorm);
+    const min = Math.min(rNorm, gNorm, bNorm);
+    const delta = max - min;
+    let h = 0;
+    if (delta !== 0) {
+      if (max === rNorm) {
+        h = (gNorm - bNorm) / delta % 6;
+      } else if (max === gNorm) {
+        h = (bNorm - rNorm) / delta + 2;
+      } else {
+        h = (rNorm - gNorm) / delta + 4;
+      }
+      h = Math.round(h * 60);
+      if (h < 0) h += 360;
+    }
+    const s = max === 0 ? 0 : Math.round(delta / max * 100);
+    const v = Math.round(max * 100);
+    return { h, s, b: v, a };
+  }
+  static hsbToRgb(h, s, b, a = 1) {
+    const sNorm = s / 100;
+    const vNorm = b / 100;
+    const c = vNorm * sNorm;
+    const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+    const m = vNorm - c;
+    let rPrime = 0;
+    let gPrime = 0;
+    let bPrime = 0;
+    if (h >= 0 && h < 60) {
+      rPrime = c;
+      gPrime = x;
+      bPrime = 0;
+    } else if (h >= 60 && h < 120) {
+      rPrime = x;
+      gPrime = c;
+      bPrime = 0;
+    } else if (h >= 120 && h < 180) {
+      rPrime = 0;
+      gPrime = c;
+      bPrime = x;
+    } else if (h >= 180 && h < 240) {
+      rPrime = 0;
+      gPrime = x;
+      bPrime = c;
+    } else if (h >= 240 && h < 300) {
+      rPrime = x;
+      gPrime = 0;
+      bPrime = c;
+    } else if (h >= 300 && h <= 360) {
+      rPrime = c;
+      gPrime = 0;
+      bPrime = x;
+    }
+    const r = Math.round((rPrime + m) * 255);
+    const g = Math.round((gPrime + m) * 255);
+    const bRes = Math.round((bPrime + m) * 255);
+    return { r, g, b: bRes, a };
+  }
+  static parseString(str) {
+    const trimmed = str.trim().toLowerCase();
+    if (trimmed.startsWith("#")) {
+      let hex = trimmed.slice(1);
+      if (hex.length === 3) {
+        hex = hex.split("").map((c) => c + c).join("");
+      }
+      if (hex.length === 6) {
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        return _Color.rgbToHsb(r, g, b, 1);
+      }
+      if (hex.length === 8) {
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        const a = parseInt(hex.slice(6, 8), 16) / 255;
+        return _Color.rgbToHsb(r, g, b, a);
+      }
+    }
+    const rgbMatch = trimmed.match(
+      /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)$/
+    );
+    if (rgbMatch) {
+      const r = parseInt(rgbMatch[1], 10);
+      const g = parseInt(rgbMatch[2], 10);
+      const b = parseInt(rgbMatch[3], 10);
+      const a = rgbMatch[4] !== void 0 ? parseFloat(rgbMatch[4]) : 1;
+      return _Color.rgbToHsb(r, g, b, a);
+    }
+    const hsbMatch = trimmed.match(
+      /^hsba?\(\s*(\d+)\s*,\s*(\d+)%?\s*,\s*(\d+)%?(?:\s*,\s*([\d.]+))?\s*\)$/
+    );
+    if (hsbMatch) {
+      const h = parseInt(hsbMatch[1], 10);
+      const s = parseInt(hsbMatch[2], 10);
+      const b = parseInt(hsbMatch[3], 10);
+      const a = hsbMatch[4] !== void 0 ? parseFloat(hsbMatch[4]) : 1;
+      return { h, s, b, a };
+    }
+    return { h: 215, s: 91, b: 100, a: 1 };
+  }
+  toRgb() {
+    return _Color.hsbToRgb(this.h, this.s, this.b, this.a);
+  }
+  toRgbString() {
+    const { r, g, b, a } = this.toRgb();
+    if (a < 1) {
+      return `rgba(${r}, ${g}, ${b}, ${Number(a.toFixed(2))})`;
+    }
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+  toHsb() {
+    return {
+      h: Math.round(this.h),
+      s: Math.round(this.s),
+      b: Math.round(this.b),
+      a: Number(this.a.toFixed(2))
+    };
+  }
+  toHsbString() {
+    const { h, s, b, a } = this.toHsb();
+    if (a < 1) {
+      return `hsba(${h}, ${s}%, ${b}%, ${a})`;
+    }
+    return `hsb(${h}, ${s}%, ${b}%)`;
+  }
+  toHex() {
+    const { r, g, b } = this.toRgb();
+    const rHex = r.toString(16).padStart(2, "0");
+    const gHex = g.toString(16).padStart(2, "0");
+    const bHex = b.toString(16).padStart(2, "0");
+    return `${rHex}${gHex}${bHex}`;
+  }
+  toHexString() {
+    return `#${this.toHex()}`;
+  }
+  toCssString() {
+    if (this.a < 1) {
+      return this.toRgbString();
+    }
+    return this.toHexString();
+  }
+};
+var generateColor = (color) => {
+  if (color instanceof Color) {
+    return color;
+  }
+  return new Color(color);
+};
+var ColorPicker = (props) => {
+  var _a, _b, _c, _d;
+  const {
+    allowClear = false,
+    arrow = true,
+    children,
+    defaultValue = "#1677ff",
+    defaultFormat = "hex",
+    disabled = false,
+    disabledAlpha = false,
+    disabledFormat = false,
+    destroyOnHidden = false,
+    format,
+    mode = "single",
+    open,
+    presets,
+    placement = "bottomLeft",
+    panelRender,
+    showText,
+    size = "middle",
+    trigger = "click",
+    value,
+    onChange,
+    onChangeComplete,
+    onFormatChange,
+    onOpenChange,
+    onClear,
+    className = "",
+    style,
+    ...restProps
+  } = props;
+  const modeOptions = Array.isArray(mode) ? mode : mode === "gradient" ? ["gradient"] : ["single"];
+  const [activeMode, setActiveMode] = useState((_a = modeOptions[0]) != null ? _a : "single");
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = open !== void 0 ? open : internalOpen;
+  const [gradientStops, setGradientStops] = useState(() => {
+    if (typeof defaultValue === "string" && defaultValue.includes("%")) {
+      return parseGradientStops(defaultValue);
+    }
+    return [
+      { color: generateColor("rgb(16, 142, 233)"), percent: 0 },
+      { color: generateColor("rgb(135, 208, 104)"), percent: 100 }
+    ];
+  });
+  const [activeStopIndex, setActiveStopIndex] = useState(0);
+  const [internalColor, setInternalColor] = useState(() => generateColor(defaultValue));
+  const currentColor = activeMode === "gradient" ? (_c = (_b = gradientStops[activeStopIndex]) == null ? void 0 : _b.color) != null ? _c : internalColor : value !== void 0 ? generateColor(value) : internalColor;
+  const [internalFormat, setInternalFormat] = useState(defaultFormat);
+  const currentFormat = format !== void 0 ? format : internalFormat;
+  const containerRef = useRef(null);
+  const paletteRef = useRef(null);
+  const hueSliderRef = useRef(null);
+  const alphaSliderRef = useRef(null);
+  const gradientRailRef = useRef(null);
+  const isDraggingRef = useRef(false);
+  const handleOpenChange = useCallback(
+    (nextOpen) => {
+      if (disabled) return;
+      if (open === void 0) {
+        setInternalOpen(nextOpen);
+      }
+      onOpenChange == null ? void 0 : onOpenChange(nextOpen);
+    },
+    [disabled, open, onOpenChange]
+  );
+  const updateColor = useCallback(
+    (nextColor, isComplete = false) => {
+      if (activeMode === "gradient") {
+        const nextStops = [...gradientStops];
+        nextStops[activeStopIndex] = {
+          ...nextStops[activeStopIndex],
+          color: nextColor
+        };
+        setGradientStops(nextStops);
+        const cssStr = formatGradientCss(nextStops);
+        onChange == null ? void 0 : onChange(nextColor, cssStr);
+        if (isComplete) {
+          onChangeComplete == null ? void 0 : onChangeComplete(nextColor);
+        }
+        return;
+      }
+      if (value === void 0) {
+        setInternalColor(nextColor);
+      }
+      onChange == null ? void 0 : onChange(nextColor, nextColor.toCssString());
+      if (isComplete) {
+        onChangeComplete == null ? void 0 : onChangeComplete(nextColor);
+      }
+    },
+    [activeMode, gradientStops, activeStopIndex, value, onChange, onChangeComplete]
+  );
+  const currentColorRef = useRef(currentColor);
+  currentColorRef.current = currentColor;
+  const updateColorRef = useRef(updateColor);
+  updateColorRef.current = updateColor;
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        handleOpenChange(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, handleOpenChange]);
+  const handlePaletteDrag = useCallback((e) => {
+    if (!paletteRef.current) return;
+    const rect = paletteRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));
+    const y = Math.max(0, Math.min(rect.height, e.clientY - rect.top));
+    const s = Math.round(x / rect.width * 100);
+    const b = Math.round((1 - y / rect.height) * 100);
+    const curr = currentColorRef.current;
+    const targetAlpha = curr.a === 0 ? 1 : curr.a;
+    const newColor = new Color({
+      h: curr.h,
+      s,
+      b,
+      a: targetAlpha
+    });
+    updateColorRef.current(newColor);
+  }, []);
+  const handlePaletteMouseDown = (e) => {
+    e.preventDefault();
+    isDraggingRef.current = true;
+    handlePaletteDrag(e);
+    const handleMouseMove = (moveEvent) => {
+      if (isDraggingRef.current) {
+        handlePaletteDrag(moveEvent);
+      }
+    };
+    const handleMouseUp = () => {
+      if (isDraggingRef.current) {
+        isDraggingRef.current = false;
+        onChangeComplete == null ? void 0 : onChangeComplete(currentColorRef.current);
+      }
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  };
+  const handleHueDrag = useCallback((e) => {
+    if (!hueSliderRef.current) return;
+    const rect = hueSliderRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));
+    const h = Math.round(x / rect.width * 360);
+    const curr = currentColorRef.current;
+    const targetAlpha = curr.a === 0 ? 1 : curr.a;
+    const newColor = new Color({
+      h: h === 360 ? 0 : h,
+      s: curr.s,
+      b: curr.b,
+      a: targetAlpha
+    });
+    updateColorRef.current(newColor);
+  }, []);
+  const handleHueMouseDown = (e) => {
+    e.preventDefault();
+    handleHueDrag(e);
+    const handleMouseMove = (moveEvent) => {
+      handleHueDrag(moveEvent);
+    };
+    const handleMouseUp = () => {
+      onChangeComplete == null ? void 0 : onChangeComplete(currentColorRef.current);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  };
+  const handleAlphaDrag = useCallback((e) => {
+    if (!alphaSliderRef.current) return;
+    const rect = alphaSliderRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));
+    const a = Number((x / rect.width).toFixed(2));
+    const curr = currentColorRef.current;
+    const newColor = new Color({
+      h: curr.h,
+      s: curr.s,
+      b: curr.b,
+      a
+    });
+    updateColorRef.current(newColor);
+  }, []);
+  const handleAlphaMouseDown = (e) => {
+    e.preventDefault();
+    handleAlphaDrag(e);
+    const handleMouseMove = (moveEvent) => {
+      handleAlphaDrag(moveEvent);
+    };
+    const handleMouseUp = () => {
+      onChangeComplete == null ? void 0 : onChangeComplete(currentColorRef.current);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  };
+  const handleGradientStopDrag = useCallback(
+    (index, e) => {
+      if (!gradientRailRef.current) return;
+      const rect = gradientRailRef.current.getBoundingClientRect();
+      const x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));
+      const percent = Math.round(x / rect.width * 100);
+      const nextStops = [...gradientStops];
+      nextStops[index] = {
+        ...nextStops[index],
+        percent
+      };
+      setGradientStops(nextStops);
+      onChange == null ? void 0 : onChange(nextStops[index].color, formatGradientCss(nextStops));
+    },
+    [gradientStops, onChange]
+  );
+  const handleGradientStopMouseDown = (index, e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setActiveStopIndex(index);
+    const handleMouseMove = (moveEvent) => {
+      handleGradientStopDrag(index, moveEvent);
+    };
+    const handleMouseUp = () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  };
+  const handleGradientRailClick = (e) => {
+    if (!gradientRailRef.current) return;
+    const rect = gradientRailRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));
+    const percent = Math.round(x / rect.width * 100);
+    const newStopColor = generateColor("#1677ff");
+    const nextStops = [...gradientStops, { color: newStopColor, percent }];
+    setGradientStops(nextStops);
+    setActiveStopIndex(nextStops.length - 1);
+    onChange == null ? void 0 : onChange(newStopColor, formatGradientCss(nextStops));
+  };
+  const handleFormatSelectChange = (newFormat) => {
+    if (format === void 0) {
+      setInternalFormat(newFormat);
+    }
+    onFormatChange == null ? void 0 : onFormatChange(newFormat);
+  };
+  const handleClearClick = (e) => {
+    e.stopPropagation();
+    const cleared = new Color({ h: 0, s: 0, b: 100, a: 0 });
+    updateColor(cleared, true);
+    onClear == null ? void 0 : onClear();
+  };
+  const renderPickerContent = () => {
+    const hueColor = new Color({ h: currentColor.h, s: 100, b: 100, a: 1 }).toHexString();
+    return /* @__PURE__ */ jsxs("div", { className: "react-public-color-picker-panel-body", children: [
+      (modeOptions.length > 1 || allowClear && !disabled) && /* @__PURE__ */ jsxs("div", { className: "react-public-color-picker-panel-header", children: [
+        modeOptions.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "react-public-color-picker-mode-segmented", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `react-public-color-picker-mode-option ${activeMode === "single" ? "active" : ""}`,
+              onClick: () => setActiveMode("single"),
+              children: "\u5355\u8272"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `react-public-color-picker-mode-option ${activeMode === "gradient" ? "active" : ""}`,
+              onClick: () => setActiveMode("gradient"),
+              children: "\u6E10\u53D8"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx("div", {}),
+        allowClear && !disabled && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "react-public-color-picker-panel-clear-btn",
+            onClick: handleClearClick,
+            title: "\u6E05\u9664\u989C\u8272",
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", children: /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: "4",
+                y1: "4",
+                x2: "20",
+                y2: "20",
+                stroke: "#ff4d4f",
+                strokeWidth: "2.5",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ] }),
+      activeMode === "gradient" && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: gradientRailRef,
+          className: "react-public-color-picker-gradient-slider",
+          onClick: handleGradientRailClick,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "react-public-color-picker-gradient-bg",
+                style: { background: formatGradientCss(gradientStops) }
+              }
+            ),
+            gradientStops.map((stop, idx) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `react-public-color-picker-gradient-stop-handle ${activeStopIndex === idx ? "active" : ""}`,
+                style: {
+                  left: `${stop.percent}%`,
+                  backgroundColor: stop.color.toCssString()
+                },
+                onMouseDown: (e) => handleGradientStopMouseDown(idx, e)
+              },
+              idx
+            ))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: paletteRef,
+          className: "react-public-color-picker-palette",
+          style: { backgroundColor: hueColor },
+          onMouseDown: handlePaletteMouseDown,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "react-public-color-picker-saturation-bg" }),
+            /* @__PURE__ */ jsx("div", { className: "react-public-color-picker-brightness-bg" }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "react-public-color-picker-handler",
+                style: {
+                  left: `${currentColor.s}%`,
+                  top: `${100 - currentColor.b}%`,
+                  backgroundColor: currentColor.toCssString()
+                }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "react-public-color-picker-slider-container", children: [
+        /* @__PURE__ */ jsxs("div", { className: "react-public-color-picker-slider-group", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: hueSliderRef,
+              className: "react-public-color-picker-slider react-public-color-picker-hue-slider",
+              onMouseDown: handleHueMouseDown,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "react-public-color-picker-slider-handler",
+                  style: {
+                    left: `${currentColor.h / 360 * 100}%`,
+                    backgroundColor: hueColor
+                  }
+                }
+              )
+            }
+          ),
+          !disabledAlpha && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: alphaSliderRef,
+              className: "react-public-color-picker-slider react-public-color-picker-alpha-slider",
+              onMouseDown: handleAlphaMouseDown,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "react-public-color-picker-alpha-bg",
+                    style: {
+                      background: `linear-gradient(to right, transparent, ${new Color({
+                        h: currentColor.h,
+                        s: currentColor.s,
+                        b: currentColor.b,
+                        a: 1
+                      }).toHexString()})`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "react-public-color-picker-slider-handler",
+                    style: {
+                      left: `${currentColor.a * 100}%`,
+                      backgroundColor: currentColor.toCssString()
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "react-public-color-picker-side-block", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "react-public-color-picker-color-inner",
+            style: activeMode === "gradient" ? { background: formatGradientCss(gradientStops) } : { backgroundColor: currentColor.toCssString() }
+          }
+        ) })
+      ] }),
+      !disabledFormat && /* @__PURE__ */ jsxs("div", { className: "react-public-color-picker-inputs", children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "react-public-color-picker-format-select",
+            value: currentFormat,
+            onChange: (e) => handleFormatSelectChange(e.target.value),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "hex", children: "HEX" }),
+              /* @__PURE__ */ jsx("option", { value: "rgb", children: "RGB" }),
+              /* @__PURE__ */ jsx("option", { value: "hsb", children: "HSB" })
+            ]
+          }
+        ),
+        currentFormat === "hex" && /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "react-public-color-picker-input-field",
+            value: currentColor.toHex(),
+            onChange: (e) => {
+              const val = e.target.value;
+              const newC = new Color(`#${val}`);
+              newC.a = currentColor.a;
+              updateColor(newC, true);
+            }
+          }
+        ),
+        currentFormat === "rgb" && /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "react-public-color-picker-input-field",
+            value: `${currentColor.toRgb().r}, ${currentColor.toRgb().g}, ${currentColor.toRgb().b}`,
+            onChange: (e) => {
+              const parts = e.target.value.split(",").map((v) => parseInt(v.trim(), 10));
+              if (parts.length >= 3 && !parts.some((n) => isNaN(n))) {
+                const newC = new Color({
+                  r: parts[0],
+                  g: parts[1],
+                  b: parts[2],
+                  a: currentColor.a
+                });
+                updateColor(newC, true);
+              }
+            }
+          }
+        ),
+        currentFormat === "hsb" && /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "react-public-color-picker-input-field",
+            value: `${currentColor.h}\xB0, ${currentColor.s}%, ${currentColor.b}%`,
+            onChange: (e) => {
+              const parts = e.target.value.replace(/[%°]/g, "").split(",").map((v) => parseInt(v.trim(), 10));
+              if (parts.length >= 3 && !parts.some((n) => isNaN(n))) {
+                const newC = new Color({
+                  h: parts[0],
+                  s: parts[1],
+                  b: parts[2],
+                  a: currentColor.a
+                });
+                updateColor(newC, true);
+              }
+            }
+          }
+        ),
+        !disabledAlpha && /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "react-public-color-picker-alpha-input",
+            value: `${Math.round(currentColor.a * 100)}%`,
+            onChange: (e) => {
+              const val = parseInt(e.target.value.replace("%", ""), 10);
+              if (!isNaN(val)) {
+                const newA = Math.max(0, Math.min(1, val / 100));
+                const newC = new Color({
+                  h: currentColor.h,
+                  s: currentColor.s,
+                  b: currentColor.b,
+                  a: newA
+                });
+                updateColor(newC, true);
+              }
+            }
+          }
+        )
+      ] })
+    ] });
+  };
+  const [collapsedPresets, setCollapsedPresets] = useState({});
+  const togglePresetCollapse = (idx) => {
+    setCollapsedPresets((prev) => ({
+      ...prev,
+      [idx]: !prev[idx]
+    }));
+  };
+  const renderPresetsContent = (isStandalone = false) => {
+    if (!presets || presets.length === 0) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `react-public-color-picker-presets ${isStandalone ? "react-public-color-picker-presets-standalone" : ""}`,
+        children: presets.map((preset, idx) => {
+          var _a2, _b2;
+          const isCollapsed = (_a2 = collapsedPresets[idx]) != null ? _a2 : preset.defaultOpen === false;
+          return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 8 }, children: [
+            preset.label && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "react-public-color-picker-preset-title",
+                onClick: () => togglePresetCollapse(idx),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    DownOutlined,
+                    {
+                      style: {
+                        fontSize: 10,
+                        color: "#8c8c8c",
+                        transition: "transform 0.2s ease",
+                        transform: isCollapsed ? "rotate(-90deg)" : "rotate(0deg)"
+                      }
+                    }
+                  ),
+                  preset.label
+                ]
+              }
+            ),
+            !isCollapsed && /* @__PURE__ */ jsx("div", { className: "react-public-color-picker-preset-colors", children: preset.colors.map((c, colorIdx) => {
+              const presetColor = generateColor(c);
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "react-public-color-picker-preset-item",
+                  onClick: () => updateColor(presetColor, true),
+                  title: presetColor.toCssString(),
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "react-public-color-picker-preset-item-inner",
+                      style: { backgroundColor: presetColor.toCssString() }
+                    }
+                  )
+                },
+                colorIdx
+              );
+            }) })
+          ] }, (_b2 = preset.key) != null ? _b2 : idx);
+        })
+      }
+    );
+  };
+  const defaultPanel = /* @__PURE__ */ jsxs("div", { children: [
+    renderPickerContent(),
+    renderPresetsContent(true)
+  ] });
+  const finalPanel = panelRender ? panelRender(defaultPanel, {
+    components: {
+      Picker: renderPickerContent,
+      Presets: () => renderPresetsContent(false)
+    }
+  }) : defaultPanel;
+  const triggerBgStyle = activeMode === "gradient" ? { background: formatGradientCss(gradientStops) } : { backgroundColor: currentColor.toCssString() };
+  const renderText = () => {
+    if (!showText) return null;
+    if (typeof showText === "function") {
+      return showText(activeMode === "gradient" ? gradientStops : currentColor);
+    }
+    const textContent = activeMode === "gradient" ? formatGradientText(gradientStops) : currentColor.toCssString();
+    return /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "#595959" }, children: textContent });
+  };
+  const renderCustomTrigger = () => {
+    if (!children) return null;
+    if (typeof children === "function") {
+      return children(currentColor);
+    }
+    return children;
+  };
+  const triggerProps = {
+    onClick: () => {
+      if (trigger === "click") {
+        handleOpenChange(!isOpen);
+      }
+    },
+    onMouseEnter: () => {
+      if (trigger === "hover") {
+        handleOpenChange(true);
+      }
+    },
+    onMouseLeave: () => {
+      if (trigger === "hover") {
+        handleOpenChange(false);
+      }
+    }
+  };
+  const showArrow = typeof arrow === "boolean" ? arrow : (_d = arrow == null ? void 0 : arrow.pointAtCenter) != null ? _d : true;
+  if (destroyOnHidden && !isOpen) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: `react-public-color-picker-trigger react-public-color-picker-size-${size} ${disabled ? "react-public-color-picker-disabled" : ""} ${className}`.trim(),
+        style,
+        ...triggerProps,
+        ...restProps,
+        children: children ? renderCustomTrigger() : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "react-public-color-picker-color-block", children: /* @__PURE__ */ jsx("div", { className: "react-public-color-picker-color-inner", style: triggerBgStyle }) }),
+          renderText()
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      style: { position: "relative", display: "inline-block" },
+      ...triggerProps,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `react-public-color-picker-trigger react-public-color-picker-size-${size} ${disabled ? "react-public-color-picker-disabled" : ""} ${className}`.trim(),
+            style,
+            ...restProps,
+            children: [
+              children ? renderCustomTrigger() : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "react-public-color-picker-color-block", children: /* @__PURE__ */ jsx("div", { className: "react-public-color-picker-color-inner", style: triggerBgStyle }) }),
+                renderText()
+              ] }),
+              allowClear && !disabled && /* @__PURE__ */ jsx(
+                CloseCircleFilled,
+                {
+                  className: "react-public-color-picker-clear-icon",
+                  onClick: handleClearClick
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `react-public-color-picker-popover react-public-color-picker-popover-${placement}`,
+            style: {
+              top: placement.startsWith("bottom") ? "calc(100% + 8px)" : void 0,
+              bottom: placement.startsWith("top") ? "calc(100% + 8px)" : void 0,
+              left: placement.endsWith("Left") || placement === "bottom" ? 0 : void 0,
+              right: placement.endsWith("Right") ? 0 : void 0
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              showArrow && /* @__PURE__ */ jsx("div", { className: "react-public-color-picker-arrow" }),
+              finalPanel
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var ColorPicker_default = ColorPicker;
+
+export { Color, ColorPicker_default, generateColor };
+//# sourceMappingURL=chunk-BZXMWKD2.js.map
+//# sourceMappingURL=chunk-BZXMWKD2.js.map