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

package/agents/examples/app-sidebar.tsx

@@ -0,0 +1,40 @@
+import { AppSidebar, SidebarProvider } from "@siyahi/ui";
+import {
+  BlocksIcon,
+  ChartAreaIcon,
+  CodeIcon,
+  FileTextIcon,
+  HouseIcon,
+  LayersIcon,
+  PaletteIcon,
+  SlidersHorizontalIcon,
+} from "lucide-react";
+
+// No `items` on a view, so each one is a plain link.
+const views = [
+  { title: "Overview", url: "#/overview", icon: <HouseIcon /> },
+  { title: "Foundations", url: "#/foundations", icon: <PaletteIcon /> },
+  { title: "Components", url: "#/components", icon: <LayersIcon /> },
+  { title: "Inputs and overlays", url: "#/inputs", icon: <SlidersHorizontalIcon /> },
+  { title: "Data", url: "#/data", icon: <ChartAreaIcon /> },
+  { title: "Blocks", url: "#/blocks", icon: <BlocksIcon />, isActive: true },
+  { title: "Reports", url: "#/reports", icon: <FileTextIcon /> },
+  // linkProps go onto the anchor: here a new tab, in an app often onMouseEnter to prefetch the view's data.
+  {
+    title: "Source",
+    url: "https://github.com/jatinbansal1998/siyahi",
+    icon: <CodeIcon />,
+    linkProps: { target: "_blank", rel: "noreferrer" },
+  },
+];
+
+export default function AppSidebarExample() {
+  return (
+    // In an app, AppSidebar sits fixed at the edge; collapsible="none" draws it in place here.
+    <SidebarProvider className="min-h-0">
+      <div className="flex overflow-hidden rounded-lg border">
+        <AppSidebar collapsible="none" navMain={views} navLabel="Views" />
+      </div>
+    </SidebarProvider>
+  );
+}

package/agents/examples/avatar.tsx

@@ -0,0 +1,24 @@
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup } from "@siyahi/ui";
+
+export default function AvatarExample() {
+  return (
+    <div className="flex items-center gap-6">
+      <Avatar>
+        <AvatarFallback>JB</AvatarFallback>
+      </Avatar>
+      {/* A group overlaps its avatars; the first one's badge stays over its neighbour. */}
+      <AvatarGroup>
+        <Avatar>
+          <AvatarFallback>JB</AvatarFallback>
+          <AvatarBadge aria-label="Online" />
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>HU</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>AK</AvatarFallback>
+        </Avatar>
+      </AvatarGroup>
+    </div>
+  );
+}

package/agents/examples/badge.tsx

@@ -0,0 +1,26 @@
+import { Badge, Delta, StatusBadge } from "@siyahi/ui";
+
+export default function BadgeExample() {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <StatusBadge tone="positive">Paid</StatusBadge>
+        <StatusBadge tone="warning">Pending</StatusBadge>
+        <StatusBadge tone="negative">Failed</StatusBadge>
+        <StatusBadge tone="accent">New</StatusBadge>
+        <StatusBadge>Draft</StatusBadge>
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Badge>Active</Badge>
+        <Badge variant="secondary">Archived</Badge>
+        <Badge variant="outline">Engineering</Badge>
+        <Badge variant="outline">
+          <Delta value={0.042} />
+        </Badge>
+        <Badge variant="outline">
+          <Delta value={-0.013} />
+        </Badge>
+      </div>
+    </div>
+  );
+}

package/agents/examples/bar-list-labels.tsx

