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

package/agents/examples/delta.tsx

@@ -0,0 +1,18 @@
+import { Delta } from "@siyahi/ui";
+
+export default function DeltaExample() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center gap-6">
+        <Delta value={0.0234} />
+        <Delta value={-0.0108} />
+        <Delta value={0} />
+        <Delta value={18250} format="money" />
+        <Delta value={-4300} format="money" />
+      </div>
+      <p>
+        Revenue was <Delta value={0.031} /> on last month, and refunds <Delta value={-1200} format="money" />.
+      </p>
+    </div>
+  );
+}

package/agents/examples/dialog.tsx

@@ -0,0 +1,28 @@
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@siyahi/ui";
+
+export default function DialogExample() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button variant="outline" className="w-fit" />}>Show parcels</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Parcels for this order</DialogTitle>
+          <DialogDescription>Each parcel this order was split into, earliest first.</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline" />}>Close</DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/agents/examples/distribution-bar-budget.tsx

@@ -0,0 +1,30 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, DistributionBar } from "@siyahi/ui";
+
+// Where a memory budget sits, on a fixed 0 to 12 GiB scale; made-up figures.
+const gib = (value: number) => `${value.toFixed(1)} GiB`;
+
+export default function DistributionBarBudgetExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>The agents group's budget</CardTitle>
+        <CardDescription>0 to 12 GiB; the lines mark its limits</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DistributionBar
+          max={12}
+          valueFormatter={gib}
+          markers={[
+            { at: 6, label: "High" },
+            { at: 8.7, label: "Max" },
+          ]}
+          segments={[
+            { name: "In RAM, under High", value: 6, color: "var(--chart-1)" },
+            { name: "In RAM, over High", value: 1.4, color: "var(--chart-2)" },
+            { name: "Pushed to zram", value: 2.6, color: "var(--chart-3)" },
+          ]}
+        />
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/distribution-bar-tug.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Delta,
+  DistributionBar,
+  type DistributionSegment,
+} from "@siyahi/ui";
+
+// Each finished marketing campaign's net return, ₹: sales it brought in less what it cost; made-up figures.
+const campaigns = [
+  { name: "Festive sale", value: 61000 },
+  { name: "Referrals", value: 38000 },
+  { name: "Email win-back", value: 17000 },
+  { name: "Billboards", value: -26000 },
+  { name: "Podcast ads", value: -14000 },
+  { name: "Trade fair", value: -6000 },
+];
+const won = campaigns.filter((c) => c.value > 0).reduce((sum, c) => sum + c.value, 0);
+const lost = campaigns.filter((c) => c.value < 0).reduce((sum, c) => sum + c.value, 0);
+// One scale both ways, so whichever side reaches farther is the net.
+const reach = Math.max(won, -lost);
+
+export default function DistributionBarTugExample() {
+  const [focus, setFocus] = useState<DistributionSegment | null>(null);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Campaigns earned ₹70,000 more than they lost</CardTitle>
+        <CardDescription>Each finished campaign, losses left of break-even and gains right</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-2">
+          <DistributionBar
+            min={-reach}
+            max={reach}
+            showLegend={false}
+            markers={[{ at: 0 }]}
+            highlighted={focus?.name ?? null}
+            onHover={setFocus}
+            segments={campaigns.map(({ name, value }) => ({
+              name,
+              value,
+              color: value > 0 ? "var(--positive)" : "var(--negative)",
+            }))}
+          />
+          <div className="grid grid-cols-3 text-xs text-muted-foreground tabular-nums">
+            <span>
+              lost <Delta value={lost} format="money" />
+            </span>
+            <span className="text-center">break-even</span>
+            <span className="text-right">
+              earned <Delta value={won} format="money" />
+            </span>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="min-h-12" aria-live="polite">
+        {focus ? (
+          <p className="flex items-center gap-2">
+            <span className="font-medium">{focus.name}</span>
+            <Delta value={focus.value} format="money" />
+          </p>
+        ) : (
+          <p className="text-muted-foreground">Hover a band to see its campaign.</p>
+        )}
+      </CardFooter>
+    </Card>
+  );
+}

package/agents/examples/drawdown-chart.tsx

