chore(radio-group): implement Radio component

Author: halvaradop

packages/ui-radio-group/package.json

@@ -40,6 +40,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./radio": {
+      "types": "./dist/radio.d.ts",
+      "import": "./dist/radio.js",
+      "require": "./dist/radio.cjs"
     }
   },
   "dependencies": {
@@ -52,7 +57,7 @@
     "@halvaradop/ui-utils": "workspace:*"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

packages/ui-radio-group/src/context.tsx

@@ -3,7 +3,7 @@ import { createContext, useContext, ChangeEventHandler } from "react"
 export interface RadioGroupContextType {
     name?: string
     selectedValue?: string
-    onChange?: ChangeEventHandler<HTMLInputElement>
+    onChange: ChangeEventHandler<HTMLInputElement>
 }
 
 export const RadioGroupContext = createContext<RadioGroupContextType>({

packages/ui-radio-group/src/index.tsx

@@ -1,12 +1,13 @@
 "use client"
-import { ChangeEvent, useState } from "react"
+import { ChangeEvent, ChangeEventHandler, useState } from "react"
 import { merge, type ComponentProps, type WithChildrenProps, type ArgsFunction } from "@halvaradop/ui-core"
 import { cva, type VariantProps } from "class-variance-authority"
 import { RadioGroupContext } from "./context.js"
 
 export type RadioGroupProps<T extends ArgsFunction> = VariantProps<T> &
-    WithChildrenProps<ComponentProps<"fieldset", "defaultValue">> & {
+    WithChildrenProps<ComponentProps<"fieldset", "defaultValue" | "onChange">> & {
         defaultValue?: string
+        onChange?: ChangeEventHandler<HTMLInputElement>
     }
 
 export const radioGroupVariants = cva("flex", {
@@ -28,11 +29,13 @@ export const RadioGroup = ({
     defaultValue,
     children,
     ref,
+    onChange,
     ...props
 }: RadioGroupProps<typeof radioGroupVariants>) => {
     const [selectedValue, setSelectedValue] = useState(defaultValue)
 
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        onChange?.(event)
         setSelectedValue(event.target.value)
     }
 

packages/ui-radio-group/src/radio-group.stories.tsx

@@ -45,11 +45,11 @@ export const Base: Story = {
     render: ({ variant }) => (
         <RadioGroup name="food" variant={variant}>
             <Label className="flex items-center gap-x-2">
-                <Radio value="pizza" name="food" />
+                <Radio value="pizza" />
                 Pizza
             </Label>
             <Label className="flex items-center gap-x-2">
-                <Radio value="hamburger" name="food" />
+                <Radio value="hamburger" />
                 Hamburger
             </Label>
         </RadioGroup>

packages/ui-radio-group/src/radio.tsx

@@ -1,2 +1,19 @@
-export * from "@halvaradop/ui-radio"
-export type * from "@halvaradop/ui-radio"
+import { Radio as DefaultRadio, radioVariants, type RadioProps } from "@halvaradop/ui-radio"
+import { useRadioGroup } from "./context.js"
+
+const Radio = ({ name, value, ref, ...props }: Omit<RadioProps<typeof radioVariants>, "onChange">) => {
+    const { name: defaultName, selectedValue, onChange } = useRadioGroup()
+
+    return (
+        <DefaultRadio
+            ref={ref}
+            name={name ?? defaultName}
+            value={value}
+            checked={selectedValue === value}
+            onChange={onChange}
+            {...props}
+        />
+    )
+}
+
+export { Radio, radioVariants }