import { type ViewStyle, type TextStyle } from "react-native";
import { type ColorTokens } from "../../style/index.js";
import { type HoverMotion } from "../../style/hover.js";
export type Elevation = "raised" | "flat" | "sunken" | "outlined" | "hero" | "tile" | "row" | "empty" | "default";
export type Density = "compact" | "comfortable" | "dense" | "snug" | "cozy" | "relaxed" | "roomy" | "spacious" | "insetContent" | "rail" | "summary" | "metric" | "request" | "menu" | "panel" | "guide" | "linkTile" | "pager" | "well" | "default";
/**
 * The corner steps a card can take (the Corners axis): the card corner by default, the
 * tile corner (`smallCorners`), the three the v4 hand-off's component page draws
 * (`calloutCorners`, `largeCorners`, `stageCorners`) and the two its section pages draw
 * (`showcaseCorners`, the showcase card at 20; `heroCorners`, the hero stage at 24). The
 * web skin draws each from its row; the native skins keep their own card corner on every
 * step but the tile (the hand-off's page corners are the web page's, and the Material 3
 * card is the platform's own control).
 */
export type Corner = "small" | "callout" | "large" | "stage" | "showcase" | "hero" | "default";
export interface CardSkin {
    /** Corner radius of the card surface. */
    radius: number;
    /** The corner each step of the Corners axis draws; `default` is `radius`. */
    corners: Record<Corner, number>;
    /** Corner curve; iOS sets "continuous" (Apple superellipse), a no-op elsewhere. */
    curve?: ViewStyle["borderCurve"];
    /** Surface colors (fill + border color), per elevation variant. */
    surface: (tokens: ColorTokens, e: Elevation) => ViewStyle;
    /**
     * The fill a `flat` card steps up to, over `surface`'s. Separate from `surface` because
     * Radio's `card` mode reads `surface(tokens, "flat")` for its outlined tile, which keeps
     * the card fill. Omitted: the flat card keeps `surface`'s fill.
     */
    flatFill?: (tokens: ColorTokens) => string;
    /**
     * Elevation -> shadow mapping (resting/raised/flat differ per OS). `selected` lets a
     * skin add the selected card's outer ring to the same shadow list.
     */
    elevation: (e: Elevation, t: ColorTokens, selected?: boolean) => ViewStyle;
    /** The title's face: the display face on the web skin, the platform face natively. */
    titleFont?: string;
    /** The card's own content padding + flat-child gap, per density. The `default`
     *  row is the standard padded surface every plain card takes (what the `padded`
     *  prop makes explicit), so the surface owns the rhythm between flat children;
     *  `flush` opts out of the whole row. */
    density: Record<Density, ViewStyle>;
    /** The standard inset WITHOUT the flat-child gap. The Card shell no longer
     *  reads this (the default density row superseded it); it remains the gap-free
     *  inset that derived chrome spreads into its own row (Radio's `card` mode,
     *  which owns its internal ring-to-label gap). */
    padded: ViewStyle;
    /**
     * Hover feedback on a pressable card (one with `onPress`): the rise and its timing,
     * and the elevation the hovered card takes for each resting one. Omitted: the card
     * does not respond to hover (the iOS and Android skins, whose platforms deliver no
     * pointer hover by default; the Android card is Material 3's).
     */
    hover?: {
        motion: HoverMotion;
        elevation: (e: Elevation) => Elevation;
    };
}
export declare const webSkin: CardSkin;
export declare const iosSkin: CardSkin;
export declare const androidSkin: CardSkin;
/** The card's hairline: the inset its full-bleed media's corner sits inside. */
export declare const CARD_BORDER = 1;
export declare const cardBase: ViewStyle;
export type MediaWell = "default" | "compact" | "tall" | "stage" | "playground";
export declare const mediaWell: Record<MediaWell, ViewStyle>;
/** The section insets a density gives a sectioned card (see `sectionInsets`). */
export interface SectionInsets {
    /** The eyebrow row: the inset above and beside. */
    eyebrow: ViewStyle;
    /** The title header when it leads the card: the inset above and beside. */
    header: ViewStyle;
    /** The title header below the eyebrow row: the rhythm above, the inset beside. */
    headerBelow: ViewStyle;
    /** The body when it leads the card: the inset all round, the rhythm between its children. */
    content: ViewStyle;
    /** The body below a header: the rhythm above, the inset beside and below. */
    contentBelow: ViewStyle;
    /** The footer under its hairline: the rhythm above, the inset beside and below. */
    footer: ViewStyle;
}
/**
 * A density on a SECTIONED card (one with an eyebrow, a title or a footer) moves its
 * inset onto the self-padding sections, since the surface never pads there: the first
 * section takes the inset above, every section the inset beside, the last the inset
 * below, and each section after the first sits the density's rhythm under the one
 * before it, so the hand-off's panel (an 18 px inset, its eyebrow 12 px over its list,
 * Component.dc.html line 256) is `<Card panel eyebrow="Keyboard">`.
 */
export declare function sectionInsets(density: ViewStyle): SectionInsets;
export declare const header: ViewStyle;
export declare const title: (tokens: ColorTokens, fontFamily?: string) => TextStyle;
export declare const description: (tokens: ColorTokens) => TextStyle;
export declare const content: ViewStyle;
export declare const contentDensity: {
    readonly dense: {
        readonly paddingVertical: 10;
        readonly paddingHorizontal: 14;
    };
    readonly compact: {
        readonly paddingVertical: 12;
        readonly paddingHorizontal: 16;
    };
    readonly cozy: {
        readonly paddingVertical: 14;
        readonly paddingHorizontal: 16;
    };
};
export declare const footer: ViewStyle;
export declare const eyebrowRow: ViewStyle;
export declare const eyebrow: (tokens: ColorTokens) => TextStyle;
export declare const separator: (tokens: ColorTokens) => ViewStyle;
export declare const bodyText: (tokens: ColorTokens) => TextStyle;
export declare const footerText: (tokens: ColorTokens) => TextStyle;
/** Fixed insets from the original Argus content panels. */
export declare function insetPanel(mode: "note" | "version" | "gate", t: ColorTokens): ViewStyle;
/**
 * The elevation sample (`sample`): the Foundations page's depth tiles (`height:72px;
 * background:var(--sf2);border:1px solid var(--ln)`, the edge `--ln2` on its md and lg
 * tiles), an empty card on the popover fill whose edge is the field border at the
 * `heroShadow` and `raised` steps.
 */
export declare const SAMPLE_HEIGHT = 72;
export declare function sampleSurface(tokens: ColorTokens, e: Elevation): ViewStyle;
//# sourceMappingURL=card.styles.d.ts.map