@bifrostui/react 2.0.0-alpha.3 → 2.0.0-alpha.30

package/dist/Tabs/TabIndicator.js

@@ -0,0 +1,185 @@
+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"));
+var import_classes = require("./classes");
+const duration = 300;
+const DEFAULT_INDICATOR_WIDTH = 24;
+const TabIndicator = ({
+  currentValue,
+  registeredTabs,
+  tabsContainerRef
+}) => {
+  const indicatorRef = (0, import_react.useRef)(null);
+  const hasRenderedOnce = (0, import_react.useRef)(false);
+  const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(
+    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, animate = true) => {
+      const tabsEl = tabsContainerRef.current;
+      if (!tabsEl || !activeTab) {
+        return;
+      }
+      (0, import_scroll.default)(
+        tabsEl,
+        activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2,
+        animate ? duration : 0
+      );
+    }
+  );
+  const getIndicatorWidth = (0, import_utils.useEventCallback)(() => {
+    const indicator = indicatorRef.current;
+    if (!indicator)
+      return DEFAULT_INDICATOR_WIDTH;
+    const rect = indicator.getBoundingClientRect();
+    return rect.width > 0 ? rect.width : DEFAULT_INDICATOR_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 maxScrollDistance = tabsMeta.scrollWidth - tabsMeta.clientWidth;
+      if (maxScrollDistance > 0 && !import_utils.isMini) {
+        scrollIntoView(activeTab, hasRenderedOnce.current);
+      }
+      hasRenderedOnce.current = true;
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    updateIndicatorState();
+  });
+  (0, import_react.useEffect)(() => {
+    const tabsContainer = tabsContainerRef.current;
+    if (!tabsContainer)
+      return void 0;
+    const handleResize = (0, import_utils.debounce)(() => {
+      if (tabsContainerRef.current) {
+        updateIndicatorState();
+      }
+    }, 100);
+    window.addEventListener("resize", handleResize);
+    let resizeObserver;
+    let mutationObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(handleResize);
+      Array.from(tabsContainer.children).forEach((child) => {
+        resizeObserver == null ? void 0 : resizeObserver.observe(child);
+      });
+    }
+    if (typeof MutationObserver !== "undefined") {
+      const handleMutation = (records) => {
+        records.forEach((record) => {
+          record.removedNodes.forEach((item) => {
+            if (item instanceof Element) {
+              resizeObserver == null ? void 0 : resizeObserver.unobserve(item);
+            }
+          });
+          record.addedNodes.forEach((item) => {
+            if (item instanceof Element) {
+              resizeObserver == null ? void 0 : resizeObserver.observe(item);
+            }
+          });
+        });
+        handleResize();
+      };
+      mutationObserver = new MutationObserver(handleMutation);
+      mutationObserver.observe(tabsContainer, { childList: true });
+    }
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      mutationObserver == null ? void 0 : mutationObserver.disconnect();
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    };
+  }, [updateIndicatorState, tabsContainerRef]);
+  if (!indicatorStyle) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: indicatorRef,
+      className: (0, import_clsx.default)(import_classes.tabIndicatorClass),
+      style: indicatorStyle,
+      "aria-hidden": "true"
+    }
+  );
+};
+TabIndicator.displayName = "BuiTabsIndicator";
+var TabIndicator_default = TabIndicator;

package/dist/Tabs/TabMask.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface TabMaskProps {
+    /** 位置：左侧或右侧 */
+    position: 'left' | 'right';
+}
+declare const _default: React.NamedExoticComponent<TabMaskProps>;
+export default _default;

package/dist/Tabs/TabMask.js

@@ -0,0 +1,47 @@
+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_classes = require("./classes");
+const TabMask = ({ position }) => /* @__PURE__ */ import_react.default.createElement(
+  "div",
+  {
+    className: (0, import_clsx.default)(
+      import_classes.tabMaskClass,
+      position === "left" ? import_classes.tabMaskLeftClass : import_classes.tabMaskRightClass
+    ),
+    "aria-hidden": "true"
+  }
+);
+TabMask.displayName = "BuiTabsMask";
+var TabMask_default = /* @__PURE__ */ import_react.default.memo(TabMask);

package/dist/Tabs/TabPanel.js

@@ -58,8 +58,8 @@ __export(TabPanel_exports, {
 module.exports = __toCommonJS(TabPanel_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
+var import_classes = require("./classes");
 var import_TabPanel2 = require("./TabPanel.css");
-const prefixCls = "bui-tabpanel";
 const TabPanel = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
@@ -83,9 +83,9 @@ const TabPanel = (0, import_react.forwardRef)((props, ref) => {
       "aria-hidden": !isActive,
       tabIndex: 0,
       ref,
-      className: (0, import_clsx.default)(prefixCls, className, {
-        [`${prefixCls}-active`]: isActive,
-        [`${prefixCls}-inactive`]: !isActive
+      className: (0, import_clsx.default)(import_classes.tabPanelRootClass, className, {
+        [import_classes.tabPanelActiveClass]: isActive,
+        [import_classes.tabPanelInactiveClass]: !isActive
       })
     }, others),
     isActive ? children : keepActiveDom

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

@@ -2,6 +2,7 @@
 page,
 xhs-page {
   --bui-tabs-height: 39px;
+  --bui-tabs-padding: 0;
   --bui-tabs-font-weight: var(--bui-font-weight-medium);
   --bui-tabs-indicator-bg: var(--bui-color-primary);
   --bui-tabs-indicator-height: 3PX;
@@ -16,10 +17,10 @@ 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;
+  padding: var(--bui-tabs-padding);
   font-family: var(--bui-font-family);
   font-weight: var(--bui-tabs-font-weight);
 }
@@ -29,6 +30,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 +38,28 @@ xhs-page {
 .bui-tabs-tabs::-webkit-scrollbar {
   display: none;
 }
+.bui-tabs-scroll-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  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 +89,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,128 @@ 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 = () => {
+      const { scrollWidth = 0, offsetWidth = 0 } = tabsEl;
+      const isOverflow = scrollWidth - offsetWidth > 1;
+      setIsScrollable(isOverflow);
     };
-  }, []);
-  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;
         /**
          * 切换面板的数据
          */