@veevarts/design-system 1.12.5 → 1.12.7

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/__test__/CashTenderForm.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * CashTenderForm unit tests
+ */
+export {};

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,85 @@
+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;
+    /**
+     * 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/__test__/CheckTenderForm.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * CheckTenderForm unit tests
+ */
+export {};

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,52 @@
+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;
+    /**
+     * 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/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/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/__test__/OtherTenderForm.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * OtherTenderForm unit tests
+ */
+export {};

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>;

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

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

package/dist/patterns/PaymentSubAmountInput/PaymentSubAmountInput.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+export interface PaymentSubAmountInputProps {
+    /** Section heading text (e.g. "Payment #3"). */
+    heading: string;
+    /** Input label rendered above the field. */
+    amountLabel: string;
+    /** Controlled value. Use together with `onChange`. */
+    value?: string;
+    /** Uncontrolled default. */
+    defaultValue?: string;
+    /** Fires on every keystroke with the raw string. */
+    onChange?: (next: string) => void;
+    /** Placeholder shown when value is empty (e.g. "$150.00"). */
+    placeholder?: string;
+    isDisabled?: boolean;
+    /**
+     * Validation flag — drives the red border + error message UI.
+     * The host computes WHY (e.g. amount > remaining); this primitive
+     * only renders the visual error state.
+     */
+    isInvalid?: boolean;
+    /**
+     * Error message rendered below the field when `isInvalid === true`.
+     * Translatable. Already-formatted (the host substitutes currency
+     * + locale).
+     */
+    errorMessage?: string;
+    /**
+     * Auto-focus the amount field when this component mounts. Pair
+     * with `key={...}` from the host to re-trigger focus on every
+     * sub-payment (the input re-mounts each time and `autoFocus`
+     * fires again). The built-in `onFocus` already selects the
+     * value, so a cashier landing here can overwrite the placeholder
+     * with a single keystroke.
+     *
+     * Default `false` — the input is unfocused at mount. Hosts opt in
+     * when their flow guarantees the cashier just navigated TO this
+     * step (e.g. opening Split, advancing to Payment #N).
+     */
+    autoFocus?: boolean;
+    'data-testid'?: string;
+    className?: string;
+}
+export declare const PaymentSubAmountInput: React.FC<PaymentSubAmountInputProps>;

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

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

