import { VariantProps } from '@payfit/unity-themes';
export declare const funnelTopBar: import('tailwind-variants').TVReturnType<{
    [key: string]: {
        [key: string]: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            title?: import('tailwind-merge').ClassNameValue;
            titleWrapper?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {
    [x: string]: {
        [x: string]: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            title?: import('tailwind-merge').ClassNameValue;
            titleWrapper?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    base: string[];
    titleWrapper: string[];
    title: string[];
}, undefined, {
    [key: string]: {
        [key: string]: import('tailwind-merge').ClassNameValue | {
            base?: import('tailwind-merge').ClassNameValue;
            title?: import('tailwind-merge').ClassNameValue;
            titleWrapper?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    base: string[];
    titleWrapper: string[];
    title: string[];
}, import('tailwind-variants').TVReturnType<unknown, {
    base: string[];
    titleWrapper: string[];
    title: string[];
}, undefined, unknown, unknown, undefined>>;
export interface FunnelTopBarProps extends VariantProps<typeof funnelTopBar> {
    /** The title text to display in the funnel top bar */
    title: string;
    /**
     * Custom content to display in the leading area (left side).
     * Typically a logo on first step or a back button on subsequent steps.
     * @example
     * ```tsx
     * // With FunnelBackButton
     * <FunnelTopBar
     *   leading={<FunnelBackButton label="Back" onPress={handleBack} />}
     *   title="My Funnel"
     * />
     *
     * // With logo
     * <FunnelTopBar
     *   leading={<PayFitBrand color="original" />}
     *   title="Get Started"
     * />
     * ```
     */
    leading?: React.ReactNode;
    /**
     * Label for the back button.
     * @deprecated Use `leading` with <FunnelBackButton> instead. Will be removed in v2.0.
     * @example
     * ```tsx
     * // Old way (deprecated)
     * <FunnelTopBar
     *   backButtonLabel="Back"
     *   onBackButtonPress={handleBack}
     *   title="My Funnel"
     * />
     *
     * // New way (recommended)
     * <FunnelTopBar
     *   leading={<FunnelBackButton label="Back" onPress={handleBack} />}
     *   title="My Funnel"
     * />
     * ```
     */
    backButtonLabel?: string;
    /**
     * Callback function to be called when the back button is pressed.
     * @deprecated Use `leading` with <FunnelBackButton> instead. Will be removed in v2.0.
     */
    onBackButtonPress?: () => void;
    /** Optional actions slot to display in the top bar */
    actions?: React.ReactNode;
    /** Optional flag to show or hide the progress indicator. Defaults to false */
    showProgress?: boolean;
    /** The current progress in the funnel */
    progressValue?: number;
    /** Custom progress announcement for screen readers. */
    progressAnnouncement?: string;
    /** current task description */
    currentTaskDescription?: string;
}
/**
 * The `FunnelTopBar` component provides the header navigation for funnel layouts with back button, title, and optional progress indicator.
 * It creates a responsive top bar that displays the funnel title, navigation controls, and progress status with proper accessibility attributes.
 * You can control the progress display and customize the back button behavior to guide users through multi-step processes.
 * @param {FunnelTopBarProps} props - The props for the `FunnelTopBar` component
 * @example
 * ```tsx
 * import { FunnelTopBar } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <FunnelTopBar
 *       title="Setup Process"
 *       backButtonLabel="Back"
 *       onBackButtonPress={handleBack}
 *       showProgress={true}
 *       progressValue={75}
 *       progressAnnouncement="2 out of 3 tasks completed"
 *     />
 *   )
 * }
 * ```
 * @remarks
 * - Automatically adapts back button display based on screen size
 * - Provides live progress announcements for screen readers
 * - Supports optional global actions in the top bar
 * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
 * @see {@link FunnelTopBarProps} for all available props
 * @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
 * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
 * @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
 * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funneltopbar--docs unity-components.payfit.io}
 */
declare const FunnelTopBar: import('react').ForwardRefExoticComponent<FunnelTopBarProps & import('react').RefAttributes<HTMLDivElement>>;
export { FunnelTopBar };