import type { GapProp, PadProp, PadRawProp } from "../../props/vocabulary/index.js";
import * as React from "react";
import type { LucideIcon } from "lucide-react";
import type { HeadingLevelProp } from "../../props/vocabulary/index.js";
import type { CardTabItemProp } from "../../props/components/data-display.prop.js";
import { type TabsExtraProp, type TabsProps } from "../navigation/tabs.js";
export type { CardTabItemProp, CardTabItemProp as CardTabItemProps, } from "../../props/components/data-display.prop.js";
/** Semantic accent tone. `accentPlacement` decides WHERE it is drawn — a leading-edge
 *  stripe (default) or the full perimeter. */
type CardAccent = "primary" | "success" | "warning" | "info" | "attention" | "destructive";
/**
 * Where the semantic `accent` tone is drawn. - `"edge"` (default) — the leading-edge stripe on
 * `border-inline-start` only, at the `--card-accent-rail-width` measure (6px). This is what
 * `variant="featured"` does, except the tone is yours instead of `--primary`, so a card can shout
 * "action required" (`accent="attention"`) or "this failed" (`accent="destructive"`) without
 * borrowing the brand colour.
 */
type CardAccentPlacement = "edge" | "perimeter";
/**
 * Surface fill and edge. `outline` is antd's `outlined` — it drops the FILL and keeps the
 * hairline; `borderless` is antd's `variant="borderless"` (its deprecated `bordered={false}`) —
 * it drops the HAIRLINE and keeps the fill. They are two different cards, which is why both
 * values exist: neither one substitutes for the other.
 */
