@veevarts/design-system 1.11.0-beta.2 → 1.12.0-alpha.1

package/dist/patterns/CashTenderForm/CashTenderForm.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { CashTenderFormProps } from './types';
+export declare const CashTenderForm: React.FC<CashTenderFormProps>;
+export default CashTenderForm;

package/dist/patterns/CashTenderForm/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * CashTenderForm Pattern
+ *
+ * Pure-UI primitive for cash tender entry with change calculation and
+ * currency-aware precision. Used by `@veevarts/payments-drop-in`'s
+ * `<CashTender>` and any other consumer that needs cash collection UX.
+ */
+export { CashTenderForm } from './CashTenderForm';
+export type { CashTenderFormProps, CashTenderValue, CashTenderLabels, } from './types';

package/dist/patterns/CashTenderForm/types.d.ts

@@ -0,0 +1,95 @@
+import { Money } from '../../utils/money';
+export type { Money, CurrencyCode } from '../../utils/money';
+/**
+ * Snapshot emitted on every change of the cash tender entry.
+ * `isValid` is `true` when `received >= dueAmount.value`.
+ */
+export interface CashTenderValue {
+    /** Amount the cashier received from the customer (major units). */
+    received: number;
+    /** Computed change owed to the customer (`received - due`, rounded). */
+    change: number;
+    /** Whether the received amount satisfies the due amount. */
+    isValid: boolean;
+}
+/**
+ * Strings the pattern displays. All optional — sensible English defaults exist.
+ */
+export interface CashTenderLabels {
+    receivedLabel?: string;
+    receivedPlaceholder?: string;
+    changeLabel?: string;
+    /**
+     * Template for the change message. `{change}` is replaced with the
+     * formatted change amount.
+     */
+    changeMessageTemplate?: string;
+    /**
+     * Validation message shown when received < due.
+     * `{due}` is replaced with the formatted due amount.
+     */
+    insufficientMessageTemplate?: string;
+}
+export interface CashTenderFormProps {
+    /**
+     * The amount due. Currency drives input precision (USD 2 dec, JPY 0 dec, etc.).
+     */
+    dueAmount: Money;
+    /**
+     * Controlled received value. Use together with `onChange`.
+     */
+    received?: number | null;
+    /**
+     * Uncontrolled default received value.
+     */
+    defaultReceived?: number | null;
+    /**
+     * Fires on every keystroke with the current snapshot.
+     */
+    onChange?: (value: CashTenderValue) => void;
+    /**
+     * Locale for currency formatting and input mask.
+     * @default 'en-US'
+     */
+    locale?: string;
+    /**
+     * Label overrides for i18n.
+     */
+    labels?: CashTenderLabels;
+    /**
+     * Disable interactions (e.g. while submitting).
+     */
+    isDisabled?: boolean;
+    /**
+     * Hard upper bound for the received amount, in MAJOR units (same unit
+     * as `dueAmount.value`). A keystroke that would push the parsed value
+     * above this is REJECTED (the field keeps its prior value) — so a
+     * cashier can't enter a pathological amount that overflows the PSP
+     * integer range downstream. A character `maxLength` can't enforce this
+     * (e.g. `99999999` is only 8 chars yet far over a $999,999.99 cap), so
+     * the guard is value-based. Omit for no cap.
+     */
+    maxAmount?: number;
+    /**
+     * Auto-focus the Cash Received field when this component mounts.
+     * Pair with `key={...}` from the host to re-trigger focus on every
+     * sub-payment (the form re-mounts and `autoFocus` fires again).
+     * The built-in `onFocus` already selects the value, so a cashier
+     * landing here can overwrite the existing amount with a single
+     * keystroke.
+     *
+     * Default `false` — the field is unfocused at mount. Hosts opt in
+     * when their flow guarantees the cashier just navigated TO this
+     * tender (e.g. selecting Cash from the method picker, advancing to
+     * the next split sub-payment).
+     */
+    autoFocus?: boolean;
+    /**
+     * Inline test id forwarded to the root element.
+     */
+    'data-testid'?: string;
+    /**
+     * Extra className for the root element.
+     */
+    className?: string;
+}

