From 73db6987319941036852437d0750d67ec1f377c5 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Wed, 30 Apr 2025 09:28:32 -0700
Subject: [PATCH 1/9] radio-group: Add unstable `ItemRoot`, `ItemTrigger` and
 `ItemBubbleInput`

---
 packages/react/radio-group/src/index.ts       |  15 +-
 .../react/radio-group/src/radio-group.tsx     | 253 ++++++++++++-----
 packages/react/radio-group/src/radio.tsx      | 256 ++++++++++++------
 3 files changed, 368 insertions(+), 156 deletions(-)

diff --git a/packages/react/radio-group/src/index.ts b/packages/react/radio-group/src/index.ts
index af4c9afd1..843c32c43 100644
--- a/packages/react/radio-group/src/index.ts
+++ b/packages/react/radio-group/src/index.ts
@@ -4,10 +4,23 @@ export {
   //
   RadioGroup,
   RadioGroupItem,
+  RadioGroupItemRoot as unstable_RadioGroupItemRoot,
+  RadioGroupItemTrigger as unstable_RadioGroupItemTrigger,
+  RadioGroupItemBubbleInput as unstable_RadioGroupItemBubbleInput,
   RadioGroupIndicator,
   //
   Root,
   Item,
+  ItemRoot as unstable_ItemRoot,
+  ItemTrigger as unstable_ItemTrigger,
+  ItemBubbleInput as unstable_ItemBubbleInput,
   Indicator,
 } from './radio-group';
-export type { RadioGroupProps, RadioGroupItemProps, RadioGroupIndicatorProps } from './radio-group';
+export type {
+  RadioGroupProps,
+  RadioGroupItemProps,
+  RadioGroupItemRootProps as unstable_RadioGroupItemRootProps,
+  RadioGroupItemTriggerProps as unstable_RadioGroupItemTriggerProps,
+  RadioGroupItemBubbleInputProps as unstable_RadioGroupItemBubbleInputProps,
+  RadioGroupIndicatorProps,
+} from './radio-group';
diff --git a/packages/react/radio-group/src/radio-group.tsx b/packages/react/radio-group/src/radio-group.tsx
index 6fb5ff8ff..fac741066 100644
--- a/packages/react/radio-group/src/radio-group.tsx
+++ b/packages/react/radio-group/src/radio-group.tsx
@@ -7,7 +7,16 @@ import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
 import { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useDirection } from '@radix-ui/react-direction';
-import { Radio, RadioIndicator, createRadioScope } from './radio';
+import {
+  RadioProvider,
+  RadioTrigger,
+  RadioBubbleInput,
+  type RadioBubbleInputProps,
+  RadioIndicator,
+  createRadioScope,
+  useRadioContext,
+  useInternalRadioScope,
+} from './radio';
 
 import type { Scope } from '@radix-ui/react-context';
 
@@ -41,9 +50,9 @@ type RadioGroupElement = React.ElementRef<typeof Primitive.div>;
 type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
 type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
 interface RadioGroupProps extends PrimitiveDivProps {
-  name?: RadioGroupContextValue['name'];
-  required?: React.ComponentPropsWithoutRef<typeof Radio>['required'];
-  disabled?: React.ComponentPropsWithoutRef<typeof Radio>['disabled'];
+  name?: string;
+  required?: boolean;
+  disabled?: boolean;
   dir?: RovingFocusGroupProps['dir'];
   orientation?: RovingFocusGroupProps['orientation'];
   loop?: RovingFocusGroupProps['loop'];
@@ -109,75 +118,176 @@ const RadioGroup = React.forwardRef<RadioGroupElement, RadioGroupProps>(
 
 RadioGroup.displayName = RADIO_GROUP_NAME;
 
+/* -------------------------------------------------------------------------------------------------
+ * RadioGroupItemRoot
+ * -----------------------------------------------------------------------------------------------*/
+
+const ITEM_ROOT_NAME = 'RadioGroupItemRoot';
+
+type RadioProviderProps = React.ComponentPropsWithoutRef<typeof RadioProvider>;
+interface RadioGroupItemRootProps extends Omit<RadioProviderProps, 'name' | 'required'> {
+  value: string;
+}
+
+const RadioGroupItemRoot = (props: ScopedProps<RadioGroupItemRootProps>) => {
+  const {
+    __scopeRadioGroup,
+    disabled,
+    children,
+    checked,
+    // @ts-expect-error
+    internal_do_not_use_render,
+    ...itemProps
+  } = props;
+  const context = useRadioGroupContext(ITEM_ROOT_NAME, __scopeRadioGroup);
+  const radioScope = useRadioScope(__scopeRadioGroup);
+
+  return (
+    <RadioProvider
+      {...itemProps}
+      {...radioScope}
+      disabled={context.disabled || disabled}
+      required={context.required}
+      checked={checked !== undefined ? checked : context.value === itemProps.value}
+      name={context.name}
+      // @ts-expect-error
+      internal_do_not_use_render={({ isFormControl }) => {
+        return typeof internal_do_not_use_render === 'function'
+          ? internal_do_not_use_render({ ...context, isFormControl })
+          : children;
+      }}
+    />
+  );
+};
+
+RadioGroupItemRoot.displayName = ITEM_ROOT_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * RadioGroupItemTrigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const ITEM_TRIGGER_NAME = 'RadioGroupItemTrigger';
+
+type RadioGroupItemTriggerElement = React.ElementRef<typeof RadioTrigger>;
+type RadioTriggerProps = React.ComponentPropsWithoutRef<typeof RadioTrigger>;
+interface RadioGroupItemTriggerProps
+  extends Omit<RadioTriggerProps, 'onCheck' | 'name' | 'value'> {}
+
+const RadioGroupItemTrigger = React.forwardRef<
+  RadioGroupItemTriggerElement,
+  RadioGroupItemTriggerProps
+>((props: ScopedProps<RadioGroupItemTriggerProps>, forwardedRef) => {
+  const { __scopeRadioGroup, ...itemProps } = props;
+  const context = useRadioGroupContext(ITEM_TRIGGER_NAME, __scopeRadioGroup);
+  const radioScope = useRadioScope(__scopeRadioGroup);
+  const {
+    checked,
+    disabled: isDisabled,
+    value,
+  } = useRadioContext(ITEM_TRIGGER_NAME, useInternalRadioScope(ITEM_TRIGGER_NAME));
+
+  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);
+
+  const ref = React.useRef<RadioGroupItemTriggerElement | null>(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const isArrowKeyPressedRef = React.useRef(false);
+
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (ARROW_KEYS.includes(event.key)) {
+        isArrowKeyPressedRef.current = true;
+      }
+    };
+    const handleKeyUp = () => (isArrowKeyPressedRef.current = false);
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('keyup', handleKeyUp);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('keyup', handleKeyUp);
+    };
+  }, []);
+
+  return (
+    <RovingFocusGroup.Item
+      asChild
+      {...rovingFocusGroupScope}
+      focusable={!isDisabled}
+      active={checked}
+    >
+      <RadioTrigger
+        {...radioScope}
+        {...itemProps}
+        ref={composedRefs}
+        onCheck={() => context.onValueChange(value)}
+        onKeyDown={composeEventHandlers((event) => {
+          // According to WAI ARIA, radio groups don't activate items on enter keypress
+          if (event.key === 'Enter') event.preventDefault();
+        })}
+        onFocus={composeEventHandlers(itemProps.onFocus, () => {
+          /**
+           * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys
+           * and we need to "check" it in that case. We click it to "check" it (instead
+           * of updating `context.value`) so that the radio change event fires.
+           */
+          if (isArrowKeyPressedRef.current) {
+            ref.current?.click();
+          }
+        })}
+      />
+    </RovingFocusGroup.Item>
+  );
+});
+
+RadioGroupItemTrigger.displayName = ITEM_TRIGGER_NAME;
+
 /* -------------------------------------------------------------------------------------------------
  * RadioGroupItem
  * -----------------------------------------------------------------------------------------------*/
 
 const ITEM_NAME = 'RadioGroupItem';
 
-type RadioGroupItemElement = React.ElementRef<typeof Radio>;
-type RadioProps = React.ComponentPropsWithoutRef<typeof Radio>;
-interface RadioGroupItemProps extends Omit<RadioProps, 'onCheck' | 'name'> {
+type RadioGroupItemElement = React.ElementRef<typeof RadioTrigger>;
+
+interface RadioGroupItemProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof Primitive.button>, 'name'> {
+  checked?: boolean;
+  required?: boolean;
+  form?: string;
+  disabled?: boolean;
   value: string;
+  children?: React.ReactNode;
+  onCheck?: () => void;
 }
 
 const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(
   (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {
-    const { __scopeRadioGroup, disabled, ...itemProps } = props;
-    const context = useRadioGroupContext(ITEM_NAME, __scopeRadioGroup);
-    const isDisabled = context.disabled || disabled;
-    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);
+    const {
+      __scopeRadioGroup,
+      disabled,
+      value,
+      checked: checkedProp,
+      form,
+      required,
+      ...triggerProps
+    } = props;
+
     const radioScope = useRadioScope(__scopeRadioGroup);
-    const ref = React.useRef<React.ElementRef<typeof Radio>>(null);
-    const composedRefs = useComposedRefs(forwardedRef, ref);
-    const checked = context.value === itemProps.value;
-    const isArrowKeyPressedRef = React.useRef(false);
-
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (ARROW_KEYS.includes(event.key)) {
-          isArrowKeyPressedRef.current = true;
-        }
-      };
-      const handleKeyUp = () => (isArrowKeyPressedRef.current = false);
-      document.addEventListener('keydown', handleKeyDown);
-      document.addEventListener('keyup', handleKeyUp);
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-        document.removeEventListener('keyup', handleKeyUp);
-      };
-    }, []);
 
     return (
-      <RovingFocusGroup.Item
-        asChild
-        {...rovingFocusGroupScope}
-        focusable={!isDisabled}
-        active={checked}
-      >
-        <Radio
-          disabled={isDisabled}
-          required={context.required}
-          checked={checked}
-          {...radioScope}
-          {...itemProps}
-          name={context.name}
-          ref={composedRefs}
-          onCheck={() => context.onValueChange(itemProps.value)}
-          onKeyDown={composeEventHandlers((event) => {
-            // According to WAI ARIA, radio groups don't activate items on enter keypress
-            if (event.key === 'Enter') event.preventDefault();
-          })}
-          onFocus={composeEventHandlers(itemProps.onFocus, () => {
-            /**
-             * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys
-             * and we need to "check" it in that case. We click it to "check" it (instead
-             * of updating `context.value`) so that the radio change event fires.
-             */
-            if (isArrowKeyPressedRef.current) ref.current?.click();
-          })}
-        />
-      </RovingFocusGroup.Item>
+      <RadioGroupItemRoot
+        {...radioScope}
+        value={value}
+        checked={checkedProp}
+        disabled={disabled}
+        form={form}
+        // @ts-expect-error
+        internal_do_not_use_render={({ isFormControl }: RadioContextValue) => (
+          <>
+            <RadioGroupItemTrigger {...triggerProps} {...radioScope} ref={forwardedRef} />
+            {isFormControl && <RadioBubbleInput {...radioScope} />}
+          </>
+        )}
+      />
     );
   }
 );
