@olwiba/ui 0.2.24 → 0.2.26

package/docs-manifest.json

@@ -0,0 +1,253 @@
+{
+  "package": "@olwiba/ui",
+  "version": "0.2.25",
+  "generatedBy": "scripts/check-docs-exports.ts",
+  "contentRoot": "content/docs",
+  "demosRoot": "site/demos",
+  "pages": [
+    "app/app-shell.mdx",
+    "app/auth-section.mdx",
+    "app/billing-panel.mdx",
+    "app/empty-state.mdx",
+    "app/error-page.mdx",
+    "app/index.mdx",
+    "app/onboarding-wizard.mdx",
+    "app/settings-section.mdx",
+    "app/team-members-panel.mdx",
+    "app/update-banner.mdx",
+    "components/activity-feed.mdx",
+    "components/chart.mdx",
+    "components/command-menu.mdx",
+    "components/confirm-dialog.mdx",
+    "components/context-menu.mdx",
+    "components/data-table.mdx",
+    "components/dock.mdx",
+    "components/feature-card.mdx",
+    "components/file-upload.mdx",
+    "components/full-page-spinner.mdx",
+    "components/glass-card.mdx",
+    "components/image-card.mdx",
+    "components/index.mdx",
+    "components/load-more.mdx",
+    "components/notifications-popover.mdx",
+    "components/notify.mdx",
+    "components/olwiba-ui-context.mdx",
+    "components/page-header.mdx",
+    "components/pricing-card.mdx",
+    "components/register-hotkeys.mdx",
+    "components/root-error-fallback.mdx",
+    "components/spotlight.mdx",
+    "components/stat-card.mdx",
+    "components/suspensed.mdx",
+    "components/testimonial-card.mdx",
+    "components/theme-color-updater.mdx",
+    "components/theme-switch-minimal.mdx",
+    "components/version-banner.mdx",
+    "email/action-email.mdx",
+    "email/email-layout.mdx",
+    "email/email-link-fallback.mdx",
+    "email/index.mdx",
+    "email/notice-email.mdx",
+    "hooks/index.mdx",
+    "hooks/use-confirm.mdx",
+    "hooks/use-controlled-open.mdx",
+    "hooks/use-copy-to-clipboard.mdx",
+    "hooks/use-debounce.mdx",
+    "hooks/use-intersection-observer.mdx",
+    "hooks/use-local-storage.mdx",
+    "hooks/use-media-query.mdx",
+    "hooks/use-mounted.mdx",
+    "hooks/use-pagination.mdx",
+    "hooks/use-scrolled-past.mdx",
+    "index.mdx",
+    "marketing/contact-section.mdx",
+    "marketing/cta-section.mdx",
+    "marketing/faq-section.mdx",
+    "marketing/features-section.mdx",
+    "marketing/footer.mdx",
+    "marketing/hero-section.mdx",
+    "marketing/index.mdx",
+    "marketing/navbar.mdx",
+    "marketing/newsletter-section.mdx",
+    "marketing/post-list.mdx",
+    "marketing/pricing-section.mdx",
+    "marketing/stats-section.mdx",
+    "marketing/steps-section.mdx",
+    "marketing/team-section.mdx",
+    "marketing/testimonials-section.mdx",
+    "mechanics/carousel.mdx",
+    "mechanics/index.mdx",
+    "mechanics/sortable.mdx",
+    "motion/animated-swap.mdx",
+    "motion/count-up.mdx",
+    "motion/fade-in.mdx",
+    "motion/index.mdx",
+    "motion/page-transition.mdx",
+    "motion/stagger-children.mdx",
+    "overlays/index.mdx",
+    "overlays/overlay.mdx",
+    "overlays/underlay.mdx"
+  ],
+  "demos": [
+    "action-email.tsx",
+    "activity-feed.tsx",
+    "animated-swap.tsx",
+    "app-shell.tsx",
+    "app-ui-page.tsx",
+    "application-sidebar-block.tsx",
+    "auth-section.tsx",
+    "auth-split-block.tsx",
+    "billing-page.tsx",
+    "billing-panel.tsx",
+    "carousel.tsx",
+    "chart.tsx",
+    "command-menu.tsx",
+    "confirm-dialog.tsx",
+    "contact-form-block.tsx",
+    "contact-section.tsx",
+    "context-menu.tsx",
+    "count-up.tsx",
+    "cta-section.tsx",
+    "dashboard-overview-block.tsx",
+    "dashboard-shell-block.tsx",
+    "data-table.tsx",
+    "demo-brand.tsx",
+    "dock.tsx",
+    "document-sidebar-block.tsx",
+    "email-examples.tsx",
+    "email-frame.tsx",
+    "email-layout.tsx",
+    "email-link-fallback.tsx",
+    "empty-state-block.tsx",
+    "empty-state.tsx",
+    "error-page.tsx",
+    "fade-in.tsx",
+    "faq-section.tsx",
+    "feature-card.tsx",
+    "features-section.tsx",
+    "file-upload.tsx",
+    "footer.tsx",
+    "full-page-spinner.tsx",
+    "glass-card.tsx",
+    "glow-effect.tsx",
+    "gradient-background.tsx",
+    "grid-pattern.tsx",
+    "hero-section.tsx",
+    "image-card.tsx",
+    "login-block.tsx",
+    "marketing-cta-block.tsx",
+    "marketing-demo-data.tsx",
+    "marketing-faq-block.tsx",
+    "marketing-features-block.tsx",
+    "marketing-footer-block.tsx",
+    "marketing-hero-block.tsx",
+    "marketing-nav-block.tsx",
+    "marketing-newsletter-block.tsx",
+    "marketing-page.tsx",
+    "marketing-pricing-block.tsx",
+    "marketing-stats-block.tsx",
+    "marketing-team-block.tsx",
+    "marketing-testimonials-block.tsx",
+    "navbar.tsx",
+    "newsletter-section.tsx",
+    "noise-overlay.tsx",
+    "not-found-block.tsx",
+    "notice-email.tsx",
+    "notifications-popover.tsx",
+    "notify.tsx",
+    "olwiba-ui-context.tsx",
+    "onboarding-block.tsx",
+    "onboarding-wizard.tsx",
+    "overlay.tsx",
+    "page-header.tsx",
+    "page-transition.tsx",
+    "post-list.tsx",
+    "pricing-card.tsx",
+    "pricing-section.tsx",
+    "register-hotkeys.tsx",
+    "root-error-fallback.tsx",
+    "settings-layout-block.tsx",
+    "settings-section.tsx",
+    "sign-in-page.tsx",
+    "sortable.tsx",
+    "spotlight.tsx",
+    "stagger-children.tsx",
+    "stat-card.tsx",
+    "stats-section.tsx",
+    "steps-section.tsx",
+    "suspensed.tsx",
+    "team-members-panel.tsx",
+    "team-section.tsx",
+    "testimonial-card.tsx",
+    "testimonials-section.tsx",
+    "theme-color-updater.tsx",
+    "theme-switch-minimal.tsx",
+    "underlay.tsx",
+    "update-banner.tsx",
+    "use-copy-to-clipboard.tsx",
+    "use-debounce.tsx",
+    "use-intersection-observer.tsx",
+    "use-local-storage.tsx",
+    "use-media-query.tsx",
+    "use-pagination.tsx",
+    "user-profile-block.tsx",
+    "version-banner.tsx"
+  ],
+  "sandboxIds": [
+    "action-email",
+    "activity-feed",
+    "animated-swap",
+    "app-shell",
+    "auth-section",
+    "billing-panel",
+    "carousel",
+    "chart",
+    "command-menu",
+    "confirm-dialog",
+    "contact-section",
+    "context-menu",
+    "count-up",
+    "cta-section",
+    "data-table",
+    "dock",
+    "email-layout",
+    "email-link-fallback",
+    "fade-in",
+    "faq-section",
+    "feature-card",
+    "features-section",
+    "file-upload",
+    "footer",
+    "glass-card",
+    "hero-section",
+    "image-card",
+    "navbar",
+    "newsletter-section",
+    "notice-email",
+    "notifications-popover",
+    "notify",
+    "onboarding-wizard",
+    "page-transition",
+    "post-list",
+    "pricing-card",
+    "pricing-section",
+    "settings-section",
+    "sortable",
+    "spotlight",
+    "stagger-children",
+    "stat-card",
+    "stats-section",
+    "steps-section",
+    "team-members-panel",
+    "team-section",
+    "testimonial-card",
+    "testimonials-section",
+    "update-banner",
+    "use-copy-to-clipboard",
+    "use-debounce",
+    "use-intersection-observer",
+    "use-local-storage",
+    "use-media-query",
+    "use-pagination"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -19,29 +19,35 @@
     "./mdx": {
       "import": "./dist/mdx/index.js",
       "types": "./dist/mdx/index.d.ts"
-    }
+    },
+    "./content/*": "./content/*",
+    "./demos/*": "./site/demos/*.tsx",
+    "./docs-manifest.json": "./docs-manifest.json"
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "content",
+    "site/demos",
+    "docs-manifest.json"
   ],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "dev:link:ecosystem": "pwsh -NoProfile -Command '& { $ErrorActionPreference = \"Stop\"; function Invoke-Link([string]$RepoPath,[string[]]$CommandArgs){ Write-Host (\"[link-ecosystem] bun \" + ($CommandArgs -join \" \") + \" (\" + $RepoPath + \")\"); Push-Location $RepoPath; try { & bun @CommandArgs } finally { Pop-Location } }; Invoke-Link \"..\\\\olwibaCN\" @(\"link\"); Invoke-Link \"..\\\\olwibaDOCS\" @(\"link\"); Invoke-Link \".\" @(\"link\"); Invoke-Link \"..\\\\genesis-render\" @(\"link\"); Invoke-Link \"..\\\\olwibaDOCS\" @(\"link\",\"@olwiba/cn\"); Invoke-Link \".\" @(\"link\",\"@olwiba/cn\"); Invoke-Link \".\" @(\"link\",\"@olwiba/docs\"); Invoke-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/cn\"); Invoke-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/docs\"); Invoke-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/ui\"); Write-Host \"[link-ecosystem] Local Bun links are in place. CI and build servers will still use published package versions.\" }'",
     "dev:link:ecosystem:check": "pwsh -NoProfile -Command '& { $ErrorActionPreference = \"Stop\"; function Show-Link([string]$RepoPath,[string[]]$CommandArgs){ Write-Host (\"[link-ecosystem] bun \" + ($CommandArgs -join \" \") + \" (\" + $RepoPath + \")\") }; Show-Link \"..\\\\olwibaCN\" @(\"link\"); Show-Link \"..\\\\olwibaDOCS\" @(\"link\"); Show-Link \".\" @(\"link\"); Show-Link \"..\\\\genesis-render\" @(\"link\"); Show-Link \"..\\\\olwibaDOCS\" @(\"link\",\"@olwiba/cn\"); Show-Link \".\" @(\"link\",\"@olwiba/cn\"); Show-Link \".\" @(\"link\",\"@olwiba/docs\"); Show-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/cn\"); Show-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/docs\"); Show-Link \"..\\\\genesis-render\" @(\"link\",\"@olwiba/ui\"); Write-Host \"[link-ecosystem] Skipped directories without package.json: genesis, genesis-start, genesis-sync\"; Write-Host \"[link-ecosystem] Dry run complete. No links were changed.\" }'",
