@siyahi/ui 0.1.9-next.17 → 0.1.9-next.18

package/agents/examples/data-bar.tsx

@@ -0,0 +1,121 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataBar,
+  DataTable,
+  DataTableBody,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableSortHeader,
+  Sparkline,
+  useFormat,
+  type DataTableColumnDef,
+} from "@siyahi/ui";
+
+interface Holding {
+  symbol: string;
+  value: number;
+  gain: number;
+  /** Closing prices over the last ten sessions, oldest first. */
+  closes: number[];
+}
+
+const holdings: Holding[] = [
+  { symbol: "ITC", value: 276000, gain: -18400, closes: [478, 474, 470, 471, 466, 463, 465, 461, 459, 460] },
+  {
+    symbol: "HDFCBANK",
+    value: 262500,
+    gain: 21300,
+    closes: [1712, 1718, 1726, 1720, 1731, 1744, 1739, 1748, 1752, 1750],
+  },
+  {
+    symbol: "ICICIBANK",
+    value: 258000,
+    gain: 44100,
+    closes: [1250, 1262, 1258, 1271, 1266, 1280, 1284, 1279, 1288, 1290],
+  },
+  { symbol: "NIFTYBEES", value: 255600, gain: 12800, closes: [281, 282, 280, 283, 284, 283, 285, 284, 286, 284] },
+  { symbol: "INFY", value: 224400, gain: 30900, closes: [1820, 1834, 1829, 1841, 1852, 1848, 1860, 1855, 1866, 1870] },
+  { symbol: "TCS", value: 166000, gain: -2600, closes: [4180, 4172, 4165, 4170, 4158, 4150, 4161, 4155, 4148, 4150] },
+];
+
+// Each bar is a share of its column's largest figure, so the rows draw to one scale.
+const largestValue = Math.max(...holdings.map((h) => h.value));
+const largestGain = Math.max(...holdings.map((h) => Math.abs(h.gain)));
+
+function Money({ amount }: { amount: number }) {
+  return useFormat().money(amount);
+}
+
+const header = () => <DataTableSortHeader />;
+
+const columns: DataTableColumnDef<Holding>[] = [
+  { accessorKey: "symbol", header, size: 120, meta: { label: "Symbol" } },
+  {
+    accessorKey: "value",
+    header,
+    size: 170,
+    meta: { label: "Value", variant: "number" },
+    cell: ({ row }) => (
+      <DataBar value={row.original.value} max={largestValue}>
+        <Money amount={row.original.value} />
+      </DataBar>
+    ),
+  },
+  {
+    accessorKey: "gain",
+    header,
+    size: 170,
+    meta: { label: "Gain", variant: "number" },
+    cell: ({ row }) => (
+      <DataBar value={row.original.gain} max={largestGain} tone="sign">
+        <Money amount={row.original.gain} />
+      </DataBar>
+    ),
+  },
+  {
+    id: "closes",
+    header: "10 days",
+    size: 110,
+    enableSorting: false,
+    cell: ({ row }) => {
+      const { closes } = row.original;
+      const rising = (closes.at(-1) ?? 0) >= (closes[0] ?? 0);
+      return (
+        <Sparkline
+          data={closes}
+          variant="line"
+          color={rising ? "var(--positive)" : "var(--negative)"}
+          animate={false}
+          className="h-5 w-20"
+        />
+      );
+    },
+  },
+];
+
+export default function DataBarExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Holdings</CardTitle>
+        <CardDescription>Bars give each figure's size against the column's largest</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DataTableRoot
+          data={holdings}
+          columns={columns}
+          initialState={{ columnPinning: { start: ["symbol"], end: [] } }}
+        >
+          <DataTable>
+            <DataTableHeader />
+            <DataTableBody />
+          </DataTable>
+        </DataTableRoot>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/data-table-filters.tsx

