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

package/agents/examples/table.tsx

@@ -0,0 +1,60 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  useFormat,
+} from "@siyahi/ui";
+
+const rows = [
+  { month: "July", in: 85000, out: 12000 },
+  { month: "August", in: 85000, out: 64000 },
+  { month: "September", in: 92000, out: 8000 },
+];
+
+export default function TableExample() {
+  const { money } = useFormat();
+  const total = (key: "in" | "out") => rows.reduce((sum, row) => sum + row[key], 0);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Cash flow</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Month</TableHead>
+              <TableHead data-numeric>In</TableHead>
+              <TableHead data-numeric>Out</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((row) => (
+              // August's spending needs a look: the page marks the row, and the theme washes it amber.
+              <TableRow key={row.month} data-tone={row.out > 50000 ? "warning" : undefined}>
+                <TableCell>{row.month}</TableCell>
+                <TableCell data-numeric>{money(row.in)}</TableCell>
+                <TableCell data-numeric>{money(row.out)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell>Total</TableCell>
+              <TableCell data-numeric>{money(total("in"))}</TableCell>
+              <TableCell data-numeric>{money(total("out"))}</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/tabs.tsx

@@ -0,0 +1,16 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@siyahi/ui";
+
+export default function TabsExample() {
+  return (
+    <Tabs defaultValue="orders">
+      <TabsList>
+        <TabsTrigger value="orders">Orders</TabsTrigger>
+        <TabsTrigger value="returns">Returns</TabsTrigger>
+        <TabsTrigger value="payouts">Payouts</TabsTrigger>
+      </TabsList>
+      <TabsContent value="orders">Every order placed, newest first.</TabsContent>
+      <TabsContent value="returns">Items sent back and the refunds paid for them.</TabsContent>
+      <TabsContent value="payouts">Money paid out to sellers each week.</TabsContent>
+    </Tabs>
+  );
+}

package/agents/examples/target-rows.tsx

@@ -0,0 +1,74 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  TargetRows,
+  useFormat,
+  type TargetRow,
+  type TargetStatus,
+} from "@siyahi/ui";
+
+interface Team {
+  name: string;
+  costs: string;
+  /** The team's share of this year's spend so far and the budget's share, as fractions; made-up figures. */
+  weight: number;
+  target: number;
+}
+
+const teams: Team[] = [
+  { name: "Engineering", costs: "Cloud hosting, tools, contractors", weight: 0.426, target: 0.4 },
+  { name: "Marketing", costs: "Ads, events, design agency", weight: 0.189, target: 0.2 },
+  { name: "Sales", costs: "Travel, commissions, CRM seats", weight: 0.194, target: 0.25 },
+  { name: "Support", costs: "Help desk seats, training", weight: 0.093, target: 0.1 },
+  { name: "Operations", costs: "Office rent, facilities", weight: 0.098, target: 0.05 },
+];
+
+// Within two points of the budget is on target; past five is far enough to review it.
+const NEAR = 0.02;
+const FAR = 0.05;
+
+const points = (value: number) => `${(value * 100).toFixed(1)} points`;
+
+function statusOf({ weight, target }: Team): TargetStatus {
+  const gap = weight - target;
+  const size = `${points(Math.abs(gap))} ${gap > 0 ? "over" : "under"}`;
+  if (Math.abs(gap) <= NEAR) return { kind: "met", label: "On target" };
+  if (Math.abs(gap) <= FAR) return { kind: "missed", label: size };
+  return { kind: "warning", label: `${size}, needs review` };
+}
+
+export default function TargetRowsExample() {
+  const f = useFormat();
+  const rows: TargetRow[] = teams.map((team) => ({
+    label: team.name,
+    detail: team.costs,
+    value: team.weight,
+    target: team.target,
+    bands: [
+      [team.target - FAR, team.target + FAR],
+      [team.target - NEAR, team.target + NEAR],
+    ],
+    status: statusOf(team),
+  }));
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Sales is 5.6 points under its budget</CardTitle>
+        <CardDescription>
+          Each team's share of spend against its share of the budget, on one 0–50% scale
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-2">
+          <p className="text-sm text-muted-foreground">
+            Bar: the share spent so far. Tall tick: the budgeted share. Shading: within 5 points of it, darker within 2.
+          </p>
+          <TargetRows rows={rows} domain={[0, 0.5]} valueFormatter={(value) => f.pct(value)} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/toggle-group.tsx

@@ -0,0 +1,12 @@
+import { ToggleGroup, ToggleGroupItem } from "@siyahi/ui";
+
+export default function ToggleGroupExample() {
+  return (
+    <ToggleGroup defaultValue={["1Y"]} variant="outline" size="sm" aria-label="Range">
+      <ToggleGroupItem value="1M">1M</ToggleGroupItem>
+      <ToggleGroupItem value="6M">6M</ToggleGroupItem>
+      <ToggleGroupItem value="1Y">1Y</ToggleGroupItem>
+      <ToggleGroupItem value="All">All</ToggleGroupItem>
+    </ToggleGroup>
+  );
+}

package/agents/examples/toggle.tsx

@@ -0,0 +1,11 @@
+import { Toggle } from "@siyahi/ui";
+import { EyeOffIcon } from "lucide-react";
+
+export default function ToggleExample() {
+  return (
+    <Toggle variant="outline" aria-label="Hide amounts">
+      <EyeOffIcon />
+      Hide amounts
+    </Toggle>
+  );
+}

package/agents/examples/tooltip.tsx

@@ -0,0 +1,13 @@
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@siyahi/ui";
+import { InfoIcon } from "lucide-react";
+
+export default function TooltipExample() {
+  return (
+    <Tooltip>
+      <TooltipTrigger render={<Button variant="outline" size="icon" aria-label="About churn" />}>
+        <InfoIcon />
+      </TooltipTrigger>
+      <TooltipContent>Churn counts customers who did not renew this month.</TooltipContent>
+    </Tooltip>
+  );
+}

package/agents/examples/treemap.tsx

@@ -0,0 +1,93 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  Treemap,
+  TreemapLegend,
+  useFormat,
+  type TreemapItem,
+} from "@siyahi/ui";
+import { useState } from "react";
+
+interface City extends TreemapItem {
+  channel: string;
+}
+
+// weight is the month's sales in ₹ and change their growth on the same month last year; Guwahati opened this year,
+// so it has no last year to grow from. Mumbai sells online and in stores, so it draws two tiles under one name.
+const cities: City[] = [
+  { name: "Mumbai", key: "mumbai-online", channel: "Online", group: "West", weight: 224400, change: 0.38 },
+  { name: "Mumbai", key: "mumbai-stores", channel: "Stores", group: "West", weight: 152000, change: 0.12 },
+  { name: "Pune", channel: "Stores", group: "West", weight: 166000, change: 0.09 },
+  { name: "Surat", channel: "Online", group: "West", weight: 98000, change: -0.21 },
+  { name: "Bengaluru", channel: "Stores", group: "South", weight: 262500, change: -0.06 },
+  { name: "Chennai", channel: "Stores", group: "South", weight: 258000, change: 0.44 },
+  { name: "Kochi", channel: "Online", group: "South", weight: 87000, change: 0.58 },
+  { name: "Delhi", channel: "Stores", group: "North", weight: 276000, change: 0.27 },
+  { name: "Jaipur", channel: "Online", group: "North", weight: 64000, change: -0.33 },
+  { name: "Kolkata", channel: "Stores", group: "East", weight: 255600, change: 0.16 },
+  { name: "Guwahati", channel: "Online", group: "Northeast", weight: 52000, change: null },
+];
+
+export default function TreemapExample() {
+  const [hovered, setHovered] = useState<City | null>(null);
+  const [selected, setSelected] = useState<City | null>(null);
+  const { money, pct } = useFormat();
+  const figures = (c: City) =>
+    `${money(c.weight)} · ${c.change === null ? "new this year" : `${c.change < 0 ? "\u2212" : "+"}${pct(Math.abs(c.change))}`}`;
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Sales by region</CardTitle>
+        <CardDescription>
+          Area is the city's sales this month; colour is its growth on last year, deepest at ±60%
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Tooltip open={hovered !== null} trackCursorAxis="both">
+          <TooltipTrigger render={<div />}>
+            <Treemap
+              items={cities}
+              height={320}
+              range={0.6}
+              onHover={setHovered}
+              selected={selected}
+              onSelect={setSelected}
+            />
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <div className="flex flex-col items-start">
+              {hovered && (
+                <>
+                  <span className="font-medium">
+                    {hovered.name} · {hovered.channel}
+                  </span>
+                  <span>{hovered.group}</span>
+                  <span>{figures(hovered)}</span>
+                </>
+              )}
+            </div>
+          </TooltipContent>
+        </Tooltip>
+        <TreemapLegend range={0.6} className="mt-3 ml-auto" />
+        <p data-slot="treemap-selection" aria-live="polite" className="mt-3 text-sm tabular-nums">
+          {selected ? (
+            <>
+              <span className="font-medium">
+                {selected.name} · {selected.channel}
+              </span>{" "}
+              · {selected.group} · {figures(selected)}
+            </>
+          ) : (
+            <span className="text-muted-foreground">Tap a tile for its figures</span>
+          )}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/waterfall-chart-stores.tsx

@@ -0,0 +1,27 @@
+import { WaterfallChartCard, useFormat, type WaterfallStep } from "@siyahi/ui";
+
+// Revenue from last year to this, store by store; made-up figures.
+const steps: WaterfallStep[] = [
+  { kind: "total", label: "Last year", value: 4_820_000 },
+  { kind: "change", label: "Koramangala flagship", value: 640_000 },
+  { kind: "change", label: "Indiranagar high street", value: 310_000 },
+  { kind: "change", label: "Whitefield mall kiosk", value: -420_000 },
+  { kind: "change", label: "Online orders and delivery", value: 880_000 },
+  { kind: "change", label: "Jayanagar (closed in June)", value: -560_000 },
+  { kind: "total", label: "This year" },
+];
+
+export default function WaterfallChartStoresExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <WaterfallChartCard
+      title="Revenue, last year to this"
+      description="What each store added or lost on the way from last year's total to this year's"
+      steps={steps}
+      horizontal
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={steps.length * 48 + 64}
+    />
+  );
+}

package/agents/examples/waterfall-chart.tsx

@@ -0,0 +1,37 @@
+import { WaterfallChartCard, useFormat, type WaterfallStep } from "@siyahi/ui";
+
+// A bakery's profit for the year, April to March, month by month; made-up figures.
+const months: [string, number][] = [
+  ["Apr", 42000],
+  ["May", 38000],
+  ["Jun", -12000],
+  ["Jul", 26000],
+  ["Aug", 31000],
+  ["Sep", -8000],
+  ["Oct", 54000],
+  ["Nov", 61000],
+  ["Dec", 72000],
+  ["Jan", -21000],
+  ["Feb", 18000],
+  ["Mar", 35000],
+];
+const steps: WaterfallStep[] = [
+  ...months.map(([label, value]): WaterfallStep => ({ kind: "change", label, value })),
+  // No value: the year's total is wherever the months left it.
+  { kind: "total", label: "Year" },
+];
+
+export default function WaterfallChartExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <WaterfallChartCard
+      title="Profit for the year, month by month"
+      description="April to March, before tax. Each bar starts where the month before left off."
+      steps={steps}
+      labels={{ rise: "Profit", fall: "Loss", total: "Year to date" }}
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={300}
+    />
+  );
+}