"use strict";
const css = require("./css-Pf9qxhQ4.cjs");
const jsxRuntime = require("./jsx-runtime-B3vWrP5x.cjs");
const Toggle = require("./Toggle-CAW20E9V.cjs");
const React = require("react");
require("./aggregator-Ca8xiVD2.cjs");
require("./Center-5NJ61qfA.cjs");
const Picker = ({ value, onChange, ...props }) => {
  const handleChange = (res) => {
    if (res.hex === "transparent")
      onChange(css.ZERO);
    onChange(new css.Color(res.hex, res.rgb.a));
  };
  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
    Toggle.SketchPicker,
    {
      className: css.CSS.B("color-picker"),
      color: new css.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 } = Toggle.use$1({ onVisibleChange, initialVisible });
  const bg = Toggle.use().colors.gray.l0;
  const d = new css.Color(value);
  const dragging = Toggle.useDraggingState();
  const canDrop = React.useCallback(
    ({ items }) => {
      const [k] = Toggle.filterByType(HAUL_TYPE, items);
      return k != null && k.key !== d.hex;
    },
    [d.hex]
  );
  const { startDrag, ...haulProps } = Toggle.useDragAndDrop({
    type: "Color.Swatch",
    onDrop: ({ items }) => {
      const dropped = Toggle.filterByType(HAUL_TYPE, items);
      if (items.length > 0)
        onChange == null ? void 0 : onChange(new css.Color(dropped[0].key));
      return dropped;
    },
    canDrop
  });
  const swatch = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
    Toggle.Button,
    {
      className: css.CSS(
        css.CSS.B("color-swatch"),
        css.CSS.size(size),
        d.contrast(bg) > 1.5 && d.a > 0.5 && css.CSS.M("no-border"),
        css.CSS.dropRegion(canDrop(dragging)),
        className
      ),
      draggable,
      onDragStart: () => startDrag([{ type: HAUL_TYPE, key: d.hex }]),
      style: { backgroundColor: css.cssString(value) },
      variant: "text",
      onClick: open,
      size,
      tooltip: onChange != null ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Toggle.Text, { level: "small", children: "Click to change color" }) : void 0,
      ...haulProps,
      ...props
    }
  );
  if (onChange == null)
    return swatch;
  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
    Toggle.Dialog,
    {
      close,
      visible,
      className: css.CSS.BE("color-swatch", "dropdown"),
      keepMounted: false,
      variant: "floating",
      children: [
        swatch,
        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Picker, { value, onChange })
      ]
    }
  );
};
const external = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  Color: css.Color,
  Picker,
  Swatch,
  ZERO: css.ZERO,
  cssString: css.cssString,
  fromHSLA: css.fromHSLA,
  toHex: css.toHex
}, Symbol.toStringTag, { value: "Module" }));
exports.Swatch = Swatch;
exports.external = external;
//# sourceMappingURL=external-p8bRcctL.cjs.map
