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

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,55 @@
+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;
+    /**
+     * Hard upper bound for the typed amount, in the same MAJOR-unit scale
+     * the host parses the emitted string with. A keystroke that would push
+     * the parsed value above this is REJECTED (the controlled `value` is
+     * left unchanged, so the input reverts the offending character). Keeps
+     * the cashier from entering an 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;
+    '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/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/Summary/Summary.d.ts

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

package/dist/patterns/Summary/components/ActionBar.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { SummaryClassNames, SummaryPrimaryAction, SummaryProps } from '../types';
+export interface ActionBarProps {
+    open: boolean;
+    /** Open progress 0→1; drives the cross-fade opacity. */
+    progress: number;
+    /** True while a drag is in progress (disables the eased transition). */
+    dragging: boolean;
+    primaryAction?: SummaryPrimaryAction;
+    isLoading: boolean;
+    cart?: SummaryProps['cart'];
+    cartAriaLabel: string;
+    /** Expand the summary — the closed-bar cart button opens it on click. */
+    onToggleOpen?: () => void;
+    classNames: SummaryClassNames;
+}
+export declare const ActionBar: React.FC<ActionBarProps>;

package/dist/patterns/Summary/components/CartButton.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { SummaryProps } from '../types';
+export interface CartButtonProps {
+    cart: NonNullable<SummaryProps['cart']>;
+    ariaLabel: string;
+    /** Click handler — wired by the action bar to open the summary (and still
+     * fire the consumer's `cart.onPress` if provided). */
+    onPress: () => void;
+    className?: string;
+}
+export declare const CartButton: React.FC<CartButtonProps>;

package/dist/patterns/Summary/components/CollapseHeader.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { Money, SummaryClassNames } from '../types';
+export interface CollapseHeaderProps {
+    title: React.ReactNode;
+    total: {
+        label?: React.ReactNode;
+        amount: Money;
+    };
+    locale: string;
+    open: boolean;
+    /** Open progress 0→1; drives the cross-fade opacity. */
+    progress: number;
+    /** True while a drag is in progress (disables the eased transition). */
+    dragging: boolean;
+    toggleAriaLabel: string;
+    onToggleOpen?: () => void;
+    classNames: SummaryClassNames;
+}
+export declare const CollapseHeader: React.FC<CollapseHeaderProps>;

package/dist/patterns/Summary/components/GrandTotalRow.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Money } from '../types';
+export interface GrandTotalRowProps {
+    total: {
+        label?: React.ReactNode;
+        amount: Money;
+    };
+    locale: string;
+    className?: string;
+}
+export declare const GrandTotalRow: React.FC<GrandTotalRowProps>;

package/dist/patterns/Summary/components/ItemRow.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { SummaryLineItem } from '../types';
+export interface ItemRowProps {
+    item: SummaryLineItem;
+    locale: string;
+    onRemove?: (id: string) => void;
+    removeAriaLabel: string;
+}
+export declare const ItemRow: React.FC<ItemRowProps>;

package/dist/patterns/Summary/components/PrimaryCta.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { SummaryProps } from '../types';
+export interface PrimaryCtaProps {
+    action: NonNullable<SummaryProps['primaryAction']>;
+    disabledByLoading: boolean;
+    className?: string;
+    /** Disambiguates the two cross-fade CTA layers. Default `summary-cta` (the
+     * open / desktop instance); the closed compact layer passes `summary-cta-compact`. */
+    testId?: string;
+}
+export declare const PrimaryCta: React.FC<PrimaryCtaProps>;

package/dist/patterns/Summary/components/ServiceFeeRow.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { SummaryServiceFee } from '../types';
+export interface ServiceFeeRowProps {
+    fee: SummaryServiceFee;
+    locale: string;
+    className?: string;
+}
+export declare const ServiceFeeRow: React.FC<ServiceFeeRowProps>;

package/dist/patterns/Summary/components/SummaryBody.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { SummaryClassNames, SummaryLineItem, SummaryServiceFee, SummaryTotalRow } from '../types';
+export interface SummaryBodyProps {
+    pricesInLabel: React.ReactNode;
+    currency?: React.ReactNode;
+    items?: SummaryLineItem[];
+    serviceFee?: SummaryServiceFee;
+    rows?: SummaryTotalRow[];
+    locale: string;
+    onRemoveItem?: (id: string) => void;
+    removeAriaLabel: string;
+    emptyState?: React.ReactNode;
+    classNames: SummaryClassNames;
+}
+export declare const SummaryBody: React.FC<SummaryBodyProps>;

package/dist/patterns/Summary/components/TotalsLineRow.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { SummaryTotalRow } from '../types';
+export interface TotalsLineRowProps {
+    row: SummaryTotalRow;
+    locale: string;
+    emphasized: boolean;
+}
+export declare const TotalsLineRow: React.FC<TotalsLineRowProps>;

