/**
 * @file SelectableCard.tsx
 * @input Uses Card, useClickableContainer, StyleX
 * @output Exports SelectableCard component and SelectableCardProps
 * @position Interactive card for toggle selection
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/SelectableCard/SelectableCard.doc.mjs (props table, features)
 * - /packages/core/src/SelectableCard/index.ts (exports if types change)
 * - /apps/storybook/stories/SelectableCard.stories.tsx (storybook stories)
 * - /packages/cli/assets/templates/blocks/components/Card/SelectableCardShowcase.tsx (showcase block)
 * - /packages/cli/assets/templates/blocks/components/Card/SelectableCardMulti.tsx (block)
 * - /packages/cli/assets/templates/blocks/components/Card/SelectableCardElevated.tsx (block)
 *
 * Composes Card for all visual styling. Adds selection state with
 * an inset box-shadow (zero layout jitter) and useClickableContainer
 * for safe nested interactive elements.
 *
 * A hidden <input type="checkbox"> inside the card provides the accessible
 * role, label, and checked state — the card surface itself has no role/tabIndex.
 * Space toggles it natively; Enter is wired up as an additional toggle key.
 *
 * For static display, use Card.
 * For navigation or action cards, use ClickableCard.
 */
import { type ReactNode, type Ref } from 'react';
import type { Elevation, SizeValue, SpacingStep } from '../utils/types';
import type { CardVariant } from '../Card/Card';
import type { BaseProps } from '../BaseProps';
export interface SelectableCardProps extends Omit<BaseProps, 'onChange'> {
    /** 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.
     */
    label: string;
    /**
     * Controlled selection state.
     * When true, the card shows an inset accent border indicating selection.
     */
    isSelected: boolean;
    /**
     * Selection change handler.
     * Called with the new selection state when the card is toggled.
     */
    onChange: (isSelected: boolean) => void;
    /**
     * 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. */
    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.
     * The selection ring composes on top, so a selected card keeps its shadow.
     * @default 'none'
     */
    elevation?: Elevation;
    /** Width of the card. */
    width?: SizeValue;
    /** Height of the card. */
    height?: SizeValue;
    /** Maximum width of the card. */
    maxWidth?: SizeValue;
}
/**
 * A card that toggles between selected and unselected states.
 *
 * Composes Card for visual styling and adds selection state with
 * an inset box-shadow (zero layout jitter vs plain Card). Supports
 * hover, pressed, focus, and disabled states.
 *
 * A visually-hidden <input type="checkbox"> inside the card provides
 * the accessible role, label, and checked state. The card surface
 * is a plain <div> — no role or tabIndex on the container.
 *
 * @compositionHint Use for multi-select or single-select card groups.
 * Manage selection state externally — use a Set for multi-select
 * or a single value for radio-style selection.
 * For navigation/action cards, use ClickableCard instead.
 *
 * @example
 * ```
 * <SelectableCard
 *   label="Option A"
 *   isSelected={selected === 'a'}
 *   onChange={() => setSelected('a')}>
 *   <Text type="body" weight="bold">Option A</Text>
 * </SelectableCard>
 * ```
 */
export declare function SelectableCard({ label, isSelected, onChange, onClick: onClickProp, onMouseUp: onMouseUpProp, isDisabled, children, padding, variant, elevation, width, height, maxWidth, ref, xstyle: xstyleProp, className: classNameProp, style, ...props }: SelectableCardProps): import("react").JSX.Element;
export declare namespace SelectableCard {
    var displayName: string;
}
//# sourceMappingURL=SelectableCard.d.ts.map