@bifrostui/react 2.0.0-alpha.18 → 2.0.0-alpha.19

package/dist/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './DatePicker.types';
-declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "defaultValue" | "onChange" | "value" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "value" | "defaultValue" | "onChange" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

package/dist/Modal/Modal.miniapp.d.ts

@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, keyof import("@bifrostui/types").ICommonProps | "open" | "onClose" | "container" | "disableScrollLock" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/Tabs/TabIndicator.d.ts

@@ -6,8 +6,6 @@ export interface TabIndicatorProps {
     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

@@ -36,14 +36,18 @@ var import_utils = require("@bifrostui/utils");
 var import_scroll = __toESM(require("./utils/scroll"));
 const rootClass = "bui-tabs";
 const duration = 300;
+const DEFAULT_INDICATOR_WIDTH = 24;
 const TabIndicator = ({
   currentValue,
   registeredTabs,
-  tabsContainerRef,
-  registrationVersion
+  tabsContainerRef
 }) => {
   const indicatorRef = (0, import_react.useRef)(null);
-  const isFirstRender = (0, import_react.useRef)(true);
+  const hasRenderedOnce = (0, import_react.useRef)(false);
+  const indicatorWidthCache = (0, import_react.useRef)(null);
+  const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(
+    null
+  );
   const getActiveTabElement = (0, import_utils.useEventCallback)(
     (activeValue) => {
       const tabRef = registeredTabs.current[activeValue];
@@ -51,7 +55,7 @@ const TabIndicator = ({
     }
   );
   const scrollIntoView = (0, import_utils.useEventCallback)(
-    (activeTab, animate2 = true) => {
+    (activeTab, animate = true) => {
       const tabsEl = tabsContainerRef.current;
       if (!tabsEl || !activeTab) {
         return;
@@ -59,65 +63,96 @@ const TabIndicator = ({
       (0, import_scroll.default)(
         tabsEl,
         activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
-        animate2 ? duration : 0
+        animate ? duration : 0
       );
     }
   );
-  const animate = (0, import_utils.useEventCallback)(() => {
-    const tabsEl = tabsContainerRef.current;
-    if (!tabsEl)
-      return;
+  const getIndicatorWidth = (0, import_utils.useEventCallback)(() => {
+    if (indicatorWidthCache.current !== null) {
+      return indicatorWidthCache.current;
+    }
     const indicator = indicatorRef.current;
     if (!indicator)
+      return DEFAULT_INDICATOR_WIDTH;
+    const cssValue = getComputedStyle(indicator).getPropertyValue(
+      "--bui-tabs-indicator-width"
+    );
+    const parsed = Number.parseFloat(cssValue);
+    const width = Number.isNaN(parsed) ? DEFAULT_INDICATOR_WIDTH : parsed;
+    indicatorWidthCache.current = width;
+    return width;
+  });
+  const getTabsMeta = (0, import_utils.useEventCallback)(() => {
+    const tabsNode = tabsContainerRef.current;
+    let tabsMeta = null;
+    if (tabsNode) {
+      const rect = tabsNode.getBoundingClientRect();
+      tabsMeta = {
+        clientWidth: tabsNode.clientWidth,
+        scrollLeft: tabsNode.scrollLeft,
+        scrollWidth: tabsNode.scrollWidth,
+        left: rect.left
+      };
+    }
+    let tabMeta = null;
+    const activeTab = getActiveTabElement(currentValue);
+    if (activeTab) {
+      tabMeta = activeTab.getBoundingClientRect();
+    }
+    return { tabsMeta, tabMeta };
+  });
+  const updateIndicatorState = (0, import_utils.useEventCallback)(() => {
+    const { tabsMeta, tabMeta } = getTabsMeta();
+    if (!tabMeta || !tabsMeta) {
+      setIndicatorStyle(null);
       return;
+    }
+    const tabLeft = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;
+    const tabWidth = tabMeta.width;
+    const indicatorWidth = getIndicatorWidth();
+    const leftPosition = tabLeft + (tabWidth - indicatorWidth) / 2;
+    const newIndicatorStyle = {
+      left: leftPosition
+    };
+    if (indicatorStyle === null) {
+      setIndicatorStyle(newIndicatorStyle);
+    } else {
+      const dLeft = Math.abs(indicatorStyle.left - newIndicatorStyle.left);
+      if (dLeft >= 1) {
+        setIndicatorStyle(newIndicatorStyle);
+      }
+    }
     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;
+      const maxScrollDistance = tabsMeta.scrollWidth - tabsMeta.clientWidth;
       if (maxScrollDistance > 0 && !import_utils.isMini) {
-        scrollIntoView(activeTab, !isFirstRender.current);
+        scrollIntoView(activeTab, hasRenderedOnce.current);
       }
-      if (isFirstRender.current) {
-        isFirstRender.current = false;
-        requestAnimationFrame(() => {
-          if (indicator) {
-            indicator.style.transition = "transform 0.3s ease-in-out";
-          }
-        });
-      }
-    } else {
-      indicator.style.visibility = "hidden";
+      hasRenderedOnce.current = true;
     }
   });
   (0, import_react.useEffect)(() => {
-    animate();
-  }, [animate, currentValue, registrationVersion]);
+    updateIndicatorState();
+  });
   (0, import_react.useEffect)(() => {
     const handleResize = (0, import_utils.debounce)(() => {
-      animate();
+      indicatorWidthCache.current = null;
+      updateIndicatorState();
     }, 100);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [animate]);
+  }, [updateIndicatorState]);
+  if (!indicatorStyle) {
+    return null;
+  }
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       ref: indicatorRef,
       className: (0, import_clsx.default)(`${rootClass}-indicator`),
-      style: {
-        transition: "none",
-        transform: "translate(0px, 0px)",
-        visibility: "hidden"
-      },
+      style: indicatorStyle,
       "aria-hidden": "true"
     }
   );

package/dist/Tabs/Tabs.css

@@ -49,7 +49,6 @@ xhs-page {
   position: absolute;
   top: unset;
   bottom: var(--bui-tabs-indicator-bottom, 0);
-  left: 0;
   width: var(--bui-tabs-indicator-width);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
@@ -58,6 +57,7 @@ xhs-page {
   box-shadow: var(--bui-tabs-indicator-box-shadow);
   z-index: 1;
   pointer-events: none;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);

package/dist/Tabs/Tabs.js

@@ -175,8 +175,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       {
         currentValue,
         registeredTabs,
-        tabsContainerRef: tabsRef,
-        registrationVersion
+        tabsContainerRef: tabsRef
       }
     ),
     /* @__PURE__ */ import_react.default.createElement(import_TabsContext.TabsContextProvider, { value: contextValue }, renderedTabs)

package/dist/Tabs/index.css

@@ -49,7 +49,6 @@ xhs-page {
   position: absolute;
   top: unset;
   bottom: var(--bui-tabs-indicator-bottom, 0);
-  left: 0;
   width: var(--bui-tabs-indicator-width);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
@@ -58,6 +57,7 @@ xhs-page {
   box-shadow: var(--bui-tabs-indicator-box-shadow);
   z-index: 1;
   pointer-events: none;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);

package/dist/Tabs/miniapp/TabIndicator.js

@@ -74,7 +74,6 @@ const TabIndicator = ({
   const isInitializedRef = (0, import_react.useRef)(false);
   const initRetryCountRef = (0, import_react.useRef)(0);
   const maxInitRetries = 5;
-  const isFirstRender = (0, import_react.useRef)(true);
   const isInitializingRef = (0, import_react.useRef)(false);
   const initVersionRef = (0, import_react.useRef)(0);
   const isMountedRef = (0, import_react.useRef)(true);
@@ -83,7 +82,7 @@ const TabIndicator = ({
     if (!indicator)
       return;
     if (!isValidTabValue(currentValue) || !registeredTabValues.includes(currentValue)) {
-      indicator.style.visibility = "hidden";
+      indicator.style.opacity = "0";
       return;
     }
     const cachedPosition = positionCacheRef.current.get(currentValue);
@@ -99,21 +98,7 @@ const TabIndicator = ({
     const indicatorWidth = indicatorWidthRef.current;
     const x = activeTabLeft + (activeTabWidth - indicatorWidth) / 2;
     indicator.style.transform = `translate(${x}px, 0px)`;
-    if (isFirstRender.current) {
-      import_taro.default.nextTick(() => {
-        if (!isMountedRef.current || !indicatorRef.current)
-          return;
-        indicatorRef.current.style.visibility = "visible";
-        import_taro.default.nextTick(() => {
-          if (!isMountedRef.current || !indicatorRef.current)
-            return;
-          indicatorRef.current.style.transition = "transform 0.3s ease-in-out";
-        });
-      });
-      isFirstRender.current = false;
-    } else {
-      indicator.style.visibility = "visible";
-    }
+    indicator.style.opacity = "1";
   });
   const initializePositions = (0, import_utils.useEventCallback)(() => __async(void 0, null, function* () {
     if (!isMountedRef.current)
@@ -227,7 +212,7 @@ const TabIndicator = ({
   (0, import_react.useEffect)(() => {
     if (registeredTabValues.length === 0) {
       if (indicatorRef.current) {
-        indicatorRef.current.style.visibility = "hidden";
+        indicatorRef.current.style.opacity = "0";
       }
       return void 0;
     }
@@ -256,7 +241,7 @@ const TabIndicator = ({
   (0, import_react.useEffect)(() => {
     if (!isValidTabValue(currentValue)) {
       if (indicatorRef.current) {
-        indicatorRef.current.style.visibility = "hidden";
+        indicatorRef.current.style.opacity = "0";
       }
       return;
     }
@@ -305,9 +290,9 @@ const TabIndicator = ({
       id: `${wrapperId}-indicator`,
       className: (0, import_clsx.default)(import_classes.tabIndicatorClass),
       style: {
-        transition: "none",
+        transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
         transform: "translate(0px, 0px)",
-        visibility: "hidden"
+        opacity: 0
       }
     }
   );

package/es/Modal/Modal.miniapp.d.ts

@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof import("@bifrostui/types").ICommonProps | "keepMounted" | "container" | "disablePortal" | "open" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/es/Tabs/TabIndicator.d.ts

@@ -6,8 +6,6 @@ export interface TabIndicatorProps {
     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/es/Tabs/TabIndicator.js

@@ -1,17 +1,21 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { debounce, isMini, useEventCallback } from "@bifrostui/utils";
 import scrollLeftTo from "./utils/scroll";
 const rootClass = "bui-tabs";
 const duration = 300;
+const DEFAULT_INDICATOR_WIDTH = 24;
 const TabIndicator = ({
   currentValue,
   registeredTabs,
-  tabsContainerRef,
-  registrationVersion
+  tabsContainerRef
 }) => {
   const indicatorRef = useRef(null);
-  const isFirstRender = useRef(true);
+  const hasRenderedOnce = useRef(false);
+  const indicatorWidthCache = useRef(null);
+  const [indicatorStyle, setIndicatorStyle] = useState(
+    null
+  );
   const getActiveTabElement = useEventCallback(
     (activeValue) => {
       const tabRef = registeredTabs.current[activeValue];
@@ -19,7 +23,7 @@ const TabIndicator = ({
     }
   );
   const scrollIntoView = useEventCallback(
-    (activeTab, animate2 = true) => {
+    (activeTab, animate = true) => {
       const tabsEl = tabsContainerRef.current;
       if (!tabsEl || !activeTab) {
         return;
@@ -27,65 +31,96 @@ const TabIndicator = ({
       scrollLeftTo(
         tabsEl,
         activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
-        animate2 ? duration : 0
+        animate ? duration : 0
       );
     }
   );
-  const animate = useEventCallback(() => {
-    const tabsEl = tabsContainerRef.current;
-    if (!tabsEl)
-      return;
+  const getIndicatorWidth = useEventCallback(() => {
+    if (indicatorWidthCache.current !== null) {
+      return indicatorWidthCache.current;
+    }
     const indicator = indicatorRef.current;
     if (!indicator)
+      return DEFAULT_INDICATOR_WIDTH;
+    const cssValue = getComputedStyle(indicator).getPropertyValue(
+      "--bui-tabs-indicator-width"
+    );
+    const parsed = Number.parseFloat(cssValue);
+    const width = Number.isNaN(parsed) ? DEFAULT_INDICATOR_WIDTH : parsed;
+    indicatorWidthCache.current = width;
+    return width;
+  });
+  const getTabsMeta = useEventCallback(() => {
+    const tabsNode = tabsContainerRef.current;
+    let tabsMeta = null;
+    if (tabsNode) {
+      const rect = tabsNode.getBoundingClientRect();
+      tabsMeta = {
+        clientWidth: tabsNode.clientWidth,
+        scrollLeft: tabsNode.scrollLeft,
+        scrollWidth: tabsNode.scrollWidth,
+        left: rect.left
+      };
+    }
+    let tabMeta = null;
+    const activeTab = getActiveTabElement(currentValue);
+    if (activeTab) {
+      tabMeta = activeTab.getBoundingClientRect();
+    }
+    return { tabsMeta, tabMeta };
+  });
+  const updateIndicatorState = useEventCallback(() => {
+    const { tabsMeta, tabMeta } = getTabsMeta();
+    if (!tabMeta || !tabsMeta) {
+      setIndicatorStyle(null);
       return;
+    }
+    const tabLeft = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;
+    const tabWidth = tabMeta.width;
+    const indicatorWidth = getIndicatorWidth();
+    const leftPosition = tabLeft + (tabWidth - indicatorWidth) / 2;
+    const newIndicatorStyle = {
+      left: leftPosition
+    };
+    if (indicatorStyle === null) {
+      setIndicatorStyle(newIndicatorStyle);
+    } else {
+      const dLeft = Math.abs(indicatorStyle.left - newIndicatorStyle.left);
+      if (dLeft >= 1) {
+        setIndicatorStyle(newIndicatorStyle);
+      }
+    }
     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;
+      const maxScrollDistance = tabsMeta.scrollWidth - tabsMeta.clientWidth;
       if (maxScrollDistance > 0 && !isMini) {
-        scrollIntoView(activeTab, !isFirstRender.current);
-      }
-      if (isFirstRender.current) {
-        isFirstRender.current = false;
-        requestAnimationFrame(() => {
-          if (indicator) {
-            indicator.style.transition = "transform 0.3s ease-in-out";
-          }
-        });
+        scrollIntoView(activeTab, hasRenderedOnce.current);
       }
-    } else {
-      indicator.style.visibility = "hidden";
+      hasRenderedOnce.current = true;
     }
   });
   useEffect(() => {
-    animate();
-  }, [animate, currentValue, registrationVersion]);
+    updateIndicatorState();
+  });
   useEffect(() => {
     const handleResize = debounce(() => {
-      animate();
+      indicatorWidthCache.current = null;
+      updateIndicatorState();
     }, 100);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [animate]);
+  }, [updateIndicatorState]);
+  if (!indicatorStyle) {
+    return null;
+  }
   return /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: indicatorRef,
       className: clsx(`${rootClass}-indicator`),
-      style: {
-        transition: "none",
-        transform: "translate(0px, 0px)",
-        visibility: "hidden"
-      },
+      style: indicatorStyle,
       "aria-hidden": "true"
     }
   );

package/es/Tabs/Tabs.css

@@ -49,7 +49,6 @@ xhs-page {
   position: absolute;
   top: unset;
   bottom: var(--bui-tabs-indicator-bottom, 0);
-  left: 0;
   width: var(--bui-tabs-indicator-width);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
@@ -58,6 +57,7 @@ xhs-page {
   box-shadow: var(--bui-tabs-indicator-box-shadow);
   z-index: 1;
   pointer-events: none;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);

package/es/Tabs/Tabs.js

@@ -145,8 +145,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
       {
         currentValue,
         registeredTabs,
-        tabsContainerRef: tabsRef,
-        registrationVersion
+        tabsContainerRef: tabsRef
       }
     ),
     /* @__PURE__ */ React.createElement(TabsContextProvider, { value: contextValue }, renderedTabs)

package/es/Tabs/index.css

@@ -49,7 +49,6 @@ xhs-page {
   position: absolute;
   top: unset;
   bottom: var(--bui-tabs-indicator-bottom, 0);
-  left: 0;
   width: var(--bui-tabs-indicator-width);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
@@ -58,6 +57,7 @@ xhs-page {
   box-shadow: var(--bui-tabs-indicator-box-shadow);
   z-index: 1;
   pointer-events: none;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);

package/es/Tabs/miniapp/TabIndicator.js

@@ -42,7 +42,6 @@ const TabIndicator = ({
   const isInitializedRef = useRef(false);
   const initRetryCountRef = useRef(0);
   const maxInitRetries = 5;
-  const isFirstRender = useRef(true);
   const isInitializingRef = useRef(false);
   const initVersionRef = useRef(0);
   const isMountedRef = useRef(true);
@@ -51,7 +50,7 @@ const TabIndicator = ({
     if (!indicator)
       return;
     if (!isValidTabValue(currentValue) || !registeredTabValues.includes(currentValue)) {
-      indicator.style.visibility = "hidden";
+      indicator.style.opacity = "0";
       return;
     }
     const cachedPosition = positionCacheRef.current.get(currentValue);
@@ -67,21 +66,7 @@ const TabIndicator = ({
     const indicatorWidth = indicatorWidthRef.current;
     const x = activeTabLeft + (activeTabWidth - indicatorWidth) / 2;
     indicator.style.transform = `translate(${x}px, 0px)`;
-    if (isFirstRender.current) {
-      Taro.nextTick(() => {
-        if (!isMountedRef.current || !indicatorRef.current)
-          return;
-        indicatorRef.current.style.visibility = "visible";
-        Taro.nextTick(() => {
-          if (!isMountedRef.current || !indicatorRef.current)
-            return;
-          indicatorRef.current.style.transition = "transform 0.3s ease-in-out";
-        });
-      });
-      isFirstRender.current = false;
-    } else {
-      indicator.style.visibility = "visible";
-    }
+    indicator.style.opacity = "1";
   });
   const initializePositions = useEventCallback(() => __async(void 0, null, function* () {
     if (!isMountedRef.current)
@@ -195,7 +180,7 @@ const TabIndicator = ({
   useEffect(() => {
     if (registeredTabValues.length === 0) {
       if (indicatorRef.current) {
-        indicatorRef.current.style.visibility = "hidden";
+        indicatorRef.current.style.opacity = "0";
       }
       return void 0;
     }
@@ -224,7 +209,7 @@ const TabIndicator = ({
   useEffect(() => {
     if (!isValidTabValue(currentValue)) {
       if (indicatorRef.current) {
-        indicatorRef.current.style.visibility = "hidden";
+        indicatorRef.current.style.opacity = "0";
       }
       return;
     }
@@ -273,9 +258,9 @@ const TabIndicator = ({
       id: `${wrapperId}-indicator`,
       className: clsx(tabIndicatorClass),
       style: {
-        transition: "none",
+        transition: "transform 0.3s ease-in-out, opacity 0.3s ease-in-out",
         transform: "translate(0px, 0px)",
-        visibility: "hidden"
+        opacity: 0
       }
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "2.0.0-alpha.18",
+  "version": "2.0.0-alpha.19",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -43,10 +43,10 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "2.0.0-alpha.18",
-    "@bifrostui/types": "2.0.0-alpha.18",
-    "@bifrostui/utils": "2.0.0-alpha.18",
-    "@bifrostui/styles": "2.0.0-alpha.18"
+    "@bifrostui/icons": "2.0.0-alpha.19",
+    "@bifrostui/styles": "2.0.0-alpha.19",
+    "@bifrostui/types": "2.0.0-alpha.19",
+    "@bifrostui/utils": "2.0.0-alpha.19"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",