@rainbow-oh/yee-c 0.1.0 → 0.3.0

package/src/Form/index.zh-CN.md

@@ -15,6 +15,7 @@ toc: 'content'
 ## 代码演示
 
 <code src="./demo/basic.tsx" title="基础用法" description="Form的基础用法"></code>
+<code src="./demo/tooltip.tsx" title="标签帮助提示" description="在标签旁展示帮助图标，支持自定义触发图标"></code>
 <code src="./demo/group.tsx" title="字段分组" description="Field.Group 共享标签和组级别校验"></code>
 <code src="./demo/watch.tsx" title="字段监听" description="useWatch 监听字段值变化实现联动"></code>
 <code src="./demo/list.tsx" title="表单列表" description="Form的列表字段用法"></code>
@@ -22,110 +23,111 @@ toc: 'content'
 <code src="./demo/layout.tsx" title="表单布局" description="不同的表单布局"></code>
 <code src="./demo/validate.tsx" title="表单校验" description="表单校验功能"></code>
 
-<!-- <code src="./demo/dynamic.tsx" title="动态表单" description="动态增减表单项"></code> -->
-
-<!-- <code src="./demo/virtual.tsx" title="虚拟表单" description="虚拟表单"></code> -->
-
 ## API
 
 ### FormProps
 
