@locusgraph/blocks 0.3.0 → 0.3.2

package/dist/billing/plan-price.js

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

package/dist/billing/plans.js

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

@@ -1,12 +1,48 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, RuleGridCell, RuleGridDescription, RuleGridLabel, Spinner, } from "@locusgraph/components";
+import { Button, RuleGridCell, RuleGridDescription, RuleGridLabel, Spinner } from "@locusgraph/components";
 import { centsToMicroUsd, formatCents, formatMicroUsd } from "@locusgraph/utils";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function hasBonus(pack) {
-    return centsToMicroUsd(pack.priceCents) !== pack.amountMicroUsd;
+  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))) })] }));
+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 /*#__PURE__*/_jsxs(RuleGridCell, {
+    className: "gap-4",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-1.5",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "flex min-h-6 items-center",
+        children: /*#__PURE__*/_jsx(RuleGridLabel, {
+          children: "Buy credits"
+        })
+      }), /*#__PURE__*/_jsx(RuleGridDescription, {
+        children: description
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "flex flex-wrap gap-2",
+      children: packs.map(pack => /*#__PURE__*/_jsxs(Button, {
+        variant: pack.id === highlightedPackId ? "default" : "outline",
+        disabled: busy,
+        "aria-busy": pack.id === pendingPackId || undefined,
+        onClick: () => onBuy(pack.id),
+        children: [pack.id === pendingPackId && /*#__PURE__*/_jsx(Spinner, {
+          "aria-hidden": "true",
+          role: undefined
+        }), /*#__PURE__*/_jsx("span", {
+          className: "tabular-nums",
+          children: formatMicroUsd(pack.amountMicroUsd)
+        }), hasBonus(pack) && /*#__PURE__*/_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.js

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

package/dist/dates/local-date.js

@@ -1,10 +1,54 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
-const utcFormat = new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeZone: "UTC" });
-const localFormat = new Intl.DateTimeFormat("en-US", { dateStyle: "medium" });
-export function LocalDate({ value }) {
-    const [hydrated, setHydrated] = useState(false);
-    useEffect(() => setHydrated(true), []);
-    return (_jsx("time", { dateTime: value, children: (hydrated ? localFormat : utcFormat).format(new Date(value)) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+const utcFormat = new Intl.DateTimeFormat("en-US", {
+  dateStyle: "medium",
+  timeZone: "UTC"
+});
+const localFormat = new Intl.DateTimeFormat("en-US", {
+  dateStyle: "medium"
+});
+export function LocalDate(t0) {
+  const $ = _c(8);
+  const {
+    value
+  } = t0;
+  const [hydrated, setHydrated] = useState(false);
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => setHydrated(true);
+    t2 = [];
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+  }
+  useEffect(t1, t2);
+  const t3 = hydrated ? localFormat : utcFormat;
+  let t4;
+  if ($[2] !== t3 || $[3] !== value) {
+    t4 = t3.format(new Date(value));
+    $[2] = t3;
+    $[3] = value;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== t4 || $[6] !== value) {
+    t5 = /*#__PURE__*/_jsx("time", {
+      dateTime: value,
+      children: t4
+    });
+    $[5] = t4;
+    $[6] = value;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return t5;
 }

package/dist/keys/keys-empty.js

@@ -1,8 +1,31 @@
-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"] }) }))] }) }));
+import { Button, RuleGrid, RuleGridCell, RuleGridDescription, RuleGridTitle } from "@locusgraph/components";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 /*#__PURE__*/_jsx(RuleGrid, {
+    columns: 1,
+    children: /*#__PURE__*/_jsxs(RuleGridCell, {
+      className: "items-center gap-2 py-12 text-center",
+      children: [/*#__PURE__*/_jsx(KeyRoundIcon, {
+        className: "mb-1 size-5 text-muted-foreground"
+      }), /*#__PURE__*/_jsx(RuleGridTitle, {
+        children: "No API keys yet"
+      }), /*#__PURE__*/_jsx(RuleGridDescription, {
+        className: "max-w-sm",
+        children: description
+      }), newKeyHref && /*#__PURE__*/_jsx(Button, {
+        asChild: true,
+        size: "sm",
+        className: "mt-2",
+        children: /*#__PURE__*/_jsxs(Link, {
+          href: newKeyHref,
+          children: [/*#__PURE__*/_jsx(PlusIcon, {}), "New key"]
+        })
+      })]
+    })
+  });
 }

package/dist/keys/keys.js

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

package/dist/skeletons/keys-skeleton.js

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

package/dist/skeletons/plans-skeleton.js

@@ -1,9 +1,54 @@
+import { RuleGrid, RuleGridCell, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "@locusgraph/components";
 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" })] }));
+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 /*#__PURE__*/_jsxs(RuleGrid, {
+    columns: planCount >= 3 ? 3 : 2,
+    "data-slot": "plans-skeleton",
+    ...skeletonRootProps,
+    children: [Array.from({
+      length: planCount
+    }, (_, plan) => /*#__PURE__*/_jsxs(RuleGridCell
+    // biome-ignore lint/suspicious/noArrayIndexKey: placeholder plans have no identity
+    , {
+      "data-slot": "plan-skeleton",
+      "aria-hidden": "true",
+      className: "gap-4",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "flex flex-col gap-2",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "flex min-h-6 items-center",
+          children: /*#__PURE__*/_jsx(SkeletonBar, {
+            className: "h-5 w-20"
+          })
+        }), /*#__PURE__*/_jsx(SkeletonBar, {
+          className: "h-8 w-28"
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "flex flex-col gap-1.5",
+        children: Array.from({
+          length: pointCount
+        }, (_, point) =>
+        /*#__PURE__*/
+        // biome-ignore lint/suspicious/noArrayIndexKey: placeholder points have no identity
+        _jsx(SkeletonBar, {
+          className: "h-4 w-40"
+        }, point))
+      }), plan === currentIndex ? /*#__PURE__*/_jsx("div", {
+        className: "mt-auto flex min-h-8 items-center",
+        children: /*#__PURE__*/_jsx(SkeletonBar, {
+          className: "h-4 w-16"
+        })
+      }) : /*#__PURE__*/_jsx(SkeletonBar, {
+        className: "mt-auto h-8 w-28 rounded-full"
+      })]
+    }, plan)), /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: "Loading plans\u2026"
+    })]
+  });
 }

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

@@ -1,8 +1,38 @@
+import { RuleGridCell, RuleGridLabel, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "@locusgraph/components";
 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" })] }));
+export function TopUpSkeleton({
+  packs = 3
+}) {
+  const count = Math.max(1, Math.floor(packs));
+  return /*#__PURE__*/_jsxs(RuleGridCell, {
+    "data-slot": "top-up-skeleton",
+    ...skeletonRootProps,
+    className: "gap-4",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-1.5",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "flex min-h-6 items-center",
+        children: /*#__PURE__*/_jsx(RuleGridLabel, {
+          children: "Buy credits"
+        })
+      }), /*#__PURE__*/_jsx(SkeletonBar, {
+        className: "h-4 w-full max-w-72"
+      }), /*#__PURE__*/_jsx(SkeletonBar, {
+        className: "h-4 w-3/4 max-w-56"
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "flex flex-wrap gap-2",
+      "aria-hidden": "true",
+      children: Array.from({
+        length: count
+      }, (_, index) => /*#__PURE__*/_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))
+    }), /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+      children: "Loading credit packs\u2026"
+    })]
+  });
 }

