@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/commonjs/components/BottomNavigation/BottomNavigation.js

@@ -1,893 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BottomNavigation = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _index = require("../../theme/index.js");
-var _index2 = require("../../utils/index.js");
-var _corners = require("../../utils/corners.js");
-var _shadows = require("../../utils/shadows.js");
-var _index3 = require("../AppIcon/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-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); }
-/**
- * Visual style of the bar.
- *
- * - `pill`: a soft tinted pill slides behind the active icon (default).
- * - `underline`: a line slides under (or over) the active tab cell.
- * - `floating`: the bar is a detached capsule, lifted off the bottom as well
- *   as the sides; the pill slides inside it.
- * - `bubble`: the active icon lifts into a filled circle that pokes above
- *   the bar; the circle slides between tabs.
- * - `expand`: the active tab widens into a pill showing icon and label side
- *   by side; the other tabs collapse to icons.
- * - `solid`: the whole bar is brand-coloured; the active tab sits in a light
- *   pill with inverted inks.
- * - `tile`: a detached capsule like `floating`, but the tinted pill takes
- *   the whole active tab, icon and label together, up to 96 wide; inactive
- *   tabs keep the primary text ink instead of the muted one.
- */
-
-/**
- * Corner radius of the bar surface in pixels, or `full`: half the surface's
- * own height, so the bar's ends are round whatever the bar's height comes to.
- */
-
-/**
- * Corner radius of the active tab's background: `auto` follows the bar's
- * radius, a number sets its own in pixels. Every value is capped at half the
- * background's own height, so a large number reads as fully round.
- */
-
-/** Shadow under the bar surface: a theme shadow level, or `none`. */
-
-/** What a tab knows about itself when it draws its icon. */
-
-/**
- * A tab icon speaks the library's slot language: an AppIcon name
- * (`icon: 'home'`), `{ name, variant }`, a render function that gets
- * `{ color, size, focused, disabled }`, or any node drawn as is. A bare name
- * with no `activeIcon` is drawn in the `bold` style while the tab is active.
- */
-
-/**
- * A button in the middle of the bar that is not a tab: pressing it runs its
- * own handler and leaves the active tab alone (a "new loan" or "scan" button).
- * It takes one cell in the middle of the row, so the tabs split around it,
- * the extra one going left when the count is odd.
- */
-
-const DEFAULT_ICON_SIZE = 18;
-/** Air the icon wrap adds around the icon, 2 a side. */
-const ICON_WRAP_AIR = 4;
-/** How much taller the active pill is than the icon wrap, 4 a side. */
-const PILL_AIR = 8;
-/**
- * The icon pill never grows past this, however wide its cell: a two-tab bar
- * keeps a pill the size of the icon it highlights (Material's indicator is
- * 64 wide too). The theme's `pillMaxWidth` overrides it.
- */
-const DEFAULT_PILL_MAX_WIDTH = 64;
-/** The tile's background never grows past this either; room for icon and label, not half a bar. */
-const TILE_MAX_WIDTH = 96;
-const DEFAULT_PILL_INSET = 16;
-const DEFAULT_UNDERLINE_HEIGHT = 3;
-const DEFAULT_FLOATING_MARGIN = 16;
-const DEFAULT_FLOATING_RADIUS = 28;
-const DEFAULT_BUBBLE_SIZE = 48;
-const DEFAULT_BUBBLE_LIFT = 14;
-const DEFAULT_CENTER_SIZE = 48;
-const DEFAULT_CENTER_ICON_SIZE = 24;
-/** Key of the centre cell; a tab key cannot collide with it in practice. */
-const CENTER_KEY = '__webority_center_action__';
-const TAB_PADDING_VERTICAL = 6;
-/** Air between the bar's edges and the tab row. The row is inset by it. */
-const BAR_PADDING_HORIZONTAL = 4;
-/** Bar padding above the tab row; the padding below matches it unless the safe-area inset is larger. */
-const BAR_PADDING_TOP = 6;
-const BAR_PADDING_TOP_BUBBLE = 8;
-/** Air between the floating capsule's edges and the tab row, above and below. */
-const FLOATING_BAR_PADDING_VERTICAL = 6;
-/** Air between the floating capsule's edges and the tab row, at the sides. */
-const FLOATING_BAR_PADDING_HORIZONTAL = 8;
-/**
- * How much wider the expanded tab is than a collapsed one (`expand` variant).
- * The pill inside hugs its icon and label, so whatever the cell has beyond
- * that shows as empty space beside the pill; 1.5 keeps that to about 13px a
- * side on a four-tab phone bar while a label like "Settings" still fits.
- */
-const EXPANDED_FLEX = 1.5;
-/** Ink opacity of inactive tabs on the `solid` bar. */
-const SOLID_INACTIVE_OPACITY = 0.7;
-/** Air between a `tile` pill and the edges of its tab cell. */
-const TILE_INSET = 2;
-/** Gap between icon and label inside a `tile` pill, tighter than the default so the pair reads as one block. */
-const TILE_LABEL_GAP = 2;
-const formatBadge = value => {
-  if (value === null || value === undefined || value === false) {
-    return null;
-  }
-  if (value === true || value === '·') {
-    return {
-      text: '',
-      isDot: true
-    };
-  }
-  if (typeof value === 'number') {
-    if (value <= 0) {
-      return null;
-    }
-    return {
-      text: value > 99 ? '99+' : String(value),
-      isDot: false
-    };
-  }
-  if (typeof value === 'string') {
-    if (value.length === 0) {
-      return null;
-    }
-    return {
-      text: value,
-      isDot: false
-    };
-  }
-  return null;
-};
-const badgeAccessibilitySuffix = value => {
-  if (value === null || value === undefined || value === false) {
-    return '';
-  }
-  if (typeof value === 'number') {
-    return value > 0 ? `, ${value} unread` : '';
-  }
-  if (value === true || value === '·') {
-    return ', new updates';
-  }
-  if (typeof value === 'string' && value.length > 0) {
-    return `, ${value}`;
-  }
-  return '';
-};
-const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    tabs,
-    centerAction,
-    activeTab,
-    onChange,
-    haptic = 'selection',
-    showLabels = true,
-    variant = 'pill',
-    indicatorPosition = 'bottom',
-    radius,
-    indicatorRadius: indicatorRadiusProp = 'auto',
-    elevation,
-    iconSize: iconSizeProp,
-    marginHorizontal: marginHorizontalProp,
-    marginVertical: marginVerticalProp,
-    paddingHorizontal: paddingHorizontalProp,
-    paddingVertical: paddingVerticalProp,
-    border,
-    style,
-    indicatorStyle,
-    labelStyle,
-    testID
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const tokens = theme.components.bottomNavigation;
-  const iconSize = iconSizeProp ?? tokens?.iconSize ?? DEFAULT_ICON_SIZE;
-  // The pill hugs the icon: 4px taller than the wrap on each side, so a
-  // smaller icon gets a smaller pill (30 at 18, 36 at 24).
-  const pillHeight = tokens?.pillHeight ?? iconSize + ICON_WRAP_AIR + PILL_AIR;
-  const pillMaxWidth = tokens?.pillMaxWidth ?? DEFAULT_PILL_MAX_WIDTH;
-  const pillInset = tokens?.pillInset ?? DEFAULT_PILL_INSET;
-  const sideMargin = tokens?.floatingMargin ?? DEFAULT_FLOATING_MARGIN;
-  const floatingRadius = tokens?.floatingRadius ?? DEFAULT_FLOATING_RADIUS;
-  const bubbleSize = tokens?.bubbleSize ?? DEFAULT_BUBBLE_SIZE;
-  const bubbleLift = tokens?.bubbleLift ?? DEFAULT_BUBBLE_LIFT;
-  const isTile = variant === 'tile';
-  // `tile` shares the floating capsule; only its pill and inks differ.
-  const isFloating = variant === 'floating' || isTile;
-  const isBubble = variant === 'bubble';
-  const isExpand = variant === 'expand';
-  const isSolid = variant === 'solid';
-  const drawsPill = variant === 'pill' || isFloating || isSolid;
-  const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
-  const [rowWidth, setRowWidth] = _react.default.useState(0);
-  const [rowHeight, setRowHeight] = _react.default.useState(0);
-  // Derived on every render, never stored: the row's onLayout fires only
-  // when the row's own size changes, and a change in the NUMBER of tabs
-  // leaves that size alone. A stored `width / tabs.length` therefore went
-  // stale the moment a tab was added or removed and the indicator sat
-  // under the wrong tab.
-  // A centre action takes a cell of its own, so the tabs split around it and
-  // tabs before `centerSplit` sit in their own cell and the rest one cell
-  // further right; the extra tab of an odd count goes left.
-  const centerSplit = centerAction ? Math.ceil(tabs.length / 2) : tabs.length;
-  const cellCount = tabs.length + (centerAction ? 1 : 0);
-  // With a `gap` the centre cell hugs the button, with the gap as a margin on
-  // each side, and the tabs share what is left; without one it is a cell as
-  // wide as a tab's. `centerStep` is how far the button pushes the tabs past
-  // it to the right.
-  const [centerBox, setCenterBox] = _react.default.useState({
-    width: 0,
-    height: 0
-  });
-  const centerSize = centerAction?.size ?? DEFAULT_CENTER_SIZE;
-  const hugsCenter = centerAction?.gap !== undefined;
-  const centerGap = Math.max(0, centerAction?.gap ?? 0);
-  const centerSpan = hugsCenter ? (centerBox.width || centerSize) + centerGap * 2 : 0;
-  const tabWidth = hugsCenter ? tabs.length > 0 ? Math.max(0, rowWidth - centerSpan) / tabs.length : 0 : cellCount > 0 ? rowWidth / cellCount : 0;
-  const centerStep = hugsCenter ? centerSpan : tabWidth;
-
-  // Single Animated.Value holds the active tab INDEX; the pixel offset is an
-  // interpolation over the measured tab width, rebuilt when the width changes.
-  // Keeping the value in index units means a width change (a variant switch
-  // re-lays the row out) is a plain re-render, never an animation on a view
-  // that was mounted a moment ago: Android left such a view at its mount-time
-  // transform, one cell short.
-  const indicatorIndex = (0, _react.useRef)((0, _index.createAnimatedValue)(activeIndex)).current;
-  const iconScales = (0, _react.useRef)({});
-  // Per-tab 0..1 "is active" progress: lifts the bubble icon and widens the
-  // expanded tab. JS-driven on purpose: flex is layout, which the native
-  // driver cannot animate, and a native value attached to views that remount
-  // when the variant switches (floating has a different root) throws from
-  // Animated's makeNative cascade.
-  const progressValues = (0, _react.useRef)({});
-
-  // Ensure each tab has persistent animated values
-  tabs.forEach(tab => {
-    if (!iconScales.current[tab.key]) {
-      iconScales.current[tab.key] = new _reactNative.Animated.Value(1);
-    }
-    if (!progressValues.current[tab.key]) {
-      progressValues.current[tab.key] = (0, _index.createAnimatedValue)(tab.key === activeTab ? 1 : 0);
-    }
-  });
-
-  // Pill width is intrinsic; we compute its rendered offset to keep it
-  // centered within each tab cell. The offset is applied to the pill itself
-  // (NOT folded into the shared indicatorTranslateX) so the underline indicator
-  // — which spans the full tab cell — stays aligned with the tab boundary
-  // instead of being shifted by the pill-centering math.
-  // Every highlight is capped and centred so a wide cell does not stretch it:
-  // the tile at 96 with room for icon and label, the icon pill at 64.
-  const pillWidth = tabWidth > 0 ? isTile ? Math.min(tabWidth - TILE_INSET * 2, TILE_MAX_WIDTH) : Math.min(tabWidth - pillInset, pillMaxWidth) : 0;
-  const pillOffset = tabWidth > 0 ? (tabWidth - pillWidth) / 2 : 0;
-  const bubbleOffset = tabWidth > 0 ? (tabWidth - bubbleSize) / 2 : 0;
-  const hasLabel = tab => showLabels && tab.showLabel !== false && tab.label.trim().length > 0;
-
-  // The bubble is centred on where the lifted icon lands. A labelled tab's
-  // icon wrap sits `tab.paddingVertical` below the row; an icon-only tab
-  // centres its icon in the row, so the row's measured height decides.
-  const activeTabConfig = tabs[activeIndex];
-  const activeIconCentre = activeTabConfig && !hasLabel(activeTabConfig) && rowHeight > 0 ? rowHeight / 2 : TAB_PADDING_VERTICAL + (iconSize + ICON_WRAP_AIR) / 2;
-  const bubbleTop = activeIconCentre - bubbleLift - bubbleSize / 2;
-  const tileHeight = Math.max(0, rowHeight - TILE_INSET * 2);
-  const pillTop = isTile ? TILE_INSET : activeIconCentre - pillHeight / 2;
-
-  // Slide the indicator to the active tab. Pill and bubble modes apply their
-  // centering offset via a static `left` style below; underline mode uses the
-  // offset directly. A width change swaps the interpolation, which the native
-  // driver re-attaches as a fresh node on the next render.
-  const settledIndex = (0, _react.useRef)(activeIndex);
-  (0, _react.useEffect)(() => {
-    if (settledIndex.current === activeIndex) {
-      return;
-    }
-    settledIndex.current = activeIndex;
-    // Native-driven: the value only feeds transforms, and the tree keeps one
-    // shape across variants, so nothing it is attached to remounts. Off the
-    // JS thread, the slide no longer competes with the tab-change render.
-    const anim = _reactNative.Animated.spring(indicatorIndex, {
-      toValue: activeIndex,
-      tension: 120,
-      friction: 14,
-      useNativeDriver: true
-    });
-    anim.start();
-    return () => anim.stop();
-  }, [activeIndex, indicatorIndex]);
-
-  // One stop per tab, at the left edge of the cell it sits in, so a slide
-  // across the centre action jumps its cell rather than landing on it.
-  const lastIndex = Math.max(1, tabs.length - 1);
-  const indicatorTranslateX = (0, _react.useMemo)(() => {
-    const inputRange = [];
-    const outputRange = [];
-    for (let i = 0; i <= lastIndex; i++) {
-      inputRange.push(i);
-      outputRange.push(i < centerSplit ? i * tabWidth : i * tabWidth + centerStep);
-    }
-    return indicatorIndex.interpolate({
-      inputRange,
-      outputRange
-    });
-  }, [indicatorIndex, lastIndex, centerSplit, tabWidth, centerStep]);
-
-  // Per-tab progress: the newly active tab springs to 1, the others to 0.
-  // Keyed on the tab keys, not the array, so a parent that rebuilds `tabs`
-  // every render does not restart the springs mid-flight. Only `bubble` and
-  // `expand` read these values; the other variants just keep them current so
-  // a runtime variant switch starts from the right place.
-  const tabKeys = tabs.map(tab => tab.key).join(' ');
-  const animatesProgress = isBubble || isExpand;
-  (0, _react.useEffect)(() => {
-    const anims = tabKeys.split(' ').flatMap(key => {
-      const to = key === activeTab ? 1 : 0;
-      const progress = progressValues.current[key];
-      if (!progress) {
-        return [];
-      }
-      if (!animatesProgress) {
-        progress.setValue(to);
-        return [];
-      }
-      return [_reactNative.Animated.spring(progress, {
-        toValue: to,
-        tension: 140,
-        friction: 13,
-        useNativeDriver: false
-      })];
-    });
-    if (anims.length === 0) {
-      return;
-    }
-    const group = _reactNative.Animated.parallel(anims);
-    group.start();
-    return () => group.stop();
-  }, [activeTab, tabKeys, animatesProgress]);
-  const handleLayout = e => {
-    const {
-      width,
-      height
-    } = e.nativeEvent.layout;
-    setRowWidth(width);
-    setRowHeight(height);
-  };
-
-  // The press pop every tab icon gets, and the centre action's icon too: a
-  // quick grow, then a spring back to rest.
-  const popIcon = scale => {
-    _reactNative.Animated.sequence([_reactNative.Animated.timing(scale, {
-      toValue: 1.15,
-      duration: 120,
-      useNativeDriver: true
-    }), _reactNative.Animated.spring(scale, {
-      toValue: 1,
-      tension: 200,
-      friction: 8,
-      useNativeDriver: true
-    })]).start();
-  };
-  const centerScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const handlePress = tab => {
-    if (tab.key !== activeTab && haptic !== false) {
-      (0, _index2.triggerHaptic)(haptic);
-    }
-    const scale = iconScales.current[tab.key];
-    if (scale) {
-      popIcon(scale);
-    }
-    onChange(tab.key);
-  };
-  const handleCenterPress = () => {
-    if (!centerAction) {
-      return;
-    }
-    const centerHaptic = centerAction.haptic ?? haptic;
-    if (centerHaptic !== false) {
-      (0, _index2.triggerHaptic)(centerHaptic);
-    }
-    popIcon(centerScale);
-    centerAction.onPress();
-  };
-  const {
-    colors
-  } = theme;
-  const barBackground = isSolid ? colors.primary : colors.background.elevated;
-  const activeInk = isSolid ? colors.onPrimary : colors.primary;
-  const inactiveInk = isSolid ? colors.onPrimary : isTile ? colors.text.primary : colors.text.tertiary;
-  const pillBackground = isSolid ? colors.onPrimary : colors.primaryMuted;
-  // The active icon sits on the pill (solid) or in the bubble, so it takes the
-  // ink that reads on that fill rather than on the bar.
-  const activeIconInk = isSolid ? colors.primary : isBubble ? colors.onPrimary : activeInk;
-
-  // Below the tabs: the same air as above them, unless the safe-area inset
-  // is larger (the labels then sit just above the home indicator). A bar
-  // lifted off the bottom by a margin puts the inset into that lift instead,
-  // the way the capsules always have.
-  const marginHorizontal = marginHorizontalProp ?? sideMargin;
-  const marginVertical = marginVerticalProp ?? (isFloating ? sideMargin : 0);
-  const lifted = marginVertical > 0;
-  const paddingTop = paddingVerticalProp ?? (isFloating ? FLOATING_BAR_PADDING_VERTICAL : isBubble ? BAR_PADDING_TOP_BUBBLE : BAR_PADDING_TOP);
-  const innerPaddingHorizontal = paddingHorizontalProp ?? (isFloating ? FLOATING_BAR_PADDING_HORIZONTAL : BAR_PADDING_HORIZONTAL);
-  const paddingBottom = lifted ? paddingTop : Math.max(paddingTop, insets.bottom);
-  const liftBottom = lifted ? Math.max(marginVertical, insets.bottom) : 0;
-
-  // One prop for "how round is the white surface", whichever view is holding
-  // it: the docked bar, or the floating variant's detached capsule.
-  // The tile capsule is round-ended so it stays concentric with its pill.
-  //
-  // `full` is half the surface's own height, never `theme.radius.full`: the
-  // bar pads itself by its radius (below), so 9999 would leave the row no
-  // width, and Android drops an oversized radius to square corners. The
-  // surface is the measured row plus the padding the bar itself puts around
-  // it; padding added through `style` is not counted. Until the row is
-  // measured the bar keeps its 4px padding and lets the platform clamp the
-  // full radius, so the first measured row is full width and the layout
-  // settles in one more pass.
-  const wantsFullRadius = radius === 'full';
-  const surfaceHeight = isFloating ? rowHeight + paddingTop * 2 + _reactNative.StyleSheet.hairlineWidth * 2 : rowHeight + paddingTop + paddingBottom;
-  const barRadius = wantsFullRadius ? rowHeight > 0 ? surfaceHeight / 2 : theme.radius.full : radius ?? tokens?.borderRadius ?? (isTile ? theme.radius.full : isFloating ? floatingRadius : 0);
-  // The active background's radius, never more than half its own height (a
-  // larger radius drops to square corners on Android). `auto` matches the bar
-  // once an app rounds it and otherwise stays fully round, the look it has
-  // always had; a number is the background's own.
-  // `round` is each background's own fully round value.
-  const barRadiusSet = radius !== undefined || tokens?.borderRadius !== undefined;
-  const activeBgRadius = (height, round) => {
-    if (typeof indicatorRadiusProp === 'number') {
-      return Math.max(0, Math.min(indicatorRadiusProp, height / 2));
-    }
-    if (indicatorRadiusProp === 'auto' && barRadiusSet) {
-      return Math.min(barRadius, height / 2);
-    }
-    return round;
-  };
-  // A rounded bar has no flat edge under its corners, and the underline sits on
-  // that edge: hold the tab row out of the corners entirely rather than cutting
-  // the line short on the two end tabs, which read as broken next to the others.
-  // Inset by the radius and the row's own span IS the bar's flat band, so every
-  // tab keeps a full-width line. Only the underline needs it: every other
-  // indicator lives inside its tab cell, so those variants keep the bar's own
-  // 4px and give the whole width to the tabs.
-  const barPaddingHorizontal = variant === 'underline' ? Math.max(innerPaddingHorizontal, wantsFullRadius && rowHeight === 0 ? 0 : barRadius) : innerPaddingHorizontal;
-  // Nothing is drawn around the surface unless asked: no shadow and no
-  // border by default on any variant, so what an app sees is what it set.
-  const elevationLevel = elevation ?? 'none';
-  // A `boxShadow` where the platform draws one, as the Card does: Android's
-  // `elevation` is a flat grey that cannot match iOS, and the legacy props
-  // are ignored there. Android below API 28 keeps the token's `elevation`.
-  const shadowToken = theme.shadows[elevationLevel];
-  const barShadow = elevationLevel === 'none' ? null : (0, _shadows.supportsBoxShadow)() ? {
-    boxShadow: (0, _shadows.toBoxShadow)(shadowToken)
-  } : shadowToken;
-  // A hairline outline on all four sides, on any variant, only when asked.
-  // Every edge of the docked bar is set by name, never through the
-  // `borderWidth` shorthand: Android resets a dropped `borderTopWidth` to
-  // zero instead of falling back to the shorthand, and the top line vanishes.
-  const hairline = border ? _reactNative.StyleSheet.hairlineWidth : 0;
-  const borderColor = isSolid ? colors.primary : colors.border.primary;
-
-  // The centre action is centred on the row and raised by `lift`. Whatever of
-  // it pokes above the bar surface is added to the root's top padding, so the
-  // raised part stays inside the component's own box: a touch outside a
-  // parent's bounds is not something to rely on across both platforms, and a
-  // screen laid out under the bar should not be covered by it either.
-  const centerLift = centerAction?.lift ?? 0;
-  const rowTopInSurface = paddingTop + hairline;
-  const centerOverhang = centerAction && rowHeight > 0 ? Math.max(0, (centerBox.height || centerSize) / 2 + centerLift - rowHeight / 2 - rowTopInSurface) : 0;
-  const centerNode = centerAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.centerCell, hugsCenter ? {
-      flex: 0,
-      marginHorizontal: centerGap
-    } : null],
-    pointerEvents: "box-none",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      onPress: handleCenterPress,
-      onLayout: e => {
-        const {
-          width,
-          height
-        } = e.nativeEvent.layout;
-        setCenterBox(prev => prev.width === width && prev.height === height ? prev : {
-          width,
-          height
-        });
-      },
-      accessibilityRole: "button",
-      accessibilityLabel: centerAction.label,
-      hitSlop: {
-        top: 6,
-        bottom: 6,
-        left: 6,
-        right: 6
-      }
-      // A relative `top`, not a transform, like the bubble's lift: the box
-      // moves with it for layout and hit-testing alike.
-      ,
-      style: ({
-        pressed
-      }) => [{
-        top: -centerLift
-      }, pressed ? {
-        opacity: 0.85
-      } : null],
-      testID: centerAction.testID ?? (testID ? `${testID}-center` : undefined),
-      children: centerAction.content ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        style: {
-          transform: [{
-            scale: centerScale
-          }]
-        },
-        children: centerAction.content
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.centerCircle, {
-          width: centerSize,
-          height: centerSize,
-          borderRadius: centerSize / 2,
-          ..._corners.smoothCorners,
-          backgroundColor: centerAction.color ?? colors.primary
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-          style: {
-            transform: [{
-              scale: centerScale
-            }]
-          },
-          children: (0, _index3.renderSlotIcon)(centerAction.icon ?? 'add', {
-            color: centerAction.iconColor ?? colors.onPrimary,
-            size: centerAction.iconSize ?? DEFAULT_CENTER_ICON_SIZE,
-            disabled: false
-          })
-        })
-      })
-    })
-  }, CENTER_KEY) : null;
-  // The centre cell goes between the two halves of the tabs.
-  const withCenter = nodes => centerNode ? [...nodes.slice(0, centerSplit), centerNode, ...nodes.slice(centerSplit)] : nodes;
-  const tabRow = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.tabRow,
-    onLayout: handleLayout,
-    children: [drawsPill && pillWidth > 0 && (!isTile || tileHeight > 0) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      pointerEvents: "none",
-      style: [styles.pill, {
-        width: pillWidth,
-        height: isTile ? tileHeight : pillHeight,
-        left: pillOffset,
-        top: pillTop,
-        backgroundColor: pillBackground,
-        // Half the height, not `radius.full`, for the tile: its pill is
-        // tall, and an oversized radius drops to square corners on Android.
-        borderRadius: isTile ? activeBgRadius(tileHeight, tileHeight / 2) : activeBgRadius(pillHeight, theme.radius.full),
-        ..._corners.smoothCorners,
-        transform: [{
-          translateX: indicatorTranslateX
-        }]
-      }, indicatorStyle]
-    }) : null, isBubble && tabWidth > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      pointerEvents: "none",
-      style: [styles.bubble, theme.shadows.md, {
-        width: bubbleSize,
-        height: bubbleSize,
-        borderRadius: bubbleSize / 2,
-        ..._corners.smoothCorners,
-        left: bubbleOffset,
-        top: bubbleTop,
-        backgroundColor: colors.primary,
-        borderColor: colors.background.elevated,
-        transform: [{
-          translateX: indicatorTranslateX
-        }]
-      }, indicatorStyle]
-    }) : null, withCenter(tabs.map(tab => {
-      const isActive = tab.key === activeTab;
-      const color = isActive ? activeInk : inactiveInk;
-      const iconColor = isActive ? activeIconInk : inactiveInk;
-      const activeFallback = typeof tab.icon === 'string' ? {
-        name: tab.icon,
-        variant: 'bold'
-      } : tab.icon;
-      const tabIcon = isActive ? tab.activeIcon ?? activeFallback : tab.icon;
-      const scale = iconScales.current[tab.key];
-      const progress = progressValues.current[tab.key];
-      const badge = formatBadge(tab.badge ?? null);
-      const a11ySuffix = badgeAccessibilitySuffix(tab.badge ?? null);
-      const inkOpacity = isSolid && !isActive ? SOLID_INACTIVE_OPACITY : 1;
-      // The badge ring matches whatever the icon sits on.
-      const badgeBorder = isBubble && isActive || isSolid ? colors.primary : colors.background.elevated;
-      const labelled = hasLabel(tab);
-      const showLabel = labelled && (!isExpand || isActive);
-      const iconWrap = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-        style: [styles.iconWrap, {
-          width: iconSize + ICON_WRAP_AIR,
-          height: iconSize + ICON_WRAP_AIR,
-          opacity: inkOpacity,
-          transform: [{
-            scale
-          }]
-        }],
-        children: [(0, _index3.renderSlotIcon)(tabIcon, {
-          color: iconColor,
-          size: iconSize,
-          focused: isActive,
-          disabled: false
-        }), badge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [badge.isDot ? styles.badgeDot : styles.badgePill, {
-            backgroundColor: colors.error,
-            borderColor: badgeBorder
-          }],
-          children: badge.isDot ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.badgeText, {
-              color: colors.text.inverse
-            }],
-            numberOfLines: 1,
-            children: badge.text
-          })
-        }) : null]
-      });
-      // The lift lives on its own node: `scale` runs on the native driver
-      // and `progress` on the JS driver, and one node cannot mix the two.
-      // It is a relative `top`, not a transform: on Android a transform on
-      // this wrapper was ignored for a tab whose label is empty.
-      const iconNode = isBubble ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        style: {
-          top: progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, -bubbleLift]
-          })
-        },
-        children: iconWrap
-      }) : iconWrap;
-      const labelNode = showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
-        numberOfLines: 1,
-        style: [styles.label, isExpand ? styles.labelInline : null, {
-          color,
-          opacity: isExpand ? progress : inkOpacity,
-          fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.normal
-        }, labelStyle],
-        children: tab.label
-      }) : null;
-      const pressable = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        onPress: () => handlePress(tab),
-        accessibilityRole: "tab",
-        accessibilityState: {
-          selected: isActive
-        },
-        accessibilityLabel: `${tab.label}${a11ySuffix}`,
-        accessibilityHint: `Switches to ${tab.label}`,
-        hitSlop: {
-          top: 6,
-          bottom: 6,
-          left: 6,
-          right: 6
-        },
-        style: ({
-          pressed
-        }) => [styles.tab, isTile ? styles.tabTile : null, pressed ? {
-          opacity: 0.85
-        } : null],
-        testID: testID ? `${testID}-tab-${tab.key}` : undefined,
-        children: isExpand ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.expandPill, {
-            height: pillHeight,
-            paddingHorizontal: isActive && labelled ? theme.spacing.md : Math.max(0, (pillHeight - (iconSize + ICON_WRAP_AIR)) / 2)
-          }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            pointerEvents: "none",
-            style: [styles.expandFill, {
-              // Half the height, not `radius.full`: Android drops an
-              // oversized radius to square corners while the cell's
-              // flex is being animated.
-              borderRadius: activeBgRadius(pillHeight, pillHeight / 2),
-              ..._corners.smoothCorners,
-              backgroundColor: isActive ? colors.primaryMuted : 'transparent'
-            }, isActive ? indicatorStyle : null]
-          }), iconNode, labelNode]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [iconNode, labelNode]
-        })
-      }, tab.key);
-      if (!isExpand) {
-        return pressable;
-      }
-      // The active cell grows so the pill has room for its label; flex is
-      // layout, hence the JS-driven value.
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        style: {
-          // An icon-only tab has nothing to make room for, so it stays a plain cell.
-          flex: progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [1, labelled ? EXPANDED_FLEX : 1]
-          })
-        },
-        children: pressable
-      }, tab.key);
-    })), variant === 'underline' && tabWidth > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      pointerEvents: "none",
-      style: [styles.underline, indicatorPosition === 'top' ? styles.underlineTop : styles.underlineBottom,
-      // On the padding's outer edge, which is the bar's own edge.
-      indicatorPosition === 'top' ? {
-        top: -paddingTop
-      } : {
-        bottom: -paddingTop
-      }, {
-        width: tabWidth,
-        height: tokens?.underlineHeight ?? DEFAULT_UNDERLINE_HEIGHT,
-        backgroundColor: colors.primary,
-        transform: [{
-          translateX: indicatorTranslateX
-        }]
-      }, indicatorStyle]
-    }) : null]
-  });
-
-  // One tree shape for every variant: root → bar → row. React then keeps the
-  // row (and its onLayout) on a variant switch instead of re-purposing the
-  // capsule view as the row, which left `tabWidth` at the old width.
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    ref: ref,
-    testID: testID,
-    accessibilityRole: "tablist"
-    // Every variant keeps its margin at the sides, so a docked bar sits in
-    // from the screen edges like the capsules do; a vertical margin lifts
-    // it off the bottom the same way.
-    ,
-    style: [styles.outer, {
-      paddingHorizontal: marginHorizontal,
-      paddingTop: Math.max(marginVertical, centerOverhang),
-      paddingBottom: liftBottom
-    }, style],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [isFloating ? styles.floatingBar : styles.dockedBar, barShadow, {
-        backgroundColor: barBackground,
-        borderColor,
-        borderRadius: barRadius,
-        ..._corners.smoothCorners
-      }, isFloating ? {
-        borderWidth: hairline,
-        paddingHorizontal: innerPaddingHorizontal,
-        paddingVertical: paddingTop
-      } : {
-        // Named per edge, never the shorthand (see `hairline`).
-        borderTopWidth: hairline,
-        borderBottomWidth: hairline,
-        borderLeftWidth: hairline,
-        borderRightWidth: hairline,
-        paddingHorizontal: barPaddingHorizontal,
-        paddingTop,
-        paddingBottom
-      }],
-      children: tabRow
-    })
-  });
-});
-BottomNavigation.displayName = 'BottomNavigation';
-const buildStyles = theme => _reactNative.StyleSheet.create({
-  outer: {
-    backgroundColor: 'transparent'
-  },
-  dockedBar: {
-    paddingHorizontal: BAR_PADDING_HORIZONTAL
-  },
-  floatingBar: {
-    paddingVertical: FLOATING_BAR_PADDING_VERTICAL,
-    paddingHorizontal: FLOATING_BAR_PADDING_HORIZONTAL
-  },
-  tabRow: {
-    flexDirection: 'row',
-    alignItems: 'stretch',
-    position: 'relative'
-  },
-  tab: {
-    flex: 1,
-    minHeight: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: TAB_PADDING_VERTICAL,
-    // The pill ends 4px under the icon wrap, so the label's box starts where
-    // the pill ends; the text's own leading is the air, tuned by eye on the
-    // phone with the 18px icon.
-    gap: 4
-  },
-  tabTile: {
-    paddingVertical: TAB_PADDING_VERTICAL + TILE_INSET,
-    gap: TILE_LABEL_GAP
-  },
-  centerCell: {
-    flex: 1,
-    minHeight: 44,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  centerCircle: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  iconWrap: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative'
-  },
-  label: {
-    fontSize: theme.typography.fontSize.xs,
-    lineHeight: theme.typography.fontSize.xs * theme.typography.lineHeight.tight,
-    textAlign: 'center',
-    // Android pads text above its ascenders by default, which reads as a
-    // wider gap under the icon than iOS shows.
-    includeFontPadding: false
-  },
-  labelInline: {
-    fontSize: theme.typography.fontSize.sm,
-    lineHeight: theme.typography.fontSize.sm * theme.typography.lineHeight.tight,
-    flexShrink: 1,
-    includeFontPadding: false
-  },
-  expandPill: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: theme.spacing.xs
-  },
-  expandFill: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    overflow: 'hidden'
-  },
-  pill: {
-    position: 'absolute',
-    left: 0
-  },
-  bubble: {
-    position: 'absolute',
-    left: 0,
-    borderWidth: 3
-  },
-  underline: {
-    position: 'absolute',
-    left: 0,
-    height: DEFAULT_UNDERLINE_HEIGHT
-  },
-  underlineBottom: {
-    borderTopLeftRadius: 2,
-    borderTopRightRadius: 2,
-    ..._corners.smoothCorners
-  },
-  underlineTop: {
-    borderBottomLeftRadius: 2,
-    borderBottomRightRadius: 2,
-    ..._corners.smoothCorners
-  },
-  badgePill: {
-    position: 'absolute',
-    top: -4,
-    right: -8,
-    minWidth: 18,
-    height: 18,
-    borderRadius: 9,
-    ..._corners.smoothCorners,
-    paddingHorizontal: 4,
-    paddingVertical: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1.5
-  },
-  badgeDot: {
-    position: 'absolute',
-    top: -2,
-    right: -2,
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-    ..._corners.smoothCorners,
-    borderWidth: 1.5
-  },
-  badgeText: {
-    fontSize: 10,
-    fontWeight: '700',
-    lineHeight: 12,
-    textAlign: 'center',
-    includeFontPadding: false
-  }
-});
-var _default = exports.default = BottomNavigation;
-//# sourceMappingURL=BottomNavigation.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.BottomNavigation=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_shadows=require("../../utils/shadows.js"),_index3=require("../AppIcon/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,a,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(n=t?r:i){if(n.has(e))return n.get(e);n.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?n(o,t,a):o[t]=e[t]);return o})(e,t)}const DEFAULT_ICON_SIZE=18,ICON_WRAP_AIR=4,PILL_AIR=8,DEFAULT_PILL_MAX_WIDTH=64,TILE_MAX_WIDTH=96,DEFAULT_PILL_INSET=16,DEFAULT_UNDERLINE_HEIGHT=3,DEFAULT_FLOATING_MARGIN=16,DEFAULT_FLOATING_RADIUS=28,DEFAULT_BUBBLE_SIZE=48,DEFAULT_BUBBLE_LIFT=14,DEFAULT_CENTER_SIZE=48,DEFAULT_CENTER_ICON_SIZE=24,CENTER_KEY="__webority_center_action__",TAB_PADDING_VERTICAL=6,BAR_PADDING_HORIZONTAL=4,BAR_PADDING_TOP=6,BAR_PADDING_TOP_BUBBLE=8,FLOATING_BAR_PADDING_VERTICAL=6,FLOATING_BAR_PADDING_HORIZONTAL=8,EXPANDED_FLEX=1.5,SOLID_INACTIVE_OPACITY=.7,TILE_INSET=2,TILE_LABEL_GAP=2,formatBadge=e=>null==e||!1===e?null:!0===e||"·"===e?{text:"",isDot:!0}:"number"==typeof e?e<=0?null:{text:e>99?"99+":String(e),isDot:!1}:"string"==typeof e?0===e.length?null:{text:e,isDot:!1}:null,badgeAccessibilitySuffix=e=>null==e||!1===e?"":"number"==typeof e?e>0?`, ${e} unread`:"":!0===e||"·"===e?", new updates":"string"==typeof e&&e.length>0?`, ${e}`:"",BottomNavigation=exports.BottomNavigation=(0,_react.forwardRef)((e,t)=>{const{tabs:i,centerAction:r,activeTab:n,onChange:a,haptic:o="selection",showLabels:l=!0,variant:s="pill",indicatorPosition:d="bottom",radius:c,indicatorRadius:u="auto",elevation:h,iconSize:p,marginHorizontal:_,marginVertical:g,paddingHorizontal:m,paddingVertical:b,border:f,style:y,indicatorStyle:x,labelStyle:v,testID:R}=e,N=(0,_index.useTheme)(),A=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),I=(0,_react.useMemo)(()=>buildStyles(N),[N]),j=N.components.bottomNavigation,w=p??j?.iconSize??18,E=j?.pillHeight??w+4+8,T=j?.pillMaxWidth??64,D=j?.pillInset??16,L=j?.floatingMargin??16,S=j?.floatingRadius??28,C=j?.bubbleSize??48,B=j?.bubbleLift??14,P="tile"===s,V="floating"===s||P,k="bubble"===s,M="expand"===s,H="solid"===s,W="pill"===s||V||H,z=Math.max(0,i.findIndex(e=>e.key===n)),[F,O]=_react.default.useState(0),[U,q]=_react.default.useState(0),G=r?Math.ceil(i.length/2):i.length,$=i.length+(r?1:0),[X,Z]=_react.default.useState({width:0,height:0}),Y=r?.size??48,K=void 0!==r?.gap,J=Math.max(0,r?.gap??0),Q=K?(X.width||Y)+2*J:0,ee=K?i.length>0?Math.max(0,F-Q)/i.length:0:$>0?F/$:0,te=K?Q:ee,ie=(0,_react.useRef)((0,_index.createAnimatedValue)(z)).current,re=(0,_react.useRef)({}),ne=(0,_react.useRef)({});i.forEach(e=>{re.current[e.key]||(re.current[e.key]=new _reactNative.Animated.Value(1)),ne.current[e.key]||(ne.current[e.key]=(0,_index.createAnimatedValue)(e.key===n?1:0))});const ae=ee>0?P?Math.min(ee-4,96):Math.min(ee-D,T):0,oe=ee>0?(ee-ae)/2:0,le=ee>0?(ee-C)/2:0,hasLabel=e=>l&&!1!==e.showLabel&&e.label.trim().length>0,se=i[z],de=se&&!hasLabel(se)&&U>0?U/2:6+(w+4)/2,ce=de-B-C/2,ue=Math.max(0,U-4),he=P?2:de-E/2,pe=(0,_react.useRef)(z);(0,_react.useEffect)(()=>{if(pe.current===z)return;pe.current=z;const e=_reactNative.Animated.spring(ie,{toValue:z,tension:120,friction:14,useNativeDriver:!0});return e.start(),()=>e.stop()},[z,ie]);const _e=Math.max(1,i.length-1),ge=(0,_react.useMemo)(()=>{const e=[],t=[];for(let i=0;i<=_e;i++)e.push(i),t.push(i<G?i*ee:i*ee+te);return ie.interpolate({inputRange:e,outputRange:t})},[ie,_e,G,ee,te]),me=i.map(e=>e.key).join(" "),be=k||M;(0,_react.useEffect)(()=>{const e=me.split(" ").flatMap(e=>{const t=e===n?1:0,i=ne.current[e];return i?be?[_reactNative.Animated.spring(i,{toValue:t,tension:140,friction:13,useNativeDriver:!1})]:(i.setValue(t),[]):[]});if(0===e.length)return;const t=_reactNative.Animated.parallel(e);return t.start(),()=>t.stop()},[n,me,be]);const popIcon=e=>{_reactNative.Animated.sequence([_reactNative.Animated.timing(e,{toValue:1.15,duration:120,useNativeDriver:!0}),_reactNative.Animated.spring(e,{toValue:1,tension:200,friction:8,useNativeDriver:!0})]).start()},fe=(0,_react.useRef)(new _reactNative.Animated.Value(1)).current,{colors:ye}=N,xe=H?ye.primary:ye.background.elevated,ve=H?ye.onPrimary:ye.primary,Re=H?ye.onPrimary:P?ye.text.primary:ye.text.tertiary,Ne=H?ye.onPrimary:ye.primaryMuted,Ae=H?ye.primary:k?ye.onPrimary:ve,Ie=_??L,je=g??(V?L:0),we=je>0,Ee=b??(V?6:k?8:6),Te=m??(V?8:4),De=we?Ee:Math.max(Ee,A.bottom),Le=we?Math.max(je,A.bottom):0,Se="full"===c,Ce=V?U+2*Ee+2*_reactNative.StyleSheet.hairlineWidth:U+Ee+De,Be=Se?U>0?Ce/2:N.radius.full:c??j?.borderRadius??(P?N.radius.full:V?S:0),Pe=void 0!==c||void 0!==j?.borderRadius,activeBgRadius=(e,t)=>"number"==typeof u?Math.max(0,Math.min(u,e/2)):"auto"===u&&Pe?Math.min(Be,e/2):t,Ve="underline"===s?Math.max(Te,Se&&0===U?0:Be):Te,ke=h??"none",Me=N.shadows[ke],He="none"===ke?null:(0,_shadows.supportsBoxShadow)()?{boxShadow:(0,_shadows.toBoxShadow)(Me)}:Me,We=f?_reactNative.StyleSheet.hairlineWidth:0,ze=H?ye.primary:ye.border.primary,Fe=r?.lift??0,Oe=Ee+We,Ue=r&&U>0?Math.max(0,(X.height||Y)/2+Fe-U/2-Oe):0,qe=r?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.centerCell,K?{flex:0,marginHorizontal:J}:null],pointerEvents:"box-none",children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>{if(!r)return;const e=r.haptic??o;!1!==e&&(0,_index2.triggerHaptic)(e),popIcon(fe),r.onPress()},onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;Z(e=>e.width===t&&e.height===i?e:{width:t,height:i})},accessibilityRole:"button",accessibilityLabel:r.label,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[{top:-Fe},e?{opacity:.85}:null],testID:r.testID??(R?`${R}-center`:void 0),children:r.content?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{transform:[{scale:fe}]},children:r.content}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.centerCircle,{width:Y,height:Y,borderRadius:Y/2,..._corners.smoothCorners,backgroundColor:r.color??ye.primary}],children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{transform:[{scale:fe}]},children:(0,_index3.renderSlotIcon)(r.icon??"add",{color:r.iconColor??ye.onPrimary,size:r.iconSize??24,disabled:!1})})})})},CENTER_KEY):null,Ge=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:I.tabRow,onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;O(t),q(i)},children:[W&&ae>0&&(!P||ue>0)?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[I.pill,{width:ae,height:P?ue:E,left:oe,top:he,backgroundColor:Ne,borderRadius:P?activeBgRadius(ue,ue/2):activeBgRadius(E,N.radius.full),..._corners.smoothCorners,transform:[{translateX:ge}]},x]}):null,k&&ee>0?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[I.bubble,N.shadows.md,{width:C,height:C,borderRadius:C/2,..._corners.smoothCorners,left:le,top:ce,backgroundColor:ye.primary,borderColor:ye.background.elevated,transform:[{translateX:ge}]},x]}):null,($e=i.map(e=>{const t=e.key===n,i=t?ve:Re,r=t?Ae:Re,l="string"==typeof e.icon?{name:e.icon,variant:"bold"}:e.icon,s=t?e.activeIcon??l:e.icon,d=re.current[e.key],c=ne.current[e.key],u=formatBadge(e.badge??null),h=badgeAccessibilitySuffix(e.badge??null),p=H&&!t?.7:1,_=k&&t||H?ye.primary:ye.background.elevated,g=hasLabel(e),m=g&&(!M||t),b=(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[I.iconWrap,{width:w+4,height:w+4,opacity:p,transform:[{scale:d}]}],children:[(0,_index3.renderSlotIcon)(s,{color:r,size:w,focused:t,disabled:!1}),u?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[u.isDot?I.badgeDot:I.badgePill,{backgroundColor:ye.error,borderColor:_}],children:u.isDot?null:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.badgeText,{color:ye.onError}],numberOfLines:1,children:u.text})}):null]}),f=k?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{top:c.interpolate({inputRange:[0,1],outputRange:[0,-B]})},children:b}):b,y=m?(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{numberOfLines:1,style:[I.label,M?I.labelInline:null,{color:i,opacity:M?c:p,fontWeight:t?N.typography.fontWeight.semibold:N.typography.fontWeight.normal},v],children:e.label}):null,A=(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>(e=>{e.key!==n&&!1!==o&&(0,_index2.triggerHaptic)(o);const t=re.current[e.key];t&&popIcon(t),a(e.key)})(e),accessibilityRole:"tab",accessibilityState:{selected:t},accessibilityLabel:`${e.label}${h}`,accessibilityHint:`Switches to ${e.label}`,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[I.tab,P?I.tabTile:null,e?{opacity:.85}:null],testID:R?`${R}-tab-${e.key}`:void 0,children:M?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[I.expandPill,{height:E,paddingHorizontal:t&&g?N.spacing.md:Math.max(0,(E-(w+4))/2)}],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[I.expandFill,{borderRadius:activeBgRadius(E,E/2),..._corners.smoothCorners,backgroundColor:t?ye.primaryMuted:"transparent"},t?x:null]}),f,y]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[f,y]})},e.key);return M?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{flex:c.interpolate({inputRange:[0,1],outputRange:[1,g?1.5:1]})},children:A},e.key):A}),qe?[...$e.slice(0,G),qe,...$e.slice(G)]:$e),"underline"===s&&ee>0?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[I.underline,"top"===d?I.underlineTop:I.underlineBottom,"top"===d?{top:-Ee}:{bottom:-Ee},{width:ee,height:j?.underlineHeight??3,backgroundColor:ye.primary,transform:[{translateX:ge}]},x]}):null]});var $e;return(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,testID:R,accessibilityRole:"tablist",style:[I.outer,{paddingHorizontal:Ie,paddingTop:Math.max(je,Ue),paddingBottom:Le},y],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[V?I.floatingBar:I.dockedBar,He,{backgroundColor:xe,borderColor:ze,borderRadius:Be,..._corners.smoothCorners},V?{borderWidth:We,paddingHorizontal:Te,paddingVertical:Ee}:{borderTopWidth:We,borderBottomWidth:We,borderLeftWidth:We,borderRightWidth:We,paddingHorizontal:Ve,paddingTop:Ee,paddingBottom:De}],children:Ge})})});BottomNavigation.displayName="BottomNavigation";const buildStyles=e=>_reactNative.StyleSheet.create({outer:{backgroundColor:"transparent"},dockedBar:{paddingHorizontal:4},floatingBar:{paddingVertical:6,paddingHorizontal:8},tabRow:{flexDirection:"row",alignItems:"stretch",position:"relative"},tab:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",paddingVertical:6,gap:4},tabTile:{paddingVertical:8,gap:2},centerCell:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center"},centerCircle:{alignItems:"center",justifyContent:"center"},iconWrap:{alignItems:"center",justifyContent:"center",position:"relative"},label:{fontSize:e.typography.fontSize.xs,lineHeight:e.typography.fontSize.xs*e.typography.lineHeight.tight,textAlign:"center",includeFontPadding:!1},labelInline:{fontSize:e.typography.fontSize.sm,lineHeight:e.typography.fontSize.sm*e.typography.lineHeight.tight,flexShrink:1,includeFontPadding:!1},expandPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:e.spacing.xs},expandFill:{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden"},pill:{position:"absolute",left:0},bubble:{position:"absolute",left:0,borderWidth:3},underline:{position:"absolute",left:0,height:3},underlineBottom:{borderTopLeftRadius:2,borderTopRightRadius:2,..._corners.smoothCorners},underlineTop:{borderBottomLeftRadius:2,borderBottomRightRadius:2,..._corners.smoothCorners},badgePill:{position:"absolute",top:-4,right:-8,minWidth:18,height:18,borderRadius:9,..._corners.smoothCorners,paddingHorizontal:4,paddingVertical:2,alignItems:"center",justifyContent:"center",borderWidth:1.5},badgeDot:{position:"absolute",top:-2,right:-2,width:10,height:10,borderRadius:5,..._corners.smoothCorners,borderWidth:1.5},badgeText:{fontSize:10,fontWeight:"700",lineHeight:12,textAlign:"center",includeFontPadding:!1}});var _default=exports.default=BottomNavigation;