@gntik-ai/blocks 0.0.0-stage → 0.5.0

package/src/billing/PlanCard/examples/SummaryFull.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@gntik-ai/ui';
+import { PlanCard } from '../PlanCard';
+
+export default function SummaryFull() {
+  return (
+    <PlanCard
+      variant="summary"
+      plan={{
+        name: 'Fixture Plan',
+        statusLabel: 'Active',
+        priceMonthly: 10,
+        priceAnnual: 100,
+        currency: 'EUR',
+        cycle: 'monthly',
+        renewsOn: '2027-01-01',
+        features: ['Feature A', 'Feature B'],
+      }}
+      actions={
+        <>
+          <Button onClick={() => window.alert('Upgrade')}>Upgrade</Button>
+          <Button variant="secondary" onClick={() => window.alert('Manage')}>
+            Manage
+          </Button>
+        </>
+      }
+    />
+  );
+}

package/src/billing/PlanCard/examples/SummaryMinimal.tsx

@@ -0,0 +1,5 @@
+import { PlanCard } from '../PlanCard';
+
+export default function SummaryMinimal() {
+  return <PlanCard variant="summary" plan={{ name: 'Fixture Plan', statusLabel: 'Active' }} />;
+}

package/src/billing/PlanCard/examples/SummaryPriceOnly.tsx

@@ -0,0 +1,15 @@
+import { PlanCard } from '../PlanCard';
+
+export default function SummaryPriceOnly() {
+  return (
+    <PlanCard
+      variant="summary"
+      plan={{
+        name: 'Fixture Plan',
+        statusLabel: 'Active',
+        priceMonthly: 10,
+        currency: 'EUR',
+      }}
+    />
+  );
+}

package/src/billing/PlanCard/examples/SummaryRenewalOnly.tsx

@@ -0,0 +1,14 @@
+import { PlanCard } from '../PlanCard';
+
+export default function SummaryRenewalOnly() {
+  return (
+    <PlanCard
+      variant="summary"
+      plan={{
+        name: 'Fixture Plan',
+        statusLabel: 'Active',
+        renewsOn: '2027-01-01',
+      }}
+    />
+  );
+}

package/src/billing/PlanCard/examples/SummaryUnassigned.tsx

@@ -0,0 +1,5 @@
+import { PlanCard } from '../PlanCard';
+
+export default function SummaryUnassigned() {
+  return <PlanCard variant="summary" emptyLabel="No plan assigned" />;
+}

package/src/billing/PlanCard/examples/SummaryUnassignedNoLabel.tsx

@@ -0,0 +1,5 @@
+import { PlanCard } from '../PlanCard';
+
+export default function SummaryUnassignedNoLabel() {
+  return <PlanCard variant="summary" />;
+}

package/src/billing/PlanCard/examples/SummaryZeroPrice.tsx

@@ -0,0 +1,15 @@
+import { PlanCard } from '../PlanCard';
+
+export default function SummaryZeroPrice() {
+  return (
+    <PlanCard
+      variant="summary"
+      plan={{
+        name: 'Fixture Plan',
+        statusLabel: 'Active',
+        priceMonthly: 0,
+        currency: 'EUR',
+      }}
+    />
+  );
+}

package/src/billing/PlanCard/fixtures.ts

@@ -0,0 +1,19 @@
+import type { BillingPlan } from './PlanCard';
+
+/** Sample current plan (neutral workspace data). */
+export const samplePlan: BillingPlan = {
+  name: 'Scale',
+  status: 'active',
+  priceMonthly: 1200,
+  priceAnnual: 1000,
+  currency: 'USD',
+  renewsOn: '2026-06-01',
+  summary: '50 seats · 2 regions',
+  features: [
+    '500,000 requests / month',
+    '120M tokens / month',
+    '20 GB storage',
+    'Audit log and SSO',
+    'Email support · 1 business day',
+  ],
+};

package/src/billing/PlanDefinitionCard/PlanDefinitionCard.test.tsx

