@siyahi/ui 0.1.9-next.3 → 0.1.9-next.31

package/agents/examples/scatter-chart-quadrants.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import { ScatterChartCard, useFormat, type ScatterPoint } from "@siyahi/ui";
+
+// A grocer's products this quarter against last: x is the change in shelf price, y the change in units sold, and
+// size the quarter's revenue; made-up figures. Largest first, so the biggest sellers take the labels.
+const products: ScatterPoint[] = [
+  { name: "Basmati rice 5 kg", x: 0.06, y: -0.04, size: 1_840_000 },
+  { name: "Sunflower oil 1 L", x: -0.08, y: 0.12, size: 1_520_000 },
+  { name: "Full-cream milk", x: 0.03, y: 0.05, size: 1_310_000 },
+  { name: "Atta 10 kg", x: 0.04, y: -0.09, size: 1_120_000 },
+  { name: "Tea 500 g", x: -0.02, y: 0.08, size: 760_000 },
+  { name: "Paneer 200 g", x: 0.09, y: 0.11, size: 640_000 },
+  { name: "Toor dal 1 kg", x: 0.12, y: -0.18, size: 590_000 },
+  { name: "Biscuits family pack", x: -0.05, y: -0.03, size: 420_000 },
+  { name: "Instant noodles", x: 0.01, y: 0.21, size: 380_000 },
+  { name: "Dish soap", x: -0.1, y: -0.07, size: 260_000 },
+  { name: "Ghee 500 ml", x: 0.07, y: 0.02, size: 240_000 },
+  { name: "Coffee 200 g", x: -0.04, y: 0.15, size: 190_000 },
+];
+
+export default function ScatterChartQuadrantsExample() {
+  const [selected, setSelected] = useState<ScatterPoint | null>(null);
+  const { moneyCompact, pct } = useFormat();
+  const signed = (value: number) => `${value > 0 ? "+" : value < 0 ? "−" : ""}${pct(Math.abs(value))}`;
+  return (
+    <ScatterChartCard
+      title="Products by price and sales"
+      description="This quarter against last. Across is the change in shelf price, up the change in units sold; a dot's area is the quarter's revenue."
+      points={products}
+      height={380}
+      xLabel="Change in price"
+      yLabel="Change in units sold"
+      xFormatter={signed}
+      yFormatter={signed}
+      sizeLabel="Revenue"
+      sizeFormatter={(value) => moneyCompact(value)}
+      selected={selected}
+      onSelect={setSelected}
+      footer={
+        <p data-slot="scatter-selection" aria-live="polite" className="tabular-nums">
+          {selected ? (
+            <>
+              <span className="font-medium">{selected.name}</span> · price {signed(selected.x)} · units{" "}
+              {signed(selected.y ?? 0)} · {moneyCompact(selected.size ?? 0)} revenue
+            </>
+          ) : (
+            <span className="text-muted-foreground">Tap a dot, or Tab to the chart and use the arrow keys</span>
+          )}
+        </p>
+      }
+      quadrants={{
+        x: 0,
+        y: 0,
+        labels: {
+          topLeft: "Cheaper, sells more",
+          topRight: "Dearer, still sells more",
+          bottomLeft: "Cheaper, sells less",
+          bottomRight: "Dearer, sells less",
+        },
+      }}
+    />
+  );
+}

package/agents/examples/scatter-chart-scales.tsx

