react-native-system-ui 1.0.2 → 1.0.4

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

@@ -1,860 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TabPane = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-var _hooks = require("../../hooks");
-var _animation = require("../../hooks/animation");
-var _hairline = require("../../utils/hairline");
-var _number = require("../../utils/number");
-var _validate = require("../../utils/validate");
-var _tokens = require("./tokens");
-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 hasRaf = typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function';
-const requestFrame = hasRaf ? requestAnimationFrame : cb => setTimeout(cb, 16);
-const cancelFrame = id => {
-  if (id != null) (hasRaf ? cancelAnimationFrame : clearTimeout)(id);
-};
-const isTabPaneElement = child => {
-  if (! /*#__PURE__*/_react().default.isValidElement(child)) return false;
-  if (child.type === TabPane) return true;
-  return child.type.displayName === 'Tabs.TabPane';
-};
-const useTabsAnimation = ({
-  type,
-  animated,
-  scrollable,
-  align,
-  panes,
-  nameIndexMap,
-  resolvedLineWidth,
-  resolvedDuration,
-  currentName,
-  layoutMap,
-  navContainerWidthRef
-}) => {
-  const indX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const indW = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const indInitRef = (0, _react().useRef)(false);
-  const animRef = (0, _react().useRef)(null);
-  const animateIndicator = (0, _react().useCallback)((name, immediate) => {
-    if (name == null || type !== 'line') return false;
-    const eqW = !scrollable && align !== 'start' && navContainerWidthRef.current > 0 && panes.length > 0;
-    const idx = nameIndexMap.get(name) ?? -1;
-    const eqTabW = eqW ? navContainerWidthRef.current / panes.length : 0;
-    const lay = eqW ? {
-      x: Math.max(idx, 0) * eqTabW,
-      width: eqTabW
-    } : layoutMap.current.get(name);
-    if (!lay || idx < 0) return false;
-    animRef.current?.stop();
-    const timing = (v, to) => _reactNative().Animated.timing(v, {
-      toValue: to,
-      duration: immediate || !animated ? 0 : resolvedDuration,
-      useNativeDriver: false,
-      isInteraction: false
-    });
-    const tW = resolvedLineWidth ?? lay.width;
-    const tX = resolvedLineWidth ? lay.x + (lay.width - tW) / 2 : lay.x;
-    const anim = _reactNative().Animated.parallel([timing(indX, tX), timing(indW, tW)]);
-    animRef.current = anim;
-    anim.start(({
-      finished
-    }) => {
-      if (finished) animRef.current = null;
-    });
-    return true;
-  }, [align, animated, indW, indX, nameIndexMap, panes.length, resolvedDuration, resolvedLineWidth, scrollable, type, layoutMap, navContainerWidthRef]);
-  (0, _react().useEffect)(() => {
-    if (currentName == null) return;
-    const should = indInitRef.current;
-    const did = animateIndicator(currentName, !should);
-    if (did && !indInitRef.current) indInitRef.current = true;
-  }, [animateIndicator, currentName]);
-  (0, _react().useEffect)(() => () => {
-    animRef.current?.stop();
-    animRef.current = null;
-  }, []);
-  return {
-    indicatorX: indX,
-    indicatorWidth: indW,
-    indicatorInitializedRef: indInitRef,
-    animateIndicator
-  };
-};
-const useTabsScroll = ({
-  scrollable,
-  animated,
-  currentName,
-  resolvedDuration,
-  layoutMap,
-  navContainerWidthRef,
-  navContentWidthRef
-}) => {
-  const navScrRef = (0, _react().useRef)(null);
-  const navX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const navAnimRef = (0, _react().useRef)(null);
-  const autoScrRef = (0, _react().useRef)(false);
-  const lastXRef = (0, _react().useRef)(0);
-  const frameRef = (0, _react().useRef)(null);
-  const scrollIntoView = (0, _react().useCallback)(immediate => {
-    if (!scrollable || currentName == null) return;
-    const lay = layoutMap.current.get(currentName);
-    const ctrW = navContainerWidthRef.current;
-    if (!lay || !ctrW) return;
-    const cntW = navContentWidthRef.current;
-    const tX = lay.x - (ctrW - lay.width) / 2;
-    const maxS = Math.max(cntW - ctrW, 0);
-    const clampX = Math.max(0, Math.min(tX, maxS));
-    if (maxS <= 0 || Math.abs(clampX - lastXRef.current) < 1) return;
-    navAnimRef.current?.stop();
-    navAnimRef.current = null;
-    cancelFrame(frameRef.current);
-    frameRef.current = null;
-    if (immediate || !animated) {
-      autoScrRef.current = true;
-      navX.setValue(clampX);
-      frameRef.current = requestFrame(() => {
-        frameRef.current = null;
-        autoScrRef.current = false;
-      });
-      return;
-    }
-    navX.setValue(lastXRef.current);
-    autoScrRef.current = true;
-    navAnimRef.current = _reactNative().Animated.timing(navX, {
-      toValue: clampX,
-      duration: resolvedDuration,
-      useNativeDriver: false,
-      isInteraction: false
-    });
-    navAnimRef.current.start(({
-      finished
-    }) => {
-      navAnimRef.current = null;
-      autoScrRef.current = false;
-      if (finished) lastXRef.current = clampX;
-    });
-  }, [animated, currentName, navX, resolvedDuration, scrollable, layoutMap, navContainerWidthRef, navContentWidthRef]);
-  (0, _react().useEffect)(() => {
-    if (!scrollable) return;
-    const id = navX.addListener(({
-      value
-    }) => {
-      const prev = lastXRef.current;
-      lastXRef.current = value;
-      if (Math.abs(value - prev) >= 0.5) navScrRef.current?.scrollTo({
-        x: value,
-        y: 0,
-        animated: false
-      });
-    });
-    return () => navX.removeListener(id);
-  }, [navX, scrollable]);
-  (0, _react().useEffect)(() => () => {
-    cancelFrame(frameRef.current);
-    frameRef.current = null;
-  }, []);
-  const onNavBeginDrag = (0, _react().useCallback)(e => {
-    autoScrRef.current = false;
-    navAnimRef.current?.stop();
-    navAnimRef.current = null;
-    lastXRef.current = e.nativeEvent.contentOffset.x;
-  }, []);
-  const onNavScroll = (0, _react().useCallback)(e => {
-    if (autoScrRef.current) return;
-    lastXRef.current = e.nativeEvent.contentOffset.x;
-  }, []);
-  return {
-    navScrollRef: navScrRef,
-    navScrollX: navX,
-    scrollIntoView,
-    handleNavScrollBeginDrag: onNavBeginDrag,
-    handleNavScroll: onNavScroll
-  };
-};
-const TabBarItemInner = ({
-  pane,
-  isActive,
-  align,
-  scrollable,
-  type,
-  ellipsis,
-  tokens,
-  color,
-  titleActiveColor,
-  titleInactiveColor,
-  tabStyle,
-  titleStyle,
-  descriptionStyle,
-  onSelect,
-  onLayout,
-  isLast
-}) => {
-  const dis = !!pane.disabled;
-  const aria = (0, _hooks.useAriaPress)({
-    onPress: e => onSelect(pane, pane.index, e),
-    extraProps: {
-      accessibilityRole: 'tab',
-      accessibilityState: {
-        selected: isActive,
-        disabled: dis
-      },
-      testID: `rv-tabs-item-${pane.name}`
-    }
-  });
-  const isCap = type === 'capsule';
-  const isJ = type === 'jumbo';
-  const isC = type === 'card';
-  const rTitle = (0, _validate.isFunction)(pane.title) ? pane.title(isActive) : pane.title ?? pane.name;
-  const rDesc = (0, _validate.isFunction)(pane.description) ? pane.description(isActive) : pane.description;
-  const actClr = titleActiveColor ?? (isC ? tokens.colors.cardActiveText : isCap ? tokens.colors.capsuleActiveText : color ?? tokens.colors.textActive);
-  const inactClr = titleInactiveColor ?? (isC ? color ?? tokens.colors.cardBorder : isCap ? tokens.colors.capsuleText : tokens.colors.text);
-  const txtClr = pane.disabled ? tokens.colors.textDisabled : isActive ? actClr : inactClr;
-  const descClr = dis ? tokens.colors.textDisabled : isJ ? isActive ? tokens.colors.jumboDescriptionActive : tokens.colors.jumboDescription : isActive ? tokens.colors.descriptionActive : tokens.colors.description;
-  const flex = !scrollable && (align !== 'start' || isC);
-  const compact = isC || isJ || isCap;
-  const hPad = compact ? 0 : tokens.tabList.paddingHorizontal;
-  const vPad = compact ? 0 : tokens.tabList.paddingVertical;
-  const lblWrap = [S.lblW, isJ && S.lblWJ, isC && S.cardLbl, isC && {
-    paddingHorizontal: tokens.card.paddingHorizontal,
-    paddingVertical: tokens.card.paddingVertical
-  }, isCap && {
-    flex: 1,
-    alignSelf: 'stretch',
-    paddingHorizontal: tokens.capsule.paddingHorizontal,
-    paddingVertical: tokens.capsule.paddingVertical
-  }, isJ && {
-    paddingHorizontal: tokens.jumbo.paddingHorizontal,
-    paddingVertical: tokens.jumbo.paddingVertical,
-    alignItems: 'center'
-  }].filter(Boolean);
-  const lblTxtWrap = isCap ? [{
-    flex: 1,
-    alignSelf: 'stretch',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: tokens.capsule.radius,
-    backgroundColor: isActive ? color ?? tokens.colors.capsuleActiveBackground : tokens.colors.capsuleBackground
-  }] : null;
-  const titleStyleArr = [S.title, {
-    color: txtClr,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: isJ ? tokens.typography.jumboTitleSize : tokens.typography.titleSize,
-    fontWeight: isActive ? tokens.typography.titleActiveWeight : tokens.typography.titleWeight,
-    lineHeight: isJ ? tokens.typography.jumboLineHeight : undefined,
-    textAlign: 'center'
-  }, ellipsis && !isJ ? S.ellipsis : null, titleStyle];
-  const descMT = isJ ? tokens.spacing.jumboDescriptionMarginTop : tokens.spacing.descriptionMarginTop;
-  const descJStyle = isJ ? {
-    backgroundColor: isActive ? tokens.colors.jumboDescriptionActiveBackground : tokens.colors.jumboDescriptionBackground,
-    paddingHorizontal: tokens.jumbo.descriptionPaddingHorizontal,
-    paddingVertical: tokens.jumbo.descriptionPaddingVertical,
-    borderRadius: tokens.jumbo.descriptionRadius
-  } : null;
-  const onLay = (0, _react().useCallback)(e => onLayout(pane.name, e), [onLayout, pane.name]);
-  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, aria.interactionProps, {
-    onLayout: onLay,
-    style: [S.tabI, flex ? S.flexI : null, {
-      paddingHorizontal: hPad,
-      paddingVertical: vPad
-    }, isC ? {
-      backgroundColor: isActive ? color ?? tokens.colors.cardActiveBackground : tokens.colors.cardBackground
-    } : null, tabStyle]
-  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: lblWrap
-  }, lblTxtWrap ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: lblTxtWrap
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: titleStyleArr,
-    numberOfLines: ellipsis && !isJ ? 1 : undefined
-  }, rTitle)) : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: titleStyleArr,
-    numberOfLines: ellipsis && !isJ ? 1 : undefined
-  }, rTitle), (0, _validate.isRenderable)(rDesc) && ((0, _validate.isText)(rDesc) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [S.descTxt, {
-      color: descClr,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.descriptionSize,
-      marginTop: descMT,
-      textAlign: 'center'
-    }, descJStyle, descriptionStyle]
-  }, rDesc) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [{
-      marginTop: descMT,
-      alignItems: 'center'
-    }, descJStyle]
-  }, rDesc)), (0, _validate.isRenderable)(pane.badge) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: {
-      marginTop: tokens.spacing.badgeMarginTop
-    }
-  }, (0, _validate.isText)(pane.badge) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: {
-      color: tokens.colors.badgeText,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.badgeTextSize
-    }
-  }, pane.badge) : pane.badge)), isC && !isLast && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: (0, _hairline.createHairlineView)({
-      position: 'right',
-      color: color ?? tokens.colors.cardBorder,
-      top: 0,
-      bottom: 0
-    })
-  }));
-};
-const TabBarItem = /*#__PURE__*/(0, _react().memo)(TabBarItemInner);
-const TabsBaseInner = (props, ref) => {
-  const {
-    tokensOverride,
-    children,
-    type: typeProp,
-    align: alignProp,
-    ellipsis: ellipsisProp,
-    swipeThreshold: swipeThresholdProp,
-    animated: animatedProp,
-    duration: durationProp,
-    lazyRender: lazyRenderProp,
-    lazyRenderPlaceholder,
-    scrollable: scrollableProp,
-    swipeable,
-    color,
-    background: backgroundProp,
-    border,
-    navLeft,
-    navRight,
-    navBottom,
-    tabBarStyle,
-    tabStyle,
-    titleStyle,
-    descriptionStyle,
-    contentStyle,
-    lineWidth,
-    lineHeight,
-    titleActiveColor,
-    titleInactiveColor,
-    beforeChange,
-    onClickTab,
-    onChange,
-    style,
-    ...rest
-  } = props;
-  const tokens = (0, _tokens.useTabsTokens)(tokensOverride);
-  const reducedMotion = (0, _animation.useReducedMotion)();
-  const type = typeProp ?? tokens.defaults.type;
-  const align = alignProp ?? tokens.defaults.align;
-  const ellipsis = ellipsisProp ?? tokens.defaults.ellipsis;
-  const swipeThreshold = swipeThresholdProp ?? tokens.defaults.swipeThreshold;
-  const animated = animatedProp ?? tokens.defaults.animated;
-  const duration = durationProp ?? tokens.defaults.duration;
-  const lazyRender = lazyRenderProp ?? tokens.defaults.lazyRender;
-  const background = backgroundProp ?? tokens.tabList.background;
-  const parsedLineWidth = (0, _number.parseNumberLike)(lineWidth ?? tokens.indicator.width);
-  const resLineW = parsedLineWidth != null && parsedLineWidth < 0 ? undefined : parsedLineWidth;
-  const resLineH = Math.max(0, (0, _number.parseNumberLike)(lineHeight) ?? tokens.indicator.height);
-  const resDur = reducedMotion ? 0 : Math.max(0, (0, _number.parseNumberLike)(duration) ?? tokens.defaults.duration);
-  const resSwipeTh = Math.max(0, (0, _number.parseNumberLike)(swipeThreshold) ?? tokens.defaults.swipeThreshold);
-  const swipeCfg = !swipeable ? undefined : (0, _validate.isObject)(swipeable) ? {
-    autoHeight: swipeable.autoHeight ?? true,
-    preventScroll: swipeable.preventScroll ?? true
-  } : {
-    autoHeight: true,
-    preventScroll: true
-  };
-  const isSwipe = !!swipeCfg;
-  const panes = (0, _react().useMemo)(() => {
-    const result = [];
-    let paneIndex = 0;
-    const walk = nodes => {
-      _react().Children.forEach(nodes, node => {
-        if (! /*#__PURE__*/(0, _react().isValidElement)(node)) return;
-        const element = node;
-        if (element.type === _react().default.Fragment) {
-          walk(element.props.children);
-          return;
-        }
-        if (!isTabPaneElement(element)) return;
-        const paneProps = element.props;
-        const name = paneProps.name ?? paneIndex;
-        result.push({
-          ...paneProps,
-          key: element.key ?? name,
-          name,
-          index: paneIndex
-        });
-        paneIndex += 1;
-      });
-    };
-    walk(children);
-    return result;
-  }, [children]);
-  const firstPaneName = panes[0]?.name;
-  const [actVal, setActVal] = (0, _hooks.useControllableValue)(props, {
-    defaultValue: firstPaneName,
-    valuePropName: 'active',
-    defaultValuePropName: 'defaultActive',
-    trigger: 'onChange'
-  });
-  const curName = actVal == null ? firstPaneName : panes.some(pane => pane.name === actVal) ? actVal : firstPaneName;
-  const curNameRef = (0, _react().useRef)(curName);
-  (0, _react().useEffect)(() => {
-    curNameRef.current = curName;
-  }, [curName]);
-  const nameIdxMap = (0, _react().useMemo)(() => {
-    const map = new Map();
-    panes.forEach(pane => {
-      map.set(pane.name, pane.index);
-    });
-    return map;
-  }, [panes]);
-  const actIdx = curName == null ? -1 : nameIdxMap.get(curName) ?? -1;
-  const visRef = (0, _react().useRef)(new Set());
-  const layMap = (0, _react().useRef)(new Map());
-  const navCtrWRef = (0, _react().useRef)(0);
-  const navCntWRef = (0, _react().useRef)(0);
-  const navCntSyncRef = (0, _react().useRef)(null);
-  const paneLayMap = (0, _react().useRef)(new Map());
-  const swipeScrRef = (0, _react().useRef)(null);
-  const swipeChgRef = (0, _react().useRef)(false);
-  const [ctrW, setCtrW] = (0, _react().useState)(0);
-  const [swipeH, setSwipeH] = (0, _react().useState)(undefined);
-  (0, _react().useEffect)(() => {
-    if (curName == null) return;
-    visRef.current.add(curName);
-  }, [curName]);
-  (0, _react().useEffect)(() => {
-    const validNames = new Set(panes.map(pane => pane.name));
-    Array.from(paneLayMap.current.keys()).forEach(name => {
-      if (!validNames.has(name)) paneLayMap.current.delete(name);
-    });
-    Array.from(layMap.current.keys()).forEach(name => {
-      if (!validNames.has(name)) layMap.current.delete(name);
-    });
-  }, [panes]);
-  const trackPaneLay = isSwipe && swipeCfg?.autoHeight;
-  (0, _react().useEffect)(() => {
-    if (!trackPaneLay) paneLayMap.current.clear();
-  }, [trackPaneLay]);
-  (0, _react().useEffect)(() => {
-    if (!isSwipe || !swipeCfg?.autoHeight) {
-      setSwipeH(undefined);
-      return;
-    }
-    const layout = curName != null ? paneLayMap.current.get(curName) : undefined;
-    if (layout) setSwipeH(layout.height);else setSwipeH(undefined);
-  }, [curName, isSwipe, swipeCfg?.autoHeight]);
-  (0, _react().useEffect)(() => {
-    return () => {
-      cancelFrame(navCntSyncRef.current);
-      navCntSyncRef.current = null;
-    };
-  }, []);
-  const scrollable = (0, _validate.isBoolean)(scrollableProp) ? scrollableProp : panes.length > resSwipeTh || ellipsis === false;
-  const indColor = color ?? tokens.colors.indicator;
-  const indRad = resLineH ? resLineH / 2 : tokens.indicator.radius;
-  const {
-    indicatorX,
-    indicatorWidth,
-    indicatorInitializedRef,
-    animateIndicator
-  } = useTabsAnimation({
-    type,
-    animated,
-    scrollable,
-    align,
-    panes,
-    nameIndexMap: nameIdxMap,
-    resolvedLineWidth: resLineW,
-    resolvedLineHeight: resLineH,
-    resolvedDuration: resDur,
-    currentName: curName,
-    layoutMap: layMap,
-    navContainerWidthRef: navCtrWRef
-  });
-  const {
-    navScrollRef,
-    scrollIntoView,
-    handleNavScrollBeginDrag,
-    handleNavScroll
-  } = useTabsScroll({
-    scrollable,
-    animated,
-    currentName: curName,
-    resolvedDuration: resDur,
-    layoutMap: layMap,
-    navContainerWidthRef: navCtrWRef,
-    navContentWidthRef: navCntWRef
-  });
-  const onTabLayout = (0, _react().useCallback)((name, event) => {
-    const {
-      x,
-      width
-    } = event.nativeEvent.layout;
-    layMap.current.set(name, {
-      x,
-      width
-    });
-    if (name === curNameRef.current) {
-      const shouldAnimate = indicatorInitializedRef.current;
-      const didAnimate = animateIndicator(name, !shouldAnimate);
-      if (didAnimate && !indicatorInitializedRef.current) indicatorInitializedRef.current = true;
-    }
-  }, [animateIndicator, indicatorInitializedRef]);
-  const onNavCtrLayout = (0, _react().useCallback)(event => {
-    const {
-      width
-    } = event.nativeEvent.layout;
-    navCtrWRef.current = width;
-    if (!scrollable && align !== 'start' && type === 'line' && curName !== undefined && curName !== null) {
-      const shouldAnimate = indicatorInitializedRef.current;
-      const didAnimate = animateIndicator(curName, !shouldAnimate);
-      if (didAnimate && !indicatorInitializedRef.current) indicatorInitializedRef.current = true;
-    }
-  }, [align, animateIndicator, curName, scrollable, type, indicatorInitializedRef]);
-  const onCtrLayout = (0, _react().useCallback)(event => {
-    const nextW = event.nativeEvent.layout.width;
-    setCtrW(prev => prev === nextW ? prev : nextW);
-  }, []);
-  const beforeChgRef = (0, _react().useRef)(beforeChange);
-  beforeChgRef.current = beforeChange;
-  const runBeforeChg = (0, _react().useCallback)(name => {
-    if (!beforeChgRef.current) return Promise.resolve(true);
-    try {
-      return Promise.resolve(beforeChgRef.current(name)).then(res => res !== false).catch(() => false);
-    } catch (error) {
-      return Promise.resolve(false);
-    }
-  }, []);
-  const chgSeqRef = (0, _react().useRef)(0);
-  const reqChg = (0, _react().useCallback)((name, index) => {
-    chgSeqRef.current += 1;
-    const seq = chgSeqRef.current;
-    runBeforeChg(name).then(canChange => {
-      if (!canChange) return;
-      if (chgSeqRef.current !== seq) return;
-      setActVal(name, index);
-    });
-  }, [runBeforeChg, setActVal]);
-  const onPaneLayout = (0, _react().useCallback)((name, event) => {
-    if (isSwipe && swipeCfg?.autoHeight) {
-      const {
-        height
-      } = event.nativeEvent.layout;
-      paneLayMap.current.set(name, {
-        height
-      });
-      if (name === curName) setSwipeH(height);
-    }
-  }, [curName, isSwipe, swipeCfg?.autoHeight]);
-  const swipeEndIdxRef = (0, _react().useRef)(null);
-  (0, _react().useEffect)(() => {
-    swipeEndIdxRef.current = null;
-  }, [curName]);
-  const onSwipeEnd = (0, _react().useCallback)(offsetX => {
-    if (!isSwipe || ctrW <= 0) return;
-    const pageIdx = Math.round(offsetX / ctrW);
-    if (swipeEndIdxRef.current === pageIdx) return;
-    swipeEndIdxRef.current = pageIdx;
-    const nextPane = panes[pageIdx];
-    if (!nextPane || nextPane.name === curNameRef.current) return;
-    swipeChgRef.current = true;
-    reqChg(nextPane.name, nextPane.index);
-  }, [ctrW, isSwipe, panes, reqChg]);
-  const onSwipeMomentumScrollEnd = (0, _react().useCallback)(event => {
-    onSwipeEnd(event.nativeEvent.contentOffset.x);
-  }, [onSwipeEnd]);
-  const onSwipeScrollEndDrag = (0, _react().useCallback)(event => {
-    onSwipeEnd(event.nativeEvent.contentOffset.x);
-  }, [onSwipeEnd]);
-  (0, _react().useEffect)(() => {
-    if (!isSwipe || !swipeScrRef.current || ctrW <= 0) return;
-    if (swipeChgRef.current) {
-      swipeChgRef.current = false;
-      return;
-    }
-    if (actIdx < 0) return;
-    const node = swipeScrRef.current?.getNode?.() ?? swipeScrRef.current;
-    if (!node?.scrollTo) return;
-    node.scrollTo({
-      x: ctrW * actIdx,
-      y: 0,
-      animated: true
-    });
-  }, [actIdx, ctrW, isSwipe]);
-  const onClickTabRef = (0, _react().useRef)(onClickTab);
-  onClickTabRef.current = onClickTab;
-  const onSel = (0, _react().useCallback)((pane, index, event) => {
-    const payload = {
-      name: pane.name,
-      index,
-      disabled: !!pane.disabled,
-      event
-    };
-    onClickTabRef.current?.(payload);
-    if (pane.disabled || pane.name === curNameRef.current) return;
-    reqChg(pane.name, index);
-  }, [reqChg]);
-  const scrollTo = (0, _react().useCallback)((name, _options) => {
-    const target = panes.find(pane => pane.name === name && !pane.disabled);
-    if (!target) return;
-    setActVal(target.name, target.index);
-  }, [panes, setActVal]);
-  (0, _react().useImperativeHandle)(ref, () => ({
-    scrollTo
-  }), [scrollTo]);
-  const firstRndRef = (0, _react().useRef)(true);
-  (0, _react().useEffect)(() => {
-    if (firstRndRef.current) {
-      firstRndRef.current = false;
-      scrollIntoView(true);
-    }
-  }, [scrollIntoView]);
-  (0, _react().useEffect)(() => {
-    if (!firstRndRef.current) scrollIntoView();
-  }, [curName, scrollIntoView]);
-  const hasBorder = border ?? false;
-  const showInd = type === 'line';
-  const navH = type === 'jumbo' ? tokens.jumbo.height : type === 'card' ? tokens.card.height : tokens.tabList.height;
-  const navPB = _reactNative().Platform.OS === 'web' && type !== 'line' && type !== 'card' ? tokens.tabList.paddingBottom : 0;
-  const indBot = showInd ? type === 'line' ? 0 : tokens.indicator.offset : 0;
-  if (panes.length === 0) return null;
-  const indicatorNode = showInd ? /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    testID: "rv-tabs-indicator",
-    style: [S.ind, {
-      height: resLineH,
-      borderRadius: indRad,
-      backgroundColor: indColor,
-      width: indicatorWidth,
-      bottom: indBot,
-      transform: [{
-        translateX: indicatorX
-      }]
-    }]
-  }) : null;
-  const navItems = (0, _react().useMemo)(() => panes.map(pane => /*#__PURE__*/_react().default.createElement(TabBarItem, {
-    key: pane.key,
-    pane: pane,
-    isActive: pane.name === curName,
-    align: align,
-    scrollable: scrollable,
-    type: type,
-    ellipsis: ellipsis,
-    tokens: tokens,
-    color: color,
-    titleActiveColor: titleActiveColor,
-    titleInactiveColor: titleInactiveColor,
-    tabStyle: tabStyle,
-    titleStyle: titleStyle,
-    descriptionStyle: descriptionStyle,
-    onSelect: onSel,
-    onLayout: onTabLayout,
-    isLast: pane.index === panes.length - 1
-  })), [align, color, curName, descriptionStyle, ellipsis, onSel, onTabLayout, panes, scrollable, tabStyle, titleActiveColor, titleInactiveColor, titleStyle, tokens, type]);
-  const onNavCntSizeChg = (0, _react().useCallback)(w => {
-    const prev = navCntWRef.current;
-    navCntWRef.current = w;
-    if (prev === 0 || firstRndRef.current) {
-      scrollIntoView(true);
-      return;
-    }
-    if (Math.abs(w - prev) > 1) {
-      cancelFrame(navCntSyncRef.current);
-      navCntSyncRef.current = requestFrame(() => {
-        navCntSyncRef.current = null;
-        scrollIntoView();
-      });
-    }
-  }, [scrollIntoView]);
-  const navBody = scrollable ? /*#__PURE__*/_react().default.createElement(_reactNative().ScrollView, {
-    horizontal: true,
-    ref: navScrollRef,
-    accessibilityRole: "tablist",
-    showsHorizontalScrollIndicator: false,
-    scrollEventThrottle: 16,
-    onScrollBeginDrag: handleNavScrollBeginDrag,
-    onScroll: handleNavScroll,
-    onContentSizeChange: onNavCntSizeChg,
-    contentContainerStyle: S.navC
-  }, navItems, indicatorNode) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    accessibilityRole: "tablist",
-    style: [S.navC, S.navCSta]
-  }, navItems, indicatorNode);
-  const navContent = /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [S.wrap, {
-      backgroundColor: background
-    }, tabBarStyle]
-  }, navLeft && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: {
-      paddingHorizontal: tokens.spacing.navSidePaddingHorizontal
-    }
-  }, navLeft), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [S.nav, {
-      minHeight: navH + navPB,
-      paddingBottom: navPB
-    }, type === 'card' ? {
-      borderRadius: tokens.card.radius,
-      marginHorizontal: tokens.card.marginHorizontal,
-      overflow: 'hidden'
-    } : null],
-    onLayout: onNavCtrLayout
-  }, navBody, type === 'card' && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: (0, _hairline.createHairlineView)({
-      position: 'all',
-      color: color ?? tokens.colors.cardBorder,
-      borderRadius: tokens.card.radius
-    })
-  })), navRight && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: {
-      paddingHorizontal: tokens.spacing.navSidePaddingHorizontal
-    }
-  }, navRight), hasBorder && type === 'line' && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: (0, _hairline.createHairlineView)({
-      position: 'bottom',
-      color: tokens.colors.border,
-      left: 0,
-      right: 0
-    })
-  }));
-  const paneNodes = (0, _react().useMemo)(() => panes.map(pane => {
-    const isActive = pane.name === curName;
-    const shouldRender = !lazyRender || isActive || visRef.current.has(pane.name);
-    if (!shouldRender && !isSwipe) return null;
-    const layoutHandler = isSwipe && swipeCfg?.autoHeight ? event => onPaneLayout(pane.name, event) : undefined;
-    const paneStyles = [S.pane, isSwipe ? S.swipePane : null, isSwipe && ctrW > 0 && {
-      width: ctrW
-    }, !isSwipe && !isActive ? S.hidPane : null];
-    const paneContent = shouldRender ? pane.children : lazyRenderPlaceholder || null;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      key: pane.key,
-      testID: `rv-tabs-pane-${pane.name}`,
-      onLayout: layoutHandler,
-      style: paneStyles
-    }, paneContent);
-  }), [ctrW, curName, onPaneLayout, isSwipe, lazyRender, lazyRenderPlaceholder, panes, swipeCfg?.autoHeight]);
-  const baseContentStyle = [S.content, contentStyle];
-  const swipeContentStyle = [S.content, contentStyle, swipeCfg?.autoHeight && swipeH !== undefined && {
-    height: swipeH
-  }];
-  const contentNode = isSwipe ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: swipeContentStyle
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.ScrollView, {
-    ref: swipeScrRef,
-    horizontal: true,
-    pagingEnabled: true,
-    scrollEventThrottle: 16,
-    showsHorizontalScrollIndicator: false,
-    onMomentumScrollEnd: onSwipeMomentumScrollEnd,
-    onScrollEndDrag: onSwipeScrollEndDrag,
-    nestedScrollEnabled: swipeCfg?.preventScroll === false,
-    directionalLockEnabled: swipeCfg?.preventScroll !== false
-  }, paneNodes)) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: baseContentStyle
-  }, paneNodes);
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
-    style: [S.ctr, style],
-    onLayout: onCtrLayout
-  }), navContent, navBottom && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: {
-      marginTop: tokens.spacing.navBottomMarginTop
-    }
-  }, navBottom), contentNode);
-};
-const S = _reactNative().StyleSheet.create({
-  ctr: {
-    width: '100%'
-  },
-  wrap: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    position: 'relative'
-  },
-  nav: {
-    flex: 1,
-    position: 'relative',
-    alignSelf: 'stretch'
-  },
-  navC: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: '100%',
-    position: 'relative'
-  },
-  navCSta: {
-    flex: 1
-  },
-  lblW: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column'
-  },
-  lblWJ: {
-    alignItems: 'center'
-  },
-  cardLbl: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  tabI: {
-    flexShrink: 0,
-    height: '100%',
-    alignSelf: 'stretch',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row'
-  },
-  flexI: {
-    flexGrow: 1
-  },
-  title: {
-    includeFontPadding: false
-  },
-  descTxt: {
-    includeFontPadding: false
-  },
-  ellipsis: {
-    maxWidth: '100%',
-    flexShrink: 1
-  },
-  ind: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0
-  },
-  content: {
-    width: '100%'
-  },
-  pane: {
-    width: '100%'
-  },
-  swipePane: {
-    flexShrink: 0
-  },
-  hidPane: {
-    display: 'none'
-  }
-});
-const TabsBaseRef = /*#__PURE__*/_react().default.forwardRef(TabsBaseInner);
-const TabsWithPane = Object.assign(/*#__PURE__*/_react().default.memo(TabsBaseRef), {
-  TabPane
-});
-var _default = exports.default = TabsWithPane;
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.TabPane=void 0;var _hooks=require("../../hooks"),_animation=require("../../hooks/animation"),_hairline=require("../../utils/hairline"),_number=require("../../utils/number"),_validate=require("../../utils/validate"),_tokens=require("./tokens");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,i,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(n=t?r:a){if(n.has(e))return n.get(e);n.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?n(l,t,i):l[t]=e[t]);return l})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}const TabPane=()=>null;exports.TabPane=TabPane,TabPane.displayName="Tabs.TabPane";const hasRaf="function"==typeof requestAnimationFrame&&"function"==typeof cancelAnimationFrame,requestFrame=hasRaf?requestAnimationFrame:e=>setTimeout(e,16),cancelFrame=e=>{null!=e&&(hasRaf?cancelAnimationFrame:clearTimeout)(e)},isTabPaneElement=e=>!!_react().default.isValidElement(e)&&(e.type===TabPane||"Tabs.TabPane"===e.type.displayName),useTabsAnimation=({type:e,animated:t,scrollable:a,align:r,panes:n,nameIndexMap:i,resolvedLineWidth:l,resolvedDuration:c,currentName:o,layoutMap:s,navContainerWidthRef:u})=>{const d=(0,_react().useRef)(new(_reactNative().Animated.Value)(0)).current,f=(0,_react().useRef)(new(_reactNative().Animated.Value)(0)).current,m=(0,_react().useRef)(!1),p=(0,_react().useRef)(null),_=(0,_react().useCallback)((o,m)=>{if(null==o||"line"!==e)return!1;const _=!a&&"start"!==r&&u.current>0&&n.length>0,h=i.get(o)??-1,b=_?u.current/n.length:0,g=_?{x:Math.max(h,0)*b,width:b}:s.current.get(o);if(!g||h<0)return!1;p.current?.stop();const v=(e,a)=>_reactNative().Animated.timing(e,{toValue:a,duration:m||!t?0:c,useNativeDriver:!1,isInteraction:!1}),y=l??g.width,S=l?g.x+(g.width-y)/2:g.x,x=_reactNative().Animated.parallel([v(d,S),v(f,y)]);return p.current=x,x.start(({finished:e})=>{e&&(p.current=null)}),!0},[r,t,f,d,i,n.length,c,l,a,e,s,u]);return(0,_react().useEffect)(()=>{if(null==o)return;const e=m.current;_(o,!e)&&!m.current&&(m.current=!0)},[_,o]),(0,_react().useEffect)(()=>()=>{p.current?.stop(),p.current=null},[]),{indicatorX:d,indicatorWidth:f,indicatorInitializedRef:m,animateIndicator:_}},useTabsScroll=({scrollable:e,animated:t,currentName:a,resolvedDuration:r,layoutMap:n,navContainerWidthRef:i,navContentWidthRef:l})=>{const c=(0,_react().useRef)(null),o=(0,_react().useRef)(new(_reactNative().Animated.Value)(0)).current,s=(0,_react().useRef)(null),u=(0,_react().useRef)(!1),d=(0,_react().useRef)(0),f=(0,_react().useRef)(null),m=(0,_react().useCallback)(c=>{if(!e||null==a)return;const m=n.current.get(a),p=i.current;if(!m||!p)return;const _=l.current,h=m.x-(p-m.width)/2,b=Math.max(_-p,0),g=Math.max(0,Math.min(h,b));if(!(b<=0||Math.abs(g-d.current)<1)){if(s.current?.stop(),s.current=null,cancelFrame(f.current),f.current=null,c||!t)return u.current=!0,o.setValue(g),void(f.current=requestFrame(()=>{f.current=null,u.current=!1}));o.setValue(d.current),u.current=!0,s.current=_reactNative().Animated.timing(o,{toValue:g,duration:r,useNativeDriver:!1,isInteraction:!1}),s.current.start(({finished:e})=>{s.current=null,u.current=!1,e&&(d.current=g)})}},[t,a,o,r,e,n,i,l]);(0,_react().useEffect)(()=>{if(!e)return;const t=o.addListener(({value:e})=>{const t=d.current;d.current=e,Math.abs(e-t)>=.5&&c.current?.scrollTo({x:e,y:0,animated:!1})});return()=>o.removeListener(t)},[o,e]),(0,_react().useEffect)(()=>()=>{cancelFrame(f.current),f.current=null},[]);const p=(0,_react().useCallback)(e=>{u.current=!1,s.current?.stop(),s.current=null,d.current=e.nativeEvent.contentOffset.x},[]),_=(0,_react().useCallback)(e=>{u.current||(d.current=e.nativeEvent.contentOffset.x)},[]);return{navScrollRef:c,navScrollX:o,scrollIntoView:m,handleNavScrollBeginDrag:p,handleNavScroll:_}},TabBarItemInner=({pane:e,isActive:t,align:a,scrollable:r,type:n,ellipsis:i,tokens:l,color:c,titleActiveColor:o,titleInactiveColor:s,tabStyle:u,titleStyle:d,descriptionStyle:f,onSelect:m,onLayout:p,isLast:_})=>{const h=!!e.disabled,b=(0,_hooks.useAriaPress)({onPress:t=>m(e,e.index,t),extraProps:{accessibilityRole:"tab",accessibilityState:{selected:t,disabled:h},testID:`rv-tabs-item-${e.name}`}}),g="capsule"===n,v="jumbo"===n,y="card"===n,x=(0,_validate.isFunction)(e.title)?e.title(t):e.title??e.name,w=(0,_validate.isFunction)(e.description)?e.description(t):e.description,T=o??(y?l.colors.cardActiveText:g?l.colors.capsuleActiveText:c??l.colors.textActive),E=s??(y?c??l.colors.cardBorder:g?l.colors.capsuleText:l.colors.text),k=e.disabled?l.colors.textDisabled:t?T:E,R=h?l.colors.textDisabled:v?t?l.colors.jumboDescriptionActive:l.colors.jumboDescription:t?l.colors.descriptionActive:l.colors.description,N=!r&&("start"!==a||y),C=y||v||g,V=C?0:l.tabList.paddingHorizontal,P=C?0:l.tabList.paddingVertical,I=[S.lblW,v&&S.lblWJ,y&&S.cardLbl,y&&{paddingHorizontal:l.card.paddingHorizontal,paddingVertical:l.card.paddingVertical},g&&{flex:1,alignSelf:"stretch",paddingHorizontal:l.capsule.paddingHorizontal,paddingVertical:l.capsule.paddingVertical},v&&{paddingHorizontal:l.jumbo.paddingHorizontal,paddingVertical:l.jumbo.paddingVertical,alignItems:"center"}].filter(Boolean),H=g?[{flex:1,alignSelf:"stretch",justifyContent:"center",alignItems:"center",borderRadius:l.capsule.radius,backgroundColor:t?c??l.colors.capsuleActiveBackground:l.colors.capsuleBackground}]:null,M=[S.title,{color:k,fontFamily:l.typography.fontFamily,fontSize:v?l.typography.jumboTitleSize:l.typography.titleSize,fontWeight:t?l.typography.titleActiveWeight:l.typography.titleWeight,lineHeight:v?l.typography.jumboLineHeight:void 0,textAlign:"center"},i&&!v?S.ellipsis:null,d],A=v?l.spacing.jumboDescriptionMarginTop:l.spacing.descriptionMarginTop,z=v?{backgroundColor:t?l.colors.jumboDescriptionActiveBackground:l.colors.jumboDescriptionBackground,paddingHorizontal:l.jumbo.descriptionPaddingHorizontal,paddingVertical:l.jumbo.descriptionPaddingVertical,borderRadius:l.jumbo.descriptionRadius}:null,L=(0,_react().useCallback)(t=>p(e.name,t),[p,e.name]);return _react().default.createElement(_reactNative().Pressable,_extends({},b.interactionProps,{onLayout:L,style:[S.tabI,N?S.flexI:null,{paddingHorizontal:V,paddingVertical:P},y?{backgroundColor:t?c??l.colors.cardActiveBackground:l.colors.cardBackground}:null,u]}),_react().default.createElement(_reactNative().View,{style:I},H?_react().default.createElement(_reactNative().View,{style:H},_react().default.createElement(_reactNative().Text,{style:M,numberOfLines:i&&!v?1:void 0},x)):_react().default.createElement(_reactNative().Text,{style:M,numberOfLines:i&&!v?1:void 0},x),(0,_validate.isRenderable)(w)&&((0,_validate.isText)(w)?_react().default.createElement(_reactNative().Text,{style:[S.descTxt,{color:R,fontFamily:l.typography.fontFamily,fontSize:l.typography.descriptionSize,marginTop:A,textAlign:"center"},z,f]},w):_react().default.createElement(_reactNative().View,{style:[{marginTop:A,alignItems:"center"},z]},w)),(0,_validate.isRenderable)(e.badge)&&_react().default.createElement(_reactNative().View,{style:{marginTop:l.spacing.badgeMarginTop}},(0,_validate.isText)(e.badge)?_react().default.createElement(_reactNative().Text,{style:{color:l.colors.badgeText,fontFamily:l.typography.fontFamily,fontSize:l.typography.badgeTextSize}},e.badge):e.badge)),y&&!_&&_react().default.createElement(_reactNative().View,{style:(0,_hairline.createHairlineView)({position:"right",color:c??l.colors.cardBorder,top:0,bottom:0})}))},TabBarItem=(0,_react().memo)(TabBarItemInner),TabsBaseInner=(e,t)=>{const{tokensOverride:a,children:r,type:n,align:i,ellipsis:l,swipeThreshold:c,animated:o,duration:s,lazyRender:u,lazyRenderPlaceholder:d,scrollable:f,swipeable:m,color:p,background:_,border:h,navLeft:b,navRight:g,navBottom:v,tabBarStyle:y,tabStyle:x,titleStyle:w,descriptionStyle:T,contentStyle:E,lineWidth:k,lineHeight:R,titleActiveColor:N,titleInactiveColor:C,beforeChange:V,onClickTab:P,onChange:I,style:H,...M}=e,A=(0,_tokens.useTabsTokens)(a),z=(0,_animation.useReducedMotion)(),L=n??A.defaults.type,j=i??A.defaults.align,B=l??A.defaults.ellipsis,W=c??A.defaults.swipeThreshold,D=o??A.defaults.animated,F=s??A.defaults.duration,O=u??A.defaults.lazyRender,q=_??A.tabList.background,X=(0,_number.parseNumberLike)(k??A.indicator.width),J=null!=X&&X<0?void 0:X,$=Math.max(0,(0,_number.parseNumberLike)(R)??A.indicator.height),G=z?0:Math.max(0,(0,_number.parseNumberLike)(F)??A.defaults.duration),K=Math.max(0,(0,_number.parseNumberLike)(W)??A.defaults.swipeThreshold),Q=m?(0,_validate.isObject)(m)?{autoHeight:m.autoHeight??!0,preventScroll:m.preventScroll??!0}:{autoHeight:!0,preventScroll:!0}:void 0,U=!!Q,Y=(0,_react().useMemo)(()=>{const e=[];let t=0;const a=r=>{_react().Children.forEach(r,r=>{if(!(0,_react().isValidElement)(r))return;const n=r;if(n.type===_react().default.Fragment)return void a(n.props.children);if(!isTabPaneElement(n))return;const i=n.props,l=i.name??t;e.push({...i,key:n.key??l,name:l,index:t}),t+=1})};return a(r),e},[r]),Z=Y[0]?.name,[ee,te]=(0,_hooks.useControllableValue)(e,{defaultValue:Z,valuePropName:"active",defaultValuePropName:"defaultActive",trigger:"onChange"}),ae=null==ee?Z:Y.some(e=>e.name===ee)?ee:Z,re=(0,_react().useRef)(ae);(0,_react().useEffect)(()=>{re.current=ae},[ae]);const ne=(0,_react().useMemo)(()=>{const e=new Map;return Y.forEach(t=>{e.set(t.name,t.index)}),e},[Y]),ie=null==ae?-1:ne.get(ae)??-1,le=(0,_react().useRef)(new Set),ce=(0,_react().useRef)(new Map),oe=(0,_react().useRef)(0),se=(0,_react().useRef)(0),ue=(0,_react().useRef)(null),de=(0,_react().useRef)(new Map),fe=(0,_react().useRef)(null),me=(0,_react().useRef)(!1),[pe,_e]=(0,_react().useState)(0),[he,be]=(0,_react().useState)(void 0);(0,_react().useEffect)(()=>{null!=ae&&le.current.add(ae)},[ae]),(0,_react().useEffect)(()=>{const e=new Set(Y.map(e=>e.name));Array.from(de.current.keys()).forEach(t=>{e.has(t)||de.current.delete(t)}),Array.from(ce.current.keys()).forEach(t=>{e.has(t)||ce.current.delete(t)})},[Y]);const ge=U&&Q?.autoHeight;(0,_react().useEffect)(()=>{ge||de.current.clear()},[ge]),(0,_react().useEffect)(()=>{if(!U||!Q?.autoHeight)return void be(void 0);const e=null!=ae?de.current.get(ae):void 0;be(e?e.height:void 0)},[ae,U,Q?.autoHeight]),(0,_react().useEffect)(()=>()=>{cancelFrame(ue.current),ue.current=null},[]);const ve=(0,_validate.isBoolean)(f)?f:Y.length>K||!1===B,ye=p??A.colors.indicator,Se=$?$/2:A.indicator.radius,{indicatorX:xe,indicatorWidth:we,indicatorInitializedRef:Te,animateIndicator:Ee}=useTabsAnimation({type:L,animated:D,scrollable:ve,align:j,panes:Y,nameIndexMap:ne,resolvedLineWidth:J,resolvedLineHeight:$,resolvedDuration:G,currentName:ae,layoutMap:ce,navContainerWidthRef:oe}),{navScrollRef:ke,scrollIntoView:Re,handleNavScrollBeginDrag:Ne,handleNavScroll:Ce}=useTabsScroll({scrollable:ve,animated:D,currentName:ae,resolvedDuration:G,layoutMap:ce,navContainerWidthRef:oe,navContentWidthRef:se}),Ve=(0,_react().useCallback)((e,t)=>{const{x:a,width:r}=t.nativeEvent.layout;if(ce.current.set(e,{x:a,width:r}),e===re.current){const t=Te.current;Ee(e,!t)&&!Te.current&&(Te.current=!0)}},[Ee,Te]),Pe=(0,_react().useCallback)(e=>{const{width:t}=e.nativeEvent.layout;if(oe.current=t,!ve&&"start"!==j&&"line"===L&&null!=ae){const e=Te.current;Ee(ae,!e)&&!Te.current&&(Te.current=!0)}},[j,Ee,ae,ve,L,Te]),Ie=(0,_react().useCallback)(e=>{const t=e.nativeEvent.layout.width;_e(e=>e===t?e:t)},[]),He=(0,_react().useRef)(V);He.current=V;const Me=(0,_react().useCallback)(e=>{if(!He.current)return Promise.resolve(!0);try{return Promise.resolve(He.current(e)).then(e=>!1!==e).catch(()=>!1)}catch(e){return Promise.resolve(!1)}},[]),Ae=(0,_react().useRef)(0),ze=(0,_react().useCallback)((e,t)=>{Ae.current+=1;const a=Ae.current;Me(e).then(r=>{r&&Ae.current===a&&te(e,t)})},[Me,te]),Le=(0,_react().useCallback)((e,t)=>{if(U&&Q?.autoHeight){const{height:a}=t.nativeEvent.layout;de.current.set(e,{height:a}),e===ae&&be(a)}},[ae,U,Q?.autoHeight]),je=(0,_react().useRef)(null);(0,_react().useEffect)(()=>{je.current=null},[ae]);const Be=(0,_react().useCallback)(e=>{if(!U||pe<=0)return;const t=Math.round(e/pe);if(je.current===t)return;je.current=t;const a=Y[t];a&&a.name!==re.current&&(me.current=!0,ze(a.name,a.index))},[pe,U,Y,ze]),We=(0,_react().useCallback)(e=>{Be(e.nativeEvent.contentOffset.x)},[Be]),De=(0,_react().useCallback)(e=>{Be(e.nativeEvent.contentOffset.x)},[Be]);(0,_react().useEffect)(()=>{if(!U||!fe.current||pe<=0)return;if(me.current)return void(me.current=!1);if(ie<0)return;const e=fe.current?.getNode?.()??fe.current;e?.scrollTo&&e.scrollTo({x:pe*ie,y:0,animated:!0})},[ie,pe,U]);const Fe=(0,_react().useRef)(P);Fe.current=P;const Oe=(0,_react().useCallback)((e,t,a)=>{const r={name:e.name,index:t,disabled:!!e.disabled,event:a};Fe.current?.(r),e.disabled||e.name===re.current||ze(e.name,t)},[ze]),qe=(0,_react().useCallback)((e,t)=>{const a=Y.find(t=>t.name===e&&!t.disabled);a&&te(a.name,a.index)},[Y,te]);(0,_react().useImperativeHandle)(t,()=>({scrollTo:qe}),[qe]);const Xe=(0,_react().useRef)(!0);(0,_react().useEffect)(()=>{Xe.current&&(Xe.current=!1,Re(!0))},[Re]),(0,_react().useEffect)(()=>{Xe.current||Re()},[ae,Re]);const Je=h??!1,$e="line"===L,Ge="jumbo"===L?A.jumbo.height:"card"===L?A.card.height:A.tabList.height,Ke="web"===_reactNative().Platform.OS&&"line"!==L&&"card"!==L?A.tabList.paddingBottom:0,Qe=$e?"line"===L?0:A.indicator.offset:0;if(0===Y.length)return null;const Ue=$e?_react().default.createElement(_reactNative().Animated.View,{testID:"rv-tabs-indicator",style:[S.ind,{height:$,borderRadius:Se,backgroundColor:ye,width:we,bottom:Qe,transform:[{translateX:xe}]}]}):null,Ye=(0,_react().useMemo)(()=>Y.map(e=>_react().default.createElement(TabBarItem,{key:e.key,pane:e,isActive:e.name===ae,align:j,scrollable:ve,type:L,ellipsis:B,tokens:A,color:p,titleActiveColor:N,titleInactiveColor:C,tabStyle:x,titleStyle:w,descriptionStyle:T,onSelect:Oe,onLayout:Ve,isLast:e.index===Y.length-1})),[j,p,ae,T,B,Oe,Ve,Y,ve,x,N,C,w,A,L]),Ze=(0,_react().useCallback)(e=>{const t=se.current;se.current=e,0===t||Xe.current?Re(!0):Math.abs(e-t)>1&&(cancelFrame(ue.current),ue.current=requestFrame(()=>{ue.current=null,Re()}))},[Re]),et=ve?_react().default.createElement(_reactNative().ScrollView,{horizontal:!0,ref:ke,accessibilityRole:"tablist",showsHorizontalScrollIndicator:!1,scrollEventThrottle:16,onScrollBeginDrag:Ne,onScroll:Ce,onContentSizeChange:Ze,contentContainerStyle:S.navC},Ye,Ue):_react().default.createElement(_reactNative().View,{accessibilityRole:"tablist",style:[S.navC,S.navCSta]},Ye,Ue),tt=_react().default.createElement(_reactNative().View,{style:[S.wrap,{backgroundColor:q},y]},b&&_react().default.createElement(_reactNative().View,{style:{paddingHorizontal:A.spacing.navSidePaddingHorizontal}},b),_react().default.createElement(_reactNative().View,{style:[S.nav,{minHeight:Ge+Ke,paddingBottom:Ke},"card"===L?{borderRadius:A.card.radius,marginHorizontal:A.card.marginHorizontal,overflow:"hidden"}:null],onLayout:Pe},et,"card"===L&&_react().default.createElement(_reactNative().View,{style:(0,_hairline.createHairlineView)({position:"all",color:p??A.colors.cardBorder,borderRadius:A.card.radius})})),g&&_react().default.createElement(_reactNative().View,{style:{paddingHorizontal:A.spacing.navSidePaddingHorizontal}},g),Je&&"line"===L&&_react().default.createElement(_reactNative().View,{style:(0,_hairline.createHairlineView)({position:"bottom",color:A.colors.border,left:0,right:0})})),at=(0,_react().useMemo)(()=>Y.map(e=>{const t=e.name===ae,a=!O||t||le.current.has(e.name);if(!a&&!U)return null;const r=U&&Q?.autoHeight?t=>Le(e.name,t):void 0,n=[S.pane,U?S.swipePane:null,U&&pe>0&&{width:pe},U||t?null:S.hidPane],i=a?e.children:d||null;return _react().default.createElement(_reactNative().View,{key:e.key,testID:`rv-tabs-pane-${e.name}`,onLayout:r,style:n},i)}),[pe,ae,Le,U,O,d,Y,Q?.autoHeight]),rt=[S.content,E],nt=[S.content,E,Q?.autoHeight&&void 0!==he&&{height:he}],it=U?_react().default.createElement(_reactNative().View,{style:nt},_react().default.createElement(_reactNative().Animated.ScrollView,{ref:fe,horizontal:!0,pagingEnabled:!0,scrollEventThrottle:16,showsHorizontalScrollIndicator:!1,onMomentumScrollEnd:We,onScrollEndDrag:De,nestedScrollEnabled:!1===Q?.preventScroll,directionalLockEnabled:!1!==Q?.preventScroll},at)):_react().default.createElement(_reactNative().View,{style:rt},at);return _react().default.createElement(_reactNative().View,_extends({},M,{style:[S.ctr,H],onLayout:Ie}),tt,v&&_react().default.createElement(_reactNative().View,{style:{marginTop:A.spacing.navBottomMarginTop}},v),it)},S=_reactNative().StyleSheet.create({ctr:{width:"100%"},wrap:{flexDirection:"row",alignItems:"center",position:"relative"},nav:{flex:1,position:"relative",alignSelf:"stretch"},navC:{flexDirection:"row",alignItems:"center",height:"100%",position:"relative"},navCSta:{flex:1},lblW:{justifyContent:"center",alignItems:"center",flexDirection:"column"},lblWJ:{alignItems:"center"},cardLbl:{flexDirection:"row",justifyContent:"center",alignItems:"center"},tabI:{flexShrink:0,height:"100%",alignSelf:"stretch",alignItems:"center",justifyContent:"center",flexDirection:"row"},flexI:{flexGrow:1},title:{includeFontPadding:!1},descTxt:{includeFontPadding:!1},ellipsis:{maxWidth:"100%",flexShrink:1},ind:{position:"absolute",bottom:0,left:0},content:{width:"100%"},pane:{width:"100%"},swipePane:{flexShrink:0},hidPane:{display:"none"}}),TabsBaseRef=_react().default.forwardRef(TabsBaseInner),TabsWithPane=Object.assign(_react().default.memo(TabsBaseRef),{TabPane:TabPane});var _default=exports.default=TabsWithPane;