/**
 * @file Card.tsx
 * @input Uses container utility, StyleX
 * @output Exports Card component and CardProps
 * @position Core card container component
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Card/Card.doc.mjs (props table, features)
 * - /packages/core/src/Card/index.ts (exports if types change)
 * - /apps/storybook/stories/Card.stories.tsx (storybook stories)
 * - /packages/cli/assets/templates/blocks/components/Card/ (showcase blocks)
 */
import type { ReactNode } from 'react';
import type { Elevation, SizeValue, SpacingStep } from '../utils/types';
import type { BaseProps } from '../BaseProps';
/**
 * Background color variant for Card.
 * - `default`: standard card background with visible border
 * - `transparent`: no background, no visible border — for grouping content without visual weight
 * - `muted`: subtle muted background for de-emphasised cards
 * - Non-semantic palette: `blue | cyan | gray | green | orange | pink | purple | red | teal | yellow`
 *   Each uses the corresponding `--color-background-<name>` token (20% opacity tint).
 *
 * Only `default` draws a visible border. Its border width is subtracted from
 * the padding so the total inset (border + padding) equals the padding token —
 * keeping content geometry faithful to the spacing scale and identical to the
 * borderless variants. Themes can override borderWidth/borderColor.
 */
export type CardVariant = 'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow';
export type { SizeValue } from '../utils/types';
export interface CardProps extends BaseProps<HTMLDivElement> {
    ref?: React.Ref<HTMLDivElement>;
    /**
     * CSS class name(s) appended to the root element.
     */
    className?: string;
    /**
     * Inline styles to apply to the root element.
     */
    style?: React.CSSProperties;
    /**
     * Width of the card.
     * Numbers are treated as pixels, strings are used as-is.
     */
    width?: SizeValue;
    /**
     * Height of the card.
     * Numbers are treated as pixels, strings are used as-is.
     */
    height?: SizeValue;
    /**
     * Maximum width of the card.
     * Numbers are treated as pixels, strings are used as-is.
     */
    maxWidth?: SizeValue;
    /**
     * Minimum height of the card.
     * Numbers are treated as pixels, strings are used as-is.
     */
    minHeight?: SizeValue;
    /**
     * Content to render inside the card.
     * Should typically be Layout child components.
     */
    children?: ReactNode;
    /**
     * Internal padding of the card using the spacing scale.
     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
     * @default 4 (16px)
     */
    padding?: SpacingStep;
    /**
     * Background color variant.
     * - `default`: standard card background with visible border
     * - `transparent`: no background, no visible border — for grouping without visual weight
     * - `muted`: subtle muted background for de-emphasised cards
     * - Non-semantic: `blue`, `cyan`, `gray`, `green`, `orange`, `pink`, `purple`, `red`, `teal`, `yellow`
     * @default 'default'
     */
    variant?: CardVariant;
    /**
     * Resting elevation — the shadow depth the card sits at.
     * `none` is flat; `low`/`med`/`high` map to the shadow token scale.
     * @default 'none'
     */
    elevation?: Elevation;
}
/**
 * A card container with border and themed styling.
 *
 * Applies card-specific appearance (background, border, border-radius)
 * and sets CSS variables for child layout components.
 *
 * @compositionHint Use as a top-level container for elevated content.
 * Pair with Layout for structured header/content/footer layouts.
 *
 * @example
 * ```
 * <Card width={400} height={300}>
 *   <Layout
 *     header={<LayoutHeader hasDivider>Title</LayoutHeader>}
 *     content={<LayoutContent>Content</LayoutContent>}
 *     footer={<LayoutFooter hasDivider>Actions</LayoutFooter>}
 *   />
 * </Card>
 * ```
 *
 * @example
 * ```
 * <Card variant="blue" width={300}>
 *   <p>Blue tinted card</p>
 * </Card>
 * ```
 *
 * @example
 * ```
 * <Card variant="muted" width={300}>
 *   <p>Subtle de-emphasised card</p>
 * </Card>
 * ```
 */
export declare function Card({ width, height, maxWidth, minHeight, children, padding, variant, elevation, xstyle, className, style, ref, ...props }: CardProps): import("react").JSX.Element;
export declare namespace Card {
    var displayName: string;
}
//# sourceMappingURL=Card.d.ts.map