@crediball/react 0.1.0

package/README.md

@@ -0,0 +1,78 @@
+# @crediball/react
+
+Drop-in, **unbranded** React components for showing
+[Crediball](https://github.com/filipporezzadore/Crediball) credits inside your AI
+app — a credit balance, a top-bar chip, and an automatic paywall. Self-contained
+(no CSS framework), and your end users never see Crediball branding or log into
+Crediball.
+
+```bash
+npm install @crediball/react
+```
+
+> `react >= 18` is a peer dependency. Pair this with
+> [`@crediball/sdk`](https://www.npmjs.com/package/@crediball/sdk), which does the
+> server-side metering.
+
+## Automatic paywall (recommended)
+
+Wrap your app once. When any request returns `402` with
+`{ code: "insufficient_credits" }` (your server forwarding Crediball's error), the
+paywall opens automatically — no per-call wiring.
+
+```tsx
+import { CrediballProvider } from "@crediball/react";
+
+<CrediballProvider
+  amounts={[5, 10, 20]}           // top-up options (match your dashboard packages)
+  currencySymbol="€"
+  onTopup={(amount) => checkout(amount)}  // wire to your checkout / top-up route
+>
+  <App />
+</CrediballProvider>;
+```
+
+Open or close it yourself from anywhere inside the provider:
+
+```tsx
+import { useCrediball } from "@crediball/react";
+
+const { showPaywall, hidePaywall, open } = useCrediball();
+```
+
+Set `watchFetch={false}` on the provider to disable auto-detection and drive the
+paywall only via `showPaywall()`.
+
+## Components
+
+| Export | Use |
+|---|---|
+| `CrediballProvider` | App-wide paywall + auto-detect of `402 insufficient_credits`. |
+| `useCrediball()` | `{ showPaywall, hidePaywall, open }` from inside the provider. |
+| `CreditsBadge` | A balance block for a settings page (big number + optional ≈ money value). |
+| `CreditIndicator` | A quiet balance chip for the top bar; clickable to open top-up. |
+| `PaywallModal` | The standalone paywall dialog (used by the provider; usable directly). |
+| `tokens` | The default theme tokens (colors, fonts) if you want to match the look. |
+
+```tsx
+import { CreditsBadge, CreditIndicator, PaywallModal } from "@crediball/react";
+
+// Settings page
+<CreditsBadge credits={840} rate={100} currency="EUR" onAddCredits={openTopUp} />
+
+// Top bar
+<CreditIndicator balanceLabel="6.20" onClick={openTopUp} />
+
+// Manual paywall
+<PaywallModal open={broke} amounts={[5, 10]} onAdd={topUp} onClose={close} />
+```
+
+All components accept theme overrides (e.g. `accentColor`) and inline `style`, and
+render without any CSS framework.
+
+## Principles
+- **Unbranded.** Crediball never appears to your end users.
+- **Client-side UI only.** Metering and your `cb_live_` key stay on the server —
+  see [`@crediball/sdk`](https://www.npmjs.com/package/@crediball/sdk).
+
+MIT © Crediball

package/dist/CrediballProvider.d.ts

@@ -0,0 +1,54 @@
+import { type ReactNode } from "react";
+export interface CrediballProviderProps {
+    children: ReactNode;
+    /**
+     * Top-up amounts to offer in the paywall (host decides the meaning, e.g. euros).
+     * Match these to the packages you configured in the Crediball dashboard.
+     */
+    amounts?: number[];
+    /**
+     * Called when the user picks an amount to top up. Wire this to your checkout or
+     * server-side top-up route. If omitted, picking an amount just closes the modal.
+     */
+    onTopup?: (amount: number) => void | Promise<void>;
+    /**
+     * Auto-detect insufficient-credit responses (HTTP 402 with
+     * `{ code: "insufficient_credits" }`) from any fetch() call and open the paywall
+     * automatically — no per-call wiring. Defaults to true. Set false to only open
+     * the paywall manually via useCrediball().showPaywall().
+     */
+    watchFetch?: boolean;
+    /** Allow a free-form amount entry in the paywall. */
+    allowCustom?: boolean;
+    customMin?: number;
+    customMax?: number;
+    /** Currency symbol shown in the paywall (default "€"). Match your app's billing currency. */
+    currencySymbol?: string;
+    title?: string;
+    description?: string;
+    /** Override the accent color (defaults to Action Blue). */
+    accentColor?: string;
+}
+interface CrediballContextValue {
+    /** Open the paywall modal. */
+    showPaywall: () => void;
+    /** Close the paywall modal. */
+    hidePaywall: () => void;
+    /** Whether the paywall is currently open. */
+    open: boolean;
+}
+/**
+ * Pattern B, automated. Wrap your app once:
+ *
+ *   <CrediballProvider amounts={[5, 15, 40]} onTopup={(eur) => checkout(eur)}>
+ *     <App />
+ *   </CrediballProvider>
+ *
+ * Whenever any request returns 402 `insufficient_credits` (your server forwarding
+ * Crediball's error), the paywall appears automatically — no extra code per call.
+ * You can also open it yourself with useCrediball().showPaywall().
+ */
+export declare function CrediballProvider({ children, amounts, onTopup, watchFetch, allowCustom, customMin, customMax, currencySymbol, title, description, accentColor, }: CrediballProviderProps): import("react").JSX.Element;
+/** Access the paywall controls from anywhere inside <CrediballProvider>. */
+export declare function useCrediball(): CrediballContextValue;
+export {};

package/dist/CrediballProvider.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import { PaywallModal } from "./PaywallModal";
+const CrediballContext = createContext(null);
+/**
+ * Pattern B, automated. Wrap your app once:
+ *
+ *   <CrediballProvider amounts={[5, 15, 40]} onTopup={(eur) => checkout(eur)}>
+ *     <App />
+ *   </CrediballProvider>
+ *
+ * Whenever any request returns 402 `insufficient_credits` (your server forwarding
+ * Crediball's error), the paywall appears automatically — no extra code per call.
+ * You can also open it yourself with useCrediball().showPaywall().
+ */
+export function CrediballProvider({ children, amounts = [5, 10, 20], onTopup, watchFetch = true, allowCustom = false, customMin, customMax, currencySymbol = "€", title, description, accentColor, }) {
+    const [open, setOpen] = useState(false);
+    const showPaywall = useCallback(() => setOpen(true), []);
+    const hidePaywall = useCallback(() => setOpen(false), []);
+    // Auto-open on any 402 insufficient_credits response, app-wide. We patch
+    // window.fetch and inspect a *clone* so the original response is untouched.
+    useEffect(() => {
+        if (!watchFetch || typeof window === "undefined")
+            return;
+        const original = window.fetch;
+        window.fetch = async (...args) => {
+            const res = await original(...args);
+            if (res.status === 402) {
+                res
+                    .clone()
+                    .json()
+                    .then((body) => {
+                    if (body && body.code === "insufficient_credits")
+                        setOpen(true);
+                })
+                    .catch(() => {
+                    /* non-JSON 402: ignore */
+                });
+            }
+            return res;
+        };
+        return () => {
+            window.fetch = original;
+        };
+    }, [watchFetch]);
+    const ctx = useMemo(() => ({ showPaywall, hidePaywall, open }), [showPaywall, hidePaywall, open]);
+    async function handleAdd(amount) {
+        try {
+            await onTopup?.(amount);
+        }
+        finally {
+            setOpen(false);
+        }
+    }
+    return (_jsxs(CrediballContext.Provider, { value: ctx, children: [children, _jsx(PaywallModal, { open: open, amounts: amounts, amountPrefix: `Add ${currencySymbol}`, onAdd: handleAdd, onClose: hidePaywall, allowCustom: allowCustom, customMin: customMin, customMax: customMax, currencySymbol: currencySymbol, title: title, description: description, accentColor: accentColor })] }));
+}
+/** Access the paywall controls from anywhere inside <CrediballProvider>. */
+export function useCrediball() {
+    const ctx = useContext(CrediballContext);
+    if (!ctx) {
+        throw new Error("useCrediball must be used inside <CrediballProvider>.");
+    }
+    return ctx;
+}

package/dist/CreditIndicator.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from "react";
+export interface CreditIndicatorProps {
+    /** Pre-formatted balance (e.g. "6.20"). */
+    balanceLabel: string;
+    /** Text before the balance (default "Credits:"). */
+    label?: string;
+    onClick?: () => void;
+    style?: CSSProperties;
+}
+/**
+ * Pattern C — Subtle indicator. A quiet balance chip for a host app's top bar;
+ * clickable to open a top-up flow. Minimal and non-intrusive.
+ */
+export declare function CreditIndicator({ balanceLabel, label, onClick, style, }: CreditIndicatorProps): import("react").JSX.Element;

package/dist/CreditIndicator.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from "./theme";
+/**
+ * Pattern C — Subtle indicator. A quiet balance chip for a host app's top bar;
+ * clickable to open a top-up flow. Minimal and non-intrusive.
+ */
+export function CreditIndicator({ balanceLabel, label = "Credits:", onClick, style, }) {
+    return (_jsxs("button", { onClick: onClick, style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4,
+            appearance: "none",
+            cursor: onClick ? "pointer" : "default",
+            background: tokens.canvas,
+            border: `1px solid ${tokens.hairline}`,
+            borderRadius: tokens.radiusPill,
+            color: tokens.ink,
+            fontFamily: tokens.fontStack,
+            fontSize: 14,
+            padding: "4px 12px",
+            ...style,
+        }, children: [_jsx("span", { style: { color: tokens.inkMuted }, children: label }), _jsx("span", { style: { fontWeight: 600 }, children: balanceLabel })] }));
+}

package/dist/CreditsBadge.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties } from "react";
+import { type CrediballThemeOverrides } from "./theme";
+export interface CreditsBadgeProps extends CrediballThemeOverrides {
+    /** The user's raw credit balance (the big number). */
+    credits: number;
+    /**
+     * Credits per one unit of currency. When set, a derived money value is shown
+     * underneath (e.g. credits=840, rate=100 → "≈ €8.40"). Omit to hide it.
+     */
+    rate?: number;
+    /** ISO 4217 currency for the derived value (default "EUR"). */
+    currency?: string;
+    /** Label shown above the balance. */
+    label?: string;
+    /** Called when the user clicks "Add credits". */
+    onAddCredits?: () => void;
+    /** Override the button text. */
+    addLabel?: string;
+    style?: CSSProperties;
+}
+/**
+ * Pattern A — Embedded (recommended). Drop into a profile/settings section to
+ * show the user's balance with an "Add credits" action. Shows the credit balance
+ * as the primary figure and an approximate money value beneath it. No Crediball
+ * branding.
+ */
+export declare function CreditsBadge({ credits, rate, currency, label, onAddCredits, addLabel, accentColor, style, }: CreditsBadgeProps): import("react").JSX.Element;

package/dist/CreditsBadge.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokens } from "./theme";
+function formatCredits(credits) {
+    return new Intl.NumberFormat(undefined).format(Math.round(credits));
+}
+function formatMoney(amount, currency) {
+    return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(amount);
+}
+/**
+ * Pattern A — Embedded (recommended). Drop into a profile/settings section to
+ * show the user's balance with an "Add credits" action. Shows the credit balance
+ * as the primary figure and an approximate money value beneath it. No Crediball
+ * branding.
+ */
+export function CreditsBadge({ credits, rate, currency = "EUR", label = "Credit balance", onAddCredits, addLabel = "Add credits", accentColor = tokens.primary, style, }) {
+    const showMoney = typeof rate === "number" && rate > 0;
+    return (_jsxs("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 16,
+            padding: 24,
+            border: `1px solid ${tokens.hairline}`,
+            borderRadius: tokens.radiusCard,
+            background: tokens.canvas,
+            fontFamily: tokens.fontStack,
+            ...style,
+        }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 14, color: tokens.inkMuted }, children: label }), _jsxs("div", { style: { fontSize: 28, fontWeight: 600, color: tokens.ink, letterSpacing: "-0.01em" }, children: [formatCredits(credits), _jsx("span", { style: { fontSize: 16, fontWeight: 400, color: tokens.inkMuted, marginLeft: 6 }, children: "credits" })] }), showMoney ? (_jsxs("div", { style: { fontSize: 13, color: tokens.inkMuted, marginTop: 2 }, children: ["\u2248 ", formatMoney(credits / rate, currency)] })) : null] }), _jsx("button", { onClick: onAddCredits, style: {
+                    appearance: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    background: accentColor,
+                    color: tokens.onPrimary,
+                    fontFamily: tokens.fontStack,
+                    fontSize: 14,
+                    padding: "8px 18px",
+                    borderRadius: tokens.radiusPill,
+                }, children: addLabel })] }));
+}

