@voyantjs/checkout-ui 0.19.0

package/README.md

@@ -0,0 +1,48 @@
+# @voyantjs/checkout-ui
+
+Universal payment UI components built on the existing Voyant payments
+stack:
+
+- `@voyantjs/finance` — `payment_sessions`, `payments`, `payment_instruments`
+- `@voyantjs/checkout` — collection plans + `paymentStarters` registration
+- `@voyantjs/plugin-netopia` (and future plugins) — real processor adapters
+- `@voyantjs/notifications` — payment-link emails
+
+This package adds **pure UI** on top of that stack — no parallel state,
+no parallel contracts. Verticals wrap `<PaymentStep>` and translate
+`PaymentChoice` events into checkout calls.
+
+## Components
+
+### `<PaymentStep>`
+
+Capability-driven payment picker. The parent passes a
+`PaymentStepCapabilities` boolean record built from what's actually
+wired (a configured `paymentStarter`, `bankTransferDetails` registered,
+saved methods on file).
+
+| Section | Visible when |
+|---|---|
+| Saved cards on file | `capabilities.chargeSavedCard` |
+| Send payment link | `capabilities.sendLink` |
+| Charge a new card now | `capabilities.newCard` |
+| Bank transfer (manual) | `capabilities.bankTransfer` |
+| Vertical-specific extras | always (e.g. "Issue on credit" for flights) |
+| Hold seats — pay later | always (unless `hideHoldOption`) |
+
+Saved methods are typed against `PublicBookingPaymentOptionsRecord["accounts"][number]`
+from `@voyantjs/finance/public-validation` — single source of truth.
+
+### `<PaymentLinkLandingPage>`
+
+The customer's view of a payment link. Takes a `PublicPaymentSession`
+from `@voyantjs/finance/public-validation` and renders the order
+summary, Pay-by-card button (redirects to `session.redirectUrl`), and
+optional Bank-transfer block (template-supplied IBAN).
+
+Terminal states (paid / failed / expired / cancelled / processing)
+short-circuit the body to a status panel.
+
+## Architecture
+
+See [`docs/architecture/payments-architecture.md`](../../docs/architecture/payments-architecture.md).