@@ -206,19 +316,28 @@ RadioGroupIndicator.displayName = INDICATOR_NAME;
 
 /* ---------------------------------------------------------------------------------------------- */
 
-const Root = RadioGroup;
-const Item = RadioGroupItem;
-const Indicator = RadioGroupIndicator;
-
 export {
   createRadioGroupScope,
   //
   RadioGroup,
+  RadioGroupItemRoot,
+  RadioGroupItemTrigger,
+  RadioBubbleInput as RadioGroupItemBubbleInput,
   RadioGroupItem,
   RadioGroupIndicator,
   //
-  Root,
-  Item,
-  Indicator,
+  RadioGroup as Root,
+  RadioGroupItemRoot as ItemRoot,
+  RadioGroupItemTrigger as ItemTrigger,
+  RadioBubbleInput as ItemBubbleInput,
+  RadioGroupItem as Item,
+  RadioGroupIndicator as Indicator,
+};
+export type {
+  RadioGroupProps,
+  RadioGroupItemRootProps,
+  RadioGroupItemTriggerProps,
+  RadioBubbleInputProps as RadioGroupItemBubbleInputProps,
+  RadioGroupItemProps,
+  RadioGroupIndicatorProps,
 };
-export type { RadioGroupProps, RadioGroupItemProps, RadioGroupIndicatorProps };
diff --git a/packages/react/radio-group/src/radio.tsx b/packages/react/radio-group/src/radio.tsx
index 25009d3fd..dc4227761 100644
--- a/packages/react/radio-group/src/radio.tsx
+++ b/packages/react/radio-group/src/radio.tsx
@@ -18,82 +18,142 @@ const RADIO_NAME = 'Radio';
 type ScopedProps<P> = P & { __scopeRadio?: Scope };
 const [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME);
 
-type RadioContextValue = { checked: boolean; disabled?: boolean };
-const [RadioProvider, useRadioContext] = createRadioContext<RadioContextValue>(RADIO_NAME);
+interface RadioContextValue {
+  checked: boolean;
+  disabled: boolean | undefined;
+  button: HTMLButtonElement | null;
+  setButton: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
+  name: string | undefined;
+  form: string | undefined;
+  value: string;
+  hasConsumerStoppedPropagationRef: React.RefObject<boolean>;
+  required: boolean | undefined;
+  isFormControl: boolean;
+  bubbleInput: HTMLInputElement | null;
+  setBubbleInput: React.Dispatch<React.SetStateAction<HTMLInputElement | null>>;
+}
+const [RadioProviderImpl, useRadioContext] = createRadioContext<RadioContextValue>(RADIO_NAME);
+
+/* -------------------------------------------------------------------------------------------------
+ * RadioProvider
+ * -----------------------------------------------------------------------------------------------*/
+
+const RadioScopeContext = React.createContext<Scope | null>(null);
+RadioScopeContext.displayName = 'RadioScopeContext';
+
+function useInternalRadioScope(displayName: string): Scope {
+  const scope = React.useContext(RadioScopeContext);
+  if (!scope) {
+    throw new Error(
+      `[${displayName}] is missing a parent <Radio.Provider /> component. Make sure to wrap your component tree with <Radio.Provider />.`
+    );
+  }
+  return scope;
+}
 
