@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/popover/popover.module.js

@@ -1,19 +1,17 @@
 import './popover.css';// src/components/popover/popover.module.scss
-var positioner = "_positioner_ixh47_3";
-var visuallyHidden = "_visuallyHidden_ixh47_18";
-var popup = "_popup_ixh47_26";
-var arrow = "_arrow_ixh47_47";
-var arrowFill = "_arrowFill_ixh47_65";
-var title = "_title_ixh47_68";
-var rows = "_rows_ixh47_73";
-var row = "_row_ixh47_73";
-var rowLabel = "_rowLabel_ixh47_86";
-var rowValue = "_rowValue_ixh47_87";
-var skeletonText = "_skeletonText_ixh47_101";
-var skeletonTextContent = "_skeletonTextContent_ixh47_105";
-var skeletonTextOverlay = "_skeletonTextOverlay_ixh47_108";
-var titleSkeleton = "_titleSkeleton_ixh47_114";
-var valueSkeleton = "_valueSkeleton_ixh47_117";
+var positioner = "_positioner_1yoda_3";
+var visuallyHidden = "_visuallyHidden_1yoda_18";
+var popup = "_popup_1yoda_26";
+var arrow = "_arrow_1yoda_47";
+var arrowFill = "_arrowFill_1yoda_65";
+var title = "_title_1yoda_68";
+var rows = "_rows_1yoda_73";
+var row = "_row_1yoda_73";
+var rowLabel = "_rowLabel_1yoda_86";
+var rowValue = "_rowValue_1yoda_87";
+var skeletonText = "_skeletonText_1yoda_101";
+var skeletonTextContent = "_skeletonTextContent_1yoda_105";
+var skeletonTextOverlay = "_skeletonTextOverlay_1yoda_108";
 var popover_module_default = {
 	positioner,
 	visuallyHidden,
@@ -27,8 +25,6 @@ var popover_module_default = {
 	rowValue,
 	skeletonText,
 	skeletonTextContent,
-	skeletonTextOverlay,
-	titleSkeleton,
-	valueSkeleton
+	skeletonTextOverlay
 };
-export { arrow, arrowFill, popover_module_default as default, popup, positioner, row, rowLabel, rowValue, rows, skeletonText, skeletonTextContent, skeletonTextOverlay, title, titleSkeleton, valueSkeleton, visuallyHidden };
+export { arrow, arrowFill, popover_module_default as default, popup, positioner, row, rowLabel, rowValue, rows, skeletonText, skeletonTextContent, skeletonTextOverlay, title, visuallyHidden };

package/dist/components/radio-group-field/radio-group-field.js

@@ -1,3 +1,4 @@
+import { Field } from "../field/field.js";
 import { detachHiddenInput } from "../field/hidden-input.js";
 import { RadioGroup } from "./radio-group.js";
 import { c } from "react/compiler-runtime";
@@ -17,73 +18,78 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var RadioGroupField = (t0) => {
-	const $ = c(36);
+	const $ = c(37);
 	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, className, value, defaultValue, onValueChange, onBlur, name, disabled, readOnly } = t0;
 	const ids = RadioGroup.useIds();
 	const t1 = value !== void 0 && value !== null && value !== "";
 	let t2;
-	if ($[0] !== label || $[1] !== optionalLabel || $[2] !== requiredness) {
-		t2 = /* @__PURE__ */ jsx(RadioGroup.Legend, {
-			requiredness,
-			optionalLabel,
-			children: label
-		});
-		$[0] = label;
-		$[1] = optionalLabel;
-		$[2] = requiredness;
+	if ($[0] !== optionalLabel) {
+		t2 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[0] = optionalLabel;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== label || $[3] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(RadioGroup.Legend, { children: [
+			label,
+			" ",
+			t2
+		] });
+		$[2] = label;
 		$[3] = t2;
-	} else t2 = $[3];
-	const t3 = name ?? ids.controlId;
-	const t4 = ids.controlId;
-	const t5 = requiredness === "required";
-	let t6;
-	if ($[4] !== options) {
-		t6 = options.map(_temp);
-		$[4] = options;
-		$[5] = t6;
-	} else t6 = $[5];
+		$[4] = t3;
+	} else t3 = $[4];
+	const t4 = name ?? ids.controlId;
+	const t5 = ids.controlId;
+	const t6 = requiredness === "required";
 	let t7;
-	if ($[6] !== defaultValue || $[7] !== disabled || $[8] !== ids.controlId || $[9] !== onBlur || $[10] !== onValueChange || $[11] !== readOnly || $[12] !== t3 || $[13] !== t5 || $[14] !== t6 || $[15] !== value) {
-		t7 = /* @__PURE__ */ jsx(RadioGroup.Group, {
+	if ($[5] !== options) {
+		t7 = options.map(_temp);
+		$[5] = options;
+		$[6] = t7;
+	} else t7 = $[6];
+	let t8;
+	if ($[7] !== defaultValue || $[8] !== disabled || $[9] !== ids.controlId || $[10] !== onBlur || $[11] !== onValueChange || $[12] !== readOnly || $[13] !== t4 || $[14] !== t6 || $[15] !== t7 || $[16] !== value) {
+		t8 = /* @__PURE__ */ jsx(RadioGroup.Group, {
 			value,
 			defaultValue,
 			onValueChange,
 			onBlur,
-			name: t3,
+			name: t4,
 			inputRef: detachHiddenInput,
-			id: t4,
+			id: t5,
 			disabled,
 			readOnly,
-			required: t5,
-			children: t6
+			required: t6,
+			children: t7
 		});
-		$[6] = defaultValue;
-		$[7] = disabled;
-		$[8] = ids.controlId;
-		$[9] = onBlur;
-		$[10] = onValueChange;
-		$[11] = readOnly;
-		$[12] = t3;
-		$[13] = t5;
+		$[7] = defaultValue;
+		$[8] = disabled;
+		$[9] = ids.controlId;
+		$[10] = onBlur;
+		$[11] = onValueChange;
+		$[12] = readOnly;
+		$[13] = t4;
 		$[14] = t6;
-		$[15] = value;
-		$[16] = t7;
-	} else t7 = $[16];
-	let t8;
-	if ($[17] !== description) {
-		t8 = /* @__PURE__ */ jsx(RadioGroup.Description, { children: description });
-		$[17] = description;
-		$[18] = t8;
-	} else t8 = $[18];
+		$[15] = t7;
+		$[16] = value;
+		$[17] = t8;
+	} else t8 = $[17];
 	let t9;
-	if ($[19] !== errors) {
-		t9 = /* @__PURE__ */ jsx(RadioGroup.Error, { children: errors });
-		$[19] = errors;
-		$[20] = t9;
-	} else t9 = $[20];
+	if ($[18] !== description) {
+		t9 = /* @__PURE__ */ jsx(RadioGroup.Description, { children: description });
+		$[18] = description;
+		$[19] = t9;
+	} else t9 = $[19];
 	let t10;
-	if ($[21] !== className || $[22] !== dirty || $[23] !== disabled || $[24] !== errors || $[25] !== name || $[26] !== pending || $[27] !== readOnly || $[28] !== requiredness || $[29] !== t1 || $[30] !== t2 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9 || $[34] !== touched) {
-		t10 = /* @__PURE__ */ jsxs(RadioGroup.Root, {
+	if ($[20] !== errors) {
+		t10 = /* @__PURE__ */ jsx(RadioGroup.Error, { children: errors });
+		$[20] = errors;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== className || $[23] !== dirty || $[24] !== disabled || $[25] !== errors || $[26] !== name || $[27] !== pending || $[28] !== readOnly || $[29] !== requiredness || $[30] !== t1 || $[31] !== t10 || $[32] !== t3 || $[33] !== t8 || $[34] !== t9 || $[35] !== touched) {
+		t11 = /* @__PURE__ */ jsxs(RadioGroup.Root, {
 			name,
 			className,
 			disabled,
@@ -95,34 +101,37 @@ var RadioGroupField = (t0) => {
 			pending,
 			filled: t1,
 			children: [
-				t2,
-				t7,
+				t3,
 				t8,
-				t9
+				t9,
+				t10
 			]
 		});
-		$[21] = className;
-		$[22] = dirty;
-		$[23] = disabled;
-		$[24] = errors;
-		$[25] = name;
-		$[26] = pending;
-		$[27] = readOnly;
-		$[28] = requiredness;
-		$[29] = t1;
-		$[30] = t2;
-		$[31] = t7;
-		$[32] = t8;
-		$[33] = t9;
-		$[34] = touched;
-		$[35] = t10;
-	} else t10 = $[35];
-	return t10;
+		$[22] = className;
+		$[23] = dirty;
+		$[24] = disabled;
+		$[25] = errors;
+		$[26] = name;
+		$[27] = pending;
+		$[28] = readOnly;
+		$[29] = requiredness;
+		$[30] = t1;
+		$[31] = t10;
+		$[32] = t3;
+		$[33] = t8;
+		$[34] = t9;
+		$[35] = touched;
+		$[36] = t11;
+	} else t11 = $[36];
+	return t11;
 };
 function _temp(option) {
 	return /* @__PURE__ */ jsxs(RadioGroup.Item, {
 		disabled: option.disabled,
-		children: [/* @__PURE__ */ jsx(RadioGroup.Radio, { value: option.value }), option.label]
+		children: [/* @__PURE__ */ jsx(RadioGroup.Radio, {
+			value: option.value,
+			children: /* @__PURE__ */ jsx(RadioGroup.Indicator, {})
+		}), option.label]
 	}, option.value);
 }
 export { RadioGroupField };

package/dist/components/radio-group-field/radio-group.css

@@ -1,115 +1,167 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._group_18uvi_3 {
+  ._group_1ipzk_3 {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: var(--radio-group-gap, var(--sys-unit-2));
   }
-  ._item_18uvi_9 {
+  ._item_1ipzk_9 {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     gap: var(--radio-group-item-gap, var(--sys-unit-6));
-    min-block-size: var(--sys-unit-20);
+    min-block-size: var(--radio-group-item-min-block-size, var(--sys-unit-20));
+    font: var(--radio-group-item-font, inherit);
     cursor: pointer;
   }
-  ._item_18uvi_9:hover ._radio_18uvi_17 {
-    border-color: var(--sys-color-primary);
+  ._item_1ipzk_9:hover ._radio_1ipzk_18 {
+    border-color: var(--checkbox-hover-border, var(--sys-color-primary));
   }
-  :where([data-readonly], [data-disabled]) ._item_18uvi_9 {
+  :where([data-readonly], [data-disabled]) ._item_1ipzk_9 {
     cursor: default;
   }
-  :where([data-readonly], [data-disabled]) ._item_18uvi_9:hover ._radio_18uvi_17:not([data-checked]) {
-    border-color: var(--box-border, var(--sys-color-border));
-  }
-  ._radio_18uvi_17 {
-    --box-border: var(--sys-color-border);
-    --box-bg: var(--sys-color-surface);
-    --box-fg: var(--sys-color-on-primary);
-    --box-checked-bg: var(--sys-color-primary);
+  :where([data-readonly], [data-disabled]) ._item_1ipzk_9:hover ._radio_1ipzk_18:not([data-checked]) {
+    border-color: var(--_checkbox-border, var(--checkbox-border, var(--sys-color-border)));
+  }
+  ._item_1ipzk_9[data-disabled]:not([data-disabled] ._item_1ipzk_9) {
+    opacity: var(--radio-group-item-disabled-opacity, 1);
+  }
+  ._radio_1ipzk_18 {
+    --_checkbox-border: var(
+    	--checkbox-border,
+    	var(--sys-color-border)
+    );
+    --_checkbox-bg: var(
+    	--checkbox-bg,
+    	var(--sys-color-surface)
+    );
+    --_checkbox-fg: var(
+    	--checkbox-fg,
+    	var(--sys-color-on-primary)
+    );
+    --_checkbox-checked-bg: var(
+    	--checkbox-checked-bg,
+    	var(--sys-color-primary)
+    );
     display: grid;
     flex: 0 0 auto;
     place-items: center;
     box-sizing: border-box;
     inline-size: var(--checkbox-size, var(--sys-unit-16));
     block-size: var(--checkbox-size, var(--sys-unit-16));
-    border: 1px solid var(--box-border);
-    border-radius: var(--sys-radius-sm);
-    background: var(--box-bg);
-    color: var(--box-fg);
+    border: var(--checkbox-border-width, 1px) solid var(--_checkbox-border);
+    border-radius: var(--checkbox-radius, var(--sys-radius-sm));
+    background: var(--_checkbox-bg);
+    color: var(--_checkbox-fg);
   }
   @media not (prefers-reduced-motion) {
-    ._radio_18uvi_17 {
+    ._radio_1ipzk_18 {
       transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._radio_18uvi_17:focus-visible {
-    border-color: var(--sys-color-primary);
+  ._radio_1ipzk_18:focus-visible {
+    border-color: var(--checkbox-focus-border, var(--sys-color-primary));
   }
-  ._radio_18uvi_17 {
+  ._radio_1ipzk_18 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._radio_18uvi_17[data-focus-visible] {
+  ._radio_1ipzk_18[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._radio_18uvi_17 {
+  ._radio_1ipzk_18 {
     position: relative;
-    border-radius: var(--sys-radius-circle);
-  }
-  ._radio_18uvi_17[data-invalid] {
-    --box-border: var(--sys-color-error-fg);
-    --box-bg: var(--sys-color-error-bg);
-    --box-checked-bg: var(--sys-color-error-fg);
-    --box-fg: var(--sys-color-error-bg);
-  }
-  ._radio_18uvi_17[data-readonly] {
-    --box-border: var(--sys-color-outline);
-    --box-bg: var(--sys-color-surface-high);
-    --box-checked-bg: var(--sys-color-primary-container);
-    --box-fg: var(--sys-color-on-primary-container);
-    border-style: dashed;
-  }
-  ._radio_18uvi_17[data-checked] {
-    --box-border: var(--box-checked-bg);
-    --box-bg: var(--box-checked-bg);
-  }
-  ._radio_18uvi_17[data-disabled] {
-    --box-bg: var(--sys-color-disabled-bg);
-    --box-checked-bg: var(--sys-color-disabled-bg);
-    --box-fg: var(--sys-color-disabled-fg);
+    border-radius: var(--radio-group-radio-radius, var(--sys-radius-circle));
+  }
+  ._radio_1ipzk_18[data-invalid] {
+    --_checkbox-border: var(
+    	--checkbox-invalid-border,
+    	var(--sys-color-error-fg)
+    );
+    --_checkbox-bg: var(
+    	--checkbox-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    --_checkbox-checked-bg: var(
+    	--checkbox-invalid-checked-bg,
+    	var(--sys-color-error-fg)
+    );
+    --_checkbox-fg: var(
+    	--checkbox-invalid-fg,
+    	var(--sys-color-error-bg)
+    );
+  }
+  ._radio_1ipzk_18[data-readonly] {
+    --_checkbox-border: var(
+    	--checkbox-readonly-border,
+    	var(--sys-color-outline)
+    );
+    --_checkbox-bg: var(
+    	--checkbox-readonly-bg,
+    	var(--sys-color-surface-high)
+    );
+    --_checkbox-checked-bg: var(
+    	--checkbox-readonly-checked-bg,
+    	var(--sys-color-primary-container)
+    );
+    --_checkbox-fg: var(
+    	--checkbox-readonly-fg,
+    	var(--sys-color-on-primary-container)
+    );
+    border-style: var(--checkbox-readonly-border-style, dashed);
+  }
+  ._radio_1ipzk_18[data-checked] {
+    --_checkbox-border: var(
+    	--checkbox-checked-border,
+    	var(--_checkbox-checked-bg)
+    );
+    --_checkbox-bg: var(--_checkbox-checked-bg);
+  }
+  ._radio_1ipzk_18[data-disabled] {
+    --_checkbox-bg: var(
+    	--checkbox-disabled-bg,
+    	var(--sys-color-disabled-bg)
+    );
+    --_checkbox-checked-bg: var(
+    	--checkbox-disabled-checked-bg,
+    	var(--sys-color-disabled-bg)
+    );
+    --_checkbox-fg: var(
+    	--checkbox-disabled-fg,
+    	var(--sys-color-disabled-fg)
+    );
     cursor: not-allowed;
   }
-  ._indicator_18uvi_84 {
+  ._indicator_1ipzk_136 {
     display: grid;
     place-items: center;
   }
-  ._indicator_18uvi_84 svg {
-    inline-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
-    block-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+  ._indicator_1ipzk_136 svg {
+    inline-size: var(--checkbox-indicator-size, calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7));
+    block-size: var(--checkbox-indicator-size, calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7));
   }
-  ._indicator_18uvi_84 {
+  ._indicator_1ipzk_136 {
     opacity: 0;
     scale: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_18uvi_84 {
+    ._indicator_1ipzk_136 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._indicator_18uvi_84 {
-    inline-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.4);
-    block-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.4);
-    border-radius: var(--sys-radius-circle);
-    background: currentcolor;
+  ._indicator_1ipzk_136 {
+    inline-size: var(--radio-group-indicator-size, calc(var(--checkbox-size, var(--sys-unit-16)) * 0.4));
+    block-size: var(--radio-group-indicator-size, calc(var(--checkbox-size, var(--sys-unit-16)) * 0.4));
+    border-radius: var(--radio-group-indicator-radius, var(--sys-radius-circle));
+    background: var(--radio-group-indicator-bg, currentcolor);
   }
-  ._indicator_18uvi_84[data-checked] {
+  ._indicator_1ipzk_136[data-checked] {
     opacity: 1;
     scale: 1;
   }
   @media not (prefers-reduced-motion) {
-    ._indicator_18uvi_84[data-checked] {
+    ._indicator_1ipzk_136[data-checked] {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
     }
   }

package/dist/components/radio-group-field/radio-group.d.ts

@@ -7,7 +7,20 @@ import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../fieldse
 export type RadioGroupRootProps = FieldsetRootProps;
 declare const RadioGroupGroup: <TValue>({ className, ...props }: BaseRadioGroup.Props<TValue>) => ReactNode;
 declare const RadioGroupItem: ({ className, ...props }: BaseField.Item.Props) => ReactNode;
+/**
+ * One radio, which takes a `RadioGroup.Indicator` as its child.
+ *
+ * @example
+ * <RadioGroup.Radio value="direct"><RadioGroup.Indicator /></RadioGroup.Radio>
+ */
 declare const RadioGroupRadio: ({ className, ...props }: BaseRadio.Root.Props) => ReactNode;
+/**
+ * The dot inside a radio, which pops in while it is chosen.
+ *
+ * @example
+ * <RadioGroup.Indicator />
+ */
+declare const RadioGroupIndicator: ({ className, keepMounted, ...props }: BaseRadio.Indicator.Props) => ReactNode;
 /** The parts of a radio group. */
 export type RadioGroupParts = Readonly<{
     Root: typeof FieldsetRoot;
@@ -15,6 +28,7 @@ export type RadioGroupParts = Readonly<{
     Group: typeof RadioGroupGroup;
     Item: typeof RadioGroupItem;
     Radio: typeof RadioGroupRadio;
+    Indicator: typeof RadioGroupIndicator;
     Description: typeof Field.Description;
     Error: typeof Field.Error;
     useIds: typeof Field.useIds;
@@ -24,11 +38,13 @@ export type RadioGroupParts = Readonly<{
  * its `Legend`. For the ordinary case, use `RadioGroupField`.
  *
  * @example
- * <RadioGroup.Root filled={kind !== null}>
- * 	<RadioGroup.Legend optionalLabel="optional">Kind</RadioGroup.Legend>
+ * <RadioGroup.Root filled={kind !== null} requiredness="optional">
+ * 	<RadioGroup.Legend>Kind <Field.Requiredness optionalLabel="optional" /></RadioGroup.Legend>
  * 	<RadioGroup.Group value={kind} onValueChange={setKind}>
  * 		<RadioGroup.Item>
- * 			<RadioGroup.Radio value="direct" />
+ * 			<RadioGroup.Radio value="direct">
+ * 				<RadioGroup.Indicator />
+ * 			</RadioGroup.Radio>
  * 			Direct
  * 		</RadioGroup.Item>
  * 	</RadioGroup.Group>

package/dist/components/radio-group-field/radio-group.js

@@ -78,8 +78,14 @@ var RadioGroupItem = (t0) => {
 	} else t3 = $[8];
 	return t3;
 };
+/**
+* One radio, which takes a `RadioGroup.Indicator` as its child.
+*
+* @example
+* <RadioGroup.Radio value="direct"><RadioGroup.Indicator /></RadioGroup.Radio>
+*/
 var RadioGroupRadio = (t0) => {
-	const $ = c(13);
+	const $ = c(12);
 	let className;
 	let props;
 	if ($[0] !== t0) {
@@ -105,41 +111,77 @@ var RadioGroupRadio = (t0) => {
 		$[6] = t2;
 	} else t2 = $[6];
 	let t3;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(Radio.Indicator, {
-			keepMounted: true,
-			className: radio_group_module_default.indicator
-		});
-		$[7] = t3;
-	} else t3 = $[7];
-	let t4;
-	if ($[8] !== focus.props || $[9] !== props || $[10] !== t1 || $[11] !== t2) {
-		t4 = /* @__PURE__ */ jsx(Radio.Root, {
+	if ($[7] !== focus.props || $[8] !== props || $[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Radio.Root, {
 			className: t1,
 			"aria-readonly": void 0,
 			...t2,
 			...props,
-			...focus.props,
-			children: t3
+			...focus.props
 		});
-		$[8] = focus.props;
-		$[9] = props;
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t4;
-	} else t4 = $[12];
-	return t4;
+		$[7] = focus.props;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+};
+/**
+* The dot inside a radio, which pops in while it is chosen.
+*
+* @example
+* <RadioGroup.Indicator />
+*/
+var RadioGroupIndicator = (t0) => {
+	const $ = c(10);
+	let className;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({className, keepMounted: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
+	const keepMounted = t1 === void 0 ? true : t1;
+	let t2;
+	if ($[4] !== className) {
+		t2 = clsx(radio_group_module_default.indicator, className);
+		$[4] = className;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== keepMounted || $[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Radio.Indicator, {
+			keepMounted,
+			className: t2,
+			...props
+		});
+		$[6] = keepMounted;
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
 };
 /**
 * The styled parts of a base-ui radio group. The `Root` is a fieldset named by
 * its `Legend`. For the ordinary case, use `RadioGroupField`.
 *
 * @example
-* <RadioGroup.Root filled={kind !== null}>
-* 	<RadioGroup.Legend optionalLabel="optional">Kind</RadioGroup.Legend>
+* <RadioGroup.Root filled={kind !== null} requiredness="optional">
+* 	<RadioGroup.Legend>Kind <Field.Requiredness optionalLabel="optional" /></RadioGroup.Legend>
 * 	<RadioGroup.Group value={kind} onValueChange={setKind}>
 * 		<RadioGroup.Item>
-* 			<RadioGroup.Radio value="direct" />
+* 			<RadioGroup.Radio value="direct">
+* 				<RadioGroup.Indicator />
+* 			</RadioGroup.Radio>
 * 			Direct
 * 		</RadioGroup.Item>
 * 	</RadioGroup.Group>
@@ -151,6 +193,7 @@ var RadioGroup$1 = {
 	Group: RadioGroupGroup,
 	Item: RadioGroupItem,
 	Radio: RadioGroupRadio,
+	Indicator: RadioGroupIndicator,
 	Description: Field$1.Description,
 	Error: Field$1.Error,
 	useIds: Field$1.useIds

package/dist/components/radio-group-field/radio-group.module.js

@@ -1,8 +1,8 @@
 import './radio-group.css';// src/components/radio-group-field/radio-group.module.scss
-var group = "_group_18uvi_3";
-var item = "_item_18uvi_9";
-var radio = "_radio_18uvi_17";
-var indicator = "_indicator_18uvi_84";
+var group = "_group_1ipzk_3";
+var item = "_item_1ipzk_9";
+var radio = "_radio_1ipzk_18";
+var indicator = "_indicator_1ipzk_136";
 var radio_group_module_default = {
 	group,
 	item,

package/dist/components/segmented-control-field/segmented-control-field.d.ts

@@ -1,6 +1,6 @@
 import type { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import type { ReactNode } from "react";
-import type { FieldBlurHandler, ChoiceOption, FieldProps } from "../field/index.ts";
+import { type FieldBlurHandler, type ChoiceOption, type FieldProps } from "../field/index.ts";
 export type SegmentedControlFieldProps = FieldProps & Readonly<{
     /** The choices, in the order they read. */
     options: readonly ChoiceOption[];