@xaui/native 0.0.21 → 0.0.24

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

@@ -0,0 +1,571 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/bottom-tab-bar/index.ts
+var bottom_tab_bar_exports = {};
+__export(bottom_tab_bar_exports, {
+  BottomTabBar: () => BottomTabBar,
+  BottomTabBarItem: () => BottomTabBarItem
+});
+module.exports = __toCommonJS(bottom_tab_bar_exports);
+
+// src/components/bottom-tab-bar/bottom-tab-bar.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+
+// src/components/bottom-tab-bar/bottom-tab-bar.hook.ts
+var import_react6 = require("react");
+var import_core = require("@xaui/core");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/bottom-tab-bar/bottom-tab-bar.hook.ts
+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 (0, import_react6.useMemo)(() => sizeMap[size], [size]);
+};
+var useBottomTabBarColors = (themeColor, activeColor, inactiveColor, indicatorColor) => {
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[(0, import_core.getSafeThemeColor)(themeColor)];
+  return (0, import_react6.useMemo)(() => {
+    return {
+      activeColor: activeColor ?? colorScheme.main,
+      inactiveColor: inactiveColor ?? (0, import_core.withOpacity)(theme.colors.foreground, 0.66),
+      indicatorColor: indicatorColor ?? (0, import_core.withOpacity)(colorScheme.main, theme.mode === "dark" ? 0.28 : 0.16),
+      containerColor: theme.colors.background,
+      borderColor: (0, import_core.withOpacity)(theme.colors.foreground, 0.08)
+    };
+  }, [activeColor, colorScheme.main, indicatorColor, inactiveColor, theme]);
+};
+
+// src/components/bottom-tab-bar/bottom-tab-bar-context.ts
+var import_react7 = require("react");
+var BottomTabBarContext = (0, import_react7.createContext)(
+  null
+);
+var useBottomTabBarContext = () => {
+  return (0, import_react7.useContext)(BottomTabBarContext);
+};
+
+// src/components/bottom-tab-bar/bottom-tab-bar-item.tsx
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/bottom-tab-bar/bottom-tab-bar.style.ts
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.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 = isSelected ?? context?.selectedKey === itemKey;
+  const disabled = isDisabled || !!context?.isDisabled;
+  const resolvedVariant = context?.variant ?? "stacked";
+  const isIconOnly = resolvedVariant === "icon-only";
+  const resolvedShowLabel = isIconOnly ? false : showLabel ?? context?.showLabel ?? true;
+  const isInline = resolvedVariant === "inline";
+  const resolvedSize = context?.size ?? "md";
+  const resolvedThemeColor = context?.themeColor ?? "primary";
+  const [contentSize, setContentSize] = (0, import_react8.useState)({ 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 colors2 = useBottomTabBarColors(
+    resolvedThemeColor,
+    activeColor ?? context?.activeColor,
+    inactiveColor ?? context?.inactiveColor,
+    indicatorColor ?? context?.indicatorColor
+  );
+  const indicatorScale = (0, import_react8.useRef)(new import_react_native5.Animated.Value(selected ? 1 : 0.75)).current;
+  const indicatorOpacity = (0, import_react8.useRef)(new import_react_native5.Animated.Value(selected ? 1 : 0)).current;
+  (0, import_react8.useEffect)(() => {
+    import_react_native5.Animated.parallel([
+      import_react_native5.Animated.spring(indicatorScale, {
+        toValue: selected ? 1 : 0.75,
+        friction: 9,
+        tension: 95,
+        useNativeDriver: true
+      }),
+      import_react_native5.Animated.timing(indicatorOpacity, {
+        toValue: selected ? 1 : 0,
+        duration: selected ? 180 : 140,
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [indicatorOpacity, indicatorScale, selected]);
+  const iconColor = selected ? colors2.activeColor : colors2.inactiveColor;
+  const iconNode = (0, import_react8.useMemo)(() => {
+    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__ */ import_react8.default.createElement(
+    import_react_native5.Text,
+    {
+      numberOfLines: 1,
+      style: [
+        styles.label,
+        isInline && styles.inlineLabel,
+        {
+          color: iconColor,
+          fontSize: sizeStyles.labelSize
+        },
+        customAppearance?.label
+      ]
+    },
+    label
+  ) : null;
+  return /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native5.Pressable,
+    {
+      onPress: (event) => {
+        if (disabled) return;
+        context?.onSelectionChange?.(itemKey);
+        onPress?.(event);
+      },
+      onLongPress,
+      disabled,
+      accessibilityRole: "tab",
+      accessibilityState: { selected: !!selected, disabled },
+      accessibilityLabel,
+      testID,
+      style: styles.itemPressable
+    },
+    /* @__PURE__ */ import_react8.default.createElement(
+      import_react_native5.View,
+      {
+        style: [
+          styles.itemContainer,
+          isInline && styles.itemContainerInline,
+          {
+            paddingTop: sizeStyles.itemPaddingTop,
+            paddingBottom: sizeStyles.itemPaddingBottom
+          },
+          disabled && styles.disabled,
+          style,
+          customAppearance?.container
+        ]
+      },
+      /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native5.Animated.View,
+        {
+          style: [
+            styles.indicator,
+            {
+              width: resolvedIndicatorWidth,
+              height: resolvedIndicatorHeight,
+              marginBottom: !isInline && resolvedShowLabel ? sizeStyles.labelSpacing : 0
+            },
+            customAppearance?.indicator
+          ]
+        },
+        /* @__PURE__ */ import_react8.default.createElement(
+          import_react_native5.Animated.View,
+          {
+            style: [
+              styles.indicatorBackground,
+              {
+                width: resolvedIndicatorWidth,
+                height: resolvedIndicatorHeight,
+                borderRadius: resolvedIndicatorHeight / 2,
+                backgroundColor: colors2.indicatorColor,
+                transform: [{ scale: indicatorScale }],
+                opacity: indicatorOpacity
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ import_react8.default.createElement(
+          import_react_native5.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__ */ import_react8.default.createElement(import_react_native5.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: 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 colors2 = useBottomTabBarColors(
+    themeColor,
+    activeColor,
+    inactiveColor,
+    indicatorColor
+  );
+  if (isExpoRouterMode(props)) {
+    const { state, descriptors, navigation, insets } = props;
+    const currentRoute = state.routes[state.index];
+    const focusedOptions = descriptors[currentRoute.key]?.options;
+    const focusedStyle = focusedOptions?.tabBarStyle;
+    if (focusedStyle?.display === "none") {
+      return null;
+    }
+    const routerInsetBottom = insets?.bottom ?? insetBottom;
+    return /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native6.View,
+      {
+        style: [
+          styles.container,
+          {
+            minHeight: sizeStyles.minHeight + routerInsetBottom,
+            paddingBottom: routerInsetBottom,
+            backgroundColor: colors2.containerColor,
+            borderTopColor: colors2.borderColor
+          },
+          style,
+          customAppearance?.container
+        ]
+      },
+      state.routes.filter((route) => descriptors[route.key]?.options.href !== null).map((route) => {
+        const routeOptions = descriptors[route.key]?.options ?? {};
+        const focused = currentRoute.key === route.key;
+        const routeActiveColor = routeOptions.tabBarActiveTintColor ?? activeColor;
+        const routeInactiveColor = routeOptions.tabBarInactiveTintColor ?? inactiveColor;
+        const labelColor = focused ? routeActiveColor ?? colors2.activeColor : routeInactiveColor ?? colors2.inactiveColor;
+        return /* @__PURE__ */ import_react9.default.createElement(
+          BottomTabBarItem,
+          {
+            key: route.key,
+            itemKey: route.key,
+            label: getRouteLabel(
+              route,
+              routeOptions,
+              focused,
+              labelColor,
+              variant
+            ),
+            icon: routeOptions.tabBarIcon,
+            isSelected: focused,
+            showLabel: 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 = import_react9.default.useMemo(() => {
+    const child = import_react9.default.Children.toArray(children)[0];
+    if (import_react9.default.isValidElement(child)) {
+      return child.props.itemKey;
+    }
+    return void 0;
+  }, [children]);
+  const isControlled = typeof selectedKey === "string";
+  const [internalSelectedKey, setInternalSelectedKey] = (0, import_react9.useState)(
+    defaultSelectedKey ?? firstItemKey
+  );
+  const resolvedSelectedKey = isControlled ? selectedKey : internalSelectedKey;
+  const handleSelectionChange = (nextKey) => {
+    if (!isControlled) {
+      setInternalSelectedKey(nextKey);
+    }
+    onSelectionChange?.(nextKey);
+  };
+  const contextValue = (0, import_react9.useMemo)(
+    () => ({
+      selectedKey: resolvedSelectedKey,
+      onSelectionChange: handleSelectionChange,
+      isDisabled,
+      showLabel,
+      size,
+      variant,
+      themeColor,
+      indicatorColor,
+      activeColor,
+      inactiveColor
+    }),
+    [
+      activeColor,
+      inactiveColor,
+      indicatorColor,
+      isDisabled,
+      resolvedSelectedKey,
+      showLabel,
+      size,
+      variant,
+      themeColor
+    ]
+  );
+  return /* @__PURE__ */ import_react9.default.createElement(BottomTabBarContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native6.View,
+    {
+      style: [
+        styles.container,
+        {
+          minHeight: sizeStyles.minHeight + insetBottom,
+          paddingBottom: insetBottom,
+          backgroundColor: colors2.containerColor,
+          borderTopColor: colors2.borderColor
+        },
+        style,
+        customAppearance?.container
+      ]
+    },
+    children
+  ));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BottomTabBar,
+  BottomTabBarItem
+});