@@ -0,0 +1,22 @@
+import { BarList, Card, CardContent, CardDescription, CardHeader, CardTitle, useFormat } from "@siyahi/ui";
+
+const categories = [
+  { name: "Home Appliances and Kitchen Equipment", value: 100 },
+  { name: "Health, Beauty and Personal Care", value: 70 },
+  { name: "Books, Stationery and Office Supplies", value: 50 },
+];
+
+export default function BarListLabelsExample() {
+  const { count } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Orders by category, ranked</CardTitle>
+        <CardDescription>Full labels and order counts stay readable in narrow panels</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <BarList data={categories} valueFormatter={count} />
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/bar-list-sides.tsx

@@ -0,0 +1,40 @@
+import { BarList, Card, CardContent, CardDescription, CardHeader, CardTitle, useFormat } from "@siyahi/ui";
+
+// This quarter's revenue against last quarter's, by city: the biggest rises and falls; made-up figures.
+const gains = [
+  { name: "Mumbai", value: 84000 },
+  { name: "Bengaluru", value: 52000 },
+  { name: "Pune", value: 31000 },
+];
+const losses = [
+  { name: "Kolkata", value: 18400 },
+  { name: "Jaipur", value: 7600 },
+];
+
+export default function BarListSidesExample() {
+  const { money } = useFormat();
+  // One scale for both lists, so a small loss draws a short bar beside a large gain.
+  const max = Math.max(...[...gains, ...losses].map((row) => row.value));
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>What moved revenue</CardTitle>
+        <CardDescription>The biggest ₹ rises and falls by city, on one scale</CardDescription>
+      </CardHeader>
+      {/* Each list is a column of its own, headed and ruled off, with its figures at its own right edge, so a
+          gain's figure never reads as the label of the loss beside it. */}
+      <CardContent>
+        <div className="grid gap-6 md:grid-cols-2 md:gap-0 md:divide-x">
+          <div className="md:pr-6">
+            <h3 className="text-muted-foreground mb-2 text-xs font-medium">Gains</h3>
+            <BarList data={gains} max={max} color="var(--positive)" valueFormatter={(v) => money(v)} />
+          </div>
+          <div className="md:pl-6">
+            <h3 className="text-muted-foreground mb-2 text-xs font-medium">Losses</h3>
+            <BarList data={losses} max={max} color="var(--negative)" valueFormatter={(v) => money(v)} />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/bar-list.tsx

@@ -0,0 +1,24 @@
+import { BarList, Card, CardContent, CardDescription, CardHeader, CardTitle, Delta, useFormat } from "@siyahi/ui";
+
+// value is the drop in a customer's monthly spend; detail is that drop as a share of last month's.
+const largestDrops = [
+  { name: "Sharma Textiles", value: 18400, detail: <Delta value={-0.062} /> },
+  { name: "Bluepine Logistics", value: 12900, detail: <Delta value={-0.047} /> },
+  { name: "Lakeview Clinics", value: 7600, detail: <Delta value={-0.072} /> },
+  { name: "Coastal Foods (India)", value: 4100, detail: <Delta value={-0.06} /> },
+];
+
+export default function BarListExample() {
+  const { money } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Needs attention</CardTitle>
+        <CardDescription>Customers whose spend fell most this month</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <BarList data={largestDrops} valueFormatter={(v) => money(v)} showPercentage />
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/breadcrumb.tsx

@@ -0,0 +1,28 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@siyahi/ui";
+
+export default function BreadcrumbExample() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#/components">Projects</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#/components">Website</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Checkout redesign</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

package/agents/examples/button-states.tsx

@@ -0,0 +1,23 @@
+import { Button, Toggle } from "@siyahi/ui";
+import { DownloadIcon, Loader2Icon, PinIcon } from "lucide-react";
+
+export default function ButtonStatesExample() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button disabled>Save</Button>
+      <Button variant="outline" disabled>
+        <DownloadIcon />
+        Export
+      </Button>
+      {/* Busy: the label stays and the icon spins, so the button keeps its width while the work runs. */}
+      <Button disabled aria-busy>
+        <Loader2Icon className="motion-safe:animate-spin" />
+        Saving
+      </Button>
+      <Toggle variant="outline" defaultPressed aria-label="Pin to top">
+        <PinIcon />
+        Pinned
+      </Toggle>
+    </div>
+  );
+}

package/agents/examples/button.tsx

@@ -0,0 +1,21 @@
+import { Button } from "@siyahi/ui";
+import { DownloadIcon, RefreshCwIcon } from "lucide-react";
+
+export default function ButtonExample() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button>Save</Button>
+      <Button variant="outline">
+        <DownloadIcon />
+        Export
+      </Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="destructive">Delete</Button>
+      <Button variant="link">Link</Button>
+      <Button variant="outline" size="icon" aria-label="Refresh">
+        <RefreshCwIcon />
+      </Button>
+    </div>
+  );
+}

package/agents/examples/calendar.tsx

