import { t as e } from "../../../chunks/clsx.js";
import { useValue as t } from "../../hooks/useValue.js";
import { KEY as n } from "../../hooks/keyboard.constants.js";
import { Children as r, cloneElement as i, isValidElement as a, useId as o } from "react";
import { jsx as s } from "react/jsx-runtime";
//#region lib/ui/forms/radios/RadioGroup.tsx
function c(c) {
	let l = o(), { id: u = l, name: d = u, children: f, value: p, defaultValue: m, onChange: h, disabled: g, readOnly: _, tabIndex: v = 0, ...y } = c, { value: b, setValue: x } = t({
		initialValue: p,
		defaultValue: m,
		onChange: h
	}), S = (e, t) => {
		let r = t, i = e.target.parentNode.querySelectorAll("[role=\"radio\"]");
		if (e.key === n.ARROW_RIGHT || e.key === n.ARROW_DOWN) r = (t + 1) % i.length, i[r]?.focus();
		else if (e.key === n.ARROW_LEFT || e.key === n.ARROW_UP) r = (t - 1 + i.length) % i.length, i[r]?.focus();
		else if (e.key === n.SPACE || e.key === n.ENTER) {
			x(i[t].dataset.value, e.nativeEvent);
			return;
		}
	};
	function C(e, t) {
		return b == null || b === "" ? v === t ? 0 : -1 : e ? 0 : -1;
	}
	return /* @__PURE__ */ s("div", {
		...y,
		className: e("flex gap-12", y.className),
		role: "radiogroup",
		children: r.map(f, (e, t) => {
			if (!a(e)) return e;
			let n = e.type.displayName, r = e.props.value, o = b === r;
			return n?.includes("Button") ? i(e, {
				color: o ? "black" : "white",
				...e.props,
				value: void 0,
				role: "radio",
				name: d,
				component: "span",
				id: `${u}-${t}`,
				disabled: g,
				readOnly: _,
				tabIndex: C(o, t),
				"data-value": r,
				"aria-checked": b === r,
				onKeyDown: (e) => S(e, t),
				onClick(t) {
					!g && !_ && (x(r, t.nativeEvent), e.props?.onClick?.(r));
				}
			}) : i(e, {
				...e.props,
				name: d,
				id: `${u}-${t}`,
				disabled: g,
				readOnly: _,
				tabIndex: C(o, t),
				checked: o,
				value: r,
				onChange(e) {
					!g && !_ && x(r, e);
				}
			});
		})
	});
}
//#endregion
export { c as RadioGroup };

//# sourceMappingURL=RadioGroup.js.map