@crediball/react 0.1.0 → 0.2.0

package/dist/PaywallModal.d.ts

@@ -1,13 +1,36 @@
 import { type CSSProperties } from "react";
 import { type CrediballThemeOverrides } from "./theme";
+/** A purchasable credit bundle from the Crediball dashboard (returned by listPackages()). */
+export interface PackageOption {
+    id: string;
+    name: string;
+    price: number;
+    credits: number;
+}
 export interface PaywallModalProps extends CrediballThemeOverrides {
     open: boolean;
-    /** Top-up amounts to offer (host decides the meaning, e.g. euros). */
+    /**
+     * Preferred: pass the packages from `meter.listPackages()` so Crediball can
+     * resolve credits and record revenue automatically when the user checks out.
+     * The modal renders one button per package (e.g. "Starter — €5 / 10 cr").
+     */
+    packages?: PackageOption[];
+    /**
+     * Called when the user selects a package. Use this with `packages` — call
+     * `meter.topup({ userId, packageId: pkg.id })` in your backend. No `amount`
+     * calculation needed; Crediball derives it from the package.
+     */
+    onSelectPackage?: (pkg: PackageOption) => void;
+    /**
+     * Legacy: flat list of euro amounts. Prefer `packages` + `onSelectPackage`.
+     * When both are provided, `packages` takes precedence.
+     */
     amounts?: number[];
-    /** Prefix shown on each button before the amount (default "Add €"). */
+    /** Prefix shown on each legacy amount button (default "Add €"). */
     amountPrefix?: string;
     title?: string;
     description?: string;
+    /** Called when the user clicks a legacy amount button. */
     onAdd?: (amount: number) => void;
     onClose?: () => void;
     /** When true, show a free-form amount field in addition to the preset buttons. */
@@ -29,4 +52,4 @@ export interface PaywallModalProps extends CrediballThemeOverrides {
     currency?: string;
     style?: CSSProperties;
 }
-export declare function PaywallModal({ open, amounts, amountPrefix, title, description, onAdd, onClose, allowCustom, customMin, customMax, currencySymbol, balance, balanceRate, currency, accentColor, style, }: PaywallModalProps): import("react").JSX.Element | null;
+export declare function PaywallModal({ open, packages, onSelectPackage, amounts, amountPrefix, title, description, onAdd, onClose, allowCustom, customMin, customMax, currencySymbol, balance, balanceRate, currency, accentColor, style, }: PaywallModalProps): import("react").JSX.Element | null;

package/dist/PaywallModal.js

@@ -17,7 +17,7 @@ function fmtMoney(n, currency) {
         return `${n.toFixed(2)} ${currency}`;
     }
 }
-export function PaywallModal({ open, amounts = [5, 10], amountPrefix = "Add €", title = "You need more credits to continue.", description = "Top up to keep using this feature.", onAdd, onClose, allowCustom = false, customMin = 1, customMax, currencySymbol = "€", balance, balanceRate, currency = "EUR", accentColor = tokens.primary, style, }) {
+export function PaywallModal({ open, packages, onSelectPackage, amounts = [5, 10], amountPrefix = "Add €", title = "You need more credits to continue.", description = "Top up to keep using this feature.", onAdd, onClose, allowCustom = false, customMin = 1, customMax, currencySymbol = "€", balance, balanceRate, currency = "EUR", accentColor = tokens.primary, style, }) {
     // Stack the top-up buttons one-per-line on narrow (mobile) screens.
     const [narrow, setNarrow] = useState(false);
     const [customValue, setCustomValue] = useState("");
@@ -92,10 +92,12 @@ export function PaywallModal({ open, amounts = [5, 10], amountPrefix = "Add €"
                                 marginBottom: 4,
                             }, children: "Your balance" }), _jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }, children: [_jsxs("span", { style: { fontSize: 22, fontWeight: 600, color: tokens.ink }, children: [fmtCredits(balance), " credits"] }), balanceRate && balanceRate > 0 ? (_jsxs("span", { style: { fontSize: 13, color: tokens.inkMuted }, children: ["\u2248 ", fmtMoney(balance / balanceRate, currency)] })) : null] })] })), _jsx("h3", { style: { margin: 0, fontSize: 24, fontWeight: 600, color: tokens.ink, letterSpacing: "-0.01em" }, children: title }), _jsx("p", { style: { marginTop: 8, marginBottom: 0, fontSize: 14, color: tokens.inkMuted }, children: description }), _jsx("div", { style: {
                         display: "flex",
-                        flexDirection: narrow ? "column" : "row",
-                        gap: 12,
+                        flexDirection: "column",
+                        gap: 10,
                         marginTop: 24,
-                    }, children: amounts.map((amount) => (_jsxs("button", { onClick: () => onAdd?.(amount), style: buttonStyle, children: [amountPrefix, amount] }, amount))) }), allowCustom ? (_jsxs("div", { style: { marginTop: 12 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [_jsx("span", { style: { fontSize: 17, color: tokens.inkMuted }, children: currencySymbol }), _jsx("input", { value: customValue, onChange: (e) => setCustomValue(e.target.value), inputMode: "decimal", placeholder: String(customMin), style: {
+                    }, children: packages && packages.length > 0
+                        ? packages.map((pkg) => (_jsxs("button", { onClick: () => onSelectPackage?.(pkg), style: { ...buttonStyle, flex: "none", display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [_jsx("span", { children: pkg.name }), _jsxs("span", { style: { opacity: 0.85, fontSize: 14 }, children: [fmtMoney(pkg.price, currency), " \u00B7 ", fmtCredits(pkg.credits), " cr"] })] }, pkg.id)))
+                        : (_jsx("div", { style: { display: "flex", flexDirection: narrow ? "column" : "row", gap: 12 }, children: amounts.map((amount) => (_jsxs("button", { onClick: () => onAdd?.(amount), style: buttonStyle, children: [amountPrefix, amount] }, amount))) })) }), allowCustom ? (_jsxs("div", { style: { marginTop: 12 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [_jsx("span", { style: { fontSize: 17, color: tokens.inkMuted }, children: currencySymbol }), _jsx("input", { value: customValue, onChange: (e) => setCustomValue(e.target.value), inputMode: "decimal", placeholder: String(customMin), style: {
                                         flex: 1,
                                         minWidth: 0,
                                         appearance: "none",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Drop-in React components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",