@locusgraph/blocks 0.2.0 → 0.3.0

package/README.md

@@ -13,22 +13,22 @@ pnpm add @locusgraph/blocks @locusgraph/components
 
 | Block | Props |
 |---|---|
-| `UsageSummary` | `quotas`, optional `label`, `emptyText` |
-| `QuotaMeter` | `quota` (`key`, `period`, `used`, `included`) |
-| `UsageAttention` | `balanceMicroUsd`, `quotas`, `paidPlan`, `buyCreditsHref`, `upgradeHref`, `linkComponent`. Renders nothing when credits are fine and no quota is over |
-| `WalletPanel` | `balanceMicroUsd`, `debtMicroUsd`, `grants`. A Rule Grid cell |
-| `CreditPacks` | `packs`, `onBuy(packId)`, `pending`. A Rule Grid cell |
-| `PlanOptions` | `plans`, `actionFor(plan)` for plans that are not current |
-| `KeysTable` | `keys`, `actions(key)`, `highlightedId` to flash a just-created key. Dates render in the viewer's time zone after hydration |
+| `Usage` | `quotas`, optional `label`, `emptyText` |
+| `Quota` | `quota`, a `QuotaData` (`key`, `period`, `used`, `included`) |
+| `UsageAlert` | `balanceMicroUsd`, `quotas`, `paidPlan`, `buyCreditsHref`, `upgradeHref`, `linkComponent`. Renders nothing when credits are fine and no quota is over |
+| `Wallet` | `balanceMicroUsd`, `debtMicroUsd`, `grants`. A Rule Grid cell |
+| `TopUp` | `packs`, `onBuy(packId)`, `pending`. A Rule Grid cell |
+| `Plans` | `plans`, `actionFor(plan)` for plans that are not current |
+| `Keys` | `keys`, `actions(key)`, `highlightedId` to flash a just-created key. Dates render in the viewer's time zone after hydration |
 | `LocalDate` | `value` (ISO string): UTC on the server, the viewer's time zone after hydration |
-| `NoKeys` | `newKeyHref` (omit for read-only roles), `linkComponent` |
+| `KeysEmpty` | `newKeyHref` (omit for read-only roles), `linkComponent` |
 
-`WalletPanel` and `CreditPacks` are cells, so put them in a `RuleGrid`:
+`Wallet` and `TopUp` are cells, so put them in a `RuleGrid`:
 
 ```tsx
 <RuleGrid columns={2}>
-  <WalletPanel balanceMicroUsd={wallet.balanceMicroUsd} grants={grants} />
-  <CreditPacks packs={wallet.packs} onBuy={buy} pending={pending} />
+  <Wallet balanceMicroUsd={wallet.balanceMicroUsd} grants={grants} />
+  <TopUp packs={wallet.packs} onBuy={buy} pending={pending} />
 </RuleGrid>
 ```
 

package/dist/billing/plan-price.d.ts

@@ -0,0 +1,4 @@
+import type { PlanOffer } from "../types.js";
+export declare function PlanPrice({ plan }: {
+    plan: PlanOffer;
+}): import("react").JSX.Element;

package/dist/billing/plan-price.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatCents } from "@locusgraph/utils";
+const intervalLabel = { month: "/month", year: "/year" };
+export function PlanPrice({ plan }) {
+    if (plan.amountCents === undefined) {
+        return (_jsx("span", { className: "font-heading text-xl font-semibold tracking-[-0.02em] tabular-nums", children: plan.price }));
+    }
+    return (_jsxs("span", { className: "flex items-baseline gap-1", children: [_jsx("span", { className: "font-heading text-2xl font-semibold tracking-[-0.02em] tabular-nums", children: formatCents(plan.amountCents) }), plan.interval && (_jsx("span", { className: "text-sm text-muted-foreground", children: intervalLabel[plan.interval] }))] }));
+}

package/dist/billing/{plan-options.d.ts → plans.d.ts}

@@ -1,8 +1,8 @@
 import type * as React from "react";
 import type { PlanOffer } from "../types.js";
-type PlanOptionsProps = {
+type PlansProps = {
     plans: PlanOffer[];
     actionFor?: (plan: PlanOffer) => React.ReactNode;
 };
-export declare function PlanOptions({ plans, actionFor }: PlanOptionsProps): React.JSX.Element;
+export declare function Plans({ plans, actionFor }: PlansProps): React.JSX.Element;
 export {};

package/dist/billing/plans.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, RuleGrid, RuleGridCell, RuleGridFooter, RuleGridTitle, } from "@locusgraph/components";
+import { PlanPrice } from "./plan-price.js";
+export function Plans({ plans, actionFor }) {
+    return (_jsx(RuleGrid, { columns: plans.length >= 3 ? 3 : 2, children: plans.map((plan) => {
+            const action = plan.current ? null : actionFor?.(plan);
+            return (_jsxs(RuleGridCell, { "data-current": plan.current || undefined, className: "gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(RuleGridTitle, { className: "flex min-h-6 items-center gap-2", children: [plan.name, plan.current && _jsx(Badge, { variant: "secondary", children: "Current" })] }), _jsx(PlanPrice, { plan: plan })] }), _jsx("ul", { className: "flex flex-col gap-1.5 text-sm text-muted-foreground", children: plan.points.map((point) => (_jsx("li", { children: point }, point))) }), _jsx(RuleGridFooter, { className: "mt-auto", children: plan.current ? (_jsx("p", { className: "flex min-h-8 items-center text-sm text-muted-foreground", children: "Your plan" })) : (action) })] }, plan.name));
+        }) }));
+}

package/dist/billing/top-up.d.ts

@@ -0,0 +1,11 @@
+import type { CreditPack } from "../types.js";
+type TopUpProps = {
+    packs: CreditPack[];
+    onBuy: (packId: string) => void;
+    pending?: boolean;
+    pendingPackId?: string;
+    highlightedPackId?: string;
+    description?: string;
+};
+export declare function TopUp({ packs, onBuy, pending, pendingPackId, highlightedPackId, description, }: TopUpProps): import("react").JSX.Element;
+export {};

package/dist/billing/top-up.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, RuleGridCell, RuleGridDescription, RuleGridLabel, Spinner, } from "@locusgraph/components";
+import { centsToMicroUsd, formatCents, formatMicroUsd } from "@locusgraph/utils";
+function hasBonus(pack) {
+    return centsToMicroUsd(pack.priceCents) !== pack.amountMicroUsd;
+}
+export function TopUp({ packs, onBuy, pending = false, pendingPackId, highlightedPackId, description = "Pay once with Stripe. Credits never expire and never renew on their own.", }) {
+    const busy = pending || pendingPackId !== undefined;
+    return (_jsxs(RuleGridCell, { className: "gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "flex min-h-6 items-center", children: _jsx(RuleGridLabel, { children: "Buy credits" }) }), _jsx(RuleGridDescription, { children: description })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: packs.map((pack) => (_jsxs(Button, { variant: pack.id === highlightedPackId ? "default" : "outline", disabled: busy, "aria-busy": pack.id === pendingPackId || undefined, onClick: () => onBuy(pack.id), children: [pack.id === pendingPackId && _jsx(Spinner, { "aria-hidden": "true", role: undefined }), _jsx("span", { className: "tabular-nums", children: formatMicroUsd(pack.amountMicroUsd) }), hasBonus(pack) && (_jsxs("span", { className: pack.id === highlightedPackId
+                                ? "tabular-nums opacity-75"
+                                : "font-medium text-good tabular-nums", children: ["for ", formatCents(pack.priceCents)] }))] }, pack.id))) })] }));
+}