@@ -0,0 +1,111 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from '@gntik-ai/ui';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { PlanDefinitionCard } from './PlanDefinitionCard';
+
+const definition = {
+  name: 'Fixture Plan',
+  slug: 'fixture-plan',
+  description: 'A plan definition.',
+  status: 'active' as const,
+  capabilities: { Search: true, Export: false },
+  quotas: { Requests: 100, Storage: '20 GB' },
+  tenantCount: 4,
+  updatedAt: '2027-01-01',
+};
+
+describe('PlanDefinitionCard', () => {
+  it('keeps consumer buttons and links native, keyboard reachable and actionable', async () => {
+    const user = userEvent.setup();
+    const onEdit = vi.fn();
+    const onView = vi.fn();
+    render(
+      <PlanDefinitionCard
+        plan={definition}
+        actions={
+          <>
+            <Button onClick={onEdit}>Edit</Button>
+            <a href="#tenants" onClick={onView} className="text-primary-text underline">
+              View tenants
+            </a>
+          </>
+        }
+      />,
+    );
+    const edit = screen.getByRole('button', { name: 'Edit' });
+    const view = screen.getByRole('link', { name: 'View tenants' });
+    expect(edit.tagName).toBe('BUTTON');
+    expect(view.tagName).toBe('A');
+    await user.tab();
+    expect(edit).toHaveFocus();
+    await user.keyboard('{Enter}');
+    expect(onEdit).toHaveBeenCalledTimes(1);
+    await user.keyboard(' ');
+    expect(onEdit).toHaveBeenCalledTimes(2);
+    await user.tab();
+    expect(view).toHaveFocus();
+    await user.keyboard('{Enter}');
+    expect(onView).toHaveBeenCalledTimes(1);
+  });
+
+  it('omits the optional description and preserves zero quota and tenant values', () => {
+    render(
+      <PlanDefinitionCard
+        plan={{
+          ...definition,
+          description: undefined,
+          tenantCount: 0,
+          quotas: { Requests: 0 },
+        }}
+      />,
+    );
+    expect(screen.queryByText('A plan definition.')).toBeNull();
+    expect(screen.getByText('Requests', { selector: 'dt' }).nextElementSibling).toHaveTextContent('0');
+    expect(screen.getByText('Assigned tenants', { selector: 'dt' }).nextElementSibling).toHaveTextContent('0');
+  });
+
+  it.each(['dark', 'light', 'high_contrast'])('has no axe violations in %s at either density', async (theme) => {
+    document.documentElement.className = theme;
+    for (const density of ['compact', 'full'] as const) {
+      const { container, unmount } = render(
+        <PlanDefinitionCard plan={definition} density={density} actions={<Button>Edit</Button>} />,
+      );
+      await expectNoAxeViolations(container);
+      unmount();
+    }
+  });
+  it.each([
+    ['draft', 'Draft'],
+    ['active', 'Active'],
+    ['deprecated', 'Deprecated'],
+    ['archived', 'Archived'],
+  ] as const)('shows a visible %s label and allows consumer override', (status, label) => {
+    const { unmount } = render(<PlanDefinitionCard plan={{ ...definition, status }} />);
+    expect(screen.getByText(label)).toBeVisible();
+    unmount();
+    render(<PlanDefinitionCard plan={{ ...definition, status }} statusLabels={{ [status]: 'Consumer status' }} />);
+    expect(screen.getByText('Consumer status')).toBeVisible();
+    expect(screen.queryByText(label)).toBeNull();
+  });
+  it.each(['compact', 'full'] as const)('renders the definition in %s density without commercial nodes', (density) => {
+    const { container } = render(<PlanDefinitionCard plan={definition} density={density} />);
+    expect(screen.getByRole('heading', { name: 'Fixture Plan' })).toBeInTheDocument();
+    expect(screen.getByText('fixture-plan')).toBeInTheDocument();
+    expect(screen.getByText('A plan definition.')).toBeInTheDocument();
+    expect(screen.getByText('Active')).toBeInTheDocument();
+    const flags = screen.getByRole('list', { name: 'Capabilities' });
+    expect(
+      within(flags)
+        .getAllByRole('listitem')
+        .map((item) => item.textContent),
+    ).toEqual(['SearchEnabled', 'ExportDisabled']);
+    expect(screen.getByText('Requests', { selector: 'dt' }).nextElementSibling).toHaveTextContent('100');
+    expect(screen.getByText('Storage', { selector: 'dt' }).nextElementSibling).toHaveTextContent('20 GB');
+    expect(screen.getByText('Assigned tenants', { selector: 'dt' }).nextElementSibling).toHaveTextContent('4');
+    expect(screen.getByText('Updated', { selector: 'dt' }).nextElementSibling).toHaveTextContent('January 1, 2027');
+    expect(screen.queryByRole('group', { name: 'Billing cycle' })).toBeNull();
+    expect(screen.queryByRole('button')).toBeNull();
+    expect(container.textContent).not.toMatch(/€|\$|price|Billed|Renews|Upgrade|Monthly|Annual/);
+  });
+});