package/dist/patterns/CheckTenderForm/CheckTenderForm.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { CheckTenderFormProps } from './types';
+export declare const CheckTenderForm: React.FC<CheckTenderFormProps>;
+export default CheckTenderForm;

package/dist/patterns/CheckTenderForm/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * CheckTenderForm Pattern
+ *
+ * Pure-UI primitive for check tender entry. Used by
+ * `@veevarts/payments-drop-in`'s `<CheckTender>` and any other consumer that
+ * needs check collection UX.
+ */
+export { CheckTenderForm } from './CheckTenderForm';
+export type { CheckTenderFormProps, CheckTenderValue, CheckTenderLabels, Money } from './types';

package/dist/patterns/CheckTenderForm/types.d.ts

@@ -0,0 +1,62 @@
+import { Money } from '../../utils/money';
+export type { Money } from '../../utils/money';
+/**
+ * Snapshot emitted whenever the form mutates.
+ * `isValid` is `true` when `checkNumber` is non-empty.
+ */
+export interface CheckTenderValue {
+    /** Amount tendered via this check (matches `dueAmount.value`). */
+    amount: number;
+    /** Check number as written on the physical check. Required. */
+    checkNumber: string;
+    /** Optional issuing bank name. */
+    bankName?: string;
+    /** Optional check date (ISO-8601 yyyy-mm-dd). Defaults to today when the host omits. */
+    date?: string;
+    isValid: boolean;
+}
+export interface CheckTenderLabels {
+    checkNumberLabel?: string;
+    checkNumberPlaceholder?: string;
+    bankNameLabel?: string;
+    bankNamePlaceholder?: string;
+    dateLabel?: string;
+    checkNumberRequiredMessage?: string;
+}
+export interface CheckTenderFormProps {
+    dueAmount: Money;
+    /** Controlled values. Use together with `onChange`. */
+    value?: Partial<Pick<CheckTenderValue, 'checkNumber' | 'bankName' | 'date'>>;
+    /** Uncontrolled defaults. */
+    defaultValue?: Partial<Pick<CheckTenderValue, 'checkNumber' | 'bankName' | 'date'>>;
+    onChange?: (value: CheckTenderValue) => void;
+    locale?: string;
+    labels?: CheckTenderLabels;
+    /** Hide the date picker when the host already collects it elsewhere. */
+    hideDate?: boolean;
+    /** Hide the bank name field when the host doesn't care. */
+    hideBankName?: boolean;
+    isDisabled?: boolean;
+    /**
+     * Character cap for the Check Number field. Guards against pathological
+     * paste / extreme input. Default `34` (the length of the longest IBAN,
+     * a generous ceiling for any cheque / international reference).
+     */
+    checkNumberMaxLength?: number;
+    /**
+     * Character cap for the Bank Name field. Default `100`.
+     */
+    bankNameMaxLength?: number;
+    /**
+     * Auto-focus the Check Number field when this component mounts.
+     * Pair with `key={...}` from the host to re-trigger focus on every
+     * sub-payment (the form re-mounts and `autoFocus` fires again).
+     * Default `false` — the field is unfocused at mount. Hosts opt in
+     * when their flow guarantees the cashier just navigated TO this
+     * tender (e.g. selecting Check from the method picker, advancing
+     * to the next split sub-payment).
+     */
+    autoFocus?: boolean;
+    'data-testid'?: string;
+    className?: string;
+}

package/dist/patterns/CommitmentDetails/CommitmentDetails.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+export type CommitmentDetailsLabels = {
+    totalAmount?: string;
+    remainingBalance?: string;
+    amountReceived?: string;
+};
+export type CommitmentDetailsProps = {
+    totalAmount: number;
+    remainingBalance: number;
+    amountReceived: number;
+    currency?: string;
+    locale?: string;
+    labels?: CommitmentDetailsLabels;
+    className?: string;
+};
+export declare function CommitmentDetails({ totalAmount, remainingBalance, amountReceived, currency, locale, labels: customLabels, className, }: CommitmentDetailsProps): JSX.Element;

