import { type ReactNode } from "react";
import { type ColorTokens, type StyleProp, type ViewStyle, type TextStyle } from "../../style/index.js";
export interface TabBarItem {
    /** Stable identity for the destination; passed to onSelect and compared to `active`. */
    key: string;
    label: string;
    /** Renders the tab's glyph; `active` lets the caller tint it (e.g. primary vs muted). */
    icon: (active: boolean) => ReactNode;
}
export interface TabBarProps {
    items: TabBarItem[];
    /** The active item's key; omit for uncontrolled use. */
    active?: string;
    /** Initial active key for uncontrolled use (defaults to the first item's key). */
    defaultActive?: string;
    /** Called with the pressed destination's key (both modes). */
    onSelect?: (key: string) => void;
    /** E2E hook forwarded to the tablist row. */
    testID?: string;
    /**
     * Safe-area bottom inset, e.g. `insets.bottom`. It is added BELOW the bar's own symmetric
     * vertical padding (not in place of it), so the bar clears the home indicator without making
     * the bottom margin heavier than the top. Defaults to 0 (web desktop / no inset).
     */
    bottomInset?: number;
    /** Layout escape hatch for other overrides. Do NOT use this for the safe area — see `bottomInset`. */
    style?: StyleProp<ViewStyle>;
}
export interface TabBarSkin {
    /** Bar shape: top hairline + min height + top padding (the fill/border color is applied by shared). */
    bar: ViewStyle;
    /** One destination cell: flex 1, centered, icon/label gap + vertical padding. */
    item: ViewStyle;
    /** Label type per active state (size/line-height/weight/tracking; the color is applied by shared). */
    label: (active: boolean) => TextStyle;
    /** Android press ripple (null on iOS/web, which dim instead). */
    ripple: ((tokens: ColorTokens) => {
        color: string;
        borderless: boolean;
        radius?: number;
    }) | null;
    /** iOS/web press dim (null on Android, where the ripple carries it). */
    pressedOpacity: number | null;
    /**
     * Material 3 active-indicator pill drawn BEHIND the active item's icon (the icon
     * is on top). Returns the full absolute-positioned, self-centering pill style;
     * null on iOS/web, so only the Android skin renders it.
     */
    pill: ((tokens: ColorTokens) => ViewStyle) | null;
}
export declare function createTabBar(skin: TabBarSkin): ({ items, active, defaultActive, onSelect, bottomInset, style, testID }: TabBarProps) => import("react").JSX.Element;
//# sourceMappingURL=tab-bar.shared.d.ts.map