"use client";
import { renderElement } from "../../utils/use-render.js";
import { useMenuContext, useMenuGroupContext } from "./context.js";
import { useSafeId } from "../../utils/use-safe-id.js";
import { forwardRef, useLayoutEffect } from "react";
//#region src/ui/menu/menu-group-label.tsx
/** Non-interactive label for a group of items. Renders a `<div>`. */
const MenuGroupLabel = forwardRef(function MenuGroupLabel({ render, className, style, id: idProp, ...elementProps }, forwardedRef) {
	const { state } = useMenuContext();
	const group = useMenuGroupContext();
	const generatedId = useSafeId("menu-group-label");
	const id = idProp ?? generatedId;
	useLayoutEffect(() => {
		return group?.registerLabel(id);
	}, [group, id]);
	return renderElement("div", {
		render,
		className,
		style
	}, {
		state,
		ref: [forwardedRef],
		props: [{ id }, elementProps]
	});
});
//#endregion
export { MenuGroupLabel };

//# sourceMappingURL=menu-group-label.js.map