import { jsx as i } from "react/jsx-runtime";
import { useCallback as n } from "react";
import { c as a } from "../../../../index-BtlgVD4m.js";
const l = ({ color: e, isActive: r, onSwatchClick: s }) => {
  const o = n(() => s(e), [e, s]), t = e.toLowerCase() === "#ffffff" || e.toLowerCase() === "#000000" || e === "var(--tailwind-colors-base-white)" || e === "var(--tailwind-colors-base-black)";
  return (
    // 28 × 28 px hit-target keeps the click area comfortable.
    /* @__PURE__ */ i(
      "button",
      {
        type: "button",
        onClick: o,
        "aria-label": `Farbe ${e}`,
        "aria-pressed": r,
        className: a(
          "hover:cursor-pointer",
          // Center the inner circle inside the 28 × 28 hit-target container.
          "flex h-fit w-fit items-center justify-center",
          // Active: 2 px ring wraps the container to highlight the circle.
          r && "rounded-full ring-1 ring-[var(--base-highlight)] ring-offset-1",
          "focus-visible:outline-none focus-visible:rounded-full focus-visible:ring-[1px] focus-visible:ring-[var(--base-highlight)] focus-visible:ring-offset-[1px]"
        ),
        children: /* @__PURE__ */ i(
          "span",
          {
            className: a(
              "block h-[22px] w-[22px] shrink-0 rounded-full",
              // Keep white/black swatches visible against the background.
              t && "border border-[var(--base-border)]"
            ),
            style: { backgroundColor: e }
          }
        )
      }
    )
  );
};
l.displayName = "ColorSwatch";
export {
  l as default
};
//# sourceMappingURL=ColorSwatch.js.map
