@monetizekit/react 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +423 -107
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +66 -7
  4. package/dist/index.d.ts +66 -7
  5. package/dist/index.js +417 -108
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -1
package/dist/index.js CHANGED
@@ -45,7 +45,13 @@ var THEME_PRESETS = {
45
45
  colorPrimaryForeground: "#ffffff",
46
46
  colorAccent: "#10b981",
47
47
  colorBorder: "#e4e4e7",
48
+ colorCard: "#ffffff",
49
+ colorCardForeground: "#0a0a0a",
50
+ colorSuccess: "#16a34a",
51
+ colorWarning: "#d97706",
52
+ colorDanger: "#dc2626",
48
53
  radius: "0.5rem",
54
+ shadow: "0 1px 3px rgba(0,0,0,0.1)",
49
55
  fontFamily: "system-ui, -apple-system, sans-serif"
50
56
  },
51
57
  dark: {
@@ -56,7 +62,13 @@ var THEME_PRESETS = {
56
62
  colorPrimaryForeground: "#0a0a0a",
57
63
  colorAccent: "#10b981",
58
64
  colorBorder: "#27272a",
65
+ colorCard: "#18181b",
66
+ colorCardForeground: "#fafafa",
67
+ colorSuccess: "#22c55e",
68
+ colorWarning: "#f59e0b",
69
+ colorDanger: "#ef4444",
59
70
  radius: "0.5rem",
71
+ shadow: "0 1px 3px rgba(0,0,0,0.4)",
60
72
  fontFamily: "system-ui, -apple-system, sans-serif"
61
73
  },
62
74
  memphis: {
@@ -67,7 +79,13 @@ var THEME_PRESETS = {
67
79
  colorPrimaryForeground: "#1a1a1a",
68
80
  colorAccent: "#00D9FF",
69
81
  colorBorder: "#1a1a1a",
82
+ colorCard: "#ffffff",
83
+ colorCardForeground: "#1a1a1a",
84
+ colorSuccess: "#00C853",
85
+ colorWarning: "#FFB400",
86
+ colorDanger: "#FF3B30",
70
87
  radius: "0",
88
+ shadow: "4px 4px 0 #1a1a1a",
71
89
  fontFamily: "system-ui, -apple-system, sans-serif"
72
90
  },
73
91
  dashboard: {
@@ -78,10 +96,119 @@ var THEME_PRESETS = {
78
96
  colorPrimaryForeground: "oklch(0.985 0 0)",
79
97
  colorAccent: "oklch(0.97 0 0)",
80
98
  colorBorder: "oklch(0.922 0 0)",
99
+ colorCard: "oklch(1 0 0)",
100
+ colorCardForeground: "oklch(0.145 0 0)",
101
+ colorSuccess: "#16a34a",
102
+ colorWarning: "#d97706",
103
+ colorDanger: "#dc2626",
81
104
  radius: "0.625rem",
105
+ shadow: "0 1px 2px rgba(0,0,0,0.06)",
82
106
  fontFamily: "Geist, system-ui, sans-serif"
107
+ },
108
+ console: {
109
+ colorBackground: "#0b0f14",
110
+ colorForeground: "#e6edf3",
111
+ colorMuted: "#8b949e",
112
+ colorPrimary: "#6366f1",
113
+ colorPrimaryForeground: "#ffffff",
114
+ colorAccent: "#00D9FF",
115
+ colorBorder: "#1f2630",
116
+ colorCard: "#11161d",
117
+ colorCardForeground: "#e6edf3",
118
+ colorSuccess: "#34d399",
119
+ colorWarning: "#fbbf24",
120
+ colorDanger: "#f87171",
121
+ radius: "0.625rem",
122
+ shadow: "0 8px 24px rgba(0,0,0,0.5)",
123
+ fontFamily: "Geist, system-ui, sans-serif"
124
+ },
125
+ midnight: {
126
+ colorBackground: "#0f172a",
127
+ colorForeground: "#e2e8f0",
128
+ colorMuted: "#94a3b8",
129
+ colorPrimary: "#818cf8",
130
+ colorPrimaryForeground: "#0f172a",
131
+ colorAccent: "#38bdf8",
132
+ colorBorder: "#1e293b",
133
+ colorCard: "#1e293b",
134
+ colorCardForeground: "#e2e8f0",
135
+ colorSuccess: "#4ade80",
136
+ colorWarning: "#facc15",
137
+ colorDanger: "#fb7185",
138
+ radius: "0.75rem",
139
+ shadow: "0 10px 30px rgba(2,6,23,0.6)",
140
+ fontFamily: "system-ui, -apple-system, sans-serif"
141
+ },
142
+ ocean: {
143
+ colorBackground: "#f0fdfa",
144
+ colorForeground: "#0f3d3e",
145
+ colorMuted: "#5b7c7d",
146
+ colorPrimary: "#0d9488",
147
+ colorPrimaryForeground: "#ffffff",
148
+ colorAccent: "#06b6d4",
149
+ colorBorder: "#99f6e4",
150
+ colorCard: "#ffffff",
151
+ colorCardForeground: "#0f3d3e",
152
+ colorSuccess: "#059669",
153
+ colorWarning: "#d97706",
154
+ colorDanger: "#e11d48",
155
+ radius: "0.75rem",
156
+ shadow: "0 4px 14px rgba(13,148,136,0.15)",
157
+ fontFamily: "system-ui, -apple-system, sans-serif"
158
+ },
159
+ forest: {
160
+ colorBackground: "#f7fee7",
161
+ colorForeground: "#1a2e05",
162
+ colorMuted: "#5c6b47",
163
+ colorPrimary: "#4d7c0f",
164
+ colorPrimaryForeground: "#ffffff",
165
+ colorAccent: "#65a30d",
166
+ colorBorder: "#d9f99d",
167
+ colorCard: "#ffffff",
168
+ colorCardForeground: "#1a2e05",
169
+ colorSuccess: "#16a34a",
170
+ colorWarning: "#ca8a04",
171
+ colorDanger: "#dc2626",
172
+ radius: "0.5rem",
173
+ shadow: "0 4px 14px rgba(77,124,15,0.12)",
174
+ fontFamily: "system-ui, -apple-system, sans-serif"
175
+ },
176
+ sunset: {
177
+ colorBackground: "#fff7ed",
178
+ colorForeground: "#431407",
179
+ colorMuted: "#9a6b4f",
180
+ colorPrimary: "#ea580c",
181
+ colorPrimaryForeground: "#ffffff",
182
+ colorAccent: "#f43f5e",
183
+ colorBorder: "#fed7aa",
184
+ colorCard: "#ffffff",
185
+ colorCardForeground: "#431407",
186
+ colorSuccess: "#16a34a",
187
+ colorWarning: "#d97706",
188
+ colorDanger: "#e11d48",
189
+ radius: "1rem",
190
+ shadow: "0 6px 20px rgba(234,88,12,0.15)",
191
+ fontFamily: "system-ui, -apple-system, sans-serif"
192
+ },
193
+ grape: {
194
+ colorBackground: "#faf5ff",
195
+ colorForeground: "#2e1065",
196
+ colorMuted: "#7c6f93",
197
+ colorPrimary: "#7c3aed",
198
+ colorPrimaryForeground: "#ffffff",
199
+ colorAccent: "#d946ef",
200
+ colorBorder: "#e9d5ff",
201
+ colorCard: "#ffffff",
202
+ colorCardForeground: "#2e1065",
203
+ colorSuccess: "#16a34a",
204
+ colorWarning: "#d97706",
205
+ colorDanger: "#dc2626",
206
+ radius: "0.875rem",
207
+ shadow: "0 6px 20px rgba(124,58,237,0.15)",
208
+ fontFamily: "system-ui, -apple-system, sans-serif"
83
209
  }
84
210
  };
211
+ var THEME_PRESET_NAMES = Object.keys(THEME_PRESETS);
85
212
  function resolveTokens(appearance = "light") {
86
213
  if (typeof appearance === "string") {
87
214
  return THEME_PRESETS[appearance];
@@ -97,7 +224,13 @@ var TOKEN_TO_CSS_VAR = {
97
224
  colorPrimaryForeground: "--mk-primary-fg",
98
225
  colorAccent: "--mk-accent",
99
226
  colorBorder: "--mk-border",
227
+ colorCard: "--mk-card",
228
+ colorCardForeground: "--mk-card-fg",
229
+ colorSuccess: "--mk-success",
230
+ colorWarning: "--mk-warning",
231
+ colorDanger: "--mk-danger",
100
232
  radius: "--mk-radius",
233
+ shadow: "--mk-shadow",
101
234
  fontFamily: "--mk-font"
102
235
  };
103
236
  function tokensToStyle(tokens) {
@@ -256,6 +389,99 @@ function describeUsageTerm(term, locale) {
256
389
  }
257
390
  return parts.join(", ");
258
391
  }
392
+
393
+ // src/lib/sample-data.ts
394
+ var SAMPLE_PLANS = [
395
+ {
396
+ id: "sample_free",
397
+ name: "Starter",
398
+ description: "Evaluate the platform and model your catalog",
399
+ pricing: [{ type: "flat", amount: 0, currency: "USD", interval: "monthly" }],
400
+ entitlements: [
401
+ { featureKey: "max_customers", featureDisplayName: "Tracked customers", type: "limit", value: 100 },
402
+ { featureKey: "api_access", featureDisplayName: "REST & GraphQL API", type: "boolean", value: true },
403
+ { featureKey: "metering", featureDisplayName: "Usage metering", type: "boolean", value: true }
404
+ ]
405
+ },
406
+ {
407
+ id: "sample_pro",
408
+ name: "Growth",
409
+ description: "Product-led monetization at scale",
410
+ pricing: [{ type: "flat", amount: 49900, currency: "USD", interval: "monthly" }],
411
+ entitlements: [
412
+ { featureKey: "max_customers", featureDisplayName: "Tracked customers", type: "limit", value: 1e4 },
413
+ { featureKey: "stripe", featureDisplayName: "Stripe integration", type: "boolean", value: true },
414
+ { featureKey: "experiments", featureDisplayName: "Experiments & A/B testing", type: "boolean", value: true },
415
+ { featureKey: "widgets", featureDisplayName: "Embeddable widgets", type: "boolean", value: true }
416
+ ]
417
+ },
418
+ {
419
+ id: "sample_scale",
420
+ name: "Scale",
421
+ description: "Volume-based capacity pricing",
422
+ pricing: [
423
+ { type: "flat", amount: 99900, currency: "USD", interval: "monthly" },
424
+ {
425
+ type: "usage",
426
+ amount: 0,
427
+ currency: "USD",
428
+ interval: "monthly",
429
+ meterId: "sample_mtc",
430
+ meterDisplayName: "Tracked customers",
431
+ includedUnits: 25e3,
432
+ tierMode: "graduated",
433
+ tieredPricing: [
434
+ { upTo: 1e5, unitPrice: 0.012 },
435
+ { upTo: null, unitPrice: 6e-3 }
436
+ ]
437
+ }
438
+ ],
439
+ entitlements: [
440
+ { featureKey: "everything_pro", featureDisplayName: "Everything in Growth", type: "boolean", value: true },
441
+ { featureKey: "approvals", featureDisplayName: "Approval workflows", type: "boolean", value: true }
442
+ ]
443
+ },
444
+ {
445
+ id: "sample_enterprise",
446
+ name: "Enterprise",
447
+ description: "Governance, scale, and advanced controls",
448
+ tags: ["contact_sales"],
449
+ pricing: [],
450
+ entitlements: [
451
+ { featureKey: "sso", featureDisplayName: "SSO / SAML", type: "boolean", value: true },
452
+ { featureKey: "sla", featureDisplayName: "Custom SLA", type: "boolean", value: true }
453
+ ]
454
+ }
455
+ ];
456
+ var SAMPLE_USAGE = {
457
+ api_calls: { meterId: "api_calls", current: 72e3, limit: 1e5 },
458
+ seats: { meterId: "seats", current: 8, limit: 10 },
459
+ storage_gb: { meterId: "storage_gb", current: 3, limit: 10 }
460
+ };
461
+ var SAMPLE_CREDITS = { balance: 12e4, currency: "USD" };
462
+ var SAMPLE_PORTAL = {
463
+ planName: "Growth",
464
+ meterIds: ["api_calls", "seats"]
465
+ };
466
+ var SAMPLE_NOTICE_TEXT = "Sample data for illustration only \u2014 define plans and products to show live values.";
467
+ var noticeStyle = {
468
+ display: "flex",
469
+ alignItems: "center",
470
+ gap: "0.5rem",
471
+ border: "1px dashed var(--mk-warning)",
472
+ borderRadius: "var(--mk-radius)",
473
+ background: "color-mix(in srgb, var(--mk-warning) 12%, transparent)",
474
+ color: "var(--mk-card-fg)",
475
+ fontFamily: "var(--mk-font)",
476
+ fontSize: "0.75rem",
477
+ padding: "0.5rem 0.75rem"
478
+ };
479
+ function SampleNotice({ children }) {
480
+ return /* @__PURE__ */ jsxs("div", { role: "note", "data-mk-component": "sample-notice", style: noticeStyle, children: [
481
+ /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "var(--mk-warning)", fontWeight: 700 }, children: "\u25CF" }),
482
+ /* @__PURE__ */ jsx("span", { children: children ?? SAMPLE_NOTICE_TEXT })
483
+ ] });
484
+ }
259
485
  var wrapperStyle = {
260
486
  display: "grid",
261
487
  gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
@@ -277,7 +503,9 @@ function PricingTable({
277
503
  highlightPlan,
278
504
  locale,
279
505
  onSelectPlan,
280
- onContactSales
506
+ onContactSales,
507
+ sampleWhenEmpty = true,
508
+ disclaimer
281
509
  }) {
282
510
  const { client, tokens } = useMonetizeKit();
283
511
  const [plans, setPlans] = useState(plansProp ?? null);
@@ -303,68 +531,84 @@ function PricingTable({
303
531
  if (!plans) {
304
532
  return /* @__PURE__ */ jsx("div", { "aria-busy": "true", style: { color: "var(--mk-muted)" }, children: "Loading pricing\u2026" });
305
533
  }
306
- return /* @__PURE__ */ jsx("div", { style: { ...tokensToStyle(tokens), ...wrapperStyle }, "data-mk-component": "pricing-table", children: plans.map((plan) => {
307
- const price = describePlanPrice(plan, locale);
308
- const highlighted = highlightPlan != null && plan.name.toLowerCase() === highlightPlan.toLowerCase();
309
- return /* @__PURE__ */ jsxs(
310
- "div",
311
- {
312
- style: {
313
- ...cardBase,
314
- borderColor: highlighted ? "var(--mk-primary)" : "var(--mk-border)",
315
- borderWidth: highlighted ? 2 : 1
316
- },
317
- "data-mk-plan": plan.name,
318
- "data-mk-highlighted": highlighted ? "true" : void 0,
319
- children: [
320
- highlighted ? /* @__PURE__ */ jsx(
321
- "span",
534
+ const isSample = plans.length === 0 && sampleWhenEmpty;
535
+ const effectivePlans = isSample ? SAMPLE_PLANS : plans;
536
+ if (effectivePlans.length === 0) {
537
+ return /* @__PURE__ */ jsx("div", { style: { color: "var(--mk-muted)" }, children: "No plans available." });
538
+ }
539
+ return /* @__PURE__ */ jsxs(
540
+ "div",
541
+ {
542
+ style: { ...tokensToStyle(tokens), display: "flex", flexDirection: "column", gap: "1rem" },
543
+ "data-mk-component": "pricing-table",
544
+ "data-mk-sample": isSample ? "true" : void 0,
545
+ children: [
546
+ isSample ? /* @__PURE__ */ jsx(SampleNotice, { children: disclaimer }) : null,
547
+ /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: effectivePlans.map((plan) => {
548
+ const price = describePlanPrice(plan, locale);
549
+ const highlighted = highlightPlan != null && plan.name.toLowerCase() === highlightPlan.toLowerCase();
550
+ return /* @__PURE__ */ jsxs(
551
+ "div",
322
552
  {
323
553
  style: {
324
- alignSelf: "flex-start",
325
- background: "var(--mk-primary)",
326
- color: "var(--mk-primary-fg)",
327
- borderRadius: "var(--mk-radius)",
328
- padding: "0.125rem 0.5rem",
329
- fontSize: "0.75rem",
330
- fontWeight: 600
554
+ ...cardBase,
555
+ borderColor: highlighted ? "var(--mk-primary)" : "var(--mk-border)",
556
+ borderWidth: highlighted ? 2 : 1
331
557
  },
332
- children: "Most Popular"
333
- }
334
- ) : null,
335
- /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 700 }, children: plan.name }),
336
- plan.description ? /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "var(--mk-muted)", fontSize: "0.875rem" }, children: plan.description }) : null,
337
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "0.375rem" }, children: [
338
- /* @__PURE__ */ jsx("span", { style: { fontSize: "2rem", fontWeight: 700 }, children: price.contactSales ? "Custom" : price.headline }),
339
- price.caption ? /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-muted)", fontSize: "0.875rem" }, children: price.caption }) : null
340
- ] }),
341
- plan.entitlements && plan.entitlements.length > 0 ? /* @__PURE__ */ jsx("ul", { style: { margin: 0, paddingLeft: "1rem", color: "var(--mk-fg)", fontSize: "0.875rem" }, children: plan.entitlements.slice(0, 6).map((e) => /* @__PURE__ */ jsxs("li", { children: [
342
- e.featureDisplayName,
343
- e.type !== "boolean" ? `: ${String(e.value)}` : ""
344
- ] }, e.featureKey)) }) : null,
345
- /* @__PURE__ */ jsx(
346
- "button",
347
- {
348
- type: "button",
349
- onClick: () => price.contactSales ? onContactSales?.(plan.id) : onSelectPlan?.(plan.id),
350
- style: {
351
- marginTop: "auto",
352
- background: "var(--mk-primary)",
353
- color: "var(--mk-primary-fg)",
354
- border: "none",
355
- borderRadius: "var(--mk-radius)",
356
- padding: "0.625rem 1rem",
357
- fontWeight: 600,
358
- cursor: "pointer"
359
- },
360
- children: price.contactSales ? "Contact Sales" : "Get started"
361
- }
362
- )
363
- ]
364
- },
365
- plan.id
366
- );
367
- }) });
558
+ "data-mk-plan": plan.name,
559
+ "data-mk-highlighted": highlighted ? "true" : void 0,
560
+ children: [
561
+ highlighted ? /* @__PURE__ */ jsx(
562
+ "span",
563
+ {
564
+ style: {
565
+ alignSelf: "flex-start",
566
+ background: "var(--mk-primary)",
567
+ color: "var(--mk-primary-fg)",
568
+ borderRadius: "var(--mk-radius)",
569
+ padding: "0.125rem 0.5rem",
570
+ fontSize: "0.75rem",
571
+ fontWeight: 600
572
+ },
573
+ children: "Most Popular"
574
+ }
575
+ ) : null,
576
+ /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 700 }, children: plan.name }),
577
+ plan.description ? /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "var(--mk-muted)", fontSize: "0.875rem" }, children: plan.description }) : null,
578
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "0.375rem" }, children: [
579
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "2rem", fontWeight: 700 }, children: price.contactSales ? "Custom" : price.headline }),
580
+ price.caption ? /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-muted)", fontSize: "0.875rem" }, children: price.caption }) : null
581
+ ] }),
582
+ plan.entitlements && plan.entitlements.length > 0 ? /* @__PURE__ */ jsx("ul", { style: { margin: 0, paddingLeft: "1rem", color: "var(--mk-fg)", fontSize: "0.875rem" }, children: plan.entitlements.slice(0, 6).map((e) => /* @__PURE__ */ jsxs("li", { children: [
583
+ e.featureDisplayName,
584
+ e.type !== "boolean" ? `: ${String(e.value)}` : ""
585
+ ] }, e.featureKey)) }) : null,
586
+ /* @__PURE__ */ jsx(
587
+ "button",
588
+ {
589
+ type: "button",
590
+ onClick: () => price.contactSales ? onContactSales?.(plan.id) : onSelectPlan?.(plan.id),
591
+ style: {
592
+ marginTop: "auto",
593
+ background: "var(--mk-primary)",
594
+ color: "var(--mk-primary-fg)",
595
+ border: "none",
596
+ borderRadius: "var(--mk-radius)",
597
+ padding: "0.625rem 1rem",
598
+ fontWeight: 600,
599
+ cursor: "pointer"
600
+ },
601
+ children: price.contactSales ? "Contact Sales" : "Get started"
602
+ }
603
+ )
604
+ ]
605
+ },
606
+ plan.id
607
+ );
608
+ }) })
609
+ ]
610
+ }
611
+ );
368
612
  }