package/dist/billing/wallet.d.ts

@@ -0,0 +1,8 @@
+import type { WalletGrant } from "../types.js";
+type WalletProps = {
+    balanceMicroUsd: number;
+    debtMicroUsd?: number;
+    grants: WalletGrant[];
+};
+export declare function Wallet({ balanceMicroUsd, debtMicroUsd, grants }: WalletProps): import("react").JSX.Element;
+export {};

package/dist/billing/wallet.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, RuleGridCell, RuleGridLabel } from "@locusgraph/components";
+import { balanceLevel, formatDate, formatMicroUsd } from "@locusgraph/utils";
+const levelHint = {
+    low: { badge: "Low", text: "Add credits before usage stops.", tone: "text-warn" },
+    empty: {
+        badge: "Empty",
+        text: "Paid usage is paused until you add credits.",
+        tone: "text-destructive",
+    },
+};
+function GrantList({ grants }) {
+    return (_jsx("ul", { className: "flex flex-col divide-y divide-line", children: grants.map((grant) => (_jsxs("li", { className: "flex justify-between gap-4 py-2", children: [_jsx("span", { children: grant.label }), _jsxs("span", { className: "flex items-baseline gap-2 tabular-nums", children: [_jsx("span", { className: "font-medium text-foreground", children: formatMicroUsd(grant.remainingMicroUsd) }), _jsx("span", { className: "text-muted-foreground", children: grant.expiresAt ? `expires ${formatDate(grant.expiresAt)}` : "never expires" })] })] }, `${grant.label}:${grant.expiresAt}`))) }));
+}
+export function Wallet({ balanceMicroUsd, debtMicroUsd = 0, grants }) {
+    const level = balanceLevel(balanceMicroUsd);
+    const hint = level === "fine" ? null : levelHint[level];
+    return (_jsxs(RuleGridCell, { "data-level": level, className: "gap-4", children: [_jsxs("span", { className: "flex min-h-6 items-center justify-between", children: [_jsx(RuleGridLabel, { children: "Prepaid credits" }), hint && (_jsx(Badge, { variant: level === "empty" ? "destructive" : "secondary", className: level === "low" ? "text-warn" : undefined, children: hint.badge }))] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: `font-heading text-3xl font-semibold tracking-[-0.02em] tabular-nums ${hint?.tone ?? ""}`, children: formatMicroUsd(balanceMicroUsd) }), hint && _jsx("p", { className: "text-sm text-muted-foreground", children: hint.text })] }), _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [grants.length > 0 && _jsx(GrantList, { grants: grants }), grants.length === 0 && level !== "empty" && (_jsx("p", { className: "text-muted-foreground", children: "No credit grants to show." })), debtMicroUsd > 0 && (_jsxs("p", { className: "text-destructive", children: [formatMicroUsd(debtMicroUsd), " owed. It comes out of the next credits you add."] }))] })] }));
+}

package/dist/index.d.ts

@@ -1,10 +1,15 @@
-export { CreditPacks } from "./billing/credit-packs.js";
-export { PlanOptions } from "./billing/plan-options.js";
-export { WalletPanel } from "./billing/wallet-panel.js";
+export { Plans } from "./billing/plans.js";
+export { TopUp } from "./billing/top-up.js";
+export { Wallet } from "./billing/wallet.js";
 export { LocalDate } from "./dates/local-date.js";
-export { KeysTable } from "./keys/keys-table.js";
-export { NoKeys } from "./keys/no-keys.js";
+export { Keys } from "./keys/keys.js";
+export { KeysEmpty } from "./keys/keys-empty.js";
+export { KeysSkeleton } from "./skeletons/keys-skeleton.js";
+export { PlansSkeleton } from "./skeletons/plans-skeleton.js";
+export { TopUpSkeleton } from "./skeletons/top-up-skeleton.js";
+export { UsageSkeleton } from "./skeletons/usage-skeleton.js";
+export { WalletSkeleton } from "./skeletons/wallet-skeleton.js";
 export * from "./types.js";
