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

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/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,53 @@
+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 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"
+        />
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -89,7 +89,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 +102,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,70 @@
+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 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)} />
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/treemap.tsx

@@ -63,6 +63,7 @@ export default function TreemapExample() {
                 <span className="font-medium">
                   {hovered.name} · {hovered.broker}
                 </span>
+                <span>{hovered.group}</span>
                 <span>{figures(hovered)}</span>
               </>
             )}
@@ -75,7 +76,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>

package/agents/manifest.json

@@ -108,6 +108,29 @@
         "DataBar"
       ]
     },
+    {
+      "need": "A table column of changes that should rank by eye, and a note on how to read the table",
+      "guidance": "`ChangeBar` in the column's cell, `diverging` when it holds both signs; `DataTableFootnote` after `DataTableBody`",
+      "components": [
+        "ChangeBar",
+        "DataTableFootnote",
+        "DataTableBody"
+      ]
+    },
+    {
+      "need": "Figures against their targets, such as allocation against plan",
+      "guidance": "`TargetRows`, with neutral `bands` and a `status` per row",
+      "components": [
+        "TargetRows"
+      ]
+    },
+    {
+      "need": "Where a value sits in its range, such as a price in its 52-week range",
+      "guidance": "`RangePosition`; `variant=\"compact\"` in a table cell",
+      "components": [
+        "RangePosition"
+      ]
+    },
     {
       "need": "One instrument's price history",
       "guidance": "`PriceChart`",
@@ -283,7 +306,8 @@
       "components": [
         "Alert",
         "AlertDescription",
-        "AlertTitle"
+        "AlertTitle",
+        "WarningAlert"
       ]
     },
     {
@@ -355,6 +379,13 @@
         "BreadcrumbSeparator"
       ]
     },
+    {
+      "file": "agents/examples/button-states.tsx",
+      "components": [
+        "Button",
+        "Toggle"
+      ]
+    },
     {
       "file": "agents/examples/button.tsx",
       "components": [
@@ -367,6 +398,16 @@
         "Calendar"
       ]
     },