369
613
  var overlayStyle = {
370
614
  border: "1px solid var(--mk-border)",
@@ -443,7 +687,7 @@ function UsageBanner({
443
687
  const fraction = hasLimit ? Math.min(1, current / limit) : 0;
444
688
  const over = hasLimit && current > limit;
445
689
  const warn = hasLimit && fraction >= warnAt;
446
- const barColor = over || warn ? "var(--mk-primary)" : "var(--mk-accent)";
690
+ const barColor = over ? "var(--mk-danger)" : warn ? "var(--mk-warning)" : "var(--mk-accent)";
447
691
  return /* @__PURE__ */ jsxs("div", { style: { ...tokensToStyle(tokens), ...bannerStyle }, "data-mk-component": "usage-banner", children: [
448
692
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "0.875rem" }, children: [
449
693
  /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: label }),
@@ -468,73 +712,138 @@ function UsageBanner({
468
712
  children: /* @__PURE__ */ jsx("div", { style: { width: `${fraction * 100}%`, height: "100%", background: barColor } })
469
713
  }
470
714
  ) : null,
471
- over ? /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-primary)", fontSize: "0.75rem" }, children: "Over included allotment \u2014 overage billed per usage pricing." }) : null
715
+ over ? /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-danger)", fontSize: "0.75rem" }, children: "Over included allotment \u2014 overage billed per usage pricing." }) : null
472
716
  ] });
