fix(striker-ui): expose id, name in radio group

striker-ui/components/RadioGroupWithLabel.tsx

@@ -18,10 +18,12 @@ const RadioGroupWithLabel: FC<RadioGroupWithLabelProps> = ({
   formLabelProps,
   id,
   label,
+  name,
   onChange: onRadioGroupChange,
   radioItems,
   radioProps: { sx: radioSx, ...restRadioProps } = {},
   radioGroupProps,
+  value,
 }) => {
   const labelElement = useMemo(
     () => (typeof label === 'string' ? <BodyText>{label}</BodyText> : label),
@@ -30,7 +32,7 @@ const RadioGroupWithLabel: FC<RadioGroupWithLabelProps> = ({
   const itemElements = useMemo(() => {
     const items = Object.entries(radioItems);
 
-    return items.map(([itemId, { label: itemLabel, value }]) => {
+    return items.map(([itemId, { label: itemLabel, value: itemValue }]) => {
       const itemLabelElement =
         typeof itemLabel === 'string' ? (
           <BodyText>{itemLabel}</BodyText>
@@ -53,7 +55,7 @@ const RadioGroupWithLabel: FC<RadioGroupWithLabelProps> = ({
             />
           }
           key={`${id}-${itemId}`}
-          value={value}
+          value={itemValue}
           label={itemLabelElement}
           {...formControlLabelProps}
         />
@@ -64,7 +66,14 @@ const RadioGroupWithLabel: FC<RadioGroupWithLabelProps> = ({
   return (
     <MUIFormControl {...formControlProps}>
       <MUIFormLabel {...formLabelProps}>{labelElement}</MUIFormLabel>
-      <MUIRadioGroup onChange={onRadioGroupChange} row {...radioGroupProps}>
+      <MUIRadioGroup
+        id={id}
+        name={name}
+        onChange={onRadioGroupChange}
+        row
+        value={value}
+        {...radioGroupProps}
+      >
         {itemElements}
       </MUIRadioGroup>
     </MUIFormControl>

striker-ui/types/RadioGroupWithLabel.d.ts

@@ -3,18 +3,23 @@ type RadioItem<RadioItemValue> = {
   value: RadioItemValue;
 };
 
+type RadioItemList<Value = string> = Record<string, RadioItem<Value>>;
+
 type RadioGroupWithLabelOptionalProps = {
   formControlProps?: import('@mui/material').FormControlProps;
   formControlLabelProps?: import('@mui/material').FormControlLabelProps;
   formLabelProps?: import('@mui/material').FormLabelProps;
   label?: import('react').ReactNode;
-  onChange?: import('@mui/material').RadioGroupProps['onChange'];
   radioProps?: import('@mui/material').RadioProps;
   radioGroupProps?: import('@mui/material').RadioGroupProps;
 };
 
 type RadioGroupWithLabelProps<RadioItemValue = string> =
-  RadioGroupWithLabelOptionalProps & {
+  RadioGroupWithLabelOptionalProps &
+    Pick<
+      import('@mui/material').RadioGroupProps,
+      'name' | 'onChange' | 'value'
+    > & {
       id: string;
-    radioItems: { [id: string]: RadioItem<RadioItemValue> };
+      radioItems: RadioItemList<RadioItemValue>;
     };