@bifrostui/react 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/Tabs/Tabs.css

@@ -16,7 +16,6 @@ xhs-page {
   --bui-tab-height: 100%;
   --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
   --bui-tab-active-color: var(--bui-color-fg-default);
-  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
 }
 .bui-tabs {
   position: relative;
@@ -29,6 +28,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 +36,27 @@ 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);
   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);
+  pointer-events: none;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -74,7 +86,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

@@ -1,6 +1,8 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -18,6 +20,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -59,187 +62,126 @@ 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,
+    defaultValue,
+    value,
+    tabs = [],
+    onChange
+  } = _a, others = __objRest(_a, [
+    "children",
+    "className",
+    "defaultValue",
+    "value",
+    "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);
+  const [isScrollable, setIsScrollable] = (0, import_react.useState)(false);
+  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);
       }
-    ),
-    []
+    }
   );
+  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));
+    }
+    return children;
+  }, [tabs, children]);
   (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 tabsEl = tabsRef.current;
+    if (!tabsEl)
+      return void 0;
+    const checkScrollable = () => {
+      setIsScrollable(tabsEl.scrollWidth > tabsEl.offsetWidth);
     };
-  }, []);
-  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 });
+    checkScrollable();
+    if (typeof ResizeObserver === "undefined") {
+      return void 0;
     }
-  };
-  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"
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
+    const resizeObserver = new ResizeObserver(checkScrollable);
+    resizeObserver.observe(tabsEl);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [registrationVersion]);
+  return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({ className: (0, import_clsx.default)(import_classes.tabsRootClass, className) }, others), { ref }), isScrollable && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_TabMask.default, { position: "left" }), /* @__PURE__ */ import_react.default.createElement(import_TabMask.default, { position: "right" })), /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: `${prefixCls}-tabs`,
+      className: import_classes.tabsScrollClass,
       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
       }
     ),
-    /* @__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";

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,13 @@
+export declare const tabsRootClass = "bui-tabs";
+export declare const tabRootClass = "bui-tab";
+export declare const tabPanelRootClass = "bui-tabpanel";
+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;
+export declare const tabPanelActiveClass: string;
+export declare const tabPanelInactiveClass: string;

package/dist/Tabs/classes.js

@@ -0,0 +1,63 @@
+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,
+  tabPanelActiveClass: () => tabPanelActiveClass,
+  tabPanelInactiveClass: () => tabPanelInactiveClass,
+  tabPanelRootClass: () => tabPanelRootClass,
+  tabRootClass: () => tabRootClass,
+  tabsRootClass: () => tabsRootClass,
+  tabsScrollClass: () => tabsScrollClass,
+  tabsScrollWrapperClass: () => tabsScrollWrapperClass
+});
+module.exports = __toCommonJS(classes_exports);
+const tabsRootClass = "bui-tabs";
+const tabRootClass = "bui-tab";
+const tabPanelRootClass = "bui-tabpanel";
+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`;
+const tabPanelActiveClass = `${tabPanelRootClass}-active`;
+const tabPanelInactiveClass = `${tabPanelRootClass}-inactive`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tabActiveClass,
+  tabDisabledClass,
+  tabIndicatorClass,
+  tabMaskClass,
+  tabMaskLeftClass,
+  tabMaskRightClass,
+  tabPanelActiveClass,
+  tabPanelInactiveClass,
+  tabPanelRootClass,
+  tabRootClass,
+  tabsRootClass,
+  tabsScrollClass,
+  tabsScrollWrapperClass
+});

package/dist/Tabs/index.css

@@ -16,7 +16,6 @@ xhs-page {
   --bui-tab-height: 100%;
   --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
   --bui-tab-active-color: var(--bui-color-fg-default);
-  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
 }
 .bui-tabs {
   position: relative;
@@ -29,6 +28,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 +36,27 @@ 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);
   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);
+  pointer-events: none;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -74,12 +86,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;
@@ -97,33 +105,11 @@ xhs-page {
 .bui-tab-active {
   color: var(--bui-tab-active-color);
   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: 0;
-  left: -12px;
-  right: -12px;
-  margin: 0 auto !important;
-  width: 18px;
-  height: 2px;
-  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  background-color: var(--bui-color-primary);
 }
 .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';