feat: add radio group (#2572)

packages/component/src/stories/button.stories.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { Button } from '../ui/button/button';
 import { DropdownButton } from '../ui/button/dropdown';
 import type { ButtonProps } from '../ui/button/interface';
+import { RadioButton, RadioButtonGroup } from '../ui/button/radio';
 import { Menu } from '../ui/menu/menu';
 import { toast } from '../ui/toast/toast';
 
@@ -91,6 +92,20 @@ Dropdown.args = {
   onClickDropDown: () => toast('Click dropdown'),
 };
 
+export const RadioGroup: StoryFn = ({ ...props }) => {
+  return (
+    <RadioButtonGroup {...props}>
+      <RadioButton value="all">All</RadioButton>
+      <RadioButton value="page">Page</RadioButton>
+      <RadioButton value="edgeless">Edgeless</RadioButton>
+    </RadioButtonGroup>
+  );
+};
+RadioGroup.args = {
+  defaultValue: 'all',
+  onValueChange: (value: string) => toast(`Radio value: ${value}`),
+};
+
 export const Test: StoryFn<ButtonProps> = () => {
   const [input, setInput] = useState('');
   return (

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',
+});