@hanwenbo/x-taro-ui 0.0.1

package/lib/components/tabs/tabs.js

@@ -0,0 +1,785 @@
+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);
+
+// src/components/tabs/tabs.tsx
+var tabs_exports = {};
+__export(tabs_exports, {
+  TabItem: () => TabItem,
+  TabPane: () => TabPane,
+  Tabs: () => Tabs,
+  default: () => tabs_default
+});
+module.exports = __toCommonJS(tabs_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_measure = require("../../adapters/miniapp/measure");
+var import_patterns = require("../../patterns");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_inlineAlignment = require("../../utils/inlineAlignment");
+var import_configProvider = require("../configProvider");
+var import_useTaroSelectionIndicator = require("../internal/selectionControl/useTaroSelectionIndicator");
+var import_useTaroScrollIntoView = require("../internal/selectionControl/useTaroScrollIntoView");
+var TabItem = ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
+TabItem.displayName = "TabItem";
+var TabPane = ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
+TabPane.displayName = "TabPane";
+function nodeToText(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) {
+    const text = node.map(nodeToText).filter(Boolean).join("");
+    return text || void 0;
+  }
+  if (import_react.default.isValidElement(node)) return nodeToText(node.props.children);
+  return void 0;
+}
+function isActivationKey(key) {
+  return key === "Enter" || key === " " || key === "Spacebar";
+}
+function TabsTrigger({
+  active,
+  ariaControls,
+  ariaLabel,
+  children,
+  className,
+  disabled,
+  id,
+  onNavigate,
+  onPress,
+  prefixCls,
+  style,
+  triggerRef
+}) {
+  const [focused, setFocused] = (0, import_react.useState)(false);
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const {
+    pressed,
+    handlers,
+    style: pressStyle
+  } = (0, import_patterns.usePressable)({ disabled, onPress, scale: 0.985 });
+  const triggerState = { focused, hovered, pressed };
+  const handleKeyDown = (event) => {
+    var _a;
+    const key = event.key;
+    if (disabled) return;
+    if (isActivationKey(key)) {
+      (_a = event.preventDefault) == null ? void 0 : _a.call(event);
+      handlers.onMouseDown();
+      return;
+    }
+    onNavigate(event);
+  };
+  const handleKeyUp = (event) => {
+    var _a;
+    const key = event.key;
+    if (disabled || !isActivationKey(key)) return;
+    (_a = event.preventDefault) == null ? void 0 : _a.call(event);
+    handlers.onMouseUp();
+    onPress();
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      ref: triggerRef,
+      id,
+      className: (0, import_utils.classNames)(
+        `${prefixCls}-tabs__trigger`,
+        active && `${prefixCls}-tabs__trigger--active`,
+        disabled && `${prefixCls}-tabs__trigger--disabled`,
+        focused && `${prefixCls}-tabs__trigger--focused`,
+        hovered && `${prefixCls}-tabs__trigger--hovered`,
+        pressed && `${prefixCls}-tabs__trigger--pressed`,
+        className
+      ),
+      "data-slot": "tabs-trigger",
+      "data-active": active ? "true" : "false",
+      "data-disabled": disabled ? "true" : "false",
+      "data-focused": focused ? "true" : "false",
+      "data-hovered": hovered ? "true" : "false",
+      "data-pressed": pressed ? "true" : "false",
+      role: "tab",
+      ariaRole: "tab",
+      ariaLabel,
+      "aria-controls": ariaControls,
+      "aria-disabled": disabled,
+      "aria-selected": active,
+      tabIndex: active && !disabled ? 0 : -1,
+      onBlur: () => {
+        setFocused(false);
+        handlers.onMouseLeave();
+      },
+      onFocus: () => {
+        if (!disabled) setFocused(true);
+      },
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      onClick: handlers.onClick,
+      onMouseDown: handlers.onMouseDown,
+      onMouseEnter: () => {
+        if (!disabled) setHovered(true);
+      },
+      onMouseLeave: () => {
+        setHovered(false);
+        handlers.onMouseLeave();
+      },
+      onMouseUp: handlers.onMouseUp,
+      onTouchCancel: handlers.onTouchCancel,
+      onTouchEnd: handlers.onTouchEnd,
+      onTouchStart: handlers.onTouchStart,
+      style: {
+        opacity: disabled ? 0.4 : pressed ? 0.88 : 1,
+        ...pressStyle,
+        ...style(triggerState)
+      }
+    },
+    children(triggerState)
+  );
+}
+function normalizeChildItems(children) {
+  return import_react.default.Children.toArray(children).flatMap((child) => {
+    var _a, _b;
+    if (!import_react.default.isValidElement(child)) return [];
+    if (child.type === TabItem || ((_a = child.type) == null ? void 0 : _a.displayName) === "TabItem") {
+      const key = String(child.props.tabKey ?? child.key).replace(/^\.\$?/, "");
+      return [
+        {
+          key,
+          title: child.props.title,
+          icon: child.props.icon,
+          badge: child.props.badge,
+          content: child.props.children,
+          children: child.props.children,
+          className: child.props.className,
+          style: child.props.style
+        }
+      ];
+    }
+    if (child.type === TabPane || ((_b = child.type) == null ? void 0 : _b.displayName) === "TabPane") {
+      const key = String(child.key).replace(/^\.\$?/, "");
+      return [
+        {
+          key,
+          title: child.props.tab,
+          content: child.props.children,
+          children: child.props.children,
+          disabled: child.props.disabled,
+          forceRender: child.props.forceRender
+        }
+      ];
+    }
+    return [];
+  });
+}
+var Tabs = import_react.default.forwardRef(
+  ({
+    activeKey,
+    defaultActiveKey,
+    items,
+    children,
+    position = "top",
+    size: sizeProp,
+    type = "line",
+    centered = false,
+    activeColor,
+    activeTextColor,
+    inactiveColor,
+    inactiveTextColor,
+    barColor = "transparent",
+    barHeight = 40,
+    scrollable = false,
+    textStyle,
+    activeTextStyle,
+    indicatorColor,
+    showIndicator,
+    indicatorWidth,
+    indicatorVisible = true,
+    indicatorHeight = 4,
+    indicatorBorderRadius = 0,
+    indicatorLayout = "bottom",
+    indicatorWhiteSpaceRatio = 0.35,
+    stretch = true,
+    renderTab,
+    tabBarExtraContent,
+    tabBarStyle,
+    headerStyle,
+    contentStyle,
+    disabled: disabledProp,
+    tabClassName,
+    tabStyle,
+    onPress,
+    indicatorStyle,
+    onChange,
+    onTabClick,
+    variant = "default",
+    fadeMaskEnabled = true,
+    fadeMaskColor,
+    allowFontScaling = false,
+    className,
+    style
+  }, ref) => {
+    var _a;
+    const config = (0, import_configProvider.useConfigProvider)();
+    const { colors, radius } = (0, import_theme.useTokens)();
+    const prefixCls = config.prefixCls;
+    const size = sizeProp ?? config.componentSize;
+    const disabled = disabledProp ?? config.disabled;
+    const metrics = import_theme.tabsSizeMetrics[size];
+    const childItems = (0, import_react.useMemo)(() => normalizeChildItems(children), [children]);
+    const resolvedItems = items !== void 0 ? items : childItems;
+    const firstEnabledKey = (_a = resolvedItems.find((item) => !item.disabled)) == null ? void 0 : _a.key;
+    const [internalActiveKey, setInternalActiveKey] = (0, import_react.useState)(() => {
+      const defaultItem = resolvedItems.find((item) => item.key === defaultActiveKey);
+      return defaultItem && !defaultItem.disabled ? defaultItem.key : firstEnabledKey;
+    });
+    const [scrollMasks, setScrollMasks] = (0, import_react.useState)({ left: false, right: false });
+    const scrollPositionRef = (0, import_react.useRef)(0);
+    const maskMeasureRequestRef = (0, import_react.useRef)(0);
+    const triggerRefs = (0, import_react.useRef)({});
+    const controlled = activeKey !== void 0;
+    const currentKey = controlled ? activeKey : internalActiveKey ?? firstEnabledKey;
+    const activeIndex = resolvedItems.findIndex((item) => item.key === currentKey);
+    const isHorizontal = position === "top" || position === "bottom";
+    const verticalTabBarWidth = 104;
+    const hasPanels = resolvedItems.some(
+      (item) => item.content !== void 0 || item.children !== void 0
+    );
+    const visibleIndicator = showIndicator ?? indicatorVisible;
+    const shouldShowIndicator = isHorizontal && type === "line" && visibleIndicator && resolvedItems.length > 0;
+    const {
+      containerId,
+      itemId,
+      indicatorStyle: measuredIndicatorStyle
+    } = (0, import_useTaroSelectionIndicator.useTaroSelectionIndicator)({
+      activeKey: shouldShowIndicator ? currentKey ?? null : null,
+      enabled: shouldShowIndicator,
+      mode: "tabs",
+      indicatorWidth: typeof indicatorWidth === "number" ? indicatorWidth : void 0,
+      indicatorWhiteSpaceRatio
+    });
+    const scrollContainerId = `${containerId}-scroll`;
+    const {
+      recordScroll,
+      scrollIntoView: scrollTarget,
+      scrollLeft,
+      scrollToKey
+    } = (0, import_useTaroScrollIntoView.useTaroScrollIntoView)({
+      activeKey: currentKey,
+      containerId: scrollContainerId,
+      enabled: isHorizontal && scrollable,
+      itemId
+    });
+    (0, import_react.useEffect)(() => {
+      if (controlled) return;
+      const activeItem = resolvedItems.find((item) => item.key === currentKey);
+      if (!activeItem || activeItem.disabled) {
+        setInternalActiveKey(firstEnabledKey);
+      }
+    }, [controlled, currentKey, firstEnabledKey, resolvedItems]);
+    const setActive = (0, import_react.useCallback)(
+      (nextKey) => {
+        const targetItem = resolvedItems.find((item) => item.key === nextKey);
+        if (disabled || !targetItem || targetItem.disabled) return;
+        if (!controlled) setInternalActiveKey(nextKey);
+        if (scrollable) scrollToKey(nextKey);
+        onPress == null ? void 0 : onPress(nextKey);
+        onChange == null ? void 0 : onChange(nextKey);
+      },
+      [controlled, disabled, onChange, onPress, resolvedItems, scrollToKey, scrollable]
+    );
+    const handleTabClick = (0, import_react.useCallback)(
+      (item) => {
+        onTabClick == null ? void 0 : onTabClick(item.key);
+        setActive(item.key);
+      },
+      [onTabClick, setActive]
+    );
+    const focusTab = (0, import_react.useCallback)((key) => {
+      var _a2, _b;
+      (_b = (_a2 = triggerRefs.current[key]) == null ? void 0 : _a2.focus) == null ? void 0 : _b.call(_a2);
+    }, []);
+    const handleNavigate = (0, import_react.useCallback)(
+      (sourceKey, event) => {
+        var _a2;
+        const keyboardEvent = event;
+        const key = keyboardEvent.key;
+        const forwardKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+        const backwardKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+        if (disabled || !key || ![forwardKey, backwardKey, "Home", "End"].includes(key)) return;
+        const enabledItems = resolvedItems.filter((item) => !item.disabled);
+        (_a2 = keyboardEvent.preventDefault) == null ? void 0 : _a2.call(keyboardEvent);
+        const sourceIndex = enabledItems.findIndex((item) => item.key === sourceKey);
+        let targetIndex;
+        if (key === "Home") {
+          targetIndex = 0;
+        } else if (key === "End") {
+          targetIndex = enabledItems.length - 1;
+        } else {
+          const direction = key === forwardKey ? 1 : -1;
+          targetIndex = (sourceIndex + direction + enabledItems.length) % enabledItems.length;
+        }
+        const target = enabledItems[targetIndex];
+        if (target.key !== currentKey) setActive(target.key);
+        focusTab(target.key);
+      },
+      [currentKey, disabled, focusTab, isHorizontal, resolvedItems, setActive]
+    );
+    const updateScrollMasks = (0, import_react.useCallback)(
+      async (nextScrollLeft = scrollPositionRef.current) => {
+        const requestId = ++maskMeasureRequestRef.current;
+        if (!isHorizontal || !scrollable || !fadeMaskEnabled) {
+          setScrollMasks(
+            (current) => current.left || current.right ? { left: false, right: false } : current
+          );
+          return;
+        }
+        const [scrollFrame, listFrame] = await Promise.all([
+          (0, import_measure.measureNode)(`#${scrollContainerId}`),
+          (0, import_measure.measureNode)(`#${containerId}`)
+        ]);
+        if (requestId !== maskMeasureRequestRef.current || !scrollFrame || !listFrame) return;
+        const maximumScrollLeft = Math.max(0, listFrame.width - scrollFrame.width);
+        const nextMasks = {
+          left: nextScrollLeft > 1,
+          right: maximumScrollLeft > 1 && nextScrollLeft < maximumScrollLeft - 1
+        };
+        setScrollMasks(
+          (current) => current.left === nextMasks.left && current.right === nextMasks.right ? current : nextMasks
+        );
+      },
+      [containerId, fadeMaskEnabled, isHorizontal, scrollContainerId, scrollable]
+    );
+    (0, import_react.useEffect)(() => {
+      const timer = setTimeout(() => {
+        void updateScrollMasks();
+      }, 32);
+      return () => {
+        clearTimeout(timer);
+        maskMeasureRequestRef.current += 1;
+      };
+    }, [barHeight, resolvedItems, size, stretch, updateScrollMasks]);
+    (0, import_react.useEffect)(
+      () => () => {
+        maskMeasureRequestRef.current += 1;
+      },
+      []
+    );
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        setActiveKey: setActive,
+        next: () => {
+          const nextItem = resolvedItems.slice(activeIndex + 1).find((item) => !item.disabled);
+          if (nextItem) setActive(nextItem.key);
+        },
+        prev: () => {
+          const previousItem = resolvedItems.slice(0, Math.max(activeIndex, 0)).reverse().find((item) => !item.disabled);
+          if (previousItem) setActive(previousItem.key);
+        },
+        getActiveKey: () => currentKey,
+        scrollTo: (key) => {
+          if (resolvedItems.some((item) => item.key === key)) scrollToKey(key);
+        },
+        scrollToEnd: () => {
+          const lastItem = resolvedItems[resolvedItems.length - 1];
+          if (lastItem) scrollToKey(lastItem.key);
+        }
+      }),
+      [activeIndex, currentKey, resolvedItems, scrollToKey, setActive]
+    );
+    if (resolvedItems.length === 0) return null;
+    const resolvedActiveColor = activeTextColor ?? activeColor ?? colors.foreground;
+    const resolvedInactiveColor = inactiveTextColor ?? inactiveColor ?? colors["muted-foreground"];
+    const resolvedBarHeight = barHeight;
+    const horizontalStretch = isHorizontal && !scrollable && stretch;
+    const fallbackIndicatorWidth = horizontalStretch ? `${100 / Math.max(resolvedItems.length, 1)}%` : 0;
+    const indicatorMetrics = measuredIndicatorStyle.width > 0 ? measuredIndicatorStyle : {
+      width: fallbackIndicatorWidth,
+      opacity: 0,
+      transform: "translateX(0px)"
+    };
+    const rootFlexDirection = position === "bottom" ? "column-reverse" : position === "right" ? "row-reverse" : position === "left" ? "row" : "column";
+    const handleScroll = (event) => {
+      recordScroll(event);
+      const scrollLeft2 = Number(event.detail.scrollLeft);
+      scrollPositionRef.current = scrollLeft2;
+      const scrollWidth = Number(event.detail.scrollWidth);
+      const clientWidth = Number(event.currentTarget.clientWidth);
+      if (scrollWidth > 0 && clientWidth > 0) {
+        const nextMasks = {
+          left: scrollLeft2 > 1,
+          right: scrollWidth > clientWidth + 1 && scrollLeft2 + clientWidth < scrollWidth - 1
+        };
+        setScrollMasks(
+          (current) => current.left === nextMasks.left && current.right === nextMasks.right ? current : nextMasks
+        );
+      } else {
+        void updateScrollMasks(scrollLeft2);
+      }
+    };
+    const tabList = /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        id: containerId,
+        className: `${prefixCls}-tabs__list`,
+        "data-slot": "tabs-list",
+        role: "tablist",
+        ariaRole: "tablist",
+        "aria-orientation": isHorizontal ? "horizontal" : "vertical",
+        style: {
+          position: "relative",
+          width: isHorizontal ? horizontalStretch || centered ? "100%" : "max-content" : "100%",
+          minHeight: isHorizontal ? resolvedBarHeight : void 0,
+          padding: type === "card" ? 4 : 0,
+          display: "flex",
+          flexDirection: isHorizontal ? "row" : "column",
+          alignItems: "stretch",
+          justifyContent: centered && isHorizontal ? "center" : "flex-start",
+          borderRadius: type === "card" ? radius.get("md") : 0,
+          boxSizing: "border-box",
+          ...headerStyle
+        }
+      },
+      shouldShowIndicator ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: `${prefixCls}-tabs__indicator`,
+          "data-slot": "tabs-indicator",
+          style: {
+            position: "absolute",
+            left: 0,
+            top: indicatorLayout === "center" ? "50%" : void 0,
+            bottom: indicatorLayout === "bottom" ? 0 : void 0,
+            width: typeof indicatorWidth === "number" || typeof indicatorWidth === "string" ? indicatorWidth : indicatorMetrics.width,
+            height: indicatorLayout === "center" ? indicatorHeight || 24 : indicatorHeight,
+            borderRadius: indicatorBorderRadius,
+            backgroundColor: indicatorColor ?? colors.primary,
+            opacity: indicatorMetrics.opacity,
+            transform: indicatorLayout === "center" ? `${indicatorMetrics.transform} translateY(-50%)` : indicatorMetrics.transform,
+            transitionProperty: "transform, width, opacity",
+            transitionDuration: "var(--x-duration-emphasis)",
+            transitionTimingFunction: "var(--x-easing-decelerate)",
+            pointerEvents: "none",
+            ...indicatorStyle
+          }
+        }
+      ) : null,
+      resolvedItems.map((item) => {
+        const active = item.key === currentKey;
+        const itemDisabled = disabled || Boolean(item.disabled);
+        const title = item.title ?? item.label ?? item.tab ?? "";
+        const color = active ? resolvedActiveColor : resolvedInactiveColor;
+        const activeSurface = type === "card" ? colors.background : variant === "ghost" ? colors.accent : "transparent";
+        const customContent = renderTab == null ? void 0 : renderTab({
+          active,
+          title,
+          key: item.key,
+          activeTextColor: resolvedActiveColor,
+          inActiveTextColor: resolvedInactiveColor
+        });
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            key: item.key,
+            id: itemId(item.key),
+            className: `${prefixCls}-tabs__item`,
+            "data-slot": "tabs-item",
+            "data-active": active ? "true" : "false",
+            style: {
+              position: "relative",
+              flexBasis: horizontalStretch ? 0 : "auto",
+              flexGrow: horizontalStretch ? 1 : 0,
+              flexShrink: horizontalStretch || scrollable ? 0 : 1,
+              minWidth: horizontalStretch ? 0 : scrollable ? "max-content" : void 0,
+              width: isHorizontal ? void 0 : "100%",
+              ...item.style
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            TabsTrigger,
+            {
+              active,
+              ariaControls: hasPanels ? `${itemId(item.key)}-panel` : void 0,
+              ariaLabel: nodeToText(title),
+              className: (0, import_utils.classNames)(tabClassName, item.className),
+              disabled: itemDisabled,
+              id: `${itemId(item.key)}-trigger`,
+              onNavigate: (event) => handleNavigate(item.key, event),
+              onPress: () => handleTabClick(item),
+              prefixCls,
+              triggerRef: (node) => {
+                triggerRefs.current[item.key] = node;
+              },
+              style: ({ focused, hovered }) => ({
+                position: "relative",
+                width: "100%",
+                minHeight: resolvedBarHeight,
+                paddingLeft: metrics.paddingX,
+                paddingRight: metrics.paddingX,
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: isHorizontal ? "center" : "flex-start",
+                gap: 6,
+                boxSizing: "border-box",
+                color: hovered && !itemDisabled ? resolvedActiveColor : color,
+                fontSize: metrics.fontSize,
+                fontWeight: active ? "600" : "500",
+                borderRadius: type === "card" || variant === "ghost" ? radius.get("md") : 0,
+                backgroundColor: active || hovered && variant === "ghost" ? activeSurface : "transparent",
+                borderBottomWidth: variant === "outline" && active && isHorizontal ? 2 : 0,
+                borderBottomStyle: "solid",
+                borderBottomColor: variant === "outline" && active ? colors.primary : "transparent",
+                boxShadow: focused ? `0 0 0 2px ${colors.ring}` : void 0,
+                outline: "none",
+                ...!isHorizontal && active && type === "line" ? position === "left" ? {
+                  borderLeft: `${indicatorHeight}px solid ${indicatorColor ?? colors.primary}`
+                } : {
+                  borderRight: `${indicatorHeight}px solid ${indicatorColor ?? colors.primary}`
+                } : void 0,
+                ...tabStyle
+              })
+            },
+            ({ hovered }) => /* @__PURE__ */ import_react.default.createElement(
+              import_components.View,
+              {
+                className: `${prefixCls}-tabs__trigger-content`,
+                "data-slot": "tabs-trigger-content",
+                style: (0, import_inlineAlignment.centeredInlineContent)(6)
+              },
+              customContent !== void 0 ? customContent : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, item.icon ? /* @__PURE__ */ import_react.default.createElement(
+                import_components.View,
+                {
+                  className: `${prefixCls}-tabs__icon`,
+                  "data-slot": "tabs-icon",
+                  style: (0, import_inlineAlignment.centeredInlineSlot)({ flexShrink: 0 })
+                },
+                item.icon
+              ) : null, typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ import_react.default.createElement(
+                import_components.Text,
+                {
+                  "data-slot": "tabs-label",
+                  style: {
+                    display: "block",
+                    minWidth: 0,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    fontSize: metrics.fontSize,
+                    ...textStyle,
+                    ...active ? activeTextStyle : void 0,
+                    color: hovered && !itemDisabled ? resolvedActiveColor : color,
+                    transition: "color var(--x-duration-emphasis) var(--x-easing-standard), font-weight var(--x-duration-emphasis) var(--x-easing-standard), transform var(--x-duration-emphasis) var(--x-easing-standard)"
+                  },
+                  "data-allow-font-scaling": allowFontScaling ? "true" : "false"
+                },
+                title
+              ) : title, item.badge !== void 0 && item.badge !== null ? /* @__PURE__ */ import_react.default.createElement(
+                import_components.View,
+                {
+                  className: `${prefixCls}-tabs__badge`,
+                  "data-slot": "tabs-badge",
+                  style: (0, import_inlineAlignment.centeredInlineSlot)({ flexShrink: 0 })
+                },
+                item.badge
+              ) : null)
+            )
+          )
+        );
+      }),
+      tabBarExtraContent
+    );
+    const tabBarScroll = /* @__PURE__ */ import_react.default.createElement(
+      import_components.ScrollView,
+      {
+        id: scrollContainerId,
+        className: `${prefixCls}-tabs__scroll`,
+        "data-slot": "tabs-scroll",
+        "data-scroll-target": scrollTarget,
+        "data-scroll-left": scrollLeft,
+        "data-scrollable": scrollable ? "true" : "false",
+        scrollX: isHorizontal && scrollable,
+        scrollY: !isHorizontal && scrollable,
+        scrollIntoView: scrollable ? scrollTarget : void 0,
+        scrollLeft: scrollable ? scrollLeft : void 0,
+        onScroll: handleScroll,
+        onScrollToLower: () => setScrollMasks((current) => ({ ...current, right: false })),
+        showScrollbar: false,
+        style: {
+          position: "relative",
+          width: isHorizontal ? "100%" : verticalTabBarWidth,
+          height: isHorizontal ? void 0 : "100%",
+          flexShrink: 0,
+          overflowX: isHorizontal && !scrollable ? "hidden" : void 0,
+          overflowY: !isHorizontal && !scrollable ? "hidden" : void 0,
+          backgroundColor: variant === "ghost" || variant === "outline" ? "transparent" : type === "card" ? colors.muted : barColor,
+          borderBottomWidth: isHorizontal && position === "top" && (type === "line" || variant === "outline") ? 1 : 0,
+          borderTopWidth: isHorizontal && position === "bottom" && (type === "line" || variant === "outline") ? 1 : 0,
+          borderRightWidth: position === "left" && type === "line" ? 1 : 0,
+          borderLeftWidth: position === "right" && type === "line" ? 1 : 0,
+          borderStyle: "solid",
+          borderColor: colors.border,
+          boxSizing: "border-box",
+          ...tabBarStyle
+        }
+      },
+      tabList
+    );
+    const tabBarNode = isHorizontal ? tabBarScroll : /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${prefixCls}-tabs__tabbar`,
+        "data-slot": "tabs-tabbar",
+        style: {
+          flex: `0 0 ${verticalTabBarWidth}px`,
+          width: verticalTabBarWidth,
+          minWidth: verticalTabBarWidth,
+          maxWidth: verticalTabBarWidth,
+          flexShrink: 0,
+          overflow: "hidden",
+          boxSizing: "border-box"
+        }
+      },
+      tabBarScroll
+    );
+    const panels = hasPanels ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${prefixCls}-tabs__content`,
+        "data-slot": "tabs-panels",
+        style: {
+          flex: "1 1 0%",
+          minWidth: 0,
+          width: isHorizontal ? void 0 : 0,
+          minHeight: 0,
+          paddingTop: position === "top" ? 12 : 0,
+          paddingBottom: position === "bottom" ? 12 : 0,
+          paddingLeft: position === "left" ? 12 : 0,
+          paddingRight: position === "right" ? 12 : 0,
+          boxSizing: "border-box",
+          ...contentStyle
+        }
+      },
+      resolvedItems.map((item) => {
+        const active = item.key === currentKey;
+        if (!active && !item.forceRender) return null;
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            id: `${itemId(item.key)}-panel`,
+            key: `panel-${item.key}`,
+            className: `${prefixCls}-tabs__panel`,
+            "data-slot": "tabs-panel",
+            "data-active": active ? "true" : "false",
+            role: "tabpanel",
+            ariaRole: "tabpanel",
+            "aria-hidden": !active,
+            "aria-labelledby": `${itemId(item.key)}-trigger`,
+            tabIndex: active ? 0 : -1,
+            style: { display: active ? "block" : "none" }
+          },
+          item.content ?? item.children
+        );
+      })
+    ) : null;
+    const maskBackground = (direction) => fadeMaskColor ?? `linear-gradient(${direction === "left" ? "90deg" : "270deg"}, ${colors.background}, transparent)`;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: (0, import_utils.classNames)(
+          `${prefixCls}-tabs`,
+          `${prefixCls}-tabs--${position}`,
+          `${prefixCls}-tabs--${type}`,
+          `${prefixCls}-tabs--${variant}`,
+          disabled && `${prefixCls}-tabs--disabled`,
+          className
+        ),
+        "data-slot": "tabs-root",
+        "data-size": size,
+        "data-variant": variant,
+        "data-disabled": disabled ? "true" : "false",
+        "aria-disabled": disabled,
+        style: {
+          position: "relative",
+          width: "100%",
+          minWidth: 0,
+          display: "flex",
+          flexDirection: rootFlexDirection,
+          alignItems: "stretch",
+          overflow: isHorizontal ? void 0 : "hidden",
+          ...style
+        }
+      },
+      tabBarNode,
+      isHorizontal && scrollable && fadeMaskEnabled && scrollMasks.left ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "tabs-fade-mask-left",
+          style: {
+            position: "absolute",
+            top: position === "top" ? 0 : void 0,
+            bottom: position === "bottom" ? 0 : void 0,
+            left: 0,
+            zIndex: 2,
+            width: 24,
+            height: resolvedBarHeight,
+            background: maskBackground("left"),
+            pointerEvents: "none"
+          }
+        }
+      ) : null,
+      isHorizontal && scrollable && fadeMaskEnabled && scrollMasks.right ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "tabs-fade-mask-right",
+          style: {
+            position: "absolute",
+            top: position === "top" ? 0 : void 0,
+            bottom: position === "bottom" ? 0 : void 0,
+            right: 0,
+            zIndex: 2,
+            width: 24,
+            height: resolvedBarHeight,
+            background: maskBackground("right"),
+            pointerEvents: "none"
+          }
+        }
+      ) : null,
+      panels
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+Tabs.Tab = TabItem;
+Tabs.TabPane = TabPane;
+var tabs_default = Tabs;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabItem,
+  TabPane,
+  Tabs
+});