@rainbow-oh/yee-c 0.6.1 → 0.6.3

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/Select/demo/orphan.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/cjs/Select/demo/orphan.js

@@ -0,0 +1,78 @@
+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/Select/demo/orphan.tsx
+var orphan_exports = {};
+__export(orphan_exports, {
+  default: () => orphan_default
+});
+module.exports = __toCommonJS(orphan_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var options = [
+  { label: "Apple", value: "apple" },
+  { label: "Banana", value: "banana" },
+  { label: "Orange", value: "orange" },
+  { label: "Pineapple", value: "pineapple" }
+];
+var orphanStyle = {
+  color: "#fa8c16",
+  fontStyle: "italic",
+  textDecoration: "underline dotted"
+};
+var orphan_default = () => {
+  const [single, setSingle] = (0, import_react.useState)("mangox");
+  const [multi, setMulti] = (0, import_react.useState)(["apple", "durian", "banana"]);
+  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical", style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 8 } }, "Single — orphan value styled via ", /* @__PURE__ */ import_react.default.createElement("code", null, "orphanStyle")), /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Select,
+    {
+      value: single,
+      onChange: (val) => setSingle(val),
+      options,
+      orphanStyle,
+      style: { width: 300 },
+      placeholder: "Please select"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 8 } }, "Multiple — orphan tag styled via ", /* @__PURE__ */ import_react.default.createElement("code", null, "orphanClassName")), /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Select,
+    {
+      mode: "multiple",
+      value: multi,
+      onChange: (val) => setMulti(val),
+      options,
+      orphanClassName: "demo-orphan-tag",
+      style: { width: 300 },
+      placeholder: "Please select"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("style", null, `
+        .demo-orphan-tag {
+          color: #fa541c;
+          font-style: italic;
+        }
+      `));
+};

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

@@ -87,6 +87,17 @@ export interface SelectProps extends DataAttributeProps, Pick<SelectorProps, 'si
      * Property to backfill into the select box
      */
     optionLabelProp?: 'string' | (() => string);
+    /**
+     * Extra class name applied to the displayed value when it is not found
+     * in `options` (an "orphan" value). An orphan value is shown as the raw
+     * value itself; this lets you style it differently (e.g. to flag stale data).
+     */
+    orphanClassName?: string;
+    /**
+     * Extra inline style applied to the displayed value when it is not found
+     * in `options` (an "orphan" value).
+     */
+    orphanStyle?: React.CSSProperties;
     /**
      * Callback when value changes
      */

package/dist/cjs/Select/select.js

@@ -86,7 +86,9 @@ var Select = (baseprops) => {
     onFilter,
     virtual,
     itemHeight,
-    listHeight
+    listHeight,
+    orphanClassName,
+    orphanStyle
   } = _a, rest = __objRest(_a, [
     "prefixCls",
     "options",
@@ -100,7 +102,9 @@ var Select = (baseprops) => {
     "onFilter",
     "virtual",
     "itemHeight",
-    "listHeight"
+    "listHeight",
+    "orphanClassName",
+    "orphanStyle"
   ]);
   const single = mode !== "multiple" && mode !== "tags" ? true : false;
   const handleState = (value2) => {
@@ -126,6 +130,7 @@ var Select = (baseprops) => {
     (_a2 = virtualApiRef.current) == null ? void 0 : _a2.scrollToIndex(index);
   }, []);
   const getOptions = (keys) => {
+    var _a2;
     if (keys === "" || keys === null) {
       return void 0;
     }
@@ -133,9 +138,15 @@ var Select = (baseprops) => {
       if (keys.length === 0) {
         return [];
       }
-      return options.filter((opt) => keys.includes(opt.value));
+      return keys.map((key) => {
+        const opt = options.find((o) => o.value === key);
+        return opt != null ? opt : { value: key, label: String(key) };
+      });
     }
-    return options.find((opt) => opt.value === keys);
+    return (_a2 = options.find((opt) => opt.value === keys)) != null ? _a2 : {
+      value: keys,
+      label: String(keys)
+    };
   };
   const handleSelect = (key, e) => {
     let keys;
@@ -236,7 +247,9 @@ var Select = (baseprops) => {
         onClear: handleClear,
         onRemove: handleRemove,
         onSearch: handleSearch,
-        onKeyDown
+        onKeyDown,
+        orphanClassName,
+        orphanStyle
       })
     )
   );

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

