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. Important: When using the vertical orientation, the CSS
     * variable --onyx-vertical-navbar-collapsed-width might need to be adjusted on the OnyxNavBar to
     * fit the custom content properly.
     */
    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. Use the following ready-to-use components: - `OnyxTimer` - `OnyxTag` -
     * `OnyxSeparator` - `OnyxUserMenu` (Ideally `OnyxUserMenu` is the last item on the very right)
     *
     * For custom buttons use the `OnyxNavButton`.
     */
    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.
     *
     * The same components as for the `contextArea` can be used here.
     */
    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;
};