@thewhatmatters/wmds 0.4.9 → 0.4.27

package/docs/patterns/components-logview--log-viewer.tsx

@@ -0,0 +1,20 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — log viewer
+// Storybook: Components/LogView → Pattern — log viewer (?path=/story/components-logview--log-viewer)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { LogView } from "@thewhatmatters/wmds";
+
+const lines = [
+  "09:14:02 connected to etheris",
+  "09:14:08 walking /api/orders",
+  "09:14:21 12 findings",
+  "09:14:22 coverage 76%",
+  "09:16:14 delta +8 vs last scan",
+  "09:18:02 session closed",
+];
+
+export function LogViewer() {
+  const [follow, setFollow] = useState(true);
+  return <LogView label="Scan log" lines={lines} follow={follow} onFollowChange={setFollow} />;
+}

package/docs/patterns/components-moremenu--action-menu.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — action menu
+// @thewhatmatters/wmds@0.4.27 · Pattern — action menu
 // Storybook: Components/MoreMenu → Pattern — action menu (?path=/story/components-moremenu--action-menu)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-moremenu--in-card-header.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — Card header cluster
+// @thewhatmatters/wmds@0.4.27 · Pattern — Card header cluster
 // Storybook: Components/MoreMenu → Pattern — Card header cluster (?path=/story/components-moremenu--in-card-header)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-navlist--app-sidebar.tsx

