refactor(component): new Radio component (#6910)

# New `RadioGroup` component to replace `RadioButton`

![CleanShot 2024-06-25 at 17.18.02.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/77241b07-a2dd-4d27-a322-3056f483f75a.gif)

### what's new
- [x] Change the API
- [x] More customizable options
- [x] Indicator animation
- [x] Dynamic width support(responsive)
- [x] Storybook
- [x] JSDoc

packages/frontend/component/src/ui/button/radio.tsx

@@ -2,19 +2,27 @@ import type {
   RadioGroupItemProps,
   RadioGroupProps,
 } from '@radix-ui/react-radio-group';
-import * as RadioGroup from '@radix-ui/react-radio-group';
+import * as RadixRadioGroup from '@radix-ui/react-radio-group';
 import clsx from 'clsx';
 import type { CSSProperties } from 'react';
 import { forwardRef } from 'react';
 
+import { RadioGroup } from '../radio';
 import * as styles from './styles.css';
 
+// for reference
+RadioGroup;
+
+/**
+ * @deprecated
+ * use {@link RadioGroup } instead
+ */
 export const RadioButton = forwardRef<
   HTMLButtonElement,
   RadioGroupItemProps & { spanStyle?: string }
 >(({ children, className, spanStyle, ...props }, ref) => {
   return (
-    <RadioGroup.Item
+    <RadixRadioGroup.Item
       ref={ref}
       {...props}
       className={clsx(styles.radioButton, className)}
@@ -22,27 +30,31 @@ export const RadioButton = forwardRef<
       <span className={clsx(styles.radioUncheckedButton, spanStyle)}>
         {children}
       </span>
-      <RadioGroup.Indicator
+      <RadixRadioGroup.Indicator
         className={clsx(styles.radioButtonContent, spanStyle)}
       >
         {children}
-      </RadioGroup.Indicator>
-    </RadioGroup.Item>
+      </RadixRadioGroup.Indicator>
+    </RadixRadioGroup.Item>
   );
 });
 RadioButton.displayName = 'RadioButton';
 
+/**
+ * @deprecated
+ * use {@link RadioGroup} instead
+ */
 export const RadioButtonGroup = forwardRef<
   HTMLDivElement,
   RadioGroupProps & { width?: CSSProperties['width'] }
 >(({ className, style, width, ...props }, ref) => {
   return (
-    <RadioGroup.Root
+    <RadixRadioGroup.Root
       ref={ref}
       className={clsx(styles.radioButtonGroup, className)}
       style={{ width, ...style }}
       {...props}
-    ></RadioGroup.Root>
+    ></RadixRadioGroup.Root>
   );
 });
 RadioButtonGroup.displayName = 'RadioButtonGroup';