@@ -0,0 +1,11 @@
+import { Calendar } from "@siyahi/ui";
+import { useState } from "react";
+
+export default function CalendarExample() {
+  const [date, setDate] = useState<Date | undefined>(new Date(2026, 9, 20));
+  return (
+    <div className="w-fit rounded-lg border">
+      <Calendar mode="single" selected={date} onSelect={setDate} defaultMonth={new Date(2026, 9, 1)} />
+    </div>
+  );
+}

package/agents/examples/callout.tsx

@@ -0,0 +1,33 @@
+import { AlertDescription, AlertTitle, Callout, Quote, StatusAlert } from "@siyahi/ui";
+import { LightbulbIcon, InfoIcon, TriangleAlertIcon, TrendingUpIcon, TrendingDownIcon } from "lucide-react";
+
+export default function CalloutExample() {
+  return (
+    <div className="grid max-w-2xl gap-3">
+      <Callout tone="accent" icon={<LightbulbIcon />} title="The takeaway">
+        Two of eleven pricing tests raised revenue; <strong>none</strong> held up in both regions.
+      </Callout>
+      <Callout icon={<InfoIcon />} title="How the tests were run">
+        Four weeks each on a random tenth of new visitors, with refunds and payment fees taken off.
+      </Callout>
+      <Callout tone="warning" icon={<TriangleAlertIcon />} title="Do not use the combined result">
+        It counted orders placed before the test began, so its revenue claims are withdrawn.
+      </Callout>
+      <div className="grid gap-3 sm:grid-cols-2">
+        <Callout tone="positive" icon={<TrendingUpIcon />} title="Best test">
+          Annual plan shown first: <strong className="whitespace-nowrap">+₹10,616</strong> a week.
+        </Callout>
+        <Callout tone="negative" icon={<TrendingDownIcon />} title="Worst test">
+          Free delivery only above ₹999: <strong className="whitespace-nowrap">−₹70,679</strong> a week.
+        </Callout>
+      </div>
+      <Quote source="The hosting provider's incident report, 21 Oct 2026">
+        Requests to the Mumbai region failed for 42 minutes after a configuration change, which has been rolled back.
+      </Quote>
+      <StatusAlert tone="warning">
+        <AlertTitle>Order history is incomplete</AlertTitle>
+        <AlertDescription>The old shop's export starts in April 2024; earlier orders are missing.</AlertDescription>
+      </StatusAlert>
+    </div>
+  );
+}

package/agents/examples/card.tsx

@@ -0,0 +1,36 @@
+import {
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  useFormat,
+} from "@siyahi/ui";
+import { DownloadIcon } from "lucide-react";
+
+export default function CardExample() {
+  const { money } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Revenue this quarter</CardTitle>
+        <CardDescription>Across all stores</CardDescription>
+        <CardAction>
+          <Button variant="outline" size="sm">
+            <DownloadIcon />
+            CSV
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <p className="text-3xl font-semibold">{money(4512300)}</p>
+      </CardContent>
+      <CardFooter>
+        <p className="text-muted-foreground">Updated every night at midnight</p>
+      </CardFooter>
+    </Card>
+  );
+}

package/agents/examples/change-bar.tsx

