import { C as CSS, a as Color, Z as ZERO, c as cssString, f as fromHSLA, t as toHex } from "./css-DoalWJF6.js";
import { j as jsxRuntimeExports } from "./jsx-runtime-mMz73N64.js";
import { i as SketchPicker, j as use, u as use$1, k as useDraggingState, l as filterByType, m as useDragAndDrop, B as Button, e as Text, n as Dialog } from "./Toggle-DcOiWiHG.js";
import { useCallback } from "react";
import "./aggregator-Dl2jHye5.js";
import "./Center-hbwH7rg9.js";
const Picker = ({ value, onChange, ...props }) => {
  const handleChange = (res) => {
    if (res.hex === "transparent")
      onChange(ZERO);
    onChange(new Color(res.hex, res.rgb.a));
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    SketchPicker,
    {
      className: CSS.B("color-picker"),
      color: new Color(value).hex,
      onChange: handleChange,
      presetColors: [],
      ...props
    }
  );
};
const HAUL_TYPE = "color";
const Swatch = ({
  value,
  onChange,
  className,
  size = "medium",
  onVisibleChange,
  initialVisible,
  draggable = true,
  ...props
}) => {
  const { visible, open, close } = use({ onVisibleChange, initialVisible });
  const bg = use$1().colors.gray.l0;
  const d = new Color(value);
  const dragging = useDraggingState();
  const canDrop = useCallback(
    ({ items }) => {
      const [k] = filterByType(HAUL_TYPE, items);
      return k != null && k.key !== d.hex;
    },
    [d.hex]
  );
  const { startDrag, ...haulProps } = useDragAndDrop({
    type: "Color.Swatch",
    onDrop: ({ items }) => {
      const dropped = filterByType(HAUL_TYPE, items);
      if (items.length > 0)
        onChange == null ? void 0 : onChange(new Color(dropped[0].key));
      return dropped;
    },
    canDrop
  });
  const swatch = /* @__PURE__ */ jsxRuntimeExports.jsx(
    Button,
    {
      className: CSS(
        CSS.B("color-swatch"),
        CSS.size(size),
        d.contrast(bg) > 1.5 && d.a > 0.5 && CSS.M("no-border"),
        CSS.dropRegion(canDrop(dragging)),
        className
      ),
      draggable,
      onDragStart: () => startDrag([{ type: HAUL_TYPE, key: d.hex }]),
      style: { backgroundColor: cssString(value) },
      variant: "text",
      onClick: open,
      size,
      tooltip: onChange != null ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { level: "small", children: "Click to change color" }) : void 0,
      ...haulProps,
      ...props
    }
  );
  if (onChange == null)
    return swatch;
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    Dialog,
    {
      close,
      visible,
      className: CSS.BE("color-swatch", "dropdown"),
      keepMounted: false,
      variant: "floating",
      children: [
        swatch,
        /* @__PURE__ */ jsxRuntimeExports.jsx(Picker, { value, onChange })
      ]
    }
  );
};
const external = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  Color,
  Picker,
  Swatch,
  ZERO,
  cssString,
  fromHSLA,
  toHex
}, Symbol.toStringTag, { value: "Module" }));
export {
  Swatch as S,
  external as e
};
//# sourceMappingURL=external-CPB95nWX.js.map