type CardVariant = "default" | "muted" | "outline" | "borderless" | "featured";
/** Padding density — base 16px · tight 12px · cozy 20px. */
type CardDensity = "tight" | "cozy";
export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
    accent?: CardAccent;
    /**
     * Where `accent` is drawn — `"edge"` (default, the leading-edge stripe) or `"perimeter"`
     * (a full attention border in the accent tone). Inert without `accent`.
     */
    accentPlacement?: CardAccentPlacement;
    variant?: CardVariant;
    density?: CardDensity;
    /**
     * Lift the card on hover (antd `hoverable`) — the resting elevation steps up to
     * `--card-hover-shadow` and the pointer becomes a `pointer`.
     *
     * This is a PRESENTATION flag, not an interaction: it announces nothing and binds no handler.
     * A card that looks clickable has to BE clickable for everyone, so pair it with a real control
     * — a `Link`/`Button` in the header or footer, or the whole card rendered as one via
     * {@link CardProps.asChild} — never with a bare `onClick` on this div, which a keyboard or
     * screen-reader user cannot reach.
     */
    hoverable?: boolean;
    /**
     * Borrow the child's element for the card box instead of rendering a `div` — the package's
     * standard Slot passthrough (`Button`, `AspectRatio`, `ListRow`). The card's chrome and every
     * `data-*` flag move onto that element, so a card rendered as an `<a>` or a `<button>` measures
     * byte for byte like the `div` it replaces and stays a SINGLE tab stop.
     *
     * This is the other half of `hoverable`: `<Card asChild hoverable><a href="…">` is "the whole
     * card rendered as one control", reachable by keyboard and announced as one link.
     *
     * NESTING CAVEAT — the card is now ONE control, so it may not contain another. An
     * `<a>`/`<button>` (a `Link`, a `Button`, a menu trigger) inside a card-as-link or
     * card-as-button is invalid HTML: the inner control is unreachable or mis-announced, and
     * `tabList` — a strip of `button` triggers — is for the same reason not drawn under `asChild`.
     * A card that needs interactive children is not one control: drop `asChild` and put the
     * `Link`/`Button` inside it instead, as `hoverable` also allows.
     *
     * Exactly one child, as everywhere else in this package: two children have no element to
     * borrow, so `Slot`'s `React.Children.only` throws — the same error `Button asChild` throws.
     */
    asChild?: boolean;
    /**
     * Ant Design `tabList` — the tab strip that lives IN THE CARD'S HEAD, under the title, inside
     * the same border and on the same surface, so the card and its tabs read as one object. The
     * card's remaining children become the selected tab's body.
     *
     * Ported name for name and semantic for semantic (docs/DESIGN-AUTHORITY.md): the entry is
     * antd's `{ key, tab, disabled }`, not the `Tabs` component's `{ value, label, content }`.
     * @see CardTabItemProp for why the two item shapes stay apart.
     */
    tabList?: CardTabItemProp[];
    /** Ant Design `activeTabKey` — the controlled selection. Pair it with `onTabChange`. */
    activeTabKey?: string;
    /**
     * Ant Design `defaultActiveTabKey` — the uncontrolled initial selection. Without it the first
     * entry of `tabList` opens, which is antd's own fallback.
     */
    defaultActiveTabKey?: string;
    /** Ant Design `onTabChange` — fires with the newly selected `key`, however the selection moved. */
    onTabChange?: (key: string) => void;
    /**
     * Ant Design `tabBarExtraContent`, RENAMED to `extra` and made logical — the one deviation from
     * antd's spelling here, and it follows the precedent this package already set on
     * `TabsProp.extra` ("Ant Design `tabBarExtraContent`, renamed and made logical"). A second
     * spelling of a slot the package has already named once is exactly what
     * `check:prop-vocabulary` exists to prevent, and antd's `{ left, right }` keys cannot mirror
     * for an RTL locale where `{ start, end }` can.
     *
     * Inert without `tabList`: antd draws this content in the tab bar, and with no tab bar there is
     * nowhere for it to go. A header-level action is `<CardAction>` inside `<CardHeader>`.
     */
    extra?: TabsExtraProp;
    /**
     * Ant Design `tabProps` — passed straight down to the `Tabs` that draws the strip, so
     * `variant`, `size`, `centered`, `overflow`, `indicator` and the rest are reachable.
     *
     * The four fields the CARD owns are omitted rather than passed through: `items` is built from
     * `tabList`, and `value` / `defaultValue` / `onValueChange` are what `activeTabKey` /
     * `defaultActiveTabKey` / `onTabChange` already say. antd drops the same fields — it spreads
     * `tabProps` first and then writes its own `items`/`activeKey`/`onChange` over them — so this
     * is that behaviour made visible in the type instead of silent at runtime.
     */
    tabProps?: Omit<TabsProps, "items" | "value" | "defaultValue" | "onValueChange" | "extra" | "children">;
};
export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    accent?: CardAccent;
    /**
     * Where `accent` is drawn — `"edge"` (default, the leading-edge stripe) or `"perimeter"`
     * (a full attention border in the accent tone). Inert without `accent`.
     */
    accentPlacement?: CardAccentPlacement;
    variant?: CardVariant;
    density?: CardDensity;
    /**
     * Lift the card on hover (antd `hoverable`) — the resting elevation steps up to
     * `--card-hover-shadow` and the pointer becomes a `pointer`.
     *
     * This is a PRESENTATION flag, not an interaction: it announces nothing and binds no handler.
     * A card that looks clickable has to BE clickable for everyone, so pair it with a real control
     * — a `Link`/`Button` in the header or footer, or the whole card rendered as one via
     * {@link CardProps.asChild} — never with a bare `onClick` on this div, which a keyboard or
     * screen-reader user cannot reach.
     */
    hoverable?: boolean;
    /**
     * Borrow the child's element for the card box instead of rendering a `div` — the package's
     * standard Slot passthrough (`Button`, `AspectRatio`, `ListRow`). The card's chrome and every
     * `data-*` flag move onto that element, so a card rendered as an `<a>` or a `<button>` measures
     * byte for byte like the `div` it replaces and stays a SINGLE tab stop.
     *
     * This is the other half of `hoverable`: `<Card asChild hoverable><a href="…">` is "the whole
     * card rendered as one control", reachable by keyboard and announced as one link.
     *
     * NESTING CAVEAT — the card is now ONE control, so it may not contain another. An
     * `<a>`/`<button>` (a `Link`, a `Button`, a menu trigger) inside a card-as-link or
     * card-as-button is invalid HTML: the inner control is unreachable or mis-announced, and
     * `tabList` — a strip of `button` triggers — is for the same reason not drawn under `asChild`.
     * A card that needs interactive children is not one control: drop `asChild` and put the
     * `Link`/`Button` inside it instead, as `hoverable` also allows.
     *
     * Exactly one child, as everywhere else in this package: two children have no element to
     * borrow, so `Slot`'s `React.Children.only` throws — the same error `Button asChild` throws.
     */
    asChild?: boolean;
    /**
     * Ant Design `tabList` — the tab strip that lives IN THE CARD'S HEAD, under the title, inside
     * the same border and on the same surface, so the card and its tabs read as one object. The
     * card's remaining children become the selected tab's body.
     *
     * Ported name for name and semantic for semantic (docs/DESIGN-AUTHORITY.md): the entry is
     * antd's `{ key, tab, disabled }`, not the `Tabs` component's `{ value, label, content }`.
     * @see CardTabItemProp for why the two item shapes stay apart.
     */
    tabList?: CardTabItemProp[];
    /** Ant Design `activeTabKey` — the controlled selection. Pair it with `onTabChange`. */
    activeTabKey?: string;
    /**
     * Ant Design `defaultActiveTabKey` — the uncontrolled initial selection. Without it the first
     * entry of `tabList` opens, which is antd's own fallback.
     */
    defaultActiveTabKey?: string;
    /** Ant Design `onTabChange` — fires with the newly selected `key`, however the selection moved. */
    onTabChange?: (key: string) => void;
    /**
     * Ant Design `tabBarExtraContent`, RENAMED to `extra` and made logical — the one deviation from
     * antd's spelling here, and it follows the precedent this package already set on
     * `TabsProp.extra` ("Ant Design `tabBarExtraContent`, renamed and made logical"). A second
     * spelling of a slot the package has already named once is exactly what
     * `check:prop-vocabulary` exists to prevent, and antd's `{ left, right }` keys cannot mirror
     * for an RTL locale where `{ start, end }` can.
     *
     * Inert without `tabList`: antd draws this content in the tab bar, and with no tab bar there is
     * nowhere for it to go. A header-level action is `<CardAction>` inside `<CardHeader>`.
     */
    extra?: TabsExtraProp;
    /**
     * Ant Design `tabProps` — passed straight down to the `Tabs` that draws the strip, so
     * `variant`, `size`, `centered`, `overflow`, `indicator` and the rest are reachable.
     *
     * The four fields the CARD owns are omitted rather than passed through: `items` is built from
     * `tabList`, and `value` / `defaultValue` / `onValueChange` are what `activeTabKey` /
     * `defaultActiveTabKey` / `onTabChange` already say. antd drops the same fields — it spreads
     * `tabProps` first and then writes its own `items`/`activeKey`/`onChange` over them — so this
     * is that behaviour made visible in the type instead of silent at runtime.
     */
    tabProps?: Omit<TabsProps, "items" | "value" | "defaultValue" | "onValueChange" | "extra" | "children">;
} & React.RefAttributes<HTMLDivElement>>;
/** Full-bleed cover media — first child; header below uses section top (φ⁰), not shell. */
export type CardCoverProps = React.HTMLAttributes<HTMLDivElement>;
export declare const CardCover: React.ForwardRefExoticComponent<CardCoverProps & React.RefAttributes<HTMLDivElement>>;
export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
    /** Muted background + border-bottom — section band (mirror footer `separated`). */
    banded?: boolean;
};
export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    /** Muted background + border-bottom — section band (mirror footer `separated`). */
    banded?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
