import * as React from 'react';
import { Link } from './link.js';
import 'class-variance-authority/types';
import 'class-variance-authority';

type LinkCardProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> & {
    /** Destination. Routed through `Link`, so `LinkProvider` applies. */
    href: React.ComponentPropsWithoutRef<typeof Link>['href'];
    /** The card's heading, and its accessible name. */
    title: React.ReactNode;
    /** Optional short kicker above the title — a category, date or type. */
    label?: React.ReactNode;
    /** Supporting copy under the title. */
    description?: React.ReactNode;
    /**
     * Render the link as an `ExternalLink` — adds the "opens in a new tab"
     * treatment and its accessible-name suffix, and swaps the corner glyph for
     * the outward arrow.
     */
    external?: boolean;
    ref?: React.Ref<HTMLDivElement>;
};
/**
 * A card whose entire surface is one link.
 *
 * **Why this exists as a component rather than a documented recipe.** The
 * obvious way to build a linked card — an anchor on the title, another on the
 * description, a third on the arrow — gives one destination three tab stops
 * and three competing accessible names, and it is what people reach for every
 * time. This composes `Card` with a single anchor stretched over the card via
 * `after:absolute after:inset-0`, so the whole surface is clickable while the
 * accessibility tree sees exactly one link named by the title.
 *
 * Consequences of the stretched-link technique, all deliberate:
 *
 * - **The card is `relative` and the anchor's `::after` is its hit area.** Any
 *   other interactive element inside the card would be covered by it. A card
 *   with a second action is the wrong component — compose `Card` by hand.
 * - **Text inside the card is no longer selectable by dragging**, because the
 *   overlay swallows the drag. That is inherent to the pattern and is why it
 *   suits short promo cards rather than cards containing copy worth quoting.
 * - **Focus is styled on the card, not the anchor.** The anchor's own outline
 *   would draw around its text box, not the surface the user is actually
 *   targeting, so the anchor drops its outline and the card takes a
 *   `focus-within` ring instead. Removing a focus indicator is only safe
 *   because an equivalent one is restored on the ancestor (WCAG 2.2, 2.4.7).
 *
 * The corner glyph and the hover lift are `motion-safe:` only, so a reader who
 * has asked for reduced motion gets the colour change without the movement
 * (WCAG 2.2, 2.3.3).
 */
declare function LinkCard({ className, href, title, label, description, external, children, ref, ...props }: LinkCardProps): React.JSX.Element;

export { LinkCard, type LinkCardProps };