package/dist/patterns/Summary/drag.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Drag/reveal gesture helpers for the collapsible `<Summary>`.
+ *
+ * Kept in their own module (not in `Summary.tsx`) so the component file only
+ * exports a component — the Design-System fast-refresh convention — and so the
+ * gesture math is pure and fully unit-tested (framer's drag `info` never fires
+ * under the test mock).
+ */
+/**
+ * Minimum vertical drag distance (px) past which a collapsible summary toggles.
+ * Exported so the gesture threshold is testable and tunable.
+ */
+export declare const DRAG_TOGGLE_THRESHOLD = 60;
+/**
+ * Pure decision for the drag-to-toggle gesture: drag **up** (negative offset)
+ * while closed opens; drag **down** (positive offset) while open closes. A drag
+ * shorter than `threshold`, or in the wrong direction for the current state,
+ * does nothing.
+ */
+export declare const shouldToggleOnDrag: (offsetY: number, open: boolean, threshold?: number) => boolean;
+/** Clamp a proposed reveal height into `[0, fullHeight]`. */
+export declare const clampRevealHeight: (proposed: number, fullHeight: number) => number;
+/**
+ * Live reveal height while dragging: dragging **up** (negative `offsetY`) grows
+ * the panel from its `baseHeight`; dragging **down** shrinks it. Clamped to the
+ * panel's natural `fullHeight` so it tracks the finger 1:1 without overshooting.
+ */
+export declare const revealHeightFromDrag: (baseHeight: number, offsetY: number, fullHeight: number) => number;
+/**
+ * Resolve the reveal panel's current height. While dragging (`dragHeight` set)
+ * the finger drives it; otherwise it rests fully open (`fullHeight`) or fully
+ * collapsed (`0`).
+ */
+export declare const currentRevealHeight: (dragHeight: number | null, open: boolean, fullHeight: number) => number;
+/**
+ * The reveal panel animates its height smoothly at rest, but tracks the finger
+ * with no transition while dragging (so the drag feels 1:1, not laggy).
+ */
+export declare const revealTransitionClass: (dragging: boolean) => string;
+export interface DragInfo {
+    offset?: {
+        y?: number;
+    };
+}
+export interface DragHandlerDeps {
+    open: boolean;
+    fullHeight: number;
+    setDragHeight: (height: number | null) => void;
+    onToggleOpen?: () => void;
+}
+export interface DragHandlers {
+    onDrag: (event: unknown, info?: DragInfo) => void;
+    onDragEnd: (event: unknown, info?: DragInfo) => void;
+}
+export declare const createDragHandlers: (deps: DragHandlerDeps) => DragHandlers;

package/dist/patterns/Summary/fmt.d.ts

@@ -0,0 +1,2 @@
+import { Money } from '../../utils/money';
+export declare const fmt: (m: Money, locale: string) => string;

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

@@ -0,0 +1,7 @@
+/**
+ * Summary Pattern — pure-UI order summary (Figma node 12127-11831):
+ * header, flexible line items, service-fee toggle, totals, collapsible
+ * Total + CTA, and a compact mobile bottom-bar.
+ */
+export { Summary } from './Summary';
+export type { SummaryProps, SummaryLineItem, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, Money, } from './types';

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

