import { jsxs as f, Fragment as c, jsx as e } from "react/jsx-runtime";
import i from "../../../box/Box.js";
import u from "../../../tab/Tab.js";
import { c as t } from "../../../../index-BtlgVD4m.js";
const p = ({ activeTab: n, activeColor: a, palette: o, onTabChange: d, onSwatchClick: l }) => /* @__PURE__ */ f(c, { children: [
  /* @__PURE__ */ e(i, { className: "flex border-b border-[var(--base-border)]", children: /* @__PURE__ */ e(
    u,
    {
      tabs: ["text", "background"].map((r) => ({
        id: r,
        title: r === "text" ? "Text" : "Hintergrund"
      })),
      onSelectTab: d,
      activeTab: n
    }
  ) }),
  /* @__PURE__ */ e(i, { className: "grid grid-cols-8 gap-[var(--spacing-1)]", role: "group", "aria-label": "Farbpalette", children: o.map((r) => {
    const s = (a == null ? void 0 : a.toLowerCase()) === r.toLowerCase(), b = r.toLowerCase() === "#ffffff" || r.toLowerCase() === "#000000";
    return (
      // 28 × 28 px hit-target button — keeps the click area comfortable.
      /* @__PURE__ */ e(
        "button",
        {
          type: "button",
          onClick: () => l(r),
          "aria-label": `Farbe ${r}`,
          "aria-pressed": s,
          className: t(
            "hover:cursor-pointer",
            // Center the inner circle inside the 28 × 28 hit-target container.
            "flex h-[var(--spacing-7)] w-[var(--spacing-7)] items-center justify-center",
            // Active: 2 px ring wraps the container to highlight the circle.
            s && "rounded-full ring-2 ring-[var(--base-highlight)] ring-offset-1",
            "focus-visible:outline-none focus-visible:rounded-full focus-visible:ring-2 focus-visible:ring-[var(--base-primary)]"
          ),
          children: /* @__PURE__ */ e(
            "span",
            {
              className: t(
                "block h-[22px] w-[22px] shrink-0 rounded-full",
                // Keep white/black swatches visible against the popover background.
                b && "border border-[var(--base-border)]"
              ),
              style: { backgroundColor: r }
            }
          )
        },
        r
      )
    );
  }) })
] });
p.displayName = "HtmlEditorColorSwatchGrid";
export {
  p as default
};
//# sourceMappingURL=HtmlEditorColorSwatchGrid.js.map
