@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-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            actions?: import('tailwind-merge').ClassNameValue;
            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
            titles?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {
    [x: string]: {
        [x: string]: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            actions?: import('tailwind-merge').ClassNameValue;
            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
            titles?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    base: string;
    headingActionsWrapper: string;
    titles: string;
    actions: string;
}, undefined, {
    [key: string]: {
        [key: string]: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            actions?: import('tailwind-merge').ClassNameValue;
            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
            titles?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    base: string;
    headingActionsWrapper: string;
    titles: string;
    actions: string;
}, import('tailwind-variants').TVReturnType<unknown, {
    base: string;
    headingActionsWrapper: string;
    titles: string;
    actions: string;
}, undefined, unknown, unknown, undefined>>;
export interface BreadcrumbItem {
    href: string;
    label: string;
}
export interface PageHeaderProps extends PropsWithChildren<VariantProps<typeof pageHeader>> {
    /**
     * Array of breadcrumb items to display in the page header.
     * @deprecated Use renderBreadcrumbs prop for router integration support. Will be removed in v2.0.
     */
    pagePath?: BreadcrumbItem[];
    /**
     * Custom render function for breadcrumbs. Receives pagePath items if provided.
     * @param items - The breadcrumb items from pagePath prop, or undefined
     * @default Renders Breadcrumbs with RawBreadcrumbLink components using pagePath data
     * @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>
     * ```
     * @example
     * ```tsx
     * // Using pagePath data with custom rendering
     * <PageHeader
     *   pagePath={[{ href: '/', label: 'Home' }]}
     *   renderBreadcrumbs={(items) => (
     *     <Breadcrumbs wrap="nowrap" items={items}>
     *       {item => (
     *         <Breadcrumb key={item.href}>
     *           <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
     *         </Breadcrumb>
     *       )}
     *     </Breadcrumbs>
     *   )}
     * >
     *   <PageHeading variant="title">My Page</PageHeading>
     * </PageHeader>
     * ```
     */
    renderBreadcrumbs?: (items: BreadcrumbItem[] | undefined) => ReactNode;
    actions?: ReactNode;
    /**
     * @deprecated BreadcrumbComponent is no longer supported. Use renderBreadcrumbs instead.
     */
    BreadcrumbComponent?: never;
}
/**
 * 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 } from '@payfit/unity-components'
 *
 * // Legacy API (deprecated)
 * <PageHeader
 *   pagePath={[
 *     { href: '/dashboard', label: 'Dashboard' },
 *     { href: '/employees', label: 'Employees' }
 *   ]}
 *   actions={<Button>Save</Button>}
 * >
 *   <PageHeading variant="title">Employee List</PageHeading>
 * </PageHeader>
 * ```
 * @example
 * ```tsx
 * import { PageHeader, PageHeading, 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
 * @remarks
 * - The `pagePath` prop is deprecated and will be removed in v2.0. Use `renderBreadcrumbs` for router integration support.
 * - The `BreadcrumbComponent` prop is no longer supported. Use `renderBreadcrumbs` instead.
 * [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 };