@@ -0,0 +1,46 @@
+import { ScatterChartCard, useFormat, type ScatterPoint } from "@siyahi/ui";
+
+// A shop's products this month: x is units sold, y the shelf price; made-up figures. Both run from a few to
+// thousands, so both axes open on log. Largest sellers first, so they take the labels.
+const products: ScatterPoint[] = [
+  { name: "Milk 500 ml", x: 38000, y: 32 },
+  { name: "Bread", x: 21000, y: 45 },
+  { name: "Eggs, 6", x: 14500, y: 60 },
+  { name: "Tea 250 g", x: 6200, y: 140 },
+  { name: "Atta 5 kg", x: 4800, y: 260 },
+  { name: "Rice 5 kg", x: 3900, y: 420 },
+  { name: "Oil 1 L", x: 3100, y: 180 },
+  { name: "Ghee 500 ml", x: 1400, y: 340 },
+  { name: "Coffee 200 g", x: 900, y: 480 },
+  { name: "Dry fruit box", x: 260, y: 1200 },
+  { name: "Saffron 1 g", x: 120, y: 350 },
+  { name: "Olive oil 1 L", x: 95, y: 980 },
+  { name: "Gift hamper", x: 40, y: 3500 },
+  { name: "Mixer grinder", x: 18, y: 4200 },
+  { name: "Pressure cooker", x: 25, y: 2100 },
+];
+
+export default function ScatterChartScalesExample() {
+  const { count, money } = useFormat();
+  return (
+    <ScatterChartCard
+      title="A few cheap products sell most of the units"
+      description="Units sold this month against shelf price. Both axes switch: each pair of buttons is named for its axis."
+      points={products}
+      height={360}
+      xLabel="Units sold"
+      yLabel="Price"
+      xScale="log"
+      xScaleToggle
+      yScale="log"
+      yScaleToggle
+      xFormatter={count}
+      yFormatter={(value) => money(value)}
+      quadrants={{
+        x: 1000,
+        y: 500,
+        labels: { topLeft: "Dear, few sold", bottomRight: "Cheap, many sold" },
+      }}
+    />
+  );
+}

package/agents/examples/scatter-chart.tsx

@@ -0,0 +1,78 @@
+import { Badge, ScatterChartCard, useFormat, type ScatterPoint } from "@siyahi/ui";
+import { useState } from "react";
+
+interface Store extends ScatterPoint {
+  region: string;
+  sales: number;
+}
+
+// x is the store's share of the month's sales and y its growth on the same month last year; the numbers are made up
+// for the catalogue. The Guwahati store opened this year, so it has no growth to plot. Largest first, so the biggest
+// stores take the labels.
+const stores: Store[] = [
+  { name: "Delhi Saket", region: "North", x: 0.112, y: 0.27, sales: 2760000 },
+  { name: "Bengaluru MG", region: "South", x: 0.106, y: -0.06, sales: 2625000 },
+  { name: "Chennai T Nagar", region: "South", x: 0.104, y: 0.44, sales: 2580000 },
+  { name: "Kolkata Park St", region: "East", x: 0.103, y: 0.16, sales: 2556000 },
+  { name: "Mumbai Online", key: "mumbai-online", region: "West", x: 0.091, y: 0.38, sales: 2244000 },
+  { name: "Pune Camp", region: "West", x: 0.067, y: 0.09, sales: 1660000 },
+  { name: "Mumbai Bandra", key: "mumbai-bandra", region: "West", x: 0.061, y: 0.12, sales: 1520000 },
+  { name: "Hyderabad", region: "South", x: 0.052, y: -0.14, sales: 1290000 },
+  { name: "Ahmedabad", region: "West", x: 0.044, y: 0.05, sales: 1090000 },
+  { name: "Surat", region: "West", x: 0.04, y: -0.21, sales: 980000 },
+  { name: "Kochi", region: "South", x: 0.035, y: 0.58, sales: 870000 },
+  { name: "Lucknow", region: "North", x: 0.031, y: -0.02, sales: 770000 },
+  { name: "Jaipur", region: "North", x: 0.026, y: -0.33, sales: 640000 },
+  { name: "Bhubaneswar", region: "East", x: 0.021, y: 0.22, sales: 520000 },
+  { name: "Indore", region: "Central", x: 0.018, y: 0.31, sales: 450000 },
+  { name: "Bhopal", region: "Central", x: 0.012, y: -0.09, sales: 300000 },
+  { name: "Patna", region: "East", x: 0.009, y: 0.47, sales: 220000 },
+  { name: "Nagpur", region: "Central", x: 0.007, y: 0.02, sales: 170000 },
+  { name: "Shillong", region: "Northeast", x: 0.004, y: -0.18, sales: 100000 },
+  { name: "Guwahati", region: "Northeast", x: 0.021, y: null, sales: 520000 },
+];
+
+export default function ScatterChartExample() {
+  const [selected, setSelected] = useState<Store | null>(null);
+  const { money, pct } = useFormat();
+  const growth = (y: number | null) => (y === null ? "new this year" : `${y < 0 ? "−" : "+"}${pct(Math.abs(y))}`);
+  const missing = stores.filter((s) => s.y === null).length;
+  return (
+    <ScatterChartCard
+      title="Stores by size and growth"
+      description="Across is the store's share of sales, up its growth on last year. Log spreads out the small stores; Linear shows how far ahead the largest are."
+      action={<Badge variant="outline">This month</Badge>}
+      points={stores}
+      height={360}
+      xLabel="Share of sales"
+      yLabel="Growth"
+      // Log is selected first; the buttons in the header let the reader switch.
+      xScale="log"
+      xScaleToggle
+      xFormatter={(x) => pct(x)}
+      yFormatter={(y) => growth(y)}
+      details={(s) => [
+        ["Region", s.region],
+        ["Sales", money(s.sales)],
+        ["Growth", growth(s.y)],
+      ]}
+      selected={selected}
+      onSelect={setSelected}
+      footer={
+        <>
+          <p data-slot="scatter-selection" aria-live="polite" className="tabular-nums">
+            {selected ? (
+              <>
+                <span className="font-medium">{selected.name}</span> · {selected.region} · {money(selected.sales)} ·{" "}
+                {growth(selected.y)}
+              </>
+            ) : (
+              <span className="text-muted-foreground">Tap a dot for its figures</span>
+            )}
+          </p>
+          <p className="text-muted-foreground">{missing} store opened this year and has no growth to plot.</p>
+        </>
+      }
+    />
+  );
+}

