import { jsx as t } from "react/jsx-runtime";
import { useMemo as i } from "react";
import { DEFAULT_FONT_SIZE as l, FONT_SIZES as n } from "../../constants/index.js";
import a from "../../../jtl-dropdown/types/DropdownItem.js";
import f from "../../../jtl-dropdown/JTLDropdown.js";
import c from "../../../tooltip/Tooltip.js";
import { ToggleGroupItem as d } from "../../../toggle-group/TogglePrimitive.js";
const u = ({ onAction: m, selectedFontSize: o }) => {
  const e = i(() => `${o ?? l}px`, [o]), p = i(
    () => n.map((r) => ({
      type: a.Checkbox,
      label: `${r}`,
      isSelected: o === r,
      // Dispatch typed action with numeric size — no string encoding needed.
      onClick: () => m("fontSize", { size: r })
    })),
    [o, m]
  );
  return /* @__PURE__ */ t(f, { menuItems: p, position: "center", children: /* @__PURE__ */ t(c, { content: "Schriftgröße", asChild: !0, children: /* @__PURE__ */ t(d, { value: "fontSize", label: e, "aria-label": "Schriftgröße" }) }) });
};
u.displayName = "HtmlEditorFontSizeAction";
export {
  u as default
};
//# sourceMappingURL=HtmlEditorFontSizeAction.js.map
