import { TNode, Value } from '@tempots/dom';
import { CardVariant, ControlSize } from '../theme';
import { RadiusName } from '../../tokens/radius';
/** Configuration options for the {@link Card} component. */
export interface CardOptions {
    /** The visual style variant of the card. @default 'default' */
    variant?: Value<CardVariant>;
    /** Controls the internal padding size. @default 'md' */
    size?: Value<ControlSize>;
    /** The border radius of the card. @default 'lg' */
    roundedness?: Value<RadiusName>;
}
/** Options for {@link CardHeader}, {@link CardBody}, and {@link CardFooter}. */
export interface CardSectionOptions {
    /** Additional CSS classes. */
    class?: Value<string>;
}
/** Options for {@link CardCoverImage}. */
export interface CardCoverImageOptions {
    /** Image source URL. */
    src: Value<string>;
    /** Alt text for accessibility. */
    alt?: Value<string>;
    /** Fixed height for the image (e.g. `'200px'`). Defaults to auto. */
    height?: Value<string>;
}
/**
 * A container component that groups content with visual separation using
 * elevation, borders, or background color depending on the variant.
 *
 * @param options - Configuration options for appearance and sizing
 * @param children - Content to render inside the card
 * @returns A styled div element
 *
 * @example
 * ```typescript
 * Card(
 *   { variant: 'elevated', size: 'lg' },
 *   html.h2('Card Title'),
 *   html.p('Card content goes here.')
 * )
 * ```
 *
 * @example
 * ```typescript
 * // Card with default options
 * Card({}, html.p('Simple card'))
 * ```
 */
export declare function Card({ variant, size, roundedness }?: CardOptions, ...children: TNode[]): import("@tempots/dom").Renderable;
/**
 * A header section for a {@link Card}, typically containing a title and actions.
 * Renders with a bottom border separator.
 *
 * @example
 * ```ts
 * Card({},
 *   CardHeader({}, html.h3('Title')),
 *   CardBody({}, html.p('Content')),
 * )
 * ```
 */
export declare function CardHeader({ class: className }?: CardSectionOptions, ...children: TNode[]): import("@tempots/dom").Renderable;
/**
 * The main content area of a {@link Card}.
 * Expands to fill available space with scrollable overflow.
 *
 * @example
 * ```ts
 * Card({},
 *   CardBody({}, html.p('Main content here.'))
 * )
 * ```
 */
export declare function CardBody({ class: className }?: CardSectionOptions, ...children: TNode[]): import("@tempots/dom").Renderable;
/**
 * A footer section for a {@link Card}, typically containing action buttons.
 * Renders with a top border separator and right-aligned content.
 *
 * @example
 * ```ts
 * Card({},
 *   CardBody({}, html.p('Content')),
 *   CardFooter({}, Button({ variant: 'filled' }, 'Save')),
 * )
 * ```
 */
export declare function CardFooter({ class: className }?: CardSectionOptions, ...children: TNode[]): import("@tempots/dom").Renderable;
/**
 * A full-bleed cover image for a {@link Card}.
 * Automatically inherits the card's border radius at the appropriate corners
 * based on its position (first child = top corners, last child = bottom corners).
 *
 * @example
 * ```ts
 * Card({},
 *   CardCoverImage({ src: 'https://example.com/photo.jpg', alt: 'Photo', height: '200px' }),
 *   CardBody({}, html.p('Description')),
 * )
 * ```
 */
export declare function CardCoverImage({ src, alt, height }: CardCoverImageOptions): import("@tempots/dom").Renderable;