@xaui/native 0.2.7 → 0.9.1-alpha.0

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

@@ -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 };

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

@@ -1,497 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/bottom-tab-bar/bottom-tab-bar.tsx
-import React2, { useMemo as useMemo3, useState as useState2 } from "react";
-import { View as View2 } from "react-native";
-
-// src/components/bottom-tab-bar/bottom-tab-bar.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor, withOpacity } from "@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 useMemo(() => sizeMap[size], [size]);
-};
-var useBottomTabBarColors = (themeColor, activeColor, inactiveColor, indicatorColor) => {
-  const theme = useXUITheme();
-  const colorScheme = theme.colors[getSafeThemeColor(themeColor)];
-  return useMemo(() => {
-    return {
-      activeColor: activeColor ?? colorScheme.main,
-      inactiveColor: inactiveColor ?? withOpacity(theme.colors.foreground, 0.66),
-      indicatorColor: indicatorColor ?? withOpacity(colorScheme.main, theme.mode === "dark" ? 0.28 : 0.16),
-      containerColor: theme.colors.background,
-      borderColor: withOpacity(theme.colors.foreground, 0.08)
-    };
-  }, [activeColor, colorScheme.main, indicatorColor, inactiveColor, theme]);
-};
-
-// src/components/bottom-tab-bar/bottom-tab-bar-context.ts
-import { createContext, useContext } from "react";
-var BottomTabBarContext = createContext(
-  null
-);
-var useBottomTabBarContext = () => {
-  return useContext(BottomTabBarContext);
-};
-
-// src/components/bottom-tab-bar/bottom-tab-bar-item.tsx
-import React, { useEffect, useMemo as useMemo2, useRef, useState } from "react";
-import { Animated, Pressable, Text, View } from "react-native";
-
-// src/components/bottom-tab-bar/bottom-tab-bar.style.ts
-import { StyleSheet } from "react-native";
-var styles = 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] = 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 colors = useBottomTabBarColors(
-    resolvedThemeColor,
-    activeColor ?? context?.activeColor,
-    inactiveColor ?? context?.inactiveColor,
-    indicatorColor ?? context?.indicatorColor
-  );
-  const indicatorScale = useRef(new Animated.Value(selected ? 1 : 0.75)).current;
-  const indicatorOpacity = useRef(new Animated.Value(selected ? 1 : 0)).current;
-  useEffect(() => {
-    Animated.parallel([
-      Animated.spring(indicatorScale, {
-        toValue: selected ? 1 : 0.75,
-        friction: 9,
-        tension: 95,
-        useNativeDriver: true
-      }),
-      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 = useMemo2(() => {
-    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__ */ React.createElement(
-    Text,
-    {
-      numberOfLines: 1,
-      style: [
-        styles.label,
-        isInline && styles.inlineLabel,
-        {
-          color: iconColor,
-          fontSize: sizeStyles.labelSize
-        },
-        customAppearance?.label
-      ]
-    },
-    label
-  ) : null;
-  return /* @__PURE__ */ React.createElement(
-    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__ */ React.createElement(
-      View,
-      {
-        style: [
-          styles.itemContainer,
-          isInline && styles.itemContainerInline,
-          {
-            paddingTop: sizeStyles.itemPaddingTop,
-            paddingBottom: sizeStyles.itemPaddingBottom
-          },
-          disabled && styles.disabled,
-          style,
-          customAppearance?.container
-        ]
-      },
-      /* @__PURE__ */ React.createElement(
-        Animated.View,
-        {
-          style: [
-            styles.indicator,
-            {
-              width: resolvedIndicatorWidth,
-              height: resolvedIndicatorHeight,
-              marginBottom: !isInline && resolvedShowLabel ? sizeStyles.labelSpacing : 0
-            },
-            customAppearance?.indicator
-          ]
-        },
-        /* @__PURE__ */ React.createElement(
-          Animated.View,
-          {
-            style: [
-              styles.indicatorBackground,
-              {
-                width: resolvedIndicatorWidth,
-                height: resolvedIndicatorHeight,
-                borderRadius: resolvedIndicatorHeight / 2,
-                backgroundColor: colors.indicatorColor,
-                transform: [{ scale: indicatorScale }],
-                opacity: indicatorOpacity
-              }
-            ]
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          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__ */ React.createElement(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 colors = 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__ */ React2.createElement(
-      View2,
-      {
-        style: [
-          styles.container,
-          {
-            minHeight: sizeStyles.minHeight + routerInsetBottom,
-            paddingBottom: routerInsetBottom,
-            backgroundColor: colors.containerColor,
-            borderTopColor: colors.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 ?? colors.activeColor : routeInactiveColor ?? colors.inactiveColor;
-        return /* @__PURE__ */ React2.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 = React2.useMemo(() => {
-    const child = React2.Children.toArray(children)[0];
-    if (React2.isValidElement(child)) {
-      return child.props.itemKey;
-    }
-    return void 0;
-  }, [children]);
-  const isControlled = typeof selectedKey === "string";
-  const [internalSelectedKey, setInternalSelectedKey] = useState2(
-    defaultSelectedKey ?? firstItemKey
-  );
-  const resolvedSelectedKey = isControlled ? selectedKey : internalSelectedKey;
-  const handleSelectionChange = (nextKey) => {
-    if (!isControlled) {
-      setInternalSelectedKey(nextKey);
-    }
-    onSelectionChange?.(nextKey);
-  };
-  const contextValue = useMemo3(
-    () => ({
-      selectedKey: resolvedSelectedKey,
-      onSelectionChange: handleSelectionChange,
-      isDisabled,
-      showLabel,
-      size,
-      variant,
-      themeColor,
-      indicatorColor,
-      activeColor,
-      inactiveColor
-    }),
-    [
-      activeColor,
-      inactiveColor,
-      indicatorColor,
-      isDisabled,
-      resolvedSelectedKey,
-      showLabel,
-      size,
-      variant,
-      themeColor
-    ]
-  );
-  return /* @__PURE__ */ React2.createElement(BottomTabBarContext.Provider, { value: contextValue }, /* @__PURE__ */ React2.createElement(
-    View2,
-    {
-      style: [
-        styles.container,
-        {
-          minHeight: sizeStyles.minHeight + insetBottom,
-          paddingBottom: insetBottom,
-          backgroundColor: colors.containerColor,
-          borderTopColor: colors.borderColor
-        },
-        style,
-        customAppearance?.container
-      ]
-    },
-    children
-  ));
-};
-export {
-  BottomTabBar,
-  BottomTabBarItem
-};