// packages/block-editor/src/components/text-alignment-control/index.js
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import {
  alignLeft,
  alignCenter,
  alignRight,
  alignJustify
} from "@wordpress/icons";
import { useMemo } from "@wordpress/element";
import {
  __experimentalToggleGroupControl as ToggleGroupControl,
  __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon
} from "@wordpress/components";
import { jsx } from "react/jsx-runtime";
var TEXT_ALIGNMENT_OPTIONS = [
  {
    label: __("Align text left"),
    value: "left",
    icon: alignLeft
  },
  {
    label: __("Align text center"),
    value: "center",
    icon: alignCenter
  },
  {
    label: __("Align text right"),
    value: "right",
    icon: alignRight
  },
  {
    label: __("Justify text"),
    value: "justify",
    icon: alignJustify
  }
];
var DEFAULT_OPTIONS = ["left", "center", "right"];
function TextAlignmentControl({
  className,
  value,
  onChange,
  options = DEFAULT_OPTIONS
}) {
  const validOptions = useMemo(
    () => TEXT_ALIGNMENT_OPTIONS.filter(
      (option) => options.includes(option.value)
    ),
    [options]
  );
  if (!validOptions.length) {
    return null;
  }
  return /* @__PURE__ */ jsx(
    ToggleGroupControl,
    {
      isDeselectable: true,
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
      label: __("Text alignment"),
      className: clsx(
        "block-editor-text-alignment-control",
        className
      ),
      value,
      onChange: (newValue) => {
        onChange(newValue === value ? void 0 : newValue);
      },
      children: validOptions.map((option) => {
        return /* @__PURE__ */ jsx(
          ToggleGroupControlOptionIcon,
          {
            value: option.value,
            icon: option.icon,
            label: option.label
          },
          option.value
        );
      })
    }
  );
}
export {
  TextAlignmentControl as default
};
//# sourceMappingURL=index.js.map