package/src/billing/PlanDefinitionCard/PlanDefinitionCard.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react';
+import { Badge, Card, cn, type BadgeTone } from '@gntik-ai/ui';
+import { formatDate, type DateInput } from '../format';
+import { samplePlanDefinition } from './fixtures';
+
+export type PlanDefinitionStatus = 'draft' | 'active' | 'deprecated' | 'archived';
+
+export interface PlanDefinition {
+  name: string;
+  slug: string;
+  description?: string;
+  status: PlanDefinitionStatus;
+  capabilities?: Record<string, boolean>;
+  quotas?: Record<string, string | number>;
+  tenantCount: number;
+  updatedAt: DateInput;
+}
+
+export interface PlanDefinitionCardProps {
+  plan?: PlanDefinition;
+  density?: 'compact' | 'full';
+  /** Consumer-supplied kit Buttons or native links; no billing actions. */
+  actions?: ReactNode;
+  statusLabels?: Partial<Record<PlanDefinitionStatus, string>>;
+  titleAs?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+const STATUS: Record<PlanDefinitionStatus, { label: string; tone: BadgeTone }> = {
+  draft: { label: 'Draft', tone: 'info' },
+  active: { label: 'Active', tone: 'success' },
+  deprecated: { label: 'Deprecated', tone: 'warning' },
+  archived: { label: 'Archived', tone: 'neutral' },
+};
+
+/** Administrative plan information, with no commercial fields or actions. */
+export function PlanDefinitionCard({
+  plan = samplePlanDefinition,
+  density = 'full',
+  actions,
+  statusLabels,
+  titleAs: TitleTag = 'h3',
+  className,
+}: PlanDefinitionCardProps) {
+  const status = STATUS[plan.status];
+  return (
+    <Card className={cn(density === 'compact' ? 'p-4' : 'p-6', className)}>
+      <div className="flex flex-wrap items-center gap-2">
+        <TitleTag className="text-lg font-semibold text-foreground">{plan.name}</TitleTag>
+        <Badge tone={status.tone} dot>
+          {statusLabels?.[plan.status] ?? status.label}
+        </Badge>
+      </div>
+      <p className="mt-1 font-mono text-sm text-muted-foreground">{plan.slug}</p>
+      {plan.description && <p className="mt-2 text-sm text-foreground">{plan.description}</p>}
+      {plan.capabilities && Object.keys(plan.capabilities).length > 0 && (
+        <ul aria-label="Capabilities" className={cn('mt-4 grid gap-2 text-sm', density === 'full' && 'sm:grid-cols-2')}>
+          {Object.entries(plan.capabilities).map(([name, enabled]) => (
+            <li key={name} className="flex flex-wrap items-center justify-between gap-2">
+              <span className="text-foreground">{name}</span>
+              <span className="text-muted-foreground">{enabled ? 'Enabled' : 'Disabled'}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+      <dl className={cn('mt-4 grid gap-3 text-sm', density === 'full' && 'sm:grid-cols-2')}>
+        {plan.quotas &&
+          Object.entries(plan.quotas).map(([key, value]) => (
+            <div key={key}>
+              <dt className="text-muted-foreground">{key}</dt>
+              <dd className="font-medium text-foreground">{value}</dd>
+            </div>
+          ))}
+        <div>
+          <dt className="text-muted-foreground">Assigned tenants</dt>
+          <dd className="font-medium text-foreground tabular-nums">{plan.tenantCount}</dd>
+        </div>
+        <div>
+          <dt className="text-muted-foreground">Updated</dt>
+          <dd className="text-foreground">{formatDate(plan.updatedAt)}</dd>
+        </div>
+      </dl>
+      {actions && <div className="mt-4 flex flex-wrap items-center gap-2">{actions}</div>}
+    </Card>
+  );
+}

package/src/billing/PlanDefinitionCard/README.md

@@ -0,0 +1,29 @@
+# Plan definition card
+
+Import `PlanDefinitionCard`, `PlanDefinition`, `PlanDefinitionStatus`, `PlanDefinitionCardProps` and `planDefinitionCardMeta` from `@gntik-ai/blocks`. This administrative presentation has no price, cycle, renewal or built-in upgrade action.
+
+| Prop                     | Contract                                                                                             |
+| ------------------------ | ---------------------------------------------------------------------------------------------------- |
+| `plan`                   | `PlanDefinition`; omitted uses the neutral catalogue fixture                                         |
+| `plan.name`, `plan.slug` | Required display name and identifier                                                                 |
+| `plan.description`       | Optional description; absent means no description node                                               |
+| `plan.status`            | Required draft/active/deprecated/archived; each has a distinct English label                         |
+| `statusLabels`           | Optional partial status-to-label mapping supplied by the consumer                                    |
+| `plan.capabilities`      | Optional `Record<string, boolean>`; labelled list entries show Enabled or Disabled                   |
+| `plan.quotas`            | Optional `Record<string, string \| number>` rendered as key/value pairs in a `dl`; zero is preserved |
+| `plan.tenantCount`       | Required assigned tenant count, including zero                                                       |
+| `plan.updatedAt`         | Required Date or ISO string, formatted through billing `formatDate`                                  |
+| `density`                | compact/full (default full); both show all supplied data                                             |
+| `actions`                | Optional ReactNode slot of kit Buttons or native links                                               |
+| `titleAs`                | h2/h3/h4, default h3                                                                                 |
+| `className`              | Optional token-backed classes                                                                        |
+
+ARIA: heading at the requested level; lifecycle badge uses visible text, never colour alone; capabilities are a named list; quotas, tenant count and update date use a description list. Actions retain their native button/link semantics. Dark, light and high_contrast axe coverage includes both densities and browser contrast checks.
+
+| Key             | Behavior                         |
+| --------------- | -------------------------------- |
+| Tab / Shift+Tab | Focus consumer buttons and links |
+| Enter           | Activate focused button or link  |
+| Space           | Activate focused button          |
+
+Preview IDs: `plan-definition-card--compact` and `plan-definition-card--full`. The examples show an Edit button and View tenants link. Consumers supply domain actions and override lifecycle labels as needed.

package/src/billing/PlanDefinitionCard/block.meta.ts

@@ -0,0 +1,46 @@
+import type { BlockMeta } from '../../meta';
+
+/** Catalogue contract read by get_block and llms-full.txt. */
+export const documentation = {
+  pattern:
+    'Heading (titleAs h2/h3/h4), visible lifecycle Badge, Capabilities list with Enabled/Disabled text, quota/tenant/update description list, and consumer native actions. No price, billing cycle, renewal or built-in upgrade action. Axe coverage in dark, light and high_contrast at compact and full densities.',
+  keyboard: [
+    ['Tab / Shift+Tab', 'Move between consumer-supplied buttons and links.'],
+    ['Enter', 'Activate a focused button or link.'],
+    ['Space', 'Activate a focused button.'],
+  ],
+  tokens: ['card', 'foreground', 'muted-foreground', 'border', 'focus-ring'],
+  props: [
+    [
+      'plan',
+      'PlanDefinition: name, slug, status, tenantCount and updatedAt required; optional description, capabilities (Record<string, boolean>) and quotas (Record<string, string | number>). Omitted plan uses the neutral definition fixture.',
+    ],
+    ['density', 'compact | full (default); both show all supplied definition data.'],
+    [
+      'statusLabels',
+      'Partial<Record<draft | active | deprecated | archived, string>> overrides English lifecycle labels.',
+    ],
+    ['actions', 'ReactNode slot of kit Buttons or native links; absent by default.'],
+    ['titleAs / className', 'h2 | h3 (default) | h4; additional token-backed classes.'],
+  ],
+  examples: ['compact', 'full'],
+};
+
+export const meta: BlockMeta = {
+  name: 'Plan definition card',
+  family: 'billing',
+  status: 'beta',
+  description: [
+    'Administrative plan definition without billing fields: name, slug, optional description, labelled draft/active/deprecated/archived status, enabled/disabled capabilities, quotas, assigned tenants and formatted update date. Compact and full densities, consumer action slots and statusLabels overrides. See README.md for props, ARIA, keyboard and examples.',
+    '',
+    '| Prop | Contract |',
+    '| --- | --- |',
+    ...documentation.props.map(([prop, contract]) => `| ${prop} | ${contract?.replaceAll('|', '\\|')} |`),
+    '',
+    'Examples:',
+    ...documentation.examples.map(
+      (example) => `- [${example}](/preview.html?kind=block&id=plan-definition-card--${example})`,
+    ),
+  ].join('\n'),
+  uses: ['Card', 'Badge', 'Button'],
+};

package/src/billing/PlanDefinitionCard/examples/Compact.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@gntik-ai/ui';
+import { PlanDefinitionCard } from '../PlanDefinitionCard';
+import { samplePlanDefinition } from '../fixtures';
+
+export default function Compact() {
+  return (
+    <PlanDefinitionCard
+      plan={samplePlanDefinition}
+      density="compact"
+      actions={
+        <>
+          <Button onClick={() => window.alert('Edit')}>Edit</Button>
+          <a
+            href="#tenants"
+            className="text-primary-text underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+          >
+            View tenants
+          </a>
+        </>
+      }
+    />
+  );
+}

package/src/billing/PlanDefinitionCard/examples/Full.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@gntik-ai/ui';
+import { PlanDefinitionCard } from '../PlanDefinitionCard';
+import { samplePlanDefinition } from '../fixtures';
+
+export default function Full() {
+  return (
+    <PlanDefinitionCard
+      plan={samplePlanDefinition}
+      density="full"
+      actions={
+        <>
+          <Button onClick={() => window.alert('Edit')}>Edit</Button>
+          <a
+            href="#tenants"
+            className="text-primary-text underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+          >
+            View tenants
+          </a>
+        </>
+      }
+    />
+  );
+}

package/src/billing/PlanDefinitionCard/fixtures.ts

@@ -0,0 +1,12 @@
+import type { PlanDefinition } from './PlanDefinitionCard';
+
+export const samplePlanDefinition: PlanDefinition = {
+  name: 'Workspace',
+  slug: 'workspace',
+  description: 'Shared capabilities and quotas for a workspace.',
+  status: 'active',
+  capabilities: { Search: true, Export: false },
+  quotas: { Requests: 10000, Storage: '20 GB' },
+  tenantCount: 4,
+  updatedAt: '2027-01-01',
+};

package/src/billing/QuotaMeters/QuotaMeters.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { QuotaMeters } from './QuotaMeters';
+
+describe('QuotaMeters', () => {
+  it('renders one meter per quota with used/limit labels', async () => {
+    const { container } = render(<QuotaMeters />);
+    expect(screen.getAllByRole('meter')).toHaveLength(4);
+    expect(screen.getByText('412,800 / 500,000 requests')).toBeInTheDocument();
+    expect(screen.getByText('78.4M / 120M tokens')).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('switches to the projection and flags the overage', async () => {
+    const user = userEvent.setup();
+    render(<QuotaMeters />);
+    await user.click(screen.getByRole('button', { name: 'Projected' }));
+    expect(screen.getByText('521,000 / 500,000 requests')).toBeInTheDocument();
+    expect(screen.getByText('21,000 requests over the plan limit')).toBeInTheDocument();
+    expect(screen.getByRole('meter', { name: 'Requests' })).toHaveAttribute('data-level', 'critical');
+  });
+});

package/src/billing/QuotaMeters/QuotaMeters.tsx

@@ -0,0 +1,92 @@
+import { useState, type ReactNode } from 'react';
+import { Meter, Toggle, ToggleGroup, cn, type MeterThresholds } from '@gntik-ai/ui';
+import { formatQuantity } from '../format';
+import { sampleQuotas } from './fixtures';
+
+export interface Quota {
+  id: string;
+  label: string;
+  used: number;
+  limit: number;
+  /** End-of-cycle projection. When any quota has one, a Current/Projected toggle appears. */
+  projected?: number;
+  /** Unit after the numbers, e.g. "requests" or "GB". */
+  unit?: string;
+  /** Helper line under the bar. Over the limit, a default overage note is shown. */
+  note?: ReactNode;
+}
+
+export type QuotaScope = 'current' | 'projected';
+
+export interface QuotaMetersProps {
+  quotas?: Quota[];
+  /** Heading above the meters. */
+  title?: string;
+  /** Percent-of-limit thresholds for amber and red (default 80 / 100). */
+  thresholds?: MeterThresholds;
+  /** Formats used/limit numbers. Default: grouped, compact above a million. */
+  formatValue?: (value: number) => string;
+  defaultScope?: QuotaScope;
+  onScopeChange?: (scope: QuotaScope) => void;
+  /** Heading level of the title, to fit the page outline (default h3). */
+  titleAs?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+/** Plan quotas as meters: green with headroom, amber near the cap, red over it. */
+export function QuotaMeters({
+  quotas = sampleQuotas,
+  title = 'Plan usage',
+  thresholds,
+  formatValue = formatQuantity,
+  defaultScope = 'current',
+  onScopeChange,
+  titleAs: TitleTag = 'h3',
+  className,
+}: QuotaMetersProps) {
+  const [scope, setScope] = useState<QuotaScope>(defaultScope);
+  const canProject = quotas.some((q) => q.projected != null);
+  const showProjected = canProject && scope === 'projected';
+
+  const changeScope = (value: string[]) => {
+    const next = value[0];
+    if (next !== 'current' && next !== 'projected') return;
+    setScope(next);
+    onScopeChange?.(next);
+  };
+
+  return (
+    <section aria-label={title} className={cn('grid gap-5', className)}>
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <TitleTag className="text-[13px] font-medium text-muted-foreground">{title}</TitleTag>
+        {canProject && (
+          <ToggleGroup size="sm" aria-label="Usage period" value={[scope]} onValueChange={changeScope}>
+            <Toggle value="current">Current cycle</Toggle>
+            <Toggle value="projected">Projected</Toggle>
+          </ToggleGroup>
+        )}
+      </div>
+      <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
+        {quotas.map((q) => {
+          const value = showProjected ? (q.projected ?? q.used) : q.used;
+          const unit = q.unit ? ` ${q.unit}` : '';
+          const text = `${formatValue(value)} / ${formatValue(q.limit)}${unit}`;
+          const over = value - q.limit;
+          const note = q.note ?? (over > 0 ? `${formatValue(over)}${unit} over the plan limit` : undefined);
+          return (
+            <Meter
+              key={q.id}
+              label={q.label}
+              value={value}
+              max={q.limit}
+              thresholds={thresholds}
+              valueLabel={text}
+              aria-valuetext={text}
+              note={note}
+            />
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/src/billing/QuotaMeters/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Quota meters',
+  family: 'billing',
+  status: 'beta',
+  description:
+    'Plan quotas as usage meters with used/limit labels, amber/red thresholds, overage notes and a current/projected toggle.',
+  uses: ['Meter', 'ToggleGroup', 'Toggle'],
+};

package/src/billing/QuotaMeters/fixtures.ts

@@ -0,0 +1,9 @@
+import type { Quota } from './QuotaMeters';
+
+/** Sample plan quotas: usage so far this cycle and the end-of-cycle projection. */
+export const sampleQuotas: Quota[] = [
+  { id: 'requests', label: 'Requests', used: 412_800, limit: 500_000, projected: 521_000, unit: 'requests' },
+  { id: 'tokens', label: 'Tokens', used: 78_400_000, limit: 120_000_000, projected: 99_100_000, unit: 'tokens' },
+  { id: 'storage', label: 'Storage', used: 14.2, limit: 20, projected: 17.1, unit: 'GB' },
+  { id: 'seats', label: 'Seats', used: 38, limit: 50, projected: 38, unit: 'seats' },
+];

package/src/billing/SpendVsBudget/SpendVsBudget.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { SpendVsBudget } from './SpendVsBudget';
+
+describe('SpendVsBudget', () => {
+  it('renders the summary and the chart figure', async () => {
+    const { container } = render(<SpendVsBudget />);
+    expect(screen.getByRole('heading', { name: 'Spend vs budget' })).toBeInTheDocument();
+    expect(screen.getByText('Within budget')).toBeInTheDocument();
+    expect(screen.getByRole('figure', { name: /spent, .* forecast against a \$2,000.00 budget/ })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('flags a forecast over budget and toggles series from the legend', async () => {
+    const user = userEvent.setup();
+    render(<SpendVsBudget budget={1500} />);
+    expect(screen.getByText('Forecast over budget')).toBeInTheDocument();
+    const budget = screen.getByRole('button', { name: 'Budget' });
+    expect(budget).toHaveAttribute('aria-pressed', 'true');
+    await user.click(budget);
+    expect(budget).toHaveAttribute('aria-pressed', 'false');
+  });
+});