@siyahi/ui 0.1.9-next.22 → 0.1.9-next.24

package/DESIGN.md

@@ -17,7 +17,8 @@ a meaning:
   `+` or `−`, and only a small trend icon in green or red. In plain text (labels, tooltips) write the sign; never
   colour a run of figures green and red.
   **Amber** means caution. None of them decorates.
-- **Emphasis tints the whole surface.** A caution is `WarningAlert`; a point set
+- **Emphasis tints the whole surface.** A notice is `StatusAlert` in its tone (an
+  error reads like a warning, only red); a state is `StatusBadge`; a point set
   apart is `Callout` (`neutral`, `accent`, `warning`, `positive`,
   `negative`); a quotation is `Quote`. Each takes a faint wash of its colour
   inside a 1px border of the same colour all round. Large marks follow the same
@@ -37,6 +38,6 @@ a meaning:
 - **Destructive is not loss.** `--destructive` (delete, an invalid field) is a
   deeper red than `--negative` (a loss figure), so its label reads on its own
   tint; never use one for the other.
-- Categories (a broker, a sector, an asset class) stay neutral: outline badges,
+- Categories (a team, a region, a product line) stay neutral: outline badges,
   never a hue each. Ordered buckets (largest 5, next 5, rest) use steps of one
   colour, not separate hues.

package/agents/examples/accordion.tsx