package/dist/patterns/CommitmentDetails/index.d.ts

@@ -0,0 +1,2 @@
+export { CommitmentDetails } from './CommitmentDetails';
+export type { CommitmentDetailsLabels, CommitmentDetailsProps } from './CommitmentDetails';

package/dist/patterns/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface ConfirmDialogProps {
+    /** Whether the dialog is currently open. Controlled by the host. */
+    isOpen: boolean;
+    /** Title rendered as the dialog heading. */
+    title: string;
+    /** Body copy explaining the consequences of confirming. */
+    body: string;
+    /** Label for the confirm action. */
+    confirmLabel: string;
+    /** Visual variant of the confirm button. Default `'danger'`. */
+    confirmVariant?: 'danger' | 'primary';
+    /** Label for the dismiss action. */
+    dismissLabel: string;
+    /** Fires when the user confirms. */
+    onConfirm: () => void;
+    /** Fires when the user dismisses (Cancel button OR Esc / outside click). */
+    onDismiss: () => void;
+    'data-testid'?: string;
+}
+export declare const ConfirmDialog: React.FC<ConfirmDialogProps>;

package/dist/patterns/ConfirmDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmDialog } from './ConfirmDialog';
+export type { ConfirmDialogProps } from './ConfirmDialog';

package/dist/patterns/ConfirmationModal/ConfirmationModal.d.ts

@@ -0,0 +1,18 @@
+import { JSX, ReactNode } from 'react';
+export type ConfirmationModalLabels = {
+    title: string;
+    description: ReactNode;
+    cancel: string;
+    confirm: string;
+};
+export type ConfirmationModalProps = {
+    isOpen: boolean;
+    labels: ConfirmationModalLabels;
+    icon?: ReactNode;
+    isConfirming?: boolean;
+    confirmColor?: 'primary' | 'danger';
+    iconTone?: 'danger' | 'warning';
+    onClose: () => void;
+    onConfirm: () => void;
+};
+export declare function ConfirmationModal({ isOpen, labels, icon, isConfirming, confirmColor, iconTone, onClose, onConfirm, }: ConfirmationModalProps): JSX.Element;

package/dist/patterns/ConfirmationModal/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmationModal } from './ConfirmationModal';
+export type { ConfirmationModalLabels, ConfirmationModalProps } from './ConfirmationModal';

package/dist/patterns/EventDetails/EventDetails.d.ts

