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

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

package/dist/patterns/index.d.ts

@@ -17,6 +17,14 @@ export { OfferCard, OfferCardList, OfferCardSkeleton, OfferCardError, OfferCardE
 export type { Offer, OfferSelection, OfferCardLabels, OfferCardErrorLabels, OfferCardClassNames, OfferCardListClassNames, OfferCardSkeletonClassNames, OfferCardErrorClassNames, OfferCardEmptyClassNames, OfferCardSlots, OfferCardProps, OfferCardListProps, OfferCardSkeletonProps, OfferCardErrorProps, OfferCardEmptyProps, } from './OfferCard';
 export { RevenueDistributionCard, RevenueDistributionSkeleton, RevenueDistributionError, RevenueDistributionEmpty, formatAmount as formatRevenueAmount, formatCurrency as formatRevenueCurrency, getCurrencySymbol, parseCurrency as parseRevenueCurrency, calculateAllocationDifference, generateDistributionId, } from './RevenueDistribution';
 export type { GlAccount, Distribution, RevenueDistributionLabels, RevenueDistributionErrorLabels, RevenueDistributionEmptyLabels, RevenueDistributionCardClassNames, RevenueDistributionSkeletonClassNames, RevenueDistributionErrorClassNames, RevenueDistributionEmptyClassNames, RevenueDistributionCardProps, RevenueDistributionSkeletonProps, RevenueDistributionErrorProps, RevenueDistributionEmptyProps, } from './RevenueDistribution';
+export { InstallmentFundAssignment, InstallmentFundAssignmentSkeleton } from './InstallmentFundAssignment';
+export type * from './InstallmentFundAssignment';
+export { CommitmentDetails } from './CommitmentDetails';
+export type * from './CommitmentDetails';
+export { ConfirmationModal } from './ConfirmationModal';
+export type * from './ConfirmationModal';
+export { InstallmentTable, InstallmentSchedule, InstallmentScheduleSkeleton, generateAutomaticInstallments, } from './InstallmentSchedule';
+export type * from './InstallmentSchedule';
 export { MembershipSelectCards } from './MembershipSelectCards';
 export type * from './MembershipSelectCards';
 export { ItemCard } from './ItemCard';
@@ -25,3 +33,27 @@ export { Toggle } from './Toggle';
 export type * from './Toggle';
 export { TicketSelection } from './TicketSelection';
 export type * from './TicketSelection';
+export { CashTenderForm } from './CashTenderForm';
+export type { CashTenderFormProps, CashTenderValue, CashTenderLabels, } from './CashTenderForm';
+export { CheckTenderForm } from './CheckTenderForm';
+export type { CheckTenderFormProps, CheckTenderValue, CheckTenderLabels } from './CheckTenderForm';
+export { OtherTenderForm } from './OtherTenderForm';
+export type { OtherTenderFormProps, OtherTenderValue, OtherTenderLabels, OtherTenderMethodOption, } from './OtherTenderForm';
+export { SplitPaymentSummary } from './SplitPaymentSummary';
+export type { SplitPaymentSummaryProps, SplitPaymentSummaryLabels, TenderRow, TenderRowStatus, TenderRowType, } from './SplitPaymentSummary';
+export { ModalShell, ModalShellHeader, ModalShellFooter } from './ModalShell';
+export type { ModalShellProps, ModalShellHeaderProps, ModalShellFooterProps, } from './ModalShell';
+export { TileSelect } from './TileSelect';
+export type { TileSelectProps, TileSelectOption } from './TileSelect';
+export { PaymentTotalBanner } from './PaymentTotalBanner';
+export type { PaymentTotalBannerProps } from './PaymentTotalBanner';
+export { LoadingOverlay } from './LoadingOverlay';
+export type { LoadingOverlayProps } from './LoadingOverlay';
+export { PaymentSuccessView } from './PaymentSuccessView';
+export type { PaymentSuccessViewProps } from './PaymentSuccessView';
+export { PaymentCashChangeBanner } from './PaymentCashChangeBanner';
+export type { PaymentCashChangeBannerProps } from './PaymentCashChangeBanner';
+export { PaymentSubAmountInput } from './PaymentSubAmountInput';
+export type { PaymentSubAmountInputProps } from './PaymentSubAmountInput';
+export { ConfirmDialog } from './ConfirmDialog';
+export type { ConfirmDialogProps } from './ConfirmDialog';

package/dist/tailwind/index.d.ts

@@ -417,6 +417,19 @@ export declare const tokens: {
                 readonly 900: "#78350f";
                 readonly DEFAULT: "#F5A524";
             };
+            readonly info: {
+                readonly 50: "#eff6ff";
+                readonly 100: "#dbeafe";
+                readonly 200: "#bfdbfe";
+                readonly 300: "#93c5fd";
+                readonly 400: "#60a5fa";
+                readonly 500: "#2563EB";
+                readonly 600: "#1d4ed8";
+                readonly 700: "#1e40af";
+                readonly 800: "#1e3a8a";
+                readonly 900: "#172554";
+                readonly DEFAULT: "#2563EB";
+            };
         };
     };
     typography: {

package/dist/tailwind/index.js

@@ -126,6 +126,19 @@ var colors = {
       800: "#92400e",
       900: "#78350f",
       DEFAULT: "#F5A524"
+    },
+    info: {
+      50: "#eff6ff",
+      100: "#dbeafe",
+      200: "#bfdbfe",
+      300: "#93c5fd",
+      400: "#60a5fa",
+      500: "#2563EB",
+      600: "#1d4ed8",
+      700: "#1e40af",
+      800: "#1e3a8a",
+      900: "#172554",
+      DEFAULT: "#2563EB"
     }
   }
 };

