@rainbow-oh/yee-c 0.1.0 → 0.2.0

package/src/Form/Field.tsx

@@ -1,10 +1,17 @@
 import clsx from 'clsx';
+import { HelpCircle } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import React, { useContext, useLayoutEffect, useMemo, useReducer } from 'react';
+import Tooltip from '../Tooltip';
 import FieldContext from './FieldContext';
 import FormContext from './FormContext';
 import { ListNameContext } from './List';
-import type { FieldProps, InternalNamePath, NamePath } from './interface';
+import type {
+  FieldConfigurableTooltip,
+  FieldProps,
+  InternalNamePath,
+  NamePath,
+} from './interface';
 
 // Helper function: convert NamePath to InternalNamePath
 function getNamePath(path: NamePath): InternalNamePath {
@@ -24,9 +31,11 @@ const Field: React.FC<FieldProps> = (props) => {
     name,
     rules,
     label,
+    tooltip,
     required,
     disabled,
     valuePropName = 'value',
+    layout = 'vertical',
     formatter,
   } = props;
   const {
@@ -77,6 +86,29 @@ const Field: React.FC<FieldProps> = (props) => {
 
   const validate = getFieldValidate?.(normalizedName);
 
+  // Normalize tooltip into { icon, ...tooltipProps }, or null when not provided.
+  // Everything except `icon` is forwarded to <Tooltip>, so any Tooltip prop
+  // (title, color, placement, ...) is supported automatically.
+  const tooltipConfig = useMemo<
+    | { icon: React.ReactNode; tooltipProps: Omit<FieldConfigurableTooltip, 'icon'> }
+    | null
+  >(() => {
+    if (tooltip === undefined || tooltip === null || tooltip === false)
+      return null;
+    if (
+      typeof tooltip === 'object' &&
+      !React.isValidElement(tooltip) &&
+      'title' in (tooltip as object)
+    ) {
+      const { icon, ...rest } = tooltip as FieldConfigurableTooltip;
+      return { icon: icon ?? <HelpCircle size={14} />, tooltipProps: rest };
+    }
+    return {
+      icon: <HelpCircle size={14} />,
+      tooltipProps: { title: tooltip as React.ReactNode },
+    };
+  }, [tooltip]);
+
   const getControlled = (children: React.ReactElement) => {
     const props = children.props as any;
     const _value = getFieldValue?.(normalizedName) ?? undefined;
@@ -113,12 +145,12 @@ const Field: React.FC<FieldProps> = (props) => {
   };
   return (
     <div
-      className={clsx(`${prefixCls}-item`, {
+      className={clsx(`${prefixCls}-item`, `${prefixCls}-item-${layout}`, {
         [`${prefixCls}-item-${validate?.status}`]: validate && validate.status,
       })}
     >
       <div className={clsx(`${prefixCls}-item-row`)}>
-        {label ? (
+        {label || tooltipConfig ? (
           <label
             htmlFor={normalizedName}
             className={clsx(`${prefixCls}-item-label`, {
@@ -126,6 +158,16 @@ const Field: React.FC<FieldProps> = (props) => {
             })}
           >
             {label}
+            {isRequired() ? (
+              <span className={`${prefixCls}-item-required-mark`}>*</span>
+            ) : null}
+            {tooltipConfig ? (
+              <Tooltip {...tooltipConfig.tooltipProps}>
+                <span className={`${prefixCls}-item-tooltip-icon`}>
+                  {tooltipConfig.icon}
+                </span>
+              </Tooltip>
+            ) : null}
           </label>
         ) : null}
         <div className={`${prefixCls}-item-control`}>

package/src/Form/Group.tsx

@@ -76,7 +76,7 @@ const Group: React.FC<FieldGroupProps> = (props) => {
               name: childNames,
               status: 'error',
               value: values,
-              message: rule.message,
+              message: rule.message || '',
             });
           }
         }
@@ -145,6 +145,9 @@ const Group: React.FC<FieldGroupProps> = (props) => {
             })}
           >
             {label}
+            {required ? (
+              <span className={`${itemCls}-required-mark`}>*</span>
+            ) : null}
           </label>
         )}
         <div className={`${itemCls}-control`}>{content}</div>

package/src/Form/demo/form-table.tsx

@@ -15,13 +15,13 @@ export default () => {
       <Form form={form} onFinish={onFinish} layout="vertical">
         <Form.List
           name="users"
-          initialValue={[
-            {
-              name: '',
-              age: '',
-              address: '',
-            },
-          ]}
+          // initialValue={[
+          //   {
+          //     name: '',
+          //     age: '',
+          //     address: '',
+          //   },
+          // ]}
         >
           {(fields, operations) => {
             // Define column config - operations are accessible here

package/src/Form/demo/tooltip.tsx

@@ -0,0 +1,72 @@
+import {
+  Button,
+  Form,
+  Grid,
+  Input,
+  Space,
+  TextArea,
+} from '@rainbow-oh/yee-c';
+import { Info } from 'lucide-react';
+import React from 'react';
+
+export default () => {
+  const [form] = Form.useForm();
+
+  const onFinish = (values: Record<string, unknown>) => {
+    console.log('Received values:', values);
+  };
+
+  return (
+    <Form
+      form={form}
+      onFinish={onFinish}
+      layout="vertical"
+      data-testid="tooltip-form"
+    >
+      <Grid>
+        <Grid.Item>
+          <Form.Field
+            name="username"
+            label="Username"
+            tooltip="Used for login. 4-20 characters."
+            rules={[
+              { required: true, message: 'Please input your username!' },
+            ]}
+          >
+            <Input placeholder="Please input your username" />
+          </Form.Field>
+        </Grid.Item>
+
+        <Grid.Item>
+          <Form.Field
+            name="nickname"
+            label="Nickname"
+            // Custom trigger icon via the object form
+            tooltip={{
+              title: 'Shown publicly instead of your username.',
+              icon: <Info size={14} />,
+            }}
+          >
+            <Input placeholder="Please input your nickname" />
+          </Form.Field>
+        </Grid.Item>
+
+        <Grid.Item>
+          <Form.Field
+            name="bio"
+            label="Bio"
+            tooltip="A short introduction about yourself."
+          >
+            <TextArea />
+          </Form.Field>
+        </Grid.Item>
+      </Grid>
+      <Space style={{ marginTop: 16 }}>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+        <Button htmlType="reset">Reset</Button>
+      </Space>
+    </Form>
+  );
+};

package/src/Form/form-store.ts

@@ -239,7 +239,7 @@ export class FormStore {
           status: 'error',
           value,
           ...rule,
-        });
+        } as ValidateMessage);
       }
     });
     if (err.length > 0) {

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

@@ -15,6 +15,7 @@ High performance form component with data scope management.
 ## Code Demo
 
 <code src="./demo/basic.tsx" title="Basic" description="Basic usage of Form"></code>
+<code src="./demo/tooltip.tsx" title="Label Tooltip" description="Show a help icon next to the label, with a customizable trigger icon"></code>
 <code src="./demo/group.tsx" title="Field Group" description="Field.Group with shared label and group-level validation"></code>
 <code src="./demo/watch.tsx" title="Field Watch" description="useWatch monitors field value changes for conditional rendering"></code>
 <code src="./demo/layout.tsx" title="Layout" description="Different form layouts"></code>
@@ -92,6 +93,7 @@ High performance form component with data scope management.
 | name     | `NamePath` | Field name       | -       |
 | rules    | [Rule\[\]](#rule)     | Validation rules | -       |
 | label    | `React.ReactNode`     | Label            | -       |
+| tooltip  | `ReactNode \| (Omit<TooltipProps, 'children'> & { icon?: ReactNode })` | Help tooltip next to the label. Pass a string/node to use the default icon; pass an object to customize `icon` — all other props (`title`, `color`, `placement`, ...) are forwarded to Tooltip | -       |
 | required | `boolean`             | Whether required | -       |
 | disabled | `boolean`             | Whether disabled | -       |
 | initialValue | `unknown`          | Initial value    | -      |

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,107 @@ 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'`      |
+| 属性名        | 类型                 | 描述                 | 默认值    |
+| ------------- | -------------------- | -------------------- | --------- |
+| 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;
@@ -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,46 @@ 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 = {
+  /**
+   * 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/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>
       );