// packages/components/src/menu/radio-item.tsx
import * as Ariakit from "@ariakit/react";
import { forwardRef, useContext } from "@wordpress/element";
import { Icon } from "@wordpress/icons";
import { Context } from "./context.js";
import * as Styled from "./styles.js";
import { SVG, Circle } from "@wordpress/primitives";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var radioCheck = /* @__PURE__ */ _jsx(SVG, {
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 24 24",
  children: /* @__PURE__ */ _jsx(Circle, {
    cx: 12,
    cy: 12,
    r: 3
  })
});
var RadioItem2 = forwardRef(function RadioItem3({
  suffix,
  children,
  disabled = false,
  hideOnClick = false,
  ...props
}, ref) {
  const menuContext = useContext(Context);
  if (!menuContext?.store) {
    throw new Error("Menu.RadioItem can only be rendered inside a Menu component");
  }
  return /* @__PURE__ */ _jsxs(Styled.RadioItem, {
    ref,
    ...props,
    accessibleWhenDisabled: true,
    disabled,
    hideOnClick,
    store: menuContext.store,
    children: [/* @__PURE__ */ _jsx(Ariakit.MenuItemCheck, {
      store: menuContext.store,
      render: /* @__PURE__ */ _jsx(Styled.ItemPrefixWrapper, {}),
      style: {
        width: "auto",
        height: "auto"
      },
      children: /* @__PURE__ */ _jsx(Icon, {
        icon: radioCheck,
        size: 24
      })
    }), /* @__PURE__ */ _jsxs(Styled.ItemContentWrapper, {
      children: [/* @__PURE__ */ _jsx(Styled.ItemChildrenWrapper, {
        children
      }), suffix && /* @__PURE__ */ _jsx(Styled.ItemSuffixWrapper, {
        children: suffix
      })]
    })]
  });
});
export {
  RadioItem2 as RadioItem
};
//# sourceMappingURL=radio-item.js.map