@@ -0,0 +1,104 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ChangeBar,
+  DataTable,
+  DataTableBody,
+  DataTableCompactColumnsToggle,
+  DataTableFootnote,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableSortHeader,
+  DataTableToolbarSection,
+  useFormat,
+  type DataTableColumnDef,
+} from "@siyahi/ui";
+
+interface Region {
+  region: string;
+  /** Revenue in January and in February, in rupees; made-up figures. */
+  january: number;
+  february: number;
+  change: number;
+}
+
+const region = (name: string, january: number, february: number): Region => ({
+  region: name,
+  january,
+  february,
+  change: february / january - 1,
+});
+
+const regions: Region[] = [
+  region("West", 231900, 258000),
+  region("South", 248300, 262500),
+  region("Central", 161300, 166000),
+  region("East", 250400, 255600),
+  region("Northeast", 283100, 276000),
+  region("North", 241800, 224400),
+];
+
+// Every bar is a share of the column's largest move, and the column holds gains and losses, so the bars diverge.
+const largestChange = Math.max(...regions.map((r) => Math.abs(r.change)));
+const diverging = regions.some((r) => r.change < 0) && regions.some((r) => r.change > 0);
+
+function Money({ amount, muted = false }: { amount: number; muted?: boolean }) {
+  const text = useFormat().money(amount);
+  return muted ? <span className="text-muted-foreground">{text}</span> : text;
+}
+
+const header = () => <DataTableSortHeader />;
+
+const columns: DataTableColumnDef<Region>[] = [
+  { accessorKey: "region", header, size: 130, meta: { label: "Region", compact: true } },
+  {
+    accessorKey: "january",
+    header,
+    size: 130,
+    meta: { label: "January", variant: "number" },
+    cell: ({ row }) => <Money amount={row.original.january} muted />,
+  },
+  {
+    accessorKey: "february",
+    header,
+    size: 130,
+    meta: { label: "February", variant: "number", compact: true },
+    cell: ({ row }) => <Money amount={row.original.february} />,
+  },
+  {
+    accessorKey: "change",
+    header,
+    size: 150,
+    meta: { label: "Change", variant: "number", compact: true },
+    cell: ({ row }) => <ChangeBar value={row.original.change} max={largestChange} diverging={diverging} />,
+  },
+];
+
+export default function ChangeBarExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>The West grew 11.3% in February, the North fell 7.2%</CardTitle>
+        <CardDescription>Each region's revenue in February against January</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DataTableRoot data={regions} columns={columns}>
+          <DataTableToolbarSection>
+            <DataTableCompactColumnsToggle />
+          </DataTableToolbarSection>
+          <DataTable aria-label="February against January">
+            <DataTableHeader />
+            <DataTableBody />
+            <DataTableFootnote>
+              Each percent is the change on January's value, and the bar is its size against the largest move. Gains run
+              right of the centre line, losses left.
+            </DataTableFootnote>
+          </DataTable>
+        </DataTableRoot>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/change-grid-money.tsx

@@ -0,0 +1,36 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, ChangeGrid, type ChangeGridRow } from "@siyahi/ui";
+
+// Profit or loss per store per quarter; made-up figures.
+const quarters = ["Q1", "Q2", "Q3", "Q4"];
+const stores: [string, number[]][] = [
+  ["Koramangala", [412_000, 386_000, 455_000, 520_000]],
+  ["Indiranagar", [218_000, -42_000, 131_000, 264_000]],
+  ["Whitefield", [-86_000, -124_000, 38_000, 61_000]],
+  ["Online", [305_000, 344_000, 398_000, 471_000]],
+  ["Jayanagar", [96_000, -158_000, -212_000, -64_000]],
+];
+const rows: ChangeGridRow[] = stores.map(([label, values]) => ({
+  label,
+  values,
+  total: values.reduce((sum, value) => sum + value, 0),
+}));
+
+export default function ChangeGridMoneyExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Profit by store and quarter</CardTitle>
+        <CardDescription>After rent and wages. The year adds its quarters.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChangeGrid
+          label="Profit by store and quarter"
+          columns={quarters}
+          rows={rows}
+          format="money"
+          totalLabel="Year"
+        />
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/change-grid.tsx

@@ -0,0 +1,42 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, ChangeGrid, type ChangeGridRow } from "@siyahi/ui";
+
+// A café chain's sales growth on the month before, per financial year (April to March); made-up figures.
+const months = ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar"];
+const growth: Omit<ChangeGridRow, "total">[] = [
+  {
+    label: "FY24",
+    values: [0.031, 0.012, -0.024, 0.008, 0.017, -0.006, 0.041, 0.052, 0.063, -0.038, 0.004, 0.022],
+  },
+  {
+    label: "FY25",
+    values: [0.018, -0.011, -0.032, 0.014, 0.009, 0, 0.036, 0.047, 0.071, -0.044, -0.008, 0.019],
+  },
+  // The year is under way: months still to come have no figure.
+  {
+    label: "FY26",
+    values: [0.026, 0.015, -0.018, 0.021, 0.012, 0.007, 0.044, null, null, null, null, null],
+  },
+];
+
+// Months compound: a year's growth is the product of (1 + each month), less one.
+const rows: ChangeGridRow[] = growth.map(({ label, values }) => ({
+  label,
+  values,
+  total: values.reduce<number>((year, month) => year * (1 + (month ?? 0)), 1) - 1,
+}));
+
+export default function ChangeGridExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Sales growth by month</CardTitle>
+        <CardDescription>
+          Each month against the one before. Deeper tints are larger changes; the year compounds its months.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChangeGrid label="Sales growth by month and financial year" columns={months} rows={rows} totalLabel="Year" />
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/chart-area-log.tsx

