"use client";
import { renderElement } from "../../utils/use-render.js";
import { useControlsContext } from "./context.js";
import { forwardRef } from "react";
//#region src/ui/controls/controls-group.tsx
/** Layout group for related controls; sets `role="group"` when labeled. */
const ControlsGroup = forwardRef(function ControlsGroup(componentProps, forwardedRef) {
	const { render, className, style, children, ...elementProps } = componentProps;
	const { state, stateAttrMap } = useControlsContext();
	const role = elementProps["aria-label"] || elementProps["aria-labelledby"] ? "group" : void 0;
	return renderElement("div", {
		render,
		className,
		style
	}, {
		state,
		stateAttrMap,
		ref: [forwardedRef],
		props: [{
			role,
			children
		}, elementProps]
	});
});
//#endregion
export { ControlsGroup };

//# sourceMappingURL=controls-group.js.map