-export { QuotaMeter } from "./usage/quota-meter.js";
-export { UsageAttention } from "./usage/usage-attention.js";
-export { UsageSummary } from "./usage/usage-summary.js";
+export { Quota } from "./usage/quota.js";
+export { Usage } from "./usage/usage.js";
+export { UsageAlert } from "./usage/usage-alert.js";

package/dist/index.js

@@ -1,10 +1,15 @@
-export { CreditPacks } from "./billing/credit-packs.js";
-export { PlanOptions } from "./billing/plan-options.js";
-export { WalletPanel } from "./billing/wallet-panel.js";
+export { Plans } from "./billing/plans.js";
+export { TopUp } from "./billing/top-up.js";
+export { Wallet } from "./billing/wallet.js";
 export { LocalDate } from "./dates/local-date.js";
-export { KeysTable } from "./keys/keys-table.js";
-export { NoKeys } from "./keys/no-keys.js";
+export { Keys } from "./keys/keys.js";
+export { KeysEmpty } from "./keys/keys-empty.js";
+export { KeysSkeleton } from "./skeletons/keys-skeleton.js";
+export { PlansSkeleton } from "./skeletons/plans-skeleton.js";
+export { TopUpSkeleton } from "./skeletons/top-up-skeleton.js";
+export { UsageSkeleton } from "./skeletons/usage-skeleton.js";
+export { WalletSkeleton } from "./skeletons/wallet-skeleton.js";
 export * from "./types.js";
-export { QuotaMeter } from "./usage/quota-meter.js";
-export { UsageAttention } from "./usage/usage-attention.js";
-export { UsageSummary } from "./usage/usage-summary.js";
+export { Quota } from "./usage/quota.js";
+export { Usage } from "./usage/usage.js";
+export { UsageAlert } from "./usage/usage-alert.js";

package/dist/keys/{no-keys.d.ts → keys-empty.d.ts}

@@ -1,8 +1,8 @@
 import type { LinkComponent } from "../types.js";
-type NoKeysProps = {
+type KeysEmptyProps = {
     newKeyHref?: string;
     description?: string;
     linkComponent?: LinkComponent | "a";
 };
-export declare function NoKeys({ newKeyHref, description, linkComponent: Link, }: NoKeysProps): import("react").JSX.Element;
+export declare function KeysEmpty({ newKeyHref, description, linkComponent: Link, }: KeysEmptyProps): import("react").JSX.Element;
 export {};

package/dist/keys/keys-empty.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Password as KeyRoundIcon, Add as PlusIcon } from "@carbon/icons-react";
+import { Button, RuleGrid, RuleGridCell, RuleGridDescription, RuleGridTitle, } from "@locusgraph/components";
+export function KeysEmpty({ newKeyHref, description = newKeyHref
+    ? "Create a key to let a service call LocusGraph products for this organization."
+    : "Ask an owner to create a key for this organization.", linkComponent: Link = "a", }) {
+    return (_jsx(RuleGrid, { columns: 1, children: _jsxs(RuleGridCell, { className: "items-center gap-2 py-12 text-center", children: [_jsx(KeyRoundIcon, { className: "mb-1 size-5 text-muted-foreground" }), _jsx(RuleGridTitle, { children: "No API keys yet" }), _jsx(RuleGridDescription, { className: "max-w-sm", children: description }), newKeyHref && (_jsx(Button, { asChild: true, size: "sm", className: "mt-2", children: _jsxs(Link, { href: newKeyHref, children: [_jsx(PlusIcon, {}), "New key"] }) }))] }) }));
+}

package/dist/keys/{keys-table.d.ts → keys.d.ts}

@@ -1,9 +1,9 @@
 import type * as React from "react";
 import type { ApiKeyRow } from "../types.js";
-type KeysTableProps = {
+type KeysProps = {
     keys: ApiKeyRow[];
     actions?: (key: ApiKeyRow) => React.ReactNode;
     highlightedId?: string;
 };
-export declare function KeysTable({ keys, actions, highlightedId }: KeysTableProps): React.JSX.Element;
+export declare function Keys({ keys, actions, highlightedId }: KeysProps): React.JSX.Element;
 export {};

package/dist/keys/{keys-table.js → keys.js}

@@ -4,6 +4,6 @@ import { LocalDate } from "../dates/local-date.js";
 function dateOr(value, empty) {
     return value ? _jsx(LocalDate, { value: value }) : empty;
 }
-export function KeysTable({ keys, actions, highlightedId }) {
-    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { className: "hidden md:table-cell", children: "Key" }), _jsx(TableHead, { children: "Product" }), _jsx(TableHead, { className: "hidden md:table-cell", children: "Created by" }), _jsx(TableHead, { className: "hidden sm:table-cell", children: "Created" }), _jsx(TableHead, { children: "Expires" }), actions && _jsx(TableHead, { className: "w-0" })] }) }), _jsx(TableBody, { children: keys.map((key) => (_jsxs(TableRow, { "data-new": key.id === highlightedId ? "" : undefined, className: "transition-colors duration-1000 data-new:bg-accent", children: [_jsx(TableCell, { className: "font-medium", children: key.name ?? "Untitled" }), _jsx(TableCell, { className: "hidden font-mono text-muted-foreground md:table-cell", children: key.maskedKey }), _jsx(TableCell, { children: key.productLabel }), _jsx(TableCell, { className: "hidden md:table-cell", children: key.createdBy }), _jsx(TableCell, { className: "hidden sm:table-cell", children: dateOr(key.createdAt, "") }), _jsx(TableCell, { children: dateOr(key.expiresAt, "Never") }), actions && _jsx(TableCell, { className: "text-right", children: actions(key) })] }, key.id))) })] }));
+export function Keys({ keys, actions, highlightedId }) {
+    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { className: "hidden md:table-cell", children: "Key" }), _jsx(TableHead, { children: "Product" }), _jsx(TableHead, { className: "hidden md:table-cell", children: "Created by" }), _jsx(TableHead, { className: "hidden md:table-cell", children: "Created" }), _jsx(TableHead, { children: "Expires" }), actions && _jsx(TableHead, { className: "w-0" })] }) }), _jsx(TableBody, { children: keys.map((key) => (_jsxs(TableRow, { "data-new": key.id === highlightedId ? "" : undefined, className: "transition-colors duration-1000 data-new:bg-accent", children: [_jsxs(TableCell, { className: "max-w-40", children: [_jsx("span", { className: "block truncate font-medium", children: key.name ?? "Untitled" }), _jsx("span", { className: "block truncate font-mono text-xs text-muted-foreground md:hidden", children: key.maskedKey })] }), _jsx(TableCell, { className: "hidden font-mono text-muted-foreground md:table-cell", children: key.maskedKey }), _jsx(TableCell, { children: key.productLabel }), _jsx(TableCell, { className: "hidden md:table-cell", children: key.createdBy }), _jsx(TableCell, { className: "hidden md:table-cell", children: dateOr(key.createdAt, "—") }), _jsx(TableCell, { children: dateOr(key.expiresAt, "Never") }), actions && (_jsx(TableCell, { className: "w-0 pr-2 text-right whitespace-nowrap", children: actions(key) }))] }, key.id))) })] }));
 }

