type Brand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'dinersclub' | 'jcb' | 'unionpay' | 'maestro' | 'elo' | 'hipercard'; /** Inclusive numeric prefix range, e.g. ['51', '55'] matches 51xx… through 55xx… */ type PrefixRange = [string, string]; interface BrandSpec { name: Brand; displayName: string; ranges: PrefixRange[]; /** Indices where a space goes when formatting, e.g. [4, 8, 12] for 4-4-4-4. */ gaps: number[]; /** Valid full lengths. */ lengths: number[]; /** Conventional display length used to pad the masked number. */ maskLength: number; cvcLength: number; } declare const BRANDS: BrandSpec[]; declare function getBrandSpec(brand: Brand): BrandSpec; /** * Map the brand slug Stripe reports (Elements' change event or * PaymentMethod.card.brand) to a crd-ui Brand, ready for the `brand` option: * Stripe says 'diners' where crd-ui says 'dinersclub'; 'unknown' and any * slug crd-ui doesn't support return null (the unknown card state). */ declare function brandFromStripe(stripeBrand: string): Brand | null; /** * Detect the card brand from a (possibly partial) card number. * Non-digit characters are ignored. Returns null when nothing matches. * * When several brands match, the one with the longest confirmed prefix wins * (e.g. '4011 78…' is Elo, not Visa); a tentative partial match never beats a * confirmed one, so a lone '4' is reported as Visa. */ declare function detectBrand(number: string): Brand | null; type FocusedField = 'number' | 'name' | 'expiry' | 'cvc'; /** * Visual style of the card. 'gradient' is the classic per-brand gradient; * the rest are brand-agnostic finishes (the brand still shows via its logo). */ type CardVariant = 'gradient' | 'ember' | 'holo' | 'porcelain' | 'sunset' | 'graphite'; interface CardData { number: string; name: string; expiry: string; cvc: string; focused?: FocusedField | null; variant?: CardVariant; /** Pointer-tracked 3D hover tilt with a light glare. Default: false. */ tilt?: boolean; /** * Force the displayed brand instead of deriving it from `number` — for * integrations where the number never reaches you but the provider reports * the brand (e.g. Stripe Elements). `null` shows the unknown state; * `undefined` (default) keeps automatic detection. */ brand?: Brand | null; /** * Show only the last digits ('•••• •••• •••• 4242') when the full number is * unknown — saved cards or post-tokenization summaries (e.g. Stripe's * PaymentMethod.card.last4). Ignored while `number` has digits. */ last4?: string; /** * 'form' (default) is the payment-form preview: CVC on the back, flip on * focus, name placeholder. 'display' presents an existing card (dashboards): * expiry and CVC move to a meta row on the front, empty values stay masked * (reveal = update() with the real data), the empty name hides, and the CVC * focus no longer flips. */ layout?: 'form' | 'display'; /** * Make the revealed number, expiry and CVC click-to-copy (display layout * only). Masked values aren't copyable — only what the app has revealed. * Default: false. */ copyable?: boolean; /** * Extra classes per part of the card — for utility-first styling (Tailwind * etc.) of sections the library owns. Merged with the built-in classes, so * `.crd__number` (and state modifiers) stay intact. Keys are stable slot * names (see CardSlot); the `root` slot also merges the top-level `.crd`. */ classNames?: Partial>; } /** A copyable field in the display layout. */ type CopyField = 'number' | 'expiry' | 'cvc'; /** * A styleable part of the card, for the `classNames` slot map. Keys are stable * across versions even if the internal CSS class names change. */ type CardSlot = 'root' | 'inner' | 'front' | 'back' | 'chip' | 'logo' | 'number' | 'footer' | 'name' | 'expiry' | 'expiryLabel' | 'expiryValue' | 'meta' | 'metaExpiry' | 'metaCvc' | 'cvc'; interface CardOptions extends Partial { placeholders?: { /** Shown on the card while the name is empty. Default: 'FULL NAME'. */ name?: string; }; locale?: { /** Label next to the expiry date. Default: 'valid thru'. */ validThru?: string; /** Expiry label on the display-layout meta row. Default: 'Exp'. */ exp?: string; /** CVC label on the display-layout meta row. Default: 'CVC'. */ cvc?: string; /** Hover hint on a copyable field. Default: 'Click to copy'. */ copy?: string; /** Feedback bubble shown after copying a field. Default: 'Copied'. */ copied?: string; }; /** Override the built-in generic brand marks with your own inline SVG. */ logos?: Partial>; /** * Called after a copyable field is copied to the clipboard (analytics, your * own toast…). The card already writes the value; this is just an observer. */ onCopy?: (field: CopyField, value: string) => void; } interface CardInstance { /** Merge new values and re-render the affected parts of the card. */ update(data: Partial): void; /** Brand detected from the current number, or null. */ readonly brand: Brand | null; /** The root `.crd` element, in case you need direct access. */ readonly element: HTMLElement; /** Remove the card from the DOM. The instance must not be used afterwards. */ destroy(): void; } declare function createCard(container: HTMLElement, options?: CardOptions): CardInstance; export { type Brand as B, type CardData as C, type FocusedField as F, BRANDS as a, type BrandSpec as b, type CardInstance as c, type CardOptions as d, type CardSlot as e, type CardVariant as f, type CopyField as g, brandFromStripe as h, createCard as i, detectBrand as j, getBrandSpec as k };