import { type ComponentPropsWithoutRef, type MouseEvent, type ReactNode } from "react";
import { type AvatarProps } from "../Avatar";
import { type CardRadius } from "../Card";
export type TemplateCardImageAspect = "16/9" | "4/3" | "1/1" | "3/4" | "21/9";
/**
 * Tone for the icon-slot variant. Drives the tinted background +
 * foreground color routing. Mirrors `IconCard`'s tone vocabulary so the
 * mental model is consistent across surfaces.
 */
export type TemplateCardIconTone = "default" | "primary" | "success" | "warning" | "error" | "info";
/**
 * Connector glyph rendered BETWEEN icon tiles in the multi-icon flow
 * variant. Built-ins cover the common cases; pass a `ReactNode` for a
 * custom glyph (e.g. a dotted line, a custom SVG).
 */
export type TemplateCardIconConnector = "arrow" | "dot" | "line" | "plus" | ReactNode;
/**
 * Single step in the multi-icon flow. Each step renders as its own
 * tinted tile; the connector glyph sits between consecutive steps.
 */
export interface TemplateCardIconStep {
    /** The icon node (e.g. `<DataBaseIcon />`). */
    icon: ReactNode;
    /** Override the tone for this step (otherwise inherits `iconTone`). */
    tone?: TemplateCardIconTone;
    /**
     * Accessible label for the step. Optional — when omitted, the step
     * inherits aria-hidden from the parent slot. Pass when the icon is
     * the only thing identifying the step's role.
     */
    label?: string;
}
export interface TemplateCardAuthor {
    /** Display name (e.g. "Octaviaflow", "@vish"). */
    name: ReactNode;
    /** Optional avatar — forwarded to the polished Avatar primitive. */
    avatar?: Pick<AvatarProps, "src" | "initials" | "alt">;
    /** Optional secondary label (e.g. "Official", "Community"). */
    byline?: ReactNode;
}
export interface TemplateCardStat {
    /** Label (e.g. "Steps", "Setup", "Installs"). */
    label: ReactNode;
    /** Value (e.g. "8", "~5 min", "12.4k"). */
    value: ReactNode;
    /** Optional icon glyph rendered before the value. */
    icon?: ReactNode;
}
export interface TemplateCardProps extends Omit<ComponentPropsWithoutRef<"div">, "title" | "onChange" | "onClick" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart"> {
    /** Template display name. */
    name: ReactNode;
    /** Heading level for the name. Default `"h3"`. */
    nameAs?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
    /** Short description (1–2 lines). */
    description?: ReactNode;
    /** Preview image / illustration (full-bleed). */
    image?: ReactNode;
    /**
     * Icon-only variant for the image slot. Renders the icon centered on
     * a tinted background of the same aspect ratio as `image`. Use this
     * for connector-heavy / category-driven template libraries where a
     * single glyph (e.g. `<DataBaseIcon />`) reads faster than a hero
     * illustration.
     *
     * Mutually exclusive with `image` and `icons` — render priority is
     * `image` > `icons` > `icon`.
     */
    icon?: ReactNode;
    /**
     * Multi-icon flow variant — renders 2+ icons in a row with a
     * connector glyph between each pair. Used for templates that bridge
     * services (e.g. Postgres → Snowflake, GitHub → Linear, Stripe →
     * BigQuery). Each step can carry its own tone for the tile tint.
     *
     * Render priority: `image` > `icons` > `icon`. A single-step array
     * is allowed but `icon` reads cleaner for that case.
     */
    icons?: TemplateCardIconStep[];
    /** Glyph rendered between icon tiles. Default `"arrow"`. */
    iconConnector?: TemplateCardIconConnector;
    /**
     * Tint for the icon-slot. Default `"default"`. For multi-icon flow,
     * acts as the fallback when an individual step omits `tone`.
     */
    iconTone?: TemplateCardIconTone;
    /** Aspect ratio of the image / icon slot. Default `"16/9"`. */
    imageAspect?: TemplateCardImageAspect;
    /** Functional category label (e.g. "Replication", "Analytics", "AI"). */
    category?: ReactNode;
    /** Author / publisher attribution. */
    author?: TemplateCardAuthor;
    /** Functional stats below the description. */
    stats?: TemplateCardStat[];
    /**
     * Technology / connector requirements. Rendered as monospace chips
     * (e.g. "Postgres", "Snowflake", "S3"). Different from `tags` which
     * are free-form labels.
     */
    requirements?: ReactNode[];
    /** Free-form tag chips (e.g. "popular", "beta", "official"). */
    tags?: ReactNode[];
    /** Primary CTA slot (e.g. "Use template"). */
    cta?: ReactNode;
    /** Footer link slot (e.g. "View workflow ↗"). */
    footer?: ReactNode;
    /** Featured badge — small text rendered over the top-left of the image. */
    badge?: ReactNode;
    /** Visual size. Default `"md"`. */
    size?: "sm" | "md" | "lg";
    /** Render the card as a real `<a>` when href is provided. */
    href?: string;
    /** Whole-card click handler. */
    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
    /** Disable interaction. */
    disabled?: boolean;
    /** Card corner radius (passes through). */
    radius?: CardRadius;
}
export declare const TemplateCard: import("react").ForwardRefExoticComponent<TemplateCardProps & import("react").RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=TemplateCard.d.ts.map