@rainbow-oh/yee-c 0.1.0 → 0.3.0

package/src/Checkbox/style/index.less

@@ -33,6 +33,10 @@
       background-color: var(--yee-checkbox-checked-bg-color);
       border-color: var(--yee-checkbox-checked-border-color);
 
+      --ye-checkbox-checked-border-color: var(
+        --yee-checkbox-checked-after-border-color
+      );
+
       &::after {
         position: absolute;
         top: 50%;
@@ -41,7 +45,7 @@
         width: var(--yee-checkbox-checked-after-width);
         height: var(--yee-checkbox-checked-after-height);
         border: var(--yee-checkbox-checked-after-border-width) solid
-          var(--yee-checkbox-checked-after-border-color);
+          var(--ye-checkbox-checked-border-color);
         border-top: 0;
         transform: rotate(45deg) scale(1) translate(-50%, -50%);
         content: '';
@@ -59,6 +63,14 @@
       border-color: var(--yee-checkbox-border-color);
     }
 
+    &&-checked {
+      @{pls}-inner {
+        --ye-checkbox-checked-border-color: var(
+          --yee-checkbox-disabled-checked-border-color
+        );
+      }
+    }
+
     @{pls}-input {
       display: none;
     }
@@ -100,4 +112,12 @@
       }
     }
   }