@@ -1,13 +1,13 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@siyahi/ui";
 
 const questions = [
+  ["refresh", "When are the figures refreshed?", "Every night at midnight IST, and every minute for today's orders."],
   [
-    "prices",
-    "When are prices updated?",
-    "At the exchange close each trading day, and every minute while markets are open.",
+    "refunds",
+    "How are refunds counted?",
+    "A refund comes off the month the order was placed in, not the month it was paid.",
   ],
-  ["lots", "How are lots matched?", "Sells are matched to the oldest buy first, as the tax rules require."],
-  ["brokers", "Can I add a second broker?", "Yes. Each broker is its own account, and the totals add them up."],
+  ["stores", "Can I add a second store?", "Yes. Each store is its own workspace, and the totals add them up."],
 ] as const;
 
 function Questions() {
@@ -24,13 +24,13 @@ export default function AccordionExample() {
     <div className="grid gap-6 md:grid-cols-2">
       <div className="flex flex-col gap-2">
         <p className="text-sm text-muted-foreground">One open at a time</p>
-        <Accordion aria-label="One open at a time" defaultValue={["prices"]}>
+        <Accordion aria-label="One open at a time" defaultValue={["refresh"]}>
           <Questions />
         </Accordion>
       </div>
       <div className="flex flex-col gap-2">
         <p className="text-sm text-muted-foreground">Several open</p>
-        <Accordion aria-label="Several open" multiple defaultValue={["prices", "lots"]}>
+        <Accordion aria-label="Several open" multiple defaultValue={["refresh", "refunds"]}>
           <Questions />
         </Accordion>
       </div>

package/agents/examples/alert.tsx

@@ -1,23 +1,24 @@
-import { Alert, AlertDescription, AlertTitle, WarningAlert } from "@siyahi/ui";
-import { CircleAlertIcon, InfoIcon } from "lucide-react";
+import { AlertDescription, AlertTitle, StatusAlert } from "@siyahi/ui";
 
 export default function AlertExample() {
   return (
     <div className="flex flex-col gap-3">
-      <Alert>
-        <InfoIcon />
-        <AlertTitle>Prices are delayed</AlertTitle>
-        <AlertDescription>Quotes refresh every fifteen minutes during market hours.</AlertDescription>
-      </Alert>
-      <WarningAlert>
-        <AlertTitle>Two trades are unmatched</AlertTitle>
-        <AlertDescription>The contract notes list trades the ledger does not have yet.</AlertDescription>
-      </WarningAlert>
-      <Alert variant="destructive">
-        <CircleAlertIcon />
+      <StatusAlert>
+        <AlertTitle>Figures are delayed</AlertTitle>
+        <AlertDescription>Sales figures refresh every fifteen minutes during opening hours.</AlertDescription>
+      </StatusAlert>
+      <StatusAlert tone="warning">
+        <AlertTitle>Two payments are unmatched</AlertTitle>
+        <AlertDescription>The bank statement lists payments no order accounts for yet.</AlertDescription>
+      </StatusAlert>
+      <StatusAlert tone="negative">
         <AlertTitle>Import failed</AlertTitle>
-        <AlertDescription>The statement could not be read. Download it again and retry.</AlertDescription>
-      </Alert>
+        <AlertDescription>The CSV could not be read. Export it again and retry.</AlertDescription>
+      </StatusAlert>
+      <StatusAlert tone="positive">
+        <AlertTitle>Refunds are settled</AlertTitle>
+        <AlertDescription>All 14 refunds from last week have reached the customers' accounts.</AlertDescription>
+      </StatusAlert>
     </div>
   );
 }

package/agents/examples/badge.tsx

@@ -1,18 +1,26 @@
-import { Badge, Delta } from "@siyahi/ui";
+import { Badge, Delta, StatusBadge } from "@siyahi/ui";
 
 export default function BadgeExample() {
   return (
-    <div className="flex flex-wrap items-center gap-2">
-      <Badge>Equity</Badge>
-      <Badge variant="secondary">Mutual fund</Badge>
-      <Badge variant="outline">Zerodha</Badge>
-      <Badge variant="destructive">Failed</Badge>
-      <Badge variant="outline">
-        <Delta value={0.042} />
-      </Badge>
-      <Badge variant="outline">
-        <Delta value={-0.013} />
-      </Badge>
+    <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

@@ -1,9 +1,9 @@
 import { BarList, Card, CardContent, CardDescription, CardHeader, CardTitle, useFormat } from "@siyahi/ui";
 
-const sectors = [
-  { name: "Information Technology and Services", value: 100 },
-  { name: "Fast Moving Consumer Goods", value: 70 },
-  { name: "Automobile and Auto Components", value: 50 },
+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() {
@@ -11,11 +11,11 @@ export default function BarListLabelsExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Orders by sector, ranked</CardTitle>
+        <CardTitle>Orders by category, ranked</CardTitle>
         <CardDescription>Full labels and order counts stay readable in narrow panels</CardDescription>
       </CardHeader>
       <CardContent>
-        <BarList data={sectors} valueFormatter={count} />
+        <BarList data={categories} valueFormatter={count} />
       </CardContent>
     </Card>
   );

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

@@ -1,14 +1,14 @@
 import { BarList, Card, CardContent, CardDescription, CardHeader, CardTitle, useFormat } from "@siyahi/ui";
 
-// The biggest unrealised gains and losses; made-up figures.
+// This quarter's revenue against last quarter's, by city: the biggest rises and falls; made-up figures.
 const gains = [
-  { name: "INFY", value: 84000 },
-  { name: "TCS", value: 52000 },
-  { name: "HDFCBANK", value: 31000 },
+  { name: "Mumbai", value: 84000 },
+  { name: "Bengaluru", value: 52000 },
+  { name: "Pune", value: 31000 },
 ];
 const losses = [
-  { name: "ITC", value: 18400 },
-  { name: "WIPRO", value: 7600 },
+  { name: "Kolkata", value: 18400 },
+  { name: "Jaipur", value: 7600 },
 ];
 
 export default function BarListSidesExample() {
@@ -18,8 +18,8 @@ export default function BarListSidesExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>What drives the P&L</CardTitle>
-        <CardDescription>The biggest ₹ gains and losses, on one scale</CardDescription>
+        <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. */}

package/agents/examples/bar-list.tsx

@@ -1,11 +1,11 @@
 import { BarList, Card, CardContent, CardDescription, CardHeader, CardTitle, Delta, useFormat } from "@siyahi/ui";
 
-// detail is the loss as a share of what the holding cost.
-const largestLosses = [
-  { name: "ITC", value: 18400, detail: <Delta value={-0.062} /> },
-  { name: "HDFCBANK", value: 12900, detail: <Delta value={-0.047} /> },
-  { name: "WIPRO", value: 7600, detail: <Delta value={-0.072} /> },
-  { name: "Asian Paints (India)", value: 4100, detail: <Delta value={-0.06} /> },
+// 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() {
@@ -14,10 +14,10 @@ export default function BarListExample() {
     <Card>
       <CardHeader>
         <CardTitle>Needs attention</CardTitle>
-        <CardDescription>Largest unrealised losses</CardDescription>
+        <CardDescription>Customers whose spend fell most this month</CardDescription>
       </CardHeader>
       <CardContent>
-        <BarList data={largestLosses} valueFormatter={(v) => money(v)} showPercentage />
+        <BarList data={largestDrops} valueFormatter={(v) => money(v)} showPercentage />
       </CardContent>
     </Card>
   );

package/agents/examples/breadcrumb.tsx

@@ -12,15 +12,15 @@ export default function BreadcrumbExample() {
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink href="#/components">Portfolio</BreadcrumbLink>
+          <BreadcrumbLink href="#/components">Projects</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbLink href="#/components">Equity</BreadcrumbLink>
+          <BreadcrumbLink href="#/components">Website</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbPage>INFY</BreadcrumbPage>
+          <BreadcrumbPage>Checkout redesign</BreadcrumbPage>
         </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>

package/agents/examples/callout.tsx

@@ -1,33 +1,33 @@
-import { Callout, Quote, WarningAlert, AlertDescription, AlertTitle } from "@siyahi/ui";
+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 gold rules made a profit in the final test; <strong>none</strong> held up in both metals.
+        Two of eleven pricing tests raised revenue; <strong>none</strong> held up in both regions.
       </Callout>
-      <Callout icon={<InfoIcon />} title="How the test was run">
-        One mini lot per trade, after charges and a harsher assumed execution cost.
+      <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">
-        Its test used later information, so its profit claims are withdrawn.
+        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 rule">
-          A failed range break reverses: <strong>▲₹10,616</strong>.
+        <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 rule">
-          Break the first-hour range: <strong>▼₹70,679</strong>.
+        <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="eMudhra's incident notice, 21 Oct 2026">
-        The affected intermediate keys were generated with insufficient entropy and have been revoked.
+      <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>
-      <WarningAlert>
-        <AlertTitle>Ledger history is incomplete</AlertTitle>
-        <AlertDescription>Dhan's cash ledger starts in April 2024; earlier flows are missing.</AlertDescription>
-      </WarningAlert>
+      <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

@@ -16,8 +16,8 @@ export default function CardExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Portfolio value</CardTitle>
-        <CardDescription>Across all accounts</CardDescription>
+        <CardTitle>Revenue this quarter</CardTitle>
+        <CardDescription>Across all stores</CardDescription>
         <CardAction>
           <Button variant="outline" size="sm">
             <DownloadIcon />
@@ -29,7 +29,7 @@ export default function CardExample() {
         <p className="text-3xl font-semibold">{money(4512300)}</p>
       </CardContent>
       <CardFooter>
-        <p className="text-muted-foreground">Updated after the market close</p>
+        <p className="text-muted-foreground">Updated every night at midnight</p>
       </CardFooter>
     </Card>
   );

package/agents/examples/change-bar.tsx

@@ -17,33 +17,33 @@ import {
   type DataTableColumnDef,
 } from "@siyahi/ui";
 
-interface Holding {
-  symbol: string;
-  /** Value at the close of 31 January and of 28 February, in rupees; made-up figures. */
+interface Region {
+  region: string;
+  /** Revenue in January and in February, in rupees; made-up figures. */
   january: number;
   february: number;
   change: number;
 }
 
-const holding = (symbol: string, january: number, february: number): Holding => ({
-  symbol,
+const region = (name: string, january: number, february: number): Region => ({
+  region: name,
   january,
   february,
   change: february / january - 1,
 });
 
-const holdings: Holding[] = [
-  holding("ICICIBANK", 231900, 258000),
-  holding("HDFCBANK", 248300, 262500),
-  holding("TCS", 161300, 166000),
-  holding("NIFTYBEES", 250400, 255600),
-  holding("ITC", 283100, 276000),
-  holding("INFY", 241800, 224400),
+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(...holdings.map((h) => Math.abs(h.change)));
-const diverging = holdings.some((h) => h.change < 0) && holdings.some((h) => h.change > 0);
+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);
@@ -52,20 +52,20 @@ function Money({ amount, muted = false }: { amount: number; muted?: boolean }) {
 
 const header = () => <DataTableSortHeader />;
 
-const columns: DataTableColumnDef<Holding>[] = [
-  { accessorKey: "symbol", header, size: 130, meta: { label: "Holding", compact: true } },
+const columns: DataTableColumnDef<Region>[] = [
+  { accessorKey: "region", header, size: 130, meta: { label: "Region", compact: true } },
   {
     accessorKey: "january",
     header,
     size: 130,
-    meta: { label: "31 Jan", variant: "number" },
+    meta: { label: "January", variant: "number" },
     cell: ({ row }) => <Money amount={row.original.january} muted />,
   },
   {
     accessorKey: "february",
     header,
     size: 130,
-    meta: { label: "28 Feb", variant: "number", compact: true },
+    meta: { label: "February", variant: "number", compact: true },
     cell: ({ row }) => <Money amount={row.original.february} />,
   },
   {
@@ -81,11 +81,11 @@ export default function ChangeBarExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>ICICIBANK rose 11.3% in February, INFY fell 7.2%</CardTitle>
-        <CardDescription>Each holding's value at the end of February against the end of January</CardDescription>
+        <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={holdings} columns={columns}>
+        <DataTableRoot data={regions} columns={columns}>
           <DataTableToolbarSection>
             <DataTableCompactColumnsToggle />
           </DataTableToolbarSection>

package/agents/examples/chart-area.tsx

@@ -1,27 +1,27 @@
 import { AreaChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
 
 const data = [
-  { month: "May", value: 3820000, invested: 3600000 },
-  { month: "Jun", value: 3950000, invested: 3685000 },
-  { month: "Jul", value: 4110000, invested: 3770000 },
-  { month: "Aug", value: 4020000, invested: 3855000 },
-  { month: "Sep", value: 4380000, invested: 3940000 },
-  { month: "Oct", value: 4512300, invested: 4025000 },
+  { 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 money put in draws as a line over it.
+// The first series fills; the target draws as a line over it.
 const series: ChartSeries<(typeof data)[number]> = [
-  { key: "value", label: "Value", color: "var(--chart-1)" },
-  { key: "invested", label: "Invested", color: "var(--chart-2)" },
+  { 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="₹4.9L ahead of the money put in"
-      description="Portfolio value against money invested, at each month end"
+      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>

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

@@ -1,6 +1,6 @@
 import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
 
-// Money into and out of the account each month; out is negative. Made-up figures.
+// 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 },

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

@@ -1,6 +1,6 @@
 import { BarChartCard } from "@siyahi/ui";
 
-// Market hours in IST; each row is the hour an order was placed in.
+// Opening hours in IST; each row is the hour an order was placed in.
 const data = [
   { hour: 9, orders: 42 },
   { hour: 10, orders: 31 },

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

@@ -1,6 +1,6 @@
 import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
 
-// F&O net realized per financial year, a loss every year; made-up figures.
+// A new product line's operating result per financial year, a loss every year; made-up figures.
 const data = [
   { fy: "FY23", net: -48000 },
   { fy: "FY24", net: -91000 },
@@ -9,14 +9,14 @@ const data = [
 ];
 
 const series: ChartSeries<(typeof data)[number]> = [
-  { key: "net", label: "F&O net realized", color: "var(--positive)", negativeColor: "var(--negative)" },
+  { key: "net", label: "Operating result", color: "var(--positive)", negativeColor: "var(--negative)" },
 ];
 
 export default function ChartBarLossesExample() {
   const { money, moneyCompact } = useFormat();
   return (
     <BarChartCard
-      title="F&O realized by financial year"
+      title="Operating loss by financial year"
       description="A loss every year, so every bar runs down from zero"
       data={data}
       xKey="fy"

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

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { BarChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Each team's share of this year's spend against a comparison; made-up figures.
+const SHARES = {
+  Plan: [
+    { team: "Engineering and Infrastructure", actual: 0.34, comparison: 0.37 },
+    { team: "Sales and Business Development", actual: 0.21, comparison: 0.13 },
+    { team: "Finance, Legal & Compliance", actual: 0.06, comparison: 0.1 },
+    { team: "Marketing and Communications", actual: 0.12, comparison: 0.08 },
+    { team: "Customer Support and Success", actual: 0.09, comparison: 0.07 },
+    { team: "Operations", actual: 0.08, comparison: 0.04 },
+  ],
+  "Last year": [
+    { team: "Engineering and Infrastructure", actual: 0.34, comparison: 0.31 },
+    { team: "Sales and Business Development", actual: 0.21, comparison: 0.1 },
+    { team: "Finance, Legal & Compliance", actual: 0.06, comparison: 0.08 },
+    { team: "Marketing and Communications", actual: 0.12, comparison: 0.07 },
+    { team: "Customer Support and Success", actual: 0.09, comparison: 0.07 },
+    { team: "Operations", actual: 0.08, comparison: 0.06 },
+  ],
+};
+type Comparison = keyof typeof SHARES;
+type Row = (typeof SHARES)[Comparison][number];
+
+export default function ChartBarTeamsExample() {
+  const { pct } = useFormat();
+  const [comparison, setComparison] = useState<Comparison>("Plan");
+  const rows = SHARES[comparison];
+  const series: ChartSeries<Row> = [
+    { key: "actual", label: "This year", color: "var(--chart-1)" },
+    { key: "comparison", label: comparison, color: "var(--chart-2)" },
+  ];
+  const gap = (row: Row) => {
+    const points = Math.abs(row.actual - row.comparison) * 100;
+    return row.actual >= row.comparison ? `+${points.toFixed(1)} pts over` : `\u2212${points.toFixed(1)} pts under`;
+  };
+  return (
+    <BarChartCard
+      title="Spend by team against plan or last year"
+      description="Each team's share of this year's spend and of the comparison"
+      action={
+        <ToggleGroup
+          value={[comparison]}
+          onValueChange={([next]) => {
+            // Pressing the selected comparison again would leave none selected; keep it.
+            if (next) setComparison(next as Comparison);
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Compare with"
+        >
+          <ToggleGroupItem value="Plan">Plan</ToggleGroupItem>
+          <ToggleGroupItem value="Last year">Last year</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      horizontal
+      data={rows}
+      xKey="team"
+      xTickDetail={(row) => `${pct(row.actual)} vs ${pct(row.comparison)} · ${gap(row)}`}
+      series={series}
+      valueFormatter={(v) => pct(v)}
+      // A tick format puts the value axis along the bottom of the sideways bars.
+      yTickFormatter={(v) => pct(v, 0)}
+      // Sideways, y is still the value: the axis runs 0 to 40% and the cap is a value level.
+      yDomain={[0, 0.4]}
+      referenceLines={[{ y: 0.3, label: "cap 30%", labelPosition: "insideBottomRight" }]}
+      height={rows.length * 56 + 48}
+      footer={<p className="text-muted-foreground">Salaries are left out; they are budgeted separately.</p>}
+    />
+  );
+}

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

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
 
-// Net realized gain per financial year (April to March); made-up figures.
+// Net profit per financial year (April to March); made-up figures.
 const data = [
   { fy: "FY22", net: 142000 },
   { fy: "FY23", net: 186000 },
@@ -12,19 +12,19 @@ const data = [
 
 // A gain and a loss take the meaning colours; the arrow in each tick says the same without colour.
 const series: ChartSeries<(typeof data)[number]> = [
-  { key: "net", label: "Net realized", color: "var(--positive)", negativeColor: "var(--negative)" },
+  { key: "net", label: "Net profit", color: "var(--positive)", negativeColor: "var(--negative)" },
 ];
 
 export default function ChartBarYearsExample() {
   const { money, moneyCompact } = useFormat();
   // The page owns the pick, so it can narrow the rest of the page to that year.
   const [year, setYear] = useState<string | null>(null);
-  const signed = (v: number) => `${v < 0 ? "▼" : "▲"}${moneyCompact(Math.abs(v))}`;
+  const signed = (v: number) => `${v < 0 ? "\u2212" : "+"}${moneyCompact(Math.abs(v))}`;
   return (
     <BarChartCard
-      title="Realized by financial year"
+      title="Profit by financial year"
       description={
-        year ? `${year} picked; click it again for every year` : "April to March, gross. Click a year to pick it."
+        year ? `${year} picked; click it again for every year` : "April to March, before tax. Click a year to pick it."
       }
       data={data}
       xKey="fy"