import type { ComponentPropsWithRef, ReactNode } from 'react';
/**
 * A box that stands for one thing — a conversation, a project, a file, an
 * object from another app — drawn as its frame: 8px corners, a fill, a
 * hairline. What goes inside, and the space around it, is the caller's.
 *
 * Both apps drew their cards by hand: 18 of them, sorted by Katerina from
 * photographs on 14 September (UIG-27, docs/GATES.md §0). Her rulings:
 *
 * - **The fill is chosen by what the card sits on**: `surface` on the page,
 *   `elevated` on something already filled, `inset` inside a message, `none`
 *   for a hairline alone.
 * - **The hairline follows the fill**: the default hairline on `surface` and
 *   `elevated`, the subtle one on `inset` and `none`. Every card has 8px
 *   corners.
 * - **A card you can pick answers the pointer.** `hairline`: the hairline one
 *   step stronger — what a card that is a link does. `fill`: the card lights
 *   up and its hairline shows — what a card in a feed does, where the light
 *   says which one you are on.
 * - **A card that cannot be read has a dashed hairline**, in both apps.
 *
 * No padding of its own: the cards measured 0 to 12px, and a card with none
 * was one whose content pads itself.
 */
export type CardFill = 'surface' | 'elevated' | 'inset' | 'none';
export type CardHover = 'none' | 'hairline' | 'fill';
export type CardAttention = 'accent' | 'warning';
export interface CardProps extends ComponentPropsWithRef<'div'> {
    /** What the card sits on. Default `surface`. */
    fill?: CardFill;
    /** The whole card is a link: an anchor, and its hairline answers the pointer. Navigation stays the app's, as with `Link`. */
    href?: string;
    /** How it answers the pointer. Default `hairline` with an `href`, `none` without. */
    hover?: CardHover;
    /** No hairline until it is pointed at — a row in a feed that shows its edge only when you are on it. */
    quietUntilHover?: boolean;
    /**
     * Draw the hover look now, whatever the pointer does. For a card whose own menu or picker is open: the menu
     * opens outside the card, so the pointer on it leaves the card, and the card would go dark under its own menu.
     * Ignored while `selected` or `active`, like the pointer.
     */
    hovered?: boolean;
    /** The one you are on: the selected fill, a subtle hairline, and no hover. */
    selected?: boolean;
    /** Being changed in place: the selected fill with the accent hairline, and no hover. */
    active?: boolean;
    /** A hairline that asks to be looked at — something new (`accent`), or urgent (`warning`). */
    attention?: CardAttention;
    /** It stands for something that could not be read: the hairline is dashed. */
    unreadable?: boolean;
    /**
     * What is inside is cut to the card's rounded corners: a strip or a picture that
     * runs edge to edge (UIG-9, 17 September; the apps passed `overflow-hidden`).
     */
    clip?: boolean;
    children: ReactNode;
}
export declare function Card({ fill, href, hover, quietUntilHover, hovered, selected, active, attention, unreadable, clip, className, children, ...props }: CardProps): import("react").JSX.Element;
//# sourceMappingURL=Card.d.ts.map