@monetizekit/react 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -26,9 +26,13 @@ declare class MonetizeKitClient {
  * preset name, a partial token override, or both.
  *
  * Presets:
- *  - `memphis`   — the marketing site identity (coral/yellow/cyan, sharp corners)
- *  - `dashboard` — the app's neutral palette (rounded, muted)
- *  - `light` / `dark` — neutral defaults
+ *  - `light` / `dark`   — neutral defaults
+ *  - `memphis`          — the marketing site identity (coral/yellow/cyan, hard edges + hard shadow)
+ *  - `dashboard`        — the app's neutral palette (rounded, muted)
+ *  - `console`          — the dashboard "widgets" mock look: dark cards, emerald/amber/red
+ *                         semantics, soft elevation. Lets you reproduce the in-app preview style.
+ *  - `midnight`         — deep slate/indigo dark
+ *  - `ocean` / `forest` / `sunset` / `grape` — light brand palettes for variety
  */
 
 interface ThemeTokens {
@@ -39,11 +43,23 @@ interface ThemeTokens {
     colorPrimaryForeground: string;
     colorAccent: string;
     colorBorder: string;
+    /** Surface color for cards/panels layered on the background. */
+    colorCard: string;
+    /** Foreground used on top of `colorCard`. */
+    colorCardForeground: string;
+    /** Semantic colors for status (healthy / approaching limit / over limit). */
+    colorSuccess: string;
+    colorWarning: string;
+    colorDanger: string;
     radius: string;
+    /** Box-shadow applied to elevated surfaces (cards/portals). */
+    shadow: string;
     fontFamily: string;
 }
-type ThemePresetName = "light" | "dark" | "memphis" | "dashboard";
+type ThemePresetName = "light" | "dark" | "memphis" | "dashboard" | "console" | "midnight" | "ocean" | "forest" | "sunset" | "grape";
 declare const THEME_PRESETS: Record<ThemePresetName, ThemeTokens>;
+/** All preset names, useful for theme pickers / story matrices. */
+declare const THEME_PRESET_NAMES: ThemePresetName[];
 type Appearance = ThemePresetName | {
     preset?: ThemePresetName;
     tokens?: Partial<ThemeTokens>;
@@ -146,6 +162,21 @@ interface CreditBalance {
     balance: number;
     currency?: string;
 }
+interface TeamMember {
+    name: string;
+    email: string;
+    role: string;
+    avatarUrl?: string;
+}
+interface Invoice {
+    id: string;
+    /** ISO date string. */
+    date: string;
+    /** Amount in major currency units (e.g. dollars). */
+    amount: number;
+    currency: string;
+    status: "paid" | "pending" | "overdue";
+}
 
 interface PricingTableProps {
     /** Plans to render; if omitted, fetched live from the publishable-key API. */
@@ -157,8 +188,15 @@ interface PricingTableProps {
     onSelectPlan?: (planId: string) => void;
     /** Where the Contact Sales CTA links (defaults to no-op). */
     onContactSales?: (planId: string) => void;
+    /**
+     * When there are no plans to show, render illustrative sample plans behind a
+     * clear disclaimer instead of an empty table. Defaults to `true`.
+     */
+    sampleWhenEmpty?: boolean;
+    /** Override the sample-data disclaimer copy. */
+    disclaimer?: ReactNode;
 }
-declare function PricingTable({ plans: plansProp, highlightPlan, locale, onSelectPlan, onContactSales, }: PricingTableProps): react.JSX.Element;
+declare function PricingTable({ plans: plansProp, highlightPlan, locale, onSelectPlan, onContactSales, sampleWhenEmpty, disclaimer, }: PricingTableProps): react.JSX.Element;
 
 interface PaywallProps {
     /** Feature key gating the content. */
@@ -191,12 +229,31 @@ interface CustomerPortalProps {
     meterIds?: string[];
     /** Whether to show the credit balance card. */
     showCredits?: boolean;
+    /** Show a team/seats section. Defaults to on in `sample` mode. */
+    showTeam?: boolean;
+    teamMembers?: TeamMember[];
+    seats?: {
+        used: number;
+        max: number;
+    };
+    /** Show a billing-history (invoices) section. Defaults to on in `sample` mode. */
+    showInvoices?: boolean;
+    invoices?: Invoice[];
+    /**
+     * Render illustrative sample plan/usage/credit/team/invoice data behind a clear
+     * disclaimer. Use for previews or a fresh workspace with no plans/products yet.
+     */
+    sample?: boolean;
+    /** Override the sample-data disclaimer copy. */
+    disclaimer?: ReactNode;
+    /** Show the "Powered by MonetizeKit" footer. */
+    showBranding?: boolean;
     locale?: string;
     currency?: string;
     onManageBilling?: () => void;
 }
-/** A self-service portal: current plan, usage meters, and credit balance. */
-declare function CustomerPortal({ planName, meterIds, showCredits, locale, currency, onManageBilling, }: CustomerPortalProps): react.JSX.Element;
+/** A self-service portal: plan, usage, credits, team, and invoices. */
+declare function CustomerPortal({ planName, meterIds, showCredits, showTeam, teamMembers, seats, showInvoices, invoices, sample, disclaimer, showBranding, locale, currency, onManageBilling, }: CustomerPortalProps): react.JSX.Element;
 
 interface EntitlementGateProps {
     /** Feature key to check for the provider's customer. */
@@ -211,6 +268,39 @@ interface EntitlementGateProps {
 /** Conditionally render children based on a live entitlement check. */
 declare function EntitlementGate({ feature, children, fallback, loadingFallback, }: EntitlementGateProps): react.JSX.Element;
 
+interface SampleNoticeProps {
+    /** Override the default disclaimer copy. */
+    children?: ReactNode;
+}
+/**
+ * A clearly-styled disclaimer banner shown above illustrative sample content so
+ * it is never mistaken for live data.
+ */
+declare function SampleNotice({ children }: SampleNoticeProps): react.JSX.Element;
+
+/**
+ * Illustrative sample data used to show what a surface *could* look like when no
+ * real catalog/customer data is available yet (e.g. a fresh workspace with no
+ * plans or products defined). Always paired with a visible <SampleNotice/> so it
+ * is never mistaken for live data.
+ */
+
+declare const SAMPLE_PLANS: Plan[];
+declare const SAMPLE_USAGE: Record<string, UsageResult>;
+declare const SAMPLE_CREDITS: CreditBalance;
+declare const SAMPLE_TEAM: {
+    members: TeamMember[];
+    seats: number;
+    maxSeats: number;
+};
+declare const SAMPLE_INVOICES: Invoice[];
+declare const SAMPLE_PORTAL: {
+    readonly planName: "Growth";
+    readonly meterIds: readonly ["api_calls", "seats"];
+};
+/** Default disclaimer copy shown alongside sample data. */
+declare const SAMPLE_NOTICE_TEXT = "Sample data for illustration only \u2014 define plans and products to show live values.";
+
 /** Format a monetary amount with Intl, honoring locale + currency. */
 declare function formatMoney(amount: number, currency?: string, locale?: string): string;
 /** Format a large unit count compactly (e.g. 5,000 / 1M). */
@@ -231,4 +321,4 @@ declare function describePlanPrice(plan: Plan, locale?: string): PriceDisplay;
 /** Human-readable description of a usage term's metered tiers. */
 declare function describeUsageTerm(term: PricingTerm, locale?: string): string;
 
-export { type Appearance, type CreditBalance, CustomerPortal, type CustomerPortalProps, EntitlementGate, type EntitlementGateProps, type EntitlementResult, MonetizeKitClient, type MonetizeKitClientConfig, type MonetizeKitContextValue, MonetizeKitProvider, type MonetizeKitProviderProps, Paywall, type PaywallProps, type Plan, type PlanEntitlement, type PriceDisplay, PricingTable, type PricingTableProps, type PricingTerm, type PricingTier, THEME_PRESETS, type ThemePresetName, type ThemeTokens, UsageBanner, type UsageBannerProps, type UsageResult, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };
+export { type Appearance, type CreditBalance, CustomerPortal, type CustomerPortalProps, EntitlementGate, type EntitlementGateProps, type EntitlementResult, type Invoice, MonetizeKitClient, type MonetizeKitClientConfig, type MonetizeKitContextValue, MonetizeKitProvider, type MonetizeKitProviderProps, Paywall, type PaywallProps, type Plan, type PlanEntitlement, type PriceDisplay, PricingTable, type PricingTableProps, type PricingTerm, type PricingTier, SAMPLE_CREDITS, SAMPLE_INVOICES, SAMPLE_NOTICE_TEXT, SAMPLE_PLANS, SAMPLE_PORTAL, SAMPLE_TEAM, SAMPLE_USAGE, SampleNotice, type SampleNoticeProps, THEME_PRESETS, THEME_PRESET_NAMES, type TeamMember, type ThemePresetName, type ThemeTokens, UsageBanner, type UsageBannerProps, type UsageResult, describePlanPrice, describeUsageTerm, formatMoney, formatUnits, resolveTokens, tokensToStyle, useCredits, useEntitlement, useMonetizeKit, useUsage };