react-native-system-ui 0.0.4 → 0.0.6

package/dist/cjs/components/tabs/Tabs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TabPane = void 0;
 function _react() {
   const data = _interopRequireWildcard(require("react"));
   _react = function () {
@@ -22,11 +22,191 @@ var _hooks = require("../../hooks");
 var _number = require("../../utils/number");
 var _validate = require("../../utils/validate");
 var _tokens = require("./tokens");
-var _utils = require("./utils");
-var _useTabsAnimation = require("./useTabsAnimation");
-var _useTabsScroll = require("./useTabsScroll");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const TabPane = () => null;
+exports.TabPane = TabPane;
+TabPane.displayName = 'Tabs.TabPane';
+const canUseRaf = typeof requestAnimationFrame !== 'undefined' && (0, _validate.isFunction)(requestAnimationFrame) && typeof cancelAnimationFrame !== 'undefined' && (0, _validate.isFunction)(cancelAnimationFrame);
+const requestFrame = canUseRaf ? cb => requestAnimationFrame(cb) : cb => setTimeout(cb, 16);
+const cancelFrame = id => {
+  if (id == null) return;
+  if (canUseRaf) {
+    cancelAnimationFrame(id);
+  } else {
+    clearTimeout(id);
+  }
+};
+const isTabPaneElement = child => {
+  if (! /*#__PURE__*/_react().default.isValidElement(child)) return false;
+  if (child.type === TabPane) return true;
+  const type = child.type;
+  return type.displayName === 'Tabs.TabPane';
+};
+const useTabsAnimation = ({
+  type,
+  animated,
+  scrollable,
+  align,
+  panes,
+  nameIndexMap,
+  resolvedLineWidth,
+  resolvedDuration,
+  currentName,
+  layoutMap,
+  navContainerWidthRef
+}) => {
+  const indicatorX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const indicatorWidth = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const indicatorInitializedRef = (0, _react().useRef)(false);
+  const animateIndicator = (0, _react().useCallback)((name, immediate) => {
+    if (name == null || type !== 'line') return false;
+    const shouldUseEqualWidth = !scrollable && align !== 'start' && navContainerWidthRef.current > 0 && panes.length > 0;
+    const index = nameIndexMap.get(name) ?? -1;
+    const equalTabWidth = shouldUseEqualWidth ? navContainerWidthRef.current / panes.length : 0;
+    const layout = shouldUseEqualWidth ? {
+      x: Math.max(index, 0) * equalTabWidth,
+      width: equalTabWidth
+    } : layoutMap.current.get(name);
+    if (!layout || index < 0) {
+      return false;
+    }
+    const timing = (value, toValue) => _reactNative().Animated.timing(value, {
+      toValue,
+      duration: immediate || !animated ? 0 : resolvedDuration,
+      useNativeDriver: false
+    });
+    const targetWidth = resolvedLineWidth ?? layout.width;
+    const targetX = resolvedLineWidth ? layout.x + (layout.width - targetWidth) / 2 : layout.x;
+    _reactNative().Animated.parallel([timing(indicatorX, targetX), timing(indicatorWidth, targetWidth)]).start();
+    return true;
+  }, [align, animated, indicatorWidth, indicatorX, nameIndexMap, panes.length, resolvedDuration, resolvedLineWidth, scrollable, type, layoutMap, navContainerWidthRef]);
+  (0, _react().useEffect)(() => {
+    if (currentName == null) return;
+    const shouldAnimate = indicatorInitializedRef.current;
+    const didAnimate = animateIndicator(currentName, !shouldAnimate);
+    if (didAnimate && !indicatorInitializedRef.current) {
+      indicatorInitializedRef.current = true;
+    }
+  }, [animateIndicator, currentName]);
+  return {
+    indicatorX,
+    indicatorWidth,
+    indicatorInitializedRef,
+    animateIndicator
+  };
+};
+const useTabsScroll = ({
+  scrollable,
+  animated,
+  currentName,
+  resolvedDuration,
+  layoutMap,
+  navContainerWidthRef,
+  navContentWidthRef
+}) => {
+  const navScrollRef = (0, _react().useRef)(null);
+  const navScrollX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const navScrollAnimRef = (0, _react().useRef)(null);
+  const navAutoScrollingRef = (0, _react().useRef)(false);
+  const navLastScrollXRef = (0, _react().useRef)(0);
+  const navAutoScrollFrameRef = (0, _react().useRef)(null);
+  const scrollIntoView = (0, _react().useCallback)(immediate => {
+    if (!scrollable || currentName == null) return;
+    const layout = layoutMap.current.get(currentName);
+    const containerWidth = navContainerWidthRef.current;
+    if (!layout || !containerWidth) return;
+    const contentWidth = navContentWidthRef.current;
+    const targetX = layout.x - (containerWidth - layout.width) / 2;
+    const maxScroll = Math.max(contentWidth - containerWidth, 0);
+    const clampedX = Math.max(0, Math.min(targetX, maxScroll));
+    if (maxScroll <= 0) {
+      return;
+    }
+    if (Math.abs(clampedX - navLastScrollXRef.current) < 1) {
+      return;
+    }
+    if (navScrollAnimRef.current) {
+      navScrollAnimRef.current.stop();
+      navScrollAnimRef.current = null;
+    }
+    cancelFrame(navAutoScrollFrameRef.current);
+    navAutoScrollFrameRef.current = null;
+    if (immediate || !animated) {
+      navAutoScrollingRef.current = true;
+      navScrollX.setValue(clampedX);
+      navAutoScrollFrameRef.current = requestFrame(() => {
+        navAutoScrollFrameRef.current = null;
+        navAutoScrollingRef.current = false;
+      });
+      return;
+    }
+    navScrollX.setValue(navLastScrollXRef.current);
+    navAutoScrollingRef.current = true;
+    navScrollAnimRef.current = _reactNative().Animated.timing(navScrollX, {
+      toValue: clampedX,
+      duration: resolvedDuration,
+      useNativeDriver: false
+    });
+    navScrollAnimRef.current.start(({
+      finished
+    }) => {
+      navScrollAnimRef.current = null;
+      navAutoScrollingRef.current = false;
+      if (!finished) {
+        return;
+      }
+      navLastScrollXRef.current = clampedX;
+    });
+  }, [animated, currentName, navScrollX, resolvedDuration, scrollable, layoutMap, navContainerWidthRef, navContentWidthRef]);
+  (0, _react().useEffect)(() => {
+    if (!scrollable) return;
+    const listenerId = navScrollX.addListener(({
+      value
+    }) => {
+      const prev = navLastScrollXRef.current;
+      navLastScrollXRef.current = value;
+      if (Math.abs(value - prev) < 0.5) {
+        return;
+      }
+      navScrollRef.current?.scrollTo({
+        x: value,
+        y: 0,
+        animated: false
+      });
+    });
+    return () => {
+      navScrollX.removeListener(listenerId);
+    };
+  }, [navScrollX, scrollable]);
+  (0, _react().useEffect)(() => {
+    return () => {
+      cancelFrame(navAutoScrollFrameRef.current);
+      navAutoScrollFrameRef.current = null;
+    };
+  }, []);
+  const handleNavScrollBeginDrag = (0, _react().useCallback)(event => {
+    navAutoScrollingRef.current = false;
+    if (navScrollAnimRef.current) {
+      navScrollAnimRef.current.stop();
+      navScrollAnimRef.current = null;
+    }
+    navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
+  }, []);
+  const handleNavScroll = (0, _react().useCallback)(event => {
+    if (navAutoScrollingRef.current) {
+      return;
+    }
+    navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
+  }, []);
+  return {
+    navScrollRef,
+    navScrollX,
+    scrollIntoView,
+    handleNavScrollBeginDrag,
+    handleNavScroll
+  };
+};
 const TabBarItemInner = ({
   pane,
   isActive,
@@ -67,8 +247,9 @@ const TabBarItemInner = ({
   const textColor = pane.disabled ? tokens.colors.textDisabled : isActive ? activeTitleColor : inactiveTitleColor;
   const descriptionColor = isDisabled ? tokens.colors.textDisabled : isJumbo ? isActive ? tokens.colors.jumboDescriptionActive : tokens.colors.jumboDescription : isActive ? tokens.colors.descriptionActive : tokens.colors.description;
   const shouldFlex = !scrollable && (align !== 'start' || isCard);
-  const horizontalPadding = isCard || isJumbo || isCapsule ? 0 : tokens.tabList.paddingHorizontal;
-  const verticalPadding = isCard || isJumbo || isCapsule ? 0 : tokens.tabList.paddingVertical;
+  const isCompactType = isCard || isJumbo || isCapsule;
+  const horizontalPadding = isCompactType ? 0 : tokens.tabList.paddingHorizontal;
+  const verticalPadding = isCompactType ? 0 : tokens.tabList.paddingVertical;
   const labelWrapperStyles = [styles.labelWrapper];
   const labelTextWrapperStyles = isCapsule ? [{
     flex: 1,
@@ -105,6 +286,34 @@ const TabBarItemInner = ({
       alignItems: 'center'
     });
   }
+  const titleTextStyle = [styles.title, {
+    color: textColor,
+    fontSize: isJumbo ? tokens.typography.jumboTitleSize : tokens.typography.titleSize,
+    fontWeight: isActive ? tokens.typography.titleActiveWeight : tokens.typography.titleWeight,
+    lineHeight: isJumbo ? tokens.typography.jumboLineHeight : undefined,
+    textAlign: 'center'
+  }, ellipsis && !isJumbo ? styles.ellipsis : null, titleStyle];
+  const titleNode = /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: titleTextStyle,
+    numberOfLines: ellipsis && !isJumbo ? 1 : undefined
+  }, renderTitle);
+  const descriptionMarginTop = isJumbo ? tokens.spacing.jumboDescriptionMarginTop : tokens.spacing.descriptionMarginTop;
+  const descriptionJumboStyle = isJumbo ? {
+    backgroundColor: isActive ? tokens.colors.jumboDescriptionActiveBackground : tokens.colors.jumboDescriptionBackground,
+    paddingHorizontal: tokens.jumbo.descriptionPaddingHorizontal,
+    paddingVertical: tokens.jumbo.descriptionPaddingVertical,
+    borderRadius: tokens.jumbo.descriptionRadius
+  } : null;
+  const descriptionTextStyle = [styles.descriptionText, {
+    color: descriptionColor,
+    fontSize: tokens.typography.descriptionSize,
+    marginTop: descriptionMarginTop,
+    textAlign: 'center'
+  }, descriptionJumboStyle, descriptionStyle];
+  const descriptionViewStyle = [styles.descriptionView, {
+    marginTop: descriptionMarginTop,
+    alignItems: 'center'
+  }, descriptionJumboStyle];
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, ariaPress.interactionProps, {
     onLayout: event => onLayout(pane.name, event),
     style: [styles.tabItem, shouldFlex ? styles.flexItem : null, {
@@ -119,52 +328,10 @@ const TabBarItemInner = ({
     style: labelWrapperStyles
   }, labelTextWrapperStyles ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: labelTextWrapperStyles
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.title, {
-      color: textColor,
-      fontSize: isJumbo ? tokens.typography.jumboTitleSize : tokens.typography.titleSize,
-      fontWeight: isActive ? tokens.typography.titleActiveWeight : tokens.typography.titleWeight,
-      lineHeight: isJumbo ? tokens.typography.jumboLineHeight : undefined,
-      textAlign: 'center'
-    }, ellipsis && !isJumbo ? styles.ellipsis : null, titleStyle],
-    numberOfLines: ellipsis && !isJumbo ? 1 : undefined
-  }, renderTitle)) : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.title, {
-      color: textColor,
-      fontSize: isJumbo ? tokens.typography.jumboTitleSize : tokens.typography.titleSize,
-      fontWeight: isActive ? tokens.typography.titleActiveWeight : tokens.typography.titleWeight,
-      lineHeight: isJumbo ? tokens.typography.jumboLineHeight : undefined,
-      textAlign: 'center'
-    }, ellipsis && !isJumbo ? styles.ellipsis : null, titleStyle],
-    numberOfLines: ellipsis && !isJumbo ? 1 : undefined
-  }, renderTitle), (0, _validate.isRenderable)(renderDescription) && ((0, _validate.isText)(renderDescription) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.descriptionText, isJumbo ? {
-      color: descriptionColor,
-      fontSize: tokens.typography.descriptionSize,
-      marginTop: tokens.spacing.jumboDescriptionMarginTop,
-      textAlign: 'center',
-      backgroundColor: isActive ? tokens.colors.jumboDescriptionActiveBackground : tokens.colors.jumboDescriptionBackground,
-      paddingHorizontal: tokens.jumbo.descriptionPaddingHorizontal,
-      paddingVertical: tokens.jumbo.descriptionPaddingVertical,
-      borderRadius: tokens.jumbo.descriptionRadius
-    } : {
-      color: descriptionColor,
-      fontSize: tokens.typography.descriptionSize,
-      marginTop: tokens.spacing.descriptionMarginTop,
-      textAlign: 'center'
-    }, descriptionStyle]
+  }, titleNode) : titleNode, (0, _validate.isRenderable)(renderDescription) && ((0, _validate.isText)(renderDescription) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: descriptionTextStyle
   }, renderDescription) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.descriptionView, isJumbo ? {
-      marginTop: tokens.spacing.jumboDescriptionMarginTop,
-      alignItems: 'center',
-      backgroundColor: isActive ? tokens.colors.jumboDescriptionActiveBackground : tokens.colors.jumboDescriptionBackground,
-      paddingHorizontal: tokens.jumbo.descriptionPaddingHorizontal,
-      paddingVertical: tokens.jumbo.descriptionPaddingVertical,
-      borderRadius: tokens.jumbo.descriptionRadius
-    } : {
-      marginTop: tokens.spacing.descriptionMarginTop,
-      alignItems: 'center'
-    }]
+    style: descriptionViewStyle
   }, renderDescription)), (0, _validate.isRenderable)(pane.badge) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [styles.badge, {
       marginTop: tokens.spacing.badgeMarginTop
@@ -234,7 +401,7 @@ const TabsBaseInner = (props, ref) => {
     preventScroll: true
   };
   const isSwipeable = !!swipeableConfig;
-  const panes = (() => {
+  const panes = (0, _react().useMemo)(() => {
     const result = [];
     let paneIndex = 0;
     const walk = nodes => {
@@ -245,7 +412,7 @@ const TabsBaseInner = (props, ref) => {
           walk(element.props.children);
           return;
         }
-        if (!(0, _utils.isTabPaneElement)(element)) {
+        if (!isTabPaneElement(element)) {
           return;
         }
         const paneProps = element.props;
@@ -261,7 +428,7 @@ const TabsBaseInner = (props, ref) => {
     };
     walk(children);
     return result;
-  })();
+  }, [children]);
   const firstPaneName = panes[0]?.name;
   const [activeValue, setActiveValue] = (0, _hooks.useControllableValue)(props, {
     defaultValue: firstPaneName,
@@ -274,13 +441,13 @@ const TabsBaseInner = (props, ref) => {
   (0, _react().useEffect)(() => {
     currentNameRef.current = currentName;
   }, [currentName]);
-  const nameIndexMap = (() => {
+  const nameIndexMap = (0, _react().useMemo)(() => {
     const map = new Map();
     panes.forEach(pane => {
       map.set(pane.name, pane.index);
     });
     return map;
-  })();
+  }, [panes]);
   const activeIndex = currentName == null ? -1 : nameIndexMap.get(currentName) ?? -1;
   const visitedRef = (0, _react().useRef)(new Set());
   (0, _react().useEffect)(() => {
@@ -325,7 +492,7 @@ const TabsBaseInner = (props, ref) => {
   const [swipeableHeight, setSwipeableHeight] = (0, _react().useState)(undefined);
   (0, _react().useEffect)(() => {
     return () => {
-      (0, _utils.cancelFrame)(navContentSizeSyncFrameRef.current);
+      cancelFrame(navContentSizeSyncFrameRef.current);
       navContentSizeSyncFrameRef.current = null;
     };
   }, []);
@@ -337,7 +504,7 @@ const TabsBaseInner = (props, ref) => {
     indicatorWidth,
     indicatorInitializedRef,
     animateIndicator
-  } = (0, _useTabsAnimation.useTabsAnimation)({
+  } = useTabsAnimation({
     type,
     animated,
     scrollable,
@@ -356,7 +523,7 @@ const TabsBaseInner = (props, ref) => {
     scrollIntoView,
     handleNavScrollBeginDrag,
     handleNavScroll
-  } = (0, _useTabsScroll.useTabsScroll)({
+  } = useTabsScroll({
     scrollable,
     animated,
     currentName,
@@ -504,20 +671,23 @@ const TabsBaseInner = (props, ref) => {
   if (panes.length === 0) {
     return null;
   }
-  const indicatorNode = showIndicator ? /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    testID: "rv-tabs-indicator",
-    style: [styles.indicator, {
-      height: resolvedLineHeight,
-      borderRadius: indicatorCornerRadius,
-      backgroundColor: indicatorColor,
-      width: indicatorWidth,
-      bottom: indicatorBottom,
-      transform: [{
-        translateX: indicatorX
+  const indicatorNode = (0, _react().useMemo)(() => {
+    if (!showIndicator) return null;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+      testID: "rv-tabs-indicator",
+      style: [styles.indicator, {
+        height: resolvedLineHeight,
+        borderRadius: indicatorCornerRadius,
+        backgroundColor: indicatorColor,
+        width: indicatorWidth,
+        bottom: indicatorBottom,
+        transform: [{
+          translateX: indicatorX
+        }]
       }]
-    }]
-  }) : null;
-  const navItems = panes.map(pane => /*#__PURE__*/_react().default.createElement(TabBarItem, {
+    });
+  }, [indicatorBottom, indicatorColor, indicatorCornerRadius, indicatorWidth, indicatorX, resolvedLineHeight, showIndicator]);
+  const navItems = (0, _react().useMemo)(() => panes.map(pane => /*#__PURE__*/_react().default.createElement(TabBarItem, {
     key: pane.key,
     pane: pane,
     isActive: pane.name === currentName,
@@ -535,7 +705,22 @@ const TabsBaseInner = (props, ref) => {
     onSelect: handleSelect,
     onLayout: handleTabLayout,
     isLast: pane.index === panes.length - 1
-  }));
+  })), [align, color, currentName, descriptionStyle, ellipsis, handleSelect, handleTabLayout, panes, scrollable, tabStyle, titleActiveColor, titleInactiveColor, titleStyle, tokens, type]);
+  const handleNavContentSizeChange = (0, _react().useCallback)(w => {
+    const prev = navContentWidthRef.current;
+    navContentWidthRef.current = w;
+    if (prev === 0 || firstRenderRef.current) {
+      scrollIntoView(true);
+      return;
+    }
+    if (Math.abs(w - prev) > 1) {
+      cancelFrame(navContentSizeSyncFrameRef.current);
+      navContentSizeSyncFrameRef.current = requestFrame(() => {
+        navContentSizeSyncFrameRef.current = null;
+        scrollIntoView();
+      });
+    }
+  }, [scrollIntoView]);
   const navBody = scrollable ? /*#__PURE__*/_react().default.createElement(_reactNative().ScrollView, {
     horizontal: true,
     ref: navScrollRef,
@@ -544,21 +729,7 @@ const TabsBaseInner = (props, ref) => {
     scrollEventThrottle: 16,
     onScrollBeginDrag: handleNavScrollBeginDrag,
     onScroll: handleNavScroll,
-    onContentSizeChange: w => {
-      const prev = navContentWidthRef.current;
-      navContentWidthRef.current = w;
-      if (prev === 0 || firstRenderRef.current) {
-        scrollIntoView(true);
-        return;
-      }
-      if (Math.abs(w - prev) > 1) {
-        (0, _utils.cancelFrame)(navContentSizeSyncFrameRef.current);
-        navContentSizeSyncFrameRef.current = (0, _utils.requestFrame)(() => {
-          navContentSizeSyncFrameRef.current = null;
-          scrollIntoView();
-        });
-      }
-    },
+    onContentSizeChange: handleNavContentSizeChange,
     contentContainerStyle: styles.navContent
   }, navItems, indicatorNode) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     accessibilityRole: "tablist",
@@ -592,7 +763,7 @@ const TabsBaseInner = (props, ref) => {
       paddingHorizontal: tokens.spacing.navSidePaddingHorizontal
     }]
   }, navRight));
-  const paneNodes = panes.map(pane => {
+  const paneNodes = (0, _react().useMemo)(() => panes.map(pane => {
     const isActive = pane.name === currentName;
     const shouldRender = !lazyRender || isActive || visitedRef.current.has(pane.name);
     if (!shouldRender && !isSwipeable) {
@@ -609,11 +780,11 @@ const TabsBaseInner = (props, ref) => {
       onLayout: layoutHandler,
       style: paneStyles
     }, paneContent);
-  });
-  const baseContentStyle = [styles.content, contentStyle];
-  const swipeableContentStyle = [styles.content, contentStyle, swipeableConfig?.autoHeight && swipeableHeight !== undefined && {
+  }), [containerWidth, currentName, handlePaneLayout, isSwipeable, lazyRender, lazyRenderPlaceholder, panes, swipeableConfig?.autoHeight]);
+  const baseContentStyle = (0, _react().useMemo)(() => [styles.content, contentStyle], [contentStyle]);
+  const swipeableContentStyle = (0, _react().useMemo)(() => [styles.content, contentStyle, swipeableConfig?.autoHeight && swipeableHeight !== undefined && {
     height: swipeableHeight
-  }];
+  }], [contentStyle, swipeableConfig?.autoHeight, swipeableHeight]);
   const contentNode = isSwipeable ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: swipeableContentStyle
   }, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.ScrollView, {
@@ -720,4 +891,7 @@ const styles = _reactNative().StyleSheet.create({
 });
 const TabsBase = /*#__PURE__*/_react().default.forwardRef(TabsBaseInner);
 TabsBase.displayName = 'Tabs';
-var _default = exports.default = TabsBase;
+const TabsWithPane = Object.assign(TabsBase, {
+  TabPane
+});
+var _default = exports.default = TabsWithPane;

package/dist/cjs/components/tabs/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "TabPane", {
   enumerable: true,
   get: function () {
-    return _TabPane.default;
+    return _Tabs.TabPane;
   }
 });
 exports.default = void 0;
@@ -16,11 +16,10 @@ Object.defineProperty(exports, "useTabsTokens", {
     return _tokens.useTabsTokens;
   }
 });
-var _Tabs = _interopRequireDefault(require("./Tabs"));
-var _TabPane = _interopRequireDefault(require("./TabPane"));
+var _Tabs = _interopRequireWildcard(require("./Tabs"));
 var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Tabs = Object.assign(_Tabs.default, {
-  TabPane: _TabPane.default
+  TabPane: _Tabs.TabPane
 });
 var _default = exports.default = Tabs;