-| 属性名               | 类型                                        | 描述                     | 默认值 |
-| -------------------- | ------------------------------------------- | ------------------------ | ------ |
-| prefixCls            | `string`                                    | 自定义类名前缀           | -      |
-| className            | `string`                                    | 自定义根类名             | -      |
-| style                | `React.CSSProperties`                       | 自定义根样式             | -      |
-| children             | `React.ReactNode`                           | 字段                     | -      |
-| name                 | `string`                                    | 表单名                   | -      |
-| form                 | [FormInstance](#forminstance)               | 表单实例                 | -      |
-| disabled             | `boolean`                                   | 是否禁用                 | -      |
-| initialValues        | `Store`                                     | 初始值                   | -      |
-| layout               | `'vertical' \| 'horizontal'`                | 布局                     | -      |
-| onFinish             | `(values: Values) => void`                  | submit提交时触发事件     | -      |
-| onFinishFailed       | `(err: Values) => void`                     | submit提交报错时触发事件 | -      |
-| onValuesChange       | `(changedValues: Record<string, any>, values: Values) => void` | 表单字段值改变时触发事件 | -      |
-| onValuesBeforeChange | `(changedValues: Record<string, any>, values: Values) => void \| any` | 表单字段值改变前触发事件 | -      |
-| onReset              | `() => void`                                | 表单重置时触发的事件      | -      |
-| data-* | `string` | - | 支持所有 data-* 属性，透传到组件根 DOM 元素 |
+| 属性名               | 类型                                                                  | 描述                     | 默认值                                       |
+| -------------------- | --------------------------------------------------------------------- | ------------------------ | -------------------------------------------- |
+| prefixCls            | `string`                                                              | 自定义类名前缀           | -                                            |
+| className            | `string`                                                              | 自定义根类名             | -                                            |
+| style                | `React.CSSProperties`                                                 | 自定义根样式             | -                                            |
+| children             | `React.ReactNode`                                                     | 字段                     | -                                            |
+| name                 | `string`                                                              | 表单名                   | -                                            |
+| form                 | [FormInstance](#forminstance)                                         | 表单实例                 | -                                            |
+| disabled             | `boolean`                                                             | 是否禁用                 | -                                            |
+| initialValues        | `Store`                                                               | 初始值                   | -                                            |
+| layout               | `'vertical' \| 'horizontal'`                                          | 布局                     | -                                            |
+| onFinish             | `(values: Values) => void`                                            | submit提交时触发事件     | -                                            |
+| onFinishFailed       | `(err: Values) => void`                                               | submit提交报错时触发事件 | -                                            |
+| onValuesChange       | `(changedValues: Record<string, any>, values: Values) => void`        | 表单字段值改变时触发事件 | -                                            |
+| onValuesBeforeChange | `(changedValues: Record<string, any>, values: Values) => void \| any` | 表单字段值改变前触发事件 | -                                            |
+| onReset              | `() => void`                                                          | 表单重置时触发的事件     | -                                            |
+| data-\*              | `string`                                                              | -                        | 支持所有 data-\* 属性，透传到组件根 DOM 元素 |
 
 ### FormInstance
 
-| 属性名                | 类型                                                                                       | 描述           |
-| --------------------- | ------------------------------------------------------------------------------------------ | -------------- |
-| getFieldValidate      | `(name: Name) => ValidateMessage \| null`                                     | 获取字段验证   |
-| getFieldValue         | `(name: Name) => StoreValue`                                                           | 获取字段值     |
-| submit                | `() => void`                                                                               | 提交表单       |
-| getFieldsValue        | `() => Values`                                                                             | 获取所有字段值 |
-| setFieldsValue        | `(newStore: Store, trigger?: TRIGGER) => void`                                            | 设置字段值     |
-| setCallbacks          | `(callbacks: Callbacks) => void`                                                           | 设置回调       |
-| resetFields           | `(name?: Name[]) => void`                                                              | 重置字段       |
-| clearFields           | `(name?: Name[]) => void`                                                              | 清空字段       |
-| validateField         | `(name: Name, trigger?: 'onChange' \| 'onBlur') => ValidateMessage[]`                 | 校验单个字段   |
-| validateFields        | `(names?: Name[], trigger?: TRIGGER) => ValidateMessage[]`                             | 校验多个字段   |
-| getCallbacks          | `() => Callbacks`                                                         | 获取回调       |
-| registerFieldEntities | `(entity: FieldEntity) => void`                                                            | 注册字段实体   |
-| initialize            | `({ initialValues, callbacks }: { initialValues?: Store; callbacks?: Callbacks }) => void` | 初始化表单     |
-| getListFields         | `(name: NamePath) => FormListField[]`                                                      | 获取列表字段   |
-| getListOperations     | `(name: NamePath) => FormListOperation`                                                    | 获取列表操作   |
-| subscribe             | `(namePath?: NamePath, callback?: () => void) => () => void`                                 | 订阅字段值变化，不传 namePath 监听所有字段 |
+| 属性名                | 类型                                                                                       | 描述                                       |
+| --------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------ |
+| getFieldValidate      | `(name: Name) => ValidateMessage \| null`                                                  | 获取字段验证                               |
+| getFieldValue         | `(name: Name) => StoreValue`                                                               | 获取字段值                                 |
+| submit                | `() => void`                                                                               | 提交表单                                   |
+| getFieldsValue        | `() => Values`                                                                             | 获取所有字段值                             |
+| setFieldsValue        | `(newStore: Store, trigger?: TRIGGER) => void`                                             | 设置字段值                                 |
+| setCallbacks          | `(callbacks: Callbacks) => void`                                                           | 设置回调                                   |
+| resetFields           | `(name?: Name[]) => void`                                                                  | 重置字段                                   |
+| clearFields           | `(name?: Name[]) => void`                                                                  | 清空字段                                   |
+| validateField         | `(name: Name, trigger?: 'onChange' \| 'onBlur') => ValidateMessage[]`                      | 校验单个字段                               |
+| validateFields        | `(names?: Name[], trigger?: TRIGGER) => ValidateMessage[]`                                 | 校验多个字段                               |
+| getCallbacks          | `() => Callbacks`                                                                          | 获取回调                                   |
+| registerFieldEntities | `(entity: FieldEntity) => void`                                                            | 注册字段实体                               |
+| initialize            | `({ initialValues, callbacks }: { initialValues?: Store; callbacks?: Callbacks }) => void` | 初始化表单                                 |
+| getListFields         | `(name: NamePath) => FormListField[]`                                                      | 获取列表字段                               |
+| getListOperations     | `(name: NamePath) => FormListOperation`                                                    | 获取列表操作                               |
+| subscribe             | `(namePath?: NamePath, callback?: () => void) => () => void`                               | 订阅字段值变化，不传 namePath 监听所有字段 |
 
 ### Form 静态方法
 
-| 方法名     | 类型                                                    | 描述                       |
-| ---------- | ------------------------------------------------------- | -------------------------- |
-| Form.useWatch  | `(namePath?: NamePath, form?: FormInstance) => T \| undefined` | 监听表单字段值变化，不传 namePath 返回所有值 |
+| 方法名        | 类型                                                           | 描述                                         |
+| ------------- | -------------------------------------------------------------- | -------------------------------------------- |
+| Form.useWatch | `(namePath?: NamePath, form?: FormInstance) => T \| undefined` | 监听表单字段值变化，不传 namePath 返回所有值 |
 
 ### Field.GroupProps
 
-| 属性名   | 类型                  | 描述     | 默认值 |
-| -------- | --------------------- | -------- | ------ |
-| children | `React.ReactNode`     | 子元素，通常为多个 Form.Field   | -      |
-| label    | `React.ReactNode`     | 组标签   | -      |
-| required | `boolean`             | 是否必填（显示必填标记） | -      |
-| rules    | [Rule\[\]](#rule)     | 组级别校验规则，validator 接收子字段值的对象 | -      |
-| cols     | `number`              | 子字段列数 | -      |
-| style    | `React.CSSProperties` | 自定义样式 | -      |
-| className | `string`             | 自定义类名 | -      |
+| 属性名    | 类型                  | 描述                                         | 默认值 |
+| --------- | --------------------- | -------------------------------------------- | ------ |
+| children  | `React.ReactNode`     | 子元素，通常为多个 Form.Field                | -      |
+| label     | `React.ReactNode`     | 组标签                                       | -      |
+| required  | `boolean`             | 是否必填（显示必填标记）                     | -      |
+| rules     | [Rule\[\]](#rule)     | 组级别校验规则，validator 接收子字段值的对象 | -      |
+| cols      | `number`              | 子字段列数                                   | -      |
+| style     | `React.CSSProperties` | 自定义样式                                   | -      |
+| className | `string`              | 自定义类名                                   | -      |
 
 ### FieldProps
 
-| 属性名   | 类型                  | 描述     | 默认值 |
-| -------- | --------------------- | -------- | ------ |
-| children | `React.ReactElement`  | 子元素   | -      |
-| name     | `NamePath` | 字段名   | -      |
-| rules    | [Rule\[\]](#rule)     | 校验规则 | -      |
-| label    | `React.ReactNode`     | 标签     | -      |
-| required | `boolean`             | 是否必填 | -      |
-| disabled | `boolean`             | 是否禁用 | -      |
-| initialValue | `unknown`          | 初始值   | -      |
-| valuePropName | `string`          | 设置子组件值的属性名   | `'value'`      |
+| 属性名        | 类型                 | 描述                 | 默认值    |
+| ------------- | -------------------- | -------------------- | --------- |
+| className     | `string`             | 自定义字段根类名     | -         |
+| style         | `React.CSSProperties` | 自定义字段根样式    | -         |
+| classNames    | `Partial<Record<'label' \| 'control', string>>` | 语义化结构类名 | -  |
+| styles        | `Partial<Record<'label' \| 'control', React.CSSProperties>>` | 语义化结构样式 | - |
+| children      | `React.ReactElement` | 子元素               | -         |
+| name          | `NamePath`           | 字段名               | -         |
+| rules         | [Rule\[\]](#rule)    | 校验规则             | -         |
+| label         | `React.ReactNode`    | 标签                 | -         |
+| tooltip       | `ReactNode \| (Omit<TooltipProps, 'children'> & { icon?: ReactNode })` | 标签旁的帮助提示。传字符串/节点使用默认图标；传对象时可自定义 `icon`，其余属性透传给 Tooltip（`title`、`color`、`placement` 等） | -         |
+| required      | `boolean`            | 是否必填             | -         |
+| disabled      | `boolean`            | 是否禁用             | -         |
+| initialValue  | `unknown`            | 初始值               | -         |
+| valuePropName | `string`             | 设置子组件值的属性名 | `'value'` |
 
 ### Rule
 
-| 属性名          | 类型            | 描述       |
-| --------------- | --------------- | ---------- |
-| required        | `boolean`       | 是否必填   |
-| type            | `string`        | 类型       |
-| min             | `number`        | 最小值     |
-| max             | `number`        | 最大值     |
-| minLength       | `number`        | 最小长度   |
-| maxLength       | `number`        | 最大长度   |
-| regexp          | `RegExp`        | 正则表达式 |
-| message         | `string`        | 错误信息   |
-| validator       | `(value: unknown) => boolean` | 自定义校验函数 |
-| validateTrigger | `'onBlur' \| 'onChange' \| 'onSubmit' \| Array<'onBlur' \| 'onChange' \| 'onSubmit'>` | 校验触发时机 |
+| 属性名          | 类型                                                                                  | 描述           |
+| --------------- | ------------------------------------------------------------------------------------- | -------------- |
+| required        | `boolean`                                                                             | 是否必填       |
+| type            | `string`                                                                              | 类型           |
+| min             | `number`                                                                              | 最小值         |
+| max             | `number`                                                                              | 最大值         |
+| minLength       | `number`                                                                              | 最小长度       |
+| maxLength       | `number`                                                                              | 最大长度       |
+| regexp          | `RegExp`                                                                              | 正则表达式     |
+| message         | `string`                                                                              | 错误信息       |
+| validator       | `(value: unknown) => boolean`                                                         | 自定义校验函数 |
+| validateTrigger | `'onBlur' \| 'onChange' \| 'onSubmit' \| Array<'onBlur' \| 'onChange' \| 'onSubmit'>` | 校验触发时机   |
 
 ### Types
 
-| 类型            | 描述                                                      |
-| --------------- | --------------------------------------------------------- |
-| StoreValue      | `any`                                                     |
-| Store           | `Record<string, StoreValue>`                              |
-| Name            | `string`                                                  |
-| NamePath        | `string \| string[] \| number \| (string \| number)[]`    |
-| ValidateMessage | `{ name: NamePath \| NamePath[] \| undefined; message: string; value: unknown; status: 'error' \| 'success' \| 'warning' \| 'info' }` |
-| FieldEntity     | `{ props: fieldProps & { name?: NamePath }; onStoreChange: () => void }` |
-| TRIGGER         | `'onChange' \| 'onBlur' \| 'onSubmit' \| 'reset' \| 'clear' \| 'update'` |
-| FormListField   | `{ key: React.Key; name: number; isListField?: boolean }` |
-| FormListOperation | `{ add: (defaultValue?: any, insertIndex?: number) => void; remove: (index: number \| number[]) => void; move: (from: number, to: number) => void }` |
-| FormListProps   | `{ name: NamePath; children: (fields: FormListField[], operation: FormListOperation, meta: { errors: React.ReactNode[] }) => React.ReactNode; initialValue?: any[]; rules?: Rule[] }` |
+| 类型              | 描述                                                                                                                                                                                  |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| StoreValue        | `any`                                                                                                                                                                                 |
+| Store             | `Record<string, StoreValue>`                                                                                                                                                          |
+| Name              | `string`                                                                                                                                                                              |
+| NamePath          | `string \| string[] \| number \| (string \| number)[]`                                                                                                                                |
+| ValidateMessage   | `{ name: NamePath \| NamePath[] \| undefined; message: string; value: unknown; status: 'error' \| 'success' \| 'warning' \| 'info' }`                                                 |
+| FieldEntity       | `{ props: fieldProps & { name?: NamePath }; onStoreChange: () => void }`                                                                                                              |
+| TRIGGER           | `'onChange' \| 'onBlur' \| 'onSubmit' \| 'reset' \| 'clear' \| 'update'`                                                                                                              |
+| FormListField     | `{ key: React.Key; name: number; isListField?: boolean }`                                                                                                                             |
+| FormListOperation | `{ add: (defaultValue?: any, insertIndex?: number) => void; remove: (index: number \| number[]) => void; move: (from: number, to: number) => void }`                                  |
+| FormListProps     | `{ name: NamePath; children: (fields: FormListField[], operation: FormListOperation, meta: { errors: React.ReactNode[] }) => React.ReactNode; initialValue?: any[]; rules?: Rule[] }` |

package/src/Form/interface.ts

@@ -1,3 +1,4 @@
+import type { TooltipProps } from '../Tooltip';
 import type { DataAttributeProps } from '../utils/types';
 
 export type StoreValue = any;
@@ -5,7 +6,7 @@ export type Store = Record<string, StoreValue>;
 export type Name = string;
 export type NamePath = string | string[] | number | (string | number)[];
 
-export type SemanticDOM = 'label' | 'control';
+export type FieldSemanticDOM = 'label' | 'control';
 
 // Internal name path type, always a string array
 export type InternalNamePath = (string | number)[];
@@ -230,7 +231,7 @@ export type Rule = {
   /**
    * Error message
    */
-  message: string;
+  message?: string;
   /**
    * Custom validation function, returns true for pass, false or throw for fail
    */
@@ -253,12 +254,62 @@ export type ValidateMessage = {
   status: 'error' | 'success' | 'warning' | 'info';
 };
 
+export type FieldConfigurableTooltip = Omit<TooltipProps, 'children'> & {
+  /**
+   * Custom trigger icon (defaults to a built-in help icon)
+   */
+  icon?: React.ReactNode;
+};
+
+export type FieldTooltip = React.ReactNode | FieldConfigurableTooltip;
+
 export type FieldProps = {
+  /**
+   * custom field root className
+   * */
+  className?: string;
+  /**
+   * custom field root style
+   * */
+  style?: React.CSSProperties;
+  /**
+   * Semantic DOM className
+   * */
+  classNames?: Partial<Record<FieldSemanticDOM, string>>;
+  /**
+   * Semantic DOM style
+   * */
+  styles?: Partial<Record<FieldSemanticDOM, React.CSSProperties>>;
+  /**
+   * Child nodes
+   * */
   children: React.ReactElement;
+  /**
+   * Field name
+   * */
   name: NamePath;
+  /**
+   * Validation rules
+   * */
   rules?: Rule[];
+  /***
+   * Field label
+   */
   label?: React.ReactNode;
+  /**
+   * Tooltip shown next to the label (a help icon).
+   * Pass a string/node to use the default icon, or an object to customize the icon.
+   * */
+  tooltip?: FieldTooltip;
+  /**
+   * Whether required (shows required mark)
+   * */
   required?: boolean;
+  /**
+   * Layout of label and control
+   * @default 'vertical'
+   * */
+  layout?: 'vertical' | 'horizontal';
   /**
    * Format value before passing to children
    * */

package/src/Form/style/index.less

@@ -18,17 +18,32 @@
     // padding-bottom: var(--yee-form-item-padding-bottom);
 
     &-label {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
       margin-bottom: var(--yee-form-item-label-mb, 4px);
       line-height: var(--yee-form-item-label-line-height);
     }
 
-    &-required {
-      &::after {
-        color: var(--yee-input-required-font-color);
-        content: '*';
-        margin-inline-start: var(--yee-form-item-required-margin-inline-start);
-      }
+    // The required asterisk is rendered as a real node via &-required-mark so it
+    // stays glued to the label text regardless of what else sits inside the label.
+    // The `item-required` className is still applied to the label (see Field/Group)
+    // as an opt-in styling hook; the mark itself lives in &-required-mark below.
+    &-required-mark {
+      color: var(--yee-input-required-font-color);
+      margin-inline-start: var(--yee-form-item-required-margin-inline-start);
+      line-height: 1;
+    }
+
+    &-tooltip-icon {
+      display: inline-flex;
+      align-items: center;
+      margin-inline-start: 4px;
+      color: var(
+        --yee-form-item-tooltip-icon-color,
+        var(--yee-text-color-secondary, #999)
+      );
+      cursor: pointer;
     }
 
     &-control {

package/src/Menu/style/index.less

@@ -82,7 +82,7 @@
     list-style: none;
 
     &-title {
-      padding: var(--yee-menu-item-group-title-padding, 8px 16px);
+      padding: var(--yee-menu-item-group-title-padding, 4px 12px);
       color: var(
         --yee-menu-item-group-title-color,
         var(--yee-color-text-secondary)
@@ -106,7 +106,7 @@
     margin: var(--yee-menu-item-divider-margin, 4px 0);
     border-top: var(
       --yee-menu-item-divider-border,
-      1px solid var(--yee-color-border)
+      1px solid var(--yee-border-color)
     );
   }
 

package/src/Popconfirm/popconfirm.tsx

@@ -27,7 +27,7 @@ const Popconfirm: React.FC<PopconfirmProps> = (baseprops) => {
     defaultOpen,
     title,
     description,
-    arrow = true,
+    arrow = { className: `${prefixCls}-arrow` },
     placement = 'top',
     confirmText = popconfirmLocale.okText,
     cancelText = popconfirmLocale.cancelText,

package/src/Popconfirm/style/index.less

@@ -20,4 +20,10 @@
   &-footer {
     margin-top: var(--yee-popconfirm-footer-margin-top);
   }
+
+  &-arrow {
+    &::after {
+      background-color: var(--yee-popconfirm-bg-font-color);
+    }
+  }
 }

package/src/Popover/popover.tsx

@@ -19,7 +19,7 @@ const Popover = (baseprops: PopoverProps) => {
     children,
     title,
     content,
-    arrow = true,
+    arrow = { className: `${prefixCls}-arrow` },
     placement = 'top',
     trigger = 'hover',
     style,

package/src/Popover/style/index.less

@@ -14,4 +14,10 @@
     line-height: var(--yee-popover-header-line-height);
     background-color: var(--yee-popover-header-bg-color);
   }
+
+  &-arrow {
+    &::after {
+      background-color: var(--yee-popover-bg-color);
+    }
+  }
 }

package/src/Progress/progress.tsx

@@ -75,13 +75,13 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
     let progress;
     if (type === 'line') {
       progress = (
-        <Line prefixCls={prefixCls} percent={percent}>
+        <Line {...rest} prefixCls={prefixCls} percent={percent}>
           {progressInfo}
         </Line>
       );
     } else {
       progress = (
-        <Circle prefixCls={prefixCls} percent={percent}>
+        <Circle {...rest} prefixCls={prefixCls} percent={percent}>
           {progressInfo}
         </Circle>
       );

package/src/Radio/demo/button.tsx

@@ -26,6 +26,7 @@ export default () => {
         value={value2}
         onChange={(e) => setValue2(e)}
         buttonStyle="solid"
+        gap={8}
         options={[
           { value: 'a', label: 'Hangzhou' },
           { value: 'b', label: 'Shanghai' },

package/src/Radio/index.en-US.md

@@ -54,4 +54,6 @@ Radio button for selecting one option from a set of options.
 | disabled | `boolean` | Disable all options | - |
 | buttonStyle | `'outline' \| 'solid' \| 'cornermark'` | Button style | - |
 | options | `Array<RadioProps & { label: React.ReactNode }>` | Options in configuration form | - |
+| toggleable | `boolean` | Whether selection can be toggled (click again to deselect) | - |
+| gap | `number` | Set the interval between radios | - |
 | onChange | `(value: string, event: React.ChangeEvent<HTMLInputElement>) => void` | Callback when value changes | - |

package/src/Radio/index.zh-CN.md

@@ -54,4 +54,6 @@ toc: 'content'
 | disabled | `boolean` | 是否禁用所有选项 | - |
 | buttonStyle | `'outline' \| 'solid' \| 'cornermark'` | 按钮风格 | - |
 | options | `Array<RadioProps & { label: React.ReactNode }>` | 选项，以配置形式 | - |
+| toggleable | `boolean` | 是否允许切换选中状态（再次点击取消选中） | - |
+| gap | `number` | 设置单选框之间的间距 | - |
 | onChange | `(value: string, event: React.ChangeEvent<HTMLInputElement>) => void` | 值改变时的回调 | - |

package/src/Radio/interface.ts

@@ -96,6 +96,10 @@ export interface RadioGroupProps {
    * Whether to toggle checked state
    */
   toggleable?: boolean;
+  /**
+   * Set the interval between radios
+   * */
+  gap?: number;
   /**
    * Callback when value changes
    */

package/src/Radio/radio-group.tsx

@@ -22,6 +22,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
     const {
       prefixCls = 'yee-radio-group',
       className,
+      style,
       name = uid,
       value,
       defaultValue,
@@ -29,6 +30,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
       buttonStyle,
       disabled,
       size,
+      gap,
       onChange,
       ...rest
     } = props;
@@ -43,6 +45,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
       {
         [`${prefixCls}-${buttonStyle}`]: buttonStyle,
         [`${prefixCls}-${size}`]: size,
+        [`${prefixCls}-with-gap`]: gap,
       },
       className,
     );
@@ -53,7 +56,12 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
     };
 
     return (
-      <div className={cls} ref={ref} role="radiogroup">
+      <div
+        className={cls}
+        style={{ ...style, gap: gap }}
+        ref={ref}
+        role="radiogroup"
+      >
         <GroupCtx.Provider
           value={{ name, buttonStyle, onChange: handleChange }}
         >

package/src/Radio/radio.tsx

@@ -16,6 +16,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
       prefixCls = 'yee-radio',
       className,
       classNames,
+      style,
       styles,
       label,
       children,
@@ -66,7 +67,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
     );
 
     return (
-      <label className={cls} onClick={handleClick}>
+      <label className={cls} style={style} onClick={handleClick}>
         <span
           className={clsx(prefixCls, {
             [`${prefixCls}-disabled`]: disabled,

package/src/Radio/style/index.less

@@ -9,14 +9,16 @@
     gap: var(--yee-radio-group-gap);
 
     &-small {
-      @{pls} {
-        padding: var(--yee-radio-small-padding, 2px 4px);
+      @{pls}-button-wrapper {
+        font-size: var(--yee-radio-font-small-size);
+        padding: var(--yee-radio-small-padding);
       }
     }
 
     &-large {
-      @{pls} {
-        padding: var(--yee-radio-large-padding, 6px 12px);
+      @{pls}-button-wrapper {
+        font-size: var(--yee-radio-font-large-size);
+        padding: var(--yee-radio-large-padding);
       }
     }
 
@@ -61,12 +63,25 @@
           bottom: 0;
           border-color: transparent;
           border-style: solid;
-          border-width: var(--yee-radio-cornermark-border-width);
+          border-width: calc(var(--yee-radio-cornermark-border-width) / 3 * 2);
           border-right-color: var(--yee-radio-inner-checked-border-color);
           border-bottom-color: var(--yee-radio-inner-checked-border-color);
           content: '';
         }
 
+        &::before {
+          position: absolute;
+          z-index: 1;
+          right: 3px;
+          top: 18px;
+          width: 3px;
+          height: 7px;
+          border: 2px solid #fff;
+          border-width: 0 2px 2px 0;
+          transform: rotate(45deg);
+          content: '';
+        }
+
         z-index: 1;
       }
 
@@ -74,6 +89,12 @@
         margin-left: -1px;
       }
     }
+
+    &-with-gap {
+      @{pls}-button-wrapper {
+        border-radius: var(--yee-radio-button-wrapper-border-radius);
+      }
+    }
   }
 
   &-wrapper {

package/src/Segmented/demo/basic.tsx

@@ -0,0 +1,24 @@
+import { Segmented, Space } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+export default () => {
+  const [value, setValue] = useState<string | number>('daily');
+
+  return (
+    <Space direction="vertical">
+      <Segmented
+        options={[
+          { label: 'Daily', value: 'daily' },
+          { label: 'Weekly', value: 'weekly' },
+          { label: 'Monthly', value: 'monthly' },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+
+      <Segmented options={['List', 'Table', 'Chart']} defaultValue="List" />
+
+      <div>Selected: {value}</div>
+    </Space>
+  );
+};

package/src/Segmented/demo/block.tsx

@@ -0,0 +1,17 @@
+import { Segmented } from '@rainbow-oh/yee-c';
+import { LayoutGrid, List } from 'lucide-react';
+import React from 'react';
+
+export default () => (
+  <div style={{ width: 480 }}>
+    <Segmented
+      block
+      defaultValue="list"
+      options={[
+        { label: 'List', value: 'list', icon: <List size={16} /> },
+        { label: 'Grid', value: 'grid', icon: <LayoutGrid size={16} /> },
+        { label: 'Detail', value: 'detail' },
+      ]}
+    />
+  </div>
+);

package/src/Segmented/demo/disabled.tsx

@@ -0,0 +1,18 @@
+import { Segmented } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+export default () => (
+  <>
+    <Segmented
+      options={[
+        { label: 'A', value: 'a' },
+        { label: 'B', value: 'b', disabled: true },
+        { label: 'C', value: 'c' },
+      ]}
+      defaultValue="a"
+    />
+    <br />
+    <br />
+    <Segmented disabled options={['A', 'B', 'C']} defaultValue="A" />
+  </>
+);