@bifrostui/react 2.0.0-alpha.12 → 2.0.0-alpha.14

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

@@ -1,10 +1,5 @@
 import React, { SyntheticEvent } from 'react';
 import { OverrideProps } from '@bifrostui/types';
-export interface TabHeaderItem {
-    title: React.ReactNode;
-    index: string;
-    disabled?: boolean;
-}
 export interface ITabsChangeData {
     /** 切换后的tab索引 */
     index: string;
@@ -19,9 +14,13 @@ export type ITabAlign = 'start' | 'center';
 export type TabsProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & {
         /**
-         * 当前选中面板的索引值，与tabs.index对应
+         * 当前选中面板的索引值，与 ITabItem.index 对应
          */
         value?: string;
+        /**
+         * 默认选中面板的索引值（非受控模式）
+         */
+        defaultValue?: string;
         /**
          * 切换面板的数据
          */

package/dist/Tabs/TabsContext.d.ts

@@ -1,8 +1,17 @@
 import React from 'react';
-import { TabChangeEvent, TabsProps } from './Tabs.types';
-type TabsContextValueType = Omit<TabsProps, 'onChange'> & {
-    triggerChange: TabChangeEvent;
-};
-declare const TabsContext: React.Context<TabsContextValueType>;
-export declare const TabsContextProvider: React.Provider<TabsContextValueType>;
+import { TabChangeEvent } from './Tabs.types';
+export interface TabRegisterData {
+    value: string;
+    ref: React.RefObject<HTMLElement>;
+}
+export interface TabsContextValueType {
+    value?: string;
+    triggerChange?: TabChangeEvent;
+    onRegister?: (data: TabRegisterData) => void;
+    onUnregister?: (data: {
+        value: string;
+    }) => void;
+}
+declare const TabsContext: import("@bifrostui/utils").Context<TabsContextValueType>;
+export declare const TabsContextProvider: React.Provider<TabsContextValueType> & React.FC<React.ProviderProps<TabsContextValueType>>;
 export default TabsContext;

package/dist/Tabs/TabsContext.js

@@ -1,8 +1,6 @@
-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)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 TabsContext_exports = {};
 __export(TabsContext_exports, {
@@ -31,10 +21,12 @@ __export(TabsContext_exports, {
   default: () => TabsContext_default
 });
 module.exports = __toCommonJS(TabsContext_exports);
-var import_react = __toESM(require("react"));
-const TabsContext = import_react.default.createContext(
-  void 0
-);
+var import_utils = require("@bifrostui/utils");
+const TabsContext = (0, import_utils.createContext)({
+  triggerChange: void 0,
+  onRegister: void 0,
+  onUnregister: void 0
+});
 if (process.env.NODE_ENV !== "production") {
   TabsContext.displayName = "BuiTabsContext";
 }

package/dist/Tabs/classes.d.ts

@@ -0,0 +1,10 @@
+export declare const tabsRootClass = "bui-tabs";
+export declare const tabRootClass = "bui-tab";
+export declare const tabsScrollClass: string;
+export declare const tabsScrollWrapperClass: string;
+export declare const tabActiveClass: string;
+export declare const tabDisabledClass: string;
+export declare const tabIndicatorClass: string;
+export declare const tabMaskClass: string;
+export declare const tabMaskLeftClass: string;
+export declare const tabMaskRightClass: string;

package/dist/Tabs/classes.js

@@ -0,0 +1,54 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var classes_exports = {};
+__export(classes_exports, {
+  tabActiveClass: () => tabActiveClass,
+  tabDisabledClass: () => tabDisabledClass,
+  tabIndicatorClass: () => tabIndicatorClass,
+  tabMaskClass: () => tabMaskClass,
+  tabMaskLeftClass: () => tabMaskLeftClass,
+  tabMaskRightClass: () => tabMaskRightClass,
+  tabRootClass: () => tabRootClass,
+  tabsRootClass: () => tabsRootClass,
+  tabsScrollClass: () => tabsScrollClass,
+  tabsScrollWrapperClass: () => tabsScrollWrapperClass
+});
+module.exports = __toCommonJS(classes_exports);
+const tabsRootClass = "bui-tabs";
+const tabRootClass = "bui-tab";
+const tabsScrollClass = `${tabsRootClass}-tabs`;
+const tabsScrollWrapperClass = `${tabsRootClass}-scroll-wrapper`;
+const tabActiveClass = `${tabRootClass}-active`;
+const tabDisabledClass = `${tabRootClass}-disabled`;
+const tabIndicatorClass = `${tabsRootClass}-indicator`;
+const tabMaskClass = `${tabsRootClass}-mask`;
+const tabMaskLeftClass = `${tabMaskClass}-left`;
+const tabMaskRightClass = `${tabMaskClass}-right`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tabActiveClass,
+  tabDisabledClass,
+  tabIndicatorClass,
+  tabMaskClass,
+  tabMaskLeftClass,
+  tabMaskRightClass,
+  tabRootClass,
+  tabsRootClass,
+  tabsScrollClass,
+  tabsScrollWrapperClass
+});

package/dist/Tabs/index.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,12 +88,8 @@ xhs-page {
       var(--bui-color-bg-view),
       rgba(255, 255, 255, 0));
 }
