@crediball/react 0.3.6 → 0.4.0

package/dist/variables/CrediballBalance.d.ts

@@ -0,0 +1,26 @@
+import type { CSSProperties, ReactNode } from "react";
+export interface CrediballBalanceRenderProps {
+    balance: number | null;
+    loading: boolean;
+}
+export interface CrediballBalanceProps {
+    className?: string;
+    style?: CSSProperties;
+    /** Format the raw number. Defaults to a locale-formatted whole number. */
+    format?: (balance: number) => string;
+    /**
+     * Static content overrides the balance entirely. Pass a function to render
+     * fully custom markup from the live value (the escape hatch for anything
+     * this component's default <span> doesn't cover).
+     */
+    children?: ReactNode | ((props: CrediballBalanceRenderProps) => ReactNode);
+}
+/**
+ * Tier 2 — a "variable" you drop anywhere inside <CrediballProvider>. Renders
+ * as an inline <span> that inherits the surrounding font, size, and color
+ * (`font: inherit; color: currentColor`) so it looks native wherever it's
+ * placed — a navbar, a sentence, a settings row.
+ *
+ *   <p>You have <CrediballBalance /> credits left.</p>
+ */
+export declare function CrediballBalance({ className, style, format, children }: CrediballBalanceProps): import("react").JSX.Element;

package/dist/variables/CrediballBalance.js

@@ -0,0 +1,19 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useCrediball } from "../CrediballProvider";
+import { formatCredits } from "../format";
+/**
+ * Tier 2 — a "variable" you drop anywhere inside <CrediballProvider>. Renders
+ * as an inline <span> that inherits the surrounding font, size, and color
+ * (`font: inherit; color: currentColor`) so it looks native wherever it's
+ * placed — a navbar, a sentence, a settings row.
+ *
+ *   <p>You have <CrediballBalance /> credits left.</p>
+ */
+export function CrediballBalance({ className, style, format = formatCredits, children }) {
+    const { balance, loading } = useCrediball();
+    if (typeof children === "function") {
+        return _jsx(_Fragment, { children: children({ balance, loading }) });
+    }
+    return (_jsx("span", { className: className, style: { font: "inherit", color: "currentColor", ...style }, children: children ?? (balance == null ? "—" : format(balance)) }));
+}

package/dist/variables/CrediballLowCreditWarning.d.ts

@@ -0,0 +1,25 @@
+import type { CSSProperties, ReactNode } from "react";
+export interface CrediballLowCreditWarningRenderProps {
+    balance: number | null;
+    isLow: boolean;
+}
+export interface CrediballLowCreditWarningProps {
+    className?: string;
+    style?: CSSProperties;
+    /**
+     * Override the provider's default threshold (highest-cost active event) for
+     * just this instance — e.g. warn earlier next to an expensive action.
+     */
+    threshold?: number;
+    /** Message shown when low. Defaults to a generic nudge. */
+    message?: string;
+    children?: ReactNode | ((props: CrediballLowCreditWarningRenderProps) => ReactNode);
+}
+/**
+ * Tier 2 — renders nothing until the user's balance is low, then shows a
+ * message inline. Place it next to a specific action ("this costs 20 credits")
+ * or globally near the top of the app.
+ *
+ *   <CrediballLowCreditWarning threshold={20} message="Not enough for one more image." />
+ */
+export declare function CrediballLowCreditWarning({ className, style, threshold, message, children, }: CrediballLowCreditWarningProps): import("react").JSX.Element | null;

package/dist/variables/CrediballLowCreditWarning.js

@@ -0,0 +1,20 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useCrediball } from "../CrediballProvider";
+/**
+ * Tier 2 — renders nothing until the user's balance is low, then shows a
+ * message inline. Place it next to a specific action ("this costs 20 credits")
+ * or globally near the top of the app.
+ *
+ *   <CrediballLowCreditWarning threshold={20} message="Not enough for one more image." />
+ */
+export function CrediballLowCreditWarning({ className, style, threshold, message = "Low credit balance — top up to keep going.", children, }) {
+    const { balance, isLow: contextIsLow } = useCrediball();
+    const isLow = threshold != null && balance != null ? balance < threshold : contextIsLow;
+    if (!isLow)
+        return null;
+    if (typeof children === "function") {
+        return _jsx(_Fragment, { children: children({ balance, isLow }) });
+    }
+    return (_jsx("span", { className: className, style: { font: "inherit", color: "currentColor", ...style }, children: children ?? message }));
+}