-    "web:build": "fumadocs-mdx && vite build",
-    "web:dev": "fumadocs-mdx && vite dev",
+    "web:build": "bun run email:generate && fumadocs-mdx && vite build",
+    "web:dev": "bun run email:generate && fumadocs-mdx && vite dev",
     "start": "bun run server.ts",
     "types:check": "fumadocs-mdx && tsc --noEmit",
-    "iso:generate": "bun scripts/generate-iso-previews.ts"
+    "iso:generate": "bun scripts/generate-iso-previews.ts",
+    "email:generate": "bun scripts/generate-email-previews.ts"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@olwiba/dx": "0.0.23",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
@@ -63,8 +69,10 @@
   },
   "devDependencies": {
     "@content-collections/mdx": "^0.2.2",
-    "@olwiba/cn": "0.1.35",
-    "@olwiba/docs": "0.1.40",
+    "@olwiba/cn": "0.1.39",
+    "@olwiba/docs": "0.1.45",
+    "@olwiba/dx": "0.0.23",
+    "@react-email/render": "^2.1.0",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",
     "@tanstack/react-router-devtools": "1.154.8",

package/site/demos/action-email.tsx

@@ -0,0 +1,6 @@
+'use client';
+import { EmailFrame } from './email-frame';
+
+export default function Demo() {
+  return <EmailFrame id="action-email" />;
+}

package/site/demos/activity-feed.tsx

@@ -0,0 +1,42 @@
+'use client';
+import { ActivityFeed } from '@olwiba/ui';
+import { CreditCard, GitCommit, Rocket } from 'lucide-react';
+
+export default function Demo() {
+  return (
+    <div className="mx-auto max-w-md p-8">
+      <ActivityFeed
+        items={[
+          {
+            id: '1',
+            title: <><span className="font-medium">Ana Sousa</span> deployed to production</>,
+            description: 'v0.1.16 · 12 commits',
+            timestamp: '2h ago',
+            avatar: 'https://ui.shadcn.com/avatars/01.png',
+            initials: 'AS',
+          },
+          {
+            id: '2',
+            title: <><span className="font-medium">Marcus Webb</span> pushed 3 commits</>,
+            description: 'feat: billing usage alerts',
+            timestamp: '5h ago',
+            icon: <GitCommit />,
+          },
+          {
+            id: '3',
+            title: 'Subscription renewed',
+            description: 'Pro plan · $29/month',
+            timestamp: 'Yesterday',
+            icon: <CreditCard />,
+          },
+          {
+            id: '4',
+            title: 'Project created',
+            timestamp: 'Mar 2',
+            icon: <Rocket />,
+          },
+        ]}
+      />
+    </div>
+  );
+}

package/site/demos/animated-swap.tsx

@@ -0,0 +1,42 @@
+'use client';
+import * as React from 'react';
+import { AnimatedSwap, Button, type AnimatedSwapEffect } from '@olwiba/ui';
+
+const PRICES = ['$9', '$25', '$120'];
+const EFFECTS: AnimatedSwapEffect[] = ['roll', 'fade', 'slide'];
+
+export default function Demo() {
+  const [step, setStep] = React.useState(0);
+  const [effect, setEffect] = React.useState<AnimatedSwapEffect>('roll');
+  const price = PRICES[step % PRICES.length]!;
+
+  return (
+    <div className="flex flex-col items-center gap-6 p-8">
+      <div className="flex gap-1 rounded-full border bg-card p-1">
+        {EFFECTS.map((name) => (
+          <button
+            key={name}
+            type="button"
+            onClick={() => setEffect(name)}
+            className={`rounded-full px-3 py-1 text-sm capitalize transition-colors ${
+              effect === name ? 'bg-primary text-primary-foreground' : 'text-muted-foreground'
+            }`}
+          >
+            {name}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex items-end gap-1">
+        <AnimatedSwap swapKey={price} effect={effect} className="text-5xl font-bold tracking-tight">
+          {price}
+        </AnimatedSwap>
+        <span className="mb-1.5 text-sm text-muted-foreground">/month</span>
+      </div>
+
+      <Button variant="outline" onClick={() => setStep((s) => s + 1)}>
+        Change plan
+      </Button>
+    </div>
+  );
+}

package/site/demos/app-shell.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { AppShell } from '@olwiba/ui';
+import { LayoutDashboard, Users, FileText, Settings, Plus } from 'lucide-react';
+import { demoBrandLogo, demoBrandName } from './demo-brand';
+
+export default function AppShellDemo() {
+  return (
+    <AppShell
+      sidebarPosition="contained"
+      // Same lockup as the Navbar demo, from one definition — the point of
+      // showing it in both is that they agree. Lowercase on purpose: a name
+      // with no caps and no descenders is the least forgiving case for the
+      // brand text's vertical alignment against the badge beside it.
+      brand={{ name: demoBrandName, logo: demoBrandLogo, href: '#' }}
+      navItems={[
+        { icon: LayoutDashboard, label: 'Dashboard', href: '#', isActive: true },
+        { icon: Users, label: 'Team', href: '#' },
+        { icon: FileText, label: 'Documents', href: '#' },
+        { icon: Settings, label: 'Settings', href: '#' },
+      ]}
+      action={{ icon: Plus, label: 'New project', href: '#' }}
+      user={{
+        name: 'Ollie Bannister',
+        email: 'ollie@nexus.dev',
+        plan: 'pro',
+        onSignOut: () => {},
+        onBilling: () => {},
+      }}
+      pageTitle="Dashboard"
+    >
+      <div className="flex flex-1 flex-col gap-4 p-6">
+        <div className="grid grid-cols-3 gap-4">
+          {['Revenue', 'Users', 'Active'].map((label) => (
+            <div key={label} className="rounded-lg border bg-card p-4">
+              <p className="text-xs text-muted-foreground">{label}</p>
+              <p className="mt-1 text-2xl font-semibold">—</p>
+            </div>
+          ))}
+        </div>
+        <div className="flex-1 rounded-lg border bg-card p-4">
+          <p className="text-sm text-muted-foreground">Page content goes here.</p>
+        </div>
+      </div>
+    </AppShell>
+  );
+}

package/site/demos/app-ui-page.tsx

@@ -0,0 +1,9 @@
+import { AppShell } from '@olwiba/ui';
+
+export default function AppUIPageDemo() {
+  return (
+    <div className="w-full max-w-[1400px]">
+      <AppShell />
+    </div>
+  );
+}

package/site/demos/application-sidebar-block.tsx

@@ -0,0 +1,9 @@
+import { AppShell } from '@olwiba/ui';
+
+export default function ApplicationSidebarBlockDemo() {
+  return (
+    <div className="w-full max-w-7xl">
+      <AppShell />
+    </div>
+  );
+}

package/site/demos/auth-section.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { AuthSection } from '@olwiba/ui';
+
+export default function AuthSectionDemo() {
+  return (
+    <AuthSection
+      layout="split"
+      onSubmit={(e) => e.preventDefault()}
+      onSso={() => {}}
+      signUpHref="#"
+      forgotPasswordHref="#"
+    />
+  );
+}

package/site/demos/auth-split-block.tsx

@@ -0,0 +1,9 @@
+import { AuthSection } from '@olwiba/ui';
+
+export default function AuthSplitBlockDemo() {
+  return (
+    <div className="w-full max-w-5xl">
+      <AuthSection layout="split" />
+    </div>
+  );
+}

package/site/demos/billing-page.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import * as React from 'react';
+import { CreditCard, Download, FileText, LayoutGrid, Settings, Shield, User, Zap } from 'lucide-react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  cn,
+  Separator,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@olwiba/cn';
+import { StatCard, Button } from '@olwiba/ui';
+
+const navItems = [
+  { id: 'billing', label: 'Billing', Icon: CreditCard },
+  { id: 'profile', label: 'Profile', Icon: User },
+  { id: 'security', label: 'Security', Icon: Shield },
+  { id: 'integrations', label: 'Integrations', Icon: LayoutGrid },
+  { id: 'settings', label: 'Settings', Icon: Settings },
+];
+
+const invoices = [
+  { id: 'INV-2024-009', date: 'Mar 1, 2026', amount: '$29.00', status: 'Paid' },
+  { id: 'INV-2024-008', date: 'Feb 1, 2026', amount: '$29.00', status: 'Paid' },
+  { id: 'INV-2024-007', date: 'Jan 1, 2026', amount: '$29.00', status: 'Paid' },
+  { id: 'INV-2024-006', date: 'Dec 1, 2025', amount: '$29.00', status: 'Paid' },
+  { id: 'INV-2024-005', date: 'Nov 1, 2025', amount: '$19.00', status: 'Paid' },
+];
+
+export default function BillingPageDemo() {
+  return (
+    <div className="w-full max-w-5xl overflow-hidden rounded-2xl border bg-card">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b px-6 py-4">
+        <div className="flex items-center gap-2 font-semibold">
+          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+            <Zap className="size-4" />
+          </div>
+          Olwiba
+        </div>
+        <Button variant="ghost" size="sm" className="gap-2">
+          <Avatar className="size-6">
+            <AvatarImage src="https://ui.shadcn.com/avatars/01.png" />
+            <AvatarFallback>OR</AvatarFallback>
+          </Avatar>
+          Olivia Reed
+        </Button>
+      </div>
+
+      <div className="grid lg:grid-cols-[200px_1fr]">
+        {/* Sidebar */}
+        <nav className="space-y-1 border-b p-4 lg:border-b-0 lg:border-r">
+          {navItems.map(({ id, label, Icon }) => (
+            <button
+              key={id}
+              className={cn(
+                'flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm transition-colors',
+                id === 'billing'
+                  ? 'bg-accent font-medium text-accent-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+              )}
+            >
+              <Icon className="size-4 shrink-0" />
+              {label}
+            </button>
+          ))}
+        </nav>
+
+        {/* Main */}
+        <div className="space-y-8 p-6 lg:p-8">
+          {/* Current plan */}
+          <div className="space-y-4">
+            <div>
+              <h2 className="text-lg font-semibold">Billing & Subscription</h2>
+              <p className="text-sm text-muted-foreground">Manage your plan, payment method, and invoices.</p>
+            </div>
+            <Separator />
+            <div className="rounded-xl border bg-muted/40 p-5">
+              <div className="flex flex-wrap items-start justify-between gap-4">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-semibold">Pro Plan</span>
+                    <Badge>Active</Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">$29 / month · renews Apr 1, 2026</p>
+                  <p className="text-xs text-muted-foreground">Billed to Visa ending in 4242</p>
+                </div>
+                <div className="flex gap-2">
+                  <Button variant="outline" size="sm">Change plan</Button>
+                  <Button variant="outline" size="sm">Update card</Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Usage stats */}
+          <div className="space-y-3">
+            <h3 className="font-medium">Usage this month</h3>
+            <div className="grid gap-3 sm:grid-cols-3">
+              <StatCard value="24" label="Active projects" delta="+2" trend="up" description="3 projects added this month" />
+              <StatCard value="1,240" label="API calls" delta="+18%" trend="up" description="vs 1,051 last month" />
+              <StatCard value="4.2 GB" label="Storage used" delta="of 20 GB" trend="neutral" description="21% of your plan limit" />
+            </div>
+          </div>
+
+          {/* Invoice history */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between gap-3">
+              <h3 className="font-medium">Invoice history</h3>
+              <Button variant="outline" size="sm">
+                <Download className="mr-2 size-3.5" />
+                Export all
+              </Button>
+            </div>
+            <div className="rounded-xl border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Invoice</TableHead>
+                    <TableHead>Date</TableHead>
+                    <TableHead>Amount</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead className="text-right">PDF</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {invoices.map((inv) => (
+                    <TableRow key={inv.id}>
+                      <TableCell className="font-mono text-xs">{inv.id}</TableCell>
+                      <TableCell className="text-sm text-muted-foreground">{inv.date}</TableCell>
+                      <TableCell className="text-sm">{inv.amount}</TableCell>
+                      <TableCell>
+                        <Badge variant="secondary">{inv.status}</Badge>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button variant="ghost" size="icon" className="size-7">
+                          <FileText className="size-3.5" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}