@payfit/unity-components/dist/esm/components/page/parts/PageHeader.d.ts

import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren, ReactNode } from 'react';
export declare const pageHeader: import('tailwind-variants').TVReturnType<{
    [key: string]: {
        [key: string]: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
            actions?: import('tailwind-variants').ClassValue;
            headingActionsWrapper?: import('tailwind-variants').ClassValue;
            titles?: import('tailwind-variants').ClassValue;
        };
    };
} | {
    [x: string]: {
        [x: string]: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
            actions?: import('tailwind-variants').ClassValue;
            headingActionsWrapper?: import('tailwind-variants').ClassValue;
            titles?: import('tailwind-variants').ClassValue;
        };
    };
} | {}, {
    base: string;
    headingActionsWrapper: string;
    titles: string;
    actions: string;
}, undefined, {
    [key: string]: {
        [key: string]: import('tailwind-variants').ClassValue | {
            base?: import('tailwind-variants').ClassValue;
            actions?: import('tailwind-variants').ClassValue;
            headingActionsWrapper?: import('tailwind-variants').ClassValue;
            titles?: import('tailwind-variants').ClassValue;
        };
    };
} | {}, {
    base: string;
    headingActionsWrapper: string;
    titles: string;
    actions: string;
}, import('tailwind-variants').TVReturnTypeLike<unknown, {
    base: string;
    headingActionsWrapper: string;
    titles: string;
    actions: string;
}>>;
export interface PageHeaderProps extends PropsWithChildren<VariantProps<typeof pageHeader>> {
    /**
     * Custom render function for breadcrumbs.
     * @example
     * ```tsx
     * // Custom rendering with Tanstack Router
     * import { Breadcrumb, BreadcrumbLink, Breadcrumbs } from '@payfit/unity-components/integrations/tanstack-router'
     *
     * <PageHeader
     *   renderBreadcrumbs={() => (
     *     <Breadcrumbs wrap="nowrap">
     *       <Breadcrumb>
     *         <BreadcrumbLink to="/">Home</BreadcrumbLink>
     *       </Breadcrumb>
     *     </Breadcrumbs>
     *   )}
     * >
     *   <PageHeading variant="title">My Page</PageHeading>
     * </PageHeader>
     * ```
     */
    renderBreadcrumbs?: () => ReactNode;
    actions?: ReactNode;
}
/**
 * The PageHeader component provides a consistent layout for page headers with title, subtitle, and actions support.
 *
 * It creates a structured header for pages with support for breadcrumbs navigation, title/subtitle content, and action buttons.
 * The component adapts to different screen sizes, reorganizing elements for optimal display on mobile and desktop views.
 * @param {PageHeaderProps} props - Props for the PageHeader component
 * @example
 * ```tsx
 * import { PageHeader, PageHeading, Button, Breadcrumbs, Breadcrumb, BreadcrumbLink } from '@payfit/unity-components'
 *
 * // New API with custom breadcrumbs
 * <PageHeader
 *   renderBreadcrumbs={() => (
 *     <Breadcrumbs wrap="nowrap">
 *       <Breadcrumb>
 *         <BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink>
 *       </Breadcrumb>
 *       <Breadcrumb>
 *         <BreadcrumbLink href="/employees">Employees</BreadcrumbLink>
 *       </Breadcrumb>
 *     </Breadcrumbs>
 *   )}
 *   actions={<Button>Save</Button>}
 * >
 *   <PageHeading variant="title">Employee List</PageHeading>
 * </PageHeader>
 * ```
 * @see {@link PageHeaderProps} for all available props
 * [API](https://unity-components.payfit.io/?path=/docs/layout-page-pageheader--docs) • [Design docs](https://www.payfit.design/24f360409/p/202477-page-header)
 */
declare const PageHeader: import('react').ForwardRefExoticComponent<PageHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
export { PageHeader };