@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/bottom-tab-bar/index.cjs

@@ -1,497 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/bottom-tab-bar/bottom-tab-bar.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/bottom-tab-bar/bottom-tab-bar.hook.ts
-
-var _core = require('@xaui/core');
-var sizeMap = {
-  sm: {
-    minHeight: 68,
-    iconSize: 20,
-    indicatorWidth: 58,
-    indicatorHeight: 30,
-    indicatorRadius: 15,
-    itemPaddingTop: 8,
-    itemPaddingBottom: 6,
-    labelSize: 11,
-    labelSpacing: 4
-  },
-  md: {
-    minHeight: 78,
-    iconSize: 24,
-    indicatorWidth: 64,
-    indicatorHeight: 32,
-    indicatorRadius: 16,
-    itemPaddingTop: 10,
-    itemPaddingBottom: 8,
-    labelSize: 12,
-    labelSpacing: 4
-  },
-  lg: {
-    minHeight: 86,
-    iconSize: 26,
-    indicatorWidth: 70,
-    indicatorHeight: 36,
-    indicatorRadius: 18,
-    itemPaddingTop: 11,
-    itemPaddingBottom: 10,
-    labelSize: 13,
-    labelSpacing: 5
-  }
-};
-var useBottomTabBarSizeStyles = (size) => {
-  return _react.useMemo.call(void 0, () => sizeMap[size], [size]);
-};
-var useBottomTabBarColors = (themeColor, activeColor, inactiveColor, indicatorColor) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const colorScheme = theme.colors[_core.getSafeThemeColor.call(void 0, themeColor)];
-  return _react.useMemo.call(void 0, () => {
-    return {
-      activeColor: _nullishCoalesce(activeColor, () => ( colorScheme.main)),
-      inactiveColor: _nullishCoalesce(inactiveColor, () => ( _core.withOpacity.call(void 0, theme.colors.foreground, 0.66))),
-      indicatorColor: _nullishCoalesce(indicatorColor, () => ( _core.withOpacity.call(void 0, colorScheme.main, theme.mode === "dark" ? 0.28 : 0.16))),
-      containerColor: theme.colors.background,
-      borderColor: _core.withOpacity.call(void 0, theme.colors.foreground, 0.08)
-    };
-  }, [activeColor, colorScheme.main, indicatorColor, inactiveColor, theme]);
-};
-
-// src/components/bottom-tab-bar/bottom-tab-bar-context.ts
-
-var BottomTabBarContext = _react.createContext.call(void 0, 
-  null
-);
-var useBottomTabBarContext = () => {
-  return _react.useContext.call(void 0, BottomTabBarContext);
-};
-
-// src/components/bottom-tab-bar/bottom-tab-bar-item.tsx
-
-
-
-// src/components/bottom-tab-bar/bottom-tab-bar.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "stretch",
-    width: "100%",
-    borderTopWidth: 1
-  },
-  itemPressable: {
-    flex: 1
-  },
-  itemContainer: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  itemContainerInline: {
-    flexDirection: "row"
-  },
-  indicator: {
-    alignItems: "center",
-    justifyContent: "center",
-    position: "relative"
-  },
-  indicatorContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  indicatorBackground: {
-    position: "absolute"
-  },
-  label: {
-    fontWeight: "600",
-    letterSpacing: 0.1
-  },
-  inlineLabel: {
-    marginLeft: 6
-  },
-  badgeContainer: {
-    position: "absolute",
-    top: -4,
-    right: -10
-  },
-  disabled: {
-    opacity: 0.5
-  }
-});
-
-// src/components/bottom-tab-bar/bottom-tab-bar-item.tsx
-var resolveIconNode = (icon, params) => {
-  if (typeof icon === "function") {
-    return icon(params);
-  }
-  return icon;
-};
-var BottomTabBarItem = ({
-  itemKey,
-  label,
-  icon,
-  activeIcon,
-  badge,
-  isDisabled = false,
-  isSelected,
-  showLabel,
-  activeColor,
-  inactiveColor,
-  indicatorColor,
-  style,
-  customAppearance,
-  onPress,
-  onLongPress,
-  accessibilityLabel,
-  testID
-}) => {
-  const INLINE_INDICATOR_HORIZONTAL_PADDING = 10;
-  const INLINE_INDICATOR_VERTICAL_PADDING = 14;
-  const ICON_ONLY_INDICATOR_HORIZONTAL_PADDING = 10;
-  const ICON_ONLY_INDICATOR_VERTICAL_PADDING = 10;
-  const context = useBottomTabBarContext();
-  const selected = _nullishCoalesce(isSelected, () => ( _optionalChain([context, 'optionalAccess', _ => _.selectedKey]) === itemKey));
-  const disabled = isDisabled || !!_optionalChain([context, 'optionalAccess', _2 => _2.isDisabled]);
-  const resolvedVariant = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _3 => _3.variant]), () => ( "stacked"));
-  const isIconOnly = resolvedVariant === "icon-only";
-  const resolvedShowLabel = isIconOnly ? false : _nullishCoalesce(_nullishCoalesce(showLabel, () => ( _optionalChain([context, 'optionalAccess', _4 => _4.showLabel]))), () => ( true));
-  const isInline = resolvedVariant === "inline";
-  const resolvedSize = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _5 => _5.size]), () => ( "md"));
-  const resolvedThemeColor = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _6 => _6.themeColor]), () => ( "primary"));
-  const [contentSize, setContentSize] = _react.useState.call(void 0, { width: 0, height: 0 });
-  const sizeStyles = useBottomTabBarSizeStyles(resolvedSize);
-  const resolvedIndicatorWidth = isInline ? Math.max(
-    sizeStyles.indicatorHeight,
-    contentSize.width + INLINE_INDICATOR_HORIZONTAL_PADDING * 2
-  ) : isIconOnly ? Math.max(
-    sizeStyles.indicatorWidth,
-    contentSize.width + ICON_ONLY_INDICATOR_HORIZONTAL_PADDING * 2
-  ) : sizeStyles.indicatorWidth;
-  const resolvedIndicatorHeight = isInline ? Math.max(
-    sizeStyles.indicatorHeight,
-    contentSize.height + INLINE_INDICATOR_VERTICAL_PADDING * 1.35
-  ) : isIconOnly ? Math.max(
-    sizeStyles.indicatorHeight,
-    contentSize.height + ICON_ONLY_INDICATOR_VERTICAL_PADDING * 2
-  ) : sizeStyles.indicatorHeight;
-  const colors = useBottomTabBarColors(
-    resolvedThemeColor,
-    _nullishCoalesce(activeColor, () => ( _optionalChain([context, 'optionalAccess', _7 => _7.activeColor]))),
-    _nullishCoalesce(inactiveColor, () => ( _optionalChain([context, 'optionalAccess', _8 => _8.inactiveColor]))),
-    _nullishCoalesce(indicatorColor, () => ( _optionalChain([context, 'optionalAccess', _9 => _9.indicatorColor])))
-  );
-  const indicatorScale = _react.useRef.call(void 0, new _reactnative.Animated.Value(selected ? 1 : 0.75)).current;
-  const indicatorOpacity = _react.useRef.call(void 0, new _reactnative.Animated.Value(selected ? 1 : 0)).current;
-  _react.useEffect.call(void 0, () => {
-    _reactnative.Animated.parallel([
-      _reactnative.Animated.spring(indicatorScale, {
-        toValue: selected ? 1 : 0.75,
-        friction: 9,
-        tension: 95,
-        useNativeDriver: true
-      }),
-      _reactnative.Animated.timing(indicatorOpacity, {
-        toValue: selected ? 1 : 0,
-        duration: selected ? 180 : 140,
-        useNativeDriver: true
-      })
-    ]).start();
-  }, [indicatorOpacity, indicatorScale, selected]);
-  const iconColor = selected ? colors.activeColor : colors.inactiveColor;
-  const iconNode = _react.useMemo.call(void 0, () => {
-    const params = {
-      focused: !!selected,
-      color: iconColor,
-      size: sizeStyles.iconSize
-    };
-    if (selected && activeIcon) {
-      return resolveIconNode(activeIcon, params);
-    }
-    return resolveIconNode(icon, params);
-  }, [activeIcon, icon, iconColor, selected, sizeStyles.iconSize]);
-  const labelNode = resolvedShowLabel ? /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Text,
-    {
-      numberOfLines: 1,
-      style: [
-        styles.label,
-        isInline && styles.inlineLabel,
-        {
-          color: iconColor,
-          fontSize: sizeStyles.labelSize
-        },
-        _optionalChain([customAppearance, 'optionalAccess', _10 => _10.label])
-      ]
-    },
-    label
-  ) : null;
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Pressable,
-    {
-      onPress: (event) => {
-        if (disabled) return;
-        _optionalChain([context, 'optionalAccess', _11 => _11.onSelectionChange, 'optionalCall', _12 => _12(itemKey)]);
-        _optionalChain([onPress, 'optionalCall', _13 => _13(event)]);
-      },
-      onLongPress,
-      disabled,
-      accessibilityRole: "tab",
-      accessibilityState: { selected: !!selected, disabled },
-      accessibilityLabel,
-      testID,
-      style: styles.itemPressable
-    },
-    /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.View,
-      {
-        style: [
-          styles.itemContainer,
-          isInline && styles.itemContainerInline,
-          {
-            paddingTop: sizeStyles.itemPaddingTop,
-            paddingBottom: sizeStyles.itemPaddingBottom
-          },
-          disabled && styles.disabled,
-          style,
-          _optionalChain([customAppearance, 'optionalAccess', _14 => _14.container])
-        ]
-      },
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Animated.View,
-        {
-          style: [
-            styles.indicator,
-            {
-              width: resolvedIndicatorWidth,
-              height: resolvedIndicatorHeight,
-              marginBottom: !isInline && resolvedShowLabel ? sizeStyles.labelSpacing : 0
-            },
-            _optionalChain([customAppearance, 'optionalAccess', _15 => _15.indicator])
-          ]
-        },
-        /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.Animated.View,
-          {
-            style: [
-              styles.indicatorBackground,
-              {
-                width: resolvedIndicatorWidth,
-                height: resolvedIndicatorHeight,
-                borderRadius: resolvedIndicatorHeight / 2,
-                backgroundColor: colors.indicatorColor,
-                transform: [{ scale: indicatorScale }],
-                opacity: indicatorOpacity
-              }
-            ]
-          }
-        ),
-        /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.View,
-          {
-            style: styles.indicatorContent,
-            onLayout: (event) => {
-              if (!isInline && !isIconOnly) return;
-              const nextWidth = Math.ceil(event.nativeEvent.layout.width);
-              const nextHeight = Math.ceil(event.nativeEvent.layout.height);
-              setContentSize(
-                (prev) => prev.width === nextWidth && prev.height === nextHeight ? prev : { width: nextWidth, height: nextHeight }
-              );
-            }
-          },
-          iconNode,
-          badge ? /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.badgeContainer }, badge) : null,
-          isInline ? labelNode : null
-        )
-      ),
-      !isInline ? labelNode : null
-    )
-  );
-};
-
-// src/components/bottom-tab-bar/bottom-tab-bar.tsx
-var isExpoRouterMode = (props) => {
-  return "state" in props && "navigation" in props && "descriptors" in props && !!props.state && !!props.navigation && !!props.descriptors;
-};
-var getRouteLabel = (route, options, focused, color, variant) => {
-  if (typeof options.tabBarLabel === "function") {
-    return options.tabBarLabel({
-      focused,
-      color,
-      children: _nullishCoalesce(options.title, () => ( route.name)),
-      position: variant === "inline" ? "beside-icon" : "below-icon"
-    });
-  }
-  if (typeof options.tabBarLabel === "string") {
-    return options.tabBarLabel;
-  }
-  if (typeof options.title === "string") {
-    return options.title;
-  }
-  return route.name;
-};
-var BottomTabBar = (props) => {
-  const {
-    themeColor = "primary",
-    size = "md",
-    variant = "stacked",
-    isDisabled = false,
-    showLabel = true,
-    insetBottom = 0,
-    indicatorColor,
-    activeColor,
-    inactiveColor,
-    style,
-    customAppearance
-  } = props;
-  const sizeStyles = useBottomTabBarSizeStyles(size);
-  const colors = useBottomTabBarColors(
-    themeColor,
-    activeColor,
-    inactiveColor,
-    indicatorColor
-  );
-  if (isExpoRouterMode(props)) {
-    const { state, descriptors, navigation, insets } = props;
-    const currentRoute = state.routes[state.index];
-    const focusedOptions = _optionalChain([descriptors, 'access', _16 => _16[currentRoute.key], 'optionalAccess', _17 => _17.options]);
-    const focusedStyle = _optionalChain([focusedOptions, 'optionalAccess', _18 => _18.tabBarStyle]);
-    if (_optionalChain([focusedStyle, 'optionalAccess', _19 => _19.display]) === "none") {
-      return null;
-    }
-    const routerInsetBottom = _nullishCoalesce(_optionalChain([insets, 'optionalAccess', _20 => _20.bottom]), () => ( insetBottom));
-    return /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.View,
-      {
-        style: [
-          styles.container,
-          {
-            minHeight: sizeStyles.minHeight + routerInsetBottom,
-            paddingBottom: routerInsetBottom,
-            backgroundColor: colors.containerColor,
-            borderTopColor: colors.borderColor
-          },
-          style,
-          _optionalChain([customAppearance, 'optionalAccess', _21 => _21.container])
-        ]
-      },
-      state.routes.filter((route) => _optionalChain([descriptors, 'access', _22 => _22[route.key], 'optionalAccess', _23 => _23.options, 'access', _24 => _24.href]) !== null).map((route) => {
-        const routeOptions = _nullishCoalesce(_optionalChain([descriptors, 'access', _25 => _25[route.key], 'optionalAccess', _26 => _26.options]), () => ( {}));
-        const focused = currentRoute.key === route.key;
-        const routeActiveColor = _nullishCoalesce(routeOptions.tabBarActiveTintColor, () => ( activeColor));
-        const routeInactiveColor = _nullishCoalesce(routeOptions.tabBarInactiveTintColor, () => ( inactiveColor));
-        const labelColor = focused ? _nullishCoalesce(routeActiveColor, () => ( colors.activeColor)) : _nullishCoalesce(routeInactiveColor, () => ( colors.inactiveColor));
-        return /* @__PURE__ */ _react2.default.createElement(
-          BottomTabBarItem,
-          {
-            key: route.key,
-            itemKey: route.key,
-            label: getRouteLabel(
-              route,
-              routeOptions,
-              focused,
-              labelColor,
-              variant
-            ),
-            icon: routeOptions.tabBarIcon,
-            isSelected: focused,
-            showLabel: _nullishCoalesce(routeOptions.tabBarShowLabel, () => ( showLabel)),
-            activeColor: routeActiveColor,
-            inactiveColor: routeInactiveColor,
-            badge: routeOptions.tabBarBadge,
-            accessibilityLabel: routeOptions.tabBarAccessibilityLabel,
-            testID: routeOptions.tabBarButtonTestID,
-            style: routeOptions.tabBarItemStyle,
-            isDisabled,
-            onPress: () => {
-              const event = navigation.emit({
-                type: "tabPress",
-                target: route.key,
-                canPreventDefault: true
-              });
-              if (!focused && !event.defaultPrevented) {
-                navigation.navigate(route.name, route.params);
-              }
-            },
-            onLongPress: () => {
-              navigation.emit({
-                type: "tabLongPress",
-                target: route.key
-              });
-            }
-          }
-        );
-      })
-    );
-  }
-  const { children, selectedKey, defaultSelectedKey, onSelectionChange } = props;
-  const firstItemKey = _react2.default.useMemo(() => {
-    const child = _react2.default.Children.toArray(children)[0];
-    if (_react2.default.isValidElement(child)) {
-      return child.props.itemKey;
-    }
-    return void 0;
-  }, [children]);
-  const isControlled = typeof selectedKey === "string";
-  const [internalSelectedKey, setInternalSelectedKey] = _react.useState.call(void 0, 
-    _nullishCoalesce(defaultSelectedKey, () => ( firstItemKey))
-  );
-  const resolvedSelectedKey = isControlled ? selectedKey : internalSelectedKey;
-  const handleSelectionChange = (nextKey) => {
-    if (!isControlled) {
-      setInternalSelectedKey(nextKey);
-    }
-    _optionalChain([onSelectionChange, 'optionalCall', _27 => _27(nextKey)]);
-  };
-  const contextValue = _react.useMemo.call(void 0, 
-    () => ({
-      selectedKey: resolvedSelectedKey,
-      onSelectionChange: handleSelectionChange,
-      isDisabled,
-      showLabel,
-      size,
-      variant,
-      themeColor,
-      indicatorColor,
-      activeColor,
-      inactiveColor
-    }),
-    [
-      activeColor,
-      inactiveColor,
-      indicatorColor,
-      isDisabled,
-      resolvedSelectedKey,
-      showLabel,
-      size,
-      variant,
-      themeColor
-    ]
-  );
-  return /* @__PURE__ */ _react2.default.createElement(BottomTabBarContext.Provider, { value: contextValue }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        styles.container,
-        {
-          minHeight: sizeStyles.minHeight + insetBottom,
-          paddingBottom: insetBottom,
-          backgroundColor: colors.containerColor,
-          borderTopColor: colors.borderColor
-        },
-        style,
-        _optionalChain([customAppearance, 'optionalAccess', _28 => _28.container])
-      ]
-    },
-    children
-  ));
-};
-
-
-
-exports.BottomTabBar = BottomTabBar; exports.BottomTabBarItem = BottomTabBarItem;