package/dist/skeletons/keys-skeleton.d.ts

@@ -0,0 +1,6 @@
+type KeysSkeletonProps = {
+    rows?: number;
+    actions?: boolean;
+};
+export declare function KeysSkeleton({ rows, actions }: KeysSkeletonProps): import("react").JSX.Element;
+export {};

package/dist/skeletons/keys-skeleton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SkeletonBar, SkeletonLoadingLabel, skeletonRootProps, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@locusgraph/components";
+const columns = [
+    { name: "Key", visibility: "hidden md:table-cell", bar: "w-36" },
+    { name: "Product", visibility: "", bar: "w-20" },
+    { name: "Created by", visibility: "hidden md:table-cell", bar: "w-32" },
+    { name: "Created", visibility: "hidden md:table-cell", bar: "w-20" },
+    { name: "Expires", visibility: "", bar: "w-20" },
+];
+function NameCellSkeleton() {
+    return (_jsx(TableCell, { className: "max-w-40", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(SkeletonBar, { className: "h-4 w-28" }), _jsx(SkeletonBar, { className: "h-3 w-20 md:hidden" })] }) }));
+}
+export function KeysSkeleton({ rows = 3, actions = false }) {
+    const count = Math.max(1, Math.floor(rows));
+    return (_jsxs("div", { "data-slot": "keys-skeleton", ...skeletonRootProps, className: "w-full", children: [_jsxs(Table, { "aria-hidden": "true", children: [_jsx(TableHeader, { children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [_jsx(TableHead, { children: "Name" }), columns.map((column) => (_jsx(TableHead, { className: column.visibility, children: column.name }, column.name))), actions && _jsx(TableHead, { className: "w-0" })] }) }), _jsx(TableBody, { children: Array.from({ length: count }, (_, row) => (_jsxs(TableRow
+                        // biome-ignore lint/suspicious/noArrayIndexKey: placeholder rows have no identity
+                        , { "data-slot": "keys-skeleton-row", className: "hover:bg-transparent", children: [_jsx(NameCellSkeleton, {}), columns.map((column) => (_jsx(TableCell, { className: column.visibility, children: _jsx(SkeletonBar, { className: `h-4 ${column.bar}` }) }, column.name))), actions && (_jsx(TableCell, { className: "w-0 pr-2 text-right", children: _jsx(SkeletonBar, { className: "ml-auto h-8 w-16 rounded-full" }) }))] }, row))) })] }), _jsx(SkeletonLoadingLabel, { children: "Loading API keys\u2026" })] }));
+}

package/dist/skeletons/plans-skeleton.d.ts

@@ -0,0 +1,7 @@
+type PlansSkeletonProps = {
+    plans?: number;
+    points?: number;
+    currentIndex?: number;
+};
+export declare function PlansSkeleton({ plans, points, currentIndex }: PlansSkeletonProps): import("react").JSX.Element;
+export {};

package/dist/skeletons/plans-skeleton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RuleGrid, RuleGridCell, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps, } from "@locusgraph/components";
+export function PlansSkeleton({ plans = 2, points = 2, currentIndex = 0 }) {
+    const planCount = Math.max(1, Math.floor(plans));
+    const pointCount = Math.max(0, Math.floor(points));
+    return (_jsxs(RuleGrid, { columns: planCount >= 3 ? 3 : 2, "data-slot": "plans-skeleton", ...skeletonRootProps, children: [Array.from({ length: planCount }, (_, plan) => (_jsxs(RuleGridCell
+            // biome-ignore lint/suspicious/noArrayIndexKey: placeholder plans have no identity
+            , { "data-slot": "plan-skeleton", "aria-hidden": "true", className: "gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex min-h-6 items-center", children: _jsx(SkeletonBar, { className: "h-5 w-20" }) }), _jsx(SkeletonBar, { className: "h-8 w-28" })] }), _jsx("div", { className: "flex flex-col gap-1.5", children: Array.from({ length: pointCount }, (_, point) => (_jsx(SkeletonBar, { className: "h-4 w-40" }, point))) }), plan === currentIndex ? (_jsx("div", { className: "mt-auto flex min-h-8 items-center", children: _jsx(SkeletonBar, { className: "h-4 w-16" }) })) : (_jsx(SkeletonBar, { className: "mt-auto h-8 w-28 rounded-full" }))] }, plan))), _jsx(SkeletonLoadingLabel, { children: "Loading plans\u2026" })] }));
+}

package/dist/skeletons/top-up-skeleton.d.ts

