@payfit/unity-components/dist/esm/components/card/Card.d.ts

import { VariantProps } from '@payfit/unity-themes';
import { ComponentProps, PropsWithChildren } from 'react';
export declare const card: import('tailwind-variants').TVReturnType<{
    shadow: {
        none: {
            base: string;
        };
        raising: {
            base: string;
        };
        flying: {
            base: string;
        };
        '100': {
            base: string;
        };
        '300': {
            base: string;
        };
    };
    bgColor: {
        'surface.neutral': {
            base: string;
        };
        'surface.neutral.low': {
            base: string;
        };
        'surface.neutral.lowest': {
            base: string;
        };
        'surface.decorative-teal.lowest': {
            base: string;
        };
        'surface.decorative-purple.lowest': {
            base: string;
        };
        'surface.decorative-plum.lowest': {
            base: string;
        };
        'surface.decorative-orange.lowest': {
            base: string;
        };
    };
}, {
    base: string[];
}, undefined, {
    shadow: {
        none: {
            base: string;
        };
        raising: {
            base: string;
        };
        flying: {
            base: string;
        };
        '100': {
            base: string;
        };
        '300': {
            base: string;
        };
    };
    bgColor: {
        'surface.neutral': {
            base: string;
        };
        'surface.neutral.low': {
            base: string;
        };
        'surface.neutral.lowest': {
            base: string;
        };
        'surface.decorative-teal.lowest': {
            base: string;
        };
        'surface.decorative-purple.lowest': {
            base: string;
        };
        'surface.decorative-plum.lowest': {
            base: string;
        };
        'surface.decorative-orange.lowest': {
            base: string;
        };
    };
}, {
    base: string[];
}, import('tailwind-variants').TVReturnType<{
    shadow: {
        none: {
            base: string;
        };
        raising: {
            base: string;
        };
        flying: {
            base: string;
        };
        '100': {
            base: string;
        };
        '300': {
            base: string;
        };
    };
    bgColor: {
        'surface.neutral': {
            base: string;
        };
        'surface.neutral.low': {
            base: string;
        };
        'surface.neutral.lowest': {
            base: string;
        };
        'surface.decorative-teal.lowest': {
            base: string;
        };
        'surface.decorative-purple.lowest': {
            base: string;
        };
        'surface.decorative-plum.lowest': {
            base: string;
        };
        'surface.decorative-orange.lowest': {
            base: string;
        };
    };
}, {
    base: string[];
}, undefined, unknown, unknown, undefined>>;
export interface CardProps extends PropsWithChildren<VariantProps<typeof card>>, ComponentProps<'section'> {
    /**
     * The background color of the card.
     * @default 'surface.neutral'
     */
    bgColor?: VariantProps<typeof card>['bgColor'];
    /**
     * The shadow of the card.
     * @default 'none'
     */
    shadow?: VariantProps<typeof card>['shadow'];
    /**
     * The aria-label of the card. This is required if the Card does not contain a CardTitle.
     * @example
     * ```tsx
     * <Card aria-label="User statistics">
     *   <StatWidget />
     * </Card>
     * ```
     */
    'aria-label'?: string;
    /**
     * The element type of the card.
     * @default 'section'
     */
    asElement?: 'section' | 'article';
}
/**
 * The `Card` component is a container that groups related content and actions. It provides consistent
 * styling, spacing, and visual hierarchy for content sections within your application.
 *
 * Use Card when you need to organize related information, display content in distinct sections,
 * or create a visual grouping for UI elements.
 *
 * The Card uses a compound component pattern with `CardTitle` and optionally `CardContent`:
 * - `CardTitle`: Provides the heading for the card (required for accessibility, or use aria-label)
 * - `CardContent`: Optional wrapper for card body content
 *
 * Cards must be properly labeled for accessibility. You can either:
 * - Include a `CardTitle` component as a child, OR
 * - Provide an `aria-label` prop if the card doesn't need a visible title
 * @param {CardProps} props - The props for the `Card` component
 * @example
 * ```tsx
 * import { Card, CardTitle, CardContent } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <Card>
 *       <CardTitle>Employee Information</CardTitle>
 *       <CardContent>
 *         <p>Content goes here</p>
 *       </CardContent>
 *     </Card>
 *   )
 * }
 * ```
 * @example
 * ```tsx
 * // Card with title after an image
 * import { Card, CardTitle } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <Card>
 *       <img src="banner.jpg" alt="Banner" />
 *       <CardTitle>Featured Content</CardTitle>
 *       <p>Content goes here</p>
 *     </Card>
 *   )
 * }
 * ```
 * @example
 * ```tsx
 * // Card without visible title (using aria-label)
 * import { Card } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <Card aria-label="User statistics">
 *       <StatWidget />
 *     </Card>
 *   )
 * }
 * ```
 * @see {@link CardProps} for all available props
 * @see {@link CardTitle} for title configuration options
 * @see {@link CardContent} for content wrapper
 * @remarks
 * - Cards require either a CardTitle child or an aria-label for accessibility
 * - Use shadow variants only with the default 'surface.neutral' background
 * - CardTitle can be placed anywhere within the Card children
 * - CardContent is optional but recommended for better structure
 */
declare const Card: import('react').ForwardRefExoticComponent<Omit<CardProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
export { Card };