package/dist/components/collect-payment-dialog.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Operator-side "Collect payment" dialog. Wraps `<PaymentStep>` and
+ * `useCollectPayment` so any vertical's booking detail page can drop it in:
+ *
+ * ```tsx
+ * <CollectPaymentDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   bookingId={booking.id}
+ *   defaultCurrency={booking.sellCurrency}
+ *   defaultAmountCents={booking.sellAmountCents}
+ * />
+ * ```
+ *
+ * Capabilities are pinned to `sendLink + bankTransfer` because the
+ * operator initiates the collection rather than the customer self-charging
+ * a saved card. Verticals that need additional flows (e.g. a "Charge to
+ * folio" extra) should compose `<PaymentStep>` directly.
+ */
+export interface CollectPaymentDialogProps {
+    open: boolean;
+    onOpenChange: (next: boolean) => void;
+    bookingId: string;
+    defaultCurrency: string;
+    defaultAmountCents?: number | null;
+    defaultPayerEmail?: string | null;
+    defaultPayerName?: string | null;
+    /** Card processor id registered in checkout's `paymentStarters`. */
+    cardProvider?: string;
+}
+export declare function CollectPaymentDialog({ open, onOpenChange, bookingId, defaultCurrency, defaultAmountCents, defaultPayerEmail, defaultPayerName, cardProvider, }: CollectPaymentDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=collect-payment-dialog.d.ts.map

package/dist/components/collect-payment-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collect-payment-dialog.d.ts","sourceRoot":"","sources":["../../src/components/collect-payment-dialog.tsx"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AASD,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,GACb,EAAE,yBAAyB,2CA6H3B"}

package/dist/components/collect-payment-dialog.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCollectPayment } from "@voyantjs/checkout-react";
+import { Button } from "@voyantjs/ui/components/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@voyantjs/ui/components/dialog";
+import { Input } from "@voyantjs/ui/components/input";
+import { Label } from "@voyantjs/ui/components/label";
+import { CheckCircle2, Copy, ExternalLink, Loader2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { PaymentStep } from "./payment-step.js";
+const CAPABILITIES = {
+    chargeSavedCard: false,
+    newCard: false,
+    sendLink: true,
+    bankTransfer: true,
+};
+export function CollectPaymentDialog({ open, onOpenChange, bookingId, defaultCurrency, defaultAmountCents, defaultPayerEmail, defaultPayerName, cardProvider, }) {
+    const [amountCents, setAmountCents] = useState(defaultAmountCents ?? 0);
+    const [choice, setChoice] = useState(null);
+    const [result, setResult] = useState(null);
+    const collect = useCollectPayment(bookingId, {
+        cardProvider,
+        payerEmail: defaultPayerEmail,
+        payerName: defaultPayerName,
+    });
+    const amountInputValue = useMemo(() => (amountCents > 0 ? (amountCents / 100).toFixed(2) : ""), [amountCents]);
+    function reset() {
+        setAmountCents(defaultAmountCents ?? 0);
+        setChoice(null);
+        setResult(null);
+        collect.reset();
+    }
+    async function submit() {
+        if (!choice)
+            return;
+        if (choice.type !== "send_link" && choice.type !== "bank_transfer") {
+            toast.error("Pick 'Send payment link' or 'Bank transfer' to collect now.");
+            return;
+        }
+        if (amountCents <= 0) {
+            toast.error("Enter an amount above zero.");
+            return;
+        }
+        try {
+            const data = await collect.mutateAsync({ choice, amountCents });
+            setResult(data);
+            toast.success(choice.type === "send_link"
+                ? "Payment link sent — customer received the email."
+                : "Bank-transfer instructions ready below.");
+        }
+        catch (err) {
+            toast.error(err.message);
+        }
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: (next) => {
+            onOpenChange(next);
+            if (!next)
+                reset();
+        }, children: _jsxs(DialogContent, { className: "max-w-xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Collect payment" }), _jsx(DialogDescription, { children: "Pick how the customer will pay. Card flows redirect to the configured processor; bank-transfer surfaces IBAN instructions you can pass on." })] }), result ? (_jsx(ResultPanel, { result: result })) : (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Label, { htmlFor: "collect-amount", children: ["Amount (", defaultCurrency, ")"] }), _jsx(Input, { id: "collect-amount", type: "number", inputMode: "decimal", step: "0.01", min: "0", value: amountInputValue, onChange: (e) => {
+                                        const raw = Number.parseFloat(e.target.value);
+                                        setAmountCents(Number.isFinite(raw) ? Math.round(raw * 100) : 0);
+                                    } }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Defaults to the booking's sell amount. Override for a deposit or partial collection." })] }), _jsx(PaymentStep, { value: choice, onChange: setChoice, capabilities: CAPABILITIES, hideHoldOption: true })] })), _jsx(DialogFooter, { children: result ? (_jsx(Button, { onClick: () => onOpenChange(false), children: "Done" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: collect.isPending, children: "Cancel" }), _jsxs(Button, { onClick: submit, disabled: collect.isPending ||
+                                    !choice ||
+                                    (choice.type !== "send_link" && choice.type !== "bank_transfer"), children: [collect.isPending && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), choice?.type === "bank_transfer" ? "Generate instructions" : "Send payment link"] })] })) })] }) }));
+}
+function ResultPanel({ result }) {
+    if (result.plan.method === "card") {
+        const url = result.providerStart?.redirectUrl ?? result.paymentSession?.redirectUrl ?? null;
+        return (_jsxs("div", { className: "flex flex-col gap-4 rounded-xl border bg-card p-5", children: [_jsxs("div", { className: "flex items-center gap-2 text-emerald-700", children: [_jsx(CheckCircle2, { className: "h-5 w-5" }), _jsx("span", { className: "font-medium", children: "Payment link ready" })] }), _jsx("p", { className: "text-muted-foreground text-sm", children: "The customer received an email with the link. You can also share it directly:" }), url ? (_jsxs("div", { className: "flex items-center gap-2 rounded-md border bg-muted/30 p-3 font-mono text-xs", children: [_jsx("span", { className: "flex-1 break-all", children: url }), _jsx("button", { type: "button", "aria-label": "Copy link", className: "text-muted-foreground hover:text-foreground", onClick: () => {
+                                navigator.clipboard?.writeText(url).catch(() => undefined);
+                            }, children: _jsx(Copy, { className: "h-3.5 w-3.5" }) }), _jsx("a", { href: url, target: "_blank", rel: "noreferrer", "aria-label": "Open link", className: "text-muted-foreground hover:text-foreground", children: _jsx(ExternalLink, { className: "h-3.5 w-3.5" }) })] })) : (_jsxs("p", { className: "text-muted-foreground text-xs", children: ["The processor didn't return an immediate redirect URL. The session id is", " ", _jsx("span", { className: "font-mono", children: result.paymentSession?.id ?? "—" }), "."] }))] }));
+    }
+    const ins = result.bankTransferInstructions;
+    if (!ins) {
+        return (_jsxs("div", { className: "rounded-xl border border-amber-500/40 bg-amber-500/5 p-5 text-sm", children: ["Bank-transfer instructions are not configured for this template. Set", _jsx("span", { className: "font-mono", children: " BANK_TRANSFER_BENEFICIARY " }), "and friends in ", _jsx("span", { className: "font-mono", children: ".dev.vars" }), "."] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-4 rounded-xl border bg-card p-5", children: [_jsxs("div", { className: "flex items-center gap-2 text-emerald-700", children: [_jsx(CheckCircle2, { className: "h-5 w-5" }), _jsx("span", { className: "font-medium", children: "Bank-transfer instructions" })] }), _jsxs("dl", { className: "grid grid-cols-1 gap-2 text-sm", children: [_jsx(Row, { label: "Beneficiary", children: ins.beneficiary }), _jsx(Row, { label: "IBAN", children: _jsx("span", { className: "font-mono", children: ins.iban }) }), ins.bankName && _jsx(Row, { label: "Bank", children: ins.bankName }), _jsx(Row, { label: "Reference", children: _jsx("span", { className: "font-mono", children: ins.invoiceNumber }) })] }), ins.notes && _jsx("p", { className: "text-muted-foreground text-xs", children: ins.notes })] }));
+}
+function Row({ label, children }) {
+    return (_jsxs("div", { className: "flex items-baseline justify-between gap-3 border-b py-1.5 last:border-b-0", children: [_jsx("dt", { className: "text-muted-foreground text-xs uppercase tracking-wider", children: label }), _jsx("dd", { children: children })] }));
+}

package/dist/components/payment-link-landing-page.d.ts

@@ -0,0 +1,54 @@
+import type { PublicPaymentSession } from "@voyantjs/finance/public-validation";
+import { type ReactNode } from "react";
+/**
+ * Universal landing page rendered at `/pay/:sessionId`. The customer lands
+ * here from a payment-link email (or after returning from the processor's
+ * hosted checkout). Vertical-agnostic — same component for a flight order,
+ * a hotel deposit, or a cruise balance.
+ *
+ * The parent owns:
+ *   - fetching `PublicPaymentSession` from `/v1/public/payment-sessions/:id`
+ *     (typically via `usePublicPaymentSession` from `@voyantjs/finance-react`)
+ *   - re-fetching after the user returns from the processor (the processor
+ *     redirects back to `session.returnUrl`; the page re-mounts and the
+ *     latest status is shown)
+ *   - sourcing the bank-transfer block from template config
+ *
+ * See `docs/architecture/payments-architecture.md` §Core Rule 4.
+ */
+export interface PaymentLinkLandingPageProps {
+    session: PublicPaymentSession;
+    /** Bank-transfer instructions block — template-supplied per deployment. */
+    bankTransferInstructions?: BankTransferInstructions;
+    /** Header slot (logo, brand name, optional support contact). */
+    brandHeader?: ReactNode;
+    /** Footer slot (T&Cs link, support contact, privacy). */
+    brandFooter?: ReactNode;
+    /**
+     * Fired when the customer clicks "Pay by card" — the parent typically
+     * redirects to `session.redirectUrl` (the processor's hosted checkout).
+     */
+    onPayByCard?: () => void;
+    /**
+     * Optional human-readable description shown above the amount. Sourced
+     * from the booking / invoice / vertical context (the session record
+     * itself doesn't carry a description today).
+     */
+    description?: string;
+}
+export interface BankTransferInstructions {
+    beneficiaryName: string;
+    iban: string;
+    bic?: string;
+    bankName?: string;
+    /**
+     * Reference the customer must include in their wire so finance can
+     * reconcile the inbound transfer. Defaults to the session's
+     * `externalReference` / `clientReference` / `id` when not supplied.
+     */
+    reference?: string;
+    /** Free-text notes — surfaced under the IBAN block. */
+    notes?: string;
+}
+export declare function PaymentLinkLandingPage({ session, bankTransferInstructions, brandHeader, brandFooter, onPayByCard, description, }: PaymentLinkLandingPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=payment-link-landing-page.d.ts.map

package/dist/components/payment-link-landing-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-link-landing-page.d.ts","sourceRoot":"","sources":["../../src/components/payment-link-landing-page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAK/E,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAEhD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,oBAAoB,CAAA;IAC7B,2EAA2E;IAC3E,wBAAwB,CAAC,EAAE,wBAAwB,CAAA;IACnD,gEAAgE;IAChE,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,yDAAyD;IACzD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,MAAM,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,GACZ,EAAE,2BAA2B,2CAa7B"}

package/dist/components/payment-link-landing-page.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@voyantjs/ui/components/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voyantjs/ui/components/tabs";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { Building2, CheckCircle2, CircleAlert, Copy, CreditCard, ExternalLink, Loader2 } from "lucide-react";
+import { useState } from "react";
+export function PaymentLinkLandingPage({ session, bankTransferInstructions, brandHeader, brandFooter, onPayByCard, description, }) {
+    return (_jsxs("div", { className: "mx-auto flex min-h-screen w-full max-w-2xl flex-col gap-6 px-4 py-8", children: [brandHeader, _jsx(Header, { session: session, description: description }), _jsx(Body, { session: session, bankTransferInstructions: bankTransferInstructions, onPayByCard: onPayByCard }), brandFooter] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+function Header({ session, description, }) {
+    return (_jsxs("header", { className: "flex flex-col gap-2 border-b pb-4", children: [_jsx("h1", { className: "font-semibold text-2xl", children: description ?? defaultDescription(session) }), _jsxs("div", { className: "flex items-baseline gap-3", children: [_jsx("span", { className: "font-semibold text-3xl tabular-nums", children: formatMoneyCents(session.amountCents, session.currency) }), session.expiresAt && session.status !== "paid" && (_jsxs("span", { className: "text-muted-foreground text-sm", children: ["Expires ", formatDateTime(session.expiresAt)] }))] })] }));
+}
+function Body({ session, bankTransferInstructions, onPayByCard, }) {
+    // Terminal states — short-circuit body to a status panel.
+    if (session.status === "paid")
+        return _jsx(TerminalState, { status: "paid", reason: null });
+    if (session.status === "failed") {
+        return (_jsx(TerminalState, { status: "failed", reason: session.failureMessage ?? null, retryUrl: session.redirectUrl ?? null }));
+    }
+    if (session.status === "expired")
+        return _jsx(TerminalState, { status: "expired", reason: null });
+    if (session.status === "cancelled")
+        return _jsx(TerminalState, { status: "cancelled", reason: null });
+    if (session.status === "processing" || session.status === "authorized") {
+        return _jsx(ProcessingState, {});
+    }
+    const cardAvailable = Boolean(session.redirectUrl) || session.status === "requires_redirect";
+    const bankAvailable = Boolean(bankTransferInstructions);
+    // No method available — soft fallback (rare; signals a misconfigured
+    // session that has neither a redirect URL nor a bank-transfer block).
+    if (!cardAvailable && !bankAvailable) {
+        return (_jsxs("div", { className: "rounded-xl border border-amber-500/40 bg-amber-500/5 p-5 text-sm", children: [_jsx("p", { className: "font-medium", children: "No payment method available" }), _jsx("p", { className: "mt-2 text-muted-foreground", children: "This payment link doesn't have any payment methods configured. Please contact your travel agent." })] }));
+    }
+    // Single method — render inline without tabs.
+    if (cardAvailable && !bankAvailable) {
+        return _jsx(CardPanel, { session: session, onPayByCard: onPayByCard });
+    }
+    if (bankAvailable && !cardAvailable && bankTransferInstructions) {
+        return _jsx(BankTransferPanel, { session: session, instructions: bankTransferInstructions });
+    }
+    // Both methods — tab strip.
+    return (_jsxs(Tabs, { defaultValue: "card", className: "w-full", children: [_jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [_jsxs(TabsTrigger, { value: "card", children: [_jsx(CreditCard, { className: "mr-2 h-4 w-4" }), "Pay by card"] }), _jsxs(TabsTrigger, { value: "bank", children: [_jsx(Building2, { className: "mr-2 h-4 w-4" }), "Bank transfer"] })] }), _jsx(TabsContent, { value: "card", className: "mt-4", children: _jsx(CardPanel, { session: session, onPayByCard: onPayByCard }) }), _jsx(TabsContent, { value: "bank", className: "mt-4", children: bankTransferInstructions && (_jsx(BankTransferPanel, { session: session, instructions: bankTransferInstructions })) })] }));
+}
+function CardPanel({ session, onPayByCard, }) {
+    return (_jsxs("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [_jsx("p", { className: "mb-4 text-muted-foreground text-sm", children: "You'll be redirected to the secure payment page hosted by the card processor." }), _jsxs(Button, { className: "w-full", onClick: () => {
+                    if (onPayByCard)
+                        onPayByCard();
+                    else if (session.redirectUrl)
+                        window.location.href = session.redirectUrl;
+                }, children: ["Pay ", formatMoneyCents(session.amountCents, session.currency), _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] })] }));
+}
+function BankTransferPanel({ session, instructions, }) {
+    const reference = instructions.reference ?? session.externalReference ?? session.clientReference ?? session.id;
+    return (_jsxs("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [_jsxs("p", { className: "mb-4 text-muted-foreground text-sm", children: ["Wire ", formatMoneyCents(session.amountCents, session.currency), " to the account below. Your booking is confirmed once payment is received (typically 1\u20133 business days)."] }), _jsxs("dl", { className: "grid grid-cols-1 gap-2 text-sm", children: [_jsx(Row, { label: "Beneficiary", children: instructions.beneficiaryName }), _jsx(Row, { label: "IBAN", copyValue: instructions.iban, children: _jsx("span", { className: "font-mono", children: instructions.iban }) }), instructions.bic && (_jsx(Row, { label: "BIC / SWIFT", copyValue: instructions.bic, children: _jsx("span", { className: "font-mono", children: instructions.bic }) })), instructions.bankName && _jsx(Row, { label: "Bank", children: instructions.bankName }), _jsx(Row, { label: "Reference", copyValue: reference, children: _jsx("span", { className: "font-mono", children: reference }) })] }), instructions.notes && (_jsx("p", { className: "mt-4 text-muted-foreground text-xs", children: instructions.notes }))] }));
+}
+function Row({ label, children, copyValue, }) {
+    return (_jsxs("div", { className: "flex items-baseline justify-between gap-3 border-b py-1.5 last:border-b-0", children: [_jsx("dt", { className: "text-muted-foreground text-xs uppercase tracking-wider", children: label }), _jsxs("dd", { className: "flex items-center gap-2", children: [children, copyValue && _jsx(CopyButton, { value: copyValue })] })] }));
+}
+function CopyButton({ value }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsx("button", { type: "button", "aria-label": copied ? "Copied" : `Copy ${value}`, className: "text-muted-foreground transition-colors hover:text-foreground", onClick: async () => {
+            try {
+                await navigator.clipboard?.writeText(value);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 1500);
+            }
+            catch {
+                // Older browsers without clipboard API — no-op; the value is still
+                // visible and selectable for manual copy.
+            }
+        }, children: copied ? (_jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-emerald-600" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) }));
+}
+function TerminalState({ status, reason, retryUrl, }) {
+    const cfg = {
+        paid: {
+            icon: _jsx(CheckCircle2, { className: "h-10 w-10 text-emerald-600" }),
+            title: "Payment received",
+            body: "Thanks — your booking is confirmed. You'll receive a confirmation email shortly.",
+            tone: "border-emerald-500/40 bg-emerald-500/5",
+        },
+        failed: {
+            icon: _jsx(CircleAlert, { className: "h-10 w-10 text-destructive" }),
+            title: "Payment failed",
+            body: reason ?? "The payment couldn't be processed. Please try again or contact support.",
+            tone: "border-destructive/40 bg-destructive/5",
+        },
+        expired: {
+            icon: _jsx(CircleAlert, { className: "h-10 w-10 text-amber-600" }),
+            title: "Payment link expired",
+            body: "This payment link has expired. Please request a new one from your travel agent.",
+            tone: "border-amber-500/40 bg-amber-500/5",
+        },
+        cancelled: {
+            icon: _jsx(CircleAlert, { className: "h-10 w-10 text-muted-foreground" }),
+            title: "Payment cancelled",
+            body: "This payment was cancelled. Please contact your travel agent if this is unexpected.",
+            tone: "border-border bg-muted/20",
+        },
+    }[status];
+    return (_jsxs("div", { className: cn("flex flex-col items-center gap-3 rounded-xl border p-8 text-center", cfg.tone), children: [cfg.icon, _jsx("h2", { className: "font-semibold text-lg", children: cfg.title }), _jsx("p", { className: "max-w-md text-muted-foreground text-sm", children: cfg.body }), status === "failed" && retryUrl && (_jsxs(Button, { className: "mt-2", onClick: () => {
+                    window.location.href = retryUrl;
+                }, children: ["Try again", _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }))] }));
+}
+function ProcessingState() {
+    return (_jsxs("div", { className: "flex flex-col items-center gap-3 rounded-xl border bg-card p-8 text-center", children: [_jsx(Loader2, { className: "h-10 w-10 animate-spin text-muted-foreground" }), _jsx("h2", { className: "font-semibold text-lg", children: "Processing payment\u2026" }), _jsx("p", { className: "max-w-md text-muted-foreground text-sm", children: "We're confirming the payment with the processor. This usually takes a few seconds." })] }));
+}
+function defaultDescription(session) {
+    switch (session.targetType) {
+        case "booking":
+            return "Booking payment";
+        case "booking_payment_schedule":
+            return "Booking deposit";
+        case "booking_guarantee":
+            return "Booking guarantee";
+        case "invoice":
+            return "Invoice payment";
+        case "order":
+            return "Order payment";
+        case "flight_order":
+            return "Flight payment";
+        default:
+            return "Payment";
+    }
+}
+function formatMoneyCents(cents, currency) {
+    const amount = cents / 100;
+    if (!Number.isFinite(amount))
+        return `${cents} ${currency}`;
+    return new Intl.NumberFormat(undefined, {
+        style: "currency",
+        currency,
+        maximumFractionDigits: 2,
+    }).format(amount);
+}
+function formatDateTime(iso) {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    return new Intl.DateTimeFormat(undefined, {
+        day: "numeric",
+        month: "short",
+        hour: "2-digit",
+        minute: "2-digit",
+    }).format(d);
+}

package/dist/components/payment-step.d.ts

@@ -0,0 +1,49 @@
+import type { PaymentChoice, PaymentStepCapabilities, PaymentStepExtraOption as CheckoutPaymentStepExtraOption, SavedPaymentAccount } from "@voyantjs/checkout-react";
+import { type ReactNode } from "react";
+/**
+ * UI-side extension of the `PaymentStepExtraOption` from checkout-react —
+ * adds an optional `icon` slot since the icon is a presentation concern.
+ */
+export interface PaymentStepExtraOption extends CheckoutPaymentStepExtraOption {
+    icon?: ReactNode;
+}
+export interface PaymentStepProps {
+    value: PaymentChoice | null;
+    onChange: (next: PaymentChoice | null) => void;
+    /**
+     * What the active processor / template actually offers. Each `false`
+     * value hides its section. Honest — no invented capability strings.
+     */
+    capabilities: PaymentStepCapabilities;
+    /** Saved methods on file — surfaced when `capabilities.chargeSavedCard` is true. */
+    savedMethods?: SavedPaymentAccount[];
+    loadingSavedMethods?: boolean;
+    /**
+     * Vertical-specific always-available options. Rendered after the
+     * capability-gated sections, before the universal Hold option.
+     */
+    extraOptions?: ReadonlyArray<PaymentStepExtraOption>;
+    /** Hide the universal "Hold — pay later" option (some verticals don't support it). */
+    hideHoldOption?: boolean;
+    /**
+     * Optional callback fired when the operator picks "Send payment link".
+     * The parent wires it to `useInitiateCheckoutCollection` (or whichever
+     * checkout endpoint applies for the vertical).
+     */
+    onRequestPaymentLink?: () => void;
+}
+/**
+ * Universal capability-gated payment picker. Renders sections based on
+ * what the parent declares is actually wired, plus optional vertical-
+ * specific extras and the universal Hold option.
+ *
+ * Sections, in order:
+ *   - Saved cards on file        ← capabilities.chargeSavedCard
+ *   - Send payment link          ← capabilities.sendLink
+ *   - Charge a new card now      ← capabilities.newCard
+ *   - Bank transfer              ← capabilities.bankTransfer
+ *   - Vertical-specific extras   ← always rendered (e.g. "Issue on credit")
+ *   - Hold seats — pay later     ← always rendered (unless hideHoldOption)
+ */
+export declare function PaymentStep({ value, onChange, capabilities, savedMethods, loadingSavedMethods, extraOptions, hideHoldOption, onRequestPaymentLink, }: PaymentStepProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=payment-step.d.ts.map

package/dist/components/payment-step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-step.d.ts","sourceRoot":"","sources":["../../src/components/payment-step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,aAAa,EACb,uBAAuB,EACvB,sBAAsB,IAAI,8BAA8B,EACxD,mBAAmB,EACpB,MAAM,0BAA0B,CAAA;AAMjC,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAEhD;;;GAGG;AACH,MAAM,WAAW,sBAAuB,SAAQ,8BAA8B;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,GAAG,IAAI,CAAA;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAA;IAE9C;;;OAGG;IACH,YAAY,EAAE,uBAAuB,CAAA;IAErC,oFAAoF;IACpF,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAA;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAA;IAEpD,sFAAsF;IACtF,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;CAClC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,cAAc,EACd,oBAAoB,GACrB,EAAE,gBAAgB,2CA+BlB"}

package/dist/components/payment-step.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Input } from "@voyantjs/ui/components/input";
+import { Label } from "@voyantjs/ui/components/label";
+import { RadioGroup, RadioGroupItem } from "@voyantjs/ui/components/radio-group";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { Banknote, CreditCard, Link2, Wallet } from "lucide-react";
+import { useState } from "react";
+/**
+ * Universal capability-gated payment picker. Renders sections based on
+ * what the parent declares is actually wired, plus optional vertical-
+ * specific extras and the universal Hold option.
+ *
+ * Sections, in order:
+ *   - Saved cards on file        ← capabilities.chargeSavedCard
+ *   - Send payment link          ← capabilities.sendLink
+ *   - Charge a new card now      ← capabilities.newCard
+ *   - Bank transfer              ← capabilities.bankTransfer
+ *   - Vertical-specific extras   ← always rendered (e.g. "Issue on credit")
+ *   - Hold seats — pay later     ← always rendered (unless hideHoldOption)
+ */
+export function PaymentStep({ value, onChange, capabilities, savedMethods, loadingSavedMethods, extraOptions, hideHoldOption, onRequestPaymentLink, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-base", children: "Payment" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Pick a saved method or use a different payment option." })] }), capabilities.chargeSavedCard && (_jsx(SavedMethodsSection, { loading: loadingSavedMethods, methods: savedMethods ?? [], selectedId: value?.type === "saved_method" ? value.method.id : null, onSelect: (method) => onChange({ type: "saved_method", method }) })), _jsx(AltMethodsSection, { value: value, onChange: onChange, showNewCard: !!capabilities.newCard, showPaymentLink: !!capabilities.sendLink, showBankTransfer: !!capabilities.bankTransfer, extraOptions: extraOptions ?? [], hideHoldOption: hideHoldOption, onRequestPaymentLink: onRequestPaymentLink })] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+function SavedMethodsSection({ loading, methods, selectedId, onSelect, }) {
+    return (_jsxs("section", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [_jsxs("header", { className: "mb-3 flex items-center justify-between", children: [_jsx("h3", { className: "font-medium text-sm", children: "Saved payment methods" }), methods.length > 0 && (_jsxs("span", { className: "text-muted-foreground text-xs", children: [methods.length, " on file"] }))] }), loading ? (_jsx("div", { className: "h-16 animate-pulse rounded-md bg-muted/40" })) : methods.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-4 text-center text-muted-foreground text-xs", children: "No saved methods on file for this contact." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: methods.map((m) => {
+                    const selected = selectedId === m.id;
+                    return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onSelect(m), className: cn("flex w-full items-center gap-3 rounded-md border bg-background p-3 text-left transition-colors", selected
+                                ? "border-primary ring-2 ring-primary/20"
+                                : "hover:border-primary/40 hover:bg-accent/30"), children: [_jsx(BrandTile, { brand: m.brand }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [_jsxs("span", { className: "font-medium text-sm", children: [m.label, m.last4 && (_jsxs(_Fragment, { children: [" ···· ", _jsx("span", { className: "font-mono", children: m.last4 })] })), m.isDefault && (_jsx("span", { className: "ml-2 rounded-full bg-primary/10 px-1.5 py-0.5 font-medium text-[9px] text-primary uppercase tracking-wider", children: "Default" }))] }), m.expiryMonth && m.expiryYear && (_jsxs("span", { className: "text-muted-foreground text-xs", children: ["Expires ", String(m.expiryMonth).padStart(2, "0"), "/", m.expiryYear] }))] }), selected && (_jsx("span", { className: "font-medium text-primary text-xs", children: "Selected" }))] }) }, m.id));
+                }) }))] }));
+}
+function AltMethodsSection({ value, onChange, showNewCard, showPaymentLink, showBankTransfer, extraOptions, hideHoldOption, onRequestPaymentLink, }) {
+    const [newCardName, setNewCardName] = useState("");
+    const [newCardNumber, setNewCardNumber] = useState("");
+    const [newCardExp, setNewCardExp] = useState("");
+    const activeId = (() => {
+        if (value == null)
+            return null;
+        if (value.type === "saved_method")
+            return null;
+        if (value.type === "new_card")
+            return "new_card";
+        if (value.type === "send_link")
+            return "send_link";
+        if (value.type === "bank_transfer")
+            return "bank_transfer";
+        if (value.type === "hold")
+            return "hold";
+        if (value.type === "extra")
+            return `extra:${value.optionId}`;
+        return null;
+    })();
+    const setAlt = (id) => {
+        if (id === "hold") {
+            onChange({ type: "hold" });
+        }
+        else if (id === "new_card") {
+            onChange({
+                type: "new_card",
+                cardToken: tokenizeNewCard(newCardNumber),
+                ...(newCardName ? { cardholderName: newCardName } : {}),
+                ...(newCardExp ? { expiry: newCardExp } : {}),
+            });
+        }
+        else if (id === "send_link") {
+            onChange({ type: "send_link" });
+            onRequestPaymentLink?.();
+        }
+        else if (id === "bank_transfer") {
+            onChange({ type: "bank_transfer" });
+        }
+        else if (id.startsWith("extra:")) {
+            onChange({ type: "extra", optionId: id.slice("extra:".length) });
+        }
+    };
+    return (_jsxs("section", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [_jsx("header", { className: "mb-3 flex items-center justify-between", children: _jsx("h3", { className: "font-medium text-sm", children: "Other payment options" }) }), _jsxs(RadioGroup, { value: activeId ?? "__none", onValueChange: (v) => {
+                    if (!v)
+                        return;
+                    if (v === "send_link" ||
+                        v === "new_card" ||
+                        v === "bank_transfer" ||
+                        v === "hold" ||
+                        v.startsWith("extra:")) {
+                        setAlt(v);
+                    }
+                }, className: "flex flex-col gap-2", children: [showPaymentLink && (_jsx(AltRow, { id: "send_link", icon: _jsx(Link2, { className: "h-4 w-4 text-muted-foreground" }), title: "Send payment link to customer", body: "Hold the order, generate a payment link, and email it for the customer to pay.", active: activeId === "send_link" })), showNewCard && (_jsx(AltRow, { id: "new_card", icon: _jsx(CreditCard, { className: "h-4 w-4 text-muted-foreground" }), title: "New credit / debit card", body: "Charge a one-off card now.", active: activeId === "new_card", children: activeId === "new_card" && (_jsxs("div", { className: "mt-3 grid grid-cols-1 gap-3 md:grid-cols-3", children: [_jsx(Field, { label: "Cardholder name", children: _jsx(Input, { value: newCardName, onChange: (e) => {
+                                            setNewCardName(e.target.value);
+                                            if (value?.type === "new_card") {
+                                                onChange({ ...value, cardholderName: e.target.value });
+                                            }
+                                        } }) }), _jsx(Field, { label: "Card number", children: _jsx(Input, { inputMode: "numeric", placeholder: "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022", value: newCardNumber, onChange: (e) => {
+                                            setNewCardNumber(e.target.value);
+                                            if (value?.type === "new_card") {
+                                                onChange({ ...value, cardToken: tokenizeNewCard(e.target.value) });
+                                            }
+                                        } }) }), _jsx(Field, { label: "MM/YY", children: _jsx(Input, { value: newCardExp, onChange: (e) => {
+                                            setNewCardExp(e.target.value);
+                                            if (value?.type === "new_card") {
+                                                onChange({ ...value, expiry: e.target.value });
+                                            }
+                                        }, placeholder: "08/29" }) })] })) })), showBankTransfer && (_jsx(AltRow, { id: "bank_transfer", icon: _jsx(Banknote, { className: "h-4 w-4 text-muted-foreground" }), title: "Bank transfer", body: "Hold the order; customer pays by wire to the IBAN shown on the payment page.", active: activeId === "bank_transfer" })), extraOptions.map((opt) => (_jsx(AltRow, { id: `extra:${opt.id}`, icon: opt.icon, title: opt.label, body: opt.description, active: activeId === `extra:${opt.id}` }, opt.id))), !hideHoldOption && (_jsx(AltRow, { id: "hold", icon: _jsx(Wallet, { className: "h-4 w-4 text-muted-foreground" }), title: "Hold \u2014 pay later", body: "Lock the order; pay before the deadline to confirm.", active: activeId === "hold" }))] }), showNewCard && (_jsxs("p", { className: "mt-4 flex items-start gap-1.5 text-[11px] text-muted-foreground", children: [_jsx(Banknote, { className: "mt-0.5 h-3 w-3" }), "Card numbers entered here are tokenized in production via the processor's hosted form \u2014 never sent through this UI."] }))] }));
+}
+function AltRow({ id, icon, title, body, active, children, }) {
+    return (_jsxs("label", { className: cn("flex cursor-pointer items-start gap-3 rounded-md border bg-background p-3 transition-colors", active ? "border-primary bg-primary/5" : "hover:border-primary/40"), children: [_jsx(RadioGroupItem, { value: id, className: "mt-0.5" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("span", { className: "flex items-center gap-2 font-medium text-sm", children: [icon, title] }), _jsx("span", { className: "text-muted-foreground text-xs", children: body }), children] })] }));
+}
+function Field({ label, children, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-[11px] uppercase tracking-wider text-muted-foreground", children: label }), children] }));
+}
+function BrandTile({ brand }) {
+    return (_jsx("span", { className: "flex h-9 w-12 shrink-0 items-center justify-center rounded-md border bg-muted/30 font-mono text-[10px] uppercase tracking-wider", children: (brand ?? "card").slice(0, 4) }));
+}
+function tokenizeNewCard(number) {
+    // Demo "tokenization" — in production the processor's hosted form
+    // returns an opaque token; we never see the PAN here.
+    const last4 = number.replace(/\D/g, "").slice(-4) || "0000";
+    return `tok_demo_new_${last4}`;
+}

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `@voyantjs/checkout-ui` — universal checkout/payment UI components on top
+ * of `@voyantjs/checkout` + `@voyantjs/checkout-react`.
+ *
+ *   - <PaymentStep>             capability-driven payment picker
+ *   - <PaymentLinkLandingPage>  customer view of a payment link
+ *   - <CollectPaymentDialog>    operator-side "collect now" dialog
+ *
+ * Pure presentation. State lives in `@voyantjs/finance`, orchestration in
+ * `@voyantjs/checkout`, hooks in `@voyantjs/checkout-react`. Re-exports the
+ * universal types (`PaymentChoice`, capabilities) from checkout-react so
+ * consumers can `import { PaymentStep, type PaymentChoice } from
+ * "@voyantjs/checkout-ui"` without a second import.
+ *
+ * See `docs/architecture/payments-architecture.md`.
+ */
+export { type PaymentChoice, type PaymentStepCapabilities, type SavedPaymentAccount, } from "@voyantjs/checkout-react";
+export { type CollectPaymentDialogProps, CollectPaymentDialog, } from "./components/collect-payment-dialog.js";
+export { type BankTransferInstructions, PaymentLinkLandingPage, type PaymentLinkLandingPageProps, } from "./components/payment-link-landing-page.js";
+export { PaymentStep, type PaymentStepExtraOption, type PaymentStepProps, } from "./components/payment-step.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,GACzB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EACL,KAAK,yBAAyB,EAC9B,oBAAoB,GACrB,MAAM,wCAAwC,CAAA;AAC/C,OAAO,EACL,KAAK,wBAAwB,EAC7B,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,2CAA2C,CAAA;AAClD,OAAO,EACL,WAAW,EACX,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,GACtB,MAAM,8BAA8B,CAAA"}