package/dist/PaywallModal.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties } from "react";
+import { type CrediballThemeOverrides } from "./theme";
+export interface PaywallModalProps extends CrediballThemeOverrides {
+    open: boolean;
+    /** Top-up amounts to offer (host decides the meaning, e.g. euros). */
+    amounts?: number[];
+    /** Prefix shown on each button before the amount (default "Add €"). */
+    amountPrefix?: string;
+    title?: string;
+    description?: string;
+    onAdd?: (amount: number) => void;
+    onClose?: () => void;
+    /** When true, show a free-form amount field in addition to the preset buttons. */
+    allowCustom?: boolean;
+    /** Minimum custom amount (default 1). */
+    customMin?: number;
+    /** Optional maximum custom amount. */
+    customMax?: number;
+    /** Currency symbol shown beside the custom field (default "€"). */
+    currencySymbol?: string;
+    /**
+     * When provided, a "Your balance" row is shown at the top of the modal.
+     * Useful for the paywall context so the user can see why the modal appeared.
+     */
+    balance?: number;
+    /** Credits per one currency unit — used to derive the ≈ money value beside the balance. */
+    balanceRate?: number;
+    /** ISO 4217 currency for the derived balance money value (default "EUR"). */
+    currency?: string;
+    style?: CSSProperties;
+}
+export declare function PaywallModal({ open, amounts, amountPrefix, title, description, onAdd, onClose, allowCustom, customMin, customMax, currencySymbol, balance, balanceRate, currency, accentColor, style, }: PaywallModalProps): import("react").JSX.Element | null;