473
717
  }
474
718
  var containerStyle = {
475
719
  border: "1px solid var(--mk-border)",
476
720
  borderRadius: "var(--mk-radius)",
477
721
  padding: "1.25rem",
478
- background: "var(--mk-bg)",
479
- color: "var(--mk-fg)",
722
+ background: "var(--mk-card)",
723
+ color: "var(--mk-card-fg)",
724
+ boxShadow: "var(--mk-shadow)",
480
725
  fontFamily: "var(--mk-font)",
481
726
  display: "flex",
482
727
  flexDirection: "column",
483
728
  gap: "1rem",
484
729
  maxWidth: 480
485
730
  };
731
+ var cardStyle = {
732
+ border: "1px solid var(--mk-border)",
733
+ borderRadius: "var(--mk-radius)",
734
+ padding: "0.875rem 1rem",
735
+ display: "flex",
736
+ flexDirection: "column",
737
+ gap: "0.5rem"
738
+ };
739
+ function SampleUsageRow({
740
+ label,
741
+ current,
742
+ limit,
743
+ locale
744
+ }) {
745
+ const hasLimit = typeof limit === "number" && limit > 0;
746
+ const fraction = hasLimit ? Math.min(1, current / limit) : 0;
747
+ const barColor = fraction >= 0.8 ? "var(--mk-warning)" : "var(--mk-accent)";
748
+ return /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
749
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "0.875rem" }, children: [
750
+ /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: label }),
751
+ /* @__PURE__ */ jsxs("span", { style: { color: "var(--mk-muted)" }, children: [
752
+ formatUnits(current, locale),
753
+ hasLimit ? ` / ${formatUnits(limit, locale)}` : ""
754
+ ] })
755
+ ] }),
756
+ hasLimit ? /* @__PURE__ */ jsx("div", { style: { height: 6, borderRadius: 999, background: "var(--mk-border)", overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { width: `${fraction * 100}%`, height: "100%", background: barColor } }) }) : null
757
+ ] });
758
+ }
486
759
  function CustomerPortal({
487
- planName = "Current plan",
488
- meterIds = [],
760
+ planName,
761
+ meterIds,
489
762
  showCredits = true,
763
+ sample = false,
764
+ disclaimer,
765
+ showBranding = false,
490
766
  locale,
491
767
  currency = "USD",
492
768
  onManageBilling
493
769
  }) {
494
770
  const { tokens } = useMonetizeKit();
495
771
  const credits = useCredits();
496
- return /* @__PURE__ */ jsxs("div", { style: { ...tokensToStyle(tokens), ...containerStyle }, "data-mk-component": "customer-portal", children: [
497
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
498
- /* @__PURE__ */ jsxs("div", { children: [
499
- /* @__PURE__ */ jsx("div", { style: { fontSize: "0.75rem", color: "var(--mk-muted)" }, children: "Plan" }),
500
- /* @__PURE__ */ jsx("div", { style: { fontSize: "1.125rem", fontWeight: 700 }, children: planName })
501
- ] }),
502
- /* @__PURE__ */ jsx(
503
- "button",
504
- {
505
- type: "button",
506
- onClick: onManageBilling,
507
- style: {
508
- background: "var(--mk-primary)",
509
- color: "var(--mk-primary-fg)",
510
- border: "none",
511
- borderRadius: "var(--mk-radius)",
512
- padding: "0.5rem 0.875rem",
513
- fontWeight: 600,
514
- cursor: "pointer"
515
- },
516
- children: "Manage billing"
517
- }
518
- )
519
- ] }),
520
- meterIds.map((meterId) => /* @__PURE__ */ jsx(UsageBanner, { meterId, label: meterId, locale }, meterId)),
521
- showCredits ? /* @__PURE__ */ jsxs(
522
- "div",
523
- {
524
- style: {
525
- border: "1px solid var(--mk-border)",
526
- borderRadius: "var(--mk-radius)",
527
- padding: "0.875rem 1rem",
528
- display: "flex",
529
- justifyContent: "space-between"
530
- },
531
- children: [
772
+ const resolvedPlanName = planName ?? (sample ? SAMPLE_PORTAL.planName : "Current plan");
773
+ const resolvedMeterIds = meterIds ?? (sample ? [...SAMPLE_PORTAL.meterIds] : []);
774
+ const creditBalance = sample ? SAMPLE_CREDITS.balance : credits.balance;
775
+ const creditCurrency = sample ? SAMPLE_CREDITS.currency : credits.currency;
776
+ const creditLoading = sample ? false : credits.loading;
777
+ return /* @__PURE__ */ jsxs(
778
+ "div",
779
+ {
780
+ style: { ...tokensToStyle(tokens), ...containerStyle },
781
+ "data-mk-component": "customer-portal",
782
+ "data-mk-sample": sample ? "true" : void 0,
783
+ children: [
784
+ sample ? /* @__PURE__ */ jsx(SampleNotice, { children: disclaimer }) : null,
785
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: "1rem" }, children: [
786
+ /* @__PURE__ */ jsxs("div", { children: [
787
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "0.75rem", color: "var(--mk-muted)" }, children: "Plan" }),
788
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginTop: "0.125rem" }, children: [
789
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "1.125rem", fontWeight: 700 }, children: resolvedPlanName }),
790
+ /* @__PURE__ */ jsx(
791
+ "span",
792
+ {
793
+ style: {
794
+ fontSize: "0.6875rem",
795
+ fontWeight: 600,
796
+ color: "var(--mk-success)",
797
+ border: "1px solid var(--mk-success)",
798
+ borderRadius: 999,
799
+ padding: "0.0625rem 0.5rem"
800
+ },
801
+ children: "Active"
802
+ }
803
+ )
804
+ ] })
805
+ ] }),
806
+ /* @__PURE__ */ jsx(
807
+ "button",
808
+ {
809
+ type: "button",
810
+ onClick: onManageBilling,
811
+ style: {
812
+ background: "var(--mk-primary)",
813
+ color: "var(--mk-primary-fg)",
814
+ border: "none",
815
+ borderRadius: "var(--mk-radius)",
816
+ padding: "0.5rem 0.875rem",
817
+ fontWeight: 600,
818
+ cursor: "pointer",
819
+ whiteSpace: "nowrap"
820
+ },
821
+ children: "Manage billing"
822
+ }
823
+ )
824
+ ] }),
825
+ sample ? resolvedMeterIds.map((meterId) => {
826
+ const usage = SAMPLE_USAGE[meterId];
827
+ if (!usage) return null;
828
+ return /* @__PURE__ */ jsx(
829
+ SampleUsageRow,
830
+ {
831
+ label: meterId,
832
+ current: usage.current,
833
+ limit: usage.limit,
834
+ locale
835
+ },
836
+ meterId
837
+ );
838
+ }) : resolvedMeterIds.map((meterId) => /* @__PURE__ */ jsx(UsageBanner, { meterId, label: meterId, locale }, meterId)),
839
+ showCredits ? /* @__PURE__ */ jsxs("div", { style: { ...cardStyle, flexDirection: "row", justifyContent: "space-between" }, children: [
532
840
  /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "0.875rem" }, children: "Credits" }),
