@rainbow-oh/yee-c 0.6.0 → 0.6.2

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

@@ -102,7 +102,15 @@ var AnchorItem = (props) => {
   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)));
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderItem, children);
+  const node = /* @__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: (0, import_clsx.default)(`${prefixCls}-item-label`, classNames == null ? void 0 : classNames.label),
+      style: styles == null ? void 0 : styles.label,
+      title: String(title)
+    },
+    title
+  )));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, node, children);
 };
 var anchor_item_default = AnchorItem;

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

@@ -44,7 +44,7 @@ export interface AnchorItemProps {
      */
     children?: React.ReactNode;
 }
-export type AnchorSemanticDOM = 'item' | 'active' | 'content';
+export type AnchorSemanticDOM = 'item' | 'active' | 'content' | 'label';
 export interface AnchorProps extends DataAttributeProps {
     /**
      * Custom class name prefix

package/dist/cjs/Dialog/dialog.js

@@ -242,8 +242,22 @@ var Dialog = (baseprops) => {
             onClick: onCancel
           }
         ) : null,
-        title ? /* @__PURE__ */ import_react2.default.createElement("div", { className: `${prefixCls}-header` }, /* @__PURE__ */ import_react2.default.createElement("div", { className: `${prefixCls}-title` }, title)) : null,
-        /* @__PURE__ */ import_react2.default.createElement("div", { className: `${prefixCls}-body` }, children),
+        title ? /* @__PURE__ */ import_react2.default.createElement(
+          "div",
+          {
+            className: (0, import_clsx.default)(`${prefixCls}-header`, classNames == null ? void 0 : classNames.header),
+            style: styles == null ? void 0 : styles.header
+          },
+          /* @__PURE__ */ import_react2.default.createElement("div", { className: `${prefixCls}-title` }, title)
+        ) : null,
+        /* @__PURE__ */ import_react2.default.createElement(
+          "div",
+          {
+            className: (0, import_clsx.default)(`${prefixCls}-body`, classNames == null ? void 0 : classNames.body),
+            style: styles == null ? void 0 : styles.body
+          },
+          children
+        ),
         renderFooter()
       )
     )

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ButtonType } from '../Button';
 import type { DataAttributeProps } from '../utils/types';
-export type SemanticDOM = 'content' | 'footer' | 'mask';
+export type SemanticDOM = 'content' | 'header' | 'body' | 'footer' | 'mask';
 export interface DialogProps extends DataAttributeProps {
     /**
      * Custom class name prefix

package/dist/cjs/Form/demo/layout.js

@@ -36,26 +36,16 @@ var import_yee_c = require("../..");
 var import_react = __toESM(require("react"));
 var layout_default = () => {
   const [form] = import_yee_c.Form.useForm();
+  const [layout, setLayout] = (0, import_react.useState)("vertical");
   return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
     import_yee_c.Radio.Group,
     {
-      defaultValue: "vertical",
-      onChange: (value) => {
-        form.setFieldsValue({ layout: value });
-      },
+      value: layout,
+      onChange: (value) => setLayout(value),
       options: [
         { value: "vertical", label: "Vertical" },
         { value: "horizontal", label: "Horizontal" }
       ]
     }
-  ), /* @__PURE__ */ import_react.default.createElement("br", null), /* @__PURE__ */ import_react.default.createElement("br", null), /* @__PURE__ */ import_react.default.createElement(
-    import_yee_c.Form,
-    {
-      form,
-      initialValues: { layout: "vertical" },
-      layout: "vertical"
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid, { cols: 1 }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "name", label: "Name", required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your name" })), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "email", label: "Email", required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your email" })), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "phone", label: "Phone" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your phone" }))),
-    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit" }, "Submit"))
-  ));
+  ), /* @__PURE__ */ import_react.default.createElement("br", null), /* @__PURE__ */ import_react.default.createElement("br", null), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, initialValues: {}, layout }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid, { cols: 2 }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "name", label: "Name", required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your name" })), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "email", label: "Email", required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your email" })), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "phone", label: "Phone" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your phone" }))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit" }, "Submit"))));
 };

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

