@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/auth/shared.tsx

@@ -0,0 +1,147 @@
+import { cn } from '@gntik-ai/ui';
+import { useState, type ReactNode } from 'react';
+
+export interface AuthHeaderProps {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Defaults to h1. `null` omits the title heading. */
+  headingLevel?: 'h1' | 'h2' | 'h3' | null;
+  className?: string;
+}
+
+/** Eyebrow + title + supporting line used at the top of every auth form. */
+export function AuthHeader({ eyebrow, title, description, headingLevel: Heading = 'h1', className }: AuthHeaderProps) {
+  return (
+    <div className={cn('mb-6', className)}>
+      {eyebrow != null && (
+        <p className="mb-2.5 font-mono text-[11px] tracking-[0.2em] text-primary-text uppercase">{eyebrow}</p>
+      )}
+      {Heading != null && title != null && (
+        <Heading className="text-[24px] font-semibold tracking-tight text-balance text-foreground sm:text-[27px]">
+          {title}
+        </Heading>
+      )}
+      {description != null && (
+        <p className="mt-2 text-[14px] leading-relaxed text-pretty text-muted-foreground">{description}</p>
+      )}
+    </div>
+  );
+}
+
+/** Horizontal rule with a centred caption ("Or continue with"). */
+export function AuthDivider({ children }: { children: ReactNode }) {
+  return (
+    <div className="my-6 flex items-center gap-3" role="presentation">
+      <span className="h-px flex-1 bg-border" />
+      <span className="font-mono text-[10.5px] font-semibold tracking-[0.2em] text-muted-foreground uppercase">
+        {children}
+      </span>
+      <span className="h-px flex-1 bg-border" />
+    </div>
+  );
+}
+
+export const authFormClass = 'w-full max-w-[392px]';
+
+/** Loading + error state around an async submit handler. A rejection's message becomes the error. */
+export function useAsyncSubmit(fallbackError = 'Something went wrong. Try again.') {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const run = async (fn: () => void | Promise<void>) => {
+    setError(null);
+    setLoading(true);
+    try {
+      await fn();
+      setLoading(false);
+      return true;
+    } catch (e) {
+      setLoading(false);
+      setError(e instanceof Error ? e.message : fallbackError);
+      return false;
+    }
+  };
+  return { loading, error, setError, run };
+}
+
+export const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+/** Email by default; text mode supports a username or username-or-email identifier. */
+export interface AuthIdentifierConfig {
+  type?: 'email' | 'text';
+  autoComplete?: string;
+  label?: ReactNode;
+  help?: ReactNode;
+  /** Optional stable id for the FieldDescription. Otherwise Base UI generates it. */
+  helpId?: string;
+  placeholder?: string;
+  minLength?: number;
+  maxLength?: number;
+}
+
+/** Kit-owned inline validation; consumers supply copy rather than running a second validator. */
+export interface AuthValidationMessages {
+  identifierRequired?: string;
+  identifierInvalid?: string;
+  identifierTooShort?: string;
+  passwordRequired?: string;
+}
+
+/** Server errors use only these props plus the form's error alert; inline validation stays in the kit. */
+export interface AuthFormAccessibilityProps {
+  fieldInvalid?: { identifier?: boolean; password?: boolean };
+  /** Id of the server alert (or an external feedback element), appended to flagged inputs. */
+  feedbackId?: string;
+  /** Describes the form itself; does not replace the per-field feedback association. */
+  'aria-describedby'?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+
+export function authIdentifierError(value: string, config?: AuthIdentifierConfig, messages?: AuthValidationMessages) {
+  const trimmed = value.trim();
+  const fallback = config?.type === 'text' ? 'Enter a valid identifier.' : 'Enter a valid email address.';
+  if (!trimmed) return messages?.identifierRequired ?? fallback;
+  if (config?.minLength !== undefined && trimmed.length < config.minLength)
+    return messages?.identifierTooShort ?? messages?.identifierInvalid ?? fallback;
+  if (
+    ((config?.type ?? 'email') === 'email' && !EMAIL_RE.test(trimmed)) ||
+    (config?.maxLength !== undefined && trimmed.length > config.maxLength)
+  )
+    return messages?.identifierInvalid ?? fallback;
+  return null;
+}
+
+/** Ordered text/email fields collected before the sign-up password. Ids must be unique. */
+export interface AuthSignUpField {
+  id: string;
+  label: string;
+  placeholder?: string;
+  help?: ReactNode;
+  required?: boolean;
+  type?: 'text' | 'email';
+  autoComplete?: string;
+  /** Consumer copy for kit-owned validation. */
+  messages?: { required?: string; invalid?: string };
+}
+
+export function authSignUpFieldError(value: string, field: AuthSignUpField) {
+  const trimmed = value.trim();
+  if (!trimmed) return field.required ? (field.messages?.required ?? `Enter ${field.label}.`) : null;
+  if (field.type === 'email' && !EMAIL_RE.test(trimmed))
+    return field.messages?.invalid ?? 'Enter a valid email address.';
+  return null;
+}
+
+/** Consumer-owned copy and optional action when account creation is unavailable. */
+export interface AuthUnavailableState {
+  title: ReactNode;
+  message: ReactNode;
+  action?: ReactNode;
+}
+
+/** Kit-owned sign-up validation with consumer-owned copy. */
+export interface AuthSignUpValidationMessages {
+  passwordTooShort?: (minimum: number) => string;
+  termsRequired?: string;
+}

package/src/billing/CostBreakdown/CostBreakdown.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen, within } from '@testing-library/react';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { CostBreakdown } from './CostBreakdown';
+
+describe('CostBreakdown', () => {
+  it('renders the donut figure and the total', async () => {
+    const { container } = render(<CostBreakdown />);
+    expect(screen.getByRole('figure', { name: /Cost breakdown: Compute \$740.00/ })).toBeInTheDocument();
+    expect(screen.getByText('$1,620.00')).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('ranks categories by amount with their share', () => {
+    render(<CostBreakdown />);
+    const items = within(screen.getByRole('list', { name: 'Categories by cost' })).getAllByRole('listitem');
+    expect(items.map((li) => li.textContent)).toEqual([
+      expect.stringContaining('Compute'),
+      expect.stringContaining('Tokens'),
+      expect.stringContaining('Add-ons'),
+      expect.stringContaining('Storage'),
+    ]);
+    expect(items[0]).toHaveTextContent('45.7%');
+  });
+});

package/src/billing/CostBreakdown/CostBreakdown.tsx

@@ -0,0 +1,95 @@
+import { Card, cn } from '@gntik-ai/ui';
+import { CHART_COLORS, DonutChart, type ChartColor } from '@gntik-ai/charts';
+import { formatMoney } from '../format';
+import { sampleCosts } from './fixtures';
+
+export interface CostItem {
+  label: string;
+  amount: number;
+}
+
+export interface CostBreakdownProps {
+  items?: CostItem[];
+  currency?: string;
+  title?: string;
+  /** Caption under the total in the donut hole. */
+  centerLabel?: string;
+  /** Donut diameter in px. */
+  size?: number;
+  /** Heading level of the title, to fit the page outline (default h3). */
+  titleAs?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+/** Swatch classes matching the chart series tokens (categorical accents, never severity). */
+const SWATCH: Record<ChartColor, string> = {
+  primary: 'bg-primary',
+  emerald: 'bg-brand-accent',
+  violet: 'bg-category-violet',
+  cyan: 'bg-category-cyan',
+  amber: 'bg-category-amber',
+  rose: 'bg-category-rose',
+  info: 'bg-info',
+};
+
+/** Where the spend goes: a donut by category plus the categories ranked by amount. */
+export function CostBreakdown({
+  items = sampleCosts,
+  currency = 'USD',
+  title = 'Cost breakdown',
+  centerLabel = 'this cycle',
+  size = 176,
+  titleAs: TitleTag = 'h3',
+  className,
+}: CostBreakdownProps) {
+  const ranked = [...items].sort((a, b) => b.amount - a.amount);
+  const total = ranked.reduce((sum, i) => sum + i.amount, 0);
+  const money = (n: number) => formatMoney(n, currency);
+  const colorAt = (i: number): ChartColor => CHART_COLORS[i % CHART_COLORS.length] ?? 'primary';
+
+  return (
+    <Card className={cn('p-6', className)}>
+      <div className="flex items-baseline justify-between gap-3">
+        <TitleTag className="text-[15px] font-semibold tracking-tight text-foreground">{title}</TitleTag>
+        <span className="font-mono text-[13px] font-semibold text-foreground tabular-nums">{money(total)}</span>
+      </div>
+      <div className="mt-5 flex flex-col items-center gap-6 sm:flex-row sm:items-center">
+        <DonutChart
+          data={ranked}
+          index="label"
+          category="amount"
+          showLegend={false}
+          centerLabel={centerLabel}
+          valueFormatter={(n) => formatMoney(n, currency, true)}
+          height={size}
+          aria-label={`${title}: ${ranked.map((i) => `${i.label} ${money(i.amount)}`).join(', ')}`}
+          className="shrink-0"
+        />
+        <ol aria-label="Categories by cost" className="grid w-full min-w-0 flex-1 gap-3">
+          {ranked.map((item, i) => {
+            const pct = total > 0 ? (item.amount / total) * 100 : 0;
+            return (
+              <li key={item.label} className="grid gap-1.5">
+                <div className="flex items-center justify-between gap-3">
+                  <span className="flex min-w-0 items-center gap-2 text-[13px] text-foreground">
+                    <span aria-hidden className="w-4 shrink-0 font-mono text-[11px] text-muted-foreground tabular-nums">
+                      {i + 1}
+                    </span>
+                    <span aria-hidden className={cn('size-2.5 shrink-0 rounded-[3px]', SWATCH[colorAt(i)])} />
+                    <span className="truncate">{item.label}</span>
+                  </span>
+                  <span className="shrink-0 font-mono text-[12.5px] whitespace-nowrap text-muted-foreground tabular-nums">
+                    <span className="font-semibold text-foreground">{money(item.amount)}</span> · {pct.toFixed(1)}%
+                  </span>
+                </div>
+                <div aria-hidden className="h-1.5 overflow-hidden rounded-full bg-secondary">
+                  <div className={cn('h-full rounded-full', SWATCH[colorAt(i)])} style={{ width: `${pct}%` }} />
+                </div>
+              </li>
+            );
+          })}
+        </ol>
+      </div>
+    </Card>
+  );
+}

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

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Cost breakdown',
+  family: 'billing',
+  status: 'beta',
+  description:
+    'Cost composition: a donut with the total in the hole and the categories ranked by amount with share bars, in categorical (non-severity) colours.',
+  uses: ['Card', 'DonutChart'],
+};

package/src/billing/CostBreakdown/fixtures.ts

@@ -0,0 +1,9 @@
+import type { CostItem } from './CostBreakdown';
+
+/** Sample cycle cost by category. */
+export const sampleCosts: CostItem[] = [
+  { label: 'Tokens', amount: 410 },
+  { label: 'Compute', amount: 740 },
+  { label: 'Add-ons', amount: 280 },
+  { label: 'Storage', amount: 190 },
+];

package/src/billing/InvoiceTable/InvoiceTable.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { InvoiceTable } from './InvoiceTable';
+import { sampleInvoices } from './fixtures';
+
+describe('InvoiceTable', () => {
+  it('renders one row per invoice with status and amount', async () => {
+    const { container } = render(<InvoiceTable />);
+    const table = screen.getByRole('table', { name: 'Invoice history' });
+    expect(within(table).getAllByRole('row')).toHaveLength(sampleInvoices.length + 1);
+    expect(screen.getByText('$1,584.20')).toBeInTheDocument();
+    expect(screen.getByText('Overdue')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Download INV-2026-0004' })).toHaveAttribute(
+      'href',
+      '#invoice-INV-2026-0004',
+    );
+    await expectNoAxeViolations(container);
+  });
+
+  it('calls onDownload with the invoice', async () => {
+    const user = userEvent.setup();
+    const onDownload = vi.fn();
+    const invoices = [{ id: 'a', number: 'INV-1', date: '2026-01-01', amount: 10, status: 'paid' as const }];
+    render(<InvoiceTable invoices={invoices} onDownload={onDownload} />);
+    await user.click(screen.getByRole('button', { name: 'Download INV-1' }));
+    expect(onDownload).toHaveBeenCalledWith(invoices[0]);
+  });
+});

package/src/billing/InvoiceTable/InvoiceTable.tsx

@@ -0,0 +1,130 @@
+import {
+  Badge,
+  Button,
+  Link,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  cn,
+  type BadgeTone,
+} from '@gntik-ai/ui';
+import { Download } from '@gntik-ai/icons';
+import { formatMoney, formatShortDate, type DateInput } from '../format';
+import { sampleInvoices } from './fixtures';
+
+export type InvoiceStatus = 'paid' | 'open' | 'overdue' | 'void' | 'draft';
+
+export interface Invoice {
+  id: string;
+  /** Human invoice number, e.g. "INV-2026-0004". */
+  number: string;
+  /** Issue date. */
+  date: DateInput;
+  amount: number;
+  /** ISO 4217 code. Default: the table's currency. */
+  currency?: string;
+  status: InvoiceStatus;
+  /** PDF URL. Without it the download control calls `onDownload` only. */
+  url?: string;
+}
+
+export interface InvoiceTableProps {
+  invoices?: Invoice[];
+  /** Table caption (screen-reader only unless `showCaption`). */
+  caption?: string;
+  showCaption?: boolean;
+  currency?: string;
+  /** Called when a download control is activated. */
+  onDownload?: (invoice: Invoice) => void;
+  /** Row density; omitted, it follows the surrounding DensityProvider. */
+  density?: 'compact' | 'comfortable';
+  className?: string;
+}
+
+const STATUS: Record<InvoiceStatus, { label: string; tone: BadgeTone }> = {
+  paid: { label: 'Paid', tone: 'success' },
+  open: { label: 'Due', tone: 'warning' },
+  overdue: { label: 'Overdue', tone: 'destructive' },
+  void: { label: 'Void', tone: 'neutral' },
+  draft: { label: 'Draft', tone: 'neutral' },
+};
+
+/** Invoice history: number, date, amount, status and a per-row PDF download. */
+export function InvoiceTable({
+  invoices = sampleInvoices,
+  caption = 'Invoice history',
+  showCaption = false,
+  currency = 'USD',
+  onDownload,
+  density,
+  className,
+}: InvoiceTableProps) {
+  return (
+    <div className={cn('overflow-hidden rounded-lg border border-border bg-card', className)}>
+      <Table density={density}>
+        <TableCaption srOnly={!showCaption}>{caption}</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Invoice</TableHead>
+            <TableHead>Date</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead align="right">Amount</TableHead>
+            <TableHead align="right">
+              <span className="sr-only">Download</span>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {invoices.map((inv) => {
+            const status = STATUS[inv.status];
+            const label = `Download ${inv.number}`;
+            return (
+              <TableRow key={inv.id}>
+                <TableCell className="font-mono text-[12.5px] font-medium text-foreground">{inv.number}</TableCell>
+                <TableCell className="whitespace-nowrap text-muted-foreground">{formatShortDate(inv.date)}</TableCell>
+                <TableCell>
+                  <Badge tone={status.tone} dot>
+                    {status.label}
+                  </Badge>
+                </TableCell>
+                <TableCell align="right" className="font-mono tabular-nums text-foreground">
+                  {formatMoney(inv.amount, inv.currency ?? currency)}
+                </TableCell>
+                <TableCell align="right">
+                  {inv.url ? (
+                    <Link
+                      href={inv.url}
+                      download
+                      aria-label={label}
+                      onClick={() => onDownload?.(inv)}
+                      className="inline-flex items-center gap-1.5 text-[12.5px] font-semibold"
+                    >
+                      <Download size={14} aria-hidden />
+                      PDF
+                    </Link>
+                  ) : onDownload && inv.status !== 'void' && inv.status !== 'draft' ? (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      icon={Download}
+                      aria-label={label}
+                      onClick={() => onDownload(inv)}
+                    >
+                      PDF
+                    </Button>
+                  ) : (
+                    <span className="text-[12px] text-muted-foreground">—</span>
+                  )}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Invoice table',
+  family: 'billing',
+  status: 'beta',
+  description:
+    'Invoice history table with number, date, amount, a status badge (paid, due, overdue, void) and a per-row PDF download.',
+  uses: ['Table', 'Badge', 'Link', 'Button'],
+};

package/src/billing/InvoiceTable/fixtures.ts

@@ -0,0 +1,38 @@
+import type { Invoice } from './InvoiceTable';
+
+/** Sample invoice history. */
+export const sampleInvoices: Invoice[] = [
+  {
+    id: 'inv_0526',
+    number: 'INV-2026-0005',
+    date: '2026-06-01',
+    amount: 1620,
+    status: 'open',
+    url: '#invoice-INV-2026-0005',
+  },
+  {
+    id: 'inv_0426',
+    number: 'INV-2026-0004',
+    date: '2026-05-01',
+    amount: 1584.2,
+    status: 'paid',
+    url: '#invoice-INV-2026-0004',
+  },
+  {
+    id: 'inv_0326',
+    number: 'INV-2026-0003',
+    date: '2026-04-01',
+    amount: 1498,
+    status: 'paid',
+    url: '#invoice-INV-2026-0003',
+  },
+  {
+    id: 'inv_0226',
+    number: 'INV-2026-0002',
+    date: '2026-03-01',
+    amount: 1432.6,
+    status: 'overdue',
+    url: '#invoice-INV-2026-0002',
+  },
+  { id: 'inv_0126', number: 'INV-2026-0001', date: '2026-02-01', amount: 1200, status: 'void' },
+];

package/src/billing/PaymentMethodCard/PaymentMethodCard.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { PaymentMethodCard } from './PaymentMethodCard';
+
+describe('PaymentMethodCard', () => {
+  it('renders the masked card and expiry', async () => {
+    const { container } = render(<PaymentMethodCard />);
+    expect(screen.getByText(/Visa ending in/)).toHaveTextContent('Visa ending in 4242');
+    expect(screen.getByText('08/28')).toBeInTheDocument();
+    expect(screen.getByText('Default')).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('shows the expiry status and fires update', async () => {
+    const user = userEvent.setup();
+    const onUpdate = vi.fn();
+    render(
+      <PaymentMethodCard
+        method={{ brand: 'Mastercard', last4: '0005', expMonth: 1, expYear: 2026, status: 'expired' }}
+        onUpdate={onUpdate}
+      />,
+    );
+    expect(screen.getByText('Expired')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Update' }));
+    expect(onUpdate).toHaveBeenCalledOnce();
+  });
+});

package/src/billing/PaymentMethodCard/PaymentMethodCard.tsx

@@ -0,0 +1,103 @@
+import {
+  Badge,
+  Button,
+  Card,
+  CardAction,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  cn,
+  type BadgeTone,
+} from '@gntik-ai/ui';
+import { CreditCard } from '@gntik-ai/icons';
+import { samplePaymentMethod } from './fixtures';
+
+export type PaymentMethodStatus = 'valid' | 'expiring' | 'expired';
+
+export interface PaymentMethod {
+  /** Card network as text, e.g. "Visa", "Mastercard", "Amex". */
+  brand: string;
+  last4: string;
+  expMonth: number;
+  expYear: number;
+  holder?: string;
+  isDefault?: boolean;
+  /** Computed by the app (the block never reads the clock). */
+  status?: PaymentMethodStatus;
+}
+
+export interface PaymentMethodCardProps {
+  method?: PaymentMethod;
+  title?: string;
+  description?: string;
+  onUpdate?: () => void;
+  onRemove?: () => void;
+  updateLabel?: string;
+  /** Heading level of the title, to fit the page outline (default h3). */
+  titleAs?: 'h2' | 'h3' | 'h4';
+  className?: string;
+}
+
+const STATUS: Record<Exclude<PaymentMethodStatus, 'valid'>, { label: string; tone: BadgeTone }> = {
+  expiring: { label: 'Expires soon', tone: 'warning' },
+  expired: { label: 'Expired', tone: 'destructive' },
+};
+
+/** The payment method on file: brand, masked number, expiry and an update action. No card artwork. */
+export function PaymentMethodCard({
+  method = samplePaymentMethod,
+  title = 'Payment method',
+  description = 'Charged at the start of each billing cycle.',
+  onUpdate,
+  onRemove,
+  updateLabel = 'Update',
+  titleAs = 'h3',
+  className,
+}: PaymentMethodCardProps) {
+  const expiry = `${String(method.expMonth).padStart(2, '0')}/${String(method.expYear).slice(-2)}`;
+  const status = method.status && method.status !== 'valid' ? STATUS[method.status] : undefined;
+  return (
+    <Card className={cn(className)}>
+      <CardHeader divided>
+        <CardTitle as={titleAs}>{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+        <CardAction className="flex items-center gap-2">
+          {onRemove && (
+            <Button variant="ghost" size="sm" onClick={onRemove}>
+              Remove
+            </Button>
+          )}
+          <Button variant="secondary" size="sm" onClick={onUpdate}>
+            {updateLabel}
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <div className="flex flex-wrap items-center gap-4 px-5 py-4">
+        <span
+          aria-hidden
+          className="grid h-10 w-14 shrink-0 place-items-center rounded-md border border-border bg-secondary font-mono text-[10.5px] font-semibold tracking-wide text-foreground uppercase"
+        >
+          {method.brand.slice(0, 4)}
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="flex flex-wrap items-center gap-2 text-[13.5px] font-medium text-foreground">
+            <span>
+              {method.brand} ending in <span className="font-mono tabular-nums">{method.last4}</span>
+            </span>
+            {method.isDefault && <Badge tone="neutral">Default</Badge>}
+            {status && (
+              <Badge tone={status.tone} dot>
+                {status.label}
+              </Badge>
+            )}
+          </p>
+          <p className="mt-0.5 flex items-center gap-1.5 text-[12px] text-muted-foreground">
+            <CreditCard size={13} aria-hidden className="shrink-0" />
+            Expires <span className="font-mono tabular-nums">{expiry}</span>
+            {method.holder && <> · {method.holder}</>}
+          </p>
+        </div>
+      </div>
+    </Card>
+  );
+}

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

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Payment method card',
+  family: 'billing',
+  status: 'beta',
+  description:
+    'The card on file as text (brand, last four digits, expiry, holder) with default/expiry badges and update/remove actions; no card artwork.',
+  uses: ['Card', 'Badge', 'Button'],
+};

package/src/billing/PaymentMethodCard/fixtures.ts

@@ -0,0 +1,12 @@
+import type { PaymentMethod } from './PaymentMethodCard';
+
+/** Sample default payment method. */
+export const samplePaymentMethod: PaymentMethod = {
+  brand: 'Visa',
+  last4: '4242',
+  expMonth: 8,
+  expYear: 2028,
+  holder: 'Alex Morgan',
+  isDefault: true,
+  status: 'valid',
+};