/**
 * PageHeader — the top of a profile screen: a cover, the face over it, who it
 * belongs to, and what you can do about them.
 *
 * Every social app opens a profile the same way, and rebuilding it per screen
 * is how the cover ends up a different height on each one. The parts here are
 * the pieces that arrangement is made of, and the two variants are the two
 * places it lives: `card`, a self-contained surface in a scroll of other
 * cards, and `page`, the header of the screen itself.
 *
 * ```tsx
 * <PageHeader>
 *   <PageHeader.Cover />
 *   <PageHeader.Avatar source={face} fallback="OR" verified />
 *   <PageHeader.Content>
 *     <PageHeader.Title>Olivia Rhye</PageHeader.Title>
 *     <PageHeader.Description>@oliviarhye</PageHeader.Description>
 *   </PageHeader.Content>
 *   <PageHeader.Actions>
 *     <Button className="flex-1">Follow</Button>
 *   </PageHeader.Actions>
 * </PageHeader>
 * ```
 *
 * The cover in `card` is held off the card's edges and rounded on its top
 * corners only, so its bottom edge meets the content rather than floating
 * above it. The radius pair is `rounded-3xl` on the card and `rounded-2xl` on
 * the cover, one step apart on the theme's own scale — which is the same 8
 * points the card is padded by, so the two curves stay concentric without a
 * hardcoded number that would be wrong in half the themes.
 *
 * The avatar lifts itself over the cover's bottom edge, and it works out
 * whether to: the root looks for a `PageHeader.Cover` among its children and
 * says so through context, because a header with no cover has nothing to
 * overlap and an avatar that lifted anyway would hang off the top of it.
 *
 * The ring around the face is drawn in the surface behind it — the card, or
 * the page — rather than in a border colour, so the face reads as punched out
 * of the cover instead of outlined on top of it.
 */