-type RadioElement = React.ElementRef<typeof Primitive.button>;
-type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
-interface RadioProps extends PrimitiveButtonProps {
+interface RadioProviderProps {
   checked?: boolean;
   required?: boolean;
-  onCheck?(): void;
+  name?: string;
+  form?: string;
+  disabled?: boolean;
+  value?: string;
+  children?: React.ReactNode;
 }
 
-const Radio = React.forwardRef<RadioElement, RadioProps>(
-  (props: ScopedProps<RadioProps>, forwardedRef) => {
-    const {
-      __scopeRadio,
-      name,
-      checked = false,
-      required,
-      disabled,
-      value = 'on',
-      onCheck,
-      form,
-      ...radioProps
-    } = props;
-    const [button, setButton] = React.useState<HTMLButtonElement | null>(null);
-    const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
-    const hasConsumerStoppedPropagationRef = React.useRef(false);
-    // We set this to true by default so that events bubble to forms without JS (SSR)
-    const isFormControl = button ? form || !!button.closest('form') : true;
+const RadioProvider = (props: ScopedProps<RadioProviderProps>) => {
+  const {
+    __scopeRadio,
+    name,
+    checked = false,
+    required,
+    disabled,
+    value = 'on',
+    form,
+    children,
+    // @ts-expect-error
+    internal_do_not_use_render,
+  } = props;
+  const [button, setButton] = React.useState<HTMLButtonElement | null>(null);
+  const [bubbleInput, setBubbleInput] = React.useState<HTMLInputElement | null>(null);
+  const hasConsumerStoppedPropagationRef = React.useRef(false);
+  const isFormControl = button
+    ? !!form || !!button.closest('form')
+    : // We set this to true by default so that events bubble to forms without JS (SSR)
+      true;
+
+  const context: RadioContextValue = {
+    checked,
+    disabled,
+    button,
+    setButton,
+    name,
+    form,
+    value,
+    hasConsumerStoppedPropagationRef,
+    required,
+    isFormControl,
+    bubbleInput,
+    setBubbleInput,
+  };
+
+  return (
+    <RadioScopeContext.Provider value={__scopeRadio}>
+      <RadioProviderImpl scope={__scopeRadio} {...context}>
+        {typeof internal_do_not_use_render === 'function'
+          ? internal_do_not_use_render(context)
+          : children}
+      </RadioProviderImpl>
+    </RadioScopeContext.Provider>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * RadioTrigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const TRIGGER_NAME = 'RadioTrigger';
+
+interface RadioTriggerProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof Primitive.button>, keyof RadioProviderProps> {
+  children?: React.ReactNode;
+  onCheck?: () => void;
+}
+
+const RadioTrigger = React.forwardRef<HTMLButtonElement, RadioTriggerProps>(
+  ({ __scopeRadio, onCheck, ...radioProps }: ScopedProps<RadioTriggerProps>, forwardedRef) => {
+    const { value, disabled, checked, setButton, hasConsumerStoppedPropagationRef, isFormControl } =
+      useRadioContext(TRIGGER_NAME, __scopeRadio);
+    const composedRefs = useComposedRefs(forwardedRef, setButton);
 
     return (
-      <RadioProvider scope={__scopeRadio} checked={checked} disabled={disabled}>
-        <Primitive.button
-          type="button"
-          role="radio"
-          aria-checked={checked}
-          data-state={getState(checked)}
-          data-disabled={disabled ? '' : undefined}
-          disabled={disabled}
-          value={value}
-          {...radioProps}
-          ref={composedRefs}
-          onClick={composeEventHandlers(props.onClick, (event) => {
-            // radios cannot be unchecked so we only communicate a checked state
-            if (!checked) onCheck?.();
-            if (isFormControl) {
-              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-              // if radio is in a form, stop propagation from the button so that we only propagate
-              // one click event (from the input). We propagate changes from an input so that native
-              // form validation works and form events reflect radio updates.
-              if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
-            }
-          })}
-        />
-        {isFormControl && (
-          <RadioBubbleInput
-            control={button}
-            bubbles={!hasConsumerStoppedPropagationRef.current}
-            name={name}
-            value={value}
-            checked={checked}
-            required={required}
-            disabled={disabled}
-            form={form}
-            // We transform because the input is absolutely positioned but we have
-            // rendered it **after** the button. This pulls it back to sit on top
-            // of the button.
-            style={{ transform: 'translateX(-100%)' }}
-          />
-        )}
-      </RadioProvider>
+      <Primitive.button
+        type="button"
+        role="radio"
+        aria-checked={checked}
+        data-state={getState(checked)}
+        data-disabled={disabled ? '' : undefined}
+        disabled={disabled}
+        value={value}
+        {...radioProps}
+        ref={composedRefs}
+        onClick={composeEventHandlers(radioProps.onClick, (event) => {
+          // radios cannot be unchecked so we only communicate a checked state
+          if (!checked) onCheck?.();
+          if (isFormControl) {
+            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+            // if radio is in a form, stop propagation from the button so that we only propagate
+            // one click event (from the input). We propagate changes from an input so that native
+            // form validation works and form events reflect radio updates.
+            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+          }
+        })}
+      />
     );
   }
 );
 
-Radio.displayName = RADIO_NAME;
+RadioTrigger.displayName = TRIGGER_NAME;
 
 /* -------------------------------------------------------------------------------------------------
  * RadioIndicator
@@ -103,7 +163,7 @@ const INDICATOR_NAME = 'RadioIndicator';
 
 type RadioIndicatorElement = React.ElementRef<typeof Primitive.span>;
 type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;
-export interface RadioIndicatorProps extends PrimitiveSpanProps {
+interface RadioIndicatorProps extends PrimitiveSpanProps {
   /**
    * Used to force mounting when more control is needed. Useful when
    * controlling animation with React animation libraries.
@@ -137,31 +197,30 @@ RadioIndicator.displayName = INDICATOR_NAME;
 const BUBBLE_INPUT_NAME = 'RadioBubbleInput';
 
 type InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;
-interface RadioBubbleInputProps extends Omit<InputProps, 'checked'> {
-  checked: boolean;
-  control: HTMLElement | null;
-  bubbles: boolean;
-}
+interface RadioBubbleInputProps extends Omit<InputProps, 'checked'> {}
 
 const RadioBubbleInput = React.forwardRef<HTMLInputElement, RadioBubbleInputProps>(
-  (
-    {
-      __scopeRadio,
-      control,
+  ({ __scopeRadio, ...props }: ScopedProps<RadioBubbleInputProps>, forwardedRef) => {
+    const {
+      button,
+      hasConsumerStoppedPropagationRef,
       checked,
-      bubbles = true,
-      ...props
-    }: ScopedProps<RadioBubbleInputProps>,
-    forwardedRef
-  ) => {
-    const ref = React.useRef<HTMLInputElement>(null);
-    const composedRefs = useComposedRefs(ref, forwardedRef);
+      required,
+      disabled,
+      name,
+      value,
+      form,
+      bubbleInput,
+      setBubbleInput,
+    } = useRadioContext(BUBBLE_INPUT_NAME, __scopeRadio);
+
+    const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
     const prevChecked = usePrevious(checked);
-    const controlSize = useSize(control);
+    const controlSize = useSize(button);
 
     // Bubble checked change to parents (e.g form change event)
     React.useEffect(() => {
-      const input = ref.current;
+      const input = bubbleInput;
       if (!input) return;
 
       const inputProto = window.HTMLInputElement.prototype;
@@ -171,17 +230,22 @@ const RadioBubbleInput = React.forwardRef<HTMLInputElement, RadioBubbleInputProp
       ) as PropertyDescriptor;
       const setChecked = descriptor.set;
       if (prevChecked !== checked && setChecked) {
-        const event = new Event('click', { bubbles });
+        const event = new Event('click', { bubbles: !hasConsumerStoppedPropagationRef.current });
         setChecked.call(input, checked);
         input.dispatchEvent(event);
       }
-    }, [prevChecked, checked, bubbles]);
+    }, [prevChecked, checked, hasConsumerStoppedPropagationRef, bubbleInput]);
 
     return (
       <Primitive.input
         type="radio"
         aria-hidden
         defaultChecked={checked}
+        required={required}
+        disabled={disabled}
+        name={name}
+        value={value}
+        form={form}
         {...props}
         tabIndex={-1}
         ref={composedRefs}
@@ -208,8 +272,24 @@ function getState(checked: boolean) {
 
 export {
   createRadioScope,
+  useRadioContext,
+  useInternalRadioScope,
   //
-  Radio,
   RadioIndicator,
+  RadioTrigger,
+  RadioProvider,
+  RadioBubbleInput,
+  //
+  RadioTrigger as Trigger,
+  RadioIndicator as Indicator,
+  RadioProvider as Provider,
+  RadioBubbleInput as BubbleInput,
+};
+
+export type {
+  RadioTriggerProps,
+  RadioIndicatorProps,
+  RadioProviderProps,
+  RadioBubbleInputProps,
+  RadioContextValue,
 };
-export type { RadioProps };

From 728be54029f7699fa2896bec3cf879ac9c42e8e1 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Wed, 30 Apr 2025 09:33:40 -0700
Subject: [PATCH 2/9] rename RadioProvider to RadioRoot

---
 .../react/radio-group/src/radio-group.tsx     |  6 +++---
 packages/react/radio-group/src/radio.tsx      | 20 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/react/radio-group/src/radio-group.tsx b/packages/react/radio-group/src/radio-group.tsx
index fac741066..725a59481 100644
--- a/packages/react/radio-group/src/radio-group.tsx
+++ b/packages/react/radio-group/src/radio-group.tsx
@@ -8,7 +8,7 @@ import { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useDirection } from '@radix-ui/react-direction';
 import {
-  RadioProvider,
+  RadioRoot,
   RadioTrigger,
   RadioBubbleInput,
   type RadioBubbleInputProps,
@@ -124,7 +124,7 @@ RadioGroup.displayName = RADIO_GROUP_NAME;
 
 const ITEM_ROOT_NAME = 'RadioGroupItemRoot';
 
-type RadioProviderProps = React.ComponentPropsWithoutRef<typeof RadioProvider>;
+type RadioProviderProps = React.ComponentPropsWithoutRef<typeof RadioRoot>;
 interface RadioGroupItemRootProps extends Omit<RadioProviderProps, 'name' | 'required'> {
   value: string;
 }
@@ -143,7 +143,7 @@ const RadioGroupItemRoot = (props: ScopedProps<RadioGroupItemRootProps>) => {
   const radioScope = useRadioScope(__scopeRadioGroup);
 
   return (
-    <RadioProvider
+    <RadioRoot
       {...itemProps}
       {...radioScope}
       disabled={context.disabled || disabled}
diff --git a/packages/react/radio-group/src/radio.tsx b/packages/react/radio-group/src/radio.tsx
index dc4227761..4dd8f1dcd 100644
--- a/packages/react/radio-group/src/radio.tsx
+++ b/packages/react/radio-group/src/radio.tsx
@@ -32,10 +32,10 @@ interface RadioContextValue {
   bubbleInput: HTMLInputElement | null;
   setBubbleInput: React.Dispatch<React.SetStateAction<HTMLInputElement | null>>;
 }
-const [RadioProviderImpl, useRadioContext] = createRadioContext<RadioContextValue>(RADIO_NAME);
+const [RadioProvider, useRadioContext] = createRadioContext<RadioContextValue>(RADIO_NAME);
 
 /* -------------------------------------------------------------------------------------------------
- * RadioProvider
+ * RadioRoot
  * -----------------------------------------------------------------------------------------------*/
 
 const RadioScopeContext = React.createContext<Scope | null>(null);
@@ -51,7 +51,7 @@ function useInternalRadioScope(displayName: string): Scope {
   return scope;
 }
 
-interface RadioProviderProps {
+interface RadioRootProps {
   checked?: boolean;
   required?: boolean;
   name?: string;
@@ -61,7 +61,7 @@ interface RadioProviderProps {
   children?: React.ReactNode;
 }
 
-const RadioProvider = (props: ScopedProps<RadioProviderProps>) => {
+const RadioRoot = (props: ScopedProps<RadioRootProps>) => {
   const {
     __scopeRadio,
     name,
@@ -99,11 +99,11 @@ const RadioProvider = (props: ScopedProps<RadioProviderProps>) => {
 
   return (
     <RadioScopeContext.Provider value={__scopeRadio}>
-      <RadioProviderImpl scope={__scopeRadio} {...context}>
+      <RadioProvider scope={__scopeRadio} {...context}>
         {typeof internal_do_not_use_render === 'function'
           ? internal_do_not_use_render(context)
           : children}
-      </RadioProviderImpl>
+      </RadioProvider>
     </RadioScopeContext.Provider>
   );
 };
@@ -115,7 +115,7 @@ const RadioProvider = (props: ScopedProps<RadioProviderProps>) => {
 const TRIGGER_NAME = 'RadioTrigger';
 
 interface RadioTriggerProps
-  extends Omit<React.ComponentPropsWithoutRef<typeof Primitive.button>, keyof RadioProviderProps> {
+  extends Omit<React.ComponentPropsWithoutRef<typeof Primitive.button>, keyof RadioRootProps> {
   children?: React.ReactNode;
   onCheck?: () => void;
 }
@@ -277,19 +277,19 @@ export {
   //
   RadioIndicator,
   RadioTrigger,
-  RadioProvider,
+  RadioRoot,
   RadioBubbleInput,
   //
   RadioTrigger as Trigger,
   RadioIndicator as Indicator,
-  RadioProvider as Provider,
+  RadioRoot as Root,
   RadioBubbleInput as BubbleInput,
 };
 
 export type {
   RadioTriggerProps,
   RadioIndicatorProps,
-  RadioProviderProps,
+  RadioRootProps,
   RadioBubbleInputProps,
   RadioContextValue,
 };

From 69e5ea23c51c450ff31fc8c50c8ce951ad7201b5 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Wed, 30 Apr 2025 13:45:33 -0700
Subject: [PATCH 3/9] fix bubble inputs

---
 .../react/radio-group/src/radio-group.tsx     | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/react/radio-group/src/radio-group.tsx b/packages/react/radio-group/src/radio-group.tsx
index 725a59481..bc91ceef2 100644
--- a/packages/react/radio-group/src/radio-group.tsx
+++ b/packages/react/radio-group/src/radio-group.tsx
@@ -11,7 +11,6 @@ import {
   RadioRoot,
   RadioTrigger,
   RadioBubbleInput,
-  type RadioBubbleInputProps,
   RadioIndicator,
   createRadioScope,
   useRadioContext,
@@ -240,6 +239,27 @@ const RadioGroupItemTrigger = React.forwardRef<
 
 RadioGroupItemTrigger.displayName = ITEM_TRIGGER_NAME;
 
+/* -------------------------------------------------------------------------------------------------
+ * RadioGroupItemBubbleInput
+ * -----------------------------------------------------------------------------------------------*/
+
+const ITEM_BUBBLE_INPUT_NAME = 'RadioGroupItemBubbleInput';
+
+type RadioGroupItemBubbleInputElement = HTMLInputElement;
+type RadioBubbleInputProps = React.ComponentPropsWithoutRef<typeof RadioBubbleInput>;
+interface RadioGroupItemBubbleInputProps extends RadioBubbleInputProps {}
+
+const RadioGroupItemBubbleInput = React.forwardRef<
+  RadioGroupItemBubbleInputElement,
+  RadioGroupItemBubbleInputProps
+>((props: ScopedProps<RadioGroupItemBubbleInputProps>, forwardedRef) => {
+  const { __scopeRadioGroup, ...inputProps } = props;
+  const radioScope = useRadioScope(__scopeRadioGroup);
+  return <RadioBubbleInput {...radioScope} {...inputProps} ref={forwardedRef} />;
+});
+
+RadioGroupItemBubbleInput.displayName = ITEM_BUBBLE_INPUT_NAME;
+
 /* -------------------------------------------------------------------------------------------------
  * RadioGroupItem
  * -----------------------------------------------------------------------------------------------*/
@@ -322,14 +342,14 @@ export {
   RadioGroup,
   RadioGroupItemRoot,
   RadioGroupItemTrigger,
-  RadioBubbleInput as RadioGroupItemBubbleInput,
+  RadioGroupItemBubbleInput,
   RadioGroupItem,
   RadioGroupIndicator,
   //
   RadioGroup as Root,
   RadioGroupItemRoot as ItemRoot,
   RadioGroupItemTrigger as ItemTrigger,
-  RadioBubbleInput as ItemBubbleInput,
+  RadioGroupItemBubbleInput as ItemBubbleInput,
   RadioGroupItem as Item,
   RadioGroupIndicator as Indicator,
 };
@@ -337,7 +357,7 @@ export type {
   RadioGroupProps,
   RadioGroupItemRootProps,
   RadioGroupItemTriggerProps,
-  RadioBubbleInputProps as RadioGroupItemBubbleInputProps,
+  RadioGroupItemBubbleInputProps,
   RadioGroupItemProps,
   RadioGroupIndicatorProps,
 };

From ab47442e8369642421f48f344568939abea45c15 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Wed, 30 Apr 2025 13:47:16 -0700
Subject: [PATCH 4/9] add stories

---
 .../stories/radio-group-legacy.stories.tsx    | 420 ++++++++++++
 .../storybook/stories/radio-group.stories.tsx | 603 +++++++++++-------
 2 files changed, 796 insertions(+), 227 deletions(-)
 create mode 100644 apps/storybook/stories/radio-group-legacy.stories.tsx

diff --git a/apps/storybook/stories/radio-group-legacy.stories.tsx b/apps/storybook/stories/radio-group-legacy.stories.tsx
new file mode 100644
index 000000000..fda848fe5
--- /dev/null
+++ b/apps/storybook/stories/radio-group-legacy.stories.tsx
@@ -0,0 +1,420 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Direction, Label as LabelPrimitive, RadioGroup } from 'radix-ui';
+import styles from './radio-group.stories.module.css';
+
+export default {
+  title: 'Components/RadioGroup (legacy API)',
+  component: RadioGroup.Root,
+} satisfies Meta<typeof RadioGroup.Root>;
+
+export const Styled = () => (
+  <Label>
+    Favourite pet
+    <RadioGroup.Root className={styles.root} defaultValue="1">
+      <Label>
+        <RadioGroup.Item className={styles.item} value="1">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        Cat
+      </Label>{' '}
+      <Label>
+        <RadioGroup.Item className={styles.item} value="2">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        Dog
+      </Label>{' '}
+      <Label>
+        <RadioGroup.Item className={styles.item} value="3">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        Rabbit
+      </Label>
+    </RadioGroup.Root>
+  </Label>
+);
+
+export const Controlled = () => {
+  const [value, setValue] = React.useState('2');
+
+  return (
+    <RadioGroup.Root className={styles.root} value={value} onValueChange={setValue}>
+      <RadioGroup.Item className={styles.item} value="1">
+        <RadioGroup.Indicator className={styles.indicator} />
+      </RadioGroup.Item>
+      <RadioGroup.Item className={styles.item} value="2">
+        <RadioGroup.Indicator className={styles.indicator} />
+      </RadioGroup.Item>
+      <RadioGroup.Item className={styles.item} value="3">
+        <RadioGroup.Indicator className={styles.indicator} />
+      </RadioGroup.Item>
+    </RadioGroup.Root>
+  );
+};
+
+export const Unset = () => (
+  <Label>
+    Favourite pet
+    <RadioGroup.Root className={styles.root}>
+      <Label>
+        <RadioGroup.Item className={styles.item} value="1">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        Cat
+      </Label>{' '}
+      <Label>
+        <RadioGroup.Item className={styles.item} value="2" disabled>
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        Dog
+      </Label>{' '}
+      <Label>
+        <RadioGroup.Item className={styles.item} value="3">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        Rabbit
+      </Label>
+    </RadioGroup.Root>
+  </Label>
+);
+
+export const WithinForm = () => {
+  const [data, setData] = React.useState({ optional: '', required: '', stopprop: '' });
+
+  return (
+    <form
+      onSubmit={(event) => event.preventDefault()}
+      onChange={(event) => {
+        const radio = event.target as HTMLInputElement;
+        setData((prevData) => ({ ...prevData, [radio.name]: radio.value }));
+      }}
+    >
+      <fieldset>
+        <legend>optional value: {data.optional}</legend>
+        <RadioGroup.Root className={styles.root} name="optional">
+          <RadioGroup.Item className={styles.item} value="1">
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+          <RadioGroup.Item className={styles.item} value="2">
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+          <RadioGroup.Item className={styles.item} value="3">
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+        </RadioGroup.Root>
+      </fieldset>
+
+      <br />
+      <br />
+
+      <fieldset>
+        <legend>required value: {data.required}</legend>
+        <RadioGroup.Root className={styles.root} name="required" required>
+          <RadioGroup.Item className={styles.item} value="1">
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+          <RadioGroup.Item className={styles.item} value="2">
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+          <RadioGroup.Item className={styles.item} value="3">
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+        </RadioGroup.Root>
+      </fieldset>
+
+      <br />
+      <br />
+
+      <fieldset>
+        <legend>stop propagation value: {data.stopprop}</legend>
+        <RadioGroup.Root className={styles.root} name="stopprop">
+          <RadioGroup.Item
+            className={styles.item}
+            value="1"
+            onClick={(event) => event.stopPropagation()}
+          >
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+          <RadioGroup.Item
+            className={styles.item}
+            value="2"
+            onClick={(event) => event.stopPropagation()}
+          >
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+          <RadioGroup.Item
+            className={styles.item}
+            value="3"
+            onClick={(event) => event.stopPropagation()}
+          >
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+        </RadioGroup.Root>
+      </fieldset>
+
+      <br />
+      <br />
+
+      <button>Submit</button>
+    </form>
+  );
+};
+
+export const Animated = () => {
+  const indicatorClass = [styles.indicator, styles.animatedIndicator].join(' ');
+  return (
+    <Label>
+      Favourite pet
+      <RadioGroup.Root className={styles.root} defaultValue="1">
+        <Label>
+          <RadioGroup.Item className={styles.item} value="1">
+            <RadioGroup.Indicator className={indicatorClass} />
+          </RadioGroup.Item>
+          Cat
+        </Label>{' '}
+        <Label>
+          <RadioGroup.Item className={styles.item} value="2">
+            <RadioGroup.Indicator className={indicatorClass} />
+          </RadioGroup.Item>
+          Dog
+        </Label>{' '}
+        <Label>
+          <RadioGroup.Item className={styles.item} value="3">
+            <RadioGroup.Indicator className={indicatorClass} />
+          </RadioGroup.Item>
+          Rabbit
+        </Label>
+      </RadioGroup.Root>
+    </Label>
+  );
+};
+
+export const Chromatic = () => {
+  const manualFocusRef = React.useRef<React.ElementRef<typeof RadioGroup.Item>>(null);
+
+  React.useEffect(() => {
+    manualFocusRef.current?.focus();
+  }, []);
+
+  return (
+    <>
+      <h1>Uncontrolled</h1>
+      <h2>Unset</h2>
+      <RadioGroup.Root className={styles.root}>
+        <RadioGroup.Item className={styles.item} value="1">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="2">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="3">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h2>Set</h2>
+      <RadioGroup.Root className={styles.root} defaultValue="3">
+        <RadioGroup.Item className={styles.item} value="1">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="2">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="3">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h1>Controlled</h1>
+      <h2>Unset</h2>
+      <RadioGroup.Root className={styles.root} value="">
+        <RadioGroup.Item className={styles.item} value="1">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="2">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="3">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h2>Set</h2>
+      <RadioGroup.Root className={styles.root} value="3">
+        <RadioGroup.Item className={styles.item} value="1">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="2">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="3">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h1>Disabled item</h1>
+      <RadioGroup.Root className={styles.root}>
+        <RadioGroup.Item className={styles.item} value="1">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="2" disabled>
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="3">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h1>Disabled root</h1>
+      <RadioGroup.Root className={styles.root} disabled>
+        <RadioGroup.Item className={styles.item} value="1">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        {/* Not possible to set `disabled` back to `false` since it's set on the root (this item
+            should still be disabled). */}
+        <RadioGroup.Item className={styles.item} value="2" disabled={false}>
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="3">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h1>All items disabled</h1>
+      <RadioGroup.Root className={styles.root}>
+        <RadioGroup.Item className={styles.item} value="1" disabled>
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="2" disabled>
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="3" disabled>
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h1>Manual focus into group</h1>
+      <RadioGroup.Root className={styles.root}>
+        <RadioGroup.Item className={styles.item} value="1" ref={manualFocusRef}>
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="2">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="3">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h1>Force mounted indicator</h1>
+      <RadioGroup.Root className={styles.root}>
+        <RadioGroup.Item className={styles.item} value="1">
+          <RadioGroup.Indicator className={styles.indicator} forceMount />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="2">
+          <RadioGroup.Indicator className={styles.indicator} forceMount />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="3">
+          <RadioGroup.Indicator className={styles.indicator} forceMount />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h1>Direction</h1>
+      <h2>Prop</h2>
+      <RadioGroup.Root className={styles.root} defaultValue="1" dir="rtl">
+        <RadioGroup.Item className={styles.item} value="1">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="2">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.item} value="3">
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h2>Inherited</h2>
+      <Direction.Provider dir="rtl">
+        <RadioGroup.Root className={styles.root} defaultValue="1">
+          <RadioGroup.Item className={styles.item} value="1">
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+          <RadioGroup.Item className={styles.item} value="2">
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+          <RadioGroup.Item className={styles.item} value="3">
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.Item>
+        </RadioGroup.Root>
+      </Direction.Provider>
+
+      <h1>State attributes</h1>
+      <h2>Default</h2>
+      <RadioGroup.Root className={styles.rootAttr} defaultValue="3">
+        <RadioGroup.Item className={styles.itemAttr} value="1">
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.itemAttr} value="2">
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.itemAttr} value="3">
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h2>Disabled item</h2>
+      <RadioGroup.Root className={styles.rootAttr} defaultValue="3">
+        <RadioGroup.Item className={styles.itemAttr} value="1">
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.itemAttr} value="2" disabled>
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.itemAttr} value="3">
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <RadioGroup.Root className={styles.rootAttr} defaultValue="2">
+        <RadioGroup.Item className={styles.itemAttr} value="1">
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.itemAttr} value="2" disabled>
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.itemAttr} value="3">
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h2>Disabled root</h2>
+      <RadioGroup.Root className={styles.rootAttr} defaultValue="3" disabled>
+        <RadioGroup.Item className={styles.itemAttr} value="1">
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.itemAttr} value="2">
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.itemAttr} value="3">
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <h2>All items disabled</h2>
+      <RadioGroup.Root className={styles.rootAttr} defaultValue="3">
+        <RadioGroup.Item className={styles.itemAttr} value="1" disabled>
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.itemAttr} value="2" disabled>
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+        <RadioGroup.Item className={styles.itemAttr} value="3" disabled>
+          <RadioGroup.Indicator className={styles.indicatorAttr} />
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+    </>
+  );
+};
+Chromatic.parameters = { chromatic: { disable: false } };
+
+const Label = (props: any) => <LabelPrimitive.Root {...props} className={styles.label} />;
diff --git a/apps/storybook/stories/radio-group.stories.tsx b/apps/storybook/stories/radio-group.stories.tsx
index 77ba95650..8a4372acb 100644
--- a/apps/storybook/stories/radio-group.stories.tsx
+++ b/apps/storybook/stories/radio-group.stories.tsx
@@ -1,80 +1,103 @@
+/* eslint-disable react/jsx-pascal-case */
 import * as React from 'react';
+import type { Meta } from '@storybook/react';
 import { Direction, Label as LabelPrimitive, RadioGroup } from 'radix-ui';
 import styles from './radio-group.stories.module.css';
 
-export default { title: 'Components/RadioGroup' };
+export default {
+  title: 'Components/RadioGroup',
+  component: RadioGroup.Root,
+} satisfies Meta<typeof RadioGroup.Root>;
 
-export const LegacyStyled = () => (
+export const Styled = () => (
   <Label>
     Favourite pet
     <RadioGroup.Root className={styles.root} defaultValue="1">
       <Label>
-        <RadioGroup.Item className={styles.item} value="1">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
         Cat
       </Label>{' '}
       <Label>
-        <RadioGroup.Item className={styles.item} value="2">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="2">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
         Dog
       </Label>{' '}
       <Label>
-        <RadioGroup.Item className={styles.item} value="3">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
         Rabbit
       </Label>
     </RadioGroup.Root>
   </Label>
 );
 
-export const LegacyControlled = () => {
+export const Controlled = () => {
   const [value, setValue] = React.useState('2');
 
   return (
     <RadioGroup.Root className={styles.root} value={value} onValueChange={setValue}>
-      <RadioGroup.Item className={styles.item} value="1">
-        <RadioGroup.Indicator className={styles.indicator} />
-      </RadioGroup.Item>
-      <RadioGroup.Item className={styles.item} value="2">
-        <RadioGroup.Indicator className={styles.indicator} />
-      </RadioGroup.Item>
-      <RadioGroup.Item className={styles.item} value="3">
-        <RadioGroup.Indicator className={styles.indicator} />
-      </RadioGroup.Item>
+      <RadioGroup.unstable_ItemRoot value="1">
+        <RadioGroup.unstable_ItemTrigger className={styles.item}>
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.unstable_ItemTrigger>
+      </RadioGroup.unstable_ItemRoot>
+      <RadioGroup.unstable_ItemRoot value="2">
+        <RadioGroup.unstable_ItemTrigger className={styles.item}>
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.unstable_ItemTrigger>
+      </RadioGroup.unstable_ItemRoot>
+      <RadioGroup.unstable_ItemRoot value="3">
+        <RadioGroup.unstable_ItemTrigger className={styles.item}>
+          <RadioGroup.Indicator className={styles.indicator} />
+        </RadioGroup.unstable_ItemTrigger>
+      </RadioGroup.unstable_ItemRoot>
     </RadioGroup.Root>
   );
 };
 
-export const LegacyUnset = () => (
+export const Unset = () => (
   <Label>
     Favourite pet
     <RadioGroup.Root className={styles.root}>
       <Label>
-        <RadioGroup.Item className={styles.item} value="1">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
         Cat
       </Label>{' '}
       <Label>
-        <RadioGroup.Item className={styles.item} value="2" disabled>
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="2" disabled>
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
         Dog
       </Label>{' '}
       <Label>
-        <RadioGroup.Item className={styles.item} value="3">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
         Rabbit
       </Label>
     </RadioGroup.Root>
   </Label>
 );
 
-export const LegacyWithinForm = () => {
+export const WithinForm = () => {
   const [data, setData] = React.useState({ optional: '', required: '', stopprop: '' });
 
   return (
@@ -88,15 +111,24 @@ export const LegacyWithinForm = () => {
       <fieldset>
         <legend>optional value: {data.optional}</legend>
         <RadioGroup.Root className={styles.root} name="optional">
-          <RadioGroup.Item className={styles.item} value="1">
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
-          <RadioGroup.Item className={styles.item} value="2">
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
-          <RadioGroup.Item className={styles.item} value="3">
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
+          <RadioGroup.unstable_ItemRoot value="1">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+            <RadioGroup.unstable_ItemBubbleInput />
+          </RadioGroup.unstable_ItemRoot>
+          <RadioGroup.unstable_ItemRoot value="2">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+            <RadioGroup.unstable_ItemBubbleInput />
+          </RadioGroup.unstable_ItemRoot>
+          <RadioGroup.unstable_ItemRoot value="3">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+            <RadioGroup.unstable_ItemBubbleInput />
+          </RadioGroup.unstable_ItemRoot>
         </RadioGroup.Root>
       </fieldset>
 
@@ -106,15 +138,24 @@ export const LegacyWithinForm = () => {
       <fieldset>
         <legend>required value: {data.required}</legend>
         <RadioGroup.Root className={styles.root} name="required" required>
-          <RadioGroup.Item className={styles.item} value="1">
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
-          <RadioGroup.Item className={styles.item} value="2">
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
-          <RadioGroup.Item className={styles.item} value="3">
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
+          <RadioGroup.unstable_ItemRoot value="1">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+            <RadioGroup.unstable_ItemBubbleInput />
+          </RadioGroup.unstable_ItemRoot>
+          <RadioGroup.unstable_ItemRoot value="2">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+            <RadioGroup.unstable_ItemBubbleInput />
+          </RadioGroup.unstable_ItemRoot>
+          <RadioGroup.unstable_ItemRoot value="3">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+            <RadioGroup.unstable_ItemBubbleInput />
+          </RadioGroup.unstable_ItemRoot>
         </RadioGroup.Root>
       </fieldset>
 
@@ -124,27 +165,33 @@ export const LegacyWithinForm = () => {
       <fieldset>
         <legend>stop propagation value: {data.stopprop}</legend>
         <RadioGroup.Root className={styles.root} name="stopprop">
-          <RadioGroup.Item
-            className={styles.item}
-            value="1"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
-          <RadioGroup.Item
-            className={styles.item}
-            value="2"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
-          <RadioGroup.Item
-            className={styles.item}
-            value="3"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
+          <RadioGroup.unstable_ItemRoot value="1">
+            <RadioGroup.unstable_ItemTrigger
+              onClick={(event) => event.stopPropagation()}
+              className={styles.item}
+            >
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+            <RadioGroup.unstable_ItemBubbleInput />
+          </RadioGroup.unstable_ItemRoot>
+          <RadioGroup.unstable_ItemRoot value="2">
+            <RadioGroup.unstable_ItemTrigger
+              onClick={(event) => event.stopPropagation()}
+              className={styles.item}
+            >
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+            <RadioGroup.unstable_ItemBubbleInput />
+          </RadioGroup.unstable_ItemRoot>
+          <RadioGroup.unstable_ItemRoot value="3">
+            <RadioGroup.unstable_ItemTrigger
+              onClick={(event) => event.stopPropagation()}
+              className={styles.item}
+            >
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+            <RadioGroup.unstable_ItemBubbleInput />
+          </RadioGroup.unstable_ItemRoot>
         </RadioGroup.Root>
       </fieldset>
 
@@ -156,28 +203,34 @@ export const LegacyWithinForm = () => {
   );
 };
 
-export const LegacyAnimated = () => {
+export const Animated = () => {
   const indicatorClass = [styles.indicator, styles.animatedIndicator].join(' ');
   return (
     <Label>
       Favourite pet
       <RadioGroup.Root className={styles.root} defaultValue="1">
         <Label>
-          <RadioGroup.Item className={styles.item} value="1">
-            <RadioGroup.Indicator className={indicatorClass} />
-          </RadioGroup.Item>
+          <RadioGroup.unstable_ItemRoot value="1">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={indicatorClass} />
+            </RadioGroup.unstable_ItemTrigger>
+          </RadioGroup.unstable_ItemRoot>
           Cat
         </Label>{' '}
         <Label>
-          <RadioGroup.Item className={styles.item} value="2">
-            <RadioGroup.Indicator className={indicatorClass} />
-          </RadioGroup.Item>
+          <RadioGroup.unstable_ItemRoot value="2">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={indicatorClass} />
+            </RadioGroup.unstable_ItemTrigger>
+          </RadioGroup.unstable_ItemRoot>
           Dog
         </Label>{' '}
         <Label>
-          <RadioGroup.Item className={styles.item} value="3">
-            <RadioGroup.Indicator className={indicatorClass} />
-          </RadioGroup.Item>
+          <RadioGroup.unstable_ItemRoot value="3">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={indicatorClass} />
+            </RadioGroup.unstable_ItemTrigger>
+          </RadioGroup.unstable_ItemRoot>
           Rabbit
         </Label>
       </RadioGroup.Root>
@@ -185,7 +238,7 @@ export const LegacyAnimated = () => {
   );
 };
 
-export const LegacyChromatic = () => {
+export const Chromatic = () => {
   const manualFocusRef = React.useRef<React.ElementRef<typeof RadioGroup.Item>>(null);
 
   React.useEffect(() => {
@@ -197,220 +250,316 @@ export const LegacyChromatic = () => {
       <h1>Uncontrolled</h1>
       <h2>Unset</h2>
       <RadioGroup.Root className={styles.root}>
-        <RadioGroup.Item className={styles.item} value="1">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="2">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="3">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h2>Set</h2>
       <RadioGroup.Root className={styles.root} defaultValue="3">
-        <RadioGroup.Item className={styles.item} value="1">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="2">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="3">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h1>Controlled</h1>
       <h2>Unset</h2>
       <RadioGroup.Root className={styles.root} value={null}>
-        <RadioGroup.Item className={styles.item} value="1">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="2">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="3">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h2>Set</h2>
       <RadioGroup.Root className={styles.root} value="3">
-        <RadioGroup.Item className={styles.item} value="1">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="2">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="3">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h1>Disabled item</h1>
       <RadioGroup.Root className={styles.root}>
-        <RadioGroup.Item className={styles.item} value="1">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="2" disabled>
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="3">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2" disabled>
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h1>Disabled root</h1>
       <RadioGroup.Root className={styles.root} disabled>
-        <RadioGroup.Item className={styles.item} value="1">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
         {/* Not possible to set `disabled` back to `false` since it's set on the root (this item
             should still be disabled). */}
-        <RadioGroup.Item className={styles.item} value="2" disabled={false}>
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="3">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="2" disabled={false}>
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h1>All items disabled</h1>
       <RadioGroup.Root className={styles.root}>
-        <RadioGroup.Item className={styles.item} value="1" disabled>
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="2" disabled>
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="3" disabled>
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1" disabled>
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2" disabled>
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3" disabled>
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h1>Manual focus into group</h1>
       <RadioGroup.Root className={styles.root}>
-        <RadioGroup.Item className={styles.item} value="1" ref={manualFocusRef}>
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="2">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="3">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.item} ref={manualFocusRef}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h1>Force mounted indicator</h1>
       <RadioGroup.Root className={styles.root}>
-        <RadioGroup.Item className={styles.item} value="1">
-          <RadioGroup.Indicator className={styles.indicator} forceMount />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="2">
-          <RadioGroup.Indicator className={styles.indicator} forceMount />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="3">
-          <RadioGroup.Indicator className={styles.indicator} forceMount />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} forceMount />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} forceMount />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} forceMount />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h1>Direction</h1>
       <h2>Prop</h2>
       <RadioGroup.Root className={styles.root} defaultValue="1" dir="rtl">
-        <RadioGroup.Item className={styles.item} value="1">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="2">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.item} value="3">
-          <RadioGroup.Indicator className={styles.indicator} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.item}>
+            <RadioGroup.Indicator className={styles.indicator} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h2>Inherited</h2>
       <Direction.Provider dir="rtl">
         <RadioGroup.Root className={styles.root} defaultValue="1">
-          <RadioGroup.Item className={styles.item} value="1">
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
-          <RadioGroup.Item className={styles.item} value="2">
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
-          <RadioGroup.Item className={styles.item} value="3">
-            <RadioGroup.Indicator className={styles.indicator} />
-          </RadioGroup.Item>
+          <RadioGroup.unstable_ItemRoot value="1">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+          </RadioGroup.unstable_ItemRoot>
+          <RadioGroup.unstable_ItemRoot value="2">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+          </RadioGroup.unstable_ItemRoot>
+          <RadioGroup.unstable_ItemRoot value="3">
+            <RadioGroup.unstable_ItemTrigger className={styles.item}>
+              <RadioGroup.Indicator className={styles.indicator} />
+            </RadioGroup.unstable_ItemTrigger>
+          </RadioGroup.unstable_ItemRoot>
         </RadioGroup.Root>
       </Direction.Provider>
 
       <h1>State attributes</h1>
       <h2>Default</h2>
       <RadioGroup.Root className={styles.rootAttr} defaultValue="3">
-        <RadioGroup.Item className={styles.itemAttr} value="1">
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.itemAttr} value="2">
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.itemAttr} value="3">
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2">
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h2>Disabled item</h2>
       <RadioGroup.Root className={styles.rootAttr} defaultValue="3">
-        <RadioGroup.Item className={styles.itemAttr} value="1">
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.itemAttr} value="2" disabled>
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.itemAttr} value="3">
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2" disabled>
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <RadioGroup.Root className={styles.rootAttr} defaultValue="2">
-        <RadioGroup.Item className={styles.itemAttr} value="1">
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.itemAttr} value="2" disabled>
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.itemAttr} value="3">
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2" disabled>
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h2>Disabled root</h2>
       <RadioGroup.Root className={styles.rootAttr} defaultValue="3" disabled>
-        <RadioGroup.Item className={styles.itemAttr} value="1">
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.itemAttr} value="2">
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.itemAttr} value="3">
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1">
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2">
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3">
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
 
       <h2>All items disabled</h2>
       <RadioGroup.Root className={styles.rootAttr} defaultValue="3">
-        <RadioGroup.Item className={styles.itemAttr} value="1" disabled>
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.itemAttr} value="2" disabled>
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
-        <RadioGroup.Item className={styles.itemAttr} value="3" disabled>
-          <RadioGroup.Indicator className={styles.indicatorAttr} />
-        </RadioGroup.Item>
+        <RadioGroup.unstable_ItemRoot value="1" disabled>
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="2" disabled>
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
+        <RadioGroup.unstable_ItemRoot value="3" disabled>
+          <RadioGroup.unstable_ItemTrigger className={styles.itemAttr}>
+            <RadioGroup.Indicator className={styles.indicatorAttr} />
+          </RadioGroup.unstable_ItemTrigger>
+        </RadioGroup.unstable_ItemRoot>
       </RadioGroup.Root>
     </>
   );
 };
