/**
 * @file ClickableCard.tsx
 * @input Uses Card, useClickableContainer, StyleX
 * @output Exports ClickableCard component and ClickableCardProps
 * @position Interactive card for navigation or action targets
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/ClickableCard/ClickableCard.doc.mjs (props table, features)
 * - /packages/core/src/ClickableCard/index.ts (exports if types change)
 * - /apps/storybook/stories/ClickableCard.stories.tsx (storybook stories)
 * - /packages/cli/assets/templates/blocks/components/Card/ClickableCardShowcase.tsx (showcase block)
 * - /packages/cli/assets/templates/blocks/components/Card/ClickableCardWithNestedButton.tsx (block)
 * - /packages/cli/assets/templates/blocks/components/Card/ClickableCardElevated.tsx (block)
 *
 * Composes Card for all visual styling (radius, padding, variants,
 * container tokens, theming). Adds an interactive wrapper with
 * useClickableContainer for safe nested interactive elements.
 *
 * A hidden <button> or <a> inside the card provides the accessible role,
 * label, and focus ring — the card surface itself has no role/tabIndex.
 * This gives screen readers a real interactive element to announce while
 * keeping the visual hover/active overlay on the full card.
 *
 * For static display, use Card.
 * For toggle selection, use SelectableCard.
 */
import { type ReactNode, type MouseEvent, type Ref } from 'react';
import type { SizeValue, SpacingStep, Elevation } from '../utils/types';
import type { CardVariant } from '../Card/Card';
import type { BaseProps } from '../BaseProps';
export interface ClickableCardProps extends BaseProps {
    /** Ref forwarded to the root element. */
    ref?: Ref<HTMLDivElement>;
    /**
     * Accessibility label for the card.
     * Used as `aria-label` — provides the accessible name for screen readers.
     * When the card has visible text that serves as its label, prefer
     * passing that text here so the screen reader announcement matches.
     */
    label: string;
    /**
     * Click handler. Fires when the card surface is clicked
     * (not when nested interactive elements are clicked).
     */
    onClick?: (event: MouseEvent<HTMLElement>) => void;
    /**
     * Navigation URL. When provided, clicking the card navigates to this URL.
     * Ctrl/Cmd+click opens in a new tab.
     */
    href?: string;
    /**
     * Link target for href navigation.
     * @default '_self'
     */
    target?: string;
    /**
     * Set to true to disable the card.
     * Disabled cards remain focusable (tabIndex 0) with aria-disabled
     * so screen reader users can discover them.
     */
    isDisabled?: boolean;
    /**
     * Content to render inside the card.
     * Can include nested interactive elements (buttons, links) — they will
     * work independently from the card's click/navigation behavior.
     */
    children?: ReactNode;
    /**
     * Internal padding of the card using the spacing scale.
     * @default 4 (16px)
     */
    padding?: SpacingStep;
    /**
     * Background color variant.
     * @default 'default'
     */
    variant?: CardVariant;
    /**
     * Resting elevation — the shadow depth the card sits at. Often raised to
     * signal that the whole card is clickable.
     * @default 'none'
     */
    elevation?: Elevation;
    /** Width of the card. */
    width?: SizeValue;
    /** Height of the card. */
    height?: SizeValue;
    /** Maximum width of the card. */
    maxWidth?: SizeValue;
}
/**
 * An interactive card that acts as a single navigation or action target.
 *
 * Composes Card for visual styling and adds an interactive layer
 * with useClickableContainer. Nested interactive elements (buttons,
 * links, inputs) work independently — clicking them does NOT trigger
 * the card's onClick or navigation.
 *
 * A visually-hidden <button> or <a> inside the card provides the
 * accessible role and label. The card surface is a plain <div> —
 * no role or tabIndex on the container.
 *
 * @compositionHint Use for cards that navigate to a detail page or trigger an action.
 * For toggle selection cards, use SelectableCard instead.
 * Nest Button or other interactive elements freely inside — they won't conflict.
 *
 * @example
 * ```
 * <ClickableCard label="Settings" href="/settings">
 *   <Text type="body" weight="bold">Settings</Text>
 *   <Text type="supporting" color="secondary">Manage your preferences</Text>
 * </ClickableCard>
 * ```
 *
 * @example
 * ```
 * <ClickableCard label="Open modal" onClick={() => setShowModal(true)}>
 *   <Text type="body">Click anywhere to open</Text>
 *   <Button label="Other action" onClick={handleOther} />
 * </ClickableCard>
 * ```
 */
export declare function ClickableCard({ label, onClick: onClickProp, onMouseUp: onMouseUpProp, href, target, isDisabled, children, padding, variant, elevation, width, height, maxWidth, ref, xstyle: xstyleProp, className: classNameProp, style, ...props }: ClickableCardProps): import("react").JSX.Element;
export declare namespace ClickableCard {
    var displayName: string;
}
//# sourceMappingURL=ClickableCard.d.ts.map