@@ -0,0 +1,5 @@
+type TopUpSkeletonProps = {
+    packs?: number;
+};
+export declare function TopUpSkeleton({ packs }: TopUpSkeletonProps): import("react").JSX.Element;
+export {};

package/dist/skeletons/top-up-skeleton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RuleGridCell, RuleGridLabel, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps, } from "@locusgraph/components";
+export function TopUpSkeleton({ packs = 3 }) {
+    const count = Math.max(1, Math.floor(packs));
+    return (_jsxs(RuleGridCell, { "data-slot": "top-up-skeleton", ...skeletonRootProps, className: "gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "flex min-h-6 items-center", children: _jsx(RuleGridLabel, { children: "Buy credits" }) }), _jsx(SkeletonBar, { className: "h-4 w-full max-w-72" }), _jsx(SkeletonBar, { className: "h-4 w-3/4 max-w-56" })] }), _jsx("div", { className: "flex flex-wrap gap-2", "aria-hidden": "true", children: Array.from({ length: count }, (_, index) => (_jsx(SkeletonBar
+                // biome-ignore lint/suspicious/noArrayIndexKey: placeholder packs have no identity
+                , { "data-slot": "credit-pack-skeleton", className: "h-9 w-24 rounded-full" }, index))) }), _jsx(SkeletonLoadingLabel, { children: "Loading credit packs\u2026" })] }));
+}

package/dist/skeletons/usage-skeleton.d.ts

@@ -0,0 +1,6 @@
+type UsageSkeletonProps = {
+    quotas?: number;
+    label?: string;
+};
+export declare function UsageSkeleton({ quotas, label }: UsageSkeletonProps): import("react").JSX.Element;
+export {};

package/dist/skeletons/usage-skeleton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RuleGrid, RuleGridCell, RuleGridLabel, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps, } from "@locusgraph/components";
+function QuotaSkeleton() {
+    return (_jsxs("div", { "data-slot": "quota-skeleton", "aria-hidden": "true", className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [_jsx(SkeletonBar, { className: "h-4 w-28" }), _jsx(SkeletonBar, { className: "h-4 w-36" })] }), _jsx(SkeletonBar, { className: "h-2 w-full rounded-full" })] }));
+}
+export function UsageSkeleton({ quotas = 2, label = "Usage" }) {
+    const count = Math.max(1, Math.floor(quotas));
+    return (_jsx(RuleGrid, { columns: 1, "data-slot": "usage-skeleton", ...skeletonRootProps, children: _jsxs(RuleGridCell, { className: "gap-5", children: [_jsx(RuleGridLabel, { children: label }), Array.from({ length: count }, (_, index) => (_jsx(QuotaSkeleton, {}, index))), _jsx(SkeletonLoadingLabel, { children: "Loading usage\u2026" })] }) }));
+}

package/dist/skeletons/wallet-skeleton.d.ts

@@ -0,0 +1,5 @@
+type WalletSkeletonProps = {
+    grants?: number;
+};
+export declare function WalletSkeleton({ grants }: WalletSkeletonProps): import("react").JSX.Element;
+export {};

package/dist/skeletons/wallet-skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RuleGridCell, RuleGridLabel, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps, } from "@locusgraph/components";
+export function WalletSkeleton({ grants = 1 }) {
+    const count = Math.max(0, Math.floor(grants));
+    return (_jsxs(RuleGridCell, { "data-slot": "wallet-skeleton", ...skeletonRootProps, className: "gap-4", children: [_jsx("span", { className: "flex min-h-6 items-center justify-between", children: _jsx(RuleGridLabel, { children: "Prepaid credits" }) }), _jsx("div", { className: "flex flex-col gap-1", "aria-hidden": "true", children: _jsx(SkeletonBar, { className: "h-9 w-32" }) }), _jsx("ul", { className: "flex flex-col divide-y divide-line", "aria-hidden": "true", children: Array.from({ length: count }, (_, index) => (_jsxs("li", { "data-slot": "wallet-grant-skeleton", className: "flex justify-between gap-4 py-2", children: [_jsx(SkeletonBar, { className: "h-4 w-24" }), _jsx(SkeletonBar, { className: "h-4 w-40" })] }, index))) }), _jsx(SkeletonLoadingLabel, { children: "Loading credits\u2026" })] }));
+}

package/dist/types.d.ts

@@ -1,10 +1,11 @@
 export type { LinkComponent } from "@locusgraph/components";
 export type QuotaPeriod = "month" | "lifetime";
