@bifrostui/react 2.0.0-alpha.11 → 2.0.0-alpha.13

package/dist/Tabs/Tab.js

@@ -64,38 +64,51 @@ var import_clsx = __toESM(require("clsx"));
 var import_utils = require("@bifrostui/utils");
 var import_TabsContext = __toESM(require("./TabsContext"));
 var import_Tab2 = require("./Tab.css");
-const prefixCls = "bui-tab";
+const rootClass = "bui-tab";
 const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
     children,
     index,
     disabled = false,
-    onClick,
-    role = "tab",
-    tabIndex,
-    "aria-selected": ariaSelected,
-    "aria-disabled": ariaDisabled
+    onClick
   } = _a, others = __objRest(_a, [
     "className",
     "children",
     "index",
     "disabled",
-    "onClick",
-    "role",
-    "tabIndex",
-    "aria-selected",
-    "aria-disabled"
+    "onClick"
   ]);
-  const tabsContext = import_react.default.useContext(import_TabsContext.default);
-  const { value, triggerChange } = tabsContext;
-  const isActive = index === value;
+  const innerRef = (0, import_react.useRef)(null);
+  const handleRef = (0, import_utils.useForkRef)(ref, innerRef);
+  const isActive = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.value === index
+  );
+  const triggerChange = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.triggerChange
+  );
+  const onRegister = (0, import_utils.useContextSelector)(import_TabsContext.default, (ctx) => ctx.onRegister);
+  const onUnregister = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.onUnregister
+  );
+  (0, import_react.useEffect)(() => {
+    if (index !== void 0 && index !== null) {
+      onRegister == null ? void 0 : onRegister({ value: index, ref: innerRef });
+    }
+    return () => {
+      if (index !== void 0 && index !== null) {
+        onUnregister == null ? void 0 : onUnregister({ value: index });
+      }
+    };
+  }, [onRegister, onUnregister, index]);
   const rootCls = (0, import_clsx.default)(
-    prefixCls,
+    rootClass,
     {
-      [`${prefixCls}-active`]: !import_utils.isMini && isActive,
-      [`${prefixCls}-miniapp-active`]: import_utils.isMini && isActive,
-      [`${prefixCls}-disabled`]: disabled
+      [`${rootClass}-active`]: !import_utils.isMini && isActive,
+      [`${rootClass}-disabled`]: disabled
     },
     className
   );
@@ -103,31 +116,26 @@ const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     if (disabled)
       return;
     e.preventDefault();
-    triggerChange(e, { index });
+    triggerChange == null ? void 0 : triggerChange(e, { index });
     onClick == null ? void 0 : onClick(e, { index });
   };
+  if (process.env.NODE_ENV !== "production") {
+    console.count("Tab render");
+  }
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadProps(__spreadValues({
-      role,
-      "aria-selected": ariaSelected != null ? ariaSelected : isActive,
-      "aria-disabled": ariaDisabled != null ? ariaDisabled : disabled,
-      tabIndex: tabIndex != null ? tabIndex : disabled ? -1 : 0,
-      ref,
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : 0,
+      ref: handleRef,
       className: rootCls
     }, others), {
       onClick: handleClick
     }),
-    children,
-    import_utils.isMini && /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_clsx.default)(`${prefixCls}-miniapp-active-line`, {
-          "bui-indicator-invisible": !isActive
-        })
-      }
-    )
+    children
   );
 });
 Tab.displayName = "BuiTab";
-var Tab_default = Tab;
+var Tab_default = /* @__PURE__ */ import_react.default.memo(Tab);