import { type ReactNode } from 'react';
import { View, type ImageSourcePropType, type PressableProps, type Text as RNText, type ViewProps } from 'react-native';
import { type VariantProps } from 'tailwind-variants';
import { type TextProps } from '../../primitives/text.js';
import { type AvatarProps, type AvatarSizeName } from '../avatar/index.js';
declare const pageHeaderVariants: import("tailwind-variants").TVReturnType<{
    variant: {
        card: {
            root: string;
            cover: string;
            ring: string;
            avatar: string;
            row: string;
            content: string;
            actions: string;
        };
        page: {
            root: string;
            ring: string;
            avatar: string;
            row: string;
            content: string;
            actions: string;
        };
    };
    align: {
        start: {};
        center: {
            avatar: string;
            row: string;
            content: string;
            meta: string;
            stats: string;
            actions: string;
        };
    };
}, {
    root: string;
    cover: string;
    avatar: string;
    ring: string;
    row: string;
    content: string;
    meta: string;
    stats: string;
    actions: string;
}, undefined, {
    variant: {
        card: {
            root: string;
            cover: string;
            ring: string;
            avatar: string;
            row: string;
            content: string;
            actions: string;
        };
        page: {
            root: string;
            ring: string;
            avatar: string;
            row: string;
            content: string;
            actions: string;
        };
    };
    align: {
        start: {};
        center: {
            avatar: string;
            row: string;
            content: string;
            meta: string;
            stats: string;
            actions: string;
        };
    };
}, {
    root: string;
    cover: string;
    avatar: string;
    ring: string;
    row: string;
    content: string;
    meta: string;
    stats: string;
    actions: string;
}, import("tailwind-variants").TVReturnType<{
    variant: {
        card: {
            root: string;
            cover: string;
            ring: string;
            avatar: string;
            row: string;
            content: string;
            actions: string;
        };
        page: {
            root: string;
            ring: string;
            avatar: string;
            row: string;
            content: string;
            actions: string;
        };
    };
    align: {
        start: {};
        center: {
            avatar: string;
            row: string;
            content: string;
            meta: string;
            stats: string;
            actions: string;
        };
    };
}, {
    root: string;
    cover: string;
    avatar: string;
    ring: string;
    row: string;
    content: string;
    meta: string;
    stats: string;
    actions: string;
}, undefined, unknown, unknown, undefined>>;
type PageHeaderVariantProps = VariantProps<typeof pageHeaderVariants>;
/** Where the header lives: a card in a scroll, or the top of the screen. */
export type PageHeaderVariant = NonNullable<PageHeaderVariantProps['variant']>;
/** Which edge the face and the text line up on. */
export type PageHeaderAlign = NonNullable<PageHeaderVariantProps['align']>;
export interface PageHeaderProps extends ViewProps {
    className?: string;
    children?: ReactNode;
}
export interface PageHeaderRootProps extends PageHeaderProps {
    /**
     * `card` is a surface of its own, with the cover held off its edges. `page`
     * drops the surface and lets the cover run to the screen's edges.
     */
    variant?: PageHeaderVariant;
    /**
     * Which edge the face, the text and the actions line up on. `center` is the
     * profile card; `start` is the screen header, where the name is the first
     * thing on the line rather than the middle of it.
     */
    align?: PageHeaderAlign;
}
export interface PageHeaderCoverProps extends ViewProps {
    className?: string;
    /** The banner. Left out, the cover draws a gradient instead. */
    source?: ImageSourcePropType;
    /** How tall the band is. */
    height?: number;
    /**
     * The gradient, when there is no image. Two colours or more, as real colour
     * strings — this is painted rather than classed.
     */
    colors?: readonly [string, string, ...string[]];
    /** What the banner shows. Left out, it is treated as decoration. */
    alt?: string;
    children?: ReactNode;
}
export interface PageHeaderAvatarProps extends Omit<AvatarProps, 'size' | 'children'> {
    className?: string;
    /** How big the face is. */
    size?: AvatarSizeName;
    /**
     * What goes in the ring instead of a face — a logo, a monogram, a live
     * thumbnail. It fills the ring, so give it its own background and padding.
     */
    children?: ReactNode;
    /** Draws the verification rosette in the face's bottom corner. */
    verified?: boolean;
    /**
     * Anything else for that corner — a camera button, a presence dot, a "+".
     * Wins over `verified`.
     */
    badge?: ReactNode;
    /**
     * Whether the face lifts over the cover's bottom edge. Set by the presence
     * of a `PageHeader.Cover`; pass it to override that either way.
     */
    overlap?: boolean;
}
export interface PageHeaderRowProps extends PageHeaderProps {
    children?: ReactNode;
}
export interface PageHeaderContentProps extends PageHeaderProps {
    children?: ReactNode;
}
export interface PageHeaderMetaProps extends PageHeaderProps {
    /** A glyph before the line. Takes the muted colour without being told. */
    icon?: ReactNode;
    children?: ReactNode;
}
/** How a stats row reads its numbers out. */
export type PageHeaderStatsLayout = 'stacked' | 'inline';
export interface PageHeaderStatsProps extends PageHeaderProps {
    /**
     * `stacked` puts the label under the figure, for a row of counts read as a
     * set. `inline` runs them together — "533 Followers" — for counts read as
     * part of a sentence.
     */
    layout?: PageHeaderStatsLayout;
    /** Rule between each count and the next. */
    divided?: boolean;
    children?: ReactNode;
}
export interface PageHeaderStatProps extends Omit<PressableProps, 'children'> {
    className?: string;
    /** The figure. */
    value: ReactNode;
    /** What it counts. */
    label: ReactNode;
    /** Rule before this count. `PageHeader.Stats` sets it; pass it to override. */
    divided?: boolean;
}
export interface PageHeaderActionsProps extends PageHeaderProps {
    children?: ReactNode;
}
export declare const PageHeader: import("react").ForwardRefExoticComponent<PageHeaderRootProps & import("react").RefAttributes<View>> & {
    Cover: import("react").ForwardRefExoticComponent<PageHeaderCoverProps & import("react").RefAttributes<View>>;
    Avatar: import("react").ForwardRefExoticComponent<PageHeaderAvatarProps & import("react").RefAttributes<View>>;
    Row: import("react").ForwardRefExoticComponent<PageHeaderRowProps & import("react").RefAttributes<View>>;
    Content: import("react").ForwardRefExoticComponent<PageHeaderContentProps & import("react").RefAttributes<View>>;
    Title: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<RNText>>;
    Description: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<RNText>>;
    Meta: import("react").ForwardRefExoticComponent<PageHeaderMetaProps & import("react").RefAttributes<View>>;
    Stats: import("react").ForwardRefExoticComponent<PageHeaderStatsProps & import("react").RefAttributes<View>>;
    Stat: import("react").ForwardRefExoticComponent<PageHeaderStatProps & import("react").RefAttributes<View>>;
    Actions: import("react").ForwardRefExoticComponent<PageHeaderActionsProps & import("react").RefAttributes<View>>;
};
export {};
//# sourceMappingURL=index.d.ts.map