package/dist/patterns/PaymentSuccessView/PaymentSuccessView.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { Money } from '../../utils/money';
+export interface PaymentSuccessViewProps {
+    title: string;
+    subtitle: string;
+    /** Optional email confirmation line ("Client will receive a confirmation email at …"). */
+    emailLine?: string;
+    /** Email address to render in bold under `emailLine`. Required if `emailLine` is set. */
+    confirmationEmail?: string;
+    /**
+     * Total cash change to return to the customer. Renders as a
+     * prominent warning banner with the formatted amount; omit (or
+     * pass `value: 0`) when there is no change to give back (any
+     * non-cash tender, or cash paid exact).
+     */
+    cashChange?: Money;
+    /** Label rendered above the cash-change amount. Default: "Cash to return". */
+    cashChangeLabel?: string;
+    /**
+     * Locale used to format `cashChange`. Default `'en-US'`. Ignored
+     * when no cashChange is passed.
+     */
+    locale?: string;
+    /** Close button label. Omit `onClose` to hide the button entirely. */
+    closeLabel?: string;
+    onClose?: () => void;
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const PaymentSuccessView: React.FC<PaymentSuccessViewProps>;

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

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

package/dist/patterns/PaymentTotalBanner/PaymentTotalBanner.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { Money } from '../../utils/money';
+export interface PaymentTotalBannerProps {
+    /** Amount to render. */
+    total: Money;
+    /** Label rendered above the amount (e.g. "Total Due:", "Remaining:", "Complete"). */
+    label: string;
+    /** Locale for currency formatting. Default `'en-US'`. */
+    locale?: string;
+    /** Visual variant for emphasis. Default `'subtle'`. */
+    variant?: 'subtle' | 'success';
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const PaymentTotalBanner: React.FC<PaymentTotalBannerProps>;

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

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

package/dist/patterns/SplitPaymentSummary/SplitPaymentSummary.d.ts

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

package/dist/patterns/SplitPaymentSummary/__test__/SplitPaymentSummary.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * SplitPaymentSummary unit tests
+ */
+export {};

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

@@ -0,0 +1,9 @@
+/**
+ * SplitPaymentSummary Pattern
+ *
+ * Pure-UI primitive showing the running list of tenders + remaining balance
+ * for multi-tender split payments. Used by `@veevarts/payments-drop-in`'s
+ * `<PaymentsDropIn>` orchestrator.
+ */
+export { SplitPaymentSummary } from './SplitPaymentSummary';
+export type { SplitPaymentSummaryProps, SplitPaymentSummaryLabels, TenderRow, TenderRowStatus, TenderRowType, Money, } from './types';

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

@@ -0,0 +1,61 @@
+import { Money } from '../../utils/money';
+export type { Money } from '../../utils/money';
+export type TenderRowType = 'card' | 'cash' | 'check' | 'other';
+export type TenderRowStatus = 'pending' | 'recorded' | 'failed';
+export interface TenderRow {
+    /** Stable identifier (idempotency key, server-side payment id, etc.). */
+    id: string;
+    /** Canonical category used to pick the row icon. */
+    type: TenderRowType;
+    /** Tender amount in the host's currency. */
+    amount: number;
+    /**
+     * One-line description shown next to the icon. Examples:
+     *   - `'Credit Card **5555'`
+     *   - `'Cash'`
+     *   - `'Check #102934'`
+     *   - `'ACH'`
+     */
+    label: string;
+    /**
+     * Lifecycle status. `pending` and `recorded` ARE present in the running
+     * balance; `failed` is rendered for context but NOT counted toward
+     * `collected`.
+     */
+    status: TenderRowStatus;
+    /**
+     * Optional failure message shown inline when `status === 'failed'`.
+     */
+    failureReason?: string;
+}
+export interface SplitPaymentSummaryLabels {
+    collectedHeading?: string;
+    remainingLabel?: string;
+    completeLabel?: string;
+    removeAriaLabel?: string;
+    removeTooltipForRecorded?: string;
+    statusPending?: string;
+    statusRecorded?: string;
+    statusFailed?: string;
+}
+export interface SplitPaymentSummaryProps {
+    /** Total amount the host is collecting (sum target). */
+    total: Money;
+    /**
+     * All tenders entered so far — pending, recorded, or failed. Failed
+     * tenders are shown but excluded from the running balance.
+     */
+    tenders: TenderRow[];
+    /**
+     * Invoked when the user clicks the remove button on a tender row. Only
+     * fires when removal is allowed (i.e. status === 'pending' or 'failed').
+     * Omit to hide remove buttons entirely.
+     */
+    onRemove?: (id: string) => void;
+    locale?: string;
+    labels?: SplitPaymentSummaryLabels;
+    /** Hide the collected list (just the remaining banner). */
+    hideCollectedList?: boolean;
+    'data-testid'?: string;
+    className?: string;
+}

package/dist/patterns/TileSelect/TileSelect.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+export interface TileSelectOption {
+    /** Stable identifier returned via `onSelect`. */
+    key: string;
+    /** Visible label rendered under the icon. */
+    label: string;
+    /**
+     * Icon: iconify name (`'lucide:credit-card'`) or a `ReactNode` for
+     * fully-custom SVGs.
+     */
+    icon: string | React.ReactNode;
+    /** Disable the tile (greyed out, no click). */
+    isDisabled?: boolean;
+    /** Override per-tile test id; defaults to `${dataTestId}-${key}`. */
+    'data-testid'?: string;
+}
+export interface TileSelectProps {
+    /** Options to render in order. */
+    options: readonly TileSelectOption[];
+    /** Currently selected option `key`. `null` = no selection. */
+    selectedKey: string | null;
+    /** Fires when a tile is selected. */
+    onSelect: (key: string) => void;
+    /** Optional heading rendered above the grid. */
+    heading?: string;
+    /**
+     * `aria-label` for the wrapping group when `heading` is omitted.
+     * Translatable. Default `'Select an option'`. When `heading` is
+     * provided this prop is ignored — the grid is labelled by the
+     * heading element.
+     */
+    ariaLabel?: string;
+    /** Grid columns on >= sm. Default `3`. Mobile collapses to 2. */
+    columnsDesktop?: 2 | 3 | 4;
+    columnsMobile?: 1 | 2;
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const TileSelect: React.FC<TileSelectProps>;

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

@@ -0,0 +1,2 @@
+export { TileSelect } from './TileSelect';
+export type { TileSelectProps, TileSelectOption } from './TileSelect';