@primer/react/dist/ButtonGroup/ButtonGroup.js

An implementation of GitHub's Primer Design System using React

import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
import { FocusKeys, useFocusZone } from "../hooks/useFocusZone.js";
import ButtonGroup_module_css_default from "./ButtonGroup.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { jsx } from "react/jsx-runtime";
import React from "react";
//#region src/ButtonGroup/ButtonGroup.tsx
const ButtonGroup = /*#__PURE__*/ React.forwardRef(function ButtonGroup(t0, forwardRef) {
	const $ = c(20);
	let children;
	let className;
	let rest;
	let role;
	let t1;
	if ($[0] !== t0) {
		({as: t1, children, className, role, ...rest} = t0);
		$[0] = t0;
		$[1] = children;
		$[2] = className;
		$[3] = rest;
		$[4] = role;
		$[5] = t1;
	} else {
		children = $[1];
		className = $[2];
		rest = $[3];
		role = $[4];
		t1 = $[5];
	}
	const BaseComponent = t1 === void 0 ? "div" : t1;
	let t2;
	if ($[6] !== children) {
		t2 = React.Children.map(children, _temp);
		$[6] = children;
		$[7] = t2;
	} else t2 = $[7];
	const buttons = t2;
	const buttonRef = useProvidedRefOrCreate(forwardRef);
	const t3 = role !== "toolbar";
	let t4;
	if ($[8] !== buttonRef || $[9] !== t3) {
		t4 = {
			containerRef: buttonRef,
			disabled: t3,
			bindKeys: FocusKeys.ArrowHorizontal,
			focusOutBehavior: "wrap"
		};
		$[8] = buttonRef;
		$[9] = t3;
		$[10] = t4;
	} else t4 = $[10];
	useFocusZone(t4);
	let t5;
	if ($[11] !== className) {
		t5 = clsx(className, ButtonGroup_module_css_default.ButtonGroup);
		$[11] = className;
		$[12] = t5;
	} else t5 = $[12];
	let t6;
	if ($[13] !== BaseComponent || $[14] !== buttonRef || $[15] !== buttons || $[16] !== rest || $[17] !== role || $[18] !== t5) {
		t6 = /*#__PURE__*/ jsx(BaseComponent, {
			ref: buttonRef,
			className: t5,
			role,
			...rest,
			"data-component": "ButtonGroup",
			children: buttons
		});
		$[13] = BaseComponent;
		$[14] = buttonRef;
		$[15] = buttons;
		$[16] = rest;
		$[17] = role;
		$[18] = t5;
		$[19] = t6;
	} else t6 = $[19];
	return t6;
});
ButtonGroup.displayName = "ButtonGroup";
function _temp(child, index) {
	return /*#__PURE__*/ jsx("div", {
		className: ButtonGroup_module_css_default.Item,
		children: child
	}, index);
}
_temp.displayName = "_temp";
//#endregion
export { ButtonGroup as default };