-LegacyChromatic.parameters = { chromatic: { disable: false } };
+Chromatic.parameters = { chromatic: { disable: false } };
 
 const Label = (props: any) => <LabelPrimitive.Root {...props} className={styles.label} />;

From 10513e31995d1808bc0e694b3092ad2aea18b079 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Wed, 30 Apr 2025 15:38:34 -0700
Subject: [PATCH 5/9] add tests

---
 .../src/radio-group-legacy.test.tsx           | 318 ++++++++++++++++
 .../radio-group/src/radio-group.test.tsx      | 348 ++++++++++++++++++
 2 files changed, 666 insertions(+)
 create mode 100644 packages/react/radio-group/src/radio-group-legacy.test.tsx
 create mode 100644 packages/react/radio-group/src/radio-group.test.tsx

diff --git a/packages/react/radio-group/src/radio-group-legacy.test.tsx b/packages/react/radio-group/src/radio-group-legacy.test.tsx
new file mode 100644
index 000000000..2d8fcf72c
--- /dev/null
+++ b/packages/react/radio-group/src/radio-group-legacy.test.tsx
@@ -0,0 +1,318 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import * as React from 'react';
+import { axe } from 'vitest-axe';
+import type { RenderResult } from '@testing-library/react';
+import { cleanup, render, fireEvent, screen, waitFor, act } from '@testing-library/react';
+import * as RadioGroup from '.';
+import { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';
+
+const RADIO_ROLE = 'radio';
+const INDICATOR_TEST_ID = 'radio-indicator';
+
+global.ResizeObserver = class ResizeObserver {
+  cb: any;
+  constructor(cb: any) {
+    this.cb = cb;
+  }
+  observe() {
+    this.cb([{ borderBoxSize: { inlineSize: 0, blockSize: 0 } }]);
+  }
+  unobserve() {}
+  disconnect() {}
+};
+
+describe('RadioGroup (legacy API)', () => {
+  afterEach(cleanup);
+
+  describe('given a default RadioGroup', () => {
+    let rendered: RenderResult;
+    beforeEach(() => {
+      rendered = render(
+        <>
+          <span id="label">Items</span>
+          <RadioGroup.Root aria-labelledby="label">
+            <label>
+              <RadioGroup.Item value="1">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>One</span>
+            </label>
+            <label>
+              <RadioGroup.Item value="2">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>Two</span>
+            </label>
+            <label>
+              <RadioGroup.Item value="3">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>Three</span>
+            </label>
+          </RadioGroup.Root>
+        </>
+      );
+    });
+
+    it('should have no accessibility violations', async () => {
+      expect(await axe(rendered.container)).toHaveNoViolations();
+    });
+
+    it('should toggle the indicator when clicked', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      await act(async () => fireEvent.click(radioOne));
+
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).toBeVisible();
+
+      await act(async () => fireEvent.click(radioTwo));
+      expect(indicator).not.toBeInTheDocument();
+    });
+  });
+
+  describe('given a disabled RadioGroup', () => {
+    let rendered: RenderResult;
+    beforeEach(() => {
+      rendered = render(
+        <>
+          <span id="label">Items</span>
+          <RadioGroup.Root aria-labelledby="label" disabled>
+            <label>
+              <RadioGroup.Item value="1">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>One</span>
+            </label>
+            <label>
+              <RadioGroup.Item value="2">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>Two</span>
+            </label>
+            <label>
+              <RadioGroup.Item value="3">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>Three</span>
+            </label>
+          </RadioGroup.Root>
+        </>
+      );
+    });
+
+    it('should have no accessibility violations', async () => {
+      expect(await axe(rendered.container)).toHaveNoViolations();
+    });
+
+    it('should not toggle the indicator when clicked', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      await act(async () => fireEvent.click(radioOne));
+
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).not.toBeInTheDocument();
+
+      await act(async () => fireEvent.click(radioTwo));
+      expect(indicator).not.toBeInTheDocument();
+    });
+  });
+
+  describe('given an uncontrolled RadioGroup with a disabled Radio', () => {
+    let rendered: RenderResult;
+    beforeEach(() => {
+      rendered = render(
+        <>
+          <span id="label">Items</span>
+          <RadioGroup.Root aria-labelledby="label">
+            <label>
+              <RadioGroup.Item value="1">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>One</span>
+            </label>
+            <label>
+              <RadioGroup.Item value="2" disabled>
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>Two</span>
+            </label>
+            <label>
+              <RadioGroup.Item value="3">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>Three</span>
+            </label>
+          </RadioGroup.Root>
+        </>
+      );
+    });
+
+    it('should have no accessibility violations', async () => {
+      expect(await axe(rendered.container)).toHaveNoViolations();
+    });
+
+    it('should not toggle the disabled indicator when clicked', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      await act(async () => fireEvent.click(radioOne));
+
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).toBeVisible();
+
+      await act(async () => fireEvent.click(radioTwo));
+      expect(indicator).toBeVisible();
+      const indicatorTwo = radioTwo.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicatorTwo).not.toBeInTheDocument();
+    });
+  });
+
+  describe('given an uncontrolled RadioGroup with `checked` Radio', () => {
+    const onValueChange = vi.fn();
+    let rendered: RenderResult;
+
+    beforeEach(() => {
+      rendered = render(
+        <>
+          <span id="label">Items</span>
+          <RadioGroup.Root aria-labelledby="label" defaultValue="1" onValueChange={onValueChange}>
+            <label>
+              <RadioGroup.Item value="1">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>One</span>
+            </label>
+            <label>
+              <RadioGroup.Item value="2">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>Two</span>
+            </label>
+            <label>
+              <RadioGroup.Item value="3">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>Three</span>
+            </label>
+          </RadioGroup.Root>
+        </>
+      );
+    });
+
+    afterEach(cleanup);
+
+    it('should have no accessibility violations', async () => {
+      expect(await axe(rendered.container)).toHaveNoViolations();
+    });
+
+    it('should render a visible indicator', () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).toBeVisible();
+    });
+
+    it('should toggle the indicator when clicked', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).toBeVisible();
+
+      await act(async () => fireEvent.click(radioTwo));
+      expect(indicator).not.toBeInTheDocument();
+    });
+
+    it('should call `onValueChange` prop', () => {
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      fireEvent.click(radioTwo);
+      waitFor(() => {
+        expect(onValueChange).toHaveBeenCalledWith('2');
+      });
+    });
+  });
+
+  describe('given a controlled RadioGroup', () => {
+    const onValueChange = vi.fn();
+    let rendered: RenderResult;
+
+    function ControlledRadioGroup() {
+      const [value, setValue] = React.useState<null | string>(null);
+      const [blockToggle, setBlockToggle] = React.useState(false);
+      return (
+        <div>
+          <RadioGroup.Root
+            value={value}
+            onValueChange={(value) => {
+              onValueChange(value);
+              if (!blockToggle) {
+                setValue(value);
+              }
+            }}
+          >
+            <label>
+              <RadioGroup.Item value="1">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>One</span>
+            </label>
+            <label>
+              <RadioGroup.Item value="2">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>Two</span>
+            </label>
+            <label>
+              <RadioGroup.Item value="3">
+                <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+              </RadioGroup.Item>
+              <span>Three</span>
+            </label>
+          </RadioGroup.Root>
+          <button type="button" onClick={() => setValue(null)}>
+            Clear selection
+          </button>
+          <button type="button" onClick={() => setBlockToggle((prev) => !prev)}>
+            {blockToggle ? 'Unblock' : 'Block'} radio
+          </button>
+        </div>
+      );
+    }
+
+    beforeEach(() => {
+      rendered = render(<ControlledRadioGroup />);
+    });
+
+    it('should have no accessibility violations', async () => {
+      expect(await axe(rendered.container)).toHaveNoViolations();
+    });
+
+    it('should toggle the indicator when clicked', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      await act(async () => fireEvent.click(radioOne));
+
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).toBeVisible();
+
+      await act(async () => fireEvent.click(radioTwo));
+      expect(indicator).not.toBeInTheDocument();
+    });
+
+    it('should call `onValueChange` prop', async () => {
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      await act(async () => fireEvent.click(radioTwo));
+      waitFor(() => {
+        expect(onValueChange).toHaveBeenCalledWith('2');
+      });
+    });
+
+    it('should not toggle unless state is updated', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const blocker = screen.getByText('Block radio');
+      await act(async () => fireEvent.click(blocker));
+      await act(async () => fireEvent.click(radioOne));
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/react/radio-group/src/radio-group.test.tsx b/packages/react/radio-group/src/radio-group.test.tsx
new file mode 100644
index 000000000..ad91a60b5
--- /dev/null
+++ b/packages/react/radio-group/src/radio-group.test.tsx
@@ -0,0 +1,348 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import * as React from 'react';
+import { axe } from 'vitest-axe';
+import type { RenderResult } from '@testing-library/react';
+import { cleanup, render, fireEvent, screen, waitFor, act } from '@testing-library/react';
+import * as RadioGroup from '.';
+import { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';
+
+const RADIO_ROLE = 'radio';
+const INDICATOR_TEST_ID = 'radio-indicator';
+
+global.ResizeObserver = class ResizeObserver {
+  cb: any;
+  constructor(cb: any) {
+    this.cb = cb;
+  }
+  observe() {
+    this.cb([{ borderBoxSize: { inlineSize: 0, blockSize: 0 } }]);
+  }
+  unobserve() {}
+  disconnect() {}
+};
+
+describe('RadioGroup', () => {
+  afterEach(cleanup);
+
+  describe('given a default RadioGroup', () => {
+    let rendered: RenderResult;
+    beforeEach(() => {
+      rendered = render(
+        <>
+          <span id="label">Items</span>
+          <RadioGroup.Root aria-labelledby="label">
+            <label>
+              <RadioGroup.unstable_ItemRoot value="1">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>One</span>
+            </label>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="2">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>Two</span>
+            </label>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="3">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>Three</span>
+            </label>
+          </RadioGroup.Root>
+        </>
+      );
+    });
+
+    it('should have no accessibility violations', async () => {
+      expect(await axe(rendered.container)).toHaveNoViolations();
+    });
+
+    it('should toggle the indicator when clicked', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      await act(async () => fireEvent.click(radioOne));
+
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).toBeVisible();
+
+      await act(async () => fireEvent.click(radioTwo));
+      expect(indicator).not.toBeInTheDocument();
+    });
+  });
+
+  describe('given a disabled RadioGroup', () => {
+    let rendered: RenderResult;
+    beforeEach(() => {
+      rendered = render(
+        <>
+          <span id="label">Items</span>
+          <RadioGroup.Root aria-labelledby="label" disabled>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="1">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>One</span>
+            </label>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="2">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>Two</span>
+            </label>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="3">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>Three</span>
+            </label>
+          </RadioGroup.Root>
+        </>
+      );
+    });
+
+    it('should have no accessibility violations', async () => {
+      expect(await axe(rendered.container)).toHaveNoViolations();
+    });
+
+    it('should not toggle the indicator when clicked', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      await act(async () => fireEvent.click(radioOne));
+
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).not.toBeInTheDocument();
+
+      await act(async () => fireEvent.click(radioTwo));
+      expect(indicator).not.toBeInTheDocument();
+    });
+  });
+
+  describe('given an uncontrolled RadioGroup with a disabled Radio', () => {
+    let rendered: RenderResult;
+    beforeEach(() => {
+      rendered = render(
+        <>
+          <span id="label">Items</span>
+          <RadioGroup.Root aria-labelledby="label">
+            <label>
+              <RadioGroup.unstable_ItemRoot value="1">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>One</span>
+            </label>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="2" disabled>
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>Two</span>
+            </label>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="3">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>Three</span>
+            </label>
+          </RadioGroup.Root>
+        </>
+      );
+    });
+
+    it('should have no accessibility violations', async () => {
+      expect(await axe(rendered.container)).toHaveNoViolations();
+    });
+
+    it('should not toggle the disabled indicator when clicked', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      await act(async () => fireEvent.click(radioOne));
+
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).toBeVisible();
+
+      await act(async () => fireEvent.click(radioTwo));
+      expect(indicator).toBeVisible();
+      const indicatorTwo = radioTwo.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicatorTwo).not.toBeInTheDocument();
+    });
+  });
+
+  describe('given an uncontrolled RadioGroup with `checked` Radio', () => {
+    const onValueChange = vi.fn();
+    let rendered: RenderResult;
+
+    beforeEach(() => {
+      rendered = render(
+        <>
+          <span id="label">Items</span>
+          <RadioGroup.Root aria-labelledby="label" defaultValue="1" onValueChange={onValueChange}>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="1">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>One</span>
+            </label>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="2">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>Two</span>
+            </label>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="3">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>Three</span>
+            </label>
+          </RadioGroup.Root>
+        </>
+      );
+    });
+
+    afterEach(cleanup);
+
+    it('should have no accessibility violations', async () => {
+      expect(await axe(rendered.container)).toHaveNoViolations();
+    });
+
+    it('should render a visible indicator', () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).toBeVisible();
+    });
+
+    it('should toggle the indicator when clicked', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).toBeVisible();
+
+      await act(async () => fireEvent.click(radioTwo));
+      expect(indicator).not.toBeInTheDocument();
+    });
+
+    it('should call `onValueChange` prop', () => {
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      fireEvent.click(radioTwo);
+      waitFor(() => {
+        expect(onValueChange).toHaveBeenCalledWith('2');
+      });
+    });
+  });
+
+  describe('given a controlled RadioGroup', () => {
+    const onValueChange = vi.fn();
+    let rendered: RenderResult;
+
+    function ControlledRadioGroup() {
+      const [value, setValue] = React.useState<null | string>(null);
+      const [blockToggle, setBlockToggle] = React.useState(false);
+      return (
+        <div>
+          <RadioGroup.Root
+            value={value}
+            onValueChange={(value) => {
+              onValueChange(value);
+              if (!blockToggle) {
+                setValue(value);
+              }
+            }}
+          >
+            <label>
+              <RadioGroup.unstable_ItemRoot value="1">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>One</span>
+            </label>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="2">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>Two</span>
+            </label>
+            <label>
+              <RadioGroup.unstable_ItemRoot value="3">
+                <RadioGroup.unstable_ItemTrigger>
+                  <RadioGroup.Indicator data-testid={INDICATOR_TEST_ID} />
+                </RadioGroup.unstable_ItemTrigger>
+              </RadioGroup.unstable_ItemRoot>
+              <span>Three</span>
+            </label>
+          </RadioGroup.Root>
+          <button type="button" onClick={() => setValue(null)}>
+            Clear selection
+          </button>
+          <button type="button" onClick={() => setBlockToggle((prev) => !prev)}>
+            {blockToggle ? 'Unblock' : 'Block'} radio
+          </button>
+        </div>
+      );
+    }
+
+    beforeEach(() => {
+      rendered = render(<ControlledRadioGroup />);
+    });
+
+    it('should have no accessibility violations', async () => {
+      expect(await axe(rendered.container)).toHaveNoViolations();
+    });
+
+    it('should toggle the indicator when clicked', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      await act(async () => fireEvent.click(radioOne));
+
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).toBeVisible();
+
+      await act(async () => fireEvent.click(radioTwo));
+      expect(indicator).not.toBeInTheDocument();
+    });
+
+    it('should call `onValueChange` prop', async () => {
+      const radioTwo = screen.getByRole(RADIO_ROLE, { name: 'Two' });
+      await act(async () => fireEvent.click(radioTwo));
+      waitFor(() => {
+        expect(onValueChange).toHaveBeenCalledWith('2');
+      });
+    });
+
+    it('should not toggle unless state is updated', async () => {
+      const radioOne = screen.getByRole(RADIO_ROLE, { name: 'One' });
+      const blocker = screen.getByText('Block radio');
+      await act(async () => fireEvent.click(blocker));
+      await act(async () => fireEvent.click(radioOne));
+      const indicator = radioOne.querySelector(`[data-testid="${INDICATOR_TEST_ID}"]`);
+      expect(indicator).not.toBeInTheDocument();
+    });
+  });
+});

