import { jsx as o } from "react/jsx-runtime";
import { TinyColor as c } from "@ctrl/tinycolor";
import { useFocusRing as g } from "@react-aria/focus";
import { MenuItemContent as u } from "../MenuItem/MenuItemContent.es.js";
import { Trigger as d } from "../Trigger/Trigger.es.js";
import h from "../../foundation/Icon/Generated/IconDroplet.es.js";
import { IconSize as x } from "../../foundation/Icon/IconSize.es.js";
import { useMemoizedId as b } from "../../hooks/useMemoizedId.es.js";
import { toShortRgb as y } from "../../utilities/colors.es.js";
import { merge as r } from "../../utilities/merge.es.js";
import { ColorInputTitle as I } from "./ColorInputTitle.es.js";
const k = ({
  id: i,
  currentColor: t,
  format: m,
  isOpen: n = !1,
  disabled: e = !1,
  clearable: s = !1,
  onClear: w,
  onDelete: l
}) => {
  const { isFocusVisible: p, focusProps: f } = g(), a = t ? new c(y(t)).toRgbString() : "";
  return /* @__PURE__ */ o(
    d,
    {
      isOpen: n,
      disabled: e,
      isFocusVisible: p,
      showClear: !!t && s,
      onClear: w,
      onDelete: l,
      children: /* @__PURE__ */ o(
        "button",
        {
          ...f,
          type: "button",
          id: b(i),
          disabled: e,
          className: r([
            "tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none tw-py-2 tw-pl-3 tw-min-h-[34px] tw-pr-8",
            !t && "tw-text-black-60",
            e && "tw-text-black-40"
          ]),
          children: /* @__PURE__ */ o(
            u,
            {
              title: t ? /* @__PURE__ */ o(I, { format: m, currentColor: t }) : "Select color",
              decorator: t ? /* @__PURE__ */ o(
                "span",
                {
                  className: r([
                    "tw-h-4 tw-w-4 tw-rounded tw-flex tw-items-center tw-justify-center tw-ring-1 tw-ring-black-10 tw-ring-offset-1",
                    e && "tw-opacity-50"
                  ]),
                  style: { backgroundColor: a }
                }
              ) : /* @__PURE__ */ o("span", { className: "tw-text-black-70", children: /* @__PURE__ */ o(h, { size: x.Size12 }) })
            }
          )
        }
      )
    }
  );
};
k.displayName = "FondueColorInputTrigger";
export {
  k as ColorInputTrigger
};
//# sourceMappingURL=ColorPickerTrigger.es.js.map