package/dist/skeletons/usage-skeleton.js

@@ -1,9 +1,43 @@
+import { RuleGrid, RuleGridCell, RuleGridLabel, SkeletonBar, SkeletonLoadingLabel, skeletonRootProps } from "@locusgraph/components";
 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" })] }));
+  return /*#__PURE__*/_jsxs("div", {
+    "data-slot": "quota-skeleton",
+    "aria-hidden": "true",
+    className: "flex flex-col gap-2",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "flex items-baseline justify-between gap-4",
+      children: [/*#__PURE__*/_jsx(SkeletonBar, {
+        className: "h-4 w-28"
+      }), /*#__PURE__*/_jsx(SkeletonBar, {
+        className: "h-4 w-36"
+      })]
+    }), /*#__PURE__*/_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" })] }) }));
+export function UsageSkeleton({
+  quotas = 2,
+  label = "Usage"
+}) {
+  const count = Math.max(1, Math.floor(quotas));
+  return /*#__PURE__*/_jsx(RuleGrid, {
+    columns: 1,
+    "data-slot": "usage-skeleton",
+    ...skeletonRootProps,
+    children: /*#__PURE__*/_jsxs(RuleGridCell, {
+      className: "gap-5",
+      children: [/*#__PURE__*/_jsx(RuleGridLabel, {
+        children: label
+      }), Array.from({
+        length: count
+      }, (_, index) =>
+      /*#__PURE__*/
+      // biome-ignore lint/suspicious/noArrayIndexKey: placeholder meters have no identity
+      _jsx(QuotaSkeleton, {}, index)), /*#__PURE__*/_jsx(SkeletonLoadingLabel, {
+        children: "Loading usage\u2026"
+      })]
+    })
+  });
 }

