fix(react): allow nullable controlled RadioGroup values

packages/@headlessui-react/src/components/radio-group/radio-group.tsx

@@ -152,12 +152,12 @@ export type RadioGroupProps<
   TType = string,
 > = Props<
   TTag,
-  RadioGroupRenderPropArg<TType>,
+  RadioGroupRenderPropArg<TType | null>,
   RadioGroupPropsWeControl,
   {
-    value?: TType
+    value?: TType | null
     defaultValue?: TType
-    onChange?: (value: TType) => void
+    onChange?: (value: NoInfer<TType>) => void
     by?: ByComparator<TType>
     disabled?: boolean
     form?: string
@@ -192,7 +192,11 @@ function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG,
   let radioGroupRef = useSyncRefs(internalRadioGroupRef, ref)
 
   let defaultValue = useDefaultValue(_defaultValue)
-  let [value, onChange] = useControllable(controlledValue, controlledOnChange, defaultValue)
+  let [value, onChange] = useControllable<TType | null, TType>(
+    controlledValue,
+    controlledOnChange,
+    defaultValue
+  )
 
   let firstOption = useMemo(
     () =>

packages/@headlessui-react/src/hooks/use-controllable.ts

@@ -2,9 +2,9 @@ import { useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { useEvent } from './use-event'
 
-export function useControllable<T>(
+export function useControllable<T, TValue extends T = T>(
   controlledValue: T | undefined,
-  onChange?: (value: T) => void,
+  onChange?: (value: TValue) => void,
   defaultValue?: T
 ) {
   let [internalValue, setInternalValue] = useState(defaultValue)
@@ -30,7 +30,7 @@ export function useControllable<T>(
 
   return [
     (isControlled ? controlledValue : internalValue)!,
-    useEvent((value) => {
+    useEvent((value: TValue) => {
       if (isControlled) {
         return onChange?.(value)
       } else {

packages/@headlessui-react/types/radio-group.test.tsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react'
+import { Radio, RadioGroup } from '../src'
+
+function ControlledNullableRadioGroup() {
+  let [selected, setSelected] = useState<string | undefined>(undefined)
+
+  return (
+    <RadioGroup value={selected ?? null} onChange={setSelected}>
+      <Radio value="startup">Startup</Radio>
+      <Radio value="business">Business</Radio>
+    </RadioGroup>
+  )
+}
+
+void ControlledNullableRadioGroup