@@ -78,6 +78,17 @@ export interface PureSelectorProps {
      * Custom text displayed in the input
      */
     optionLabelProp?: string | ((option: TagType) => string);
+    /**
+     * Extra class name applied to the displayed value/tag when its key is not
+     * found in `options` (an "orphan" value). The orphan value is shown as the
+     * raw key itself; this lets you style it differently (e.g. to flag stale data).
+     */
+    orphanClassName?: string;
+    /**
+     * Extra inline style applied to the displayed value/tag when its key is not
+     * found in `options` (an "orphan" value).
+     */
+    orphanStyle?: React.CSSProperties;
     /**
      * Control the open state
      * */

package/dist/cjs/Selector/selector.js

@@ -98,6 +98,8 @@ var Selector = import_react.default.forwardRef(
       disabled,
       options = [],
       selectedKeys,
+      orphanClassName,
+      orphanStyle,
       allowClear = true,
       placeholder,
       closable = true,
@@ -121,6 +123,8 @@ var Selector = import_react.default.forwardRef(
       "disabled",
       "options",
       "selectedKeys",
+      "orphanClassName",
+      "orphanStyle",
       "allowClear",
       "placeholder",
       "closable",
@@ -141,9 +145,24 @@ var Selector = import_react.default.forwardRef(
       value
     });
     const tags = (0, import_react.useMemo)(() => {
-      return Array.isArray(options) ? options.filter((opt) => selectedKeys.includes(opt.value)).map((opt) => __spreadProps(__spreadValues({}, opt), {
-        children: typeof optionLabelProp === "function" ? optionLabelProp(opt) : opt[optionLabelProp]
-      })) : [];
+      if (!Array.isArray(options)) {
+        return [];
+      }
+      return selectedKeys.map((key) => {
+        const opt = options.find((o) => o.value === key);
+        if (opt) {
+          return __spreadProps(__spreadValues({}, opt), {
+            children: typeof optionLabelProp === "function" ? optionLabelProp(opt) : opt[optionLabelProp],
+            _orphan: false
+          });
+        }
+        return {
+          value: key,
+          label: String(key),
+          children: String(key),
+          _orphan: true
+        };
+      });
     }, [options, selectedKeys, optionLabelProp]);
     const handleClick = () => {
       if (inputRef.current && !disabled) {
@@ -210,22 +229,38 @@ var Selector = import_react.default.forwardRef(
     };
     const renderContent = () => {
       if (multi) {
-        return tags.map((item, index) => {
-          const _closable = typeof closable === "function" ? closable(item) : closable;
-          return /* @__PURE__ */ import_react.default.createElement(
-            import_Tag.default,
-            __spreadProps(__spreadValues({}, item), {
-              closable: _closable,
-              onClose: (e) => handleRemove(item, e),
-              key: item.value || index
-            })
-          );
-        });
+        return tags.map(
+          (item, index) => {
+            const _a2 = item, { _orphan } = _a2, tagRest = __objRest(_a2, ["_orphan"]);
+            const _closable = typeof closable === "function" ? closable(item) : closable;
+            return /* @__PURE__ */ import_react.default.createElement(
+              import_Tag.default,
+              __spreadProps(__spreadValues({}, tagRest), {
+                className: _orphan ? orphanClassName : void 0,
+                style: _orphan ? orphanStyle : void 0,
+                closable: _closable,
+                onClose: (e) => handleRemove(item, e),
+                key: item.value || index
+              })
+            );
+          }
+        );
       }
       const key = selectedKeys.length ? selectedKeys[0] : "";
       const opt = Array.isArray(options) ? options.find((opt2) => opt2.value === key) : null;
-      const label = opt ? typeof optionLabelProp === "function" ? optionLabelProp(opt) : opt[optionLabelProp] : null;
-      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderSearch(), label && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-selection-item` }, label));
+      const isOrphan = !opt && key !== "";
+      const label = opt ? typeof optionLabelProp === "function" ? optionLabelProp(opt) : opt[optionLabelProp] : isOrphan ? String(key) : null;
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderSearch(), label && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_clsx.default)(
+            `${prefixCls}-selection-item`,
+            isOrphan && orphanClassName
+          ),
+          style: isOrphan ? orphanStyle : void 0
+        },
+        label
+      ));
     };
     const renderSuffix = () => {
       return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-arrow` }, loading ? /* @__PURE__ */ import_react.default.createElement(import_Spin.default, { size: "small" }) : suffix ? typeof suffix === "function" ? suffix() : suffix : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronDown, { size: 16, strokeWidth: 1.5 }));

package/dist/cjs/Table/tbody/index.js

@@ -68,11 +68,11 @@ var import_lazy_row = __toESM(require("./lazy-row"));
 var import_row = __toESM(require("./row"));
 var TableBody = (props) => {
   var _b, _c, _d;
-  const _a = props, { columns, pageData, lazyLoad } = _a, rest = __objRest(_a, ["columns", "pageData", "lazyLoad"]);
+  const _a = props, { columns, pageData, lazyLoad, noData } = _a, rest = __objRest(_a, ["columns", "pageData", "lazyLoad", "noData"]);
   const { prefixCls, components, rowKey } = import_react.default.useContext(import_table.TableCtx);
   const { locale } = (0, import_locale.useLocale)();
   const { table: tableLocale } = locale;
-  const empty = /* @__PURE__ */ import_react.default.createElement("tbody", { className: `${prefixCls}-tbody` }, /* @__PURE__ */ import_react.default.createElement("tr", { className: `${prefixCls}-no-record` }, /* @__PURE__ */ import_react.default.createElement("td", { colSpan: 999 }, tableLocale.emptyText)));
+  const empty = /* @__PURE__ */ import_react.default.createElement("tbody", { className: `${prefixCls}-tbody` }, /* @__PURE__ */ import_react.default.createElement("tr", { className: `${prefixCls}-no-record` }, /* @__PURE__ */ import_react.default.createElement("td", { colSpan: 999 }, noData != null ? noData : tableLocale.emptyText)));
   const dataLength = pageData.length;
   if (dataLength === 0)
     return empty;

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/Tag/style/index.less

@@ -149,15 +149,6 @@
     line-height: var(--yee-tag-large-height);
   }
 
-  &-close {
-    display: inline-flex;
-    padding: 0;
-    width: 16px;
-    height: 16px;
-    margin-left: var(--yee-tag-close-margin-left);
-    cursor: pointer;
-  }
-
   &-checkable {
     margin: var(--yee-tag-checkable-margin);
     color: var(--yee-tag-item-not-check-color);
@@ -177,4 +168,13 @@
     background-color: var(--yee-tag-item-check-active-bg-color);
     border-color: var(--yee-tag-item-check-active-border-color);
   }
+
+  & &-close {
+    display: inline-flex;
+    padding: 0;
+    width: 16px;
+    height: 16px;
+    margin-left: var(--yee-tag-close-margin-left);
+    cursor: pointer;
+  }
 }

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;