From b7eaf70a134dee6490039b1f023bdc843864298c Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Wed, 30 Apr 2025 15:48:57 -0700
Subject: [PATCH 6/9] remove ItemBubbleInput export

---
 .../storybook/stories/radio-group.stories.tsx | 104 +-----------------
 packages/react/radio-group/src/index.ts       |   3 -
 2 files changed, 1 insertion(+), 106 deletions(-)

diff --git a/apps/storybook/stories/radio-group.stories.tsx b/apps/storybook/stories/radio-group.stories.tsx
index 8a4372acb..fef7850df 100644
--- a/apps/storybook/stories/radio-group.stories.tsx
+++ b/apps/storybook/stories/radio-group.stories.tsx
@@ -98,109 +98,7 @@ export const Unset = () => (
 );
 
 export const WithinForm = () => {
-  const [data, setData] = React.useState({ optional: '', required: '', stopprop: '' });
-
-  return (
-    <form
-      onSubmit={(event) => event.preventDefault()}
-      onChange={(event) => {
-        const radio = event.target as HTMLInputElement;
-        setData((prevData) => ({ ...prevData, [radio.name]: radio.value }));
-      }}
-    >
-      <fieldset>
-        <legend>optional value: {data.optional}</legend>
-        <RadioGroup.Root className={styles.root} name="optional">
-          <RadioGroup.unstable_ItemRoot value="1">
-            <RadioGroup.unstable_ItemTrigger className={styles.item}>
-              <RadioGroup.Indicator className={styles.indicator} />
-            </RadioGroup.unstable_ItemTrigger>
-            <RadioGroup.unstable_ItemBubbleInput />
-          </RadioGroup.unstable_ItemRoot>
-          <RadioGroup.unstable_ItemRoot value="2">
-            <RadioGroup.unstable_ItemTrigger className={styles.item}>
-              <RadioGroup.Indicator className={styles.indicator} />
-            </RadioGroup.unstable_ItemTrigger>
-            <RadioGroup.unstable_ItemBubbleInput />
-          </RadioGroup.unstable_ItemRoot>
-          <RadioGroup.unstable_ItemRoot value="3">
-            <RadioGroup.unstable_ItemTrigger className={styles.item}>
-              <RadioGroup.Indicator className={styles.indicator} />
-            </RadioGroup.unstable_ItemTrigger>
-            <RadioGroup.unstable_ItemBubbleInput />
-          </RadioGroup.unstable_ItemRoot>
-        </RadioGroup.Root>
-      </fieldset>
-
-      <br />
-      <br />
-
-      <fieldset>
-        <legend>required value: {data.required}</legend>
-        <RadioGroup.Root className={styles.root} name="required" required>
-          <RadioGroup.unstable_ItemRoot value="1">
-            <RadioGroup.unstable_ItemTrigger className={styles.item}>
-              <RadioGroup.Indicator className={styles.indicator} />
-            </RadioGroup.unstable_ItemTrigger>
-            <RadioGroup.unstable_ItemBubbleInput />
-          </RadioGroup.unstable_ItemRoot>
-          <RadioGroup.unstable_ItemRoot value="2">
-            <RadioGroup.unstable_ItemTrigger className={styles.item}>
-              <RadioGroup.Indicator className={styles.indicator} />
-            </RadioGroup.unstable_ItemTrigger>
-            <RadioGroup.unstable_ItemBubbleInput />
-          </RadioGroup.unstable_ItemRoot>
-          <RadioGroup.unstable_ItemRoot value="3">
-            <RadioGroup.unstable_ItemTrigger className={styles.item}>
-              <RadioGroup.Indicator className={styles.indicator} />
-            </RadioGroup.unstable_ItemTrigger>
-            <RadioGroup.unstable_ItemBubbleInput />
-          </RadioGroup.unstable_ItemRoot>
-        </RadioGroup.Root>
-      </fieldset>
-
-      <br />
-      <br />
-
-      <fieldset>
-        <legend>stop propagation value: {data.stopprop}</legend>
-        <RadioGroup.Root className={styles.root} name="stopprop">
-          <RadioGroup.unstable_ItemRoot value="1">
-            <RadioGroup.unstable_ItemTrigger
-              onClick={(event) => event.stopPropagation()}
-              className={styles.item}
-            >
-              <RadioGroup.Indicator className={styles.indicator} />
-            </RadioGroup.unstable_ItemTrigger>
-            <RadioGroup.unstable_ItemBubbleInput />
-          </RadioGroup.unstable_ItemRoot>
-          <RadioGroup.unstable_ItemRoot value="2">
-            <RadioGroup.unstable_ItemTrigger
-              onClick={(event) => event.stopPropagation()}
-              className={styles.item}
-            >
-              <RadioGroup.Indicator className={styles.indicator} />
-            </RadioGroup.unstable_ItemTrigger>
-            <RadioGroup.unstable_ItemBubbleInput />
-          </RadioGroup.unstable_ItemRoot>
-          <RadioGroup.unstable_ItemRoot value="3">
-            <RadioGroup.unstable_ItemTrigger
-              onClick={(event) => event.stopPropagation()}
-              className={styles.item}
-            >
-              <RadioGroup.Indicator className={styles.indicator} />
-            </RadioGroup.unstable_ItemTrigger>
-            <RadioGroup.unstable_ItemBubbleInput />
-          </RadioGroup.unstable_ItemRoot>
-        </RadioGroup.Root>
-      </fieldset>
-
-      <br />
-      <br />
-
-      <button>Submit</button>
-    </form>
-  );
+  return <p>TODO</p>;
 };
 
 export const Animated = () => {
diff --git a/packages/react/radio-group/src/index.ts b/packages/react/radio-group/src/index.ts
index 843c32c43..28d46c006 100644
--- a/packages/react/radio-group/src/index.ts
+++ b/packages/react/radio-group/src/index.ts
@@ -6,14 +6,12 @@ export {
   RadioGroupItem,
   RadioGroupItemRoot as unstable_RadioGroupItemRoot,
   RadioGroupItemTrigger as unstable_RadioGroupItemTrigger,
-  RadioGroupItemBubbleInput as unstable_RadioGroupItemBubbleInput,
   RadioGroupIndicator,
   //
   Root,
   Item,
   ItemRoot as unstable_ItemRoot,
   ItemTrigger as unstable_ItemTrigger,
-  ItemBubbleInput as unstable_ItemBubbleInput,
   Indicator,
 } from './radio-group';
 export type {
@@ -21,6 +19,5 @@ export type {
   RadioGroupItemProps,
   RadioGroupItemRootProps as unstable_RadioGroupItemRootProps,
   RadioGroupItemTriggerProps as unstable_RadioGroupItemTriggerProps,
-  RadioGroupItemBubbleInputProps as unstable_RadioGroupItemBubbleInputProps,
   RadioGroupIndicatorProps,
 } from './radio-group';

From d06ce6652b094a16f8dad9a93cd429efaec83528 Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Wed, 30 Apr 2025 15:53:11 -0700
Subject: [PATCH 7/9] add changeset

---
 .changeset/full-memes-enter.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/full-memes-enter.md

diff --git a/.changeset/full-memes-enter.md b/.changeset/full-memes-enter.md
new file mode 100644
index 000000000..d7953015d
--- /dev/null
+++ b/.changeset/full-memes-enter.md
@@ -0,0 +1,5 @@
+---
+'@radix-ui/react-radio-group': minor
+---
+
+Add unstable `ItemRoot` `ItemTrigger` and parts to RadioGroup (#3519)

From 95b1c3610787712e04b2747d210264411b7406cb Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Wed, 30 Apr 2025 15:59:00 -0700
Subject: [PATCH 8/9] add missing transform

---
 packages/react/radio-group/src/radio.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react/radio-group/src/radio.tsx b/packages/react/radio-group/src/radio.tsx
index 4dd8f1dcd..3c785dbac 100644
--- a/packages/react/radio-group/src/radio.tsx
+++ b/packages/react/radio-group/src/radio.tsx
@@ -252,6 +252,10 @@ const RadioBubbleInput = React.forwardRef<HTMLInputElement, RadioBubbleInputProp
         style={{
           ...props.style,
           ...controlSize,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: 'translateX(-100%)',
           position: 'absolute',
           pointerEvents: 'none',
           opacity: 0,

From 69c0e297525be247615ab6ce9e2882399eaa7cde Mon Sep 17 00:00:00 2001
From: Chance Strickland <hi@chance.dev>
Date: Wed, 30 Apr 2025 16:01:05 -0700
Subject: [PATCH 9/9] tweak style prop

---
 packages/react/radio-group/src/radio-group.tsx | 12 +++++++++++-
 packages/react/radio-group/src/radio.tsx       |  4 ----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/react/radio-group/src/radio-group.tsx b/packages/react/radio-group/src/radio-group.tsx
index bc91ceef2..55e50a801 100644
--- a/packages/react/radio-group/src/radio-group.tsx
+++ b/packages/react/radio-group/src/radio-group.tsx
@@ -304,7 +304,17 @@ const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemPro
         internal_do_not_use_render={({ isFormControl }: RadioContextValue) => (
           <>
             <RadioGroupItemTrigger {...triggerProps} {...radioScope} ref={forwardedRef} />
-            {isFormControl && <RadioBubbleInput {...radioScope} />}
+            {isFormControl && (
+              <RadioBubbleInput
+                {...radioScope}
+                style={{
+                  // We transform because the input is absolutely positioned but we have
+                  // rendered it **after** the button. This pulls it back to sit on top
+                  // of the button.
+                  transform: 'translateX(-100%)',
+                }}
+              />
+            )}
           </>
         )}
       />
diff --git a/packages/react/radio-group/src/radio.tsx b/packages/react/radio-group/src/radio.tsx
index 3c785dbac..4dd8f1dcd 100644
--- a/packages/react/radio-group/src/radio.tsx
+++ b/packages/react/radio-group/src/radio.tsx
@@ -252,10 +252,6 @@ const RadioBubbleInput = React.forwardRef<HTMLInputElement, RadioBubbleInputProp
         style={{
           ...props.style,
           ...controlSize,
-          // We transform because the input is absolutely positioned but we have
-          // rendered it **after** the button. This pulls it back to sit on top
-          // of the button.
-          transform: 'translateX(-100%)',
           position: 'absolute',
           pointerEvents: 'none',
           opacity: 0,