package/dist/index.js

@@ -0,0 +1,19 @@
+/**
+ * `@voyantjs/checkout-ui` — universal checkout/payment UI components on top
+ * of `@voyantjs/checkout` + `@voyantjs/checkout-react`.
+ *
+ *   - <PaymentStep>             capability-driven payment picker
+ *   - <PaymentLinkLandingPage>  customer view of a payment link
+ *   - <CollectPaymentDialog>    operator-side "collect now" dialog
+ *
+ * Pure presentation. State lives in `@voyantjs/finance`, orchestration in
+ * `@voyantjs/checkout`, hooks in `@voyantjs/checkout-react`. Re-exports the
+ * universal types (`PaymentChoice`, capabilities) from checkout-react so
+ * consumers can `import { PaymentStep, type PaymentChoice } from
+ * "@voyantjs/checkout-ui"` without a second import.
+ *
+ * See `docs/architecture/payments-architecture.md`.
+ */
+export { CollectPaymentDialog, } from "./components/collect-payment-dialog.js";
+export { PaymentLinkLandingPage, } from "./components/payment-link-landing-page.js";
+export { PaymentStep, } from "./components/payment-step.js";

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@voyantjs/checkout-ui",
+  "version": "0.19.0",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/voyantjs/voyant.git",
+    "directory": "packages/checkout-ui"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css",
+    "./components/*": "./src/components/*.tsx"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf dist",
+    "prepack": "pnpm run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src/",
+    "test": "vitest run --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@voyantjs/checkout": "workspace:*",
+    "@voyantjs/checkout-react": "workspace:*",
+    "@voyantjs/finance": "workspace:*",
+    "@voyantjs/finance-react": "workspace:*",
+    "@voyantjs/ui": "workspace:*",
+    "@tanstack/react-query": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^2.0.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.96.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@voyantjs/checkout": "workspace:*",
+    "@voyantjs/checkout-react": "workspace:*",
+    "@voyantjs/finance": "workspace:*",
+    "@voyantjs/finance-react": "workspace:*",
+    "@voyantjs/ui": "workspace:*",
+    "@voyantjs/voyant-typescript-config": "workspace:*",
+    "lucide-react": "^0.475.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "sonner": "^2.0.7",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2"
+  },
+  "files": [
+    "dist",
+    "src/styles.css"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "default": "./dist/index.js"
+      },
+      "./styles.css": {
+        "default": "./src/styles.css"
+      },
+      "./components/*": {
+        "types": "./dist/components/*.d.ts",
+        "import": "./dist/components/*.js",
+        "default": "./dist/components/*.js"
+      }
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  }
+}

package/src/styles.css

@@ -0,0 +1 @@
+/* @voyantjs/payments-ui — placeholder for any payments-domain CSS. */