@@ -0,0 +1,103 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  DataTableBody,
+  DataTableFacetedFilter,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableRowCount,
+  DataTableSearchFilter,
+  DataTableSortHeader,
+  DataTableToolbarSection,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  useDataTable,
+  type DataTableColumnDef,
+} from "@siyahi/ui";
+
+interface Holding {
+  symbol: string;
+  sector: string;
+  broker: string;
+}
+const data: Holding[] = [
+  { symbol: "INFY", sector: "Information technology", broker: "Kite" },
+  { symbol: "HDFCBANK", sector: "Banks", broker: "Dhan" },
+  { symbol: "TCS", sector: "Information technology", broker: "Dhan" },
+];
+const header = () => <DataTableSortHeader />;
+const columns: DataTableColumnDef<Holding>[] = [
+  { accessorKey: "symbol", header, size: 140, meta: { label: "Instrument" } },
+  { accessorKey: "sector", header, meta: { label: "Sector" } },
+  { accessorKey: "broker", header, meta: { label: "Broker" } },
+];
+
+function Filters() {
+  const { table, isCompact } = useDataTable<Holding>();
+  const active = table.state.columnFilters.length;
+  const controls = (
+    <div className="flex flex-wrap gap-2">
+      <DataTableFacetedFilter accessorKey="sector" title="Sector" />
+      <DataTableFacetedFilter accessorKey="broker" title="Broker" />
+    </div>
+  );
+  if (!isCompact) return controls;
+  return (
+    <Sheet>
+      <SheetTrigger render={<Button variant="outline" size="sm" />}>Filters{active ? ` (${active})` : ""}</SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Holding filters</SheetTitle>
+          <SheetDescription>Selections stay applied when this panel closes.</SheetDescription>
+        </SheetHeader>
+        <div className="overflow-y-auto px-4">{controls}</div>
+        <SheetFooter>
+          <Button variant="outline" disabled={!active} onClick={() => table.resetColumnFilters()}>
+            Clear filters
+          </Button>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function DataTableFiltersExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Holdings with compact filters</CardTitle>
+        <CardDescription>Search stays visible; secondary filters move into a panel in narrow space.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {/* The closed filter panel is absent at first render, so configure its features explicitly. */}
+        <DataTableRoot data={data} columns={columns} config={{ enableFilters: true, enableSorting: true }}>
+          <DataTableToolbarSection>
+            <DataTableSearchFilter
+              label="Search compact example"
+              placeholder="Search holdings…"
+              className="w-full sm:w-64"
+            />
+            <Filters />
+            <DataTableRowCount unit="holdings" />
+          </DataTableToolbarSection>
+          <DataTable aria-label="Holdings with compact filters">
+            <DataTableHeader />
+            <DataTableBody />
+          </DataTable>
+        </DataTableRoot>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/data-table.tsx

@@ -0,0 +1,98 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  DataTableBody,
+  DataTableFacetedFilter,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableRowCount,
+  DataTableSearchFilter,
+  DataTableSortHeader,
+  DataTableToolbarSection,
+  Delta,
+  useFormat,
+  type DataTableColumnDef,
+} from "@siyahi/ui";
+
+interface Holding {
+  symbol: string;
+  sector: string;
+  quantity: number;
+  value: number;
+  change: number;
+}
+
+const holdings: Holding[] = [
+  { symbol: "INFY", sector: "IT", quantity: 120, value: 224400, change: 0.018 },
+  { symbol: "HDFCBANK", sector: "Banks", quantity: 150, value: 262500, change: -0.006 },
+  { symbol: "TCS", sector: "IT", quantity: 40, value: 166000, change: 0.004 },
+  { symbol: "ITC", sector: "Fast Moving Consumer Goods", quantity: 600, value: 276000, change: -0.012 },
+  { symbol: "ICICIBANK", sector: "Banks", quantity: 200, value: 258000, change: 0.022 },
+  { symbol: "NIFTYBEES", sector: "ETF", quantity: 900, value: 255600, change: 0.009 },
+];
+
+// One click sorts largest (or Z) first; the title comes from meta.label.
+const header = () => <DataTableSortHeader />;
+
+function Money({ amount }: { amount: number }) {
+  return useFormat().money(amount);
+}
+
+const columns: DataTableColumnDef<Holding>[] = [
+  { accessorKey: "symbol", header, size: 140, meta: { label: "Symbol" } },
+  { accessorKey: "sector", header, size: 120, meta: { label: "Sector" } },
+  { accessorKey: "quantity", header, size: 100, meta: { label: "Qty", variant: "number" } },
+  {
+    accessorKey: "value",
+    header,
+    size: 140,
+    meta: { label: "Value", variant: "number" },
+    cell: ({ row }) => <Money amount={row.original.value} />,
+  },
+  {
+    accessorKey: "change",
+    header,
+    size: 110,
+    meta: { label: "Day", variant: "number" },
+    cell: ({ row }) => <Delta value={row.original.change} />,
+  },
+];
+
+export default function DataTableExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Holdings</CardTitle>
+        <CardDescription>
+          Search every column, filter by sector, sort any column in one click; the symbol stays put when the table
+          scrolls in wide panels. In narrow panels every column scrolls, leaving room for the values
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DataTableRoot
+          data={holdings}
+          columns={columns}
+          initialState={{ columnPinning: { start: ["symbol"], end: [] } }}
+        >
+          <DataTableToolbarSection>
+            <DataTableSearchFilter
+              placeholder="Search holdings…"
+              label="Filter holdings"
+              className="flex-none sm:w-64"
+            />
+            <DataTableFacetedFilter accessorKey="sector" title="Sector" />
+            <DataTableRowCount unit="holdings" />
+          </DataTableToolbarSection>
+          <DataTable aria-label="Holdings">
+            <DataTableHeader />
+            <DataTableBody />
+          </DataTable>
+        </DataTableRoot>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/delta.tsx

@@ -0,0 +1,13 @@
+import { Delta } from "@siyahi/ui";
+
+export default function DeltaExample() {
+  return (
+    <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>
+  );
+}

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 fills</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Fills for this sell</DialogTitle>
+          <DialogDescription>Each lot this sale was matched against, oldest 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,72 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Delta,
+  DistributionBar,
+  type DistributionSegment,
+} from "@siyahi/ui";
+
+// Each closed position's net realized, ₹; made-up figures.
+const positions = [
+  { name: "INFY", value: 61000 },
+  { name: "TCS", value: 38000 },
+  { name: "HDFCBANK", value: 17000 },
+  { name: "ITC", value: -26000 },
+  { name: "WIPRO", value: -14000 },
+  { name: "SBIN", value: -6000 },
+];
+const won = positions.filter((p) => p.value > 0).reduce((sum, p) => sum + p.value, 0);
+const lost = positions.filter((p) => p.value < 0).reduce((sum, p) => sum + p.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>The tug-of-war</CardTitle>
+        <CardDescription>Each closed position, losses left of break-even and gains right</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2">
+        <DistributionBar
+          min={-reach}
+          max={reach}
+          showLegend={false}
+          markers={[{ at: 0 }]}
+          highlighted={focus?.name ?? null}
+          onHover={setFocus}
+          segments={positions.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>
+            losers <Delta value={lost} format="money" />
+          </span>
+          <span className="text-center">break-even</span>
+          <span className="text-right">
+            winners <Delta value={won} format="money" />
+          </span>
+        </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 position.</p>
+        )}
+      </CardFooter>
+    </Card>
+  );
+}

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>Holding</DropdownMenuLabel>
+          <DropdownMenuItem>View lots</DropdownMenuItem>
+          <DropdownMenuItem>Export CSV</DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive">Hide</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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 className="text-right">{count(153110)}</TableCell>
+      <TableCell className="text-right">{money(153110)}</TableCell>
+      <TableCell className="text-right">{moneyCompact(99999)}</TableCell>
+      <TableCell className="text-right">{moneyCompact(240000)}</TableCell>
+      <TableCell className="text-right">{moneyCompact(400000000)}</TableCell>
+      <TableCell className="text-right">{pct(0.1234)}</TableCell>
+      <TableCell className="text-right">{time("2026-10-20T09:00:00Z")}</TableCell>
+    </TableRow>
+  );
+}
+
+export default function FormattersExample() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Locale</TableHead>
+          <TableHead className="text-right">count</TableHead>
+          <TableHead className="text-right">money</TableHead>
+          <TableHead className="text-right">moneyCompact</TableHead>
+          <TableHead className="text-right">moneyCompact</TableHead>
+          <TableHead className="text-right">moneyCompact</TableHead>
+          <TableHead className="text-right">pct</TableHead>
+          <TableHead className="text-right">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.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import {
+  CalendarHeatmap,
+  CalendarHeatmapBlock,
+  CalendarHeatmapBody,
+  useFormat,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@siyahi/ui";
+
+// A year of trading days with a count of trades 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 };
+});
+
+export default function HeatmapCalendarExample() {
+  const [selected, setSelected] = useState<string | null>(null);
+  const { count } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Trades per day</CardTitle>
+        <CardDescription>Counts use a single-hue fade of --chart-1</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <CalendarHeatmap data={data}>
+          <CalendarHeatmapBody>
+            {({ activity, dayIndex, weekIndex }) => (
+              <CalendarHeatmapBlock
+                activity={activity}
+                dayIndex={dayIndex}
+                weekIndex={weekIndex}
+                onCellClick={(cell) => setSelected(`${cell.date}: ${count(cell.value)} trades`)}
+              />
+            )}
+          </CalendarHeatmapBody>
+        </CalendarHeatmap>
+        <p aria-live="polite" className="mt-3 text-sm">
+          {selected ?? "Select a day for its trade count. Use arrow keys to move between days."}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/heatmap-status.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  StatusHeatmap,
+  StatusHeatmapBlock,
+  StatusHeatmapBody,
+} 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).
+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);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Price feed</CardTitle>
+        <CardDescription>Daily health: healthy, degraded or critical</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <StatusHeatmap data={data}>
+          <StatusHeatmapBody>
+            {({ activity, dayIndex }) => (
+              <StatusHeatmapBlock
+                activity={activity}
+                dayIndex={dayIndex}
+                onCellClick={(cell) =>
+                  setSelected(
+                    `${cell.date}: ${["unknown", "critical", "degraded", "healthy"][cell.value] ?? "unknown"}`,
+                  )
+                }
+              />
+            )}
+          </StatusHeatmapBody>
+        </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>
+  );
+}