package/dist/skeletons/wallet-skeleton.js

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

package/dist/types.js

@@ -1,3 +1,3 @@
 export function periodLabel(period) {
-    return period === "month" ? "this month" : "lifetime";
+  return period === "month" ? "this month" : "lifetime";
 }

package/dist/usage/quota.js

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

package/dist/usage/usage-alert.js

@@ -1,29 +1,66 @@
-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 { balanceLevel, formatCount, formatMicroUsd, quotaStatus } from "@locusgraph/utils";
 import { periodLabel } from "../types.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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";
+  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",
+  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" }) })] })] })] }));
+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 /*#__PURE__*/_jsxs(Alert, {
+    className: toneClasses[empty ? "destructive" : "warn"],
+    children: [/*#__PURE__*/_jsx(CircleAlertIcon, {}), /*#__PURE__*/_jsx(AlertTitle, {
+      children: attentionTitle(level, over.length)
+    }), /*#__PURE__*/_jsxs(AlertDescription, {
+      className: "flex flex-col items-start gap-3",
+      children: [/*#__PURE__*/_jsxs("ul", {
+        className: "flex flex-col gap-1",
+        children: [over.map(quota => /*#__PURE__*/_jsxs("li", {
+          children: [/*#__PURE__*/_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" && /*#__PURE__*/_jsx("li", {
+          children: empty ? "Paid usage is paused until you add credits." : `${formatMicroUsd(balanceMicroUsd)} of credits left.`
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "flex flex-wrap items-center gap-2",
+        children: [!paidPlan && /*#__PURE__*/_jsx(Button, {
+          asChild: true,
+          size: "sm",
+          variant: upgradeFirst ? "default" : "ghost",
+          children: /*#__PURE__*/_jsx(Link, {
+            href: upgradeHref,
+            children: "Upgrade to Pro"
+          })
+        }), /*#__PURE__*/_jsx(Button, {
+          asChild: true,
+          size: "sm",
+          variant: upgradeFirst ? "ghost" : "default",
+          children: /*#__PURE__*/_jsx(Link, {
+            href: buyCreditsHref,
+            children: "Buy credits"
+          })
+        })]
+      })]
+    })]
+  });
 }

package/dist/usage/usage.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@locusgraph/blocks",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Product sections built from @locusgraph/components: usage meters and alerts, wallet, credit packs, plan options and API keys.",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "provenance": true
   },
   "peerDependencies": {
-    "@locusgraph/components": "^0.2.0",
+    "@locusgraph/components": "^0.2.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -38,7 +38,7 @@
     "@locusgraph/utils": "0.1.1"
   },
   "devDependencies": {
-    "@locusgraph/components": "0.2.0",
+    "@locusgraph/components": "0.2.2",
     "@locusgraph/config": "0.1.1",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",
@@ -49,7 +49,7 @@
     "vitest": "^5.0.3"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/sources.css dist/sources.css && node ../../scripts/esm-extensions.mjs dist",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/sources.css dist/sources.css && node ../../scripts/react-compiler.mjs dist && node ../../scripts/esm-extensions.mjs dist",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run"
   }