@@ -0,0 +1,35 @@
+import { DrawdownChartCard, useFormat } from "@siyahi/ui";
+
+// A bakery's cash balance at the end of each week of 2026: it climbs, falls through the summer when an oven is
+// replaced, and falls again in the quiet weeks of the new year; made-up figures.
+const weeks = Array.from({ length: 52 }, (_, i) => {
+  const date = new Date(Date.UTC(2026, 0, 4 + i * 7));
+  const trend = 600_000 + i * 9_000;
+  const oven = i >= 22 && i < 34 ? -180_000 + (i - 22) * 12_000 : 0;
+  const quiet = i >= 46 ? -(i - 45) * 22_000 : 0;
+  const wobble = ((i * 53) % 17) * 3_000 - 24_000;
+  return { week: date.toISOString().slice(0, 10), balance: trend + oven + quiet + wobble };
+});
+
+const month = (iso: string) => new Date(iso).toLocaleString("en-IN", { month: "short", timeZone: "UTC" });
+const day = (iso: string) =>
+  new Date(iso).toLocaleString("en-IN", { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" });
+
+export default function DrawdownChartExample() {
+  const { money } = useFormat();
+  return (
+    <DrawdownChartCard
+      title="Cash below its best"
+      description="Each week's balance against the highest it had been so far. At zero the bakery was at a new high."
+      data={weeks}
+      xKey="week"
+      levelKey="balance"
+      levelFormatter={money}
+      label="Below its best"
+      xFormatter={month}
+      xTooltipFormatter={(iso) => `Week ending ${day(iso)}`}
+      xTicks={weeks.filter((_, i) => i % 9 === 0).map(({ week }) => week)}
+      height={260}
+    />
+  );
+}

package/agents/examples/dropdown-menu.tsx

@@ -0,0 +1,31 @@
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@siyahi/ui";
+import { EllipsisIcon } from "lucide-react";
+
+export default function DropdownMenuExample() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="outline" className="w-fit" />}>
+        <EllipsisIcon />
+        Actions
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Order</DropdownMenuLabel>
+          <DropdownMenuItem>View parcels</DropdownMenuItem>
+          <DropdownMenuItem>Export CSV</DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive">Hide</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/agents/examples/field.tsx

@@ -0,0 +1,108 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea,
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@siyahi/ui";
+import { IndianRupeeIcon } from "lucide-react";
+
+const kinds = [
+  { value: "equity", label: "Equity" },
+  { value: "debt", label: "Debt" },
+  { value: "gold", label: "Gold" },
+];
+
+// Each field is a Field: its label above (small mono capitals, from the theme), the control, and a hint or an error.
+export default function FieldExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Add a holding</CardTitle>
+        <CardDescription>What you bought, how much, and how often to review it</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form className="grid max-w-3xl gap-x-8 gap-y-5 sm:grid-cols-2" onSubmit={(event) => event.preventDefault()}>
+          <Field>
+            <FieldLabel htmlFor="holding-name">Name</FieldLabel>
+            <Input id="holding-name" defaultValue="Nifty Next 50 index fund" />
+            <FieldDescription>As it appears on the statement</FieldDescription>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="holding-kind">Kind</FieldLabel>
+            <Select items={kinds} defaultValue="equity">
+              <SelectTrigger id="holding-kind" className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {kinds.map((kind) => (
+                    <SelectItem key={kind.value} value={kind.value}>
+                      {kind.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="holding-amount">Amount invested</FieldLabel>
+            <InputGroup>
+              <InputGroupAddon>
+                <IndianRupeeIcon />
+              </InputGroupAddon>
+              <InputGroupInput id="holding-amount" defaultValue="2,50,000" inputMode="numeric" />
+            </InputGroup>
+            <FieldDescription>In rupees, before charges</FieldDescription>
+          </Field>
+          <Field data-invalid>
+            <FieldLabel htmlFor="holding-folio">Folio number</FieldLabel>
+            <Input id="holding-folio" defaultValue="9103-44" aria-invalid aria-describedby="holding-folio-error" />
+            <FieldError id="holding-folio-error">A folio number is 8 to 12 digits, such as 91034455</FieldError>
+          </Field>
+          <Field>
+            <FieldLabel id="holding-review">Review</FieldLabel>
+            <ToggleGroup defaultValue={["quarterly"]} variant="outline" aria-labelledby="holding-review">
+              <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
+              <ToggleGroupItem value="quarterly">Quarterly</ToggleGroupItem>
+              <ToggleGroupItem value="yearly">Yearly</ToggleGroupItem>
+            </ToggleGroup>
+          </Field>
+          <Field data-disabled>
+            <FieldLabel htmlFor="holding-account">Account</FieldLabel>
+            <Input id="holding-account" defaultValue="Demat, joint" disabled />
+            <FieldDescription>Set by the statement you imported</FieldDescription>
+          </Field>
+          <Field className="sm:col-span-2">
+            <FieldLabel htmlFor="holding-note">Note</FieldLabel>
+            <Textarea id="holding-note" placeholder="Why you bought it, and what would make you sell" />
+          </Field>
+          <div className="flex gap-2 sm:col-span-2">
+            <Button type="submit">Save holding</Button>
+            <Button type="button" variant="outline">
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/formatters.tsx

@@ -0,0 +1,42 @@
+import { SiyahiProvider, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, useFormat } from "@siyahi/ui";
+
+function Row({ label }: { label: string }) {
+  const { count, money, moneyCompact, pct, time } = useFormat();
+  return (
+    <TableRow>
+      <TableCell>{label}</TableCell>
+      <TableCell data-numeric>{count(153110)}</TableCell>
+      <TableCell data-numeric>{money(153110)}</TableCell>
+      <TableCell data-numeric>{moneyCompact(99999)}</TableCell>
+      <TableCell data-numeric>{moneyCompact(240000)}</TableCell>
+      <TableCell data-numeric>{moneyCompact(400000000)}</TableCell>
+      <TableCell data-numeric>{pct(0.1234)}</TableCell>
+      <TableCell data-numeric>{time("2026-10-20T09:00:00Z")}</TableCell>
+    </TableRow>
+  );
+}
+
+export default function FormattersExample() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Locale</TableHead>
+          <TableHead data-numeric>count</TableHead>
+          <TableHead data-numeric>money</TableHead>
+          <TableHead data-numeric>moneyCompact</TableHead>
+          <TableHead data-numeric>moneyCompact</TableHead>
+          <TableHead data-numeric>moneyCompact</TableHead>
+          <TableHead data-numeric>pct</TableHead>
+          <TableHead data-numeric>time</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <Row label="Default (en-IN, INR, Kolkata)" />
+        <SiyahiProvider locale={{ numberLocale: "en-US", currency: "USD", timeZone: "America/New_York" }}>
+          <Row label="en-US, USD, New York" />
+        </SiyahiProvider>
+      </TableBody>
+    </Table>
+  );
+}

package/agents/examples/heatmap-calendar-signed.tsx

@@ -0,0 +1,67 @@
+import { useState } from "react";
+import {
+  CalendarHeatmap,
+  CalendarHeatmapBlock,
+  CalendarHeatmapBody,
+  CalendarHeatmapFooter,
+  CalendarHeatmapLegend,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  useFormat,
+} from "@siyahi/ui";
+
+// A café's profit or loss each day for six months: weekends earn most, rainy Mondays lose; made-up figures.
+const data = Array.from({ length: 182 }, (_, i) => {
+  const day = new Date(Date.UTC(2026, 4, 1 + i));
+  const weekday = day.getUTCDay();
+  const base = weekday === 0 || weekday === 6 ? 9000 : weekday === 1 ? -2500 : 3000;
+  const swing = ((i * 37) % 23) * 400 - 4400;
+  return { date: day.toISOString().slice(0, 10), value: base + swing };
+});
+
+export default function HeatmapCalendarSignedExample() {
+  const [picked, setPicked] = useState<(typeof data)[number] | null>(null);
+  const { money } = useFormat();
+  const signed = (value: number) => `${value > 0 ? "+" : value < 0 ? "−" : ""}${money(Math.abs(value))}`;
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Profit by day</CardTitle>
+        <CardDescription>
+          May to October. Square green days made money and round red days lost it; deeper is more.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <CalendarHeatmap
+          data={data}
+          signed
+          weekStart={1}
+          labels={{ heatmapLabel: "Profit by day, May to October", cellLabel: "{{date}}: {{value}} rupees" }}
+        >
+          <CalendarHeatmapBody>
+            {({ activity, dayIndex, weekIndex }) => (
+              <CalendarHeatmapBlock
+                activity={activity}
+                dayIndex={dayIndex}
+                weekIndex={weekIndex}
+                selected={activity.date === picked?.date}
+                onCellClick={(cell) => setPicked(cell.date === picked?.date ? null : cell)}
+              />
+            )}
+          </CalendarHeatmapBody>
+          <CalendarHeatmapFooter className="whitespace-normal">
+            <div className="flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2">
+              <p aria-live="polite" className="text-sm tabular-nums">
+                {picked ? `${picked.date}: ${signed(picked.value)}` : "Select a day for its profit or loss."}
+              </p>
+              <CalendarHeatmapLegend labels={{ less: "Loss", more: "Profit" }} valueFormatter={money} />
+            </div>
+          </CalendarHeatmapFooter>
+        </CalendarHeatmap>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/heatmap-calendar.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import {
+  CalendarHeatmap,
+  CalendarHeatmapBlock,
+  CalendarHeatmapBody,
+  CalendarHeatmapFooter,
+  CalendarHeatmapLegend,
+  useFormat,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@siyahi/ui";
+
+// A year of working days with a count of production deploys on each.
+const data = Array.from({ length: 365 }, (_, i) => {
+  const day = new Date(Date.UTC(2025, 9, 20 + i));
+  const weekday = day.getUTCDay();
+  const value = weekday === 0 || weekday === 6 ? 0 : (i * 7 + weekday * 3) % 6;
+  return { date: day.toISOString().slice(0, 10), value };
+});
+const busiest = Math.max(...data.map((day) => day.value));
+
+export default function HeatmapCalendarExample() {
+  // The page owns the pick: a second tap on the same day clears it.
+  const [picked, setPicked] = useState<(typeof data)[number] | null>(null);
+  const { count } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Deploys per day</CardTitle>
+        <CardDescription>The last 12 months; the stronger the colour, the more deploys</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <CalendarHeatmap data={data} labels={{ heatmapLabel: "Deploys per day over the last 12 months" }}>
+          <CalendarHeatmapBody>
+            {({ activity, dayIndex, weekIndex }) => (
+              <CalendarHeatmapBlock
+                activity={activity}
+                dayIndex={dayIndex}
+                weekIndex={weekIndex}
+                selected={activity.date === picked?.date}
+                onCellClick={(cell) => setPicked(cell.date === picked?.date ? null : cell)}
+              />
+            )}
+          </CalendarHeatmapBody>
+          <CalendarHeatmapFooter className="whitespace-normal">
+            <div className="flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2">
+              <p aria-live="polite" className="text-sm">
+                {picked
+                  ? `${picked.date}: ${count(picked.value)} deploys`
+                  : "Select a day for its deploy count. Use arrow keys to move between days."}
+              </p>
+              <CalendarHeatmapLegend labels={{ less: "0 deploys", more: `${count(busiest)} deploys` }} />
+            </div>
+          </CalendarHeatmapFooter>
+        </CalendarHeatmap>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/heatmap-status.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  StatusHeatmap,
+  StatusHeatmapBlock,
+  StatusHeatmapBody,
+  StatusHeatmapFooter,
+  StatusHeatmapLegend,
+} from "@siyahi/ui";
+
+// One cell per day for the last 60 days, as a status the heatmap colours:
+// 3 healthy (quiet grey), 2 degraded (a half bar in --warning), 1 critical (a full bar in --destructive),
+// 0 no data (a hollow outline).
+const data = Array.from({ length: 60 }, (_, i) => {
+  const day = new Date(Date.UTC(2026, 7, 22 + i));
+  // Two days in September the monitor itself was down, so there is no reading: 0.
+  const value = i === 30 || i === 31 ? 0 : i % 17 === 5 ? 1 : i % 11 === 3 ? 2 : 3;
+  return { date: day.toISOString().slice(0, 10), value };
+});
+
+export default function HeatmapStatusExample() {
+  // The page owns the pick: a second tap on the same day clears it.
+  const [picked, setPicked] = useState<(typeof data)[number] | null>(null);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Checkout API</CardTitle>
+        <CardDescription>Daily health: healthy, degraded or critical</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <StatusHeatmap data={data} statusValues={[3, 2, 1, 0]}>
+          <StatusHeatmapBody>
+            {({ activity, dayIndex }) => (
+              <StatusHeatmapBlock
+                activity={activity}
+                dayIndex={dayIndex}
+                selected={activity.date === picked?.date}
+                onCellClick={(cell) => setPicked(cell.date === picked?.date ? null : cell)}
+              />
+            )}
+          </StatusHeatmapBody>
+          <StatusHeatmapFooter className="whitespace-normal">
+            <div className="flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2">
+              <p aria-live="polite" className="text-sm">
+                {picked
+                  ? `${picked.date}: ${["unknown", "critical", "degraded", "healthy"][picked.value] ?? "unknown"}`
+                  : "Select a day for its health. Use arrow keys to move between days."}
+              </p>
+              <StatusHeatmapLegend />
+            </div>
+          </StatusHeatmapFooter>
+        </StatusHeatmap>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/heatmap-weekday.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import {
+  useFormat,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  WeekdayHeatmap,
+  WeekdayHeatmapBlock,
+  WeekdayHeatmapBody,
+  WeekdayHeatmapLegend,
+} from "@siyahi/ui";
+
+// Support tickets opened by weekday and office hour; the overnight queue lands at 9.
+const data = [1, 2, 3, 4, 5].flatMap((weekday) =>
+  [9, 10, 11, 12, 13, 14, 15].map((hour) => ({
+    weekday,
+    hour,
+    value: ((weekday * 5 + hour * 3) % 9) + (hour === 9 ? 6 : 0),
+  })),
+);
+const busiest = data.reduce((top, cell) => (cell.value > top.value ? cell : top));
+const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+const hourLabel = (hour: number) => `${String(hour).padStart(2, "0")}:00`;
+
+export default function HeatmapWeekdayExample() {
+  // The page owns the pick: a second tap on the same cell clears it.
+  const [picked, setPicked] = useState<(typeof data)[number] | null>(null);
+  const isPicked = (cell: { weekday: number; hour: number }) =>
+    cell.weekday === picked?.weekday && cell.hour === picked.hour;
+  const { count } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>When support tickets arrive</CardTitle>
+        <CardDescription>Weekday by hour in India Standard Time, office hours only</CardDescription>
+      </CardHeader>
+      {/* Seven hours by five days is a small grid: capped, it keeps square cells, and the legend and the answer
+          sit beside it instead of a wide empty card. */}
+      <CardContent>
+        <WeekdayHeatmap data={data} hours={[9, 10, 11, 12, 13, 14, 15]} weekdays={[1, 2, 3, 4, 5]}>
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:gap-8">
+            <WeekdayHeatmapBody className="lg:w-md lg:shrink-0">
+              {({ activity }) => (
+                <WeekdayHeatmapBlock
+                  activity={activity}
+                  selected={isPicked(activity)}
+                  onCellClick={(cell) => setPicked(isPicked(cell) ? null : cell)}
+                />
+              )}
+            </WeekdayHeatmapBody>
+            <div className="flex flex-col items-start gap-3 text-sm">
+              <WeekdayHeatmapLegend
+                className="ml-0"
+                labels={{ less: "0 tickets", more: `${count(busiest.value)} tickets an hour` }}
+              />
+              <p>
+                Busiest: {DAYS[busiest.weekday]} at {hourLabel(busiest.hour)}, {count(busiest.value)} tickets
+              </p>
+              <p aria-live="polite" className="text-muted-foreground">
+                {picked
+                  ? `${DAYS[picked.weekday]}, ${hourLabel(picked.hour)} IST: ${count(picked.value)} tickets`
+                  : "Select a cell for its ticket count. Use arrow keys to move between cells."}
+              </p>
+            </div>
+          </div>
+        </WeekdayHeatmap>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/histogram-chart.tsx

@@ -0,0 +1,28 @@
+import { HistogramChartCard, useFormat } from "@siyahi/ui";
+
+// 2,000 checkout requests' response times in milliseconds: most are quick, a long tail is slow. Made-up figures from a
+// fixed sequence, so the page draws the same every time.
+let seed = 7;
+const next = () => {
+  seed = (seed * 16807) % 2147483647;
+  return seed / 2147483647;
+};
+const times = Array.from({ length: 2000 }, () => Math.round(80 + 900 * next() ** 3 + 120 * next()));
+
+export default function HistogramChartExample() {
+  const { count } = useFormat();
+  return (
+    <HistogramChartCard
+      title="Checkout response times"
+      description="The last 2,000 requests, counted in 100 ms buckets. Lines mark the median and the 95th percentile (95 in 100 requests were faster)."
+      values={times}
+      valueFormatter={(ms) => `${count(ms)} ms`}
+      tickFormatter={count}
+      countLabel="Requests"
+      marks={["median", "p95"]}
+      xLabel="Response time (ms)"
+      yLabel="Requests"
+      height={280}
+    />
+  );
+}