@rainbow-oh/yee-c 0.1.0 → 0.2.0

package/dist/cjs/Alert/alert.js

@@ -70,10 +70,16 @@ var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps")
 var import_style = require("./style/index.less");
 var ICON_STROKE_WIDTH = 1.5;
 var iconMap = {
-  info: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, null), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, null) },
-  success: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheckBig, null), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheckBig, null) },
-  warning: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, null), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, null) },
-  error: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, null), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, null) }
+  info: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size: 16 }), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size: 24 }) },
+  success: {
+    small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheckBig, { size: 16 }),
+    large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheckBig, { size: 24 })
+  },
+  warning: {
+    small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, { size: 16 }),
+    large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, { size: 24 })
+  },
+  error: { small: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, { size: 16 }), large: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, { size: 24 }) }
 };
 var Alert = (baseprops) => {
   const { alert } = (0, import_react.useContext)(import_Config_Provider.GlobalContext);

package/dist/cjs/Alert/style/index.less

@@ -69,4 +69,7 @@
     border: none;
     border-radius: 0;
   }
+
+  &-small {
+  }
 }

package/dist/cjs/Anchor/anchor-item.js

@@ -83,7 +83,8 @@ var AnchorItem = (props) => {
     "level",
     "children"
   ]);
-  const { prefixCls, activeKey, onClick } = (0, import_react.useContext)(import_anchor.AnchorContext);
+  const { prefixCls, activeKey, onClick, classNames, styles } = (0, import_react.useContext)(import_anchor.AnchorContext);
+  const isActive = targetKey === activeKey;
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -92,12 +93,13 @@ var AnchorItem = (props) => {
   const cls = (0, import_clsx.default)(
     `${prefixCls}-item`,
     {
-      [`${prefixCls}-item-active`]: targetKey === activeKey,
+      [`${prefixCls}-item-active`]: isActive,
       [`${prefixCls}-item-${status}`]: status
     },
-    className
+    className,
+    isActive && (classNames == null ? void 0 : classNames.active)
   );
-  const itemStyle = __spreadProps(__spreadValues({}, style), {
+  const itemStyle = __spreadProps(__spreadValues(__spreadValues({}, style), isActive ? styles == null ? void 0 : styles.active : void 0), {
     paddingLeft: `${level * INDENT_WIDTH}px`
   });
   const renderItem = /* @__PURE__ */ import_react.default.createElement("li", __spreadValues({ className: cls, style: itemStyle }, rest), /* @__PURE__ */ import_react.default.createElement("a", { href: `#${targetKey}`, onClick: handleClick }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-label`, title: String(title) }, title)));

package/dist/cjs/Anchor/anchor.js

@@ -118,11 +118,17 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
   });
   const [anchorList, setAnchorList] = (0, import_react.useState)([]);
   const containerRef = (0, import_react.useRef)(null);
+  const activeKeyRef = (0, import_react.useRef)(mergedActiveKey);
+  (0, import_react.useEffect)(() => {
+    activeKeyRef.current = mergedActiveKey;
+  }, [mergedActiveKey]);
   const generateAnchorList = (0, import_react.useCallback)(() => {
     if (!auto || !name)
       return;
     const list = [];
-    const elements = document.querySelectorAll(`[data-anchor-group="${name}"]`);
+    const elements = document.querySelectorAll(
+      `[data-anchor-group="${CSS.escape(name)}"]`
+    );
     elements.forEach((element) => {
       const key = element.getAttribute("id") || "";
       const title = element.getAttribute("data-anchor-title") || "";
@@ -138,6 +144,12 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
       generateAnchorList();
     }
   }, [auto, generateAnchorList]);
+  const getTargetOffsetTop = (0, import_react.useCallback)((target) => {
+    const container = containerRef.current;
+    const containerTop = container === window ? 0 : container.getBoundingClientRect().top;
+    const currentScroll = container === window ? window.scrollY : container.scrollTop;
+    return currentScroll + (target.getBoundingClientRect().top - containerTop);
+  }, []);
   const handleScroll = (0, import_react.useCallback)(() => {
     const container = containerRef.current;
     if (!container)
@@ -150,30 +162,29 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
       const item = currentItems2[i];
       const target = document.getElementById(item.key);
       if (target) {
-        const targetTop = target.offsetTop;
+        const targetTop = getTargetOffsetTop(target);
         if (scrollTop + offsetTop >= targetTop) {
-          setMergedActiveKey(item.key);
-          onChange == null ? void 0 : onChange(item.key);
+          if (activeKeyRef.current !== item.key) {
+            setMergedActiveKey(item.key);
+            onChange == null ? void 0 : onChange(item.key);
+          }
           break;
         }
       }
     }
-  }, [auto, anchorList, items, offsetTop, onChange]);
+  }, [auto, anchorList, items, offsetTop, onChange, getTargetOffsetTop]);
   (0, import_react.useEffect)(() => {
-    const container = getContainer ? getContainer() : window;
-    containerRef.current = container;
-    if (container && typeof activeKey === "undefined") {
-      const debouncedScroll = (0, import_debounce.default)(handleScroll, 100);
-      container.addEventListener("scroll", debouncedScroll);
-      handleScroll();
-      return () => {
-        container.removeEventListener(
-          "scroll",
-          debouncedScroll
-        );
-      };
-    }
-  }, [getContainer, handleScroll, activeKey]);
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const debouncedScroll = (0, import_debounce.default)(handleScroll, 100);
+    container.addEventListener("scroll", debouncedScroll);
+    handleScroll();
+    return () => {
+      container.removeEventListener("scroll", debouncedScroll);
+      debouncedScroll.cancel();
+    };
+  }, [getContainer, handleScroll]);
   const scrollToAnchor = (0, import_react.useCallback)(
     (key) => {
       const target = document.getElementById(key);
@@ -182,7 +193,7 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
       const container = containerRef.current;
       if (!container)
         return;
-      const targetTop = target.offsetTop - offsetTop;
+      const targetTop = getTargetOffsetTop(target) - offsetTop;
       if (container === window) {
         window.scrollTo({ top: targetTop, behavior: "smooth" });
       } else {
@@ -192,8 +203,11 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
         });
       }
     },
-    [offsetTop]
+    [offsetTop, getTargetOffsetTop]
   );
+  (0, import_react.useLayoutEffect)(() => {
+    containerRef.current = getContainer ? getContainer() : window;
+  }, [getContainer]);
   (0, import_react.useLayoutEffect)(() => {
     if (defaultActiveKey) {
       scrollToAnchor(defaultActiveKey);
@@ -220,7 +234,9 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
   const contextValue = {
     prefixCls,
     activeKey: mergedActiveKey,
-    onClick: handleItemClick
+    onClick: handleItemClick,
+    classNames,
+    styles
   };
   const renderNavArrow = () => {
     if (!affix || direction !== "vertical")

package/dist/cjs/Anchor/demo/auto.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * `auto` mode: the anchor list is generated from the DOM. Decorate each target
+ * section with the following attributes:
+ *   - data-anchor-group="<name>"  must match the Anchor's `name` prop
+ *   - id="<key>"                  used as the anchor key and scroll target
+ *   - data-anchor-title="<title>"  the nav label (required; a section without it is skipped)
+ *   - data-anchor-status="success | error | warning"  optional status badge color
+ */
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/cjs/Anchor/demo/auto.js

@@ -0,0 +1,85 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Anchor/demo/auto.tsx
+var auto_exports = {};
+__export(auto_exports, {
+  default: () => auto_default
+});
+module.exports = __toCommonJS(auto_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var auto_default = () => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      id: "auto-container",
+      style: { display: "flex", height: 300, overflow: "auto" }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_yee_c.Anchor,
+      {
+        auto: true,
+        name: "article",
+        affix: false,
+        defaultActiveKey: "auto-intro",
+        getContainer: () => document.getElementById("auto-container")
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, padding: 20 } }, /* @__PURE__ */ import_react.default.createElement(
+      "section",
+      {
+        id: "auto-intro",
+        "data-anchor-group": "article",
+        "data-anchor-title": "Introduction",
+        style: { height: 300, background: "#f0f0f0", marginBottom: 20 }
+      },
+      "Introduction"
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "section",
+      {
+        id: "auto-usage",
+        "data-anchor-group": "article",
+        "data-anchor-title": "Usage",
+        "data-anchor-status": "success",
+        style: { height: 300, background: "#e0e0e0", marginBottom: 20 }
+      },
+      "Usage"
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "section",
+      {
+        id: "auto-caveats",
+        "data-anchor-group": "article",
+        "data-anchor-title": "Caveats",
+        "data-anchor-status": "warning",
+        style: { height: 300, background: "#d0d0d0" }
+      },
+      "Caveats"
+    ))
+  );
+};

package/dist/cjs/Anchor/demo/basic.js

@@ -53,7 +53,13 @@ var basic_default = () => {
     "div",
     {
       id: "basic-container",
-      style: { display: "flex", height: "100vh", overflow: "auto" }
+      style: {
+        position: "relative",
+        display: "flex",
+        height: "100vh",
+        overflow: "auto",
+        transform: "scale(1)"
+      }
     },
     /* @__PURE__ */ import_react.default.createElement(
       import_yee_c.Anchor,

package/dist/cjs/Anchor/demo/controlled.js

@@ -36,42 +36,54 @@ var import_yee_c = require("../..");
 var import_react = __toESM(require("react"));
 var controlled_default = () => {
   const [activeKey, setActiveKey] = (0, import_react.useState)("part1");
+  const containerRef = (0, import_react.useRef)(null);
   const onChange = (key) => {
     console.log("Anchor changed to:", key);
     setActiveKey(key);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "200px" } }, /* @__PURE__ */ import_react.default.createElement(
-    import_yee_c.Anchor,
-    {
-      items: [
-        { key: "part1", title: "Part 1" },
-        { key: "part2", title: "Part 2" },
-        { key: "part3", title: "Part 3" }
-      ],
-      activeKey,
-      onChange
-    }
-  )), /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, padding: "20px" } }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      id: "part1",
-      style: {
-        height: "300px",
-        backgroundColor: "#f0f0f0",
-        marginBottom: "20px"
-      }
+      style: { display: "flex", height: "200px", overflow: "auto" },
+      ref: containerRef
     },
-    "Part 1"
-  ), /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      id: "part2",
-      style: {
-        height: "300px",
-        backgroundColor: "#e0e0e0",
-        marginBottom: "20px"
+    /* @__PURE__ */ import_react.default.createElement(
+      import_yee_c.Anchor,
+      {
+        items: [
+          { key: "part1", title: "Part 1" },
+          { key: "part2", title: "Part 2" },
+          { key: "part3", title: "Part 3" }
+        ],
+        direction: "vertical",
+        affix: false,
+        activeKey,
+        onChange,
+        getContainer: () => containerRef.current
       }
-    },
-    "Part 2"
-  ), /* @__PURE__ */ import_react.default.createElement("div", { id: "part3", style: { height: "300px", backgroundColor: "#d0d0d0" } }, "Part 3")));
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, padding: "20px" } }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        id: "part1",
+        style: {
+          height: "300px",
+          backgroundColor: "#f0f0f0",
+          marginBottom: "20px"
+        }
+      },
+      "Part 1"
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        id: "part2",
+        style: {
+          height: "300px",
+          backgroundColor: "#e0e0e0",
+          marginBottom: "20px"
+        }
+      },
+      "Part 2"
+    ), /* @__PURE__ */ import_react.default.createElement("div", { id: "part3", style: { height: "300px", backgroundColor: "#d0d0d0" } }, "Part 3"))
+  );
 };

package/dist/cjs/Anchor/interface.d.ts

@@ -119,4 +119,6 @@ export interface AnchorContextType {
     prefixCls: string;
     activeKey?: string;
     onClick?: (key: string) => void;
+    classNames?: Partial<Record<AnchorSemanticDOM, string>>;
+    styles?: Partial<Record<AnchorSemanticDOM, React.CSSProperties>>;
 }

package/dist/cjs/Anchor/style/index.less

@@ -53,7 +53,7 @@
           width: var(--yee-anchor-static-item-active-width);
           height: var(--yee-anchor-static-item-active-height);
           border: none;
-          border-radius: 0;
+          border-radius: var(--yee-anchor-static-item-active-width);
           background-color: var(--yee-anchor-item-active-font-color);
         }
       }
@@ -165,7 +165,7 @@
 
   &-item {
     position: relative;
-    padding: var(--yee-anchor-item-padding);
+    margin: var(--yee-anchor-item-padding);
     white-space: nowrap;
     color: var(--yee-anchor-item-font-color);
     cursor: pointer;

package/dist/cjs/Button/button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { ButtonProps } from './interface';
 import './style/index.less';
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default Button;

package/dist/cjs/Checkbox/checkbox-group.js

@@ -78,6 +78,7 @@ var CheckboxGroup = (baseprops) => {
     options,
     buttonStyle,
     disabled,
+    layout = "horizontal",
     onChange
   } = props;
   const [mergedValue, setMergedValue] = (0, import_useMergedState.default)([], {
@@ -86,6 +87,7 @@ var CheckboxGroup = (baseprops) => {
   });
   const cls = (0, import_clsx.default)(
     prefixCls,
+    [`${prefixCls}-${layout}`],
     {
       [`${prefixCls}-${buttonStyle}`]: buttonStyle,
       [`${prefixCls}-disabled`]: disabled
@@ -110,7 +112,8 @@ var CheckboxGroup = (baseprops) => {
       }, option), {
         checked: mergedValue.includes(option.value),
         key: option.value || index
-      })
+      }),
+      option.label
     ))
   ));
 };

package/dist/cjs/Checkbox/demo/group.js

@@ -51,6 +51,7 @@ var group_default = () => {
     {
       value,
       onChange,
+      layout: "vertical",
       options: [
         { value: "A", label: "Option A" },
         { value: "B", label: "Option B" },

package/dist/cjs/Checkbox/interface.d.ts

@@ -93,6 +93,11 @@ export interface CheckboxGroupProps {
      * Options
      */
     options?: Array<CheckboxOption>;
+    /**
+     * group layout
+     * @default horizontal
+     */
+    layout?: 'horizontal' | 'vertical';
     /**
      * Callback when value changes
      */

package/dist/cjs/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/dist/cjs/Dropdown/demo/placement.js

@@ -42,7 +42,8 @@ var placement_default = () => {
         { key: "1", label: "Option 1" },
         { key: "2", label: "Option 2" },
         { key: "3", label: "Option 3" }
-      ]
+      ],
+      keyboard: true
     }
   );
   return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { wrap: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "bottomLeft" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Bottom Left")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "bottom" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Bottom Center")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "bottomRight" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Bottom Right")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "topLeft" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Top Left")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "top" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Top Center")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Dropdown, { popup: menu, placement: "topRight" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, null, "Top Right")));

package/dist/cjs/Dropdown/dropdown.js

@@ -80,6 +80,7 @@ var Dropdown = (baseprops) => {
     menu,
     open,
     defaultOpen,
+    arrow = { className: `${prefixCls}-arrow` },
     onOpenChange
   } = _a, rest = __objRest(_a, [
     "children",
@@ -89,6 +90,7 @@ var Dropdown = (baseprops) => {
     "menu",
     "open",
     "defaultOpen",
+    "arrow",
     "onOpenChange"
   ]);
   const [mergedOpen, setMergedOpen] = (0, import_useMergedState.default)(false, {
@@ -115,6 +117,7 @@ var Dropdown = (baseprops) => {
   return /* @__PURE__ */ import_react.default.createElement(
     import_Trigger.default,
     __spreadProps(__spreadValues({}, rest), {
+      arrow,
       popup: renderPopup(),
       placement,
       popupClassName: `${prefixCls}-popup`,

package/dist/cjs/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/dist/cjs/Form/Field.js

@@ -21,6 +21,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -50,8 +62,10 @@ __export(Field_exports, {
 });
 module.exports = __toCommonJS(Field_exports);
 var import_clsx = __toESM(require("clsx"));
+var import_lucide_react = require("lucide-react");
 var import_react = require("motion/react");
 var import_react2 = __toESM(require("react"));
+var import_Tooltip = __toESM(require("../Tooltip"));
 var import_FieldContext = __toESM(require("./FieldContext"));
 var import_FormContext = __toESM(require("./FormContext"));
 var import_List = require("./List");
@@ -71,9 +85,11 @@ var Field = (props) => {
     name,
     rules,
     label,
+    tooltip,
     required,
     disabled,
     valuePropName = "value",
+    layout = "vertical",
     formatter
   } = props;
   const {
@@ -110,6 +126,18 @@ var Field = (props) => {
     return Array.isArray(rules) && rules.find((rule) => rule.required) || required;
   };
   const validate = getFieldValidate == null ? void 0 : getFieldValidate(normalizedName);
+  const tooltipConfig = (0, import_react2.useMemo)(() => {
+    if (tooltip === void 0 || tooltip === null || tooltip === false)
+      return null;
+    if (typeof tooltip === "object" && !import_react2.default.isValidElement(tooltip) && "title" in tooltip) {
+      const _a = tooltip, { icon } = _a, rest = __objRest(_a, ["icon"]);
+      return { icon: icon != null ? icon : /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.HelpCircle, { size: 14 }), tooltipProps: rest };
+    }
+    return {
+      icon: /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.HelpCircle, { size: 14 }),
+      tooltipProps: { title: tooltip }
+    };
+  }, [tooltip]);
   const getControlled = (children2) => {
     var _a, _b, _c;
     const props2 = children2.props;
@@ -150,11 +178,11 @@ var Field = (props) => {
   return /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
-      className: (0, import_clsx.default)(`${prefixCls}-item`, {
+      className: (0, import_clsx.default)(`${prefixCls}-item`, `${prefixCls}-item-${layout}`, {
         [`${prefixCls}-item-${validate == null ? void 0 : validate.status}`]: validate && validate.status
       })
     },
-    /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-item-row`) }, label ? /* @__PURE__ */ import_react2.default.createElement(
+    /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-item-row`) }, label || tooltipConfig ? /* @__PURE__ */ import_react2.default.createElement(
       "label",
       {
         htmlFor: normalizedName,
@@ -162,7 +190,9 @@ var Field = (props) => {
           [`${prefixCls}-item-required`]: isRequired()
         })
       },
-      label
+      label,
+      isRequired() ? /* @__PURE__ */ import_react2.default.createElement("span", { className: `${prefixCls}-item-required-mark` }, "*") : null,
+      tooltipConfig ? /* @__PURE__ */ import_react2.default.createElement(import_Tooltip.default, __spreadValues({}, tooltipConfig.tooltipProps), /* @__PURE__ */ import_react2.default.createElement("span", { className: `${prefixCls}-item-tooltip-icon` }, tooltipConfig.icon)) : null
     ) : null, /* @__PURE__ */ import_react2.default.createElement("div", { className: `${prefixCls}-item-control` }, import_react2.default.isValidElement(children) ? import_react2.default.cloneElement(
       children,
       getControlled(children)

package/dist/cjs/Form/Group.js

@@ -85,7 +85,7 @@ var Group = (props) => {
               name: childNames,
               status: "error",
               value: values,
-              message: rule.message
+              message: rule.message || ""
             });
           }
         }
@@ -143,7 +143,8 @@ var Group = (props) => {
           [`${itemCls}-required`]: required
         })
       },
-      label
+      label,
+      required ? /* @__PURE__ */ import_react2.default.createElement("span", { className: `${itemCls}-required-mark` }, "*") : null
     ), /* @__PURE__ */ import_react2.default.createElement("div", { className: `${itemCls}-control` }, content)),
     /* @__PURE__ */ import_react2.default.createElement(import_react.AnimatePresence, null, hasError && /* @__PURE__ */ import_react2.default.createElement(
       import_react.motion.small,