package/dist/Tabs/Tab.types.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@bifrostui/types';
 import { ITabItem, TabChangeEvent } from './Tabs.types';
 export type TabProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{

package/dist/Tabs/TabIndicator.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface TabIndicatorProps {
+    /** 当前选中的 tab 值 */
+    currentValue: string;
+    /** 已注册的 tabs 引用映射表 */
+    registeredTabs: React.MutableRefObject<Record<string, React.RefObject<HTMLElement>>>;
+    /** tabs 容器的引用 */
+    tabsContainerRef: React.RefObject<HTMLDivElement>;
+    /** 注册版本号，每次 tab 注册/取消注册时递增 */
+    registrationVersion: number;
+}
+declare const TabIndicator: React.FC<TabIndicatorProps>;
+export default TabIndicator;

package/dist/Tabs/TabIndicator.js

@@ -0,0 +1,115 @@
+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);
+var TabIndicator_exports = {};
+__export(TabIndicator_exports, {
+  default: () => TabIndicator_default
+});
+module.exports = __toCommonJS(TabIndicator_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_utils = require("@bifrostui/utils");
+var import_scroll = __toESM(require("./utils/scroll"));
+const rootClass = "bui-tabs";
+const duration = 300;
+const TabIndicator = ({
+  currentValue,
+  registeredTabs,
+  tabsContainerRef,
+  registrationVersion
+}) => {
+  const indicatorRef = (0, import_react.useRef)(null);
+  const getActiveTabElement = (0, import_utils.useEventCallback)(
+    (activeValue) => {
+      const tabRef = registeredTabs.current[activeValue];
+      return tabRef == null ? void 0 : tabRef.current;
+    }
+  );
+  const scrollIntoView = (0, import_utils.useEventCallback)((activeTab) => {
+    const tabsEl = tabsContainerRef.current;
+    if (!tabsEl || !activeTab) {
+      return;
+    }
+    (0, import_scroll.default)(
+      tabsEl,
+      activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
+      duration
+    );
+  });
+  const animate = (0, import_utils.useEventCallback)(() => {
+    const tabsEl = tabsContainerRef.current;
+    if (!tabsEl)
+      return;
+    const indicator = indicatorRef.current;
+    if (!indicator)
+      return;
+    const activeTab = getActiveTabElement(currentValue);
+    if (activeTab) {
+      const activeTabLeft = activeTab.offsetLeft;
+      const activeTabWidth = activeTab.offsetWidth;
+      const containerWidth = tabsEl.offsetWidth;
+      const containerScrollWidth = tabsEl.scrollWidth;
+      const activeLineWidth = indicator.offsetWidth;
+      const x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+      indicator.style.transform = `translate(${x}px, 0px)`;
+      indicator.style.visibility = "visible";
+      const maxScrollDistance = containerScrollWidth - containerWidth;
+      if (maxScrollDistance > 0 && !import_utils.isMini) {
+        scrollIntoView(activeTab);
+      }
+    } else {
+      indicator.style.visibility = "hidden";
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    animate();
+  }, [animate, currentValue, registrationVersion]);
+  (0, import_react.useEffect)(() => {
+    const handleResize = (0, import_utils.debounce)(() => {
+      animate();
+    }, 100);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [animate]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: indicatorRef,
+      className: (0, import_clsx.default)(`${rootClass}-indicator`),
+      style: {
+        transition: "transform 0.3s ease-in-out",
+        transform: "translate(0px, 0px)",
+        visibility: "hidden"
+      },
+      "aria-hidden": "true"
+    }
+  );
+};
+TabIndicator.displayName = "BuiTabsIndicator";
+var TabIndicator_default = TabIndicator;

package/dist/Tabs/TabMask.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TabMaskProps {
+    /** Tabs 容器的引用，用于监听滚动 */
+    tabsContainerRef: React.RefObject<HTMLDivElement>;
+    /** 位置：左侧或右侧 */
+    position: 'left' | 'right';
+}
+declare const TabMask: React.FC<TabMaskProps>;
+export default TabMask;

package/dist/Tabs/TabMask.js

@@ -0,0 +1,88 @@
+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);
+var TabMask_exports = {};
+__export(TabMask_exports, {
+  default: () => TabMask_default
+});
+module.exports = __toCommonJS(TabMask_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_utils = require("@bifrostui/utils");
+const rootClass = "bui-tabs";
+const TabMask = ({ tabsContainerRef, position }) => {
+  const maskRef = (0, import_react.useRef)(null);
+  const updateMaskOpacity = (0, import_react.useMemo)(
+    () => (0, import_utils.throttle)(
+      () => {
+        const tabsEl = tabsContainerRef.current;
+        const mask = maskRef.current;
+        if (!tabsEl || !mask)
+          return;
+        const { scrollLeft, scrollWidth, offsetWidth } = tabsEl;
+        let shouldShow = false;
+        if (position === "left") {
+          shouldShow = scrollLeft > 0;
+        } else {
+          const rightRange = Math.abs(
+            scrollWidth - (scrollLeft + offsetWidth)
+          );
+          shouldShow = rightRange > 1;
+        }
+        mask.style.opacity = shouldShow ? "1" : "0";
+      },
+      100,
+      {
+        trailing: true,
+        leading: true
+      }
+    ),
+    [tabsContainerRef, position]
+  );
+  (0, import_react.useEffect)(() => {
+    const tabsEl = tabsContainerRef.current;
+    if (!tabsEl)
+      return void 0;
+    updateMaskOpacity();
+    tabsEl.addEventListener("scroll", updateMaskOpacity);
+    return () => {
+      tabsEl.removeEventListener("scroll", updateMaskOpacity);
+    };
+  }, [tabsContainerRef, updateMaskOpacity]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: maskRef,
+      className: (0, import_clsx.default)(`${rootClass}-mask`, `${rootClass}-mask-${position}`),
+      style: {
+        opacity: 0
+      },
+      "aria-hidden": "true"
+    }
+  );
+};
+var TabMask_default = TabMask;

package/dist/Tabs/TabPanel.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
+import * as React from 'react';
 export type TabPanelProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & {
         /**

package/dist/Tabs/Tabs.css

@@ -29,6 +29,7 @@ xhs-page {
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: center;
+  white-space: nowrap;
   position: relative;
   overflow-x: scroll;
   scrollbar-width: none;
@@ -36,15 +37,28 @@ xhs-page {
 .bui-tabs-tabs::-webkit-scrollbar {
   display: none;
 }
+.bui-tabs-scroll-wrapper {
+  height: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  min-width: 100%;
+}
 .bui-tabs-indicator {
   position: absolute;
+  top: unset;
+  bottom: var(--bui-tabs-indicator-bottom, 0);
+  left: 0;
   width: var(--bui-tabs-indicator-width);
-  bottom: var(--bui-tabs-indicator-bottom);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
   background: var(--bui-tabs-indicator-bg);
   border-radius: var(--bui-tabs-indicator-border-radius);
   box-shadow: var(--bui-tabs-indicator-box-shadow);
+  z-index: 1;
+  pointer-events: none;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -74,7 +88,3 @@ xhs-page {
       var(--bui-color-bg-view),
       rgba(255, 255, 255, 0));
 }
-.bui-indicator-invisible {
-  visibility: hidden;
-  background-color: transparent;
-}

package/dist/Tabs/Tabs.js

@@ -59,187 +59,112 @@ module.exports = __toCommonJS(Tabs_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_utils = require("@bifrostui/utils");
-var import_scroll = __toESM(require("./utils/scroll"));
 var import_Tab = __toESM(require("./Tab"));
+var import_TabIndicator = __toESM(require("./TabIndicator"));
+var import_TabMask = __toESM(require("./TabMask"));
 var import_TabsContext = require("./TabsContext");
+var import_classes = require("./classes");
 var import_Tabs2 = require("./Tabs.css");
-const prefixCls = "bui-tabs";
-const duration = 300;
 const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, { children, className, value, tabs = [], onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
-  const tabsRef = (0, import_react.useRef)(null);
-  const activeLineRef = (0, import_react.useRef)(null);
-  const [indicatorData, setIndicatorData] = (0, import_react.useState)({
-    x: 0,
-    hasActiveTab: false
-  });
-  const [maskData, setMaskData] = (0, import_react.useState)({
-    leftMaskOpacity: 0,
-    rightMaskOpacity: 0
-  });
-  const getActiveTabElement = () => {
-    const tabsEl = tabsRef.current;
-    if (!tabsEl)
-      return;
-    const activeIndex = tabs.findIndex((item) => item.index === value);
-    if (tabs.length) {
-      return activeIndex > -1 ? tabsEl.childNodes[activeIndex + 1] : void 0;
+  const _a = props, {
+    children,
+    className,
+    value,
+    defaultValue,
+    tabs = [],
+    onChange
+  } = _a, others = __objRest(_a, [
+    "children",
+    "className",
+    "value",
+    "defaultValue",
+    "tabs",
+    "onChange"
+  ]);
+  const handleOnChange = (0, import_utils.useEventCallback)(
+    (e, data) => {
+      onChange == null ? void 0 : onChange(e, { index: data.value });
     }
-    return [...tabsEl.childNodes].find((child) => {
-      var _a2, _b;
-      if (import_utils.isMini) {
-        return [...(_b = (_a2 = child == null ? void 0 : child.classList) == null ? void 0 : _a2.tokenList) != null ? _b : []].includes(
-          "bui-tab-miniapp-active"
-        );
-      }
-      return [...child.classList].includes("bui-tab-active");
-    });
-  };
-  const scrollIntoView = () => {
-    const tabsEl = tabsRef.current;
-    const activeTab = getActiveTabElement();
-    if (!tabsEl || !activeTab) {
-      return;
+  );
+  const [currentValue, triggerValueChange] = (0, import_utils.useValue)({
+    value,
+    defaultValue: defaultValue != null ? defaultValue : "",
+    onChange: handleOnChange,
+    config: {
+      name: "Tabs",
+      state: "value"
     }
-    const to = activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2;
-    (0, import_scroll.default)(tabsEl, to, duration);
-  };
-  const animate = (0, import_utils.useEventCallback)(() => {
-    const tabsEl = tabsRef.current;
-    if (!tabsEl)
-      return;
-    const activeLine = activeLineRef.current;
-    if (!activeLine)
-      return;
-    const activeTab = getActiveTabElement();
-    let activeTabLeft = 0;
-    let activeTabWidth = 0;
-    let containerWidth = 0;
-    let containerScrollWidth = 0;
-    let activeLineWidth = 0;
-    let x = 0;
-    if (activeTab) {
-      activeTabLeft = activeTab.offsetLeft;
-      activeTabWidth = activeTab.offsetWidth;
-      containerWidth = tabsEl.offsetWidth;
-      containerScrollWidth = tabsEl.scrollWidth;
-      activeLineWidth = activeLine.offsetWidth;
-      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+  });
+  const tabsRef = (0, import_react.useRef)(null);
+  const registeredTabs = (0, import_react.useRef)(
+    {}
+  );
+  const [registrationVersion, setRegistrationVersion] = (0, import_react.useState)(0);
+  if (process.env.NODE_ENV !== "production") {
+    if (tabs.length > 0 && import_react.default.Children.count(children) > 0) {
+      console.warn(
+        "BUI Warning: Tabs \u7EC4\u4EF6\u4E0D\u5E94\u8BE5\u540C\u65F6\u4F7F\u7528 tabs \u5C5E\u6027\u548C children\u3002\u8BF7\u53EA\u4F7F\u7528\u5176\u4E2D\u4E00\u79CD\u65B9\u5F0F\u3002\u5F53\u524D\u5C06\u4F18\u5148\u4F7F\u7528 tabs \u5C5E\u6027\uFF0Cchildren \u5C06\u88AB\u5FFD\u7565\u3002"
+      );
     }
-    setIndicatorData({
-      x,
-      hasActiveTab: !!activeTab
-    });
-    const maxScrollDistance = containerScrollWidth - containerWidth;
-    if (maxScrollDistance <= 0 || !activeTab)
-      return;
-    if (!import_utils.isMini) {
-      scrollIntoView();
+  }
+  const onRegister = (0, import_utils.useEventCallback)(
+    (data) => {
+      if (data.value !== void 0 && data.value !== null) {
+        registeredTabs.current[data.value] = data.ref;
+        setRegistrationVersion((v) => v + 1);
+      }
     }
+  );
+  const onUnregister = (0, import_utils.useEventCallback)((data) => {
+    delete registeredTabs.current[data.value];
+    setRegistrationVersion((v) => v + 1);
   });
-  const updateMask = (0, import_react.useMemo)(
-    () => (0, import_utils.throttle)(
-      () => {
-        const tabsEl = tabsRef.current;
-        if (!tabsEl)
-          return;
-        const scrollLeft = tabsEl == null ? void 0 : tabsEl.scrollLeft;
-        const showLeftMask = scrollLeft > 0;
-        const rightRange = Math.abs(
-          tabsEl.scrollWidth - (scrollLeft + tabsEl.offsetWidth)
-        );
-        const showRightMask = rightRange > 1;
-        setMaskData({
-          leftMaskOpacity: showLeftMask ? 1 : 0,
-          rightMaskOpacity: showRightMask ? 1 : 0
-        });
-      },
-      100,
-      {
-        trailing: true,
-        leading: true
+  const handleClick = (0, import_utils.useEventCallback)(
+    (e, item) => {
+      const { index, disabled = false } = item;
+      if (disabled || [void 0, null].includes(index))
+        return;
+      if (index !== currentValue) {
+        triggerValueChange(e, index);
       }
-    ),
-    []
-  );
-  (0, import_react.useEffect)(() => {
-    animate();
-  }, [value, tabs.length, import_react.default.Children.toArray(children).length]);
-  (0, import_react.useEffect)(() => {
-    updateMask();
-    const handleResize = (0, import_utils.debounce)(() => {
-      animate();
-      updateMask();
-    }, 100);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  const handleClick = (e, item) => {
-    const { index, disabled = false } = item;
-    if (disabled || [void 0, null].includes(index))
-      return;
-    if (index !== value) {
-      onChange == null ? void 0 : onChange(e, { index });
-    }
-  };
-  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ ref, className: (0, import_clsx.default)(prefixCls, className) }, others), /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: (0, import_clsx.default)(`${prefixCls}-mask`, `${prefixCls}-mask-left`),
-      style: {
-        opacity: maskData.leftMaskOpacity
-      },
-      "aria-hidden": "true"
     }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: (0, import_clsx.default)(`${prefixCls}-mask`, `${prefixCls}-mask-right`),
-      style: {
-        opacity: maskData.rightMaskOpacity
-      },
-      "aria-hidden": "true"
+  );
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      value: currentValue,
+      triggerChange: handleClick,
+      onRegister,
+      onUnregister
+    }),
+    [currentValue, handleClick, onRegister, onUnregister]
+  );
+  const renderedTabs = (0, import_react.useMemo)(() => {
+    if (tabs.length > 0) {
+      return tabs.map((item) => /* @__PURE__ */ import_react.default.createElement(import_Tab.default, { key: item.index, index: item == null ? void 0 : item.index, disabled: item == null ? void 0 : item.disabled }, item.title));
     }
