@sudobility/consumables_pages 0.0.44 → 0.0.45

package/dist/CreditPaywallDialog.d.ts

@@ -0,0 +1,15 @@
+import { CreditPaywallDialogProps } from './types';
+/**
+ * Renders a centred modal containing the credit store, with the heading
+ * saying why it appeared.
+ *
+ * The shell is hand-rolled rather than taken from a component library,
+ * matching the rest of this package: it depends on `@sudobility/design` alone,
+ * so it drops into any consumer without dragging a UI framework behind it.
+ * That means it owns the behaviours a dialog is expected to have -- Escape to
+ * dismiss, a click on the backdrop to dismiss, focus moved in on open and
+ * returned on close, and a labelled `role="dialog"`.
+ *
+ * @param props - See {@link CreditPaywallDialogProps} for full prop documentation.
+ */
+export declare function CreditPaywallDialog({ isOpen, onClose, isAuthenticated, balance, packages, isLoading, isPurchasing, error, onPurchase, onLoginClick, labels, formatters, className, }: CreditPaywallDialogProps): import("react").JSX.Element | null;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { CreditStorePage } from './CreditStorePage';
+export { CreditPaywallDialog } from './CreditPaywallDialog';
 export { PurchaseHistoryPage } from './PurchaseHistoryPage';
 export { UsageHistoryPage } from './UsageHistoryPage';
 export { CreditBalanceBadge } from './CreditBalanceBadge';
-export type { CreditStorePageProps, CreditStorePageLabels, CreditStorePageFormatters, PurchaseHistoryPageProps, PurchaseHistoryPageLabels, PurchaseHistoryPageFormatters, UsageHistoryPageProps, UsageHistoryPageLabels, UsageHistoryPageFormatters, CreditBalanceBadgeProps, } from './types';
+export type { CreditStorePageProps, CreditStorePageLabels, CreditStorePageFormatters, CreditPaywallDialogProps, CreditPaywallDialogLabels, PurchaseHistoryPageProps, PurchaseHistoryPageLabels, PurchaseHistoryPageFormatters, UsageHistoryPageProps, UsageHistoryPageLabels, UsageHistoryPageFormatters, CreditBalanceBadgeProps, } from './types';
 export type { ConsumableSource } from '@sudobility/types';

package/dist/index.js

