fix: Radio in pureCard mode (#95)

Author: dragooncjw

common/changes/@coze-arch/coze-design/fix-radio-style_2025-08-19-03-54.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@coze-arch/coze-design",
+      "comment": "Radio in pureCard mode",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@coze-arch/coze-design",
+  "email": "[email protected]"
+}

config/tailwind-config/src/coze.js

@@ -164,8 +164,8 @@ const semanticMiddleground = {
   'coz-mg': 'colors.background.4',
   'coz-mg-mask': 'colors.mask.5',
   'coz-mg-table-fixed-hovered': 'colors.background.0',
-  'coz-mg-card-pressed': 'colors.background.3',
-  'coz-mg-card-hovered': 'colors.background.3',
+  'coz-mg-card-pressed': 'colors.background.1',
+  'coz-mg-card-hovered': 'colors.background.2',
   'coz-mg-card': 'colors.background.3',
   /** brand */
   'coz-mg-color-plus-brand': 'colors.brand.50',

packages/components/coze-design/src/components/radio/radio-group.tsx

@@ -6,10 +6,36 @@ import { forwardRef } from 'react';
 import { type RadioGroupProps } from '@douyinfe/semi-ui/lib/es/radio/index.js';
 import { RadioGroup as SemiRadioGroup } from '@douyinfe/semi-ui';
 
+import { cn } from '@/utils';
+
+import { radioButtonVariants } from './radio-variant';
+
 export const RadioGroup = forwardRef<SemiRadioGroup, RadioGroupProps>(
   (props, ref): JSX.Element => {
     const { children, ...restProps } = props;
 
+    const { options } = restProps;
+
+    /**
+     * pureCard 模式下，将 coz-radio 的样式拼接上去
+     * 暂时只兼容 pureCard 模式，其他模式下业务侧已经有了很多自定义 className
+     */
+    if (options && restProps.type === 'pureCard') {
+      restProps.options = options.map(opt => {
+        if (typeof opt === 'string') {
+          return {
+            label: opt,
+            className: radioButtonVariants(),
+          };
+        } else {
+          return {
+            ...opt,
+            className: cn(radioButtonVariants(), opt.className),
+          };
+        }
+      });
+    }
+
     return (
       <SemiRadioGroup {...restProps} ref={ref}>
         {children}