fix: code-rabbit feedbacks

Author: ntatoud

app/components/form/field-radio-group/field-radio-group.spec.tsx

@@ -57,7 +57,7 @@ test('should have no a11y violations', async () => {
   expect(results).toHaveNoViolations();
 });
 
-test('should select radio on click', async () => {
+test('should select radio on button click', async () => {
   const user = setupUser();
   const mockedSubmit = vi.fn();
 
@@ -91,6 +91,43 @@ test('should select radio on click', async () => {
   expect(mockedSubmit).toHaveBeenCalledWith({ bear: 'pawdrin' });
 });
 
+test('should select radio on label click', async () => {
+  const user = setupUser();
+  const mockedSubmit = vi.fn();
+
+  render(
+    <FormMocked
+      schema={z.object({ bear: z.string() })}
+      useFormOptions={{ defaultValues: { bear: '' } }}
+      onSubmit={mockedSubmit}
+    >
+      {({ form }) => (
+        <FormField>
+          <FormFieldLabel>Bearstronaut</FormFieldLabel>
+          <FormFieldController
+            type="radio-group"
+            control={form.control}
+            name="bear"
+            options={options}
+          />
+        </FormField>
+      )}
+    </FormMocked>
+  );
+
+  const radio = screen.getByRole('radio', { name: 'Buzz Pawdrin' });
+  const label = screen.getByText('Buzz Pawdrin');
+
+  expect(radio).not.toBeChecked();
+
+  // Test clicking the label specifically
+  await user.click(label);
+  expect(radio).toBeChecked();
+
+  await user.click(screen.getByRole('button', { name: 'Submit' }));
+  expect(mockedSubmit).toHaveBeenCalledWith({ bear: 'pawdrin' });
+});
+
 test('should handle keyboard navigation', async () => {
   const user = setupUser();
   const mockedSubmit = vi.fn();

app/components/form/field-radio-group/index.tsx

@@ -77,11 +77,15 @@ export const FieldRadioGroup = <
             >
               {options.map(({ label, ...option }) => {
                 if (renderOption) {
-                  return renderOption({
-                    key: `${ctx.id}-${option.value}`,
-                    label,
-                    ...option,
-                  });
+                  return (
+                    <React.Fragment key={`${ctx.id}-${option.value}`}>
+                      {renderOption({
+                        label,
+                        onBlur,
+                        ...option,
+                      })}
+                    </React.Fragment>
+                  );
                 }
 
                 return (

app/components/ui/radio-group.tsx

@@ -27,19 +27,19 @@ export function Radio({ children, className, noLabel, ...rest }: RadioProps) {
   const compProps = noLabel
     ? {}
     : {
-        className: 'flex items-center gap-2',
+        className: 'flex items-center gap-2 text-sm',
       };
   return (
     <Comp {...compProps}>
       <RadioPrimitive.Root
         className={cn(
-          'peer size-5 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'peer size-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         {...rest}
       >
         <RadioPrimitive.Indicator className="flex items-center justify-center">
-          <Circle className="size-3 fill-current text-current" />
+          <Circle className="size-2.5 fill-current text-current" />
         </RadioPrimitive.Indicator>
       </RadioPrimitive.Root>
       {children}