import * as react from 'react'; import { HTMLAttributes, ReactNode } from 'react'; interface CardProps extends HTMLAttributes { variant?: "outlined" | "elevated" | "flat"; padding?: "none" | "sm" | "md" | "lg"; /** * Card is a link or a grid tile: adds the hover lift + border/shadow * response, and clips children to the rounded corners so a `Card.Media` * sits flush. */ interactive?: boolean; } interface CardMediaProps extends HTMLAttributes { /** Image URL. Omit for a pure colour/gradient tile. */ src?: string; alt?: string; /** CSS `aspect-ratio`. Default `"16/9"`. Ignored when `height` is set. */ ratio?: string; /** Fixed height instead of an aspect ratio. */ height?: number | string; /** * Shown UNDER the image — while it loads, and permanently if it never * arrives. Any CSS background value, so a gradient works. */ background?: string; /** `object-position` for the image. Default `"center"`. */ objectPosition?: string; loading?: "lazy" | "eager"; /** Slots pinned to the media's corners — a number chip, a status pill. */ topLeft?: ReactNode; topRight?: ReactNode; bottomLeft?: ReactNode; bottomRight?: ReactNode; } interface CardHeaderProps extends HTMLAttributes { } interface CardBodyProps extends HTMLAttributes { } interface CardFooterProps extends HTMLAttributes { } declare const Card: react.ForwardRefExoticComponent> & { Media: react.ForwardRefExoticComponent>; Header: react.ForwardRefExoticComponent>; Body: react.ForwardRefExoticComponent>; Footer: react.ForwardRefExoticComponent>; }; export { type CardHeaderProps as C, type CardBodyProps as a, type CardFooterProps as b, type CardMediaProps as c, Card as d, type CardProps as e };