beez-ui 2.7.1 → 3.0.0

package/dist/components/radio-group.js

@@ -1,11 +1,10 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
 /**
-* Arc's RadioGroup (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) on Radix's radio group: the mark dips
-* on press, previews a faint dot while held, and the new dot springs in while the old one shrinks away. Items with a
-* `label` render Arc's option rows, and one highlight travels to the chosen row on the morph spring, so a change reads
-* as a single physical move; arrow keys take the same path. Bare items keep the plain mark for compositions that place
-* their own label.
+* Arc's RadioGroup (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) on Radix's radio group: a fieldset
+* whose legend names the choice and whose options render as Arc's rows. The mark dips on press, previews a faint dot
+* while held, and the new dot springs in while the old one shrinks away; one highlight travels to the chosen row on
+* the morph spring, so a change reads as a single physical move. Arrow keys take the same path.
 */
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
@@ -14,12 +13,12 @@ import { RADIO_GROUP_DOT_HIDDEN_SCALE, RADIO_GROUP_OPTION_ID_SUFFIX, RADIO_GROUP
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
 import { ARC_DURATION, ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Selector of the option row that holds the checked radio. */
 const CHECKED_OPTION_SELECTOR = "[data-slot=\"radio-group-option\"]:has([data-slot=\"radio-group-item\"][data-state=\"checked\"])";
 /** Selector of every option row, observed so the highlight follows rows that resize. */
 const OPTION_SELECTOR = "[data-slot=\"radio-group-option\"]";
-/** The value chosen in the enclosing group, read by each item to spring its dot in or out. */
+/** The value chosen in the enclosing group, read by each option to spring its dot in or out. */
 const RadioGroupValueContext = createContext(undefined);
 /**
 * Sizes the highlight to the chosen row. A new choice glides on the morph spring; the first paint and resizes place it
@@ -61,381 +60,333 @@ function placeHighlight(highlight, row, placedAt, shouldGlide) {
 	animate(highlight, target, { duration: 0 });
 }
 /**
-* Hosts the radios, controlled or uncontrolled like Radix's radio group, and moves the highlight of option rows.
-* @param radioGroupProps - Every Radix radio group prop, including `ref`.
-* @returns The radio group.
+* Arc's mark recipe: the faint preview dot and the press dip answer the whole row.
 */
-function RadioGroup(t0) {
-	const $ = _c(36);
-	let asChild;
-	let children;
-	let className;
-	let defaultValue;
-	let onValueChange;
-	let props;
-	let ref;
-	let value;
-	if ($[0] !== t0) {
-		({className, children, value, defaultValue, onValueChange, ref, asChild, ...props} = t0);
-		$[0] = t0;
-		$[1] = asChild;
-		$[2] = children;
-		$[3] = className;
-		$[4] = defaultValue;
-		$[5] = onValueChange;
-		$[6] = props;
-		$[7] = ref;
-		$[8] = value;
-	} else {
-		asChild = $[1];
-		children = $[2];
-		className = $[3];
-		defaultValue = $[4];
-		onValueChange = $[5];
-		props = $[6];
-		ref = $[7];
-		value = $[8];
-	}
+const radioGroupItemClassName = "peer group/radio-group-item relative z-2 grid aspect-square size-[17px] shrink-0 cursor-pointer place-items-center rounded-full border border-border-strong bg-transparent p-0 [-webkit-tap-highlight-color:transparent] [transition:border-color_var(--duration-fast)_var(--ease-standard),background-color_var(--duration-fast)_var(--ease-standard),scale_var(--duration-spring)_var(--ease-spring)] before:size-[7px] before:rounded-full before:bg-foreground before:opacity-0 before:transition-opacity before:duration-(--duration-instant) before:ease-(--ease-standard) before:[grid-area:1/1] before:content-[''] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-(--control-on) data-[state=checked]:bg-(--control-on) aria-invalid:data-[state=unchecked]:border-danger hover-fine:data-[state=unchecked]:not-disabled:border-text-muted active:not-disabled:scale-[.88] active:not-disabled:[transition:border-color_var(--duration-fast)_var(--ease-standard),background-color_var(--duration-fast)_var(--ease-standard),scale_100ms_var(--ease-standard)] active:not-disabled:data-[state=unchecked]:before:opacity-[.22] group-active/radio-group-option:not-disabled:scale-[.88] group-active/radio-group-option:not-disabled:data-[state=unchecked]:before:opacity-[.22] motion-reduce:scale-100 motion-reduce:transition-none motion-reduce:before:transition-none";
+/** Arc's option row: answers a press with color only, while the mark is what moves. */
+const optionClassName = "group/radio-group-option relative flex cursor-pointer items-center gap-(--space-3) rounded-(--radius-control) border border-border p-(--space-3) [-webkit-tap-highlight-color:transparent] transition-[background-color,border-color] duration-(--duration-fast) ease-(--ease-standard) hover-fine:bg-surface-muted active:bg-surface-muted has-disabled:cursor-not-allowed has-disabled:opacity-50 [[data-slot=radio-group]:not([data-ready])_&]:has-data-[state=checked]:border-(--control-on) [[data-slot=radio-group]:not([data-ready])_&]:has-data-[state=checked]:bg-[color-mix(in_oklab,var(--control-on)_5%,transparent)] motion-reduce:transition-none";
+/**
+* One option row: the radio mark and its copy.
+* @param option - The option to render.
+* @returns The row, a label that activates its radio.
+*/
+function RadioGroupOptionRow(t0) {
+	const $ = _c(26);
+	const { value, label, description, disabled } = t0;
+	const rowId = useId();
+	const labelId = `${rowId}-${RADIO_GROUP_OPTION_ID_SUFFIX.label}`;
+	const descriptionId = `${rowId}-${RADIO_GROUP_OPTION_ID_SUFFIX.description}`;
 	const reduceMotion = usePrefersReducedMotion();
-	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-	const selectedValue = value ?? uncontrolledValue;
-	const groupRef = useRef(null);
-	const highlightRef = useRef(null);
-	const shownValue = useRef(null);
-	const placedAt = useRef("");
-	let t1;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = () => groupRef.current?.querySelector(CHECKED_OPTION_SELECTOR) ?? null;
-		$[9] = t1;
+	const isChecked = useContext(RadioGroupValueContext) === value;
+	const t1 = description ? descriptionId : undefined;
+	let t2;
+	if ($[0] !== isChecked) {
+		t2 = isChecked ? {
+			scale: 1,
+			opacity: 1
+		} : {
+			scale: RADIO_GROUP_DOT_HIDDEN_SCALE,
+			opacity: 0
+		};
+		$[0] = isChecked;
+		$[1] = t2;
 	} else {
-		t1 = $[9];
+		t2 = $[1];
 	}
-	const findCheckedRow = t1;
-	let t2;
 	let t3;
-	if ($[10] !== reduceMotion || $[11] !== selectedValue) {
-		t2 = () => {
-			const hasChanged = shownValue.current !== null && shownValue.current !== selectedValue;
-			placeHighlight(highlightRef.current, findCheckedRow(), placedAt, hasChanged && !reduceMotion);
-			shownValue.current = selectedValue;
-			if (highlightRef.current) {
-				groupRef.current?.setAttribute(RADIO_GROUP_READY_ATTRIBUTE, "");
-			}
+	if ($[2] !== isChecked || $[3] !== reduceMotion) {
+		t3 = reduceMotion ? { duration: 0 } : {
+			...ARC_SPRING_SNAPPY,
+			opacity: { duration: isChecked ? ARC_DURATION.fast : ARC_DURATION.instant }
 		};
-		t3 = [selectedValue, reduceMotion];
-		$[10] = reduceMotion;
-		$[11] = selectedValue;
-		$[12] = t2;
-		$[13] = t3;
+		$[2] = isChecked;
+		$[3] = reduceMotion;
+		$[4] = t3;
 	} else {
-		t2 = $[12];
-		t3 = $[13];
+		t3 = $[4];
 	}
-	useLayoutEffect(t2, t3);
 	let t4;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = () => {
-			const group = groupRef.current;
-			if (!group || typeof ResizeObserver === "undefined") {
-				return;
-			}
-			const observer = new ResizeObserver(() => placeHighlight(highlightRef.current, findCheckedRow(), placedAt, false));
-			observer.observe(group);
-			group.querySelectorAll(OPTION_SELECTOR).forEach((row) => observer.observe(row));
-			return () => observer.disconnect();
-		};
-		$[14] = t4;
+	if ($[5] !== t2 || $[6] !== t3) {
+		t4 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Indicator, {
+			forceMount: true,
+			asChild: true,
+			children: /* @__PURE__ */ _jsx(motion.span, {
+				"data-slot": "radio-group-indicator",
+				className: "pointer-events-none block size-[7px] rounded-full bg-(--control-glyph) [grid-area:1/1]",
+				initial: false,
+				animate: t2,
+				transition: t3
+			})
+		});
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
 	} else {
-		t4 = $[14];
+		t4 = $[7];
 	}
-	useEffect(t4);
 	let t5;
-	if ($[15] !== className) {
-		t5 = cn("relative grid w-full gap-2", className);
-		$[15] = className;
-		$[16] = t5;
+	if ($[8] !== disabled || $[9] !== labelId || $[10] !== t1 || $[11] !== t4 || $[12] !== value) {
+		t5 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Item, {
+			"data-slot": "radio-group-item",
+			className: radioGroupItemClassName,
+			value,
+			disabled,
+			"aria-labelledby": labelId,
+			"aria-describedby": t1,
+			children: t4
+		});
+		$[8] = disabled;
+		$[9] = labelId;
+		$[10] = t1;
+		$[11] = t4;
+		$[12] = value;
+		$[13] = t5;
 	} else {
-		t5 = $[16];
+		t5 = $[13];
 	}
 	let t6;
-	if ($[17] !== ref) {
-		t6 = (node) => {
-			groupRef.current = node;
-			if (typeof ref === "function") {
-				return ref(node);
-			}
-			if (ref) {
-				ref.current = node;
-			}
-		};
-		$[17] = ref;
-		$[18] = t6;
+	if ($[14] !== label || $[15] !== labelId) {
+		t6 = /* @__PURE__ */ _jsx("span", {
+			id: labelId,
+			"data-slot": "radio-group-option-label",
+			className: "block text-sm font-medium text-text-secondary transition-colors duration-(--duration-standard) ease-(--ease-standard) group-has-data-[state=checked]/radio-group-option:text-foreground motion-reduce:transition-none",
+			children: label
+		});
+		$[14] = label;
+		$[15] = labelId;
+		$[16] = t6;
 	} else {
-		t6 = $[18];
+		t6 = $[16];
 	}
 	let t7;
-	if ($[19] !== onValueChange || $[20] !== value) {
-		t7 = (nextValue) => {
-			if (value === undefined) {
-				setUncontrolledValue(nextValue);
-			}
-			onValueChange?.(nextValue);
-		};
-		$[19] = onValueChange;
-		$[20] = value;
-		$[21] = t7;
+	if ($[17] !== description || $[18] !== descriptionId) {
+		t7 = description ? /* @__PURE__ */ _jsx("span", {
+			id: descriptionId,
+			"data-slot": "radio-group-option-description",
+			className: "mt-0.5 block text-xs text-text-muted",
+			children: description
+		}) : null;
+		$[17] = description;
+		$[18] = descriptionId;
+		$[19] = t7;
 	} else {
-		t7 = $[21];
+		t7 = $[19];
 	}
 	let t8;
-	if ($[22] !== asChild || $[23] !== children) {
-		t8 = asChild ? children : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
-			ref: highlightRef,
-			"data-slot": "radio-group-highlight",
-			"aria-hidden": "true",
-			className: "pointer-events-none absolute top-0 left-0 z-1 box-border rounded-(--radius-control) border border-(--control-on) bg-[color-mix(in_oklab,var(--control-on)_5%,transparent)] opacity-0"
-		}), children] });
-		$[22] = asChild;
-		$[23] = children;
-		$[24] = t8;
+	if ($[20] !== t6 || $[21] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs("span", {
+			className: "relative z-2 min-w-0",
+			children: [t6, t7]
+		});
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t8;
 	} else {
-		t8 = $[24];
+		t8 = $[22];
 	}
 	let t9;
-	if ($[25] !== asChild || $[26] !== props || $[27] !== selectedValue || $[28] !== t5 || $[29] !== t6 || $[30] !== t7 || $[31] !== t8) {
-		t9 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Root, {
-			"data-slot": "radio-group",
-			className: t5,
-			...props,
-			asChild,
-			ref: t6,
-			value: selectedValue,
-			onValueChange: t7,
-			children: t8
+	if ($[23] !== t5 || $[24] !== t8) {
+		t9 = /* @__PURE__ */ _jsxs("label", {
+			"data-slot": "radio-group-option",
+			className: optionClassName,
+			onClick: _temp,
+			children: [t5, t8]
 		});
-		$[25] = asChild;
-		$[26] = props;
-		$[27] = selectedValue;
-		$[28] = t5;
-		$[29] = t6;
-		$[30] = t7;
-		$[31] = t8;
-		$[32] = t9;
+		$[23] = t5;
+		$[24] = t8;
+		$[25] = t9;
 	} else {
-		t9 = $[32];
+		t9 = $[25];
 	}
-	let t10;
-	if ($[33] !== selectedValue || $[34] !== t9) {
-		t10 = /* @__PURE__ */ _jsx(RadioGroupValueContext.Provider, {
-			value: selectedValue,
-			children: t9
-		});
-		$[33] = selectedValue;
-		$[34] = t9;
-		$[35] = t10;
-	} else {
-		t10 = $[35];
+	return t9;
+}
+function _temp(event) {
+	const radio = event.currentTarget.querySelector("[data-slot=\"radio-group-item\"]");
+	if (radio && !radio.disabled && event.target !== radio) {
+		radio.focus({ preventScroll: true });
 	}
-	return t10;
 }
 /**
-* Arc's mark recipe. The bare mark keeps its 17px box and widens its hit area with a pseudo-element; the faint preview
-* dot and the press dip answer the mark itself, or its whole row when it has a label.
-*/
-const radioGroupItemClassName = "peer group/radio-group-item relative grid aspect-square size-[17px] shrink-0 cursor-pointer place-items-center rounded-full border border-border-strong bg-transparent p-0 [-webkit-tap-highlight-color:transparent] [transition:border-color_var(--duration-fast)_var(--ease-standard),background-color_var(--duration-fast)_var(--ease-standard),scale_var(--duration-spring)_var(--ease-spring)] before:size-[7px] before:rounded-full before:bg-foreground before:opacity-0 before:transition-opacity before:duration-(--duration-instant) before:ease-(--ease-standard) before:[grid-area:1/1] before:content-[''] after:absolute after:-inset-[13px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-(--control-on) data-[state=checked]:bg-(--control-on) aria-invalid:data-[state=unchecked]:border-danger hover-fine:data-[state=unchecked]:not-disabled:border-text-muted active:not-disabled:scale-[.88] active:not-disabled:[transition:border-color_var(--duration-fast)_var(--ease-standard),background-color_var(--duration-fast)_var(--ease-standard),scale_100ms_var(--ease-standard)] active:not-disabled:data-[state=unchecked]:before:opacity-[.22] group-active/radio-group-option:not-disabled:scale-[.88] group-active/radio-group-option:not-disabled:data-[state=unchecked]:before:opacity-[.22] motion-reduce:scale-100 motion-reduce:transition-none motion-reduce:before:transition-none";
-/** Arc's option row: answers a press with color only, while the mark is what moves. */
-const optionClassName = "group/radio-group-option relative flex cursor-pointer items-center gap-(--space-3) rounded-(--radius-control) border border-border p-(--space-3) [-webkit-tap-highlight-color:transparent] transition-[background-color,border-color] duration-(--duration-fast) ease-(--ease-standard) hover-fine:bg-surface-muted active:bg-surface-muted has-disabled:cursor-not-allowed has-disabled:opacity-50 [[data-slot=radio-group]:not([data-ready])_&]:has-data-[state=checked]:border-(--control-on) [[data-slot=radio-group]:not([data-ready])_&]:has-data-[state=checked]:bg-[color-mix(in_oklab,var(--control-on)_5%,transparent)] motion-reduce:transition-none";
-/**
-* One radio of the group: a bare mark, or Arc's option row when it receives a `label`.
-* @param radioGroupItemProps - Every Radix radio item prop, including `ref`, plus optional Arc `label` and `description`.
-* @returns The radio, wrapped in its option row when it has a label.
+* A choice of one option from a visible set, controlled with `value` or uncontrolled with `defaultValue`.
+* @param props - Legend, options, value, change handler, form name and classes.
+* @returns The fieldset with its legend and option rows.
 */
-function RadioGroupItem(t0) {
-	const $ = _c(43);
-	let className;
-	let description;
-	let id;
-	let label;
-	let props;
-	let value;
-	if ($[0] !== t0) {
-		({className, label, description, id, value, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = description;
-		$[3] = id;
-		$[4] = label;
-		$[5] = props;
-		$[6] = value;
+function RadioGroup(t0) {
+	const $ = _c(32);
+	const { label, options, value, defaultValue, onValueChange, name, className } = t0;
+	const reduceMotion = usePrefersReducedMotion();
+	const generatedId = useId();
+	const legendId = `${generatedId}-legend`;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const selectedValue = value ?? uncontrolledValue;
+	const groupRef = useRef(null);
+	const optionsRef = useRef(null);
+	const highlightRef = useRef(null);
+	const shownValue = useRef(null);
+	const placedAt = useRef("");
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => optionsRef.current?.querySelector(CHECKED_OPTION_SELECTOR) ?? null;
+		$[0] = t1;
 	} else {
-		className = $[1];
-		description = $[2];
-		id = $[3];
-		label = $[4];
-		props = $[5];
-		value = $[6];
+		t1 = $[0];
 	}
-	const generatedId = useId();
-	const rowId = id ?? generatedId;
-	const labelId = `${rowId}-${RADIO_GROUP_OPTION_ID_SUFFIX.label}`;
-	const descriptionId = `${rowId}-${RADIO_GROUP_OPTION_ID_SUFFIX.description}`;
-	const reduceMotion = usePrefersReducedMotion();
-	const isChecked = useContext(RadioGroupValueContext) === value;
-	const hasRow = Boolean(label);
-	const t1 = hasRow && "z-2 after:hidden";
+	const findCheckedRow = t1;
 	let t2;
-	if ($[7] !== className || $[8] !== t1) {
-		t2 = cn(radioGroupItemClassName, t1, className);
-		$[7] = className;
-		$[8] = t1;
-		$[9] = t2;
+	let t3;
+	if ($[1] !== reduceMotion || $[2] !== selectedValue) {
+		t2 = () => {
+			const hasChanged = shownValue.current !== null && shownValue.current !== selectedValue;
+			placeHighlight(highlightRef.current, findCheckedRow(), placedAt, hasChanged && !reduceMotion);
+			shownValue.current = selectedValue;
+			groupRef.current?.setAttribute(RADIO_GROUP_READY_ATTRIBUTE, "");
+		};
+		t3 = [selectedValue, reduceMotion];
+		$[1] = reduceMotion;
+		$[2] = selectedValue;
+		$[3] = t2;
+		$[4] = t3;
 	} else {
-		t2 = $[9];
+		t2 = $[3];
+		t3 = $[4];
 	}
-	const t3 = hasRow ? props["aria-labelledby"] ?? labelId : props["aria-labelledby"];
+	useLayoutEffect(t2, t3);
 	let t4;
-	if ($[10] !== description || $[11] !== descriptionId || $[12] !== hasRow || $[13] !== props) {
-		t4 = [props["aria-describedby"], hasRow && description ? descriptionId : undefined].filter(Boolean).join(" ") || undefined;
-		$[10] = description;
-		$[11] = descriptionId;
-		$[12] = hasRow;
-		$[13] = props;
-		$[14] = t4;
-	} else {
-		t4 = $[14];
-	}
-	let t5;
-	if ($[15] !== isChecked) {
-		t5 = isChecked ? {
-			scale: 1,
-			opacity: 1
-		} : {
-			scale: RADIO_GROUP_DOT_HIDDEN_SCALE,
-			opacity: 0
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			const list = optionsRef.current;
+			if (!list || typeof ResizeObserver === "undefined") {
+				return;
+			}
+			const observer = new ResizeObserver(() => placeHighlight(highlightRef.current, findCheckedRow(), placedAt, false));
+			observer.observe(list);
+			list.querySelectorAll(OPTION_SELECTOR).forEach((row) => observer.observe(row));
+			return () => observer.disconnect();
 		};
-		$[15] = isChecked;
-		$[16] = t5;
+		$[5] = t4;
 	} else {
-		t5 = $[16];
+		t4 = $[5];
 	}
+	useEffect(t4);
+	const t5 = name ?? generatedId;
 	let t6;
-	if ($[17] !== isChecked || $[18] !== reduceMotion) {
-		t6 = reduceMotion ? { duration: 0 } : {
-			...ARC_SPRING_SNAPPY,
-			opacity: { duration: isChecked ? ARC_DURATION.fast : ARC_DURATION.instant }
+	if ($[6] !== onValueChange || $[7] !== value) {
+		t6 = (nextValue) => {
+			if (value === undefined) {
+				setUncontrolledValue(nextValue);
+			}
+			onValueChange?.(nextValue);
 		};
-		$[17] = isChecked;
-		$[18] = reduceMotion;
-		$[19] = t6;
+		$[6] = onValueChange;
+		$[7] = value;
+		$[8] = t6;
 	} else {
-		t6 = $[19];
+		t6 = $[8];
 	}
 	let t7;
-	if ($[20] !== t5 || $[21] !== t6) {
-		t7 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Indicator, {
-			forceMount: true,
-			asChild: true,
-			children: /* @__PURE__ */ _jsx(motion.span, {
-				"data-slot": "radio-group-indicator",
-				className: "pointer-events-none block size-[7px] rounded-full bg-(--control-glyph) [grid-area:1/1]",
-				initial: false,
-				animate: t5,
-				transition: t6
-			})
-		});
-		$[20] = t5;
-		$[21] = t6;
-		$[22] = t7;
+	if ($[9] !== className) {
+		t7 = cn("m-0 grid min-w-0 border-0 p-0", className);
+		$[9] = className;
+		$[10] = t7;
 	} else {
-		t7 = $[22];
+		t7 = $[10];
 	}
 	let t8;
-	if ($[23] !== id || $[24] !== props || $[25] !== t2 || $[26] !== t3 || $[27] !== t4 || $[28] !== t7 || $[29] !== value) {
-		t8 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Item, {
-			"data-slot": "radio-group-item",
-			className: t2,
-			...props,
-			id,
-			value,
-			"aria-labelledby": t3,
-			"aria-describedby": t4,
-			children: t7
+	if ($[11] !== label || $[12] !== legendId) {
+		t8 = /* @__PURE__ */ _jsx("legend", {
+			id: legendId,
+			"data-slot": "radio-group-label",
+			className: "mb-(--space-2) p-0 text-sm font-medium text-foreground",
+			children: label
 		});
-		$[23] = id;
-		$[24] = props;
-		$[25] = t2;
-		$[26] = t3;
-		$[27] = t4;
-		$[28] = t7;
-		$[29] = value;
-		$[30] = t8;
+		$[11] = label;
+		$[12] = legendId;
+		$[13] = t8;
 	} else {
-		t8 = $[30];
-	}
-	const item = t8;
-	if (!hasRow) {
-		return item;
+		t8 = $[13];
 	}
 	let t9;
-	if ($[31] !== label || $[32] !== labelId) {
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
 		t9 = /* @__PURE__ */ _jsx("span", {
-			id: labelId,
-			"data-slot": "radio-group-option-label",
-			className: "block text-sm font-medium text-text-secondary transition-colors duration-(--duration-standard) ease-(--ease-standard) group-has-data-[state=checked]/radio-group-option:text-foreground motion-reduce:transition-none",
-			children: label
+			ref: highlightRef,
+			"data-slot": "radio-group-highlight",
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute top-0 left-0 z-1 box-border rounded-(--radius-control) border border-(--control-on) bg-[color-mix(in_oklab,var(--control-on)_5%,transparent)] opacity-0"
 		});
-		$[31] = label;
-		$[32] = labelId;
-		$[33] = t9;
+		$[14] = t9;
 	} else {
-		t9 = $[33];
+		t9 = $[14];
 	}
 	let t10;
-	if ($[34] !== description || $[35] !== descriptionId) {
-		t10 = description ? /* @__PURE__ */ _jsx("span", {
-			id: descriptionId,
-			"data-slot": "radio-group-option-description",
-			className: "mt-0.5 block text-xs text-text-muted",
-			children: description
-		}) : null;
-		$[34] = description;
-		$[35] = descriptionId;
-		$[36] = t10;
+	if ($[15] !== options) {
+		t10 = options.map(_temp2);
+		$[15] = options;
+		$[16] = t10;
 	} else {
-		t10 = $[36];
+		t10 = $[16];
 	}
 	let t11;
-	if ($[37] !== t10 || $[38] !== t9) {
-		t11 = /* @__PURE__ */ _jsxs("span", {
-			className: "relative z-2 min-w-0",
+	if ($[17] !== t10) {
+		t11 = /* @__PURE__ */ _jsxs("div", {
+			ref: optionsRef,
+			"data-slot": "radio-group-options",
+			className: "relative grid w-full gap-(--space-2)",
 			children: [t9, t10]
 		});
-		$[37] = t10;
-		$[38] = t9;
-		$[39] = t11;
+		$[17] = t10;
+		$[18] = t11;
 	} else {
-		t11 = $[39];
+		t11 = $[18];
 	}
 	let t12;
-	if ($[40] !== item || $[41] !== t11) {
-		t12 = /* @__PURE__ */ _jsxs("label", {
-			"data-slot": "radio-group-option",
-			className: optionClassName,
-			onClick: _temp,
-			children: [item, t11]
+	if ($[19] !== legendId || $[20] !== t11 || $[21] !== t7 || $[22] !== t8) {
+		t12 = /* @__PURE__ */ _jsxs("fieldset", {
+			ref: groupRef,
+			"data-slot": "radio-group",
+			"aria-labelledby": legendId,
+			className: t7,
+			children: [t8, t11]
 		});
-		$[40] = item;
-		$[41] = t11;
-		$[42] = t12;
+		$[19] = legendId;
+		$[20] = t11;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t12;
 	} else {
-		t12 = $[42];
+		t12 = $[23];
 	}
-	return t12;
-}
-function _temp(event) {
-	const radio = event.currentTarget.querySelector("[data-slot=\"radio-group-item\"]");
-	if (radio && !radio.disabled && event.target !== radio) {
-		radio.focus({ preventScroll: true });
+	let t13;
+	if ($[24] !== selectedValue || $[25] !== t12 || $[26] !== t5 || $[27] !== t6) {
+		t13 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Root, {
+			asChild: true,
+			name: t5,
+			value: selectedValue,
+			onValueChange: t6,
+			children: t12
+		});
+		$[24] = selectedValue;
+		$[25] = t12;
+		$[26] = t5;
+		$[27] = t6;
+		$[28] = t13;
+	} else {
+		t13 = $[28];
 	}
+	let t14;
+	if ($[29] !== selectedValue || $[30] !== t13) {
+		t14 = /* @__PURE__ */ _jsx(RadioGroupValueContext.Provider, {
+			value: selectedValue,
+			children: t13
+		});
+		$[29] = selectedValue;
+		$[30] = t13;
+		$[31] = t14;
+	} else {
+		t14 = $[31];
+	}
+	return t14;
+}
+function _temp2(option) {
+	return /* @__PURE__ */ _jsx(RadioGroupOptionRow, { ...option }, option.value);
 }
-export { RadioGroup, RadioGroupItem };
+export { RadioGroup };