feat: add radio group (#2572)

packages/component/src/ui/button/dropdown.tsx

@@ -29,4 +29,4 @@ export const DropdownButton = forwardRef<
     </button>
   );
 });
-DropdownButton.displayName = 'SimpleDropdownButton';
+DropdownButton.displayName = 'DropdownButton';

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

@@ -0,0 +1,35 @@
+import type {
+  RadioGroupItemProps,
+  RadioGroupProps,
+} from '@radix-ui/react-radio-group';
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import { forwardRef } from 'react';
+
+import * as styles from './styles.css';
+
+export const RadioButton = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <RadioGroup.Item ref={ref} {...props}>
+        <span className={styles.radioUncheckedButton}>{children}</span>
+        <RadioGroup.Indicator className={styles.radioButton}>
+          {children}
+        </RadioGroup.Indicator>
+      </RadioGroup.Item>
+    );
+  }
+);
+RadioButton.displayName = 'RadioButton';
+
+export const RadioButtonGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ ...props }, ref) => {
+    return (
+      <RadioGroup.Root
+        ref={ref}
+        className={styles.radioButtonGroup}
+        {...props}
+      ></RadioGroup.Root>
+    );
+  }
+);
+RadioButtonGroup.displayName = 'RadioButtonGroup';

packages/component/src/ui/button/styles.css.ts

@@ -52,3 +52,43 @@ export const icon = style({
     },
   },
 });
+
+export const radioButton = style({
+  fontSize: 'var(--affine-font-xs)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '75px',
+  height: '24px',
+  borderRadius: '8px',
+  filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1))',
+  whiteSpace: 'nowrap',
+  userSelect: 'none',
+  selectors: {
+    '&:hover': {
+      background: 'var(--affine-hover-color)',
+    },
+    '&[data-state="checked"]': {
+      background: 'var(--affine-white)',
+    },
+  },
+});
+
+export const radioUncheckedButton = style([
+  radioButton,
+  {
+    selectors: {
+      '[data-state="checked"] > &': {
+        display: 'none',
+      },
+    },
+  },
+]);
+
+export const radioButtonGroup = style({
+  display: 'inline-flex',
+  alignItems: 'flex-start',
+  background: 'var(--affine-hover-color)',
+  borderRadius: '10px',
+  padding: '2px',
+});