package/dist/PaywallModal.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { tokens } from "./theme";
+/**
+ * Pattern B — Paywall moment. Render when a user has insufficient credits to
+ * continue. The host controls when it appears; no Crediball branding.
+ */
+function fmtCredits(n) {
+    return new Intl.NumberFormat().format(Math.round(n));
+}
+function fmtMoney(n, currency) {
+    try {
+        return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(n);
+    }
+    catch {
+        return `${n.toFixed(2)} ${currency}`;
+    }
+}
+export function PaywallModal({ open, amounts = [5, 10], amountPrefix = "Add €", title = "You need more credits to continue.", description = "Top up to keep using this feature.", onAdd, onClose, allowCustom = false, customMin = 1, customMax, currencySymbol = "€", balance, balanceRate, currency = "EUR", accentColor = tokens.primary, style, }) {
+    // Stack the top-up buttons one-per-line on narrow (mobile) screens.
+    const [narrow, setNarrow] = useState(false);
+    const [customValue, setCustomValue] = useState("");
+    const [customError, setCustomError] = useState(null);
+    useEffect(() => {
+        if (typeof window === "undefined" || !window.matchMedia)
+            return;
+        const mq = window.matchMedia("(max-width: 480px)");
+        const update = () => setNarrow(mq.matches);
+        update();
+        mq.addEventListener("change", update);
+        return () => mq.removeEventListener("change", update);
+    }, []);
+    if (!open)
+        return null;
+    function submitCustom() {
+        const amt = Number(customValue);
+        if (!Number.isFinite(amt) || amt <= 0) {
+            setCustomError("Enter a valid amount.");
+            return;
+        }
+        if (amt < customMin) {
+            setCustomError(`Minimum is ${currencySymbol}${customMin}.`);
+            return;
+        }
+        if (customMax != null && amt > customMax) {
+            setCustomError(`Maximum is ${currencySymbol}${customMax}.`);
+            return;
+        }
+        setCustomError(null);
+        onAdd?.(amt);
+    }
+    const buttonStyle = {
+        flex: 1,
+        appearance: "none",
+        border: "none",
+        cursor: "pointer",
+        background: accentColor,
+        color: tokens.onPrimary,
+        fontFamily: tokens.fontStack,
+        fontSize: 17,
+        padding: "11px 22px",
+        borderRadius: tokens.radiusPill,
+    };
+    return (_jsx("div", { role: "dialog", "aria-modal": "true", style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 1000,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 24,
+            background: tokens.overlay,
+            fontFamily: tokens.fontStack,
+        }, onClick: onClose, children: _jsxs("div", { onClick: (e) => e.stopPropagation(), style: {
+                width: "100%",
+                maxWidth: 420,
+                padding: 32,
+                borderRadius: tokens.radiusCard,
+                background: tokens.canvas,
+                ...style,
+            }, children: [balance != null && (_jsxs("div", { style: {
+                        marginBottom: 24,
+                        paddingBottom: 20,
+                        borderBottom: `1px solid ${tokens.hairline}`,
+                    }, children: [_jsx("div", { style: {
+                                fontSize: 11,
+                                fontWeight: 600,
+                                letterSpacing: "0.06em",
+                                textTransform: "uppercase",
+                                color: tokens.inkMuted,
+                                marginBottom: 4,
+                            }, children: "Your balance" }), _jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }, children: [_jsxs("span", { style: { fontSize: 22, fontWeight: 600, color: tokens.ink }, children: [fmtCredits(balance), " credits"] }), balanceRate && balanceRate > 0 ? (_jsxs("span", { style: { fontSize: 13, color: tokens.inkMuted }, children: ["\u2248 ", fmtMoney(balance / balanceRate, currency)] })) : null] })] })), _jsx("h3", { style: { margin: 0, fontSize: 24, fontWeight: 600, color: tokens.ink, letterSpacing: "-0.01em" }, children: title }), _jsx("p", { style: { marginTop: 8, marginBottom: 0, fontSize: 14, color: tokens.inkMuted }, children: description }), _jsx("div", { style: {
+                        display: "flex",
+                        flexDirection: narrow ? "column" : "row",
+                        gap: 12,
+                        marginTop: 24,
+                    }, children: amounts.map((amount) => (_jsxs("button", { onClick: () => onAdd?.(amount), style: buttonStyle, children: [amountPrefix, amount] }, amount))) }), allowCustom ? (_jsxs("div", { style: { marginTop: 12 }, children: [_jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [_jsx("span", { style: { fontSize: 17, color: tokens.inkMuted }, children: currencySymbol }), _jsx("input", { value: customValue, onChange: (e) => setCustomValue(e.target.value), inputMode: "decimal", placeholder: String(customMin), style: {
+                                        flex: 1,
+                                        minWidth: 0,
+                                        appearance: "none",
+                                        fontFamily: tokens.fontStack,
+                                        fontSize: 17,
+                                        padding: "11px 14px",
+                                        borderRadius: tokens.radiusPill,
+                                        border: `1px solid ${tokens.hairline}`,
+                                        color: tokens.ink,
+                                        background: tokens.canvas,
+                                        outline: "none",
+                                    } }), _jsx("button", { onClick: submitCustom, style: { ...buttonStyle, flex: "none" }, children: "Add" })] }), customError ? (_jsx("p", { style: { margin: "8px 0 0", fontSize: 13, color: accentColor }, children: customError })) : null] })) : null, onClose ? (_jsx("button", { onClick: onClose, style: {
+                        width: "100%",
+                        marginTop: 12,
+                        appearance: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        background: "transparent",
+                        color: tokens.inkMuted,
+                        fontFamily: tokens.fontStack,
+                        fontSize: 14,
+                        padding: "11px 22px",
+                        borderRadius: tokens.radiusPill,
+                    }, children: "Not now" })) : null] }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { CreditsBadge, type CreditsBadgeProps } from "./CreditsBadge";
+export { PaywallModal, type PaywallModalProps } from "./PaywallModal";
+export { CreditIndicator, type CreditIndicatorProps } from "./CreditIndicator";
+export { CrediballProvider, useCrediball, type CrediballProviderProps, } from "./CrediballProvider";
+export { tokens, type CrediballThemeOverrides } from "./theme";

