import { ComputedRef, InjectionKey, Ref, TeleportProps } from 'vue';
import { MoreListInjectionKey } from '../../composables/useMoreList.js';
import { Nullable } from '../../types/utils.js';
import { OnyxBreakpoint } from '../../utils/breakpoints.js';
import { OnyxNavAppAreaProps } from '../OnyxNavAppArea/types.js';
export type NavBarOrientation = "horizontal" | "vertical";
export type OnyxNavBarProps<TOrientation extends NavBarOrientation = NavBarOrientation> = Pick<OnyxNavAppAreaProps, "appName" | "logoUrl"> & {
    /**
     * Whether to show a back button.
     */
    withBackButton?: boolean;
    /**
     * Override app area.
     * @default Link to "/" route with a translated "Go to home" aria-label depending on the current locale.
     */
    appArea?: Omit<OnyxNavAppAreaProps, "appName" | "logoUrl">;
    /**
     *
     * Determines if and when the `OnyxNavBar` should render in mobile mode.
     *
     * `mobile` prop can be one of the following;
     *  - a `boolean`: The NavBar renders in mobile mode, when `true`.
     *  - a `OnyxBreakpoint`: The NavBar renders in mobile mode, when the current breakpoint matches or is smaller.
     *  - a `number`: The NavBar renders in mobile when the viewport width is smaller than the provided value.
     *
     * @see [onyx docs](https://onyx.schwarz/development/breakpoints.html) for more information.
     */
    mobile?: boolean | OnyxBreakpoint | number;
    /**
     * The orientation of the nav bar.
     * @default "horizontal"
     */
    orientation?: TOrientation;
    /**
     * Whether the nav bar is currently expanded. Only available for `orientation="vertical"`.
     */
    expanded?: Nullable<boolean>;
    /**
     * How to align the navigation items. Only available for `orientation="vertical"`.
     */
    alignment?: TOrientation extends "vertical" ? "top" | "center" : never;
};
/**
 * [Vue injection key](https://vuejs.org/guide/components/provide-inject) that is provided by the nav bar
 * to communicate child components whether they should render in mobile or desktop mode.
 *
 * @returns `true` if mobile, `false` otherwise
 */
export declare const MOBILE_NAV_BAR_INJECTION_KEY: InjectionKey<ComputedRef<boolean>>;
/**
 * [Vue injection key](https://vuejs.org/guide/components/provide-inject) that is provided by the nav items
 * to communicate child nav items whether they should render as flyout or list item.
 *
 * @returns `true` if outermost parent, `false` otherwise
 */
export declare const NAV_BAR_IS_TOP_LEVEL_INJECTION_KEY: InjectionKey<boolean>;
export declare const NAV_BAR_MORE_LIST_INJECTION_KEY: MoreListInjectionKey;
/**
 * [Vue injection key](https://vuejs.org/guide/components/provide-inject) that is provided by the nav bar to communicate the teleport target id for navitems that should be put into the more list.
 */
export declare const NAV_BAR_MORE_LIST_TARGET_INJECTION_KEY: InjectionKey<Ref<TeleportProps["to"]>>;
/**
 * [Vue injection key](https://vuejs.org/guide/components/provide-inject) that is provided by the nav bar
 * to communicate child components whether they should render horizontal or vertical.
 */
export declare const NAV_BAR_IS_EXPANDED_INJECTION_KEY: InjectionKey<Ref<boolean>>;
export type OnyxNavBarSlots = {
    /**
     * [`OnyxNavItem`](/docs/navigation-navbar-modules-navitem--docs) components should be placed and nested here to build the navigation.
     */
    default?: () => unknown;
    /**
     * Optional slot to override the app area content (logo and app name, e.g. with a custom icon / `OnyxIcon` component).
     */
    appArea?: () => unknown;
    /**
     * Optional context area on the right to display additional (global) components, like user login, global settings etc.
     */
    contextArea?: () => unknown;
    /**
     * Same as `contextArea` slot on desktop (will be placed next to it) but on mobile, the components inside will stay
     * in the mobile nav bar itself and will not be collapsed into the context menu button.
     *
     * Global actions like e.g. search or notification center can be placed here that should always be directly accessible on mobile.
     */
    globalContextArea?: () => unknown;
    /**
     * Label for displaying the currently active page in mobile mode.
     * If a child of a nav item is active, it should displayed the child label instead of the parent.
     */
    mobileActivePage?: () => unknown;
};