-.bui-indicator-invisible {
-  visibility: hidden;
-  background-color: transparent;
-}
 .bui-tab {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
@@ -99,33 +109,10 @@ xhs-page {
   font-weight: var(--bui-font-weight-bold);
   font-family: var(--bui-tab-active-font-family);
 }
-.bui-tab-miniapp-active {
-  color: var(--bui-tab-active-color);
-  line-height: 1.5;
-  font-weight: var(--bui-font-weight-bold);
-  position: relative;
-}
-.bui-tab-miniapp-active-line {
-  position: absolute;
-  bottom: var(--bui-tabs-indicator-bottom);
-  left: -12px;
-  right: -12px;
-  margin: 0 auto !important;
-  width: var(--bui-tabs-indicator-width);
-  height: var(--bui-tabs-indicator-height);
-  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  background: var(--bui-tabs-indicator-bg);
-  border-radius: var(--bui-tabs-indicator-border-radius);
-  box-shadow: var(--bui-tabs-indicator-box-shadow);
-}
 .bui-tab-disabled {
   opacity: 0.5;
   pointer-events: none;
 }
-.bui-indicator-invisible {
-  visibility: hidden;
-  background-color: transparent;
-}
 .bui-tabpanel {
   font-family: var(--bui-font-family);
 }

package/dist/Tabs/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Tab } from './Tab';
-export * from './Tab.types';
 export { default as TabPanel } from './TabPanel';
-export * from './TabPanel.types';
 export { default, default as Tabs } from './Tabs';
 export * from './Tabs.types';
+export * from './Tab.types';
+export * from './TabPanel.types';

package/dist/Tabs/index.js

@@ -35,17 +35,17 @@ __export(Tabs_exports, {
 });
 module.exports = __toCommonJS(Tabs_exports);
 var import_Tab = __toESM(require("./Tab"));
-__reExport(Tabs_exports, require("./Tab.types"), module.exports);
 var import_TabPanel = __toESM(require("./TabPanel"));
-__reExport(Tabs_exports, require("./TabPanel.types"), module.exports);
 var import_Tabs = __toESM(require("./Tabs"));
 __reExport(Tabs_exports, require("./Tabs.types"), module.exports);
+__reExport(Tabs_exports, require("./Tab.types"), module.exports);
+__reExport(Tabs_exports, require("./TabPanel.types"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Tab,
   TabPanel,
   Tabs,
+  ...require("./Tabs.types"),
   ...require("./Tab.types"),
-  ...require("./TabPanel.types"),
-  ...require("./Tabs.types")
+  ...require("./TabPanel.types")
 });

package/dist/Tabs/index.miniapp.d.ts

@@ -0,0 +1,5 @@
+export { default, Tab, Tabs } from './miniapp';
+export { default as TabPanel } from './TabPanel';
+export * from './Tabs.types';
+export * from './Tab.types';
+export * from './TabPanel.types';

package/dist/Tabs/index.miniapp.js

@@ -0,0 +1,50 @@
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+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 index_miniapp_exports = {};
+__export(index_miniapp_exports, {
+  Tab: () => import_miniapp.Tab,
+  TabPanel: () => import_TabPanel.default,
+  Tabs: () => import_miniapp.Tabs,
+  default: () => import_miniapp.default
+});
+module.exports = __toCommonJS(index_miniapp_exports);
+var import_miniapp = __toESM(require("./miniapp"));
+var import_TabPanel = __toESM(require("./TabPanel"));
+__reExport(index_miniapp_exports, require("./Tabs.types"), module.exports);
+__reExport(index_miniapp_exports, require("./Tab.types"), module.exports);
+__reExport(index_miniapp_exports, require("./TabPanel.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tab,
+  TabPanel,
+  Tabs,
+  ...require("./Tabs.types"),
+  ...require("./Tab.types"),
+  ...require("./TabPanel.types")
+});

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TabProps } from '../Tab.types';
+import '../Tab.less';
+declare const _default: React.NamedExoticComponent<TabProps<"div", {}>>;
+export default _default;

