import "./card.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
export interface CardProps extends StyleProps {
    children: React.ReactNode;
    /**
     * `none` is the BANDED shape: `CardHeader` / `CardBody` / `CardFooter` carry
     * the gutter themselves, so the card must not carry it as well. It is a prop
     * rather than a `style={{ padding: 0 }}` because an inline declaration is the
     * one thing a consumer cannot beat without `!important`.
     */
    padding?: "default" | "none";
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * A bordered presentational surface — view only. It never handles interaction:
 * for a pressable/selectable card use `PressableRow variant="card"` (a real
 * focusable button), and for a whole card that opens something, RowFocusEntry.
 *
 * A Card is ALWAYS a card — a bordered, lifted container that groups and
 * separates. A work-execution register that wants a flat look uses NO Card (the
 * register sits directly on the page); there is no "flat card".
 *
 * Two shapes:
 * - Plain: `<Card>` with the default gutter, author owns the content.
 * - Banded: `<Card padding="none">` composed from the family slots —
 *   `CardHeader` (+ `CardHeaderTitle`/`CardHeaderMeta`), `CardBody`,
 *   `CardFooter` — separated by hairlines, mirroring the Dialog/Popover
 *   composable idiom.
 */
export declare function Card({ children, padding, testID, render, ref, ...props }: CardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export interface CardHeaderProps extends StyleProps {
    /** Usually `CardHeaderTitle` (+ optionally `CardHeaderMeta` or any
     * right-side node — Status, Button, an Avatar identity row). The band is a
     * layout slot, fully replaceable, like `DialogHeader`. */
    children: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * Opening band of a banded Card, closed by the hairline:
 *
 *   <CardHeader>
 *     <CardHeaderTitle info="what this data shows">Công nợ</CardHeaderTitle>
 *     <CardHeaderMeta>12 hóa đơn</CardHeaderMeta>
 *   </CardHeader>
 *
 * For bespoke headers (member info with Avatar, actions) put any children in
 * the band — padding and rhythm stay standard. Screens must not hand-compose
 * this band.
 */
export declare function CardHeader({ children, render, ref, ...props }: CardHeaderProps): React.JSX.Element;
export interface CardHeaderTitleProps extends StyleProps {
    children: React.ReactNode;
    /**
     * What this card's data shows — clicking the ⓘ next to the title opens it
     * in a popover ("Doanh thu đã xuất hóa đơn, chưa trừ chiết khấu"). A reader
     * who doesn't already know the data shouldn't have to guess — provide this
     * on every card whose title alone doesn't fully define the numbers.
     */
    info?: string;
    /** One muted line under the title — what this section decides or contains.
     * For settings-style cards where the title alone is too terse. */
    description?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Title slot for CardHeader — sm semibold + optional ⓘ explainer + optional
 * description line. Grows to push siblings (meta, actions) to the right.
 * Tabular numerals so id-like titles (SR-2026-0081) align across a list. */
export declare function CardHeaderTitle({ children, info, description, render, ref, ...props }: CardHeaderTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export interface CardHeaderMetaProps extends StyleProps {
    children: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Right-side context for CardHeader — a count ("12 hóa đơn"), unit, or
 * period. xs muted, tabular for numerals. */
export declare function CardHeaderMeta({ children, render, ref, ...props }: CardHeaderMetaProps): React.JSX.Element;
export interface CardBodyProps extends StyleProps {
    children: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Padded content band of a banded Card. Style override for gap/flex only —
 * keep the standard padding. */
export declare function CardBody({ children, render, ref, ...props }: CardBodyProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export interface CardFooterProps extends StyleProps {
    /** Typically a muted hint (flex: 1) on the left and the band's actions on
     * the right — one primary per surface. */
    children: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Closing action band of a banded Card, opened by the hairline. */
export declare function CardFooter({ children, render, ref, ...props }: CardFooterProps): React.JSX.Element;