@@ -0,0 +1,118 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — app sidebar
+// Storybook: Components/NavList → Pattern — app sidebar (?path=/story/components-navlist--app-sidebar)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Home, ListFilter, Menu, Package, Plane, Rocket, SunMoon, Utensils } from "lucide-react";
+import {
+  Button,
+  ButtonIcon,
+  IconButton,
+  NavList,
+  PageHeader,
+  Search,
+  Sheet,
+  Status,
+  type NavListSectionDef,
+} from "@thewhatmatters/wmds";
+
+const sections: NavListSectionDef[] = [
+  {
+    label: "Pinned",
+    labelAlign: "section",
+    action: (
+      <IconButton role="ghost" size="xs" aria-label="Filter pinned" icon={<ListFilter strokeWidth={2} />} />
+    ),
+    items: [
+      { id: "melbourne", label: "Weekend in Melbourne", href: "/tasks/melbourne", icon: <Plane strokeWidth={1.75} /> },
+      {
+        id: "apartment",
+        label: "Find a new apartment",
+        href: "/tasks/apartment",
+        icon: <Home strokeWidth={1.75} />,
+        trailing: <Status variant="dot" tone="warning" label="Unread" />,
+      },
+      { id: "dinner", label: "Plan team dinner", href: "/tasks/dinner", icon: <Utensils strokeWidth={1.75} /> },
+    ],
+  },
+  {
+    label: "Recent",
+    labelAlign: "section",
+    items: [
+      {
+        id: "ikea",
+        label: "Track my IKEA order",
+        href: "/tasks/ikea",
+        icon: <Package strokeWidth={1.75} />,
+        trailing: <Status variant="dot" tone="warning" label="Unread" pulsing />,
+      },
+    ],
+  },
+];
+
+function SidebarBody({
+  activeId,
+  onSelect,
+}: {
+  activeId: string;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <div className="flex h-full min-h-0 w-52 flex-col bg-body">
+      <div className="flex items-center gap-2 px-4 py-4">
+        <span className="inline-flex size-7 items-center justify-center rounded-lg bg-brand-tint text-brand-outline">
+          <ButtonIcon size="xs"><Rocket strokeWidth={2} /></ButtonIcon>
+        </span>
+        <span className="type-label text-fg">Orbit</span>
+      </div>
+      <div className="px-3 pb-2">
+        <Search size="sm" actionLabel="Search" aria-label="Search tasks" placeholder="Search" />
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <NavList aria-label="Tasks" sections={sections} activeId={activeId} onSelect={onSelect} />
+      </div>
+      <div className="mt-auto px-2 py-2">
+        <Button role="ghost" size="sm" align="start" className="w-full" icon={<SunMoon strokeWidth={2} />}>
+          Appearance
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function AppSidebar() {
+  const [open, setOpen] = useState(false);
+  const [activeId, setActiveId] = useState("ikea");
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col bg-body lg:flex-row">
+      <div className="max-lg:hidden h-full lg:block">
+        <SidebarBody activeId={activeId} onSelect={setActiveId} />
+      </div>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <PageHeader
+          variant="app"
+          className="lg:hidden"
+          title="Overview"
+          start={
+            <IconButton
+              role="ghost"
+              size="sm"
+              aria-label="Open menu"
+              icon={<Menu strokeWidth={2} />}
+              onClick={() => setOpen(true)}
+            />
+          }
+        />
+        <div className="max-lg:hidden px-4 py-6 lg:block">
+          <PageHeader variant="page" title="Overview" />
+        </div>
+      </div>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <Sheet.Content side="start" title="Menu">
+          <SidebarBody activeId={activeId} onSelect={setActiveId} />
+        </Sheet.Content>
+      </Sheet>
+    </div>
+  );
+}

package/docs/patterns/components-navlist--side-nav-settings.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — side nav (settings)
+// @thewhatmatters/wmds@0.4.27 · Pattern — side nav (settings)
 // Storybook: Components/NavList → Pattern — side nav (settings) (?path=/story/components-navlist--side-nav-settings)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-pageheader--app-header-pattern.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — app header
+// @thewhatmatters/wmds@0.4.27 · Pattern — app header
 // Storybook: Components/PageHeader → Pattern — app header (?path=/story/components-pageheader--app-header-pattern)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-pageheader--page-section-header.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — page header
+// @thewhatmatters/wmds@0.4.27 · Pattern — page header
 // Storybook: Components/PageHeader → Pattern — page header (?path=/story/components-pageheader--page-section-header)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-pageheader--toolbar-header.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — toolbar header
+// @thewhatmatters/wmds@0.4.27 · Pattern — toolbar header
 // Storybook: Components/PageHeader → Pattern — toolbar header (?path=/story/components-pageheader--toolbar-header)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-panel--end-detail-rail.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — end detail rail
+// @thewhatmatters/wmds@0.4.27 · Pattern — end detail rail
 // Storybook: Components/Panel → Pattern — end detail rail (?path=/story/components-panel--end-detail-rail)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-pillgroup--pill-group-pattern.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — pill group
+// @thewhatmatters/wmds@0.4.27 · Pattern — pill group
 // Storybook: Components/PillGroup → Pattern — pill group (?path=/story/components-pillgroup--pill-group-pattern)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-promptbar--pattern-prompt-bar.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — prompt bar
+// @thewhatmatters/wmds@0.4.27 · Pattern — prompt bar
 // Storybook: Components/PromptBar → Pattern — prompt bar (?path=/story/components-promptbar--pattern-prompt-bar)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-prose--article-body.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — article body
+// @thewhatmatters/wmds@0.4.27 · Pattern — article body
 // Storybook: Components/Prose → Pattern — article body (?path=/story/components-prose--article-body)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-radio-radiogroup--default.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — vertical
+// @thewhatmatters/wmds@0.4.27 · Pattern — vertical
 // Storybook: Components/Radio/RadioGroup → Pattern — vertical (?path=/story/components-radio-radiogroup--default)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-scrollhorizontal--project-gallery-pattern.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — project gallery
+// @thewhatmatters/wmds@0.4.27 · Pattern — project gallery
 // Storybook: Components/ScrollHorizontal → Pattern — project gallery (?path=/story/components-scrollhorizontal--project-gallery-pattern)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-scrollhorizontal--with-intro.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — gallery intro
+// @thewhatmatters/wmds@0.4.27 · Pattern — gallery intro
 // Storybook: Components/ScrollHorizontal → Pattern — gallery intro (?path=/story/components-scrollhorizontal--with-intro)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-sectioncaption--column-caption.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — column caption
+// @thewhatmatters/wmds@0.4.27 · Pattern — column caption
 // Storybook: Components/SectionCaption → Pattern — column caption (?path=/story/components-sectioncaption--column-caption)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-sectioncaption--with-action.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — caption with an action
+// @thewhatmatters/wmds@0.4.27 · Pattern — caption with an action
 // Storybook: Components/SectionCaption → Pattern — caption with an action (?path=/story/components-sectioncaption--with-action)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-sheet--bottom-sheet.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — bottom sheet
+// @thewhatmatters/wmds@0.4.27 · Pattern — bottom sheet
 // Storybook: Components/Sheet → Pattern — bottom sheet (?path=/story/components-sheet--bottom-sheet)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-sheet--end-sheet.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — end sheet
+// @thewhatmatters/wmds@0.4.27 · Pattern — end sheet
 // Storybook: Components/Sheet → Pattern — end sheet (?path=/story/components-sheet--end-sheet)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-sheet--side-sheet-header-actions.tsx

@@ -0,0 +1,50 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — side sheet header actions
+// Storybook: Components/Sheet → Pattern — side sheet header actions (?path=/story/components-sheet--side-sheet-header-actions)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { Button, IconButton, Sheet } from "@thewhatmatters/wmds";
+
+export function StepThroughSheet() {
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(0);
+  const names = ["Maya Chen", "Field notes: Q4 studio update", "Dev Patel"];
+
+  return (
+    <>
+      <Button role="secondary" onClick={() => setOpen(true)}>
+        Review queue
+      </Button>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <Sheet.Content
+          side="end"
+          title={names[index]}
+          description={`${index + 1} of ${names.length}`}
+          headerActions={
+            <>
+              <IconButton
+                size="sm"
+                role="ghost"
+                icon={<ChevronUp strokeWidth={2} />}
+                aria-label="Previous"
+                disabled={index === 0}
+                onClick={() => setIndex(index - 1)}
+              />
+              <IconButton
+                size="sm"
+                role="ghost"
+                icon={<ChevronDown strokeWidth={2} />}
+                aria-label="Next"
+                disabled={index === names.length - 1}
+                onClick={() => setIndex(index + 1)}
+              />
+            </>
+          }
+        >
+          <p>Detail for {names[index]}.</p>
+        </Sheet.Content>
+      </Sheet>
+    </>
+  );
+}

package/docs/patterns/components-sheet--side-sheet-url-deep-link.tsx

@@ -0,0 +1,51 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — side sheet URL deep link
+// Storybook: Components/Sheet → Pattern — side sheet URL deep link (?path=/story/components-sheet--side-sheet-url-deep-link)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { TextLink, Sheet, Button, useSheetParam, withSheetParam, dialogFooterActionsClasses } from "@thewhatmatters/wmds";
+
+interface ApprovalRow {
+  id: string;
+  name: string;
+}
+
+export function ApprovalList({ rows, initialUrl }: { rows: ApprovalRow[]; initialUrl?: string }) {
+  const { open, id, onOpenChange } = useSheetParam("approval", { initialUrl });
+  const row = rows.find((item) => item.id === id);
+
+  return (
+    <>
+      <ul className="flex flex-col gap-2">
+        {rows.map((item) => (
+          <li key={item.id}>
+            <TextLink
+              href={withSheetParam(initialUrl ?? "/approvals", item.id, "approval")}
+              onClick={(event) => {
+                event.preventDefault();
+                onOpenChange(true, item.id);
+              }}
+            >
+              {item.name}
+            </TextLink>
+          </li>
+        ))}
+      </ul>
+      <Sheet open={open && row != null} onOpenChange={(next) => onOpenChange(next)}>
+        <Sheet.Content
+          side="end"
+          title={row?.name}
+          description="Creator application"
+          footer={
+            <div className={dialogFooterActionsClasses}>
+              <Button size="sm" role="primary" onClick={() => onOpenChange(false)}>
+                Done
+              </Button>
+            </div>
+          }
+        >
+          <p>Detail for {row?.name}.</p>
+        </Sheet.Content>
+      </Sheet>
+    </>
+  );
+}

package/docs/patterns/components-sheet--side-sheet.tsx

@@ -0,0 +1,38 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — side sheet
+// Storybook: Components/Sheet → Pattern — side sheet (?path=/story/components-sheet--side-sheet)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Button, Sheet, dialogFooterActionsClasses } from "@thewhatmatters/wmds";
+
+export function ApprovalSheet() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button role="primary" onClick={() => setOpen(true)}>
+        Review Maya Chen
+      </Button>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <Sheet.Content
+          side="end"
+          size="md"
+          title="Maya Chen"
+          description="Creator application, waiting 3 days"
+          footer={
+            <div className={dialogFooterActionsClasses}>
+              <Button size="sm" role="outline" onClick={() => setOpen(false)}>
+                Deny
+              </Button>
+              <Button size="sm" role="primary" onClick={() => setOpen(false)}>
+                Approve
+              </Button>
+            </div>
+          }
+        >
+          <p>Writes about independent studios. Two published samples attached.</p>
+        </Sheet.Content>
+      </Sheet>
+    </>
+  );
+}