+
+  &-group {
+    &-vertical {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
 }

package/src/Config-Provider/index.en-US.md

@@ -72,6 +72,7 @@ GlobalCtxType contains configuration for all components. Here are some examples:
 | rate | [RateProps](/components/rate) | Rate component configuration |
 | search | [SearchProps](/components/search) | Search component configuration |
 | select | [SelectProps](/components/select) | Select component configuration |
+| segmented | [SegmentedProps](/components/segmented) | Segmented component configuration |
 | skeleton | [SkeletonProps](/components/skeleton) | Skeleton component configuration |
 | slider | [SliderProps](/components/slider) | Slider component configuration |
 | space | [SpaceProps](/components/space) | Space component configuration |
@@ -88,6 +89,7 @@ GlobalCtxType contains configuration for all components. Here are some examples:
 | timeline | [TimelineProps](/components/timeline) | Timeline component configuration |
 | highlight | [HighlightProps](/components/highlight) | Highlight component configuration |
 | tooltip | [TooltipProps](/components/tooltip) | Tooltip component configuration |
+| tour | [TourProps](/components/tour) | Tour component configuration |
 | tree | [TreeProps](/components/tree) | Tree component configuration |
 | treeselect | [TreeSelectProps](/components/tree-select) | TreeSelect component configuration |
 | trigger | [TriggerProps](/components/trigger) | Trigger component configuration |

package/src/Config-Provider/index.zh-CN.md

@@ -72,6 +72,7 @@ GlobalCtxType 包含所有组件的配置。以下是一些示例：
 | rate | [RateProps](/components/rate) | Rate 组件配置 |
 | search | [SearchProps](/components/search) | Search 组件配置 |
 | select | [SelectProps](/components/select) | Select 组件配置 |
+| segmented | [SegmentedProps](/components/segmented) | Segmented 组件配置 |
 | skeleton | [SkeletonProps](/components/skeleton) | Skeleton 组件配置 |
 | slider | [SliderProps](/components/slider) | Slider 组件配置 |
 | space | [SpaceProps](/components/space) | Space 组件配置 |
@@ -88,6 +89,7 @@ GlobalCtxType 包含所有组件的配置。以下是一些示例：
 | timeline | [TimelineProps](/components/timeline) | Timeline 组件配置 |
 | highlight | [HighlightProps](/components/highlight) | Highlight 组件配置 |
 | tooltip | [TooltipProps](/components/tooltip) | Tooltip 组件配置 |
+| tour | [TourProps](/components/tour) | Tour 组件配置 |
 | tree | [TreeProps](/components/tree) | Tree 组件配置 |
 | treeselect | [TreeSelectProps](/components/tree-select) | TreeSelect 组件配置 |
 | trigger | [TriggerProps](/components/trigger) | Trigger 组件配置 |

package/src/Config-Provider/interface.ts

@@ -40,6 +40,7 @@ import { RadioGroupProps, RadioProps } from '../Radio';
 import { RangePickerProps } from '../RangePicker';
 import { RateProps } from '../Rate';
 import { SearchProps } from '../Search';
+import { SegmentedProps } from '../Segmented';
 import { SelectProps } from '../Select';
 import { SkeletonProps } from '../Skeleton';
 import { SliderProps } from '../Slider';
@@ -56,6 +57,7 @@ import { TextAreaProps } from '../TextArea';
 import { SpinProps } from '../Spin';
 import { TimelineProps } from '../Timeline';
 import { TooltipProps } from '../Tooltip';
+import { TourProps } from '../Tour';
 import { TransferProps } from '../Transfer';
 import { TreeProps } from '../Tree';
 import { TreeSelectProps } from '../TreeSelect';
@@ -112,6 +114,7 @@ export type GlobalCtxType = {
   rate?: RateProps;
   search?: SearchProps;
   select?: SelectProps;
+  segmented?: SegmentedProps;
   skeleton?: SkeletonProps;
   slider?: SliderProps;
   space?: SpaceProps;
@@ -129,6 +132,7 @@ export type GlobalCtxType = {
   highlight?: HighlightProps;
   //   timepicker?: TimePickerProps;
   tooltip?: TooltipProps;
+  tour?: TourProps;
   transfer?: TransferProps;
   tree?: TreeProps<unknown>;
   treeselect?: TreeSelectProps;

package/src/Dropdown/demo/placement.tsx

@@ -9,6 +9,7 @@ export default () => {
         { key: '2', label: 'Option 2' },
         { key: '3', label: 'Option 3' },
       ]}
+      keyboard
     />
   );
 

package/src/Dropdown/dropdown.tsx

@@ -20,6 +20,7 @@ const Dropdown: FC<DropdownProps> = (baseprops) => {
     menu,
     open,
     defaultOpen,
+    arrow = { className: `${prefixCls}-arrow` },
     onOpenChange,
     ...rest
   } = props;
@@ -54,6 +55,7 @@ const Dropdown: FC<DropdownProps> = (baseprops) => {
   return (
     <Trigger
       {...rest}
+      arrow={arrow}
       popup={renderPopup() as any}
       placement={placement}
       popupClassName={`${prefixCls}-popup`}

package/src/Dropdown/style/index.less

@@ -4,4 +4,10 @@
   &-popup {
     background-color: var(--yee-dropdown-bg-color);
   }
+
+  &-arrow {
+    &::after {
+      background-color: var(--yee-dropdown-bg-color);
+    }
+  }
 }

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 {
@@ -20,13 +27,19 @@ function stringifyPath(path: InternalNamePath): string {
 
 const Field: React.FC<FieldProps> = (props) => {
   const {
+    style,
+    className,
+    styles,
+    classNames,
     children,
     name,
     rules,
     label,
+    tooltip,
     required,
     disabled,
     valuePropName = 'value',
+    layout = 'vertical',
     formatter,
   } = props;
   const {
@@ -77,6 +90,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,22 +149,47 @@ const Field: React.FC<FieldProps> = (props) => {
   };
   return (
     <div
-      className={clsx(`${prefixCls}-item`, {
-        [`${prefixCls}-item-${validate?.status}`]: validate && validate.status,
-      })}
+      className={clsx(
+        `${prefixCls}-item`,
+        `${prefixCls}-item-${layout}`,
+        {
+          [`${prefixCls}-item-${validate?.status}`]:
+            validate && validate.status,
+        },
+        className,
+      )}
+      style={style}
     >
       <div className={clsx(`${prefixCls}-item-row`)}>
-        {label ? (
+        {label || tooltipConfig ? (
           <label
             htmlFor={normalizedName}
-            className={clsx(`${prefixCls}-item-label`, {
-              [`${prefixCls}-item-required`]: isRequired(),
-            })}
+            className={clsx(
+              `${prefixCls}-item-label`,
+              {
+                [`${prefixCls}-item-required`]: isRequired(),
+              },
+              classNames?.label,
+            )}
+            style={styles?.label}
           >
             {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`}>
+        <div
+          className={clsx(`${prefixCls}-item-control`, classNames?.control)}
+          style={styles?.control}
+        >
           {React.isValidElement(children) ? (
             React.cloneElement(
               children as React.ReactElement,

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>
@@ -88,10 +89,15 @@ High performance form component with data scope management.
 
 | Property | Type                  | Description      | Default |
 | -------- | --------------------- | ---------------- | ------- |
+| className | `string`             | Custom field root class name | -       |
+| style | `React.CSSProperties` | Custom field root style | -       |
+| classNames | `Partial<Record<'label' \| 'control', string>>` | Semantic structure class names | -       |
+| styles | `Partial<Record<'label' \| 'control', React.CSSProperties>>` | Semantic structure styles | -       |
 | children | `React.ReactElement`  | Child element    | -       |
 | 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    | -      |