package/dist/Tabs/miniapp/Tab.js

@@ -0,0 +1,103 @@
+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 Tab_exports = {};
+__export(Tab_exports, {
+  default: () => Tab_default
+});
+module.exports = __toCommonJS(Tab_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_utils = require("@bifrostui/utils");
+var import_TabsContext = __toESM(require("./TabsContext"));
+var import_classes = require("../classes");
+var import_Tab2 = require("../Tab.css");
+const Tab = (props) => {
+  const {
+    className,
+    children,
+    index,
+    disabled = false,
+    onClick,
+    style
+  } = props;
+  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
+  );
+  const tabsContainerId = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.tabsContainerId
+  );
+  (0, import_react.useEffect)(() => {
+    if (index !== void 0 && index !== null) {
+      onRegister == null ? void 0 : onRegister({ value: index });
+    }
+    return () => {
+      if (index !== void 0 && index !== null) {
+        onUnregister == null ? void 0 : onUnregister({ value: index });
+      }
+    };
+  }, [onRegister, onUnregister, index]);
+  const rootCls = (0, import_clsx.default)(
+    import_classes.tabRootClass,
+    {
+      [import_classes.tabActiveClass]: isActive,
+      [import_classes.tabDisabledClass]: disabled
+    },
+    className
+  );
+  const tabId = tabsContainerId ? `${tabsContainerId}-tab-${index}` : void 0;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      id: tabId,
+      className: rootCls,
+      style,
+      onClick: (e) => {
+        if (disabled)
+          return;
+        triggerChange == null ? void 0 : triggerChange(e, { index });
+        onClick == null ? void 0 : onClick(e, { index });
+      }
+    },
+    children
+  );
+};
+Tab.displayName = "BuiTab";
+var Tab_default = /* @__PURE__ */ import_react.default.memo(Tab, (prevProps, nextProps) => {
+  return prevProps.index === nextProps.index && prevProps.disabled === nextProps.disabled && prevProps.className === nextProps.className && prevProps.children === nextProps.children;
+});

package/dist/Tabs/miniapp/TabIndicator.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface TabIndicatorProps {
+    /** 当前选中的 tab 值 */
+    currentValue: string;
+    /** 已注册的 tabs 值数组（用于生成ID） */
+    registeredTabValues: string[];
+    /** wrapper 容器的 ID（Tab的父容器） */
+    wrapperId: string;
+    /** ScrollView 的 ID */
+    scrollViewId: string;
+    /** 注册版本号，每次 tab 注册/取消注册时递增 */
+    registrationVersion: number;
+}
+declare const TabIndicator: React.FC<TabIndicatorProps>;
+export default TabIndicator;

package/dist/Tabs/miniapp/TabIndicator.js