package/docs/patterns/components-sitenav--brand-and-cta.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — brand + CTA
+// @thewhatmatters/wmds@0.4.27 · Pattern — brand + CTA
 // Storybook: Components/SiteNav → Pattern — brand + CTA (?path=/story/components-sitenav--brand-and-cta)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-sitenav--centered-links.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — centered links
+// @thewhatmatters/wmds@0.4.27 · Pattern — centered links
 // Storybook: Components/SiteNav → Pattern — centered links (?path=/story/components-sitenav--centered-links)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-sitenav--compact.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — compact (scrolled)
+// @thewhatmatters/wmds@0.4.27 · Pattern — compact (scrolled)
 // Storybook: Components/SiteNav → Pattern — compact (scrolled) (?path=/story/components-sitenav--compact)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-sitenav--marketing-header.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — marketing header
+// @thewhatmatters/wmds@0.4.27 · Pattern — marketing header
 // Storybook: Components/SiteNav → Pattern — marketing header (?path=/story/components-sitenav--marketing-header)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-sitenav--mega-menu.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — mega menu
+// @thewhatmatters/wmds@0.4.27 · Pattern — mega menu
 // Storybook: Components/SiteNav → Pattern — mega menu (?path=/story/components-sitenav--mega-menu)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-stat--hero-stat.tsx