package/dist/bottom-tab-bar/index.d.cts

@@ -1,211 +0,0 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, ViewStyle, Insets, TextStyle, GestureResponderEvent } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type BottomTabBarSize = 'sm' | 'md' | 'lg';
-type BottomTabBarVariant = 'stacked' | 'inline' | 'icon-only';
-type BottomTabBarIconRenderParams = {
-    focused: boolean;
-    color: string;
-    size: number;
-};
-type BottomTabBarItemLabelRenderParams = {
-    focused: boolean;
-    color: string;
-    children: string;
-    position: 'below-icon' | 'beside-icon';
-};
-type BottomTabBarItemCustomAppearance = {
-    container?: StyleProp<ViewStyle>;
-    indicator?: StyleProp<ViewStyle>;
-    label?: StyleProp<TextStyle>;
-};
-type BottomTabBarItemProps = {
-    /**
-     * Unique key for this tab item.
-     */
-    itemKey: string;
-    /**
-     * Label shown under icon.
-     */
-    label: ReactNode;
-    /**
-     * Icon content or icon render function.
-     */
-    icon?: ReactNode | ((params: BottomTabBarIconRenderParams) => ReactNode);
-    /**
-     * Optional icon when selected.
-     */
-    activeIcon?: ReactNode | ((params: BottomTabBarIconRenderParams) => ReactNode);
-    /**
-     * Optional badge shown near icon.
-     */
-    badge?: ReactNode;
-    /**
-     * Whether this item is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Controlled selected state (standalone mode).
-     */
-    isSelected?: boolean;
-    /**
-     * Whether to show label.
-     */
-    showLabel?: boolean;
-    /**
-     * Per-item active color override.
-     */
-    activeColor?: string;
-    /**
-     * Per-item inactive color override.
-     */
-    inactiveColor?: string;
-    /**
-     * Per-item active indicator color override.
-     */
-    indicatorColor?: string;
-    /**
-     * Custom style for item.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Custom appearance styles.
-     */
-    customAppearance?: BottomTabBarItemCustomAppearance;
-    /**
-     * Callback fired when item is pressed.
-     */
-    onPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Callback fired when item is long-pressed.
-     */
-    onLongPress?: (event: GestureResponderEvent) => void;
-    /**
-     * Accessibility label.
-     */
-    accessibilityLabel?: string;
-    /**
-     * testID for e2e tests.
-     */
-    testID?: string;
-};
-type ExpoRouterTabRoute = {
-    key: string;
-    name: string;
-    params?: Record<string, unknown>;
-};
-type ExpoRouterTabState = {
-    index: number;
-    routes: ExpoRouterTabRoute[];
-};
-type ExpoRouterTabDescriptorOptions = {
-    title?: string;
-    tabBarLabel?: string | ((props: BottomTabBarItemLabelRenderParams) => ReactNode);
-    tabBarIcon?: (props: BottomTabBarIconRenderParams) => ReactNode;
-    tabBarActiveTintColor?: string;
-    tabBarInactiveTintColor?: string;
-    tabBarBadge?: ReactNode;
-    tabBarShowLabel?: boolean;
-    tabBarButtonTestID?: string;
-    tabBarAccessibilityLabel?: string;
-    tabBarItemStyle?: StyleProp<ViewStyle>;
-    tabBarStyle?: StyleProp<ViewStyle>;
-    href?: string | null;
-};
-type ExpoRouterTabDescriptor = {
-    options: ExpoRouterTabDescriptorOptions;
-};
-type ExpoRouterTabDescriptors = Record<string, ExpoRouterTabDescriptor>;
-type ExpoRouterTabNavigation = {
-    emit: (options: {
-        type: 'tabPress' | 'tabLongPress';
-        target?: string;
-        canPreventDefault?: boolean;
-    }) => {
-        defaultPrevented?: boolean;
-    };
-    navigate: (name: string, params?: Record<string, unknown>) => void;
-};
-type ExpoRouterBottomTabBarCompatibleProps = {
-    state: ExpoRouterTabState;
-    descriptors: ExpoRouterTabDescriptors;
-    navigation: ExpoRouterTabNavigation;
-    insets?: Partial<Insets>;
-};
-type BottomTabBarBaseProps = {
-    /**
-     * Shared theme color.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Bar size.
-     * @default 'md'
-     */
-    size?: BottomTabBarSize;
-    /**
-     * Layout variant for each tab item.
-     * @default 'stacked'
-     */
-    variant?: BottomTabBarVariant;
-    /**
-     * Whether all items are disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether labels are shown by default.
-     * @default true
-     */
-    showLabel?: boolean;
-    /**
-     * Safe area bottom inset (manual mode). In expo-router mode this comes from `insets.bottom`.
-     */
-    insetBottom?: number;
-    /**
-     * Active indicator color override.
-     */
-    indicatorColor?: string;
-    /**
-     * Active icon/label color override.
-     */
-    activeColor?: string;
-    /**
-     * Inactive icon/label color override.
-     */
-    inactiveColor?: string;
-    /**
-     * Bar container style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Custom appearance styles.
-     */
-    customAppearance?: {
-        container?: StyleProp<ViewStyle>;
-    };
-};
-type BottomTabBarComposableProps = BottomTabBarBaseProps & {
-    children: ReactNode;
-    /**
-     * Controlled selected item key.
-     */
-    selectedKey?: string;
-    /**
-     * Uncontrolled default selected item key.
-     */
-    defaultSelectedKey?: string;
-    /**
-     * Callback fired when selected item changes.
-     */
-    onSelectionChange?: (key: string) => void;
-};
-type BottomTabBarProps = BottomTabBarComposableProps | (BottomTabBarBaseProps & ExpoRouterBottomTabBarCompatibleProps);
-
-declare const BottomTabBar: React.FC<BottomTabBarProps>;
-
-declare const BottomTabBarItem: React.FC<BottomTabBarItemProps>;
-
-export { BottomTabBar, type BottomTabBarComposableProps, type BottomTabBarIconRenderParams, BottomTabBarItem, type BottomTabBarItemCustomAppearance, type BottomTabBarItemLabelRenderParams, type BottomTabBarItemProps, type BottomTabBarProps, type BottomTabBarSize, type BottomTabBarVariant, type ExpoRouterBottomTabBarCompatibleProps, type ExpoRouterTabDescriptor, type ExpoRouterTabDescriptorOptions, type ExpoRouterTabDescriptors, type ExpoRouterTabNavigation, type ExpoRouterTabRoute, type ExpoRouterTabState };