import type React from 'react';
import type { ClickDetail, KeyboardDetail } from './types.js';
/**
 * Uses named slots: `header`, `children` (body), `footer`.
 * Shape includes `'soft'` in addition to standard `'rounded' | 'sharp'`.
 * Clickable cards emit `cx-click` — do not wrap in `<a>`.
 *
 * @csspart base, body, footer, header
 */
export interface CardOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label?: string;
    /**
     * Visual style variant. Allowed values: `elevated`, `outline`, `outlined`, `filled`.
     * @example 'elevated'
     */
    variant?: 'elevated' | 'outline' | 'outlined' | 'filled';
    /**
     * Corner radius style. Allowed values: `rounded`, `sharp`, `soft`.
     * @example 'rounded'
     */
    shape?: 'rounded' | 'sharp' | 'soft';
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Makes the entire card a clickable surface with hover and focus styles.
     * @defaultValue false
     * @example true
     */
    clickable?: boolean;
    /**
     * Enables a grain overlay texture on the card surface.
     * @defaultValue false
     * @example true
     */
    texture?: boolean;
    /**
     * Fires when the user activates the component. Detail: `ClickDetail`.
     * @example (event) => console.log(event.detail)
     */
    onClick?: (event: CustomEvent<ClickDetail>) => void;
    /**
     * Fires when a key is pressed inside the component. Detail: `KeyboardDetail`.
     * @example (event) => console.log(event.detail.key)
     */
    onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
    /**
     * Fires when a key is released inside the component. Detail: `KeyboardDetail`.
     * @example (event) => console.log(event.detail.key)
     */
    onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
    /** Default slot content.
     * @example <span>Content</span>
     */
    children?: React.ReactNode;
    /** Content for the `header` slot.
     * @example <span>Content</span>
     */
    header?: React.ReactNode;
    /** Content for the `footer` slot.
     * @example <span>Content</span>
     */
    footer?: React.ReactNode;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<Card>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-card>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type CardProps = CardOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof CardOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Card: React.ForwardRefExoticComponent<CardOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "dangerouslySetInnerHTML" | keyof CardOwnProps> & React.RefAttributes<HTMLElement>>;