import React from 'react';
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
import { Ux4gIconName } from '../../foundation/icons';
/**
 * Indicator style for active tab item:
 * - `pill`: Soft rounded purple capsule background behind active tab
 * - `bar`: Purple horizontal bar indicator at the top of the active tab
 * - `plain`: Clean active color highlight for icon and text without extra background/bar
 */
export type Ux4gBottomNavIndicatorVariant = 'pill' | 'bar' | 'plain';
/**
 * High-level layout / shape variant preset:
 * - `labelled`: Standard flat bottom bar with icons and text labels
 * - `top-rounded`: Bottom bar with rounded top-left and top-right corners
 * - `icon-only`: Icons only without text labels
 * - `center-action`: Bottom bar with a prominent circular action button in the center
 * - `centre-action`: Legacy alias for `center-action` (British spelling)
 * - `floating-pill`: Floating capsule bar with rounded edges detached from screen borders
 */
export type Ux4gBottomNavVariant = 'labelled' | 'top-rounded' | 'icon-only' | 'center-action' | 'centre-action' | 'floating-pill';
/**
 * Geometric shape of the bottom navigation bar container
 */
export type Ux4gBottomNavShape = 'rectangular' | 'top-rounded' | 'floating-pill';
/**
 * Individual navigation tab item definition
 */
export interface Ux4gBottomNavItem {
    /** Unique key for the tab item */
    key?: string;
    /** Label text displayed under or alongside the icon */
    label: string;
    /** Icon name from Ux4gIcons, or custom React Node, or render callback */
    icon: Ux4gIconName | React.ReactNode | ((active: boolean, color: string) => React.ReactNode);
    /** Optional separate icon to render when tab is active */
    activeIcon?: Ux4gIconName | React.ReactNode | ((color: string) => React.ReactNode);
    /** Optional badge count or text (e.g. 5, "99+", true for dot) */
    badge?: string | number | boolean;
    /** Custom badge background color */
    badgeColor?: string;
    /** Custom badge text color */
    badgeTextColor?: string;
    /** Whether the tab item is disabled */
    disabled?: boolean;
    /** Accessibility label for screen readers */
    accessibilityLabel?: string;
    /** Test identifier */
    testID?: string;
}
/**
 * Prominent center floating action button configuration
 */
export interface Ux4gBottomNavCenterAction {
    /** Icon to render inside the center action button (defaults to '+' icon) */
    icon?: Ux4gIconName | React.ReactNode;
    /** Callback triggered when center action button is pressed */
    onPress?: () => void;
    /** Accessibility label */
    accessibilityLabel?: string;
    /** Button diameter in pixels (default 48) */
    size?: number;
    /** Background color (default primary purple) */
    backgroundColor?: string;
    /** Icon / foreground color (default white) */
    iconColor?: string;
    /** Elevation / shadow depth */
    elevation?: number;
    /** Test identifier */
    testID?: string;
}
/**
 * Props for the Ux4gBottomNavigationBar component
 */
export interface Ux4gBottomNavigationBarProps {
    /** Array of navigation tab items (typically 3 to 5 items) */
    items: Ux4gBottomNavItem[];
    /** Controlled active tab index */
    selectedIndex?: number;
    /** Default active tab index for uncontrolled usage (default: 0) */
    defaultSelectedIndex?: number;
    /** Callback triggered when a tab is selected */
    onTabChange?: (index: number, item: Ux4gBottomNavItem) => void;
    /** Active tab indicator style: 'pill' | 'bar' | 'plain' (default: 'pill') */
    indicatorVariant?: Ux4gBottomNavIndicatorVariant;
    /** Preset layout / shape variant */
    variant?: Ux4gBottomNavVariant;
    /** Container shape: 'rectangular' | 'top-rounded' | 'floating-pill' */
    shape?: Ux4gBottomNavShape;
    /** Whether to show text labels below icons (default true, automatically false for 'icon-only') */
    showLabels?: boolean;
    /** Configuration for prominent center action button (used in 'center-action' / 'centre-action' variant) */
    centerAction?: Ux4gBottomNavCenterAction;
    /** Alias for centerAction (supporting UK spelling) */
    centreAction?: Ux4gBottomNavCenterAction;
    /** Color for active icon and label text (default: theme primary purple) */
    activeColor?: string;
    /** Color for inactive icon and label text (default: theme onSurfaceVariant/neutral500) */
    inactiveColor?: string;
    /** Background color for the pill indicator in 'pill' mode (default: theme primary50) */
    pillBackgroundColor?: string;
    /** Color for the top bar indicator in 'bar' mode (default: theme primary) */
    barIndicatorColor?: string;
    /** Height of the top bar indicator (default: 3) */
    barIndicatorHeight?: number;
    /** Width of the top bar indicator (default: 32) */
    barIndicatorWidth?: number;
    /** Background color of the navigation bar (default: theme surface) */
    backgroundColor?: string;
    /** Border color of the navigation bar container */
    borderColor?: string;
    /** Shadow / elevation level (default: 4) */
    elevation?: number;
    /** Whether to wrap within SafeAreaView (default: true) */
    useSafeArea?: boolean;
    /** Height of the inner content area (default: 52 for labelled, 44 for icon-only) */
    height?: number;
    /** Top padding of navigation bar (default: 8) */
    paddingTop?: number;
    /** Bottom padding of navigation bar (default: 12) */
    paddingBottom?: number;
    /** Horizontal padding inside navigation bar */
    paddingHorizontal?: number;
    /** Custom container style */
    style?: StyleProp<ViewStyle>;
    /** Custom style applied to each tab item */
    itemStyle?: StyleProp<ViewStyle>;
    /** Custom text style for inactive tab labels */
    labelStyle?: StyleProp<TextStyle>;
    /** Custom text style for active tab label */
    activeLabelStyle?: StyleProp<TextStyle>;
    /** Test identifier for the entire component */
    testID?: string;
}
export declare const Ux4gBottomNavigationBar: React.FC<Ux4gBottomNavigationBarProps>;
/**
 * Bottom Navigation Bar with Soft Pill indicator around the active tab
 */
export declare const Ux4gPillBottomNavBar: React.FC<Omit<Ux4gBottomNavigationBarProps, 'indicatorVariant'>>;
/**
 * Bottom Navigation Bar with Top Purple Bar indicator above the active tab
 */
export declare const Ux4gBarBottomNavBar: React.FC<Omit<Ux4gBottomNavigationBarProps, 'indicatorVariant'>>;
/**
 * Bottom Navigation Bar with Plain clean active highlight (no pill, no bar)
 */
export declare const Ux4gPlainBottomNavBar: React.FC<Omit<Ux4gBottomNavigationBarProps, 'indicatorVariant'>>;
/**
 * Floating Capsule Bottom Navigation Bar detached from edges
 */
export declare const Ux4gFloatingBottomNavBar: React.FC<Omit<Ux4gBottomNavigationBarProps, 'shape'>>;
/**
 * Bottom Navigation Bar with Prominent Center Action '+' button
 */
export declare const Ux4gCenterActionBottomNavBar: React.FC<Omit<Ux4gBottomNavigationBarProps, 'variant'>>;
//# sourceMappingURL=BottomNavigationBar.d.ts.map