package/dist/variables/CrediballTopUpButton.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, ReactNode } from "react";
+import { type CrediballThemeOverrides } from "../theme";
+export interface CrediballTopUpButtonProps extends CrediballThemeOverrides {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    /** Defaults to opening the provider's paywall. */
+    onClick?: () => void;
+}
+/**
+ * Tier 2 — a themeable call-to-action that opens the paywall. Inherits the
+ * surrounding font; background/text color come from the same `--crediball-*`
+ * variables as every other component, so it matches PaywallModal and
+ * CreditsBadge without extra styling.
+ *
+ *   <CrediballTopUpButton>Get more credits</CrediballTopUpButton>
+ */
+export declare function CrediballTopUpButton({ className, style, children, onClick, accentColor }: CrediballTopUpButtonProps): import("react").JSX.Element;

package/dist/variables/CrediballTopUpButton.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCrediball } from "../CrediballProvider";
+import { theme, accentStyle } from "../theme";
+/**
+ * Tier 2 — a themeable call-to-action that opens the paywall. Inherits the
+ * surrounding font; background/text color come from the same `--crediball-*`
+ * variables as every other component, so it matches PaywallModal and
+ * CreditsBadge without extra styling.
+ *
+ *   <CrediballTopUpButton>Get more credits</CrediballTopUpButton>
+ */
+export function CrediballTopUpButton({ className, style, children, onClick, accentColor }) {
+    const { openPaywall } = useCrediball();
+    return (_jsx("button", { type: "button", className: className, onClick: onClick ?? openPaywall, style: {
+            font: "inherit",
+            appearance: "none",
+            border: "none",
+            cursor: "pointer",
+            color: theme.onAccent,
+            background: theme.accent,
+            borderRadius: theme.radiusPill,
+            padding: "0.5em 1.1em",
+            ...accentStyle(accentColor),
+            ...style,
+        }, children: children ?? "Add credits" }));
+}

package/dist/variables/CrediballUsage.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { UsagePeriod } from "@crediball/core";
+export interface CrediballUsageRenderProps {
+    usage: UsagePeriod | null;
+    value: number | null;
+    loading: boolean;
+}
+export interface CrediballUsageProps {
+    className?: string;
+    style?: CSSProperties;
+    /** Show credits consumed this period, or credits remaining. Default "used". */
+    show?: "used" | "remaining";
+    /** Format the raw number. Defaults to a locale-formatted whole number. */
+    format?: (value: number) => string;
+    children?: ReactNode | ((props: CrediballUsageRenderProps) => ReactNode);
+}
+/**
+ * Tier 2 — credits consumed in the user's current period (their subscription's
+ * billing cycle, or the calendar month for non-subscribers). Inline, inherits
+ * host styling. Pass `show="remaining"` to render the balance instead.
+ *
+ *   <p><CrediballUsage /> credits used this month.</p>
+ */
+export declare function CrediballUsage({ className, style, show, format, children, }: CrediballUsageProps): import("react").JSX.Element;

package/dist/variables/CrediballUsage.js

@@ -0,0 +1,19 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useCrediball } from "../CrediballProvider";
+import { formatCredits } from "../format";
+/**
+ * Tier 2 — credits consumed in the user's current period (their subscription's
+ * billing cycle, or the calendar month for non-subscribers). Inline, inherits
+ * host styling. Pass `show="remaining"` to render the balance instead.
+ *
+ *   <p><CrediballUsage /> credits used this month.</p>
+ */
+export function CrediballUsage({ className, style, show = "used", format = formatCredits, children, }) {
+    const { usage, remaining, loading } = useCrediball();
+    const value = show === "remaining" ? remaining : (usage?.usedCredits ?? null);
+    if (typeof children === "function") {
+        return _jsx(_Fragment, { children: children({ usage, value, loading }) });
+    }
+    return (_jsx("span", { className: className, style: { font: "inherit", color: "currentColor", ...style }, children: children ?? (value == null ? "—" : format(value)) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediball/react",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "Drop-in React components for showing Crediball credits inside your AI app.",
   "license": "MIT",
   "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",
@@ -50,6 +50,9 @@
   "peerDependencies": {
     "react": ">=18"
   },
+  "dependencies": {
+    "@crediball/core": "^0.1.0"
+  },
   "devDependencies": {
     "@types/react": "^18.3.11",
     "typescript": "^5.6.3"