import { j as jsxRuntimeExports } 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@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import transSvg from "./trans.svg.js";
import { isStandardColor as p } from "../../../../../../sdk/dist/shared/themes/color-system.js";
import BaseColorPicker, { ElementColorPicker } from "../../ColorPicker.js";
import { IoCloseOutline } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/io5/index.js";
import { FieldTitle } from "../field-factory.js";
import { tx as D, css as E } from "../../../../../../style-system/dist/twind.js";
import { Root as P, Trigger as s, Content as i } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/popover.js";
import { IconButton as o } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/icon-button.js";
const ColorField = (props) => {
  const { schema, onChange, formSchema: formContext, currentValue, title, description } = props;
  const elementColorType = schema["ui:color-type"] ?? "page-background";
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    ColorFieldRow,
    {
      name: title,
      description,
      color: currentValue,
      required: schema.required,
      onChange,
      elementColorType,
      hideColorLabel: props.hideColorLabel ?? schema["ui:hide-color-label"]
    }
  );
};
function ColorFieldRow({
  name,
  description,
  color,
  onChange,
  colorType,
  showReset,
  elementColorType,
  hideColorLabel,
  labelPlacement = "left"
}) {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "div",
    {
      className: D("color-field flex-1 flex items-center", {
        "justify-between": labelPlacement === "left",
        "justify-start gap-1.5": labelPlacement === "right"
      }),
      children: [
        labelPlacement === "left" && /* @__PURE__ */ jsxRuntimeExports.jsx(FieldTitle, { title: name, description }),
        colorType && /* @__PURE__ */ jsxRuntimeExports.jsx(
          ColorBasePreviewPill,
          {
            onChange,
            colorType,
            color,
            showReset,
            hideColorLabel
          }
        ),
        elementColorType && /* @__PURE__ */ jsxRuntimeExports.jsx(
          ColorElementPreviewPill,
          {
            onChange,
            elementColorType,
            color,
            showReset,
            hideColorLabel
          }
        ),
        labelPlacement === "right" && /* @__PURE__ */ jsxRuntimeExports.jsx(FieldTitle, { title: name, description })
      ]
    }
  );
}
function formatColorName(color) {
  if (!color) {
    return "inherited";
  }
  if (color === "#FFFFFF") {
    return "white";
  }
  if (color === "#000000") {
    return "black";
  }
  if (color.includes("bg-gradient")) {
    return "gradient";
  }
  if (color.startsWith("preset-")) {
    return "preset";
  }
  if (color.startsWith("border-")) {
    return color.substring(7);
  }
  if (color.startsWith("bg-")) {
    return color.substring(3);
  }
  if (color.startsWith("var(")) {
    return color.substring(6, color.length - 1).replace("color", "").replace(/-+/, "");
  }
  return color;
}
function getColorPillBackgroundClass(color) {
  if (p(color)) {
    return E({ backgroundColor: `${color}` });
  }
  if (color.startsWith("bg-")) {
    return color;
  }
  if (color.match(/^(border|text|shadow)-/)) {
    return color.replace(/^(border|text|shadow)-/, "bg-");
  }
  return `bg-${color}`;
}
function ColorElementPreviewPill({
  color,
  onChange,
  elementColorType,
  side = "bottom",
  align = "end",
  showReset,
  hideColorLabel
}) {
  const pillBgFile = color === "transparent" ? `url("${transSvg}")` : "none";
  const backgroundSize = color === "transparent" ? "12px 12px" : "auto";
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(P, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 font-normal", children: [
      !hideColorLabel && formatColorName(color),
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        "button",
        {
          type: "button",
          "data-color": color,
          "data-element-color-type": elementColorType,
          className: D(
            "rounded-full w-6 h-6 ring ring-transparent hover:ring-upstart-400 border border-upstart-300",
            getColorPillBackgroundClass(color ?? "bg-transparent"),
            !color?.includes("gradient") && E({
              backgroundImage: pillBgFile
            }),
            E({
              backgroundSize,
              backgroundPosition: "center"
            })
          )
        }
      ),
      showReset && /* @__PURE__ */ jsxRuntimeExports.jsx(
        o,
        {
          title: "Reset",
          size: "1",
          variant: "ghost",
          color: "gray",
          onClick: () => onChange("transparent"),
          children: /* @__PURE__ */ jsxRuntimeExports.jsx(IoCloseOutline, {})
        }
      )
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      ColorElementPopover,
      {
        elementColorType,
        side,
        align,
        color,
        onChange
      }
    )
  ] });
}
function ColorBasePreviewPill({
  color,
  onChange,
  colorType,
  side = "bottom",
  align = "center",
  showReset,
  hideColorLabel
}) {
  const pillBgFile = color === "transparent" ? `url("${transSvg}")` : "none";
  const backgroundSize = color === "transparent" ? "100% 100%" : "auto";
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(P, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
      !hideColorLabel && formatColorName(color),
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        "button",
        {
          type: "button",
          className: D(
            "rounded-full w-6 h-6 ring ring-transparent hover:ring-upstart-400 border border-gray-200",
            getColorPillBackgroundClass(color ?? "bg-transparent"),
            !color?.includes("gradient") && E({
              backgroundImage: pillBgFile
            }),
            E({
              backgroundSize,
              backgroundPosition: "center"
            })
          )
        }
      ),
      showReset && /* @__PURE__ */ jsxRuntimeExports.jsx(
        o,
        {
          title: "Reset",
          size: "1",
          variant: "ghost",
          color: "gray",
          onClick: () => onChange("transparent"),
          children: /* @__PURE__ */ jsxRuntimeExports.jsx(IoCloseOutline, {})
        }
      )
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(ColorBasePopover, { colorType, side, align, color, onChange })
  ] });
}
function ColorBasePopover({
  colorType,
  side,
  align,
  color,
  onChange
}) {
  const width = "252px";
  return /* @__PURE__ */ jsxRuntimeExports.jsx(i, { width, side, align, maxWidth: width, children: /* @__PURE__ */ jsxRuntimeExports.jsx(BaseColorPicker, { colorType, initialValue: color, onChange }) });
}
function ColorElementPopover({
  elementColorType,
  side,
  align,
  color,
  onChange
}) {
  let width = "398px";
  switch (elementColorType) {
    case "page-background":
    case "background":
      width = "310px";
      break;
    case "border":
      width = "310px";
      break;
    case "text":
      width = "216px";
      break;
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsx(i, { width, side, align, maxWidth: width, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ElementColorPicker, { elementColorType, initialValue: color, onChange }) });
}
export {
  ColorElementPreviewPill,
  ColorFieldRow,
  ColorField as default
};
//# sourceMappingURL=color.js.map