package/dist/tokens/colors.d.ts

@@ -94,6 +94,19 @@ export declare const colors: {
             readonly 900: "#78350f";
             readonly DEFAULT: "#F5A524";
         };
+        readonly info: {
+            readonly 50: "#eff6ff";
+            readonly 100: "#dbeafe";
+            readonly 200: "#bfdbfe";
+            readonly 300: "#93c5fd";
+            readonly 400: "#60a5fa";
+            readonly 500: "#2563EB";
+            readonly 600: "#1d4ed8";
+            readonly 700: "#1e40af";
+            readonly 800: "#1e3a8a";
+            readonly 900: "#172554";
+            readonly DEFAULT: "#2563EB";
+        };
     };
 };
 export type ColorToken = typeof colors;

package/dist/utils/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared utilities exposed at the top level of `@veevarts/design-system`.
+ * Each file here is a self-contained module that any pattern (or external
+ * consumer) can import without reaching into a specific pattern folder.
+ */
+export { formatMoney, computeChange, currencyFractionDigits, roundToCurrency, } from './money';
+export type { Money, CurrencyCode } from './money';

package/dist/utils/money.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Money utilities — shared display + precision helpers for any pattern
+ * that renders currency.
+ *
+ * Used by CashTenderForm, PaymentTotalBanner, PaymentCashChangeBanner,
+ * SplitPaymentSummary, and any future pattern that surfaces an Amount
+ * to the user. Lives under `src/utils/` (not under a specific pattern)
+ * so cross-pattern imports follow the canonical `@utils/money` alias
+ * instead of reaching into one pattern's internals.
+ *
+ * Scope is intentionally narrow: formatting + precision + a single
+ * trivial `received - due` for cash-change live preview. NOT business
+ * logic — the BFF persists `received` and `change` independently as
+ * `Amount` value objects and never recomputes the FE's formula. If a
+ * future helper needs validation, currency conversion, or aggregate
+ * arithmetic, it does NOT belong here; it belongs in the consumer.
+ *
+ * Currency precision is locale-aware:
+ *   `Intl.NumberFormat(locale, { style: 'currency', currency }).resolvedOptions().maximumFractionDigits`
+ * yields 2 for USD, 0 for JPY, 3 for BHD, etc.
+ */
+/**
+ * ISO 4217 currency code (e.g., 'USD', 'EUR', 'JPY').
+ * String type kept open to avoid maintaining a closed enum.
+ */
+export type CurrencyCode = string;
+/**
+ * Canonical Money shape used across tender patterns.
+ * `value` is the major unit as a regular number (e.g. 12.34 for $12.34).
+ * Integer-cents storage is up to the consuming app; patterns operate on
+ * `number` for the user-facing form layer.
+ */
+export interface Money {
+    value: number;
+    currency: CurrencyCode;
+}
+/**
+ * Format a number as a localized currency string.
+ */
+export declare function formatMoney(amount: number, locale?: string, currency?: CurrencyCode): string;
+/**
+ * Resolve the maximum fraction digits Intl exposes for a currency.
+ * USD => 2, JPY => 0, BHD => 3, etc.
+ */
+export declare function currencyFractionDigits(currency: CurrencyCode, locale?: string): number;
+/**
+ * Round to the precision of the given currency (banker's rounding not required —
+ * tender entry rounds to display precision, never to cent-half).
+ */
+export declare function roundToCurrency(amount: number, currency: CurrencyCode, locale?: string): number;
+/**
+ * Compute change between received and due. Negative when insufficient.
+ * Rounded to currency precision so floating-point noise doesn't leak to UI.
+ */
+export declare function computeChange(received: number, due: number, currency: CurrencyCode, locale?: string): number;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "1.11.0",
+    "version": "1.12.0-alpha.1",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -64,6 +64,7 @@
     },
     "dependencies": {
         "@iconify/react": "^6.0.2",
+        "@internationalized/date": "^3.10.1",
         "react-hook-form": "^7.56.4",
         "vite-plugin-css-injected-by-js": "3.5.2",
         "vite-plugin-dts": "4.5.4"

package/dist/components/Button/Button.test.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,4 +0,0 @@
-/**
- * DonationAmounts Component Tests
- */
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,4 +0,0 @@
-/**
- * ExpireCartTimer Component Tests
- */
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,4 +0,0 @@
-/**
- * ItemCard Component Tests
- */
-export {};

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

@@ -1,4 +0,0 @@
-/**
- * MembershipSelectCards Component Tests
- */
-export {};

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

@@ -1,4 +0,0 @@
-/**
- * Multiselect Component Tests
- */
-export {};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

package/dist/patterns/RevenueDistribution/__test__/RevenueDistributionCard.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/patterns/RichText/RichText.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/patterns/RichText/core/TipTapEditor.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/patterns/Stepper/Stepper.test.d.ts

@@ -1,4 +0,0 @@
-/**
- * Stepper Component Tests
- */
-export {};

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

@@ -1,4 +0,0 @@
-/**
- * TicketSelection Component Tests
- */
-export {};

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

@@ -1,4 +0,0 @@
-/**
- * Toggle Component Tests
- */
-export {};