+    {
+      "file": "agents/examples/callout.tsx",
+      "components": [
+        "Callout",
+        "Quote",
+        "WarningAlert",
+        "AlertDescription",
+        "AlertTitle"
+      ]
+    },
     {
       "file": "agents/examples/card.tsx",
       "components": [
@@ -381,6 +422,26 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/change-bar.tsx",
+      "components": [
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "ChangeBar",
+        "DataTable",
+        "DataTableBody",
+        "DataTableCompactColumnsToggle",
+        "DataTableFootnote",
+        "DataTableHeader",
+        "DataTableRoot",
+        "DataTableSortHeader",
+        "DataTableToolbarSection",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/chart-area.tsx",
       "components": [
@@ -528,6 +589,27 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/data-table-compact.tsx",
+      "components": [
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "DataTable",
+        "DataTableBody",
+        "DataTableCompactColumnsToggle",
+        "DataTableHeader",
+        "DataTableRoot",
+        "DataTableRowCount",
+        "DataTableSortHeader",
+        "DataTableToolbarSection",
+        "Delta",
+        "useDataTable",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/data-table-filters.tsx",
       "components": [
@@ -654,6 +736,8 @@
         "CalendarHeatmap",
         "CalendarHeatmapBlock",
         "CalendarHeatmapBody",
+        "CalendarHeatmapFooter",
+        "CalendarHeatmapLegend",
         "useFormat",
         "Card",
         "CardContent",
@@ -672,7 +756,9 @@
         "CardTitle",
         "StatusHeatmap",
         "StatusHeatmapBlock",
-        "StatusHeatmapBody"
+        "StatusHeatmapBody",
+        "StatusHeatmapFooter",
+        "StatusHeatmapLegend"
       ]
     },
     {
@@ -686,7 +772,14 @@
         "CardTitle",
         "WeekdayHeatmap",
         "WeekdayHeatmapBlock",
-        "WeekdayHeatmapBody"
+        "WeekdayHeatmapBody",
+        "WeekdayHeatmapLegend"
+      ]
+    },
+    {
+      "file": "agents/examples/input-states.tsx",
+      "components": [
+        "Input"
       ]
     },
     {
@@ -714,6 +807,17 @@
         "useFormat"
       ]
     },
+    {
+      "file": "agents/examples/overview-dashboard.tsx",
+      "components": []
+    },
+    {
+      "file": "agents/examples/page-hero.tsx",
+      "components": [
+        "Button",
+        "PageHero"
+      ]
+    },
     {
       "file": "agents/examples/page-section.tsx",
       "components": [
@@ -768,6 +872,39 @@
         "ProgressValue"
       ]
     },
+    {
+      "file": "agents/examples/range-position-table.tsx",
+      "components": [
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "DataTable",
+        "DataTableBody",
+        "DataTableCompactColumnsToggle",
+        "DataTableHeader",
+        "DataTableRoot",
+        "DataTableSortHeader",
+        "DataTableToolbarSection",
+        "RangePosition",
+        "useFormat"
+      ]
+    },
+    {
+      "file": "agents/examples/range-position.tsx",
+      "components": [
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "DataList",
+        "DataListItem",
+        "RangePosition",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/scroll-area.tsx",
       "components": [
@@ -780,6 +917,7 @@
       "components": [
         "Delta",
         "SectionCards",
+        "SiyahiProvider",
         "useFormat"
       ]
     },
@@ -889,6 +1027,18 @@
         "TabsTrigger"
       ]
     },
+    {
+      "file": "agents/examples/target-rows.tsx",
+      "components": [
+        "Card",
+        "CardContent",
+        "CardDescription",
+        "CardHeader",
+        "CardTitle",
+        "TargetRows",
+        "useFormat"
+      ]
+    },
     {
       "file": "agents/examples/toggle-group.tsx",
       "components": [

package/dist/components/registry/charts/area-chart-card.js

@@ -1,21 +1,39 @@
 "use client";
-import { ChartFrame } from "../../../lib/chart-frame.js";
-import { jsx } from "react/jsx-runtime";
+import { ChartFrame, endDot } from "../../../lib/chart-frame.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Area, AreaChart } from "recharts";
 //#region src/components/registry/charts/area-chart-card.tsx
 /** Values over an ordered axis as filled areas: one series, or several overlapping or stacked. */
 function AreaChartCard({ stacked = false, curve = "monotone", ...props }) {
-	return /* @__PURE__ */ jsx(ChartFrame, {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(ChartFrame, {
 		chart: AreaChart,
 		...props,
-		children: props.series.map(({ key, color }) => /* @__PURE__ */ jsx(Area, {
+		children: [/* @__PURE__ */ jsx("defs", { children: props.series.map(({ key, color }, index) => /* @__PURE__ */ jsxs("linearGradient", {
+			id: `${id}-${index}`,
+			x1: "0",
+			y1: "0",
+			x2: "0",
+			y2: "1",
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "0%",
+				stopColor: color,
+				stopOpacity: stacked ? .5 : .32
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "100%",
+				stopColor: color,
+				stopOpacity: stacked ? .15 : .02
+			})]
+		}, key)) }), props.series.map(({ key, color }, index) => /* @__PURE__ */ jsx(Area, {
 			dataKey: key,
 			type: curve,
-			fill: color,
-			fillOpacity: stacked ? .4 : .2,
+			fill: stacked || index === 0 ? `url(#${id}-${index})` : "none",
 			stroke: color,
+			strokeWidth: 2,
+			dot: endDot(color, props.data.length),
 			stackId: stacked ? "stack" : void 0
-		}, key))
+		}, key))]
 	});
 }
 //#endregion

package/dist/components/registry/charts/bar-chart-card.d.ts

@@ -10,6 +10,5 @@ export interface BarChartCardProps<T extends object, K extends keyof T> extends
   /** Called with a clicked category's x value, or null when the picked one is clicked again. */
   onSelect?: (value: T[K] | null) => void;
 }
-/** Values over an ordered axis as bars: one series, or several grouped or stacked. */
 export declare function BarChartCard<T extends object, K extends keyof T>({ stacked, selected, onSelect, ...props }: BarChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

package/dist/components/registry/charts/bar-chart-card.js

@@ -5,6 +5,8 @@ import { Bar, BarChart, Cell } from "recharts";
 //#region src/components/registry/charts/bar-chart-card.tsx
 const DOWN_FROM_ZERO = ["auto", 0];
 /** Values over an ordered axis as bars: one series, or several grouped or stacked. */
+const dimUnselected = (color, isSelected) => isSelected ? color : `color-mix(in oklab, ${color} 55%, var(--card))`;
+const signedFill = (color, isSelected) => `color-mix(in oklab, ${color} ${isSelected ? 35 : 15}%, var(--card))`;
 function BarChartCard({ stacked = false, selected = null, onSelect, ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: BarChart,
@@ -35,10 +37,15 @@ function BarChartCard({ stacked = false, selected = null, onSelect, ...props })
 					0,
 					0
 				] : 0,
-				children: (negativeColor || selected !== null) && props.data.map((row, i) => /* @__PURE__ */ jsx(Cell, {
-					fill: negativeColor && Number(row[key]) < 0 ? negativeColor : color,
-					fillOpacity: selected === null || row[props.xKey] === selected ? 1 : .35
-				}, i))
+				children: (negativeColor || selected !== null) && props.data.map((row, i) => {
+					const isSelected = selected === null || row[props.xKey] === selected;
+					const tone = negativeColor && Number(row[key]) < 0 ? negativeColor : color;
+					return negativeColor ? /* @__PURE__ */ jsx(Cell, {
+						fill: signedFill(tone, isSelected),
+						stroke: dimUnselected(tone, isSelected),
+						strokeWidth: 1.5
+					}, i) : /* @__PURE__ */ jsx(Cell, { fill: dimUnselected(tone, isSelected) }, i);
+				})
 			}, key);
 		})
 	});