@nozle-js/react 0.10.2 → 0.12.0

package/dist/index.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import React__default, { ReactNode, CSSProperties } from 'react';
+import { A as Appearance, E as ElementKey } from './tokens-Bm4VWWb0.js';
+export { a as Elements, T as Theme, V as Variables } from './tokens-Bm4VWWb0.js';
+import { QueryClient, UseQueryResult } from '@tanstack/react-query';
+import * as _tanstack_query_core from '@tanstack/query-core';
 
 /** A short-lived customer-portal credential issued by the merchant's backend. */
 interface BillingPortalSession {
@@ -55,6 +59,7 @@ interface CancellationControlProps {
     locale?: string;
     timezone?: string;
     nonce?: string;
+    appearance?: Appearance;
 }
 /** Customer cancellation UI. All mutations go through the merchant's authenticated callbacks. */
 declare function CancellationControl(props: CancellationControlProps): React.JSX.Element;
@@ -188,11 +193,24 @@ interface NozleClient {
     baseUrl: string;
     catalogFetch(path: string, init?: RequestInit): Promise<Response>;
 }
+/** A failed request to your billing endpoint. `code` is the error code the endpoint returned. */
+declare class BillingRequestError extends Error {
+    readonly status: number;
+    readonly code: string | undefined;
+    readonly requestId?: string | undefined;
+    constructor(status: number, code: string | undefined, requestId?: string | undefined);
+}
+type BillingFetch = <T>(route: string, params?: Record<string, string | number | undefined>) => Promise<T>;
 interface BillingContextValue {
     client: NozleClient;
     createCheckout?: CreateCheckout;
     verifyCheckout?: VerifyCheckout;
     getCheckoutStatus?: GetCheckoutStatus;
+    /** The query client the billing hooks use: the `queryClient` prop, or one the provider made. */
+    queryClient: QueryClient;
+    /** Reads a route of your billing endpoint; undefined when `billingEndpoint` is not set. */
+    billingFetch?: BillingFetch;
+    billingEndpoint?: string;
 }
 declare const BillingContext: React__default.Context<BillingContextValue | null>;
 interface BillingProviderProps {
@@ -201,9 +219,28 @@ interface BillingProviderProps {
     verifyCheckout?: VerifyCheckout;
     getCheckoutStatus?: GetCheckoutStatus;
     baseUrl?: string;
+    /**
+     * Path of your backend route that serves the customer hooks (`useSubscription`,
+     * `useEntitlement`, `useCreditBalance`, `useCreditHistory`, `useUsage`, `useUpgradePreview`),
+     * for example `/api/nozle`. Serve it with `createBillingHandler` from `@nozle-js/node`.
+     */
+    billingEndpoint?: string;
+    /** Extra headers for billing endpoint requests, such as a CSRF token. */
+    billingHeaders?: () => HeadersInit | Promise<HeadersInit>;
+    /**
+     * Your app's TanStack Query client, to share its cache and devtools. Without it the provider
+     * makes its own. The hooks pass their client explicitly, so they never use or replace a
+     * `QueryClientProvider` of your app.
+     */
+    queryClient?: QueryClient;
+    /**
+     * Look of every component inside: a predefined theme from `@nozle-js/react/themes`, your own
+     * variables, and per-element class names or styles. A component's own `appearance` goes on top.
+     */
+    appearance?: Appearance;
     children: ReactNode;
 }
-declare function BillingProvider({ publishableKey, createCheckout, verifyCheckout, getCheckoutStatus, baseUrl, children, }: BillingProviderProps): React__default.ReactElement;
+declare function BillingProvider({ publishableKey, createCheckout, verifyCheckout, getCheckoutStatus, baseUrl, billingEndpoint, billingHeaders, queryClient, appearance, children, }: BillingProviderProps): React__default.ReactElement;
 declare function useOptionalBillingContext(): BillingContextValue | null;
 declare function useBillingContext(): BillingContextValue;
 declare function useNozleClient(): NozleClient;
@@ -288,6 +325,7 @@ interface PlanChangeControlProps {
     locale?: string;
     timezone?: string;
     nonce?: string;
+    appearance?: Appearance;
 }
 /** Payment-backed upgrades and scheduled downgrades for one external subscription. */
 declare function PlanChangeControl(props: PlanChangeControlProps): React.JSX.Element;
@@ -306,22 +344,685 @@ interface BillingPortalProps {
     /** CSP nonce for the component's scoped stylesheet. No Tailwind setup is required. */
     nonce?: string;
     onError?: (error: BillingPortalError) => void;
+    appearance?: Appearance;
 }
 /** Native React customer portal. Uses customer-scoped GraphQL, with no iframe or global auth storage. */
-declare function BillingPortal({ createSession, cancellationActions, planChangeActions, locale, className, style, nonce, onError, }: BillingPortalProps): React.JSX.Element;
+declare function BillingPortal({ createSession, cancellationActions, planChangeActions, locale, className, style, nonce, onError, appearance, }: BillingPortalProps): React.JSX.Element;
+
+interface ElementProps {
+    className?: string;
+    style?: CSSProperties;
+}
+interface UseAppearance {
+    /** Props for a component's root: its `nozle-<key>` class, the theme's CSS variables and its element overrides. */
+    root(key: ElementKey, style?: CSSProperties, className?: string): ElementProps;
+    /** Props for an inner element: its `nozle-<key>` class and its element overrides. */
+    el(key: ElementKey, style?: CSSProperties, className?: string): ElementProps;
+    /** The plan card layout the theme asks for. */
+    planCardLayout: "card" | "panel";
+    /** The theme's CSS variables, for an element rendered beside the root rather than inside it. */
+    vars: CSSProperties;
+}
+/**
+ * Resolves the provider's appearance with the component's own on top. Without any appearance no
+ * variables are written, so CSS variables an app sets on `:root` keep working.
+ */
+declare function useAppearance(appearance?: Appearance): UseAppearance;
 
-interface Plan$1 {
+interface CatalogPrivilege {
+    code: string;
+    name: string;
+    value_type: string;
+    value: string | number | boolean | null;
+}
+interface CatalogEntitlement {
+    feature_type: string;
     code: string;
     name: string;
+    description?: string | null;
+    usage_limit?: number | null;
+    privileges?: CatalogPrivilege[];
+}
+interface CatalogCreditGrantRule {
+    credit_system_code: string;
+    amount: string;
+    interval: string;
+    interval_count?: number;
+}
+interface CatalogChargeRange {
+    from_value: number;
+    to_value: number | null;
+    per_unit_amount?: string;
+    flat_amount?: string;
+    rate?: string;
+}
+/** A usage charge. Amounts inside `properties` are decimal strings in currency units, not cents. */
+interface CatalogCharge {
+    code?: string | null;
+    feature_code?: string | null;
+    charge_model: string;
+    properties?: {
+        amount?: string;
+        package_size?: number;
+        free_units?: number;
+        rate?: string;
+        fixed_amount?: string;
+        graduated_ranges?: CatalogChargeRange[];
+        volume_ranges?: CatalogChargeRange[];
+        graduated_percentage_ranges?: CatalogChargeRange[];
+    };
+}
+interface PlanFeatureSource {
+    amount_currency: string;
+    entitlements?: CatalogEntitlement[];
+    credit_grant_rules?: CatalogCreditGrantRule[];
+    charges?: CatalogCharge[];
+}
+/**
+ * One line per thing a plan gives, built only from the catalog: entitlements, credit grants and usage
+ * prices, in the order the catalog returns them. Charges whose price cannot be written as a line
+ * (`custom`, `dynamic`) are skipped.
+ */
+declare function planFeatures(plan: PlanFeatureSource): string[];
+interface ComparisonPlan extends PlanFeatureSource {
+    code: string;
+}
+interface ComparisonRow {
+    key: string;
+    label: string;
+    values: Record<string, string | boolean>;
+}
+/**
+ * One row per entitlement and per granted credit system across the plans, in the order they first
+ * appear. A plan that does not have the entitlement gets `false`, so the table shows the real gap.
+ */
+declare function comparisonRows(plans: ComparisonPlan[]): ComparisonRow[];
+interface SortablePlan {
     amount_cents: number;
     amount_currency: string;
-    interval: string;
 }
+/**
+ * The default plan order: cheapest base price first, so a free plan comes first. Plans in different
+ * currencies stay grouped in the order each currency first appears, because their amounts cannot be
+ * compared. Plans with the same price keep the order the catalog returned them in.
+ */
+declare function sortPlansByPrice<T extends SortablePlan>(plans: T[]): T[];
+
+type PricingInterval = "weekly" | "monthly" | "quarterly" | "semiannual" | "yearly";
+type PricingPrivilege = CatalogPrivilege;
+type PricingEntitlement = CatalogEntitlement;
+interface PricingPlan {
+    code: string;
+    name: string;
+    amount_cents: number;
+    amount_currency: string;
+    interval: PricingInterval | (string & {});
+    description?: string | null;
+    pending_deletion?: boolean;
+    plan_family_code?: string | null;
+    /** Present in the public catalog. Absent from an older or reduced response. */
+    entitlements?: PricingEntitlement[];
+    credit_grant_rules?: CatalogCreditGrantRule[];
+    charges?: CatalogCharge[];
+}
+/** Display settings of one feature on a family's pricing card. */
+interface PricingFamilyFeature {
+    code: string;
+    name?: string | null;
+    description?: string | null;
+    show_on_pricing?: boolean;
+    show_description?: boolean;
+    display_position?: number | null;
+}
+interface PricingFamily {
+    code: string;
+    name: string;
+    description?: string | null;
+    show_on_pricing?: boolean;
+    pricing_position?: number | null;
+    pricing_highlighted?: boolean;
+    badge_text?: string | null;
+    cta_text?: string | null;
+    /** Codes of the family's plans, ordered weekly to yearly. */
+    plan_codes: string[];
+    features?: PricingFamilyFeature[];
+}
+/** The `GET /api/v1/plans` payload. `families` is absent on older APIs. */
+interface PricingCatalog {
+    plans: PricingPlan[];
+    families?: PricingFamily[] | null;
+}
+interface PricingFeature {
+    label: string;
+    description?: string | null;
+}
+/**
+ * Feature overrides: a record keyed by family code or plan code, or an array
+ * aligned to the cards in display order.
+ */
+type PricingFeatureOverrides = Record<string, Array<string | PricingFeature>> | Array<Array<string | PricingFeature> | undefined>;
+interface PricingIntervalOption {
+    interval: PricingInterval;
+    label: string;
+    /** Best whole-percent saving of any visible family against its monthly plan. */
+    savingsPercent: number | null;
+}
+interface PricingCard {
+    /** Family code, or the plan code when the catalog has no families. */
+    key: string;
+    /** Null when the catalog has no families (older APIs). */
+    family: PricingFamily | null;
+    /** The family's live plans, ordered weekly to yearly. */
+    plans: PricingPlan[];
+    /** The plan shown, checked out and passed to `onSelect`. */
+    plan: PricingPlan;
+    /** True when the family has no plan for the requested interval. */
+    isFallbackInterval: boolean;
+    name: string;
+    description: string | null;
+    /**
+     * Family cards: the per-month equivalent of the plan's price, for example
+     * "$40.83". Without families: the plan's price, for example "$14.99".
+     */
+    price: string;
+    /** "/mo" on family cards; the plan's own interval ("/quarter") without families. */
+    pricePeriod: string;
+    /**
+     * Family cards: for example "Billed $490 yearly · save 17%" or "Billed
+     * monthly". Empty without families.
+     */
+    billing: string;
+    /** Whole-percent saving against the family's monthly plan, when positive. */
+    savingsPercent: number | null;
+    features: PricingFeature[];
+    highlighted: boolean;
+    /** Badge text when highlighted, otherwise null. */
+    badge: string | null;
+    /** Call-to-action text (family `cta_text` or "Get {name}"). */
+    cta: string;
+    /** The family code or one of its plan codes is listed in `contactSales`. */
+    enterprise: boolean;
+}
+interface GetPricingCardsOptions {
+    /**
+     * Interval to show ("annual" is accepted for "yearly"). Defaults to
+     * monthly when offered, else the first available interval. Without
+     * families, plans of other intervals are left out only when an interval
+     * is given.
+     */
+    interval?: PricingInterval | "annual" | null;
+    locale?: string;
+    /** Family code or plan code to highlight instead of `pricing_highlighted`. */
+    highlight?: string | null;
+    /**
+     * Badge on the highlighted card, replacing the family's `badge_text`
+     * (default "Most Popular"). `null` shows no badge.
+     */
+    badge?: string | null;
+    features?: PricingFeatureOverrides;
+    /**
+     * Codes of families or plans sold on request. Their card's `enterprise` is
+     * true. Without families they also stay visible whatever the interval and
+     * come last.
+     */
+    contactSales?: readonly string[];
+    /**
+     * Orders the plans of a catalog without families. By default they are
+     * sorted by base price, cheapest first, with `contactSales` plans last.
+     * Families are ordered by `pricing_position`.
+     */
+    sort?: (a: PricingPlan, b: PricingPlan) => number;
+}
+/** Intervals offered by the visible cards, ordered weekly to yearly. */
+declare function getAvailableIntervals(catalog: PricingCatalog): PricingInterval[];
+/**
+ * Options for an interval switch: each available interval with its label
+ * and the best family saving against the family's monthly plan.
+ */
+declare function getPricingIntervalOptions(catalog: PricingCatalog): PricingIntervalOption[];
+/**
+ * The interval to show first: `preferred` ("annual" means "yearly") when it
+ * is available, otherwise monthly when available, otherwise the first one.
+ */
+declare function getDefaultInterval(catalog: PricingCatalog, preferred?: string | null): PricingInterval | null;
+/**
+ * Pricing cards in display order for one interval: the selected plan of each
+ * visible family (or the nearest interval's plan when the family has none for
+ * it), its per-month price and billing line, its features, the highlight,
+ * badge and call to action. Without families each live plan is a card.
+ */
+declare function getPricingCards(catalog: PricingCatalog, options?: GetPricingCardsOptions): PricingCard[];
+
+/**
+ * A plan from the public catalog (`GET /api/v1/plans`). The catalog also returns entitlements, credit
+ * grants and charges; they are absent from an older or reduced response.
+ */
+type Plan = PricingPlan;
+/**
+ * The public plan catalog, read with the publishable key and cached by TanStack Query. `families` is
+ * null when the API returns no `families` key (older APIs); pass `{ plans, families }` to
+ * `getPricingCards` either way.
+ */
 declare function usePlans(): {
-    plans: Plan$1[];
+    plans: PricingPlan[];
+    families: PricingFamily[] | null;
     isLoading: boolean;
     error: Error | null;
+    refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<{
+        plans: PricingPlan[];
+        families: PricingFamily[] | null;
+        nozleBranding: boolean;
+    }, Error>>;
+};
+
+/**
+ * Whether the merchant's Nozle plan keeps the "Powered by Nozle" badge. The server decides
+ * (`meta.nozle_branding` in the publishable-key plan catalog); without a BillingProvider, or
+ * before the answer arrives, there is no badge.
+ */
+declare function useNozleBranding(): boolean;
+/** "Powered by" and the Nozle logo, linking to nozle.dev. */
+declare function PoweredByNozle(): React__default.ReactElement;
+
+interface CreditBalanceSource {
+    id: string;
+    type: "subscription_grant" | "top_up" | "manual_grant" | "adjustment" | "allocated_top_up";
+    remaining: string;
+    expires_at: string | null;
+}
+/** The fields of the SDK's credit balance (`nozle.credits.balance`) that this component reads. */
+interface CreditBalanceData {
+    credit_system_name: string;
+    unit_name: string;
+    available: string;
+    as_of: string;
+    sources?: CreditBalanceSource[];
+}
+interface CreditBalanceProps {
+    /** One balance from your backend. `null` or `undefined` shows the empty message. */
+    balance?: CreditBalanceData | null;
+    isLoading?: boolean;
+    error?: Error | string | null;
+    emptyMessage?: string;
+    appearance?: Appearance;
+}
+declare function CreditBalance({ balance, isLoading, error, emptyMessage, appearance, }: CreditBalanceProps): React__default.ReactElement;
+
+/** The fields of the SDK's credit operation (`nozle.credits.operations`) that this component reads. */
+interface CreditOperationData {
+    id: string;
+    type: "consume" | "grant" | "adjustment" | "expire" | "revoke" | "refund" | "transfer";
+    status: "succeeded" | "denied" | "reversed";
+    credit_amount: string;
+    feature_code: string | null;
+    occurred_at: string;
+}
+interface CreditHistoryProps {
+    operations?: CreditOperationData[];
+    isLoading?: boolean;
+    error?: Error | string | null;
+    emptyMessage?: string;
+    /** When true a "Load more" button is shown. Fetch the next page with the SDK's `next_cursor`. */
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    appearance?: Appearance;
+}
+declare function CreditHistory({ operations, isLoading, error, emptyMessage, hasMore, onLoadMore, appearance, }: CreditHistoryProps): React__default.ReactElement;
+
+/** One charge's usage in a period, as returned by Core's `current_usage` and `past_usage`. */
+interface ChargeUsageData {
+    /** Decimal string, for example `"1200.0"`. */
+    units: string;
+    amount_cents: number;
+    amount_currency: string;
+    events_count?: number;
+    charge: {
+        nozle_id: string;
+        charge_model: string;
+        invoice_display_name?: string | null;
+    };
+    feature: {
+        nozle_id: string;
+        code: string;
+        name: string;
+        aggregation_type?: string;
+    };
+}
+/**
+ * A customer's usage for one billing period: the `customer_usage` object of
+ * `GET /customers/{external_customer_id}/current_usage`, or one item of `usage_periods` in
+ * `GET /customers/{external_customer_id}/past_usage`. Read them on your backend with a secret key.
+ */
+interface CustomerUsageData {
+    from_datetime: string;
+    to_datetime: string;
+    currency: string;
+    amount_cents: number;
+    charges_usage: ChargeUsageData[];
+}
+
+/** The customer's subscription with its plan and any scheduled change, or nulls without one. */
+interface BillingSubscription {
+    subscription: {
+        external_id: string;
+        plan_code: string;
+        status: string;
+        ending_at: string | null;
+        plan: {
+            code: string;
+            name: string;
+            amount_cents: number | string;
+            currency: string;
+            interval: string;
+        };
+    } | null;
+    pending_change: {
+        plan_code: string;
+        name: string;
+        effective_at: string;
+    } | null;
+    /** The customer has an unpaid invoice past its due date. */
+    past_due?: boolean;
+}
+/** An entitlement decision for one feature (`can()` on your backend). */
+interface EntitlementResult {
+    allowed: boolean;
+    used?: number;
+    limit: number | null;
+    remaining: number | null;
+    reason?: string;
+}
+/** The price of changing to another plan, before the customer confirms. */
+interface UpgradePreview {
+    quote_id: string;
+    currency: string;
+    net_amount_cents: number | string;
+    amount_due_now_cents: number | string;
+    amount_due_at_effective_cents: number | string;
+    transition_direction: "upgrade" | "downgrade";
+    timing: "immediate" | "end_of_period";
+    effective_at: string;
+    renewal_at: string | null;
+}
+interface CreditHistoryPage {
+    operations: CreditOperationData[];
+    next_cursor: string | null;
+}
+/** The signed-in customer's subscription, plan and scheduled change. */
+declare function useSubscription(): UseQueryResult<BillingSubscription, Error>;
+/** Whether the customer may use a feature now, with used, limit and remaining. */
+declare function useEntitlement(featureCode: string, options?: {
+    enabled?: boolean;
+}): UseQueryResult<EntitlementResult, Error>;
+/**
+ * One credit balance, ready for `<CreditBalance balance={data} />`: the given credit system,
+ * or the first one with credits, or the first one.
+ */
+declare function useCreditBalance(creditSystemCode?: string): UseQueryResult<CreditBalanceData | null, Error>;
+/**
+ * Credit operations, newest first, a page at a time. `operations` flattens the loaded pages for
+ * `<CreditHistory operations={operations} hasMore={hasNextPage} onLoadMore={fetchNextPage} />`.
+ */
+declare function useCreditHistory(options?: {
+    creditSystemCode?: string;
+    limit?: number;
+}): {
+    operations: CreditOperationData[];
+    data: _tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: true;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchNextPageError: boolean;
+    isFetchingNextPage: boolean;
+    isFetchPreviousPageError: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchStatus: _tanstack_query_core.FetchStatus;
+} | {
+    operations: CreditOperationData[];
+    data: _tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>;
+    error: null;
+    isError: false;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: true;
+    isPlaceholderData: false;
+    status: "success";
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchStatus: _tanstack_query_core.FetchStatus;
+} | {
+    operations: CreditOperationData[];
+    data: undefined;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: true;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchStatus: _tanstack_query_core.FetchStatus;
+} | {
+    operations: CreditOperationData[];
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoading: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchStatus: _tanstack_query_core.FetchStatus;
+} | {
+    operations: CreditOperationData[];
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isLoading: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchStatus: _tanstack_query_core.FetchStatus;
+} | {
+    operations: CreditOperationData[];
+    data: _tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>;
+    isError: false;
+    error: null;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: true;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    status: "success";
+    fetchNextPage: (options?: _tanstack_query_core.FetchNextPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchPreviousPage: (options?: _tanstack_query_core.FetchPreviousPageOptions) => Promise<_tanstack_query_core.InfiniteQueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_query_core.RefetchOptions) => Promise<_tanstack_query_core.QueryObserverResult<_tanstack_query_core.InfiniteData<CreditHistoryPage, unknown>, Error>>;
+    fetchStatus: _tanstack_query_core.FetchStatus;
 };
+/**
+ * The current billing period's usage (`period: "current"`, the default) for `<UsageBreakdown>`,
+ * or past periods (`period: "past"`) for `<UsageTrend>`.
+ */
+declare function useUsage(options?: {
+    period?: "current";
+}): UseQueryResult<CustomerUsageData | null>;
+declare function useUsage(options: {
+    period: "past";
+    periods?: number;
+}): UseQueryResult<CustomerUsageData[]>;
+/** One of the customer's finalized invoices. */
+interface InvoiceData {
+    nozle_id: string;
+    number: string;
+    issuing_date: string;
+    payment_due_date?: string | null;
+    payment_status: string;
+    payment_overdue?: boolean;
+    currency: string;
+    total_amount_cents: number;
+    file_url?: string | null;
+}
+interface InvoicePageData {
+    invoices: InvoiceData[];
+    meta: {
+        current_page: number;
+        next_page: number | null;
+        prev_page: number | null;
+        total_pages: number;
+        total_count: number;
+    };
+}
+/** The customer's finalized invoices, newest first, 20 per page. */
+declare function useInvoices(options?: {
+    page?: number;
+}): UseQueryResult<InvoicePageData, Error>;
+/**
+ * Returns a function that resolves an invoice's PDF URL, or `null` while Nozle is still generating
+ * the PDF (ask again in a few seconds). Your backend only answers for the customer's own invoices.
+ */
+declare function useInvoiceDownload(): (invoiceId: string) => Promise<string | null>;
+/** What changing to `planCode` would cost now and later. Does nothing until a plan is given. */
+declare function useUpgradePreview(planCode: string | undefined): UseQueryResult<UpgradePreview, Error>;
+/** Returns a function that reloads every billing hook, for example after checkout or a plan change. */
+declare function useBillingRefresh(): () => Promise<void>;
 
 interface UseCheckoutResult$1 {
     fetchClientSecret: (planCode: string, returnUrl?: string) => Promise<string | null>;
@@ -331,87 +1032,108 @@ interface UseCheckoutResult$1 {
 }
 declare function useCheckout$1(): UseCheckoutResult$1;
 
-interface PricingPlan {
-    code: string;
-    name: string;
-    amount_cents: number;
-    amount_currency: string;
-    interval: string;
-    description?: string;
-}
 interface PricingTableProps {
     currentPlanCode?: string;
+    /** Plans to show instead of fetching the catalog. */
     plans?: PricingPlan[];
-    features?: string[][];
-    onSelect?: (plan: PricingPlan) => void;
+    /**
+     * Plan families for `plans`. When omitted with `plans`, each plan is its
+     * own card, as with older APIs.
+     */
+    families?: PricingFamily[] | null;
+    /**
+     * Optional. By default each card lists its family's features with values
+     * from the selected plan, or, without families, what the plan gives. Pass
+     * an object keyed by family code or plan code, or an array aligned to the
+     * rendered cards, to replace the lines of a card.
+     */
+    features?: PricingFeatureOverrides;
+    /**
+     * Optional. Orders the plans of a catalog without families. By default
+     * they are sorted by base price, cheapest first, with `contactSalesPlans`
+     * last. Families are ordered by their `pricing_position`.
+     */
+    sort?: (a: PricingPlan, b: PricingPlan) => number;
+    /** Called with the selected interval's plan and its family (null without families). */
+    onSelect?: (plan: PricingPlan, family: PricingFamily | null) => void;
     returnUrl?: string;
     onStripeClientSecret?: (clientSecret: string) => void;
     onCheckoutResult?: (result: CheckoutResult) => void;
     onCheckoutError?: (error: Error) => void;
+    /** Show the interval switch when several intervals exist. Defaults to true. */
     showToggle?: boolean;
+    /** Interval shown first ("annual" is accepted for "yearly"). Defaults to monthly when offered. */
+    defaultInterval?: PricingInterval | 'annual';
+    /** Family code or plan code to highlight. Overrides the family's `pricing_highlighted`. */
     highlightPlan?: string;
+    /**
+     * How the highlighted card stands out: `outline` (default) draws a border in `colorHighlight`;
+     * `filled` paints the card in `colorHighlight` and its text and button in `colorHighlightForeground`.
+     */
+    highlightStyle?: 'outline' | 'filled';
+    /**
+     * Badge on the highlighted card. Replaces the family's `badge_text`; without either it is
+     * "Most Popular". Pass `null` for no badge.
+     */
+    highlightLabel?: string | null;
     className?: string;
+    /**
+     * Codes of plans (or plan families) sold on request. Their card shows "Custom" instead of a price
+     * and a "Contact Sales" button, which opens `enterpriseEmail` when set.
+     */
+    contactSalesPlans?: string[];
     enterpriseEmail?: string;
+    /** Text next to the Annual option, replacing the computed "Save N%". */
+    annualDiscountLabel?: string;
+    /** Locale for prices and feature values. Defaults to `en-US`. */
+    locale?: string;
+    appearance?: Appearance;
 }
-declare function PricingTable({ currentPlanCode, plans: propPlans, features, onSelect, returnUrl, onStripeClientSecret, onCheckoutResult, onCheckoutError, showToggle, highlightPlan, className, enterpriseEmail, }: PricingTableProps): React__default.ReactElement;
+declare function PricingTable({ currentPlanCode, plans: propPlans, families: propFamilies, features, sort, onSelect, returnUrl, onStripeClientSecret, onCheckoutResult, onCheckoutError, showToggle, defaultInterval, highlightPlan, highlightStyle, highlightLabel, className, contactSalesPlans, enterpriseEmail, annualDiscountLabel, locale: localeProp, appearance, }: PricingTableProps): React__default.ReactElement;
 
 /**
  * PlanCard — Individual pricing plan card component.
  * UI-01: Shows plan name, price, interval, features list, and CTA button.
- * Uses CSS variable theming with --nozle-* namespace.
+ * Themed through `appearance` (see the appearance tokens).
  */
 
-interface Plan {
-    id: string;
-    name: string;
-    monthlyPrice: number;
-    annualPrice: number;
-    features: string[];
-    description?: string;
-}
-interface PlanCardProps extends Plan {
-    isAnnual: boolean;
+interface PlanCardProps {
+    /** A plan from the public catalog. Its price and feature lines are read from it. */
+    plan: PricingPlan;
+    /** Optional. Replaces the lines read from the plan. */
+    features?: string[];
     isCurrent: boolean;
     returnUrl?: string;
     onSelect?: (input: CreateCheckoutInput) => void;
-    children?: ReactNode;
+    appearance?: Appearance;
 }
 /**
- * PlanCard renders a single pricing plan.
+ * PlanCard renders a single pricing plan from the catalog.
  * Highlighted with aria-current="true" when isCurrent=true.
  */
-declare function PlanCard({ id, name, monthlyPrice, annualPrice, features, description, isAnnual, isCurrent, returnUrl, onSelect, }: PlanCardProps): React__default.ReactElement;
+declare function PlanCard({ plan, features: featureOverride, isCurrent, returnUrl, onSelect, appearance, }: PlanCardProps): React__default.ReactElement;
 
 /**
  * PlanComparison — Side-by-side feature comparison table.
  * UI-01: Renders shadcn-style table with plan names as headers and features as rows.
- * Check/cross icons for boolean values. Uses CSS variable theming.
+ * Check/cross icons for boolean values. Themed through `appearance`.
  */
 
-interface ComparisonFeature {
-    key: string;
-    label: string;
-    values: Record<string, string | boolean>;
-}
+type ComparisonFeature = ComparisonRow;
 interface PlanComparisonProps {
-    plans: Plan[];
-    features: ComparisonFeature[];
+    /** Plans from the public catalog. The rows are built from their entitlements and credit grants. */
+    plans: PricingPlan[];
+    /** Optional. Replaces the rows built from the plans. `values` is keyed by plan code. */
+    features?: ComparisonFeature[];
+    /** Optional. Orders the plans. By default they are sorted by base price, cheapest first. */
+    sort?: (a: PricingPlan, b: PricingPlan) => number;
+    appearance?: Appearance;
 }
 /**
- * PlanComparison renders a side-by-side feature comparison table.
- *
- * Usage:
- * ```tsx
- * <PlanComparison
- *   plans={plans}
- *   features={[
- *     { key: 'api_calls', label: 'API Calls', values: { starter: '10K', pro: '100K' } },
- *     { key: 'analytics', label: 'Analytics', values: { starter: false, pro: true } },
- *   ]}
- * />
- * ```
+ * PlanComparison renders a side-by-side comparison of catalog plans. A plan that does not have an
+ * entitlement shows a cross, so the table shows the real difference between plans.
  */
-declare function PlanComparison({ plans, features, }: PlanComparisonProps): React__default.ReactElement;
+declare function PlanComparison({ plans: catalogPlans, features: featureOverride, sort, appearance, }: PlanComparisonProps): React__default.ReactElement;
 
 interface RazorpayActions {
     verifyCheckout?: VerifyCheckout;
@@ -449,6 +1171,7 @@ interface CheckoutButtonProps extends Omit<RazorpayActions, "verifyCheckout" | "
     returnUrl?: string;
     label?: string;
     className?: string;
+    appearance?: Appearance;
     style?: React__default.CSSProperties;
     onError?: (error: Error) => void;
     /** @deprecated The server supplies the public Razorpay key in the checkout response. */
@@ -459,7 +1182,7 @@ interface CheckoutButtonProps extends Omit<RazorpayActions, "verifyCheckout" | "
     onComplete?: (result: CompletedCheckoutResult) => void;
     onScheduled?: (result: ScheduledCheckoutResult) => void;
 }
-declare function CheckoutButton({ planCode, returnUrl, label, className, style, onError, razorpayKeyId, registerMandate, onProcessing, onDismiss, onStripeClientSecret, onSuccess, onComplete, onScheduled, }: CheckoutButtonProps): React__default.ReactElement;
+declare function CheckoutButton({ planCode, returnUrl, label, className, style, onError, razorpayKeyId, registerMandate, onProcessing, onDismiss, onStripeClientSecret, onSuccess, onComplete, onScheduled, appearance, }: CheckoutButtonProps): React__default.ReactElement;
 
 interface StripeCheckoutProps {
     /** Stripe PaymentIntent client secret */
@@ -490,6 +1213,8 @@ interface StripeCheckoutProps {
     style?: React__default.CSSProperties;
     /** Optional custom controls for the PaymentIntent/PaymentElement branch. */
     children?: React__default.ReactNode;
+    /** Also passed to Stripe's Payment Element. Stripe's embedded Checkout uses your Stripe branding instead. */
+    appearance?: Appearance;
 }
 interface UseCheckoutResult {
     /** Trigger payment confirmation programmatically */
@@ -512,6 +1237,7 @@ interface ProviderCheckoutProps {
     verifyCheckout?: VerifyCheckout;
     getCheckoutStatus?: GetCheckoutStatus;
     onDismiss?: () => void;
+    appearance?: Appearance;
 }
 type CheckoutProps = StripeCheckoutProps | ProviderCheckoutProps;
 declare function Checkout(props: CheckoutProps): React__default.JSX.Element;
@@ -547,7 +1273,10 @@ interface UpgradeModalProps {
     onScheduled?: () => void;
     onConfirm?: () => void;
     onCancel?: () => void;
+    /** Shows a Back button on the left of the actions, for a step that has a previous step. */
+    onBack?: () => void;
     onError?: (error: Error) => void;
+    appearance?: Appearance;
 }
 declare function UpgradeModal(props: UpgradeModalProps): React__default.ReactElement | null;
 
@@ -560,6 +1289,7 @@ interface UpgradeButtonProps {
     preview?: ProrationPreview;
     label?: string;
     className?: string;
+    appearance?: Appearance;
     style?: React__default.CSSProperties;
     onStripeClientSecret?: (clientSecret: string) => void;
     onCheckoutStarted?: () => void;
@@ -567,7 +1297,7 @@ interface UpgradeButtonProps {
     onUpgraded?: () => void;
     onError?: (error: Error) => void;
 }
-declare function UpgradeButton({ planCode, returnUrl, subscriptionId, quoteId, idempotencyKey, preview, label, className, style, onStripeClientSecret, onCheckoutStarted, onDowngradeScheduled, onUpgraded, onError, }: UpgradeButtonProps): React__default.ReactElement;
+declare function UpgradeButton({ planCode, returnUrl, subscriptionId, quoteId, idempotencyKey, preview, label, className, style, onStripeClientSecret, onCheckoutStarted, onDowngradeScheduled, onUpgraded, onError, appearance, }: UpgradeButtonProps): React__default.ReactElement;
 
 /**
  * Presentational entitlement gate. The merchant backend owns entitlement
@@ -647,24 +1377,25 @@ declare function PlanGate({ currentPlan, allowedPlans, fallback, children, }: Pl
 /**
  * UpgradePrompt — Reusable upgrade message component.
  * UI-03: Shows plan name + upgrade button; used as default fallback for LockedOverlay.
- * Uses CSS variable theming with --nozle-* namespace.
+ * Themed through `appearance` (see the appearance tokens).
  */
 
 interface UpgradePromptProps {
     text?: string;
     planName?: string;
     onUpgrade?: () => void;
+    appearance?: Appearance;
 }
 /**
  * UpgradePrompt renders an upgrade call-to-action with a message and button.
  * Used as default fallback in LockedOverlay and gate components.
  */
-declare function UpgradePrompt({ text, planName, onUpgrade, }: UpgradePromptProps): React__default.ReactElement;
+declare function UpgradePrompt({ text, planName, onUpgrade, appearance, }: UpgradePromptProps): React__default.ReactElement;
 
 /**
  * LockedOverlay — Wraps children with a blur filter + upgrade CTA overlay when locked.
  * UI-03: Applies CSS blur(4px) to children with an upgrade prompt overlay.
- * Uses CSS variable theming with --nozle-* namespace.
+ * Themed through `appearance` (see the appearance tokens).
  */
 
 interface LockedOverlayProps {
@@ -678,6 +1409,7 @@ interface LockedOverlayProps {
     onUpgrade?: () => void;
     /** Content to blur when locked */
     children: ReactNode;
+    appearance?: Appearance;
 }
 /**
  * LockedOverlay wraps children in a relative container.
@@ -694,37 +1426,46 @@ interface LockedOverlayProps {
  * </LockedOverlay>
  * ```
  */
-declare function LockedOverlay({ locked, upgradeText, upgradePlanName, onUpgrade, children, }: LockedOverlayProps): React__default.ReactElement;
+declare function LockedOverlay({ locked, upgradeText, upgradePlanName, onUpgrade, children, appearance, }: LockedOverlayProps): React__default.ReactElement;
 
-/**
- * UsageMeter — embeddable usage progress bar with automatic color thresholds.
- * Uses --nozle-* CSS variables for theming (customer-facing portal layer).
- *
- * Color thresholds:
- *   < 80%  → primary (normal)
- *   80-94% → warning (amber)
- *   ≥ 95%  → destructive (red)
- */
 declare function getUsageMeterColor(percentage: number): string;
 interface UsageMeterProps {
     used: number;
-    limit: number;
+    /** `null` or `undefined` means the feature has no limit. */
+    limit?: number | null;
     label?: string;
     showText?: boolean;
+    appearance?: Appearance;
 }
-declare function UsageMeter({ used, limit, label, showText, }: UsageMeterProps): React.JSX.Element;
+declare function UsageMeter({ used, limit, label, showText, appearance, }: UsageMeterProps): React.JSX.Element;
 
 interface UsageDashboardFeature {
     key: string;
     label: string;
     used: number;
-    limit: number;
+    /** `null` or `undefined` means the feature has no limit. */
+    limit?: number | null;
 }
+/** The `can()` result fields the dashboard needs. */
+interface UsageResult {
+    used: number;
+    limit?: number | null;
+}
+/**
+ * Joins a plan's metered entitlements (names come from the catalog) with the usage results you read
+ * on your backend, keyed by feature code. Entitlements without a result are left out.
+ */
+declare function usageItems(entitlements: CatalogEntitlement[], results: Record<string, UsageResult | undefined>): UsageDashboardFeature[];
 interface UsageDashboardProps {
     features?: UsageDashboardFeature[];
     loading?: boolean;
+    /** Shown in place of the meters when set. */
+    error?: Error | string | null;
+    /** Shown when there are no features. */
+    emptyMessage?: string;
+    appearance?: Appearance;
 }
-declare function UsageDashboard({ features, loading, }: UsageDashboardProps): React.JSX.Element;
+declare function UsageDashboard({ features, loading, error, emptyMessage, appearance, }: UsageDashboardProps): React.JSX.Element;
 
 interface UsageAlertFeature {
     key: string;
@@ -735,8 +1476,42 @@ interface UsageAlertProps {
     features: UsageAlertFeature[];
     threshold?: number;
     upgradeHref?: string;
+    appearance?: Appearance;
 }
-declare function UsageAlert({ features, threshold, upgradeHref, }: UsageAlertProps): React.JSX.Element | null;
+declare function UsageAlert({ features, threshold, upgradeHref, appearance, }: UsageAlertProps): React.JSX.Element | null;
+
+interface CurrentPlanDetail {
+    label: string;
+    value: ReactNode;
+}
+interface CurrentPlanProps {
+    /** The `useSubscription` result. Omit it to read it through `billingEndpoint`. */
+    subscription?: BillingSubscription | null;
+    /** Meters to show. Omit to build them from the plan's metered limits and this period's usage. */
+    usage?: UsageDashboardFeature[];
+    /** Extra label and value rows, for example included events or a renewal date. */
+    details?: CurrentPlanDetail[];
+    /** Buttons for the header, for example a link to your billing portal. */
+    actions?: ReactNode;
+    /** Text of the notice shown when the customer is past due. */
+    pastDueMessage?: string;
+    /** A meter at or above this percentage shows a notice. Default 80; `null` turns notices off. */
+    warningPercent?: number | null;
+    title?: string;
+    isLoading?: boolean;
+    error?: Error | string | null;
+    emptyMessage?: string;
+    locale?: string;
+    appearance?: Appearance;
+}
+/** Meters from the plan's metered limits joined with this period's units, by feature code. */
+declare function currentPlanMeters(entitlements: {
+    feature_type: string;
+    code: string;
+    name: string;
+    usage_limit?: number | null;
+}[] | undefined, usage: CustomerUsageData | null | undefined): UsageDashboardFeature[];
+declare function CurrentPlan(props: CurrentPlanProps): React__default.ReactElement;
 
 /**
  * PlanBadge — simple badge displaying plan name with tier-based coloring.
@@ -745,13 +1520,10 @@ declare function UsageAlert({ features, threshold, upgradeHref, }: UsageAlertPro
 interface PlanBadgeProps {
     plan: string;
     tier?: "free" | "starter" | "pro" | "enterprise";
+    appearance?: Appearance;
 }
-declare function PlanBadge({ plan, tier }: PlanBadgeProps): React__default.JSX.Element;
+declare function PlanBadge({ plan, tier, appearance }: PlanBadgeProps): React__default.JSX.Element;
 
-/**
- * PaymentMethodDisplay — shows saved payment method details.
- * Displays last4, brand, expiry. "Update Payment Method" button opens checkout.
- */
 interface PaymentMethod {
     last4: string;
     brand: string;
@@ -762,7 +1534,33 @@ interface PaymentMethodDisplayProps {
     paymentMethod?: PaymentMethod;
     onUpdatePaymentMethod?: () => void;
     updateHref?: string;
+    appearance?: Appearance;
+}
+declare function PaymentMethodDisplay({ paymentMethod, onUpdatePaymentMethod, updateHref, appearance, }: PaymentMethodDisplayProps): React.JSX.Element;
+
+interface UsageBreakdownProps {
+    /** The `customer_usage` object from Core's `current_usage`, read on your backend. */
+    usage?: CustomerUsageData | null;
+    isLoading?: boolean;
+    error?: Error | string | null;
+    emptyMessage?: string;
+    appearance?: Appearance;
+}
+declare function UsageBreakdown({ usage, isLoading, error, emptyMessage, appearance, }: UsageBreakdownProps): React__default.ReactElement;
+
+interface UsageTrendProps {
+    /** The `usage_periods` of Core's `past_usage`, read on your backend, in any order. */
+    periods?: CustomerUsageData[] | null;
+    /**
+     * Chart the units of this feature code in each period instead of the amount. Periods without the
+     * feature show zero.
+     */
+    featureCode?: string;
+    isLoading?: boolean;
+    error?: Error | string | null;
+    emptyMessage?: string;
+    appearance?: Appearance;
 }
-declare function PaymentMethodDisplay({ paymentMethod, onUpdatePaymentMethod, updateHref, }: PaymentMethodDisplayProps): React.JSX.Element;
+declare function UsageTrend({ periods, featureCode, isLoading, error, emptyMessage, appearance, }: UsageTrendProps): React__default.ReactElement;
 
-export { BillingContext, type BillingContextValue, BillingPortal, BillingPortalError, type BillingPortalProps, type BillingPortalSession, BillingProvider, type BillingProviderProps, type CancellationActions, type CancellationApplyInput, CancellationControl, type CancellationControlProps, type CancellationInput, type CancellationOperation, type CancellationPreview, type CancellationSubscription, type Plan$1 as CatalogPlan, Checkout, CheckoutButton, type CheckoutButtonProps, type CheckoutProps, type CheckoutResult, type CheckoutStatus, type CheckoutSubscriptionResult, type ComparisonFeature, type CompletedCheckoutResult, type CreateBillingPortalSession, type CreateCheckout, type CreateCheckoutInput, FeatureGate, type FeatureGateProps, type GetCheckoutStatus, type HostedCheckoutResult, LockedOverlay, type LockedOverlayProps, type NozleClient, type PaymentMethod, PaymentMethodDisplay, type PaymentMethodDisplayProps, type Plan, PlanBadge, type PlanBadgeProps, PlanCard, type PlanCardProps, type PlanChangeActions, type PlanChangeApplyInput, PlanChangeControl, type PlanChangeControlProps, type PlanChangeInput, type PlanChangeOperation, type PlanChangePreview, type PlanChangePreviewInput, type PlanChangeState, type PlanChangeWithdrawInput, PlanComparison, type PlanComparisonProps, PlanGate, type PlanGateProps, type PortalPlan, type PricingPlan, PricingTable, type PricingTableProps, type ProcessingCheckoutResult, type ProrationPreview, type RazorpayCheckoutResult, type RazorpayVerification, type ScheduledCheckoutResult, UpgradeButton, type UpgradeButtonProps, UpgradeModal, type UpgradeModalProps, UpgradePrompt, type UpgradePromptProps, UsageAlert, type UsageAlertFeature, type UsageAlertProps, UsageDashboard, type UsageDashboardFeature, type UsageDashboardProps, UsageGate, type UsageGateProps, UsageMeter, type UsageMeterProps, type UseCheckoutResult, type UseCheckoutResult$1 as UseCheckoutSessionResult, type VerifyCheckout, getUsageMeterColor, useBillingContext, useCheckout, useCheckout$1 as useCheckoutSession, useNozleClient, useOptionalBillingContext, usePlans };
+export { Appearance, BillingContext, type BillingContextValue, type BillingFetch, BillingPortal, BillingPortalError, type BillingPortalProps, type BillingPortalSession, BillingProvider, type BillingProviderProps, BillingRequestError, type BillingSubscription, type CancellationActions, type CancellationApplyInput, CancellationControl, type CancellationControlProps, type CancellationInput, type CancellationOperation, type CancellationPreview, type CancellationSubscription, type CatalogCharge, type CatalogCreditGrantRule, type CatalogEntitlement, type Plan as CatalogPlan, type CatalogPrivilege, type ChargeUsageData, Checkout, CheckoutButton, type CheckoutButtonProps, type CheckoutProps, type CheckoutResult, type CheckoutStatus, type CheckoutSubscriptionResult, type ComparisonFeature, type ComparisonRow, type CompletedCheckoutResult, type CreateBillingPortalSession, type CreateCheckout, type CreateCheckoutInput, CreditBalance, type CreditBalanceData, type CreditBalanceProps, type CreditBalanceSource, CreditHistory, type CreditHistoryProps, type CreditOperationData, CurrentPlan, type CurrentPlanDetail, type CurrentPlanProps, type CustomerUsageData, ElementKey, type ElementProps, type EntitlementResult, FeatureGate, type FeatureGateProps, type GetCheckoutStatus, type GetPricingCardsOptions, type HostedCheckoutResult, type InvoiceData, type InvoicePageData, LockedOverlay, type LockedOverlayProps, type NozleClient, type PaymentMethod, PaymentMethodDisplay, type PaymentMethodDisplayProps, PlanBadge, type PlanBadgeProps, PlanCard, type PlanCardProps, type PlanChangeActions, type PlanChangeApplyInput, PlanChangeControl, type PlanChangeControlProps, type PlanChangeInput, type PlanChangeOperation, type PlanChangePreview, type PlanChangePreviewInput, type PlanChangeState, type PlanChangeWithdrawInput, PlanComparison, type PlanComparisonProps, PlanGate, type PlanGateProps, type PortalPlan, PoweredByNozle, type PricingCard, type PricingCatalog, type PricingEntitlement, type PricingFamily, type PricingFamilyFeature, type PricingFeature, type PricingFeatureOverrides, type PricingInterval, type PricingIntervalOption, type PricingPlan, type PricingPrivilege, PricingTable, type PricingTableProps, type ProcessingCheckoutResult, type ProrationPreview, type RazorpayCheckoutResult, type RazorpayVerification, type ScheduledCheckoutResult, UpgradeButton, type UpgradeButtonProps, UpgradeModal, type UpgradeModalProps, type UpgradePreview, UpgradePrompt, type UpgradePromptProps, UsageAlert, type UsageAlertFeature, type UsageAlertProps, UsageBreakdown, type UsageBreakdownProps, UsageDashboard, type UsageDashboardFeature, type UsageDashboardProps, UsageGate, type UsageGateProps, UsageMeter, type UsageMeterProps, type UsageResult, UsageTrend, type UsageTrendProps, type UseAppearance, type UseCheckoutResult, type UseCheckoutResult$1 as UseCheckoutSessionResult, type VerifyCheckout, comparisonRows, currentPlanMeters, getAvailableIntervals, getDefaultInterval, getPricingCards, getPricingIntervalOptions, getUsageMeterColor, planFeatures, sortPlansByPrice, usageItems, useAppearance, useBillingContext, useBillingRefresh, useCheckout, useCheckout$1 as useCheckoutSession, useCreditBalance, useCreditHistory, useEntitlement, useInvoiceDownload, useInvoices, useNozleBranding, useNozleClient, useOptionalBillingContext, usePlans, useSubscription, useUpgradePreview, useUsage };