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/resize-panel/resize-panel.tsx

@@ -37,6 +37,7 @@ export const ResizePanel = ({
 }: ResizePanelProps) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const cornerHandleRef = useRef<HTMLDivElement | null>(null);
+  const displayRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (!containerRef.current || !cornerHandleRef.current) return;
@@ -48,6 +49,7 @@ export const ResizePanel = ({
     let startSize: [number, number] = [0, 0];
 
     const onDragStart = (e: MouseEvent) => {
+      containerEl.dataset.resizing = 'true';
       startPos = [e.clientX, e.clientY];
       startSize = [containerEl.offsetWidth, containerEl.offsetHeight];
       document.addEventListener('mousemove', onDrag);
@@ -62,6 +64,7 @@ export const ResizePanel = ({
     };
 
     const onDragEnd = () => {
+      containerEl.dataset.resizing = 'false';
       document.removeEventListener('mousemove', onDrag);
       document.removeEventListener('mouseup', onDragEnd);
     };
@@ -84,6 +87,10 @@ export const ResizePanel = ({
         );
         containerEl.style.height = `${height}px`;
       }
+
+      if (displayRef.current) {
+        displayRef.current.textContent = `${containerEl.offsetWidth}px * ${containerEl.offsetHeight}px`;
+      }
     };
 
     updateSize([width ?? 400, height ?? 200]);
@@ -112,7 +119,9 @@ export const ResizePanel = ({
       {...attrs}
     >
       {children}
-      <div ref={cornerHandleRef} className={styles.cornerHandle}></div>
+      <div ref={cornerHandleRef} className={styles.cornerHandle}>
+        <div ref={displayRef} className={styles.display}></div>
+      </div>
     </div>
   );
 };

packages/frontend/component/src/ui/resize-panel/styles.css.ts

@@ -1,3 +1,4 @@
+import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 const HANDLE_SIZE = 24;
 export const container = style({
@@ -19,3 +20,29 @@ export const cornerHandle = style({
   transform: 'rotate(45deg)',
   cursor: 'nwse-resize',
 });
+export const display = style({
+  position: 'absolute',
+  left: 32,
+  top: 12,
+  transform: 'rotate(-45deg)',
+  transformOrigin: '0 0',
+  whiteSpace: 'nowrap',
+  borderRadius: 6,
+  background: cssVar('black'),
+  color: cssVar('white'),
+  borderTopLeftRadius: 0,
+
+  maxWidth: 0,
+  maxHeight: 0,
+  padding: 0,
+  transition: 'all 0.23s ease',
+  overflow: 'hidden',
+
+  selectors: {
+    '[data-resizing="true"] &': {
+      padding: '4px 8px',
+      maxWidth: 200,
+      maxHeight: 40,
+    },
+  },
+});