-export type Quota = {
+export type QuotaData = {
     key: string;
     period: QuotaPeriod;
     used: number;
     included: number;
+    label?: string;
 };
 export type CreditPack = {
     id: string;
@@ -16,9 +17,12 @@ export type WalletGrant = {
     remainingMicroUsd: number;
     expiresAt: string | null;
 };
+export type PlanInterval = "month" | "year";
 export type PlanOffer = {
     name: string;
     price: string;
+    amountCents?: number;
+    interval?: PlanInterval;
     points: string[];
     current: boolean;
 };

package/dist/usage/quota.d.ts

@@ -0,0 +1,4 @@
+import { type QuotaData } from "../types.js";
+export declare function Quota({ quota }: {
+    quota: QuotaData;
+}): import("react").JSX.Element;

package/dist/usage/quota.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress } from "@locusgraph/components";
+import { formatCount, quotaPercent, quotaStatus } from "@locusgraph/utils";
+import { periodLabel } from "../types.js";
+const statusIndicator = {
+    ok: "",
+    near: "[&_[data-slot=progress-indicator]]:bg-warn",
+    over: "[&_[data-slot=progress-indicator]]:bg-destructive",
+};
+function QuotaStatusNote({ quota }) {
+    const status = quotaStatus(quota);
+    if (status === "over") {
+        return (_jsxs("span", { className: "font-medium text-destructive", children: [formatCount(quota.used - quota.included), " over"] }));
+    }
+    if (status === "near") {
+        return _jsxs("span", { className: "font-medium text-warn", children: [quotaPercent(quota), "%"] });
+    }
+    return null;
+}
+export function Quota({ quota }) {
+    const percent = quotaPercent(quota);
+    const name = quota.label ?? quota.key;
+    return (_jsxs("div", { "data-slot": "quota", "data-status": quotaStatus(quota), className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 text-sm", children: [_jsx("span", { className: quota.label ? "text-muted-foreground" : "font-mono text-muted-foreground", children: name }), _jsxs("span", { className: "flex items-baseline gap-2 tabular-nums", children: [_jsxs("span", { className: "font-medium text-foreground", children: [formatCount(quota.used), " of ", formatCount(quota.included), " ", periodLabel(quota.period)] }), _jsx(QuotaStatusNote, { quota: quota })] })] }), _jsx(Progress, { value: percent, "aria-label": `${name} ${percent}% of quota`, className: statusIndicator[quotaStatus(quota)] })] }));
+}

package/dist/usage/usage-alert.d.ts

@@ -0,0 +1,11 @@
+import { type LinkComponent, type QuotaData } from "../types.js";
+type UsageAlertProps = {
+    balanceMicroUsd: number | null;
+    quotas: QuotaData[];
+    paidPlan: boolean;
+    buyCreditsHref: string;
+    upgradeHref: string;
+    linkComponent?: LinkComponent | "a";
+};
+export declare function UsageAlert({ balanceMicroUsd, quotas, paidPlan, buyCreditsHref, upgradeHref, linkComponent: Link, }: UsageAlertProps): import("react").JSX.Element | null;
+export {};

package/dist/usage/usage-alert.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Warning as CircleAlertIcon } from "@carbon/icons-react";
+import { Alert, AlertDescription, AlertTitle, Button } from "@locusgraph/components";
+import { balanceLevel, formatCount, formatMicroUsd, quotaStatus, } from "@locusgraph/utils";
+import { periodLabel } from "../types.js";
+function attentionTitle(level, overCount) {
+    if (level === "empty")
+        return "Out of credits";
+    if (overCount === 0)
+        return "Credits are running low";
+    return level === "low"
+        ? "Usage is over your plan and credits are low"
+        : "Usage is over your plan";
+}
+const toneClasses = {
+    warn: "bg-warn/5 [&>svg]:text-warn",
+    destructive: "bg-destructive/5 text-card-foreground [&>svg]:text-destructive",
+};
+export function UsageAlert({ balanceMicroUsd, quotas, paidPlan, buyCreditsHref, upgradeHref, linkComponent: Link = "a", }) {
+    const level = balanceMicroUsd === null ? "fine" : balanceLevel(balanceMicroUsd);
+    const over = quotas.filter((quota) => quotaStatus(quota) === "over");
+    if (level === "fine" && over.length === 0)
+        return null;
+    const empty = level === "empty";
+    const upgradeFirst = !paidPlan && over.length > 0;
+    return (_jsxs(Alert, { className: toneClasses[empty ? "destructive" : "warn"], children: [_jsx(CircleAlertIcon, {}), _jsx(AlertTitle, { children: attentionTitle(level, over.length) }), _jsxs(AlertDescription, { className: "flex flex-col items-start gap-3", children: [_jsxs("ul", { className: "flex flex-col gap-1", children: [over.map((quota) => (_jsxs("li", { children: [_jsx("span", { className: quota.label ? undefined : "font-mono", children: quota.label ?? quota.key }), " ", "is at ", formatCount(quota.used), " of ", formatCount(quota.included), " ", periodLabel(quota.period), "."] }, quota.key))), balanceMicroUsd !== null && level !== "fine" && (_jsx("li", { children: empty
+                                    ? "Paid usage is paused until you add credits."
+                                    : `${formatMicroUsd(balanceMicroUsd)} of credits left.` }))] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [!paidPlan && (_jsx(Button, { asChild: true, size: "sm", variant: upgradeFirst ? "default" : "ghost", children: _jsx(Link, { href: upgradeHref, children: "Upgrade to Pro" }) })), _jsx(Button, { asChild: true, size: "sm", variant: upgradeFirst ? "ghost" : "default", children: _jsx(Link, { href: buyCreditsHref, children: "Buy credits" }) })] })] })] }));
+}

package/dist/usage/usage.d.ts

@@ -0,0 +1,8 @@
+import type { QuotaData } from "../types.js";
+type UsageProps = {
+    quotas: QuotaData[];
+    label?: string;
+    emptyText?: string;
+};
+export declare function Usage({ quotas, label, emptyText, }: UsageProps): import("react").JSX.Element;
+export {};

package/dist/usage/{usage-summary.js → usage.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RuleGrid, RuleGridCell, RuleGridLabel } from "@locusgraph/components";
-import { QuotaMeter } from "./quota-meter.js";
-export function UsageSummary({ quotas, label = "Usage", emptyText = "No plan includes metered usage yet.", }) {
-    return (_jsx(RuleGrid, { columns: 1, children: _jsxs(RuleGridCell, { className: "gap-5", children: [_jsx(RuleGridLabel, { children: label }), quotas.length > 0 ? (quotas.map((quota) => _jsx(QuotaMeter, { quota: quota }, quota.key))) : (_jsx("p", { className: "text-sm text-muted-foreground", children: emptyText }))] }) }));
+import { Quota } from "./quota.js";
+export function Usage({ quotas, label = "Usage", emptyText = "No plan includes metered usage yet.", }) {
+    return (_jsx(RuleGrid, { columns: 1, children: _jsxs(RuleGridCell, { className: "gap-5", children: [_jsx(RuleGridLabel, { children: label }), quotas.length > 0 ? (quotas.map((quota) => _jsx(Quota, { quota: quota }, quota.key))) : (_jsx("p", { className: "text-sm text-muted-foreground", children: emptyText }))] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@locusgraph/blocks",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Product sections built from @locusgraph/components: usage meters and alerts, wallet, credit packs, plan options and API keys.",
   "license": "MIT",
   "repository": {
@@ -29,16 +29,16 @@
     "provenance": true
   },
   "peerDependencies": {
-    "@locusgraph/components": "^0.1.1",
+    "@locusgraph/components": "^0.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@locusgraph/utils": "0.1.1",
-    "lucide-react": "^1.28.0"
+    "@carbon/icons-react": "11.89.0",
+    "@locusgraph/utils": "0.1.1"
   },
   "devDependencies": {
-    "@locusgraph/components": "0.1.1",
+    "@locusgraph/components": "0.2.0",
     "@locusgraph/config": "0.1.1",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",

package/dist/billing/credit-packs.d.ts

@@ -1,9 +0,0 @@
-import type { CreditPack } from "../types.js";
-type CreditPacksProps = {
-    packs: CreditPack[];
-    onBuy: (packId: string) => void;
-    pending?: boolean;
-    description?: string;
-};
-export declare function CreditPacks({ packs, onBuy, pending, description, }: CreditPacksProps): import("react").JSX.Element;
-export {};

package/dist/billing/credit-packs.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, RuleGridCell, RuleGridDescription, RuleGridLabel } from "@locusgraph/components";
-import { centsToMicroUsd, formatCents, formatMicroUsd } from "@locusgraph/utils";
-export function CreditPacks({ packs, onBuy, pending = false, description = "Pay once with Stripe. Credits never expire and never renew on their own.", }) {
-    return (_jsxs(RuleGridCell, { className: "gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(RuleGridLabel, { children: "Buy credits" }), _jsx(RuleGridDescription, { children: description })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: packs.map((pack) => (_jsxs(Button, { variant: "outline", disabled: pending, onClick: () => onBuy(pack.id), children: [_jsx("span", { className: "tabular-nums", children: formatMicroUsd(pack.amountMicroUsd) }), centsToMicroUsd(pack.priceCents) !== pack.amountMicroUsd && (_jsxs("span", { className: "text-muted-foreground tabular-nums", children: ["for ", formatCents(pack.priceCents)] }))] }, pack.id))) })] }));
-}

package/dist/billing/plan-options.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, RuleGrid, RuleGridCell, RuleGridDescription, RuleGridTitle, } from "@locusgraph/components";
-export function PlanOptions({ plans, actionFor }) {
-    return (_jsx(RuleGrid, { columns: plans.length >= 3 ? 3 : 2, children: plans.map((plan) => {
-            const action = plan.current ? null : actionFor?.(plan);
-            return (_jsxs(RuleGridCell, { "data-current": plan.current || undefined, className: "gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(RuleGridTitle, { className: "flex items-center gap-2", children: [plan.name, plan.current && _jsx(Badge, { variant: "secondary", children: "Current" })] }), _jsx(RuleGridDescription, { children: plan.price })] }), _jsx("ul", { className: "flex flex-col gap-1.5 text-sm text-muted-foreground", children: plan.points.map((point) => (_jsx("li", { children: point }, point))) }), action && _jsx("div", { className: "mt-auto", children: action })] }, plan.name));
-        }) }));
-}

package/dist/billing/wallet-panel.d.ts

@@ -1,8 +0,0 @@
-import type { WalletGrant } from "../types.js";
-type WalletPanelProps = {
-    balanceMicroUsd: number;
-    debtMicroUsd?: number;
-    grants: WalletGrant[];
-};
-export declare function WalletPanel({ balanceMicroUsd, debtMicroUsd, grants }: WalletPanelProps): import("react").JSX.Element;
-export {};

package/dist/billing/wallet-panel.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, RuleGridCell, RuleGridLabel } from "@locusgraph/components";
-import { balanceLevel, formatDate, formatMicroUsd } from "@locusgraph/utils";
-const levelHint = {
-    low: { badge: "Low", text: "Add credits before usage stops.", tone: "text-warn" },
-    empty: {
-        badge: "Empty",
-        text: "Paid usage is paused until you add credits.",
-        tone: "text-destructive",
-    },
-};
-export function WalletPanel({ balanceMicroUsd, debtMicroUsd = 0, grants }) {
-    const level = balanceLevel(balanceMicroUsd);
-    const hint = level === "fine" ? null : levelHint[level];
-    return (_jsxs(RuleGridCell, { "data-level": level, className: "gap-4", children: [_jsxs("span", { className: "flex items-center justify-between", children: [_jsx(RuleGridLabel, { children: "Prepaid credits" }), hint && (_jsx(Badge, { variant: level === "empty" ? "destructive" : "secondary", className: level === "low" ? "text-warn" : undefined, children: hint.badge }))] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "font-heading text-3xl font-semibold tracking-[-0.02em] tabular-nums", children: formatMicroUsd(balanceMicroUsd) }), hint && _jsx("p", { className: `text-sm ${hint.tone}`, children: hint.text })] }), _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [grants.length > 0 ? (_jsx("ul", { className: "flex flex-col divide-y divide-line", children: grants.map((grant) => (_jsxs("li", { className: "flex justify-between gap-4 py-2", children: [_jsx("span", { children: grant.label }), _jsxs("span", { className: "text-muted-foreground tabular-nums", children: [formatMicroUsd(grant.remainingMicroUsd), " \u00B7", " ", grant.expiresAt ? `expires ${formatDate(grant.expiresAt)}` : "never expires"] })] }, `${grant.label}:${grant.expiresAt}`))) })) : (_jsx("p", { className: "text-muted-foreground", children: "No credits yet. Buy a pack to keep using paid features." })), debtMicroUsd > 0 && (_jsxs("p", { className: "text-destructive", children: [formatMicroUsd(debtMicroUsd), " owed. It comes out of the next credits you add."] }))] })] }));
-}

package/dist/keys/no-keys.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, RuleGrid, RuleGridCell, RuleGridDescription, RuleGridLabel, } from "@locusgraph/components";
-import { KeyRoundIcon, PlusIcon } from "lucide-react";
-export function NoKeys({ newKeyHref, description = newKeyHref
-    ? "Create a key to let a service call LocusGraph products for this organization."
-    : "Ask an owner to create a key for this organization.", linkComponent: Link = "a", }) {
-    return (_jsx(RuleGrid, { columns: 1, children: _jsxs(RuleGridCell, { className: "items-center gap-3 py-12 text-center", children: [_jsx(KeyRoundIcon, { className: "size-5 text-muted-foreground" }), _jsx(RuleGridLabel, { children: "No API keys yet" }), _jsx(RuleGridDescription, { className: "max-w-sm", children: description }), newKeyHref && (_jsx(Button, { asChild: true, size: "sm", children: _jsxs(Link, { href: newKeyHref, children: [_jsx(PlusIcon, {}), "New key"] }) }))] }) }));
-}

package/dist/usage/quota-meter.d.ts

@@ -1,4 +0,0 @@
-import { type Quota } from "../types.js";
-export declare function QuotaMeter({ quota }: {
-    quota: Quota;
-}): import("react").JSX.Element;

package/dist/usage/quota-meter.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Progress } from "@locusgraph/components";
-import { formatCount, quotaPercent, quotaStatus } from "@locusgraph/utils";
-import { periodLabel } from "../types.js";
-const statusIndicator = {
-    ok: "",
-    near: "[&_[data-slot=progress-indicator]]:bg-warn",
-    over: "[&_[data-slot=progress-indicator]]:bg-destructive",
-};
-export function QuotaMeter({ quota }) {
-    const percent = quotaPercent(quota);
-    return (_jsxs("div", { "data-slot": "quota-meter", "data-status": quotaStatus(quota), className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-4 text-sm", children: [_jsx("span", { className: "font-mono", children: quota.key }), _jsxs("span", { className: "text-muted-foreground tabular-nums", children: [formatCount(quota.used), " of ", formatCount(quota.included), " ", periodLabel(quota.period)] })] }), _jsx(Progress, { value: percent, "aria-label": `${quota.key} ${percent}% of quota`, className: statusIndicator[quotaStatus(quota)] })] }));
-}

package/dist/usage/usage-attention.d.ts

@@ -1,11 +0,0 @@
-import { type LinkComponent, type Quota } from "../types.js";
-type UsageAttentionProps = {
-    balanceMicroUsd: number | null;
-    quotas: Quota[];
-    paidPlan: boolean;
-    buyCreditsHref: string;
-    upgradeHref: string;
-    linkComponent?: LinkComponent | "a";
-};
-export declare function UsageAttention({ balanceMicroUsd, quotas, paidPlan, buyCreditsHref, upgradeHref, linkComponent: Link, }: UsageAttentionProps): import("react").JSX.Element | null;
-export {};

package/dist/usage/usage-attention.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, AlertDescription, AlertTitle, Button } from "@locusgraph/components";
-import { balanceLevel, formatCount, formatMicroUsd, quotaStatus } from "@locusgraph/utils";
-import { CircleAlertIcon } from "lucide-react";
-import { periodLabel } from "../types.js";
-function attentionTitle(empty, overCount) {
-    if (empty)
-        return "Out of credits";
-    return overCount > 0 ? "Usage is over your plan" : "Credits are running low";
-}
-export function UsageAttention({ balanceMicroUsd, quotas, paidPlan, buyCreditsHref, upgradeHref, linkComponent: Link = "a", }) {
-    const level = balanceMicroUsd === null ? "fine" : balanceLevel(balanceMicroUsd);
-    const over = quotas.filter((quota) => quotaStatus(quota) === "over");
-    if (level === "fine" && over.length === 0)
-        return null;
-    const empty = level === "empty";
-    return (_jsxs(Alert, { variant: empty ? "destructive" : "default", className: empty ? undefined : "text-warn *:data-[slot=alert-description]:text-warn/85", children: [_jsx(CircleAlertIcon, {}), _jsx(AlertTitle, { children: attentionTitle(empty, over.length) }), _jsxs(AlertDescription, { className: "flex flex-wrap items-end justify-between gap-4", children: [_jsxs("ul", { className: "flex flex-col gap-1", children: [over.map((quota) => (_jsxs("li", { children: [_jsx("span", { className: "font-mono", children: quota.key }), " is at ", formatCount(quota.used), " of", " ", formatCount(quota.included), " ", periodLabel(quota.period), "."] }, quota.key))), balanceMicroUsd !== null && level !== "fine" && (_jsx("li", { children: empty
-                                    ? "Paid usage is paused until you add credits."
-                                    : `${formatMicroUsd(balanceMicroUsd)} of credits left.` }))] }), _jsxs("div", { className: "flex items-center gap-4", children: [!paidPlan && (_jsx(Link, { href: upgradeHref, className: "text-sm text-foreground underline-offset-4 hover:underline", children: "Upgrade to Pro" })), _jsx(Button, { asChild: true, size: "sm", children: _jsx(Link, { href: buyCreditsHref, children: "Buy credits" }) })] })] })] }));
-}

package/dist/usage/usage-summary.d.ts

@@ -1,8 +0,0 @@
-import type { Quota } from "../types.js";
-type UsageSummaryProps = {
-    quotas: Quota[];
-    label?: string;
-    emptyText?: string;
-};
-export declare function UsageSummary({ quotas, label, emptyText, }: UsageSummaryProps): import("react").JSX.Element;
-export {};