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

package/agents/examples/heatmap-status.tsx

@@ -8,17 +8,20 @@ import {
   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 (--positive), 2 degraded (--warning), 1 critical (--negative).
+// 3 healthy (quiet grey), 2 degraded (--warning), 1 critical (--destructive).
 const data = Array.from({ length: 60 }, (_, i) => {
   const day = new Date(Date.UTC(2026, 7, 22 + i));
   return { date: day.toISOString().slice(0, 10), value: i % 17 === 5 ? 1 : i % 11 === 3 ? 2 : 3 };
 });
 
 export default function HeatmapStatusExample() {
-  const [selected, setSelected] = useState<string | null>(null);
+  // 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>
@@ -27,24 +30,29 @@ export default function HeatmapStatusExample() {
         <CardDescription>Daily health: healthy, degraded or critical</CardDescription>
       </CardHeader>
       <CardContent>
-        <StatusHeatmap data={data}>
+        <StatusHeatmap data={data} statusValues={[3, 2, 1]}>
           <StatusHeatmapBody>
             {({ activity, dayIndex }) => (
               <StatusHeatmapBlock
                 activity={activity}
                 dayIndex={dayIndex}
-                onCellClick={(cell) =>
-                  setSelected(
-                    `${cell.date}: ${["unknown", "critical", "degraded", "healthy"][cell.value] ?? "unknown"}`,
-                  )
-                }
+                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>
+              {/* No day lacks data, so the legend leaves out "No Data". */}
+              <StatusHeatmapLegend />
+            </div>
+          </StatusHeatmapFooter>
         </StatusHeatmap>
-        <p aria-live="polite" className="mt-3 text-sm">
-          {selected ?? "Select a day for its health. Use arrow keys to move between days."}
-        </p>
       </CardContent>
     </Card>
   );

package/agents/examples/heatmap-weekday.tsx

@@ -9,6 +9,7 @@ import {
   WeekdayHeatmap,
   WeekdayHeatmapBlock,
   WeekdayHeatmapBody,
+  WeekdayHeatmapLegend,
 } from "@siyahi/ui";
 
 // Orders placed by weekday and hour of the trading session.
@@ -19,9 +20,15 @@ const data = [1, 2, 3, 4, 5].flatMap((weekday) =>
     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() {
-  const [selected, setSelected] = useState<string | null>(null);
+  // 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>
@@ -29,24 +36,36 @@ export default function HeatmapWeekdayExample() {
         <CardTitle>When orders are placed</CardTitle>
         <CardDescription>Weekday by hour in India Standard Time, market 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]}>
-          <WeekdayHeatmapBody>
-            {({ activity }) => (
-              <WeekdayHeatmapBlock
-                activity={activity}
-                onCellClick={(cell) =>
-                  setSelected(
-                    `${["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][cell.weekday]}, ${String(cell.hour).padStart(2, "0")}:00 IST: ${count(cell.value)} orders`,
-                  )
-                }
+          <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 orders", more: `${count(busiest.value)} orders an hour` }}
               />
-            )}
-          </WeekdayHeatmapBody>
+              <p>
+                Busiest: {DAYS[busiest.weekday]} at {hourLabel(busiest.hour)}, {count(busiest.value)} orders
+              </p>
+              <p aria-live="polite" className="text-muted-foreground">
+                {picked
+                  ? `${DAYS[picked.weekday]}, ${hourLabel(picked.hour)} IST: ${count(picked.value)} orders`
+                  : "Select a cell for its order count. Use arrow keys to move between cells."}
+              </p>
+            </div>
+          </div>
         </WeekdayHeatmap>
-        <p aria-live="polite" className="mt-3 text-sm">
-          {selected ?? "Select a cell for its order count. Use arrow keys to move between cells."}
-        </p>
       </CardContent>
     </Card>
   );

package/agents/examples/input-states.tsx

@@ -0,0 +1,33 @@
+import { Input } from "@siyahi/ui";
+
+// A field is its label, the input and one line under it: a hint, or the error that replaces it.
+export default function InputStatesExample() {
+  return (
+    <div className="grid max-w-sm gap-5">
+      <div className="grid gap-1.5">
+        <label htmlFor="budget" className="text-sm font-medium">
+          Monthly budget
+        </label>
+        <Input id="budget" inputMode="numeric" defaultValue="25,000" aria-describedby="budget-hint" />
+        <p id="budget-hint" className="text-sm text-muted-foreground">
+          In rupees, before brokerage
+        </p>
+      </div>
+      <div className="grid gap-1.5">
+        <label htmlFor="folio" className="text-sm font-medium">
+          Folio number
+        </label>
+        <Input id="folio" defaultValue="12/34" aria-invalid aria-describedby="folio-error" />
+        <p id="folio-error" className="text-sm text-destructive">
+          A folio is digits only, such as 1234567
+        </p>
+      </div>
+      <div className="grid gap-1.5">
+        <label htmlFor="broker" className="text-sm font-medium text-muted-foreground">
+          Broker
+        </label>
+        <Input id="broker" defaultValue="Kite" disabled />
+      </div>
+    </div>
+  );
+}

package/agents/examples/metric-strip.tsx

@@ -19,13 +19,19 @@ export default function MetricStripExample() {
       trend: [3600000, 3685000, 3770000, 3855000, 3940000, 4025000],
     },
     { label: "XIRR", value: pct(0.142), change: -0.004, trend: [0.151, 0.149, 0.152, 0.144, 0.146, 0.142] },
-    { label: "Realised", value: moneyCompact(-61200), change: -61200, changeFormat: "money" },
+    {
+      label: "Realised",
+      value: moneyCompact(-61200),
+      change: -61200,
+      changeFormat: "money",
+      trend: [14200, -3800, 9100, 2600, -18400, -61200],
+    },
     { label: "Dividends", value: moneyCompact(38400), change: 0.18, trend: [4100, 0, 12800, 3300, 9900, 8300] },
-    { label: "Holdings", value: count(42), note: "3 bought in Oct" },
+    { label: "Holdings", value: count(42), note: "3 bought in Oct", trend: [38, 39, 39, 40, 39, 42] },
   ];
   return (
     <MetricStrip
-      title="October"
+      title="Portfolio up 3.1% in October"
       description="Month-end figures with the six-month run behind each"
       action={
         <ToggleGroup defaultValue={["1M"]} variant="outline" size="sm" aria-label="Period">

package/agents/examples/overview-dashboard.tsx

@@ -0,0 +1,18 @@
+import ChartArea from "./chart-area";
+import DataTableExample from "./data-table";
+import MetricStrip from "./metric-strip";
+
+// What a page built with Siyahi looks like: a metric strip, a chart card and a data table, each the catalogue's own example.
+export default function OverviewDashboard() {
+  return (
+    <div className="flex flex-col gap-4">
+      <MetricStrip />
+      {/* Side by side only where the table's five columns fit beside the chart; at 1440 they would be cut off.
+          Each card keeps its own height: stretched to the taller one, the chart card ends in blank space. */}
+      <div className="grid items-start gap-4 2xl:grid-cols-2">
+        <ChartArea />
+        <DataTableExample />
+      </div>
+    </div>
+  );
+}

package/agents/examples/page-hero.tsx

@@ -0,0 +1,38 @@
+import { Button, PageHero } from "@siyahi/ui";
+import { ArrowRightIcon } from "lucide-react";
+
+// The catalogue's own ink drop, painted with currentColor so the hero tints it.
+function InkDrop() {
+  return (
+    <svg viewBox="0 0 16 16">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M8 .5C8 .5 2.5 6.3 2.5 10a5.5 5.5 0 0 0 11 0C13.5 6.3 8 .5 8 .5ZM4.75 10A3.25 3.25 0 0 0 8 13.25v-1.5A1.75 1.75 0 0 1 6.25 10Z"
+      />
+    </svg>
+  );
+}
+
+export default function PageHeroExample() {
+  return (
+    <PageHero
+      eyebrow="@siyahi/ui"
+      title="Siyahi"
+      lead="Ink for numbers. A design system for pages people read figures from: portfolios, ledgers, research."
+      detail="Stock shadcn/ui on Base UI and Tailwind v4, with a finance theme, charts and tables that fit a phone, Indian-aware formatters and a lint. Siyahi is Hindi for ink."
+      actions={
+        <>
+          <Button nativeButton={false} render={<a href="#/data" />}>
+            Browse the data components
+            <ArrowRightIcon />
+          </Button>
+          <Button variant="outline" nativeButton={false} render={<a href="#/overview/install" />}>
+            Install
+          </Button>
+        </>
+      }
+      mark={<InkDrop />}
+    />
+  );
+}

package/agents/examples/price-chart.tsx

@@ -16,8 +16,8 @@ export default function PriceChartExample() {
       <CardContent>
         <PriceChart data={data} height={256} />
       </CardContent>
-      <CardFooter className="text-xs text-muted-foreground">
-        <span>
+      <CardFooter>
+        <span className="text-xs text-muted-foreground">
           Chart by{" "}
           <a
             className="text-link underline-offset-4 hover:underline"

package/agents/examples/range-position-table.tsx

@@ -0,0 +1,101 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  DataTableBody,
+  DataTableCompactColumnsToggle,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableSortHeader,
+  DataTableToolbarSection,
+  RangePosition,
+  useFormat,
+  type DataTableColumnDef,
+} from "@siyahi/ui";
+
+interface Holding {
+  symbol: string;
+  /** Last close and the 52-week low and high closes, in rupees; made-up figures. */
+  close: number;
+  low: number;
+  high: number;
+  /** How far up its range the close sits, 0 at the low and 1 at the high, so the column sorts. */
+  position: number;
+}
+
+const holding = (symbol: string, close: number, low: number, high: number): Holding => ({
+  symbol,
+  close,
+  low,
+  high,
+  position: (close - low) / (high - low),
+});
+
+const holdings: Holding[] = [
+  holding("NIFTYBEES", 284, 241.2, 291.8),
+  holding("INFY", 1870, 1307, 2006.45),
+  holding("ICICIBANK", 1290, 1051.05, 1362.35),
+  holding("TCS", 4150, 3591.5, 4592.25),
+  holding("ITC", 460, 399.35, 528.5),
+  holding("HDFCBANK", 1750, 1613.6, 2027.4),
+];
+
+function Price({ amount }: { amount: number }) {
+  return useFormat().money(amount, 2);
+}
+
+const header = () => <DataTableSortHeader />;
+
+const columns: DataTableColumnDef<Holding>[] = [
+  { accessorKey: "symbol", header, size: 130, meta: { label: "Symbol", compact: true } },
+  {
+    accessorKey: "close",
+    header,
+    size: 120,
+    meta: { label: "Close", variant: "number" },
+    cell: ({ row }) => <Price amount={row.original.close} />,
+  },
+  {
+    accessorKey: "position",
+    header,
+    size: 200,
+    meta: { label: "52-week range", compact: true },
+    cell: ({ row }) => (
+      <RangePosition
+        variant="compact"
+        low={row.original.low}
+        high={row.original.high}
+        value={row.original.close}
+        lowLabel="52-week low"
+        highLabel="52-week high"
+      />
+    ),
+  },
+];
+
+export default function RangePositionTableExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>NIFTYBEES trades near its 52-week high, HDFCBANK near its low</CardTitle>
+        <CardDescription>
+          Each close on a track from the year's low close to its high; sort to rank them
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DataTableRoot data={holdings} columns={columns}>
+          <DataTableToolbarSection>
+            <DataTableCompactColumnsToggle />
+          </DataTableToolbarSection>
+          <DataTable aria-label="Holdings in their 52-week range">
+            <DataTableHeader />
+            <DataTableBody />
+          </DataTable>
+        </DataTableRoot>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/range-position.tsx

@@ -0,0 +1,55 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataList,
+  DataListItem,
+  RangePosition,
+  useFormat,
+} from "@siyahi/ui";
+
+// HDFCBANK over the last 52 weeks; made-up figures.
+const low = 1613.6;
+const high = 2027.4;
+const close = 1750.0;
+
+export default function RangePositionExample() {
+  const f = useFormat();
+  const price = (value: number) => f.money(value, 2);
+  return (
+    // Side by side once the card, not the screen, has room: in a narrow panel on a wide screen they stack.
+    <Card className="@container/range">
+      <CardHeader>
+        <CardTitle>HDFCBANK sits {f.pct((close - low) / (high - low), 0)} of the way up its 52-week range</CardTitle>
+        <CardDescription>The last close against the year's lowest and highest close</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-8 @xl/range:flex-row @xl/range:items-end">
+          <DataList className="@xl/range:w-56 @xl/range:shrink-0">
+            <DataListItem label="52-week low, 7 months ago">
+              <span className="tabular-nums">{price(low)}</span>
+            </DataListItem>
+            <DataListItem label="52-week high, 11 weeks ago">
+              <span className="tabular-nums">{price(high)}</span>
+            </DataListItem>
+            <DataListItem label="Last close">
+              <span className="tabular-nums">{price(close)}</span>
+            </DataListItem>
+          </DataList>
+          <RangePosition
+            low={low}
+            high={high}
+            value={close}
+            lowLabel="52-week low"
+            highLabel="52-week high"
+            caption="of the way up the 52-week range"
+            valueFormatter={price}
+            className="@xl/range:flex-1"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/scroll-area.tsx

@@ -6,15 +6,17 @@ const months = Array.from({ length: 24 }, (_, i) =>
 
 export default function ScrollAreaExample() {
   return (
-    <ScrollArea className="h-48 w-56 rounded-lg border">
-      <div className="p-4">
-        {months.map((month) => (
-          <div key={month}>
-            <div className="text-sm">{month}</div>
-            <Separator className="my-2" />
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
+    <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

@@ -1,4 +1,4 @@
-import { Delta, SectionCards, useFormat, type SectionCard } from "@siyahi/ui";
+import { Delta, SectionCards, SiyahiProvider, useFormat, type SectionCard } from "@siyahi/ui";
 import { useState } from "react";
 
 const classes = [
@@ -19,9 +19,12 @@ export default function SectionCardsSelectExample() {
     disabled: c.positions === 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>
+    // On a ruled surface the tiles part with hairlines, as on a trading screen, instead of sitting as cards.
+    <SiyahiProvider surface="ruled">
+      <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>
+    </SiyahiProvider>
   );
 }

package/agents/examples/surfaces.tsx

@@ -75,8 +75,10 @@ function Dashboard() {
               <TableBody>
                 {holdings.map((row) => (
                   <TableRow key={row.symbol}>
-                    <TableCell className="font-mono">{row.symbol}</TableCell>
-                    <TableCell className="tabular-nums">{money(row.value)}</TableCell>
+                    <TableCell>
+                      <span className="font-mono">{row.symbol}</span>
+                    </TableCell>
+                    <TableCell>{money(row.value)}</TableCell>
                   </TableRow>
                 ))}
               </TableBody>
@@ -89,7 +91,7 @@ function Dashboard() {
 }
 
 export default function SurfacesExample() {
-  const [surface, setSurface] = useState<Surface>("ruled");
+  const [surface, setSurface] = useState<Surface>("card");
   return (
     <div className="flex flex-col gap-4">
       <ToggleGroup
@@ -102,9 +104,10 @@ export default function SurfacesExample() {
         size="sm"
         aria-label="Surface"
       >
+        {/* The default first. */}
+        <ToggleGroupItem value="card">Card</ToggleGroupItem>
         <ToggleGroupItem value="ruled">Ruled</ToggleGroupItem>
         <ToggleGroupItem value="open">Open</ToggleGroupItem>
-        <ToggleGroupItem value="card">Card</ToggleGroupItem>
       </ToggleGroup>
       {/* A nested provider sets the surface for its part of the page. */}
       <SiyahiProvider surface={surface}>

package/agents/examples/target-rows.tsx

@@ -0,0 +1,72 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  TargetRows,
+  useFormat,
+  type TargetRow,
+  type TargetStatus,
+} from "@siyahi/ui";
+
+interface Sleeve {
+  name: string;
+  holdings: string;
+  /** Today's share of the portfolio and the plan's share, as fractions; made-up figures. */
+  weight: number;
+  target: number;
+}
+
+const sleeves: Sleeve[] = [
+  { name: "Large-cap equity", holdings: "HDFCBANK, ICICIBANK, INFY, TCS", weight: 0.426, target: 0.4 },
+  { name: "Mid and small cap", holdings: "Two mid-cap funds", weight: 0.189, target: 0.2 },
+  { name: "Debt", holdings: "Corporate bond fund, PPF", weight: 0.194, target: 0.25 },
+  { name: "Gold", holdings: "GOLDBEES, Sovereign Gold Bonds", weight: 0.093, target: 0.1 },
+  { name: "International", holdings: "Nasdaq 100 fund of funds", weight: 0.098, target: 0.05 },
+];
+
+// Within two points of the plan is on target; past five is far enough to rebalance.
+const NEAR = 0.02;
+const FAR = 0.05;
+
+const pts = (value: number) => `${(value * 100).toFixed(1)} pts`;
+
+function statusOf({ weight, target }: Sleeve): TargetStatus {
+  const gap = weight - target;
+  const size = `${pts(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}, rebalance` };
+}
+
+export default function TargetRowsExample() {
+  const f = useFormat();
+  const rows: TargetRow[] = sleeves.map((sleeve) => ({
+    label: sleeve.name,
+    detail: sleeve.holdings,
+    value: sleeve.weight,
+    target: sleeve.target,
+    bands: [
+      [sleeve.target - FAR, sleeve.target + FAR],
+      [sleeve.target - NEAR, sleeve.target + NEAR],
+    ],
+    status: statusOf(sleeve),
+  }));
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Debt is 5.6 points under its target</CardTitle>
+        <CardDescription>Each sleeve's share of the portfolio against the plan, on one 0–50% scale</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-2">
+          <p className="text-sm text-muted-foreground">
+            Bar: today's weight. Tall tick: the target. 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/treemap.tsx

@@ -57,15 +57,18 @@ export default function TreemapExample() {
               onSelect={setSelected}
             />
           </TooltipTrigger>
-          <TooltipContent side="bottom" className="flex-col items-start gap-0 tabular-nums">
-            {hovered && (
-              <>
-                <span className="font-medium">
-                  {hovered.name} · {hovered.broker}
-                </span>
-                <span>{figures(hovered)}</span>
-              </>
-            )}
+          <TooltipContent side="bottom">
+            <div className="flex flex-col items-start">
+              {hovered && (
+                <>
+                  <span className="font-medium">
+                    {hovered.name} · {hovered.broker}
+                  </span>
+                  <span>{hovered.group}</span>
+                  <span>{figures(hovered)}</span>
+                </>
+              )}
+            </div>
           </TooltipContent>
         </Tooltip>
         <TreemapLegend range={0.6} className="mt-3 ml-auto" />
@@ -75,7 +78,7 @@ export default function TreemapExample() {
               <span className="font-medium">
                 {selected.name} · {selected.broker}
               </span>{" "}
-              · {figures(selected)}
+              · {selected.group} · {figures(selected)}
             </>
           ) : (
             <span className="text-muted-foreground">Tap a tile for its figures</span>