@@ -0,0 +1,206 @@
+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 __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+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_taro = __toESM(require("@tarojs/taro"));
+var import_utils = require("@bifrostui/utils");
+var import_classes = require("../classes");
+var import_queryBatch = require("./utils/queryBatch");
+const TabIndicator = ({
+  currentValue,
+  registeredTabValues,
+  wrapperId,
+  scrollViewId,
+  registrationVersion
+}) => {
+  const [transform, setTransform] = (0, import_react.useState)("translate(0px, 0px)");
+  const [visibility, setVisibility] = (0, import_react.useState)("hidden");
+  const animationTimerRef = (0, import_react.useRef)(null);
+  const positionCacheRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const containerInfoRef = (0, import_react.useRef)(null);
+  const indicatorWidthRef = (0, import_react.useRef)(24);
+  const isInitializedRef = (0, import_react.useRef)(false);
+  const initRetryCountRef = (0, import_react.useRef)(0);
+  const maxInitRetries = 5;
+  const updateIndicatorPosition = (0, import_utils.useEventCallback)(() => {
+    if (!currentValue || !registeredTabValues.includes(currentValue)) {
+      setVisibility("hidden");
+      return;
+    }
+    const cachedPosition = positionCacheRef.current.get(currentValue);
+    const containerInfo = containerInfoRef.current;
+    if (!cachedPosition || !containerInfo) {
+      if (!isInitializedRef.current) {
+        initializePositions();
+      }
+      return;
+    }
+    const activeTabLeft = cachedPosition.left;
+    const activeTabWidth = cachedPosition.width;
+    const indicatorWidth = indicatorWidthRef.current;
+    const x = activeTabLeft + (activeTabWidth - indicatorWidth) / 2;
+    setTransform(`translate(${x}px, 0px)`);
+    setVisibility("visible");
+  });
+  const initializePositions = (0, import_utils.useEventCallback)(() => __async(void 0, null, function* () {
+    try {
+      const result = yield (0, import_queryBatch.batchQueryTabs)({
+        scrollViewId,
+        wrapperId,
+        tabValues: registeredTabValues
+      });
+      const { scrollView, scrollFields, wrapper, indicator, tabs } = result;
+      if (!scrollView || !wrapper || !indicator || !scrollFields) {
+        if (initRetryCountRef.current < maxInitRetries) {
+          initRetryCountRef.current += 1;
+          if (animationTimerRef.current) {
+            clearTimeout(animationTimerRef.current);
+          }
+          animationTimerRef.current = setTimeout(() => {
+            initializePositions();
+          }, 100);
+        }
+        return;
+      }
+      containerInfoRef.current = {
+        width: scrollView.width,
+        scrollWidth: scrollFields.scrollWidth || scrollView.width
+      };
+      indicatorWidthRef.current = indicator.width;
+      const newCache = /* @__PURE__ */ new Map();
+      registeredTabValues.forEach((value, index) => {
+        const tabRect = tabs[index];
+        if (tabRect && tabRect.width > 0) {
+          const relativeLeft = tabRect.left - wrapper.left;
+          newCache.set(value, {
+            left: relativeLeft,
+            width: tabRect.width
+          });
+        }
+      });
+      if (newCache.size < registeredTabValues.length) {
+        if (initRetryCountRef.current < maxInitRetries) {
+          initRetryCountRef.current += 1;
+          if (animationTimerRef.current) {
+            clearTimeout(animationTimerRef.current);
+          }
+          animationTimerRef.current = setTimeout(() => {
+            initializePositions();
+          }, 100);
+        }
+        return;
+      }
+      initRetryCountRef.current = 0;
+      positionCacheRef.current = newCache;
+      isInitializedRef.current = true;
+      updateIndicatorPosition();
+    } catch (error) {
+      console.error("[TabIndicator] \u6279\u91CF\u67E5\u8BE2\u5931\u8D25:", error);
+    }
+  }));
+  (0, import_react.useEffect)(() => {
+    if (registeredTabValues.length === 0) {
+      return void 0;
+    }
+    if (animationTimerRef.current) {
+      clearTimeout(animationTimerRef.current);
+    }
+    isInitializedRef.current = false;
+    initRetryCountRef.current = 0;
+    import_taro.default.nextTick(() => {
+      initializePositions();
+    });
+    return () => {
+      if (animationTimerRef.current) {
+        clearTimeout(animationTimerRef.current);
+      }
+    };
+  }, [registrationVersion, initializePositions]);
+  (0, import_react.useEffect)(() => {
+    if (!currentValue) {
+      setVisibility("hidden");
+      return;
+    }
+    updateIndicatorPosition();
+  }, [currentValue, updateIndicatorPosition]);
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
+    const handleResize = () => {
+      isInitializedRef.current = false;
+      initRetryCountRef.current = 0;
+      positionCacheRef.current.clear();
+      import_taro.default.nextTick(() => {
+        initializePositions();
+      });
+    };
+    (_b = (_a = import_taro.default).onWindowResize) == null ? void 0 : _b.call(_a, handleResize);
+    return () => {
+      var _a2, _b2;
+      (_b2 = (_a2 = import_taro.default).offWindowResize) == null ? void 0 : _b2.call(_a2, handleResize);
+    };
+  }, [initializePositions]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      id: `${wrapperId}-indicator`,
+      className: (0, import_clsx.default)(import_classes.tabIndicatorClass),
+      style: {
+        transition: "transform 0.3s ease-in-out",
+        transform,
+        visibility
+      }
+    }
+  );
+};
+TabIndicator.displayName = "BuiTabsIndicator";
+var TabIndicator_default = TabIndicator;

package/dist/Tabs/miniapp/TabMask.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface TabMaskProps {
+    /** 位置：左侧或右侧 */
+    position: 'left' | 'right';
+    /** 当前滚动位置 */
+    scrollLeft: number;
+    /** 容器宽度 */
+    containerWidth: number;
+    /** 滚动区域总宽度 */
+    scrollWidth: number;
+}
+declare const _default: React.NamedExoticComponent<TabMaskProps>;
+export default _default;