export type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
    /** Semantic heading level (`h1`–`h4`). Default `3`. */
    level?: HeadingLevelProp;
    /**
     * Render a different element than the `level` heading. Use `"p"` / `"div"` when the card title
     * is a styled label rather than a section heading in the outline (so it is not announced as a
     * heading and cannot skip a level).
     */
    as?: "h1" | "h2" | "h3" | "h4" | "p" | "div";
};
export declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & {
    /** Semantic heading level (`h1`–`h4`). Default `3`. */
    level?: HeadingLevelProp;
    /**
     * Render a different element than the `level` heading. Use `"p"` / `"div"` when the card title
     * is a styled label rather than a section heading in the outline (so it is not announced as a
     * heading and cannot skip a level).
     */
    as?: "h1" | "h2" | "h3" | "h4" | "p" | "div";
} & React.RefAttributes<HTMLHeadingElement>>;
export declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
export type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
    /** Edge-to-edge body (tables, tabs list). Horizontal padding removed. */
    flush?: boolean;
    /** No gap after header — pair with tabs / flush toolbar. */
    tight?: boolean;
    /** No header above — top padding matches card shell. */
    solo?: boolean;
};
export declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    /** Edge-to-edge body (tables, tabs list). Horizontal padding removed. */
    flush?: boolean;
    /** No gap after header — pair with tabs / flush toolbar. */
    tight?: boolean;
    /** No header above — top padding matches card shell. */
    solo?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
    /** Top border + symmetric action band — form Save/Cancel, table summary. */
    separated?: boolean;
    /** Full-bleed footer (the conventional `actions` bar). */
    flush?: boolean;
    /**
     * Split the footer into EQUAL-WIDTH cells divided by vertical rules — antd's `actions` row.
     *
     * A different band from `separated`, which packs its children at the inline end at their
     * natural widths: that is the right shape for a Save/Cancel pair and the wrong one for antd's
     * divided strip. Self-sufficient — it draws its own top rule and full-bleed edges, because
     * upstream's actions row is never anything else.
     */
    actions?: boolean;
};
export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    /** Top border + symmetric action band — form Save/Cancel, table summary. */
    separated?: boolean;
    /** Full-bleed footer (the conventional `actions` bar). */
    flush?: boolean;
    /**
     * Split the footer into EQUAL-WIDTH cells divided by vertical rules — antd's `actions` row.
     *
     * A different band from `separated`, which packs its children at the inline end at their
     * natural widths: that is the right shape for a Save/Cancel pair and the wrong one for antd's
     * divided strip. Self-sufficient — it draws its own top rule and full-bleed edges, because
     * upstream's actions row is never anything else.
     */
    actions?: boolean;
} & React.RefAttributes<HTMLDivElement>>;
export type CardBarProps = React.HTMLAttributes<HTMLDivElement> & {
    pad?: PadProp;
    padRaw?: PadRawProp;
    gap?: GapProp;
    surface?: "muted";
    border?: "none" | "block-start" | "block-end" | "both";
    /** Right-aligned actions slot (settings/save), Ant `tabBarExtraContent`-style. */
    extra?: React.ReactNode;
};
/**
 * CardBar — a horizontal bar (view tabs, toolbar, filter chips) that can sit at ANY position
 * inside a Card. It draws its own separators FROM its position: a top bar gets a bottom border, a
 * bottom bar gets a top border, a middle bar gets both, and a sole child gets none (the card
 * border is enough).
 */