@@ -0,0 +1,54 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — hero stat
+// Storybook: Components/Stat → Pattern — hero stat (?path=/story/components-stat--hero-stat)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, Stat } from "@thewhatmatters/wmds";
+import { BarChart3, Receipt, Unplug, Wallet } from "lucide-react";
+
+export function HeroStats() {
+  return (
+    <Stat.Group aria-label="Performance" columns={2}>
+      <Stat
+        size="lg"
+        icon={<Receipt strokeWidth={2} />}
+        label="Attributed revenue"
+        value="$18,420"
+        trend={{ value: "+24.1%", direction: "up" }}
+        context="vs $14,850"
+        action={
+          <Button role="secondary" size="sm">
+            View details
+          </Button>
+        }
+      />
+      <Stat
+        size="lg"
+        icon={<BarChart3 strokeWidth={2} />}
+        label="Return on spend"
+        value="2.7×"
+        trend={{ value: "−0.4", direction: "down" }}
+        context="vs 3.1×"
+      />
+      <Stat
+        size="lg"
+        icon={<Wallet strokeWidth={2} />}
+        label="Available to spend"
+        value="$14.00"
+        trend={{ value: "0.0%", direction: "flat" }}
+        context="of $1M goal"
+      />
+      <Stat
+        size="lg"
+        icon={<Unplug strokeWidth={2} />}
+        label="Content awaiting approval"
+        value=""
+        unavailable={{ reason: "Google Analytics is not linked" }}
+        action={
+          <Button role="secondary" size="sm">
+            Connect
+          </Button>
+        }
+      />
+    </Stat.Group>
+  );
+}

package/docs/patterns/components-stat--insights-row.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — insights row
+// @thewhatmatters/wmds@0.4.27 · Pattern — insights row
 // Storybook: Components/Stat → Pattern — insights row (?path=/story/components-stat--insights-row)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-stepprogress--step-progress-pattern.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — step progress
+// @thewhatmatters/wmds@0.4.27 · Pattern — step progress
 // Storybook: Components/StepProgress → Pattern — step progress (?path=/story/components-stepprogress--step-progress-pattern)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-switch--default.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — default
+// @thewhatmatters/wmds@0.4.27 · Pattern — default
 // Storybook: Components/Switch → Pattern — default (?path=/story/components-switch--default)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-switch--settings-row.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — settings row
+// @thewhatmatters/wmds@0.4.27 · Pattern — settings row
 // Storybook: Components/Switch → Pattern — settings row (?path=/story/components-switch--settings-row)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-tab--settings-pages.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — settings pages
+// @thewhatmatters/wmds@0.4.27 · Pattern — settings pages
 // Storybook: Components/Tab → Pattern — settings pages (?path=/story/components-tab--settings-pages)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-table--approvals-with-sheet.tsx

@@ -0,0 +1,81 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — approvals with sheet
+// Storybook: Components/Table → Pattern — approvals with sheet (?path=/story/components-table--approvals-with-sheet)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import {
+  Button,
+  Sheet,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TextLink,
+  dialogFooterActionsClasses,
+} from "@thewhatmatters/wmds";
+
+interface ApprovalRow {
+  id: string;
+  name: string;
+  kind: string;
+  waiting: string;
+}
+
+export function ApprovalsWithSheet({ rows }: { rows: ApprovalRow[] }) {
+  const [id, setId] = useState<string | null>(null);
+  const row = rows.find((item) => item.id === id);
+
+  return (
+    <>
+      <Table aria-label="Approvals waiting on you">
+        <TableCaption>{rows.length} waiting on you</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Kind</TableHead>
+            <TableHead align="end">Waiting</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map((item) => (
+            <TableRow key={item.id} onClick={() => setId(item.id)}>
+              <TableCell>
+                <TextLink
+                  variant="quiet"
+                  href={`#${item.id}`}
+                  onClick={(event) => event.preventDefault()}
+                >
+                  {item.name}
+                </TextLink>
+              </TableCell>
+              <TableCell>{item.kind}</TableCell>
+              <TableCell align="end">{item.waiting}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <Sheet open={row != null} onOpenChange={(open) => setId(open ? id : null)}>
+        <Sheet.Content
+          side="end"
+          title={row?.name}
+          description={row?.kind}
+          footer={
+            <div className={dialogFooterActionsClasses}>
+              <Button size="sm" role="outline" onClick={() => setId(null)}>
+                Deny
+              </Button>
+              <Button size="sm" role="primary" onClick={() => setId(null)}>
+                Approve
+              </Button>
+            </div>
+          }
+        >
+          <p>Waiting {row?.waiting}.</p>
+        </Sheet.Content>
+      </Sheet>
+    </>
+  );
+}