import { j as r } from "../../../../../../../_virtual/jsx-runtime.js";
import "react";
import "../../../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import c from "./trans.svg.js";
import { isStandardColor as C } from "../../../../../../sdk/dist/shared/themes/color-system.js";
import v, { ElementColorPicker as w } from "../../ColorPicker.js";
import { IoCloseOutline as x } from "../../../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/io5/index.js";
import { FieldTitle as p } from "../field-factory.js";
import { tx as g, css as l } from "../../../../../../style-system/dist/twind.js";
import { Root as f, Trigger as m, Content as b } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/popover.js";
import { IconButton as h } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/icon-button.js";
const A = (t) => {
  const { schema: n, onChange: i, formSchema: a, currentValue: s, title: e, description: o } = t, u = n["ui:color-type"] ?? "page-background";
  return /* @__PURE__ */ r.jsx(
    F,
    {
      name: e,
      description: o,
      color: s,
      required: n.required,
      onChange: i,
      elementColorType: u,
      hideColorLabel: t.hideColorLabel ?? n["ui:hide-color-label"]
    }
  );
};
function F({
  name: t,
  description: n,
  color: i,
  onChange: a,
  colorType: s,
  showReset: e,
  elementColorType: o,
  hideColorLabel: u,
  labelPlacement: d = "left"
}) {
  return /* @__PURE__ */ r.jsxs(
    "div",
    {
      className: g("color-field flex-1 flex items-center", {
        "justify-between": d === "left",
        "justify-start gap-1.5": d === "right"
      }),
      children: [
        d === "left" && /* @__PURE__ */ r.jsx(p, { title: t, description: n }),
        s && /* @__PURE__ */ r.jsx(
          B,
          {
            onChange: a,
            colorType: s,
            color: i,
            showReset: e,
            hideColorLabel: u
          }
        ),
        o && /* @__PURE__ */ r.jsx(
          P,
          {
            onChange: a,
            elementColorType: o,
            color: i,
            showReset: e,
            hideColorLabel: u
          }
        ),
        d === "right" && /* @__PURE__ */ r.jsx(p, { title: t, description: n })
      ]
    }
  );
}
function j(t) {
  return t ? t === "#FFFFFF" ? "white" : t === "#000000" ? "black" : t.includes("bg-gradient") ? "gradient" : t.startsWith("preset-") ? "preset" : t.startsWith("border-") ? t.substring(7) : t.startsWith("bg-") ? t.substring(3) : t.startsWith("var(") ? t.substring(6, t.length - 1).replace("color", "").replace(/-+/, "") : t : "inherited";
}
function k(t) {
  return C(t) ? l({ backgroundColor: `${t}` }) : t.startsWith("bg-") ? t : t.match(/^(border|text|shadow)-/) ? t.replace(/^(border|text|shadow)-/, "bg-") : `bg-${t}`;
}
function P({
  color: t,
  onChange: n,
  elementColorType: i,
  side: a = "bottom",
  align: s = "end",
  showReset: e,
  hideColorLabel: o
}) {
  const u = t === "transparent" ? `url("${c}")` : "none", d = t === "transparent" ? "12px 12px" : "auto";
  return /* @__PURE__ */ r.jsxs(f, { children: [
    /* @__PURE__ */ r.jsx(m, { children: /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2 font-normal", children: [
      !o && j(t),
      /* @__PURE__ */ r.jsx(
        "button",
        {
          type: "button",
          "data-color": t,
          "data-element-color-type": i,
          className: g(
            "rounded-full w-6 h-6 ring ring-transparent hover:ring-upstart-400 border border-upstart-300",
            k(t ?? "bg-transparent"),
            !t?.includes("gradient") && l({
              backgroundImage: u
            }),
            l({
              backgroundSize: d,
              backgroundPosition: "center"
            })
          )
        }
      ),
      e && /* @__PURE__ */ r.jsx(
        h,
        {
          title: "Reset",
          size: "1",
          variant: "ghost",
          color: "gray",
          onClick: () => n("transparent"),
          children: /* @__PURE__ */ r.jsx(x, {})
        }
      )
    ] }) }),
    /* @__PURE__ */ r.jsx(
      y,
      {
        elementColorType: i,
        side: a,
        align: s,
        color: t,
        onChange: n
      }
    )
  ] });
}
function B({
  color: t,
  onChange: n,
  colorType: i,
  side: a = "bottom",
  align: s = "center",
  showReset: e,
  hideColorLabel: o
}) {
  const u = t === "transparent" ? `url("${c}")` : "none", d = t === "transparent" ? "100% 100%" : "auto";
  return /* @__PURE__ */ r.jsxs(f, { children: [
    /* @__PURE__ */ r.jsx(m, { children: /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
      !o && j(t),
      /* @__PURE__ */ r.jsx(
        "button",
        {
          type: "button",
          className: g(
            "rounded-full w-6 h-6 ring ring-transparent hover:ring-upstart-400 border border-gray-200",
            k(t ?? "bg-transparent"),
            !t?.includes("gradient") && l({
              backgroundImage: u
            }),
            l({
              backgroundSize: d,
              backgroundPosition: "center"
            })
          )
        }
      ),
      e && /* @__PURE__ */ r.jsx(
        h,
        {
          title: "Reset",
          size: "1",
          variant: "ghost",
          color: "gray",
          onClick: () => n("transparent"),
          children: /* @__PURE__ */ r.jsx(x, {})
        }
      )
    ] }) }),
    /* @__PURE__ */ r.jsx(W, { colorType: i, side: a, align: s, color: t, onChange: n })
  ] });
}
function W({
  colorType: t,
  side: n,
  align: i,
  color: a,
  onChange: s
}) {
  const e = "252px";
  return /* @__PURE__ */ r.jsx(b, { width: e, side: n, align: i, maxWidth: e, children: /* @__PURE__ */ r.jsx(v, { colorType: t, initialValue: a, onChange: s }) });
}
function y({
  elementColorType: t,
  side: n,
  align: i,
  color: a,
  onChange: s
}) {
  let e = "398px";
  switch (t) {
    case "page-background":
    case "background":
      e = "310px";
      break;
    case "border":
      e = "310px";
      break;
    case "text":
      e = "216px";
      break;
  }
  return /* @__PURE__ */ r.jsx(b, { width: e, side: n, align: i, maxWidth: e, children: /* @__PURE__ */ r.jsx(w, { elementColorType: t, initialValue: a, onChange: s }) });
}
export {
  P as ColorElementPreviewPill,
  F as ColorFieldRow,
  A as default
};
//# sourceMappingURL=color.js.map