package/dist/index.js

@@ -0,0 +1,7 @@
+// @crediball/react — drop-in, self-contained components for showing credits
+// inside a host AI app. No Crediball branding, no end-user login, no Tailwind.
+export { CreditsBadge } from "./CreditsBadge";
+export { PaywallModal } from "./PaywallModal";
+export { CreditIndicator } from "./CreditIndicator";
+export { CrediballProvider, useCrediball, } from "./CrediballProvider";
+export { tokens } from "./theme";

package/dist/theme.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Self-contained design tokens (no Tailwind / external CSS) so these components
+ * look right when dropped into any host app. Mirrors the Crediball design
+ * language: single Action-Blue accent, pill CTAs, parchment/ink neutrals.
+ */
+export declare const tokens: {
+    primary: string;
+    ink: string;
+    inkMuted: string;
+    onPrimary: string;
+    canvas: string;
+    hairline: string;
+    overlay: string;
+    fontStack: string;
+    radiusPill: number;
+    radiusCard: number;
+};
+export type CrediballThemeOverrides = {
+    /** Override the accent color (defaults to Action Blue #0066cc). */
+    accentColor?: string;
+};

package/dist/theme.js

@@ -0,0 +1,17 @@
+/**
+ * Self-contained design tokens (no Tailwind / external CSS) so these components
+ * look right when dropped into any host app. Mirrors the Crediball design
+ * language: single Action-Blue accent, pill CTAs, parchment/ink neutrals.
+ */
+export const tokens = {
+    primary: "#0066cc",
+    ink: "#1d1d1f",
+    inkMuted: "#7a7a7a",
+    onPrimary: "#ffffff",
+    canvas: "#ffffff",
+    hairline: "#e0e0e0",
+    overlay: "rgba(0, 0, 0, 0.4)",
+    fontStack: 'system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif',
+    radiusPill: 9999,
+    radiusCard: 18,
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@crediball/react",
+  "version": "0.1.0",
+  "description": "Drop-in React components for showing Crediball credits inside your AI app.",
+  "license": "MIT",
+  "author": "Filippo Rezzadore <filipporezzadore@gmail.com>",
+  "homepage": "https://crediball.app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/filipporezzadore/Crediball.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/filipporezzadore/Crediball/issues"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "paywall",
+    "credits",
+    "billing",
+    "ui",
+    "ai"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.11",
+    "typescript": "^5.6.3"
+  }
+}