@@ -1,5 +1,6 @@
-import { jsx as e, jsxs as d, Fragment as p } from "react/jsx-runtime";
-const k = {
+import { jsx as e, jsxs as d, Fragment as v } from "react/jsx-runtime";
+import { useRef as C, useEffect as D } from "react";
+const y = {
   button: {
     // Primary button - main brand actions
     primary: {
@@ -203,23 +204,23 @@ const k = {
       icon: "text-red-600 dark:text-red-400"
     }
   }
-}, v = {
+}, S = {
   get button() {
-    return k.button;
+    return y.button;
   },
   get card() {
-    return k.card;
+    return y.card;
   },
   get badge() {
-    return k.badge;
+    return y.badge;
   },
   get alert() {
-    return k.alert;
+    return y.alert;
   }
 }, t = {
   // Component-specific colors (use for components)
-  component: v
-}, r = (n, l) => l, i = {
+  component: S
+}, r = (n, i) => i, l = {
   // Border utilities (theme-aware getter)
   get border() {
     return {
@@ -277,7 +278,7 @@ const k = {
     };
   }
 };
-function y() {
+function $() {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -294,22 +295,22 @@ function y() {
     }
   );
 }
-function N({
+function B({
   isAuthenticated: n,
-  balance: l,
-  packages: g,
-  isLoading: c,
-  isPurchasing: u,
+  balance: i,
+  packages: s,
+  isLoading: b,
+  isPurchasing: f,
   error: o,
   onPurchase: x,
-  onLoginClick: f,
-  labels: b,
+  onLoginClick: h,
+  labels: c,
   formatters: a,
-  className: h
+  className: m
 }) {
-  return /* @__PURE__ */ d("div", { className: h, children: [
-    /* @__PURE__ */ e("h1", { className: "text-2xl font-bold mb-6 text-foreground", children: b.title }),
-    n && l !== null && /* @__PURE__ */ d(
+  return /* @__PURE__ */ d("div", { className: m, children: [
+    c.title !== "" && /* @__PURE__ */ e("h1", { className: "text-2xl font-bold mb-6 text-foreground", children: c.title }),
+    n && i !== null && /* @__PURE__ */ d(
       "div",
       {
         className: `mb-8 p-4 rounded-lg border ${t.component.alert.info.base} ${t.component.alert.info.dark}`,
@@ -318,10 +319,10 @@ function N({
             "p",
             {
               className: `text-sm font-medium ${t.component.alert.info.icon}`,
-              children: b.currentBalanceLabel
+              children: c.currentBalanceLabel
             }
           ),
-          /* @__PURE__ */ e("p", { className: "text-3xl font-bold", children: a.formatCredits(l) })
+          /* @__PURE__ */ e("p", { className: "text-3xl font-bold", children: a.formatCredits(i) })
         ]
       }
     ),
@@ -331,7 +332,7 @@ function N({
         className: `mb-6 p-4 rounded-lg border ${t.component.alert.error.base} ${t.component.alert.error.dark}`,
         role: "alert",
         children: [
-          /* @__PURE__ */ e("p", { className: "text-sm font-medium", children: b.errorTitle }),
+          /* @__PURE__ */ e("p", { className: "text-sm font-medium", children: c.errorTitle }),
           /* @__PURE__ */ e("p", { className: `text-sm ${t.component.alert.error.icon}`, children: o })
         ]
       }
@@ -341,100 +342,191 @@ function N({
       {
         className: `mb-6 p-4 rounded-lg border ${t.component.alert.warning.base} ${t.component.alert.warning.dark}`,
         children: [
-          /* @__PURE__ */ e("p", { className: "text-sm", children: b.loginRequired }),
+          /* @__PURE__ */ e("p", { className: "text-sm", children: c.loginRequired }),
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: f,
+              onClick: h,
               className: `mt-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${t.component.button.primary.base} ${t.component.button.primary.dark}`,
-              children: b.loginButton ?? "Log in"
+              children: c.loginButton ?? "Log in"
             }
           )
         ]
       }
     ),
-    c && /* @__PURE__ */ e(y, {}),
-    !c && g.length === 0 && /* @__PURE__ */ e("p", { className: `${i.text.muted} text-center py-8`, children: b.noProducts }),
-    !c && g.length > 0 && /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: g.map((m) => /* @__PURE__ */ e(
+    b && /* @__PURE__ */ e($, {}),
+    !b && s.length === 0 && /* @__PURE__ */ e("p", { className: `${l.text.muted} text-center py-8`, children: c.noProducts }),
+    !b && s.length > 0 && /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: s.map((u) => /* @__PURE__ */ e(
       "div",
       {
         className: `p-6 rounded-xl border shadow-sm hover:shadow-md transition-shadow ${t.component.card.default.base} ${t.component.card.default.dark}`,
         children: /* @__PURE__ */ d("div", { className: "text-center", children: [
-          /* @__PURE__ */ e("p", { className: "text-3xl font-bold text-foreground", children: a.formatCredits(m.credits) }),
-          a.getPackageDescription && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mt-1", children: a.getPackageDescription(m.packageId) }),
+          /* @__PURE__ */ e("p", { className: "text-3xl font-bold text-foreground", children: a.formatCredits(u.credits) }),
+          a.getPackageDescription && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mt-1", children: a.getPackageDescription(u.packageId) }),
           /* @__PURE__ */ e(
             "p",
             {
               className: `text-xl font-semibold mt-3 ${t.component.alert.info.icon}`,
-              children: m.priceString
+              children: u.priceString
             }
           ),
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => x(m.packageId),
-              disabled: u || !n,
+              onClick: () => x(u.packageId),
+              disabled: f || !n,
               className: `mt-4 w-full px-4 py-2.5 font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 ${t.component.button.primary.base} ${t.component.button.primary.dark}`,
-              children: u ? b.purchasingButton : b.purchaseButton
+              children: f ? c.purchasingButton : c.purchaseButton
             }
           )
         ] })
       },
-      m.packageId
+      u.packageId
     )) })
   ] });
 }
-function w({
+function P({
+  isOpen: n,
+  onClose: i,
+  isAuthenticated: s,
+  balance: b,
+  packages: f,
+  isLoading: o,
+  isPurchasing: x,
+  error: h,
+  onPurchase: c,
+  onLoginClick: a,
+  labels: m,
+  formatters: u,
+  className: g
+}) {
+  const N = C(null), w = C(null);
+  return D(() => {
+    if (!n) return;
+    w.current = document.activeElement, N.current?.focus();
+    const p = (k) => {
+      k.key === "Escape" && i();
+    };
+    return document.addEventListener("keydown", p), () => {
+      document.removeEventListener("keydown", p);
+      const k = w.current;
+      k instanceof HTMLElement && k.focus();
+    };
+  }, [n, i]), n ? /* @__PURE__ */ d(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+      onMouseDown: (p) => {
+        p.target === p.currentTarget && i();
+      },
+      children: [
+        /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-black/50", "aria-hidden": "true" }),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            ref: N,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "credit-paywall-title",
+            tabIndex: -1,
+            className: `relative w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-xl border p-6 shadow-lg outline-none ${t.component.card.default.base} ${t.component.card.default.dark} ${l.border.default} ${g ?? ""}`,
+            children: [
+              /* @__PURE__ */ d("div", { className: "flex items-start justify-between gap-4 mb-4", children: [
+                /* @__PURE__ */ d("div", { children: [
+                  /* @__PURE__ */ e(
+                    "h2",
+                    {
+                      id: "credit-paywall-title",
+                      className: "text-2xl font-bold text-foreground",
+                      children: m.paywallTitle
+                    }
+                  ),
+                  m.paywallMessage && /* @__PURE__ */ e("p", { className: `mt-2 text-sm ${l.text.muted}`, children: m.paywallMessage })
+                ] }),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: i,
+                    "aria-label": m.closeLabel,
+                    className: `shrink-0 rounded-lg px-2 py-1 text-xl leading-none transition-colors ${l.text.muted} hover:text-foreground`,
+                    children: "×"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                B,
+                {
+                  isAuthenticated: s,
+                  balance: b,
+                  packages: f,
+                  isLoading: o,
+                  isPurchasing: x,
+                  error: h,
+                  onPurchase: c,
+                  onLoginClick: a,
+                  labels: { ...m, title: "" },
+                  formatters: u
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) : null;
+}
+function j({
   purchases: n,
-  isLoading: l,
-  error: g,
-  onLoadMore: c,
-  hasMore: u,
+  isLoading: i,
+  error: s,
+  onLoadMore: b,
+  hasMore: f,
   labels: o,
   formatters: x,
-  className: f,
-  emptyStateComponent: b
+  className: h,
+  emptyStateComponent: c
 }) {
-  return /* @__PURE__ */ d("div", { className: f, children: [
+  return /* @__PURE__ */ d("div", { className: h, children: [
     /* @__PURE__ */ e("h1", { className: "text-2xl font-bold mb-6 text-foreground", children: o.title }),
-    g && /* @__PURE__ */ e(
+    s && /* @__PURE__ */ e(
       "div",
       {
         className: `mb-4 p-3 rounded-lg border ${t.component.alert.error.base} ${t.component.alert.error.dark}`,
         role: "alert",
-        children: /* @__PURE__ */ e("p", { className: `text-sm ${t.component.alert.error.icon}`, children: g })
+        children: /* @__PURE__ */ e("p", { className: `text-sm ${t.component.alert.error.icon}`, children: s })
       }
     ),
-    l && /* @__PURE__ */ e(y, {}),
-    !l && n.length === 0 && /* @__PURE__ */ e(p, { children: b ?? /* @__PURE__ */ e("p", { className: `${i.text.muted} text-center py-8`, children: o.noRecords }) }),
-    !l && n.length > 0 && /* @__PURE__ */ d(p, { children: [
+    i && /* @__PURE__ */ e($, {}),
+    !i && n.length === 0 && /* @__PURE__ */ e(v, { children: c ?? /* @__PURE__ */ e("p", { className: `${l.text.muted} text-center py-8`, children: o.noRecords }) }),
+    !i && n.length > 0 && /* @__PURE__ */ d(v, { children: [
       /* @__PURE__ */ e("div", { className: "hidden sm:block overflow-x-auto", children: /* @__PURE__ */ d("table", { className: "w-full text-sm", "aria-label": o.title, children: [
-        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { className: `border-b ${i.border.default}`, children: [
+        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { className: `border-b ${l.border.default}`, children: [
           /* @__PURE__ */ e(
             "th",
             {
-              className: `text-left py-3 px-4 font-medium ${i.text.muted}`,
+              className: `text-left py-3 px-4 font-medium ${l.text.muted}`,
               children: o.columnDate
             }
           ),
           /* @__PURE__ */ e(
             "th",
             {
-              className: `text-right py-3 px-4 font-medium ${i.text.muted}`,
+              className: `text-right py-3 px-4 font-medium ${l.text.muted}`,
               children: o.columnCredits
             }
           ),
           /* @__PURE__ */ e(
             "th",
             {
-              className: `text-left py-3 px-4 font-medium ${i.text.muted}`,
+              className: `text-left py-3 px-4 font-medium ${l.text.muted}`,
               children: o.columnSource
             }
           ),
           /* @__PURE__ */ e(
             "th",
             {
-              className: `text-right py-3 px-4 font-medium ${i.text.muted}`,
+              className: `text-right py-3 px-4 font-medium ${l.text.muted}`,
               children: o.columnAmount
             }
           )
@@ -442,7 +534,7 @@ function w({
         /* @__PURE__ */ e("tbody", { children: n.map((a) => /* @__PURE__ */ d(
           "tr",
           {
-            className: `border-b ${i.border.subtle} hover:bg-accent`,
+            className: `border-b ${l.border.subtle} hover:bg-accent`,
             children: [
               /* @__PURE__ */ e("td", { className: "py-3 px-4 text-foreground", children: x.formatDate(a.created_at) }),
               /* @__PURE__ */ d("td", { className: "py-3 px-4 text-right font-medium text-success", children: [
@@ -486,127 +578,127 @@ function w({
         },
         a.id
       )) }),
-      u && c && /* @__PURE__ */ e("div", { className: "mt-4 text-center", children: /* @__PURE__ */ e(
+      f && b && /* @__PURE__ */ e("div", { className: "mt-4 text-center", children: /* @__PURE__ */ e(
         "button",
         {
-          onClick: c,
-          className: `px-4 py-2 text-sm font-medium ${i.text.link}`,
+          onClick: b,
+          className: `px-4 py-2 text-sm font-medium ${l.text.link}`,
           children: o.loadMore
         }
       ) })
     ] })
   ] });
 }
-function C({
+function E({
   usages: n,
-  isLoading: l,
-  error: g,
-  onLoadMore: c,
-  hasMore: u,
+  isLoading: i,
+  error: s,
+  onLoadMore: b,
+  hasMore: f,
   labels: o,
   formatters: x,
-  className: f,
-  emptyStateComponent: b
+  className: h,
+  emptyStateComponent: c
 }) {
-  const a = (s) => s.reference || s.filename || "-", h = (s) => s.credits ?? 1, m = o.columnCredits !== void 0;
-  return /* @__PURE__ */ d("div", { className: f, children: [
+  const a = (g) => g.reference || g.filename || "-", m = (g) => g.credits ?? 1, u = o.columnCredits !== void 0;
+  return /* @__PURE__ */ d("div", { className: h, children: [
     /* @__PURE__ */ e("h1", { className: "text-2xl font-bold mb-6 text-foreground", children: o.title }),
-    g && /* @__PURE__ */ e(
+    s && /* @__PURE__ */ e(
       "div",
       {
         className: `mb-4 p-3 rounded-lg border ${t.component.alert.error.base} ${t.component.alert.error.dark}`,
         role: "alert",
-        children: /* @__PURE__ */ e("p", { className: `text-sm ${t.component.alert.error.icon}`, children: g })
+        children: /* @__PURE__ */ e("p", { className: `text-sm ${t.component.alert.error.icon}`, children: s })
       }
     ),
-    l && /* @__PURE__ */ e(y, {}),
-    !l && n.length === 0 && /* @__PURE__ */ e(p, { children: b ?? /* @__PURE__ */ e("p", { className: `${i.text.muted} text-center py-8`, children: o.noRecords }) }),
-    !l && n.length > 0 && /* @__PURE__ */ d(p, { children: [
+    i && /* @__PURE__ */ e($, {}),
+    !i && n.length === 0 && /* @__PURE__ */ e(v, { children: c ?? /* @__PURE__ */ e("p", { className: `${l.text.muted} text-center py-8`, children: o.noRecords }) }),
+    !i && n.length > 0 && /* @__PURE__ */ d(v, { children: [
       /* @__PURE__ */ e("div", { className: "hidden sm:block overflow-x-auto", children: /* @__PURE__ */ d("table", { className: "w-full text-sm", "aria-label": o.title, children: [
-        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { className: `border-b ${i.border.default}`, children: [
+        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { className: `border-b ${l.border.default}`, children: [
           /* @__PURE__ */ e(
             "th",
             {
-              className: `text-left py-3 px-4 font-medium ${i.text.muted}`,
+              className: `text-left py-3 px-4 font-medium ${l.text.muted}`,
               children: o.columnDate
             }
           ),
           /* @__PURE__ */ e(
             "th",
             {
-              className: `text-left py-3 px-4 font-medium ${i.text.muted}`,
+              className: `text-left py-3 px-4 font-medium ${l.text.muted}`,
               children: o.columnFilename
             }
           ),
-          m && /* @__PURE__ */ e(
+          u && /* @__PURE__ */ e(
             "th",
             {
-              className: `text-right py-3 px-4 font-medium ${i.text.muted}`,
+              className: `text-right py-3 px-4 font-medium ${l.text.muted}`,
               children: o.columnCredits
             }
           )
         ] }) }),
-        /* @__PURE__ */ e("tbody", { children: n.map((s) => /* @__PURE__ */ d(
+        /* @__PURE__ */ e("tbody", { children: n.map((g) => /* @__PURE__ */ d(
           "tr",
           {
-            className: `border-b ${i.border.subtle} hover:bg-accent`,
+            className: `border-b ${l.border.subtle} hover:bg-accent`,
             children: [
-              /* @__PURE__ */ e("td", { className: "py-3 px-4 text-foreground", children: x.formatDate(s.created_at) }),
-              /* @__PURE__ */ e("td", { className: "py-3 px-4 text-muted-foreground", children: a(s) }),
-              m && /* @__PURE__ */ e("td", { className: "py-3 px-4 text-right text-foreground tabular-nums", children: h(s) })
+              /* @__PURE__ */ e("td", { className: "py-3 px-4 text-foreground", children: x.formatDate(g.created_at) }),
+              /* @__PURE__ */ e("td", { className: "py-3 px-4 text-muted-foreground", children: a(g) }),
+              u && /* @__PURE__ */ e("td", { className: "py-3 px-4 text-right text-foreground tabular-nums", children: m(g) })
             ]
           },
-          s.id
+          g.id
         )) })
       ] }) }),
-      /* @__PURE__ */ e("div", { className: "sm:hidden space-y-3", children: n.map((s) => /* @__PURE__ */ d(
+      /* @__PURE__ */ e("div", { className: "sm:hidden space-y-3", children: n.map((g) => /* @__PURE__ */ d(
         "div",
         {
           className: `p-4 rounded-lg border ${t.component.card.default.base} ${t.component.card.default.dark}`,
           children: [
-            /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: x.formatDate(s.created_at) }),
-            /* @__PURE__ */ e("p", { className: "text-sm text-foreground font-medium", children: a(s) }),
-            m && /* @__PURE__ */ d("p", { className: "text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: x.formatDate(g.created_at) }),
+            /* @__PURE__ */ e("p", { className: "text-sm text-foreground font-medium", children: a(g) }),
+            u && /* @__PURE__ */ d("p", { className: "text-sm text-muted-foreground", children: [
               o.columnCredits,
               ": ",
-              h(s)
+              m(g)
             ] })
           ]
         },
-        s.id
+        g.id
       )) }),
-      u && c && /* @__PURE__ */ e("div", { className: "mt-4 text-center", children: /* @__PURE__ */ e(
+      f && b && /* @__PURE__ */ e("div", { className: "mt-4 text-center", children: /* @__PURE__ */ e(
         "button",
         {
-          onClick: c,
-          className: `px-4 py-2 text-sm font-medium ${i.text.link}`,
+          onClick: b,
+          className: `px-4 py-2 text-sm font-medium ${l.text.link}`,
           children: o.loadMore
         }
       ) })
     ] })
   ] });
 }
-function S({
+function M({
   balance: n,
-  isLoading: l,
-  onClick: g,
-  className: c
+  isLoading: i,
+  onClick: s,
+  className: b
 }) {
-  return l ? /* @__PURE__ */ e(
+  return i ? /* @__PURE__ */ e(
     "span",
     {
-      className: `inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium ${i.text.muted} ${c || ""}`,
+      className: `inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium ${l.text.muted} ${b || ""}`,
       role: "status",
       "aria-label": "Loading balance",
       "aria-busy": "true",
       children: /* @__PURE__ */ e("span", { className: "animate-pulse", children: "..." })
     }
   ) : n === null ? null : /* @__PURE__ */ d(
-    g ? "button" : "span",
+    s ? "button" : "span",
     {
-      onClick: g,
-      "aria-label": g ? `Credit balance: ${n}` : void 0,
-      className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${n > 0 ? `${t.component.badge.primary.base} ${t.component.badge.primary.dark}` : `${t.component.badge.error.base} ${t.component.badge.error.dark}`} ${g ? "cursor-pointer hover:opacity-80" : ""} ${c || ""}`,
+      onClick: s,
+      "aria-label": s ? `Credit balance: ${n}` : void 0,
+      className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${n > 0 ? `${t.component.badge.primary.base} ${t.component.badge.primary.dark}` : `${t.component.badge.error.base} ${t.component.badge.error.dark}`} ${s ? "cursor-pointer hover:opacity-80" : ""} ${b || ""}`,
       children: [
         /* @__PURE__ */ e(
           "svg",
@@ -631,8 +723,9 @@ function S({
   );
 }
 export {
-  S as CreditBalanceBadge,
-  N as CreditStorePage,
-  w as PurchaseHistoryPage,
-  C as UsageHistoryPage
+  M as CreditBalanceBadge,
+  P as CreditPaywallDialog,
+  B as CreditStorePage,
+  j as PurchaseHistoryPage,
+  E as UsageHistoryPage
 };

package/dist/types.d.ts

@@ -32,6 +32,22 @@ export interface CreditStorePageProps {
     formatters: CreditStorePageFormatters;
     className?: string;
 }
+/** Localizable label strings for the CreditPaywallDialog component. */
+export interface CreditPaywallDialogLabels extends CreditStorePageLabels {
+    /** The dialog's heading: why it appeared, not what it contains. */
+    paywallTitle: string;
+    /** A sentence under the heading, explaining what was refused. */
+    paywallMessage?: string;
+    /** Accessible name for the close control. */
+    closeLabel: string;
+}
+/** Props for the CreditPaywallDialog component. */
+export interface CreditPaywallDialogProps extends Omit<CreditStorePageProps, 'labels' | 'className'> {
+    isOpen: boolean;
+    onClose: () => void;
+    labels: CreditPaywallDialogLabels;
+    className?: string;
+}
 /** Localizable label strings for the PurchaseHistoryPage component. */
 export interface PurchaseHistoryPageLabels {
     title: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/consumables_pages",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "description": "Web UI components for consumable credits (credit store, purchase history, usage history)",
   "type": "module",
   "main": "./dist/index.js",