@@ -20,6 +20,8 @@ export interface EventDetailsProps {
     classes?: string;
     /** @property {boolean} [showImage] - Optional flag to show or hide the event image. Defaults to true. */
     showImage?: boolean;
+    /** @property {'lazy' | 'eager'} [imageLoading] - Optional loading strategy for the event image. Use `'lazy'` for off-screen placements (long lists, below-the-fold). Defaults to `'eager'` since the banner is typically above-the-fold. */
+    imageLoading?: 'lazy' | 'eager';
     /** @property {string} [showMoreButtonClassName] - Optional Tailwind CSS utility classes for the 'Show more/less' button. */
     showMoreButtonClassName?: string;
     /** @property {Object} labels - Labels for the event details, used for localization. */
@@ -33,5 +35,5 @@ export interface EventDetailsProps {
  * @function EventDetails
  * @description Displays a card with event information such as name, image, date, time, location, and description.
  */
-export declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
+export declare const EventDetails: ({ classes, name, imageUrl, eventDate, eventTime, location, description, showImage, imageLoading, showMoreButtonClassName, labels, }: EventDetailsProps) => JSX.Element;
 export default EventDetails;

package/dist/patterns/InstallmentFundAssignment/InstallmentFundAssignment.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { InstallmentFundAssignmentProps } from './types';
+export declare function InstallmentFundAssignment({ mode, assignments, funds, labels: customLabels, classNames, isSaving, hasSavedAssignments, isFundPickerOpen, activeAssignmentId, footer, onModeChange, onAssignmentsChange, onOpenFundPicker, onCloseFundPicker, onCollapseChange, onSave, }: InstallmentFundAssignmentProps): JSX.Element;

package/dist/patterns/InstallmentFundAssignment/InstallmentFundAssignmentSkeleton.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export declare function InstallmentFundAssignmentSkeleton(): JSX.Element;

package/dist/patterns/InstallmentFundAssignment/index.d.ts

@@ -0,0 +1,3 @@
+export { InstallmentFundAssignment } from './InstallmentFundAssignment';
+export { InstallmentFundAssignmentSkeleton } from './InstallmentFundAssignmentSkeleton';
+export type { InstallmentFundAssignmentClassNames, InstallmentFundAssignmentLabels, InstallmentFundAssignmentMode, InstallmentFundAssignmentProps, InstallmentFund, InstallmentFundAssignmentEntry, } from './types';

package/dist/patterns/InstallmentFundAssignment/types.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+export type InstallmentFundAssignmentMode = 'single' | 'split';
+export type InstallmentFund = {
+    id: string;
+    glCode: string;
+    accountName: string;
+    type: string;
+};
+export type InstallmentFundAssignmentEntry = {
+    id: string;
+    fund: InstallmentFund | null;
+    percentage: number;
+    sortOrder?: number;
+};
+export type InstallmentFundAssignmentLabels = {
+    title?: string;
+    singleFund?: string;
+    splitFunds?: string;
+    saveAssignment?: string;
+    assignSpecificFund?: string;
+    addFund?: string;
+    emptySingle?: string;
+    emptySplit?: string;
+    selectedFund?: string;
+    percentage?: string;
+    total?: string;
+    totalError?: string;
+    removeFund?: string;
+    modalTitle?: string;
+    searchPlaceholder?: string;
+    glCode?: string;
+    accountName?: string;
+    type?: string;
+    actions?: string;
+    select?: string;
+    noFunds?: string;
+    modifyAssignedFundsTitle?: string;
+    modifyAssignedFundsDescription?: string;
+    modifyAssignedFundsWarning?: string;
+    modifyAssignedFundsCancel?: string;
+    modifyAssignedFundsConfirm?: string;
+};
+export type InstallmentFundAssignmentClassNames = {
+    root?: string;
+    panel?: string;
+    header?: string;
+    tabs?: string;
+    content?: string;
+};
+export type InstallmentFundAssignmentProps = {
+    mode: InstallmentFundAssignmentMode;
+    assignments: InstallmentFundAssignmentEntry[];
+    funds: InstallmentFund[];
+    labels?: InstallmentFundAssignmentLabels;
+    classNames?: InstallmentFundAssignmentClassNames;
+    isSaving?: boolean;
+    hasSavedAssignments?: boolean;
+    isFundPickerOpen?: boolean;
+    activeAssignmentId?: string | null;
+    footer?: ReactNode;
+    onModeChange: (mode: InstallmentFundAssignmentMode) => void;
+    onAssignmentsChange: (assignments: InstallmentFundAssignmentEntry[]) => void;
+    onOpenFundPicker: (assignmentId?: string) => void;
+    onCloseFundPicker: () => void;
+    onCollapseChange?: (isCollapsed: boolean) => void;
+    onSave: () => void;
+};

package/dist/patterns/InstallmentSchedule/InstallmentSchedule.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { InstallmentScheduleProps } from './types';
+export declare function InstallmentSchedule({ mode, donationAmount, currency, locale, installments, automaticSettings, labels: customLabels, classNames, isSaving, isModeSwitchDisabled, onModeChange, onAutomaticSettingsChange, onInstallmentsChange, onSave, }: InstallmentScheduleProps): JSX.Element;

package/dist/patterns/InstallmentSchedule/InstallmentScheduleSkeleton.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export declare function InstallmentScheduleSkeleton(): JSX.Element;

package/dist/patterns/InstallmentSchedule/InstallmentTable.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { InstallmentTableProps } from './types';
+export declare function InstallmentTable({ installments, currency, locale, labels: customLabels, isSaving, onEditInstallments, onPayInstallment, onDeleteInstallment, }: InstallmentTableProps): JSX.Element;

package/dist/patterns/InstallmentSchedule/index.d.ts

@@ -0,0 +1,5 @@
+export { InstallmentSchedule } from './InstallmentSchedule';
+export { InstallmentScheduleSkeleton } from './InstallmentScheduleSkeleton';
+export { InstallmentTable } from './InstallmentTable';
+export { generateAutomaticInstallments } from './utils';
+export type { AutomaticScheduleSettings, InstallmentFrequency, InstallmentTableLabels, InstallmentTableProps, InstallmentScheduleClassNames, InstallmentScheduleLabels, InstallmentScheduleMode, InstallmentScheduleProps, ScheduledInstallment, } from './types';

package/dist/patterns/InstallmentSchedule/types.d.ts

@@ -0,0 +1,93 @@
+import { ReactNode } from 'react';
+export type InstallmentScheduleMode = 'automatic' | 'manual';
+export type InstallmentFrequency = 'monthly' | 'quarterly' | 'annual';
+export type ScheduledInstallment = {
+    id: string;
+    dueDate: string;
+    amount: number;
+    status?: 'scheduled' | 'fulfilled' | 'failed' | 'cancelled' | 'refunded' | 'paid';
+};
+export type AutomaticScheduleSettings = {
+    numberOfInstallments: number;
+    frequency: InstallmentFrequency;
+    firstInstallmentDate: string;
+};
+export type InstallmentScheduleLabels = {
+    title?: string;
+    automaticMode?: string;
+    manualMode?: string;
+    createInstallments?: string;
+    generateSchedule?: string;
+    saveInstallments?: string;
+    addInstallment?: string;
+    emptyAutomatic?: string;
+    emptyManual?: string;
+    numberOfInstallments?: string;
+    frequency?: string;
+    firstInstallmentDate?: string;
+    installment?: string;
+    dueDate?: string;
+    amount?: string;
+    total?: string;
+    remaining?: string;
+    deleteInstallment?: string;
+    monthly?: string;
+    quarterly?: string;
+    annual?: string;
+    totalError?: string;
+};
+export type InstallmentScheduleClassNames = {
+    root?: string;
+    panel?: string;
+    header?: string;
+    tabs?: string;
+    content?: string;
+};
+export type InstallmentScheduleProps = {
+    mode: InstallmentScheduleMode;
+    donationAmount: number;
+    currency?: string;
+    locale?: string;
+    installments: ScheduledInstallment[];
+    automaticSettings: AutomaticScheduleSettings;
+    labels?: InstallmentScheduleLabels;
+    classNames?: InstallmentScheduleClassNames;
+    isSaving?: boolean;
+    isModeSwitchDisabled?: boolean;
+    onModeChange: (mode: InstallmentScheduleMode) => void;
+    onAutomaticSettingsChange: (settings: AutomaticScheduleSettings) => void;
+    onInstallmentsChange: (installments: ScheduledInstallment[]) => void;
+    onSave: () => void;
+};
+export type InstallmentTableLabels = {
+    title?: string;
+    searchLabel?: string;
+    searchPlaceholder?: string;
+    editInstallments?: string;
+    installmentId?: string;
+    amount?: string;
+    scheduledDate?: string;
+    status?: string;
+    actions?: string;
+    payNow?: string;
+    sendLink?: string;
+    sendLinkDescription?: string;
+    dangerZone?: string;
+    deleteInstallment?: string;
+    deleteInstallmentDescription?: string;
+    deleteInstallmentConfirmationTitle?: string;
+    deleteInstallmentConfirmationDescription?: ReactNode;
+    deleteInstallmentConfirmationCancel?: string;
+    deleteInstallmentConfirmationConfirm?: string;
+    noInstallmentsFound?: string;
+};
+export type InstallmentTableProps = {
+    installments: ScheduledInstallment[];
+    currency: string;
+    locale?: string;
+    labels?: InstallmentTableLabels;
+    isSaving?: boolean;
+    onEditInstallments: () => void;
+    onPayInstallment?: (installment: ScheduledInstallment) => void;
+    onDeleteInstallment: (installmentId: string) => void;
+};

package/dist/patterns/InstallmentSchedule/utils.d.ts

@@ -0,0 +1,2 @@
+import { AutomaticScheduleSettings, ScheduledInstallment } from './types';
+export declare function generateAutomaticInstallments(donationAmount: number, settings: AutomaticScheduleSettings): ScheduledInstallment[];

package/dist/patterns/LoadingOverlay/LoadingOverlay.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface LoadingOverlayProps {
+    title: string;
+    subtitle?: string;
+    /** Tint of the backdrop. Default `'white'`. `'transparent'` lets the modal show through. */
+    backdrop?: 'white' | 'transparent';
+    /**
+     * When `true`, the overlay plays its EXIT animation (fade-out) and
+     * becomes non-interactive. Host keeps it mounted for the duration of
+     * the exit so it can crossfade against the success view rather than
+     * snap-unmounting (which produced a visible flash between the
+     * loading state and the success view fade-in).
+     */
+    exiting?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const LoadingOverlay: React.FC<LoadingOverlayProps>;

package/dist/patterns/LoadingOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { LoadingOverlay } from './LoadingOverlay';
+export type { LoadingOverlayProps } from './LoadingOverlay';

package/dist/patterns/ModalShell/ModalShell.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface ModalShellProps {
+    children: React.ReactNode;
+    /** Adds the visual `relative` positioning context for overlays. Default `true`. */
+    relativeOverlayRoot?: boolean;
+    className?: string;
+    /**
+     * Inline style. Primarily used by the host orchestrator to pin
+     * the modal height during the loading → success crossfade so the
+     * collecting tree's post-success re-render (`hasPartialPayments`
+     * flipping `PaymentTotalBanner` → `SplitPaymentSummary`, form
+     * re-render with the recorded tender) doesn't visibly grow the
+     * modal card underneath the absolute success view. Released once
+     * the collecting tree unmounts and the modal settles to its
+     * success-view natural height.
+     */
+    style?: React.CSSProperties;
+    'data-testid'?: string;
+}
+export declare const ModalShell: React.ForwardRefExoticComponent<ModalShellProps & React.RefAttributes<HTMLDivElement>>;
+export interface ModalShellHeaderProps {
+    /** Title rendered as an `h2`. */
+    title: string;
+    /** Optional close button — omit `onClose` to hide. */
+    onClose?: () => void;
+    closeLabel?: string;
+    /** Optional content rendered to the right of the title (e.g. badges). */
+    actions?: React.ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const ModalShellHeader: React.FC<ModalShellHeaderProps>;
+export interface ModalShellFooterProps {
+    children: React.ReactNode;
+    /** Grid column template. Default `2-col grid` (Cancel + Collect). */
+    columns?: 1 | 2;
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const ModalShellFooter: React.FC<ModalShellFooterProps>;

package/dist/patterns/ModalShell/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalShell, ModalShellHeader, ModalShellFooter } from './ModalShell';
+export type { ModalShellProps, ModalShellHeaderProps, ModalShellFooterProps, } from './ModalShell';

package/dist/patterns/OtherTenderForm/OtherTenderForm.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { OtherTenderFormProps } from './types';
+export declare const OtherTenderForm: React.FC<OtherTenderFormProps>;
+export default OtherTenderForm;

package/dist/patterns/OtherTenderForm/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * OtherTenderForm Pattern
+ *
+ * Pure-UI primitive for catch-all (non card/cash/check) tender entry.
+ * Used by `@veevarts/payments-drop-in`'s `<OtherTender>`.
+ */
+export { OtherTenderForm } from './OtherTenderForm';
+export type { OtherTenderFormProps, OtherTenderValue, OtherTenderLabels, OtherTenderMethodOption, Money, } from './types';

package/dist/patterns/OtherTenderForm/types.d.ts

@@ -0,0 +1,53 @@
+import { Money } from '../../utils/money';
+export type { Money } from '../../utils/money';
+/** A single selectable non-card / non-cash / non-check payment method. */
+export interface OtherTenderMethodOption {
+    /** Stable identifier (e.g. `'ach'`, `'wire'`, `'gift_card'`, `'voucher'`). */
+    value: string;
+    /** Localized display label. */
+    label: string;
+}
+/** Snapshot emitted whenever the form mutates. */
+export interface OtherTenderValue {
+    amount: number;
+    /**
+     * The selected method's `value` (machine-friendly). Empty string means "no
+     * selection yet".
+     */
+    method: string;
+    /**
+     * Human-readable description of the selected method (its `label`). Always
+     * paired with `method`.
+     */
+    description: string;
+    /** Free-form reference number (e.g. external voucher ID). */
+    reference?: string;
+    isValid: boolean;
+}
+export interface OtherTenderLabels {
+    methodLabel?: string;
+    methodPlaceholder?: string;
+    referenceLabel?: string;
+    referencePlaceholder?: string;
+    methodRequiredMessage?: string;
+}
+export interface OtherTenderFormProps {
+    dueAmount: Money;
+    /**
+     * Available payment methods. Defaults to a small generic set (ACH, Wire,
+     * Gift Card, Voucher, Other). Hosts almost always want to override.
+     */
+    methodOptions?: OtherTenderMethodOption[];
+    /** Controlled value. Use together with `onChange`. */
+    value?: Partial<Pick<OtherTenderValue, 'method' | 'reference'>>;
+    /** Uncontrolled defaults. */
+    defaultValue?: Partial<Pick<OtherTenderValue, 'method' | 'reference'>>;
+    onChange?: (value: OtherTenderValue) => void;
+    locale?: string;
+    labels?: OtherTenderLabels;
+    /** Show the optional `reference` text input. */
+    showReference?: boolean;
+    isDisabled?: boolean;
+    'data-testid'?: string;
+    className?: string;
+}

package/dist/patterns/PaymentCashChangeBanner/PaymentCashChangeBanner.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { Money } from '../../utils/money';
+export interface PaymentCashChangeBannerProps {
+    /** Amount of cash to give back. Banner only renders when > 0. */
+    cashChange: Money;
+    /** Heading above the amount. Translatable. Default `'Cash to return'`. */
+    label?: string;
+    /**
+     * Optional secondary line below the amount. Use in mid-split flows
+     * to disambiguate WHICH sub-payment the change refers to (e.g.
+     * `'From Payment #1'`).
+     */
+    secondaryLine?: string;
+    /** Locale forwarded to `formatMoney`. Default `'en-US'`. */
+    locale?: string;
+    /**
+     * Dismiss button — when set, renders an X button that fires this
+     * callback. Omit to render the banner non-dismissible (used inside
+     * `<PaymentSuccessView>` where the entire view replaces on Close).
+     */
+    onDismiss?: () => void;
+    /** Accessible label for the dismiss button. Default `'Dismiss'`. */
+    dismissAriaLabel?: string;
+    /**
+     * Horizontal alignment of the inner content (icon + text block).
+     * Default `'left'` — used mid-split where the banner sits inline
+     * with left-aligned form sections.
+     * `'center'` — used inside `<PaymentSuccessView>` so the banner
+     * lines up under the centered success badge + title.
+     */
+    align?: 'left' | 'center';
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const PaymentCashChangeBanner: React.FC<PaymentCashChangeBannerProps>;