@locusgraph/blocks 0.2.0 → 0.3.1

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,70 @@
+import { c as _c } from "react/compiler-runtime";
+import { formatCents } from "@locusgraph/utils";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const intervalLabel = {
+  month: "/month",
+  year: "/year"
+};
+export function PlanPrice(t0) {
+  const $ = _c(11);
+  const {
+    plan
+  } = t0;
+  if (plan.amountCents === undefined) {
+    let t1;
+    if ($[0] !== plan.price) {
+      t1 = /*#__PURE__*/_jsx("span", {
+        className: "font-heading text-xl font-semibold tracking-[-0.02em] tabular-nums",
+        children: plan.price
+      });
+      $[0] = plan.price;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[2] !== plan.amountCents) {
+    t1 = formatCents(plan.amountCents);
+    $[2] = plan.amountCents;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== t1) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      className: "font-heading text-2xl font-semibold tracking-[-0.02em] tabular-nums",
+      children: t1
+    });
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== plan.interval) {
+    t3 = plan.interval && /*#__PURE__*/_jsx("span", {
+      className: "text-sm text-muted-foreground",
+      children: intervalLabel[plan.interval]
+    });
+    $[6] = plan.interval;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== t2 || $[9] !== t3) {
+    t4 = /*#__PURE__*/_jsxs("span", {
+      className: "flex items-baseline gap-1",
+      children: [t2, t3]
+    });
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  return t4;
+}

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,74 @@
+import { c as _c } from "react/compiler-runtime";
+import { Badge, RuleGrid, RuleGridCell, RuleGridFooter, RuleGridTitle } from "@locusgraph/components";
+import { PlanPrice } from "./plan-price.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Plans(t0) {
+  const $ = _c(8);
+  const {
+    plans,
+    actionFor
+  } = t0;
+  const t1 = plans.length >= 3 ? 3 : 2;
+  let t2;
+  if ($[0] !== actionFor || $[1] !== plans) {
+    let t3;
+    if ($[3] !== actionFor) {
+      t3 = 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(_temp)
+          }), /*#__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);
+      };
+      $[3] = actionFor;
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    t2 = plans.map(t3);
+    $[0] = actionFor;
+    $[1] = plans;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[5] !== t1 || $[6] !== t2) {
+    t3 = /*#__PURE__*/_jsx(RuleGrid, {
+      columns: t1,
+      children: t2
+    });
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+function _temp(point) {
+  return /*#__PURE__*/_jsx("li", {
+    children: point
+  }, point);
+}

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,108 @@
+import { c as _c } from "react/compiler-runtime";
+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;
+}
+export function TopUp(t0) {
+  const $ = _c(19);
+  const {
+    packs,
+    onBuy,
+    pending: t1,
+    pendingPackId,
+    highlightedPackId,
+    description: t2
+  } = t0;
+  const pending = t1 === undefined ? false : t1;
+  const description = t2 === undefined ? "Pay once with Stripe. Credits never expire and never renew on their own." : t2;
+  const busy = pending || pendingPackId !== undefined;
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/_jsx("span", {
+      className: "flex min-h-6 items-center",
+      children: /*#__PURE__*/_jsx(RuleGridLabel, {
+        children: "Buy credits"
+      })
+    });
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  let t4;
+  if ($[1] !== description) {
+    t4 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-1.5",
+      children: [t3, /*#__PURE__*/_jsx(RuleGridDescription, {
+        children: description
+      })]
+    });
+    $[1] = description;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let t5;
+  if ($[3] !== busy || $[4] !== highlightedPackId || $[5] !== onBuy || $[6] !== packs || $[7] !== pendingPackId) {
+    let t6;
+    if ($[9] !== busy || $[10] !== highlightedPackId || $[11] !== onBuy || $[12] !== pendingPackId) {
+      t6 = 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);
+      $[9] = busy;
+      $[10] = highlightedPackId;
+      $[11] = onBuy;
+      $[12] = pendingPackId;
+      $[13] = t6;
+    } else {
+      t6 = $[13];
+    }
+    t5 = packs.map(t6);
+    $[3] = busy;
+    $[4] = highlightedPackId;
+    $[5] = onBuy;
+    $[6] = packs;
+    $[7] = pendingPackId;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[14] !== t5) {
+    t6 = /*#__PURE__*/_jsx("div", {
+      className: "flex flex-wrap gap-2",
+      children: t5
+    });
+    $[14] = t5;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== t4 || $[17] !== t6) {
+    t7 = /*#__PURE__*/_jsxs(RuleGridCell, {
+      className: "gap-4",
+      children: [t4, t6]
+    });
+    $[16] = t4;
+    $[17] = t6;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  return t7;
+}

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,217 @@
+import { c as _c } from "react/compiler-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"
+  }
+};
+function GrantList(t0) {
+  const $ = _c(4);
+  const {
+    grants
+  } = t0;
+  let t1;
+  if ($[0] !== grants) {
+    t1 = grants.map(_temp);
+    $[0] = grants;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t1) {
+    t2 = /*#__PURE__*/_jsx("ul", {
+      className: "flex flex-col divide-y divide-line",
+      children: t1
+    });
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
+function _temp(grant) {
+  return /*#__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(t0) {
+  const $ = _c(34);
+  const {
+    balanceMicroUsd,
+    debtMicroUsd: t1,
+    grants
+  } = t0;
+  const debtMicroUsd = t1 === undefined ? 0 : t1;
+  let t2;
+  if ($[0] !== balanceMicroUsd) {
+    t2 = balanceLevel(balanceMicroUsd);
+    $[0] = balanceMicroUsd;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const level = t2;
+  const hint = level === "fine" ? null : levelHint[level];
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/_jsx(RuleGridLabel, {
+      children: "Prepaid credits"
+    });
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== hint || $[4] !== level) {
+    t4 = hint && /*#__PURE__*/_jsx(Badge, {
+      variant: level === "empty" ? "destructive" : "secondary",
+      className: level === "low" ? "text-warn" : undefined,
+      children: hint.badge
+    });
+    $[3] = hint;
+    $[4] = level;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("span", {
+      className: "flex min-h-6 items-center justify-between",
+      children: [t3, t4]
+    });
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  const t6 = `font-heading text-3xl font-semibold tracking-[-0.02em] tabular-nums ${hint?.tone ?? ""}`;
+  let t7;
+  if ($[8] !== balanceMicroUsd) {
+    t7 = formatMicroUsd(balanceMicroUsd);
+    $[8] = balanceMicroUsd;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] !== t6 || $[11] !== t7) {
+    t8 = /*#__PURE__*/_jsx("span", {
+      className: t6,
+      children: t7
+    });
+    $[10] = t6;
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== hint) {
+    t9 = hint && /*#__PURE__*/_jsx("p", {
+      className: "text-sm text-muted-foreground",
+      children: hint.text
+    });
+    $[13] = hint;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] !== t8 || $[16] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-1",
+      children: [t8, t9]
+    });
+    $[15] = t8;
+    $[16] = t9;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  let t11;
+  if ($[18] !== grants) {
+    t11 = grants.length > 0 && /*#__PURE__*/_jsx(GrantList, {
+      grants: grants
+    });
+    $[18] = grants;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+  let t12;
+  if ($[20] !== grants.length || $[21] !== level) {
+    t12 = grants.length === 0 && level !== "empty" && /*#__PURE__*/_jsx("p", {
+      className: "text-muted-foreground",
+      children: "No credit grants to show."
+    });
+    $[20] = grants.length;
+    $[21] = level;
+    $[22] = t12;
+  } else {
+    t12 = $[22];
+  }
+  let t13;
+  if ($[23] !== debtMicroUsd) {
+    t13 = debtMicroUsd > 0 && /*#__PURE__*/_jsxs("p", {
+      className: "text-destructive",
+      children: [formatMicroUsd(debtMicroUsd), " owed. It comes out of the next credits you add."]
+    });
+    $[23] = debtMicroUsd;
+    $[24] = t13;
+  } else {
+    t13 = $[24];
+  }
+  let t14;
+  if ($[25] !== t11 || $[26] !== t12 || $[27] !== t13) {
+    t14 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col gap-3 text-sm",
+      children: [t11, t12, t13]
+    });
+    $[25] = t11;
+    $[26] = t12;
+    $[27] = t13;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  let t15;
+  if ($[29] !== level || $[30] !== t10 || $[31] !== t14 || $[32] !== t5) {
+    t15 = /*#__PURE__*/_jsxs(RuleGridCell, {
+      "data-level": level,
+      className: "gap-4",
+      children: [t5, t10, t14]
+    });
+    $[29] = level;
+    $[30] = t10;
+    $[31] = t14;
+    $[32] = t5;
+    $[33] = t15;
+  } else {
+    t15 = $[33];
+  }
+  return t15;
+}

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/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 {};