533
- /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-muted)" }, children: credits.loading ? "\u2026" : formatMoney(credits.balance, credits.currency ?? currency, locale) })
534
- ]
535
- }
536
- ) : null
537
- ] });
841
+ /* @__PURE__ */ jsx("span", { style: { color: "var(--mk-muted)" }, children: creditLoading ? "\u2026" : formatMoney(creditBalance, creditCurrency ?? currency, locale) })
842
+ ] }) : null,
843
+ showBranding ? /* @__PURE__ */ jsx("div", { style: { textAlign: "center", fontSize: "0.625rem", color: "var(--mk-muted)" }, children: "Powered by MonetizeKit" }) : null
844
+ ]
845
+ }
846
+ );
538
847
  }
539
848
  function EntitlementGate({
540
849
  feature,
@@ -547,6 +856,6 @@ function EntitlementGate({
547
856
  return /* @__PURE__ */ jsx(Fragment, { children: allowed ? children : fallback });
548
857
  }
549
858
 
550
- export { CustomerPortal, EntitlementGate, MonetizeKitClient, MonetizeKitProvider, Paywall, PricingTable, THEME_PRESETS, UsageBanner, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };
859
+ export { CustomerPortal, EntitlementGate, MonetizeKitClient, MonetizeKitProvider, Paywall, PricingTable, SAMPLE_CREDITS, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_USAGE, SampleNotice, THEME_PRESETS, THEME_PRESET_NAMES, UsageBanner, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };
551
860
  //# sourceMappingURL=index.js.map
552
861
  //# sourceMappingURL=index.js.map