@@ -0,0 +1,45 @@
+import { AreaChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Money a new fund manages, month by month from launch, made up for the catalogue: ₹2L to ₹3.1Cr.
+const data = [
+  { month: "Nov", managed: 200000 },
+  { month: "Dec", managed: 450000 },
+  { month: "Jan", managed: 900000 },
+  { month: "Feb", managed: 1600000 },
+  { month: "Mar", managed: 2400000 },
+  { month: "Apr", managed: 3900000 },
+  { month: "May", managed: 5800000 },
+  { month: "Jun", managed: 8200000 },
+  { month: "Jul", managed: 12500000 },
+  { month: "Aug", managed: 17000000 },
+  { month: "Sep", managed: 23500000 },
+  { month: "Oct", managed: 31000000 },
+];
+
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "managed", label: "Money managed", color: "var(--chart-1)" },
+];
+
+export default function ChartAreaLogExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <AreaChartCard
+      title="₹3.1Cr managed a year after launch"
+      description="Linear shows the size today; Log shows the early months, when it grew fastest."
+      action={
+        <ToggleGroup defaultValue={["1Y"]} variant="outline" size="sm" aria-label="Range">
+          <ToggleGroupItem value="6M">6M</ToggleGroupItem>
+          <ToggleGroupItem value="1Y">1Y</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      data={data}
+      xKey="month"
+      series={series}
+      // Linear is selected first; the buttons after the range toggle let the reader switch to log.
+      yScaleToggle
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={256}
+    />
+  );
+}

package/agents/examples/chart-area.tsx

@@ -0,0 +1,39 @@
+import { AreaChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+const data = [
+  { month: "May", revenue: 3820000, target: 3600000 },
+  { month: "Jun", revenue: 3950000, target: 3685000 },
+  { month: "Jul", revenue: 4110000, target: 3770000 },
+  { month: "Aug", revenue: 4020000, target: 3855000 },
+  { month: "Sep", revenue: 4380000, target: 3940000 },
+  { month: "Oct", revenue: 4512300, target: 4025000 },
+];
+
+// The title states the finding, not the measure: what the reader would say after looking.
+// The first series fills; the target draws as a line over it.
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "revenue", label: "Revenue", color: "var(--chart-1)" },
+  { key: "target", label: "Target", color: "var(--chart-2)" },
+];
+
+export default function ChartAreaExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <AreaChartCard
+      title="October revenue ₹4.9L ahead of target"
+      description="Each month's revenue against its target"
+      action={
+        <ToggleGroup defaultValue={["6M"]} variant="outline" size="sm" aria-label="Range">
+          <ToggleGroupItem value="6M">6M</ToggleGroupItem>
+          <ToggleGroupItem value="1Y">1Y</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      data={data}
+      xKey="month"
+      series={series}
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={256}
+    />
+  );
+}

package/agents/examples/chart-bar-flows.tsx

@@ -0,0 +1,32 @@
+import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Money into and out of a shop's bank account each month; out is negative. Made-up figures.
+const data = [
+  { month: "Jul", in: 84000, out: -52000 },
+  { month: "Aug", in: 61000, out: -73000 },
+  { month: "Sep", in: 92000, out: -48000 },
+  { month: "Oct", in: 70000, out: -66000 },
+];
+
+// Money moving is not a gain or a loss, so in and out take chart colours, not green and red.
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "in", label: "In", color: "var(--chart-1)" },
+  { key: "out", label: "Out", color: "var(--chart-2)" },
+];
+
+export default function ChartBarFlowsExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <BarChartCard
+      title="Cash in and out by month"
+      description="Money in above the line, money out below it"
+      data={data}
+      xKey="month"
+      series={series}
+      stacked
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={256}
+    />
+  );
+}