refactor: pass down value and name directly

packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx

@@ -24,4 +24,5 @@ Root.args = {
   disabled: false,
   checked: undefined,
   onChange: undefined,
+  value: '1',
 }

packages/lsd-react/src/components/RadioButton/RadioButton.tsx

@@ -17,7 +17,7 @@ export type RadioButtonProps = Omit<
     disabled?: boolean
     size?: 'small' | 'medium' | 'large'
     name?: string
-    value?: string
+    value: string
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>
   }
 
@@ -29,15 +29,18 @@ export const RadioButton: React.FC<RadioButtonProps> & {
   checked: _checked,
   defaultChecked,
   disabled = false,
+  value,
   inputProps = {},
   children,
   ...props
 }) => {
   const ref = useRef<HTMLInputElement>(null)
+
   const radioButtonGroup = useRadioButtonGroupContext()
   const size = radioButtonGroup?.size ?? _size
+  const name = radioButtonGroup?.name ?? ''
   const selected = radioButtonGroup
-    ? radioButtonGroup.value === inputProps?.value
+    ? radioButtonGroup.value === value
     : _checked
 
   const input = useInput({
@@ -49,7 +52,7 @@ export const RadioButton: React.FC<RadioButtonProps> & {
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     radioButtonGroup
-      ? radioButtonGroup.setActiveValue(event.target.value)
+      ? radioButtonGroup.setActiveRadioButton(event.target.value)
       : input.onChange(event)
   }
 
@@ -69,6 +72,8 @@ export const RadioButton: React.FC<RadioButtonProps> & {
     >
       <input
         ref={ref}
+        name={name}
+        value={value}
         type="radio"
         checked={input.value}
         onChange={handleChange}

packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts

@@ -6,7 +6,8 @@ import {
 
 export type RadioButtonGroupContextType = {
   value?: ActiveRadioButtonType | null
-  setActiveValue: (value: ActiveRadioButtonType) => void
+  name?: string | null
+  setActiveRadioButton: (value: ActiveRadioButtonType) => void
 
   size?: RadioButtonGroupProps['size']
 }

packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx

@@ -17,31 +17,15 @@ export default {
 } as Meta
 
 export const Root: Story<RadioButtonGroupProps> = (args) => (
-  <RadioButtonGroup {...args}>
-    <RadioButton checked inputProps={{ name: 'name', value: '1' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '2' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '3' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '4' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '5' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '6' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '7' }}>
-      RadioButton label
-    </RadioButton>
-    <RadioButton inputProps={{ name: 'name', value: '8' }}>
-      RadioButton label
-    </RadioButton>
+  <RadioButtonGroup name="name" {...args}>
+    <RadioButton value="1">RadioButton label</RadioButton>
+    <RadioButton value="2">RadioButton label</RadioButton>
+    <RadioButton value="3">RadioButton label</RadioButton>
+    <RadioButton value="4">RadioButton label</RadioButton>
+    <RadioButton value="5">RadioButton label</RadioButton>
+    <RadioButton value="6">RadioButton label</RadioButton>
+    <RadioButton value="7">RadioButton label</RadioButton>
+    <RadioButton value="8">RadioButton label</RadioButton>
   </RadioButtonGroup>
 )
 

packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -7,8 +7,8 @@ import { Typography } from '../Typography'
 export type ActiveRadioButtonType = string | readonly string[]
 
 export type RadioButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
-  value?: ActiveRadioButtonType | null
-  name?: ActiveRadioButtonType | null
+  value: ActiveRadioButtonType | null
+  name?: string | null
   onChange?: (value: ActiveRadioButtonType) => void
   size?: 'small' | 'medium' | 'large'
   label?: string
@@ -29,7 +29,7 @@ export const RadioButtonGroup: React.FC<RadioButtonGroupProps> & {
 
   return (
     <RadioButtonGroupContext.Provider
-      value={{ value: activeValue, setActiveValue, size }}
+      value={{ value: activeValue, setActiveRadioButton, name, size }}
     >
       <div
         ref={ref}