-  ), /* @__PURE__ */ import_react.default.createElement(
+    return children;
+  }, [tabs, children]);
+  if (process.env.NODE_ENV !== "production") {
+    console.count("Tabs render......");
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ ref, className: (0, import_clsx.default)(import_classes.tabsRootClass, className) }, others), /* @__PURE__ */ import_react.default.createElement(import_TabMask.default, { tabsContainerRef: tabsRef, position: "left" }), /* @__PURE__ */ import_react.default.createElement(import_TabMask.default, { tabsContainerRef: tabsRef, position: "right" }), /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: `${prefixCls}-tabs`,
+      className: `${import_classes.tabsRootClass}-tabs`,
       ref: tabsRef,
-      onScroll: updateMask,
       role: "tablist",
       "aria-orientation": "horizontal"
     },
     /* @__PURE__ */ import_react.default.createElement(
-      "div",
+      import_TabIndicator.default,
       {
-        ref: activeLineRef,
-        className: (0, import_clsx.default)(`${prefixCls}-indicator`, {
-          "bui-indicator-invisible": import_utils.isMini || !indicatorData.hasActiveTab
-        }),
-        style: {
-          transition: "transform 0.3s ease-in-out",
-          transform: `translate(${indicatorData.x}px, 0px)`
-        },
-        "aria-hidden": "true"
+        currentValue,
+        registeredTabs,
+        tabsContainerRef: tabsRef,
+        registrationVersion
       }
     ),
-    /* @__PURE__ */ import_react.default.createElement(import_TabsContext.TabsContextProvider, { value: { value, triggerChange: handleClick } }, !!tabs.length && tabs.map((item) => {
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_Tab.default,
-        {
-          key: item.index,
-          index: item == null ? void 0 : item.index,
-          disabled: item == null ? void 0 : item.disabled,
-          role: "tab",
-          "aria-selected": value === item.index,
-          "aria-disabled": item == null ? void 0 : item.disabled,
-          tabIndex: (item == null ? void 0 : item.disabled) ? -1 : 0
-        },
-        item.title
-      );
-    }), children)
+    /* @__PURE__ */ import_react.default.createElement(import_TabsContext.TabsContextProvider, { value: contextValue }, renderedTabs)
   ));
 });
 Tabs.displayName = "BuiTabs";