import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';
import { AsChildProp } from '../../utils/misc';
export declare const cardVariants: {};
export declare const cardVariance: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
export interface CardProps extends ComponentProps<"div">, VariantProps<typeof cardVariance> {
    asChild?: AsChildProp;
}
/**
 * Card component for displaying content in a contained, styled container.
 *
 * Cards are used to group related information and actions, providing a clear visual hierarchy.
 * They can contain various elements like headers, content sections, and footers.
 *
 * @example
 * ```tsx
 * <Card>
 *   <CardHeader>
 *     <CardTitle>Card Title</CardTitle>
 *   </CardHeader>
 *   <div className="p-5">Card content goes here</div>
 * </Card>
 * ```
 *
 * @example
 * ```tsx
 * // Using asChild to render as a different element
 * <Card asChild>
 *   <article>Card content as an article</article>
 * </Card>
 * ```
 */
export declare const Card: ({ className, asChild, ...props }: CardProps) => import("react").JSX.Element;
type CardHeaderProps = ComponentProps<"div">;
/**
 * Header component for {@link Card}.
 *
 * Provides consistent spacing and layout for card headers.
 * Typically contains a {@link CardTitle} and optionally other content like descriptions or actions.
 *
 * @example
 * ```tsx
 * <Card>
 *   <CardHeader>
 *     <CardTitle>Card Title</CardTitle>
 *     <p className="text-sm text-muted-foreground">Card description</p>
 *   </CardHeader>
 *   <div className="p-5">Card content</div>
 * </Card>
 * ```
 */
export declare const CardHeader: ({ className, ...props }: CardHeaderProps) => import("react").JSX.Element;
type CardTitleProps = ComponentProps<"p"> & {
    asChild?: AsChildProp;
};
/**
 * Title component for {@link CardHeader|card headers}.
 *
 * Provides consistent styling for card titles. Typically wrapped by {@link CardHeader}.
 *
 * @example
 * ```tsx
 * <CardHeader>
 *   <CardTitle>Settings</CardTitle>
 * </CardHeader>
 * ```
 */
export declare const CardTitle: ({ className, asChild, ...props }: CardTitleProps) => import("react").JSX.Element;
export {};