/**
 * Framework-agnostic definitions for the V2 card-form skeleton loader.
 *
 * The React, Vue, and Angular libraries all render the same skeleton while the
 * card-form iframe loads. The grid templates and breakpoint come from the shared
 * {@link buildCardEntryLayout} — the SAME source of truth the real form uses —
 * so the skeleton reflows at exactly the width the loaded form does. Only the
 * box styling and per-framework wiring live here.
 */
export type CardFormVariant = 'card-form' | 'card-number-form' | 'cvv-form';
export declare const INLINE_SKELETON_HEIGHT_PX: number;
/** Two-row layouts are a second field row plus the 1px divider taller. */
export declare const COMPACT_SKELETON_HEIGHT_PX: number;
export type SkeletonLayout = {
    /** Single-row grid used at the iframe's default (wide) width. */
    inline: string;
    /** Two-row grid applied below `compactMaxWidthPx`; omitted when it never reflows. */
    compact?: string;
    /** Container width (px) below which the two-row grid applies. */
    compactMaxWidthPx?: number;
    /** grid-area names to render one skeleton box for, in DOM order (same in both layouts). */
    areas: string[];
};
export declare const SKELETON_LAYOUTS: Record<CardFormVariant, SkeletonLayout>;
/** Name of the shared pulse keyframes; referenced by the box `animation`. */
export declare const SKELETON_PULSE_ANIMATION_NAME = "coinflow-card-form-skeleton-pulse";
/**
 * Duration (ms) of the skeleton's opacity fade-out. Matches the `opacity 300ms`
 * transition each renderer applies. Renderers unmount the skeleton on
 * `transitionend`, but that event can be skipped (reduced-motion, an ancestor
 * `display:none`, or opacity already 0) — so they also use this as a fallback
 * timeout to force the unmount and avoid a stuck (invisible) skeleton.
 */
export declare const SKELETON_FADE_MS = 300;
/**
 * Whether the given container width would trigger the variant's two-row layout.
 * Mirrors the real form's container query (`width < breakpoint`). Variants
 * without a two-row layout never reflow.
 */
export declare function shouldStackSkeleton({ variant, width, }: {
    variant: CardFormVariant;
    width: number;
}): boolean;
/**
 * Height to guess before the iframe reports its real height. The two-row layout
 * is a field row plus divider taller than the inline one.
 */
export declare function guessSkeletonHeightPx({ variant, width, }: {
    variant: CardFormVariant;
    width: number;
}): number;
/**
 * The `grid-template` to apply for the given container width. Frameworks that
 * drive the layout from JS (Vue, Angular) call this from their resize observer;
 * React instead injects a CSS container query via {@link buildSkeletonCss}.
 */
export declare function getSkeletonGridTemplate({ variant, width, }: {
    variant: CardFormVariant;
    width: number;
}): string;
/** Stable class name for a variant's skeleton grid element. */
export declare function getSkeletonGridClass(variant: CardFormVariant): string;
/**
 * CSS (keyframes + grid + container-query breakpoint) for the container-query
 * driven renderer used by React, where the skeleton root is a query container.
 */
export declare function buildSkeletonCss(variant: CardFormVariant): string;
/**
 * Padding (px) to inset the skeleton grid by, applied on the skeleton root. It
 * equals the form's own chrome — its `m-0.5` margin plus 1px border — so the
 * boxes land in the same area the real fields will, and the grid fills the root
 * exactly (no dead space that would make the boxes look too short).
 */
export declare const SKELETON_ROOT_PADDING_PX: number;
/**
 * Inline style for each skeleton box, MINUS the `background` — the fill color is
 * theme-dependent (see {@link getSkeletonColors}) so each renderer merges it in.
 * A hairline margin keeps a subtle gap between boxes while letting them fill
 * nearly the full field height (the root padding handles the outer inset). Uses
 * string units so it renders identically in React, Vue, and Angular.
 */
export declare const SKELETON_BOX_STYLE: {
    readonly minWidth: "0";
    readonly margin: "1px";
    readonly borderRadius: "4px";
    readonly opacity: "1";
    readonly animation: "coinflow-card-form-skeleton-pulse 1.5s ease-in-out infinite";
};
export type SkeletonColors = {
    /** Faint backdrop behind the boxes. */
    backdrop: string;
    /** Box fill. */
    box: string;
};
/**
 * Best-effort skeleton palette. The skeleton renders in the SDK (parent), so it
 * can't see the form's resolved colors — it only has the optional `theme` the
 * integrator passed. When `theme.background` is a parseable color we tint the
 * skeleton light-on-dark or dark-on-light to match; otherwise we fall back to a
 * neutral mid-grey that stays visible on any surface.
 */
export declare function getSkeletonColors(theme?: {
    background?: string;
}): SkeletonColors;