@@ -1,16 +1,40 @@
 @pls: .yee-form;
 
+// Horizontal form-item layout: label pinned left at a fixed width (right-
+// aligned), control fills the remaining space. Shared by Form-level layout
+// (ancestor .yee-form-horizontal cascades onto every item, including
+// Field.Group) and Field-level layout (the item carries .yee-form-item-
+// horizontal itself). Uses descendant selectors (not &) so the mixin expands
+// correctly under either anchor.
+.horizontal-layout() {
+  @{pls}-item-row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--yee-form-item-horizontal-label-gap, 12px);
+  }
+
+  @{pls}-item-label {
+    width: var(--yee-form-item-horizontal-label-width, 120px);
+    flex-shrink: 0;
+    margin-bottom: 0;
+    justify-content: flex-end;
+  }
+
+  @{pls}-item-control {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
 @{pls} {
+  // Form-level horizontal: cascades onto every descendant item.
   &-horizontal {
-    @{pls}-item {
-      &-row {
-        display: flex;
-      }
+    .horizontal-layout();
+  }
 
-      &-label {
-        margin-bottom: 0;
-      }
-    }
+  // Field-level horizontal: a single item opts in via layout="horizontal".
+  &-item-horizontal {
+    .horizontal-layout();
   }
 
   &-item {

package/dist/cjs/Grid/item.js

@@ -60,6 +60,7 @@ __export(item_exports, {
 module.exports = __toCommonJS(item_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_omit = __toESM(require("../utils/omit"));
 var Item = (props) => {
   const _a = props, {
     prefixCls = "yee-grid",
@@ -79,7 +80,7 @@ var Item = (props) => {
     __spreadValues({
       className: (0, import_clsx.default)(`${prefixCls}-item`, className),
       style: __spreadValues(__spreadValues({}, spanStyle), style)
-    }, rest),
+    }, (0, import_omit.default)(rest, ["colspan"])),
     children
   );
 };

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

@@ -11,6 +11,7 @@
   line-height: var(--yee-input-line-height);
   border: var(--yee-input-border-width) solid var(--yee-input-border-color);
   border-radius: var(--yee-input-border-radius, 4px);
+  font-family: var(--yee-font-family);
 
   &:not(@{pls}-disabled):hover {
     border-color: var(--yee-input-hover-border-color);
@@ -46,6 +47,7 @@
 
   &-inner {
     width: 100%;
+    font-family: var(--yee-font-family);
     line-height: var(--yee-input-line-height);
     background-color: inherit;
     border: none;

package/dist/cjs/Tabs/demo/type.js

@@ -52,5 +52,27 @@ var type_default = () => {
       children: "Content of Tab Pane 3"
     }
   ];
-  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tabs, { defaultActiveKey: "1", items, type: "card" });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Box,
+    {
+      style: {
+        padding: 16,
+        backgroundColor: "#efefef"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_yee_c.Tabs,
+      {
+        defaultActiveKey: "1",
+        items,
+        type: "card",
+        styles: {
+          content: {
+            padding: 24,
+            height: 120
+          }
+        }
+      }
+    )
+  );
 };

package/dist/cjs/Tabs/hooks/useActiveBar.d.ts

@@ -4,7 +4,8 @@ interface UseActiveBarOptions {
     activeKey: string | number;
     activetab: React.RefObject<HTMLElement | null>;
     activebar: React.RefObject<HTMLDivElement | null>;
+    listEle: React.RefObject<HTMLDivElement | null>;
     enabled: boolean;
 }
-export declare function useActiveBar({ direction, activeKey, activetab, activebar, enabled, }: UseActiveBarOptions): () => void;
+export declare function useActiveBar({ direction, activeKey, activetab, activebar, listEle, enabled, }: UseActiveBarOptions): () => void;
 export {};

package/dist/cjs/Tabs/hooks/useActiveBar.js

@@ -28,22 +28,26 @@ function useActiveBar({
   activeKey,
   activetab,
   activebar,
+  listEle,
   enabled
 }) {
   const rafIdRef = (0, import_react.useRef)(0);
   const moveActiveBar = (0, import_react.useCallback)(() => {
     const bar = activebar.current;
     const tab = activetab.current;
-    if (!bar || !tab || !enabled)
+    const nav = listEle.current;
+    if (!bar || !tab || !enabled || !nav)
       return;
     const rect = tab.getBoundingClientRect();
+    const listPaddingLeft = parseFloat(getComputedStyle(nav).paddingLeft) || 0;
+    const listPaddingTop = parseFloat(getComputedStyle(nav).paddingTop) || 0;
     const isHorizontal = direction === "horizontal";
     if (isHorizontal) {
       bar.style.width = `${rect.width}px`;
-      bar.style.transform = `translateX(${tab.offsetLeft}px)`;
+      bar.style.transform = `translateX(${tab.offsetLeft - listPaddingLeft}px)`;
     } else {
       bar.style.height = `${rect.height}px`;
-      bar.style.transform = `translateY(${tab.offsetTop}px)`;
+      bar.style.transform = `translateY(${tab.offsetTop - listPaddingTop}px)`;
     }
   }, [direction, activetab, activebar, enabled]);
   (0, import_react.useEffect)(() => {

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

@@ -51,9 +51,9 @@
   padding: var(--yee-tabs-vertical-padding);
   overflow: hidden;
 
-  @{pls}-nav-wrap {
+  @{pls}-nav-track {
     height: 100%;
-    padding: var(--yee-tabs-vertical-nav-wrap-padding);
+    padding: var(--yee-tabs-vertical-nav-track-padding);
     overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
@@ -109,9 +109,9 @@
   overflow: hidden;
   transition: transform 3s ease-in-out;
 
-  &:not(@{pls}-card) {
-    background-color: var(--yee-tabs-bg-color);
-  }
+  // &:not(@{pls}-card) {
+  //   background-color: var(--yee-tabs-bg-color);
+  // }
 
   &@{pls}-nav-wrapper-left,
   &@{pls}-nav-wrapper-right {
@@ -141,7 +141,7 @@
   }
 
   &.center {
-    @{pls}-nav-wrap {
+    @{pls}-nav-track {
       justify-content: center;
     }
   }
@@ -261,7 +261,7 @@
     display: none;
   }
 
-  @{pls}-nav-wrap {
+  @{pls}-nav-track {
     padding: 0;
   }
 
@@ -276,6 +276,16 @@
     background-color: var(--yee-tabs-card-bg-color);
   }
 
+  &@{pls}-top {
+    @{pls}-nav-wrapper {
+      border-bottom: none;
+    }
+  }
+
+  @{pls}-container {
+    background-color: var(--yee-tabs-conatiner-bg-color);
+  }
+
   &@{pls}-border-card {
     > @{pls}-nav-wrapper {
       bottom: var(--yee-tabs-card-border-bottom);
@@ -313,7 +323,7 @@
 
 @{pls}-editable-card,
 @{pls}-card {
-  @{pls}-nav-wrap {
+  @{pls}-nav-track {
     padding: 0;
   }
 
@@ -344,16 +354,16 @@
   }
 }
 
-@{pls}-nav-wrap {
+@{pls}-nav-track {
   position: relative;
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
 
-  &.is-scroll {
-    width: var(--yee-tabs-nav-wrap-scroll-width);
-    margin-left: var(--yee-tabs-nav-wrap-scroll-margin-left);
-  }
+  // &.is-scroll {
+  //   width: var(--yee-tabs-nav-track-scroll-width);
+  //   margin-left: var(--yee-tabs-nav-track-scroll-margin-left);
+  // }
 
   &::-webkit-scrollbar {
     display: none;
@@ -513,7 +523,7 @@
     }
   }
 
-  @{pls}-nav-wrap {
+  @{pls}-nav-track {
     padding: 0;
   }
 }

package/dist/cjs/Tabs/tab-header/index.js

@@ -95,6 +95,7 @@ var TabHeader = (props) => {
     activeKey,
     activetab,
     activebar,
+    listEle: navList,
     enabled: !type
     // Only show active bar for non-card types
   });
@@ -147,7 +148,7 @@ var TabHeader = (props) => {
   return /* @__PURE__ */ import_react.default.createElement("div", { className: cls, style: styles == null ? void 0 : styles.header }, renderPrefixExtra(), /* @__PURE__ */ import_react.default.createElement(TabHeaderCtx.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: (0, import_clsx.default)(`${prefixCls}-nav-wrap`, classNames == null ? void 0 : classNames.track),
+      className: (0, import_clsx.default)(`${prefixCls}-nav-track`, classNames == null ? void 0 : classNames.track),
       style: styles == null ? void 0 : styles.track,
       ref: navContainer
     },

package/dist/cjs/Tabs/tab-header/tab-header-title.js

@@ -237,6 +237,7 @@ var TabHeaderTitle = (props) => {
       {
         type: "text",
         size: "small",
+        className: `${prefixCls}-close`,
         icon: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 14 }),
         onClick: handleEdit,
         "aria-label": `Close ${label}`

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

@@ -67,6 +67,7 @@
   font-size: var(--yee-textarea-font-size);
   line-height: var(--yee-textarea-line-height);
   border-radius: var(--yee-textarea-border-radius, 4px);
+  font-family: var(--yee-font-family);
   width: 100%;
 
   &-borderless {

package/dist/cjs/style/color.css

@@ -903,6 +903,7 @@
   --yee-tabs-card-border-bg-color: var(--yee-color-bg-head);
   --yee-tabs-card-active-bg-color: var(--yee-color-bg-container);
   --yee-tabs-card-bg-color: transparent;
+  --yee-tabs-conatiner-bg-color: var(--yee-color-bg-container);
   --yee-tabs-header-custom-btn-text-color: var(--yee-text-color);
   --yee-tabs-header-custom-btn-text-hover-color: var(--yee-primary-color);
   --yee-tabs-header-custom-btn-text-active-color: var(--yee-primary-color);

package/dist/cjs/style/mobile.css

@@ -202,6 +202,11 @@
     flex-direction: column;
   }
 
+  /* Field-level horizontal collapses too on narrow screens */
+  .yee-form-item-horizontal .yee-form-item-row {
+    flex-direction: column;
+  }
+
   /* ── Table: ensure horizontal scroll ── */
   .yee-table-wrapper {
     -webkit-overflow-scrolling: touch;

package/dist/cjs/style/size.css

@@ -1,4 +1,6 @@
 :root {
+  --yee-font-family: inherit;
+
   /* ── z-index 基础层级 ── */
   --yee-z-index-fixed: 990; /* L1 吸顶 */
   --yee-z-index-mask: 1000; /* L2 遮罩背景 */
@@ -269,6 +271,8 @@
   --yee-form-item-label-line-height: 24px;
   --yee-form-item-required-margin-inline-start: 4px;
   --yee-form-item-additional-bottom: 2px;
+  --yee-form-item-horizontal-label-width: 120px;
+  --yee-form-item-horizontal-label-gap: 12px;
 
   /* --Grid-- */
   --yee-grid-column-min-width: 50px;
@@ -684,7 +688,7 @@
   --yee-tabs-active-bar-height: 2px;
   --yee-tabs-active-bar-width: 2px;
   --yee-tabs-vertical-padding: 8px 0;
-  --yee-tabs-vertical-nav-wrap-padding: 8px 0;
+  --yee-tabs-vertical-nav-track-padding: 8px 0;
   --yee-tabs-vertical-container-padding: 0 20px;
   --yee-tabs-vertical-active-bar-height: 32px;
   --yee-tabs-nav-wrapper-height: 46px;
@@ -721,8 +725,8 @@
   --yee-tabs-card-tab-border-width: 1px;
   --yee-tabs-card-tab-border-radius: 4px;
   --yee-tabs-card-tab-not-active-height: 39px;
-  --yee-tabs-nav-wrap-scroll-width: calc(100% - 64px);
-  --yee-tabs-nav-wrap-scroll-margin-left: 32px;
+  --yee-tabs-nav-track-scroll-width: calc(100% - 64px);
+  --yee-tabs-nav-track-scroll-margin-left: 32px;
   --yee-tabs-nav-wrapper-shadow-width: 8px;
   --yee-tabs-nav-wrapper-shadow-inset: 4px;
   --yee-tabs-nav-wrapper-top-z-index: var(--yee-z-index-fixed);

package/dist/cjs/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-09T08:24:26.410Z
+ * Generated on 2026-07-14T03:59:52.475Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/cjs/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-07-09T08:24:26.410Z
+ * Generated on 2026-07-14T03:59:52.475Z
  */
 
 /* ========== color.css ========== */
@@ -910,6 +910,7 @@
   --yee-tabs-card-border-bg-color: var(--yee-color-bg-head);
   --yee-tabs-card-active-bg-color: var(--yee-color-bg-container);
   --yee-tabs-card-bg-color: transparent;
+  --yee-tabs-conatiner-bg-color: var(--yee-color-bg-container);
   --yee-tabs-header-custom-btn-text-color: var(--yee-text-color);
   --yee-tabs-header-custom-btn-text-hover-color: var(--yee-primary-color);
   --yee-tabs-header-custom-btn-text-active-color: var(--yee-primary-color);
@@ -1117,6 +1118,8 @@
 
 /* ========== size.css ========== */
 :root {
+  --yee-font-family: inherit;
+
   /* ── z-index 基础层级 ── */
   --yee-z-index-fixed: 990; /* L1 吸顶 */
   --yee-z-index-mask: 1000; /* L2 遮罩背景 */
@@ -1387,6 +1390,8 @@
   --yee-form-item-label-line-height: 24px;
   --yee-form-item-required-margin-inline-start: 4px;
   --yee-form-item-additional-bottom: 2px;
+  --yee-form-item-horizontal-label-width: 120px;
+  --yee-form-item-horizontal-label-gap: 12px;
 
   /* --Grid-- */
   --yee-grid-column-min-width: 50px;
@@ -1802,7 +1807,7 @@
   --yee-tabs-active-bar-height: 2px;
   --yee-tabs-active-bar-width: 2px;
   --yee-tabs-vertical-padding: 8px 0;
-  --yee-tabs-vertical-nav-wrap-padding: 8px 0;
+  --yee-tabs-vertical-nav-track-padding: 8px 0;
   --yee-tabs-vertical-container-padding: 0 20px;
   --yee-tabs-vertical-active-bar-height: 32px;
   --yee-tabs-nav-wrapper-height: 46px;
@@ -1839,8 +1844,8 @@
   --yee-tabs-card-tab-border-width: 1px;
   --yee-tabs-card-tab-border-radius: 4px;
   --yee-tabs-card-tab-not-active-height: 39px;
-  --yee-tabs-nav-wrap-scroll-width: calc(100% - 64px);
-  --yee-tabs-nav-wrap-scroll-margin-left: 32px;
+  --yee-tabs-nav-track-scroll-width: calc(100% - 64px);
+  --yee-tabs-nav-track-scroll-margin-left: 32px;
   --yee-tabs-nav-wrapper-shadow-width: 8px;
   --yee-tabs-nav-wrapper-shadow-inset: 4px;
   --yee-tabs-nav-wrapper-top-z-index: var(--yee-z-index-fixed);

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.6.0";
+export declare const version = "0.6.2";

package/dist/cjs/version.js

@@ -22,7 +22,7 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-var version = "0.6.0";
+var version = "0.6.2";
 if (typeof window !== "undefined") {
   window.__yee_c_version__ = version;
 }

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

@@ -39,16 +39,17 @@ var AnchorItem = function AnchorItem(props) {
   var itemStyle = _objectSpread(_objectSpread(_objectSpread({}, style), isActive ? styles === null || styles === void 0 ? void 0 : styles.active : undefined), {}, {
     paddingLeft: "".concat(level * INDENT_WIDTH, "px")
   });
-  var renderItem = /*#__PURE__*/React.createElement("li", _extends({
+  var node = /*#__PURE__*/React.createElement("li", _extends({
     className: cls,
     style: itemStyle
   }, rest), /*#__PURE__*/React.createElement("a", {
     href: "#".concat(targetKey),
     onClick: handleClick
   }, /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-item-label"),
+    className: clsx("".concat(prefixCls, "-item-label"), classNames === null || classNames === void 0 ? void 0 : classNames.label),
+    style: styles === null || styles === void 0 ? void 0 : styles.label,
     title: String(title)
   }, title)));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderItem, children);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, node, children);
 };
 export default AnchorItem;

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

@@ -44,7 +44,7 @@ export interface AnchorItemProps {
      */
     children?: React.ReactNode;
 }
-export type AnchorSemanticDOM = 'item' | 'active' | 'content';
+export type AnchorSemanticDOM = 'item' | 'active' | 'content' | 'label';
 export interface AnchorProps extends DataAttributeProps {
     /**
      * Custom class name prefix

package/dist/esm/Dialog/dialog.js

@@ -188,11 +188,13 @@ var Dialog = function Dialog(baseprops) {
     "aria-label": "close",
     onClick: onCancel
   }) : null, title ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-header")
+    className: clsx("".concat(prefixCls, "-header"), classNames === null || classNames === void 0 ? void 0 : classNames.header),
+    style: styles === null || styles === void 0 ? void 0 : styles.header
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-title")
   }, title)) : null, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-body")
+    className: clsx("".concat(prefixCls, "-body"), classNames === null || classNames === void 0 ? void 0 : classNames.body),
+    style: styles === null || styles === void 0 ? void 0 : styles.body
   }, children), renderFooter())));
   return /*#__PURE__*/React.createElement(Portal, {
     open: open,

package/dist/esm/Dialog/interface.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ButtonType } from '../Button';
 import type { DataAttributeProps } from '../utils/types';
-export type SemanticDOM = 'content' | 'footer' | 'mask';
+export type SemanticDOM = 'content' | 'header' | 'body' | 'footer' | 'mask';
 export interface DialogProps extends DataAttributeProps {
     /**
      * Custom class name prefix

package/dist/esm/Form/demo/layout.js

@@ -5,17 +5,19 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Button, Form, Grid, Input, Radio, Space } from "../..";
-import React from 'react';
+import React, { useState } from 'react';
 export default (function () {
   var _Form$useForm = Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
+  var _useState = useState('vertical'),
+    _useState2 = _slicedToArray(_useState, 2),
+    layout = _useState2[0],
+    setLayout = _useState2[1];
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Radio.Group, {
-    defaultValue: "vertical",
+    value: layout,
     onChange: function onChange(value) {
-      form.setFieldsValue({
-        layout: value
-      });
+      return setLayout(value);
     },
     options: [{
       value: 'vertical',
@@ -26,12 +28,10 @@ export default (function () {
     }]
   }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Form, {
     form: form,
-    initialValues: {
-      layout: 'vertical'
-    },
-    layout: "vertical"
+    initialValues: {},
+    layout: layout
   }, /*#__PURE__*/React.createElement(Grid, {
-    cols: 1
+    cols: 2
   }, /*#__PURE__*/React.createElement(Form.Field, {
     name: "name",
     label: "Name",