package/agents/examples/scroll-area.tsx

@@ -0,0 +1,22 @@
+import { ScrollArea, Separator } from "@siyahi/ui";
+
+const months = Array.from({ length: 24 }, (_, i) =>
+  new Date(2025, i, 1).toLocaleString("en-IN", { month: "long", year: "numeric" }),
+);
+
+export default function ScrollAreaExample() {
+  return (
+    <div className="h-48 w-56 overflow-hidden rounded-lg border">
+      <ScrollArea className="h-full">
+        <div className="p-4">
+          {months.map((month) => (
+            <div key={month}>
+              <div className="text-sm">{month}</div>
+              <Separator className="my-2" />
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}

package/agents/examples/section-cards-select.tsx

@@ -0,0 +1,28 @@
+import { Delta, SectionCards, useFormat, type SectionCard } from "@siyahi/ui";
+import { useState } from "react";
+
+// Each sales channel's profit this quarter and its orders; made-up figures.
+const channels = [
+  { label: "All", net: 110200, orders: 181 },
+  { label: "Online", net: 171400, orders: 164 },
+  { label: "Wholesale", net: 0, orders: 0 },
+  { label: "Marketplace", net: -61200, orders: 17 },
+];
+
+export default function SectionCardsSelectExample() {
+  const [scope, setScope] = useState("All");
+  const { count } = useFormat();
+  const items: SectionCard[] = channels.map((c) => ({
+    label: c.label,
+    value: <Delta value={c.net} format="money" />,
+    detail: `${count(c.orders)} orders`,
+    // Nothing to show for a channel with no orders, so it cannot be picked.
+    disabled: c.orders === 0,
+  }));
+  return (
+    <div className="flex flex-col gap-3">
+      <SectionCards items={items} selected={scope} onSelect={setScope} />
+      <p className="text-sm text-muted-foreground">Showing {scope}</p>
+    </div>
+  );
+}

package/agents/examples/section-cards-trend.tsx

@@ -0,0 +1,32 @@
+import { Delta, SectionCards, Sparkline, useFormat, type SectionCard } from "@siyahi/ui";
+
+export default function SectionCardsTrendExample() {
+  const { money, moneyCompact } = useFormat();
+  const items: SectionCard[] = [
+    {
+      label: "Revenue",
+      value: money(4512300),
+      badge: <Delta value={0.031} />,
+      trend: <Sparkline data={[3820000, 3950000, 4110000, 4020000, 4380000, 4512300]} />,
+      detail: "Month-end, last six months",
+    },
+    {
+      label: "Cash flow this year",
+      value: moneyCompact(-61200),
+      badge: <Delta value={-61200} format="money" />,
+      // A run of losses: the meaning colour, not a chart slot.
+      trend: <Sparkline data={[0, -8200, -14100, -30400, -52800, -61200]} color="var(--negative)" />,
+      detail: "Running total since April",
+      // The one figure on the page that needs a look, marked by the page: a falling cost would not be.
+      tone: "negative",
+    },
+    {
+      label: "Gift cards this year",
+      value: moneyCompact(38400),
+      badge: <Delta value={0.18} />,
+      trend: <Sparkline data={[4100, 0, 12800, 3300, 9900, 8300]} variant="line" curve="linear" />,
+      detail: "Sold each month",
+    },
+  ];
+  return <SectionCards items={items} />;
+}

package/agents/examples/section-cards.tsx

@@ -0,0 +1,48 @@
+import { Delta, SectionCards, type SectionCard, useFormat } from "@siyahi/ui";
+
+export default function SectionCardsExample() {
+  const { money, moneyCompact } = useFormat();
+  const items: SectionCard[] = [
+    {
+      label: "Revenue",
+      value: money(4512300),
+      badge: <Delta value={0.031} />,
+      headline: "Up for the third month",
+      detail: "Paid orders, less refunds",
+    },
+    {
+      label: "Target",
+      value: money(4025000),
+      headline: "Set at the start of the quarter",
+      detail: "Across 4 stores",
+    },
+    {
+      label: "Ahead of target",
+      value: moneyCompact(487300),
+      badge: <Delta value={0.121} />,
+      headline: "Gross margin 14.2%",
+      detail: "Since April",
+    },
+    {
+      label: "Cash flow this year",
+      value: moneyCompact(-61200),
+      badge: <Delta value={-61200} format="money" />,
+      headline: "Two large inventory buys",
+      detail: "Before tax",
+    },
+    {
+      label: "Gift cards this year",
+      value: moneyCompact(38400),
+      badge: <Delta value={0.18} />,
+      headline: "Sold in 11 stores",
+      detail: "Paid at purchase",
+    },
+  ];
+  return (
+    <div className="flex flex-col gap-6">
+      <SectionCards items={items.slice(0, 3)} />
+      <SectionCards items={items.slice(0, 4)} />
+      <SectionCards items={items} />
+    </div>
+  );
+}

package/agents/examples/select.tsx

@@ -0,0 +1,27 @@
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@siyahi/ui";
+
+const stores = [
+  { label: "All stores", value: "all" },
+  { label: "Online", value: "online" },
+  { label: "Retail", value: "retail" },
+  { label: "Wholesale", value: "wholesale" },
+];
+
+export default function SelectExample() {
+  return (
+    <Select items={stores} defaultValue="all">
+      <SelectTrigger className="w-48">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {stores.map((store) => (
+            <SelectItem key={store.value} value={store.value}>
+              {store.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}

package/agents/examples/separator.tsx

@@ -0,0 +1,13 @@
+import { Separator } from "@siyahi/ui";
+
+export default function SeparatorExample() {
+  return (
+    <div className="flex h-6 items-center gap-4 text-sm">
+      <span>Orders</span>
+      <Separator orientation="vertical" />
+      <span>Customers</span>
+      <Separator orientation="vertical" />
+      <span>Products</span>
+    </div>
+  );
+}

package/agents/examples/sheet.tsx

@@ -0,0 +1,15 @@
+import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@siyahi/ui";
+
+export default function SheetExample() {
+  return (
+    <Sheet>
+      <SheetTrigger render={<Button variant="outline" className="w-fit" />}>Filters</SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Filters</SheetTitle>
+          <SheetDescription>Narrow the orders by store, status or date.</SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/agents/examples/skeleton.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@siyahi/ui";
+
+export default function SkeletonExample() {
+  return (
+    <div className="flex max-w-sm flex-col gap-2">
+      <Skeleton className="h-4 w-32" />
+      <Skeleton className="h-8 w-48" />
+      <Skeleton className="h-4 w-full" />
+    </div>
+  );
+}

package/agents/examples/slider.tsx

@@ -0,0 +1,5 @@
+import { Slider } from "@siyahi/ui";
+
+export default function SliderExample() {
+  return <Slider defaultValue={[20, 80]} max={100} step={5} aria-label="Price range" className="max-w-sm" />;
+}

package/agents/examples/slope-chart-market.tsx

@@ -0,0 +1,33 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, SlopeChart, type SlopeItem } from "@siyahi/ui";
+
+// Each aisle's share of one grocery store's sales against its share across the region's stores; made-up figures.
+const items: SlopeItem[] = [
+  { name: "Fresh fruit and vegetables", from: 0.18, to: 0.24 },
+  { name: "Dairy and eggs", from: 0.14, to: 0.15 },
+  { name: "Bakery", from: 0.07, to: 0.11 },
+  { name: "Rice, flour and pulses", from: 0.16, to: 0.12 },
+  { name: "Snacks and drinks", from: 0.15, to: 0.13 },
+  { name: "Household and cleaning", from: 0.11, to: 0.08 },
+  { name: "Personal care", from: 0.09, to: 0.08 },
+  { name: "Frozen food", from: 0.06, to: 0.05 },
+  { name: "Baby care", from: 0.04, to: 0.04 },
+];
+
+// The aisles at least three points away from the region, either way.
+const apart = items.filter(({ from, to }) => Math.abs(to - from) >= 0.03).map(({ name }) => name);
+
+export default function SlopeChartMarketExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Our aisles against the region</CardTitle>
+        <CardDescription>
+          Share of sales by aisle. Aisles three points or more away from the region are drawn in colour.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <SlopeChart items={items} fromLabel="Region" toLabel="This store, this year" highlighted={apart} />
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/slope-chart.tsx

@@ -0,0 +1,26 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, SlopeChart, type SlopeItem } from "@siyahi/ui";
+
+// Each channel's share of a bookshop's sales, last year and this; made-up figures.
+const items: SlopeItem[] = [
+  { name: "In store", from: 0.46, to: 0.38 },
+  { name: "Own website", from: 0.18, to: 0.27 },
+  { name: "Marketplaces", from: 0.21, to: 0.2 },
+  { name: "Schools and libraries", from: 0.09, to: 0.1 },
+  { name: "Events and fairs", from: 0.06, to: 0.05 },
+];
+
+export default function SlopeChartExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Sales by channel</CardTitle>
+        <CardDescription>
+          Each channel's share of the year's sales. The website gained what the shop lost.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <SlopeChart items={items} fromLabel="2025" toLabel="2026" highlighted={["In store", "Own website"]} />
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/stale-blocks.tsx

@@ -0,0 +1,56 @@
+import { AreaChartCard, Delta, SectionCards, Sparkline, useFormat, type SectionCard } from "@siyahi/ui";
+
+const value = [
+  { month: "May", equity: 2150000, debt: 600000, gold: 320000, intl: 390000, cash: 150000 },
+  { month: "Jun", equity: 2230000, debt: 612000, gold: 334000, intl: 402000, cash: 160000 },
+  { month: "Jul", equity: 2390000, debt: 625000, gold: 352000, intl: 421000, cash: 172000 },
+  { month: "Aug", equity: 2310000, debt: 637000, gold: 371000, intl: 447000, cash: 185000 },
+  { month: "Sep", equity: 2620000, debt: 648000, gold: 390000, intl: 462000, cash: 198000 },
+  { month: "Oct", equity: 2800000, debt: 655000, gold: 410500, intl: 486300, cash: 212000 },
+];
+const kinds = [
+  { key: "equity", label: "Equity", color: "var(--chart-1)" },
+  { key: "debt", label: "Debt", color: "var(--chart-2)" },
+  { key: "gold", label: "Gold", color: "var(--chart-3)" },
+  { key: "intl", label: "International", color: "var(--chart-4)" },
+  { key: "cash", label: "Cash", color: "var(--chart-5)" },
+] as const;
+
+// The gift card sales and the holdings' values last came in on 3 November: the page marks both blocks stale, and each
+// loses its colour and says since when. The page decides; nothing is inferred from dates.
+export default function StaleBlocksExample() {
+  const { money, moneyCompact } = useFormat();
+  const tiles: SectionCard[] = [
+    {
+      label: "Revenue",
+      value: money(4512300),
+      badge: <Delta value={0.031} />,
+      trend: <Sparkline data={[3820000, 3950000, 4110000, 4020000, 4380000, 4512300]} />,
+      detail: "Month-end, last six months",
+    },
+    {
+      label: "Gift cards this year",
+      value: moneyCompact(38400),
+      badge: <Delta value={0.18} />,
+      trend: <Sparkline data={[4100, 0, 12800, 3300, 9900, 8300]} variant="line" curve="linear" />,
+      detail: "Sold each month",
+      stale: "3 Nov",
+    },
+  ];
+  return (
+    <div className="flex flex-col gap-6">
+      <SectionCards items={tiles} />
+      <AreaChartCard
+        title="Value by kind"
+        description="Month-end value of each kind of holding"
+        data={value}
+        xKey="month"
+        series={kinds}
+        valueFormatter={money}
+        yTickFormatter={moneyCompact}
+        height={256}
+        stale="3 Nov"
+      />
+    </div>
+  );
+}

package/agents/examples/surfaces.tsx

@@ -0,0 +1,116 @@
+import {
+  BarChartCard,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  MetricStrip,
+  PanelGrid,
+  SiyahiProvider,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  ToggleGroup,
+  ToggleGroupItem,
+  useFormat,
+  type MetricStripItem,
+  type Surface,
+} from "@siyahi/ui";
+import { useState } from "react";
+
+const orders = [
+  { hour: 9, orders: 42 },
+  { hour: 10, orders: 31 },
+  { hour: 11, orders: 18 },
+  { hour: 12, orders: 12 },
+  { hour: 13, orders: 15 },
+  { hour: 14, orders: 24 },
+  { hour: 15, orders: 38 },
+];
+
+const products = [
+  { product: "Dinner set", revenue: 276000 },
+  { product: "Standing desk", revenue: 224400 },
+  { product: "Bookshelf", revenue: 166000 },
+];
+
+function Dashboard() {
+  const { money, moneyCompact, pct } = useFormat();
+  const kpis: MetricStripItem[] = [
+    { label: "Revenue", value: money(4512300), change: 0.031 },
+    { label: "Target", value: moneyCompact(4025000), change: 85000, changeFormat: "money" },
+    { label: "Gross margin", value: pct(0.142), change: -0.004 },
+    { label: "Cash flow", value: moneyCompact(-61200), change: -61200, changeFormat: "money" },
+  ];
+  return (
+    <div className="flex flex-col gap-6">
+      <MetricStrip items={kpis} />
+      <PanelGrid>
+        <BarChartCard
+          title="Orders by hour"
+          description="Today, IST"
+          data={orders}
+          xKey="hour"
+          xFormatter={(hour) => `${String(hour).padStart(2, "0")}:00`}
+          series={[{ key: "orders", label: "Orders", color: "var(--chart-1)" }]}
+          height={200}
+        />
+        <Card>
+          <CardHeader>
+            <CardTitle>Top products</CardTitle>
+            <CardDescription>Largest three by revenue</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Product</TableHead>
+                  <TableHead>Revenue</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {products.map((row) => (
+                  <TableRow key={row.product}>
+                    <TableCell>{row.product}</TableCell>
+                    <TableCell>{money(row.revenue)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </PanelGrid>
+    </div>
+  );
+}
+
+export default function SurfacesExample() {
+  const [surface, setSurface] = useState<Surface>("ruled");
+  return (
+    <div className="flex flex-col gap-4">
+      <ToggleGroup
+        value={[surface]}
+        onValueChange={([next]) => {
+          // Pressing the selected surface again would leave none selected; keep it.
+          if (next) setSurface(next as Surface);
+        }}
+        variant="outline"
+        size="sm"
+        aria-label="Surface"
+      >
+        {/* The default first. */}
+        <ToggleGroupItem value="ruled">Ruled</ToggleGroupItem>
+        <ToggleGroupItem value="card">Card</ToggleGroupItem>
+        <ToggleGroupItem value="open">Open</ToggleGroupItem>
+      </ToggleGroup>
+      {/* A nested provider sets the surface for its part of the page. */}
+      <SiyahiProvider surface={surface}>
+        <Dashboard />
+      </SiyahiProvider>
+    </div>
+  );
+}