@payfit/unity-components/dist/esm/components/app-menu/parts/AppMenuHeader.d.ts

import { ReactNode } from 'react';
export interface AppMenuHeaderProps {
    /**
     * The application environment. Determines which brand logo variant to display.
     */
    environment: 'prod' | 'staging' | 'dev' | 'local';
    /**
     * Accessible label for the brand logo link.
     */
    brandLabel: string;
    /**
     * Optional notification component to display in the header.
     */
    notificationsComponent?: ReactNode;
    /**
     * Optional search component to display in the header.
     */
    searchComponent?: ReactNode;
    /**
     * Render function for the brand logo link. Enables integration with any routing library.
     * Provides href and children (the logo component) for flexible link implementation.
     * Defaults to React Aria's Link component, which works with Unity's RouterProvider for router-agnostic behavior.
     * @example
     * ```tsx
     * // With Tanstack Router
     * import { Link } from '@tanstack/react-router'
     *
     * <AppMenuHeader
     *   renderLink={({ href, children }) => (
     *     <Link to={href}>{children}</Link>
     *   )}
     * />
     *
     * // With React Router v5/v6
     * import { Link } from 'react-router-dom'
     *
     * <AppMenuHeader
     *   renderLink={({ href, children }) => (
     *     <Link to={href}>{children}</Link>
     *   )}
     * />
     *
     * // With plain HTML link
     * <AppMenuHeader
     *   renderLink={({ href, children }) => (
     *     <a href={href}>{children}</a>
     *   )}
     * />
     * ```
     */
    renderLink?: (props: {
        children: ReactNode;
    }) => ReactNode;
}
/**
 * The header section of the AppMenu component, displaying the PayFit brand logo, search, and notifications.
 * Provides a router-agnostic approach through a render prop pattern for the brand logo link.
 * @param props - Component props
 * @param props.environment - The application environment (determines brand logo variant)
 * @param props.brandLabel - Accessible label for the brand logo link
 * @param props.notificationsComponent - Optional notification component to display
 * @param props.searchComponent - Optional search component to display
 * @param props.renderLink - Optional render function for custom link implementation
 * @example
 * ```tsx
 * import { AppMenuHeader } from '@payfit/unity-components'
 *
 * function AppShell() {
 *   return (
 *     <AppMenu>
 *       <AppMenuHeader
 *         environment="production"
 *         linkHref="/"
 *         linkLabel="PayFit Home"
 *       />
 *     </AppMenu>
 *   )
 * }
 * ```
 * @remarks
 * - The brand logo automatically adapts based on the environment prop (production displays standard logo, others display pre-production variants)
 * - By default, uses React Aria's Link component which integrates with Unity's RouterProvider
 * - For router-specific implementations, pass a custom `renderLink` function with your router's Link component
 * - On mobile viewports, displays a menu toggle button; on desktop, displays the brand logo with optional search and notifications
 * @see {@link AppMenuHeaderProps} for all available props
 * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/app-menu GitHub}
 * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
 * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
 * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
 */
export declare const AppMenuHeader: ({ environment, brandLabel: linkLabel, notificationsComponent, searchComponent, renderLink, }: AppMenuHeaderProps) => import("react/jsx-runtime").JSX.Element;