export declare const CardBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    pad?: PadProp;
    padRaw?: PadRawProp;
    gap?: GapProp;
    surface?: "muted";
    border?: "none" | "block-start" | "block-end" | "both";
    /** Right-aligned actions slot (settings/save), Ant `tabBarExtraContent`-style. */
    extra?: React.ReactNode;
} & React.RefAttributes<HTMLDivElement>>;
export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & {
    label: React.ReactNode;
    value: React.ReactNode;
    hint?: React.ReactNode;
    /**
     * Optional leading icon, rendered as a tinted medallion above the metric. Decorative
     * (aria-hidden) — the label carries the meaning.
     */
    icon?: LucideIcon;
    /** Optional compact trend text beside the value. Avoid badge-like deltas. */
    delta?: React.ReactNode;
    /** KPI layout: stacked = design default, inline = label left / value right. */
    layout?: "stacked" | "inline";
    /** Align the metric group. */
    align?: "start" | "end";
    /** Flip delta semantics for metrics where lower is better. */
    inverse?: boolean;
    /** Semantic leading-edge rail (Card accent) — flags a KPI needing attention. */
    accent?: CardAccent;
    /** Where `accent` is drawn — `"edge"` (default rail) or `"perimeter"` (full attention border). */
    accentPlacement?: CardAccentPlacement;
};
/** KPI / stat tile — token-driven layout aligned to dashboard KPI cards. */
export declare function StatCard({ label, value, hint, icon: Icon, delta, layout, align, inverse, accent, accentPlacement, className, ...props }: StatCardProps): React.JSX.Element;
/** Header actions slot — compose beside CardTitle inside CardHeader; the header owns positioning. */
export declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;