goobs-frontend/dist/components/Field/Number/CreditCardNumber/index.d.ts

A comprehensive React-based libary for building modern web applications

import { default as React } from 'react';
import { FieldStyleOverrides } from '../../Shell';
/** Card brands detectable from the number's prefix pattern. */
export type CardType = 'visa' | 'mastercard' | 'amex' | 'discover' | 'dinersclub' | 'jcb' | 'unknown';
export interface CreditCardNumberProps {
    /**
     * Fires on every edit with the digits-only card-number string.
     * Validation status flows via `onValidityChange`; detected card brand
     * flows via `onCardTypeChange`.
     */
    onChange?: (value: string) => void;
    /** Optional side-channel for validity changes. */
    onValidityChange?: (isValid: boolean) => void;
    /** Optional side-channel for card-brand detection. */
    onCardTypeChange?: (cardType: CardType) => void;
    /** Includes the Luhn checksum in validity (default true); brand/length checks always run. */
    useLuhnValidation?: boolean;
    /** Marks the value as prefilled: it renders masked to its first and last 4 digits until focused or edited. */
    isDefaultValue?: boolean;
    /** Groups the displayed digits per detected brand pattern, e.g. '4444 4444 4444 4444' (default true). */
    enableFormatting?: boolean;
    /** Controlled value. Omit inside a `<Form>` with `name` to let the engine drive it. */
    value?: string;
    /** Field label (default 'Card Number'). */
    label?: React.ReactNode;
    /** Placeholder text (default '1234 5678 9012 3456'). */
    placeholder?: string;
    id?: string;
    /** Forwarded to the input as `name` for native form submission. */
    name?: string;
    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
    helperText?: string;
    /** Error message rendered below the input; sets aria-invalid. */
    error?: string | boolean;
    /** Stable test selector — emitted as `data-field` on the wrapper. */
    dataField?: string;
    /** Stable test selector — emitted as `data-field-name` on the wrapper. */
    dataFieldName?: string;
    disabled?: boolean;
    styles?: FieldStyleOverrides;
}
/**
 * Credit-card-number input built on FieldShell. Detects the card brand from
 * the digits (reported via `onCardTypeChange`), groups the display per brand
 * pattern when `enableFormatting` is on, and reports length + optional Luhn
 * validity via `onValidityChange`. `onChange` emits the digits-only string —
 * not a DOM event. With `isDefaultValue`, a prefilled number renders masked
 * to its first and last 4 digits until focused or edited. Auto-binds by
 * `name` inside a goobs `<Form>` when no explicit `value` is passed.
 */
declare const CreditCardNumber: React.FC<CreditCardNumberProps>;
export default CreditCardNumber;
//# sourceMappingURL=index.d.ts.map