@@ -0,0 +1,147 @@
+import { ReactNode } from 'react';
+import { Money } from '../../utils/money';
+export type { Money } from '../../utils/money';
+/**
+ * A single, flexible line item. The four Figma "types" (Ticket, Event,
+ * Membership, Donation) are compositions of this one shape — not rigid
+ * variants — honouring "grouping, but flexible".
+ */
+export interface SummaryLineItem {
+    /** Stable id (keys, remove handler, and `data-testid`). */
+    id: string;
+    /** Display name (Ticket / Event title / Membership / Donation). */
+    name: ReactNode;
+    /** Quantity; renders a `{qty} x` prefix (Ticket / Adult / Children). */
+    quantity?: number;
+    /** Right-aligned price. Omit on an Event header that only groups children. */
+    amount?: Money;
+    /** Render the name in a heavier weight (Event / Membership / Donation titles). */
+    emphasis?: boolean;
+    /** Leading icon node (e.g. `lucide:ticket` for Event, `lucide:star` for Membership). */
+    leadingIcon?: ReactNode;
+    /** Calendar row, e.g. "March 26th, 2026 - 9:45 am - 09:45 pm" (Event). */
+    dateLabel?: ReactNode;
+    /** Date-range row joined by an arrow (Membership), e.g. Jan 26, 2026 → Jan 26, 2027. */
+    dateRange?: {
+        from: ReactNode;
+        to: ReactNode;
+    };
+    /** Nested rows, indented (Event's Adult / Children). */
+    children?: SummaryLineItem[];
+}
+/** The "Pay Service fee" radio-toggle row. */
+export interface SummaryServiceFee {
+    label: ReactNode;
+    amount: Money;
+    /** Selected (filled radio) state. */
+    isSelected?: boolean;
+    /** Fires when the row/radio is toggled. */
+    onToggle?: () => void;
+}
+/** A plain totals row (Subtotal, Taxes). */
+export interface SummaryTotalRow {
+    /** Stable key for `data-testid` (e.g. 'subtotal', 'taxes'). */
+    key: string;
+    label: ReactNode;
+    amount: Money;
+}
+/** The primary call-to-action (orange pill + arrow). */
+export interface SummaryPrimaryAction {
+    label: ReactNode;
+    onPress: () => void;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+}
+/** Overridable copy. */
+export interface SummaryLabels {
+    /** Aria label for the per-item remove control. Default "Remove item". */
+    removeAriaLabel?: string;
+    /** Aria label for the collapse/expand press target. Default "Toggle summary". */
+    toggleAriaLabel?: string;
+    /** Aria label for the mobile cart button. Default "View cart". */
+    cartAriaLabel?: string;
+}
+/**
+ * Per-slot class overrides — the Design-System `classNames` convention (HeroUI
+ * `SlotsToClasses`). Each key targets one visual region and is merged AFTER the
+ * component's own classes via `cn`, so any Tailwind utility you pass wins. The
+ * root also accepts the plain `className`.
+ */
+export interface SummaryClassNames {
+    /** Root `<section>` (applied alongside `className`). */
+    base?: string;
+    /** Header row (title + `×`). */
+    header?: string;
+    /** Title text. */
+    title?: string;
+    /** The header collapse/close (`×`) control. */
+    closeButton?: string;
+    /** "Prices are in / currency" row. */
+    prices?: string;
+    /** Line-items container. */
+    items?: string;
+    /** Service-fee row. */
+    serviceFee?: string;
+    /** Totals-rows container (Subtotal / Taxes). */
+    totalsRows?: string;
+    /** The Total row. */
+    total?: string;
+    /** Primary CTA button. */
+    cta?: string;
+    /** Mobile compact bottom-bar. */
+    mobileBar?: string;
+    /** Mobile cart button. */
+    cart?: string;
+}
+export interface SummaryProps {
+    /** Header title. Default "Summary". */
+    title?: ReactNode;
+    /** Left text of the prices row. Default "Prices are in". */
+    pricesInLabel?: ReactNode;
+    /** Right text of the prices row (currency code), e.g. "USD". */
+    currency?: ReactNode;
+    /** BCP-47 locale for money formatting. Default 'en-US'. */
+    locale?: string;
+    /** Flexible line items (flat or grouped via `children`). */
+    items?: SummaryLineItem[];
+    /** Optional "Pay Service fee" radio-toggle row. */
+    serviceFee?: SummaryServiceFee;
+    /** Plain totals rows rendered above the Total (Subtotal, Taxes). */
+    rows?: SummaryTotalRow[];
+    /** The emphasized Total row (label default "Total"). */
+    total: {
+        label?: ReactNode;
+        amount: Money;
+    };
+    /**
+     * Whether the summary can collapse — the header shows a `×` and the whole
+     * header toggles Open/Closed. Defaults to `variant === 'mobile'` (mobile
+     * collapses, desktop does not). Pass explicitly to override the automatic
+     * behaviour.
+     */
+    collapsible?: boolean;
+    /** Controlled open/closed state (default open). */
+    isOpen?: boolean;
+    /** Fires when the header (open) — or the closed bar's Total (closed) — is activated to toggle. */
+    onToggleOpen?: () => void;
+    /** The primary CTA. */
+    primaryAction?: SummaryPrimaryAction;
+    /** When provided, item rows show a red trash remove control. */
+    onRemoveItem?: (id: string) => void;
+    /** Layout: full card ('main') or compact bottom-bar ('mobile'). Default 'main'. */
+    variant?: 'main' | 'mobile';
+    /** Mobile bottom-bar cart button + badge count. */
+    cart?: {
+        count?: number;
+        onPress?: () => void;
+    };
+    /** Disables the CTA and signals recalculation. */
+    isLoading?: boolean;
+    /** Rendered when there are no items. */
+    emptyState?: ReactNode;
+    labels?: SummaryLabels;
+    'data-testid'?: string;
+    className?: string;
+    /** Per-slot class overrides (Design-System `classNames` convention). */
+    classNames?: SummaryClassNames;
+}

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

@@ -12,6 +12,9 @@ export type TicketSelectionLabels = {
 export type TicketData = {
     id: string;
     name: string;
+    membershipName?: string;
+    membershipAlert?: string;
+    purchasedQuantity?: number;
     price: number;
     originalPrice: number;
     max: number;

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