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

package/agents/examples/chart-line-timeline.tsx

@@ -0,0 +1,41 @@
+import { LineChartCard, type ChartSeries } from "@siyahi/ui";
+
+// A sar sample every 10 minutes from 15:00; the numbers are made up for the catalogue.
+const data = [
+  { minute: 0, used: 4.1, anon: 2.9 },
+  { minute: 10, used: 4.3, anon: 3.1 },
+  { minute: 20, used: 4.6, anon: 3.4 },
+  { minute: 30, used: 5.2, anon: 4.2 },
+  { minute: 40, used: 7.8, anon: 7.1 },
+  { minute: 50, used: 8.1, anon: 7.6 },
+  { minute: 60, used: 6.2, anon: 5.3 },
+  { minute: 70, used: 4.4, anon: 3.2 },
+];
+
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "used", label: "Used", color: "var(--chart-1)" },
+  { key: "anon", label: "Anon", color: "var(--chart-2)" },
+];
+
+const clock = (minute: number) => `${Math.floor(15 + minute / 60)}:${String(minute % 60).padStart(2, "0")}`;
+
+export default function ChartLineTimelineExample() {
+  return (
+    <LineChartCard
+      title="Memory in use, GiB"
+      description="sar -r. Used excludes cache; anon is program memory."
+      data={data}
+      xKey="minute"
+      // Ticks on both ends of the domain: the first sits at the plot's left edge.
+      xDomain={[0, 70]}
+      xTicks={[0, 10, 20, 30, 40, 50, 60, 70]}
+      xFormatter={clock}
+      xTooltipFormatter={(minute) => `${clock(minute)} IST, 10-min average`}
+      series={series}
+      valueFormatter={(v) => v.toFixed(1)}
+      yTickFormatter={(v) => v.toFixed(0)}
+      curve="linear"
+      height={192}
+    />
+  );
+}

package/agents/examples/chart-line.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { LineChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+const cumulative = [
+  { month: "May", portfolio: 0.012, index: 0.008 },
+  { month: "Jun", portfolio: 0.021, index: 0.015 },
+  { month: "Jul", portfolio: 0.034, index: 0.029 },
+  { month: "Aug", portfolio: -0.006, index: 0.004 },
+  { month: "Sep", portfolio: 0.041, index: 0.031 },
+  { month: "Oct", portfolio: 0.052, index: 0.036 },
+];
+
+const monthly = [
+  { month: "May", portfolio: 0.012, index: 0.008 },
+  { month: "Jun", portfolio: 0.009, index: 0.007 },
+  { month: "Jul", portfolio: 0.013, index: 0.014 },
+  { month: "Aug", portfolio: -0.039, index: -0.024 },
+  { month: "Sep", portfolio: 0.047, index: 0.027 },
+  { month: "Oct", portfolio: 0.011, index: 0.005 },
+];
+
+const series: ChartSeries<(typeof cumulative)[number]> = [
+  { key: "portfolio", label: "Portfolio", color: "var(--chart-1)" },
+  { key: "index", label: "Nifty 50", color: "var(--chart-2)" },
+];
+
+export default function ChartLineExample() {
+  const { pct } = useFormat();
+  const [mode, setMode] = useState("cumulative");
+  return (
+    <LineChartCard
+      title="Return against the index"
+      description={mode === "cumulative" ? "Cumulative, from the start of May" : "Each month on its own"}
+      action={
+        <ToggleGroup
+          value={[mode]}
+          onValueChange={([next]) => {
+            // Pressing the selected mode again would leave none selected; keep it.
+            if (next) setMode(next);
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Mode"
+        >
+          <ToggleGroupItem value="cumulative">Cumulative return</ToggleGroupItem>
+          <ToggleGroupItem value="monthly">Monthly return</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      data={mode === "cumulative" ? cumulative : monthly}
+      xKey="month"
+      series={series}
+      // A formatter goes in as it is: the card calls it with the value alone.
+      valueFormatter={pct}
+      height={256}
+    />
+  );
+}

package/agents/examples/code-block.tsx

@@ -0,0 +1,38 @@
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockHeader,
+  CodeBlockTitle,
+} from "@siyahi/ui";
+
+const CHECK = "openssl s_client -connect example.com:443 -servername example.com -showcerts </dev/null";
+
+const LOG = Array.from(
+  { length: 24 },
+  (_, i) =>
+    `19:${String(33 + Math.floor(i / 4)).padStart(2, "0")}:${String((i * 15) % 60).padStart(2, "0")}  memory.pressure some avg10=${(12 + i * 3.1).toFixed(2)}`,
+).join("\n");
+
+export default function CodeBlockExample() {
+  return (
+    <div className="flex flex-col gap-4">
+      <CodeBlock>
+        <CodeBlockHeader>
+          <CodeBlockTitle>Show the chain a server sends</CodeBlockTitle>
+          <CodeBlockActions>
+            <CodeBlockCopyButton value={CHECK} />
+          </CodeBlockActions>
+        </CodeBlockHeader>
+        <CodeBlockContent wrap>{CHECK}</CodeBlockContent>
+      </CodeBlock>
+      <CodeBlock size="sm">
+        <CodeBlockActions>
+          <CodeBlockCopyButton value={LOG} />
+        </CodeBlockActions>
+        <CodeBlockContent className="max-h-48">{LOG}</CodeBlockContent>
+      </CodeBlock>
+    </div>
+  );
+}

package/agents/examples/collapsible.tsx

@@ -0,0 +1,16 @@
+import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@siyahi/ui";
+import { ChevronsUpDownIcon } from "lucide-react";
+
+export default function CollapsibleExample() {
+  return (
+    <Collapsible className="flex max-w-sm flex-col gap-2">
+      <CollapsibleTrigger render={<Button variant="outline" className="w-fit" />}>
+        <ChevronsUpDownIcon />
+        How lots are matched
+      </CollapsibleTrigger>
+      <CollapsibleContent className="text-muted-foreground">
+        Sells are matched to the oldest buy first, as the tax rules require.
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/agents/examples/command.tsx

@@ -0,0 +1,27 @@
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@siyahi/ui";
+import { ChartLineIcon, LandmarkIcon, WalletIcon } from "lucide-react";
+
+export default function CommandExample() {
+  return (
+    <Command className="rounded-lg border">
+      <CommandInput placeholder="Jump to a page" />
+      <CommandList>
+        <CommandEmpty>No page matches.</CommandEmpty>
+        <CommandGroup heading="Pages">
+          <CommandItem>
+            <WalletIcon />
+            Holdings
+          </CommandItem>
+          <CommandItem>
+            <ChartLineIcon />
+            Realized
+          </CommandItem>
+          <CommandItem>
+            <LandmarkIcon />
+            Cash flow
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}

package/agents/examples/context-menu.tsx

@@ -0,0 +1,15 @@
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@siyahi/ui";
+
+export default function ContextMenuExample() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-24 w-full items-center justify-center rounded-lg border border-dashed text-muted-foreground">
+        Right-click or long-press here
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Copy symbol</ContextMenuItem>
+        <ContextMenuItem>Open chart</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/agents/examples/copy-button.tsx

@@ -0,0 +1,8 @@
+import { CopyButton } from "@siyahi/ui";
+
+// Every command on a setup page, for a reader who wants them all at once.
+const ALL = ["brew install node@24", "corepack enable", "pnpm install"].join("\n");
+
+export default function CopyButtonExample() {
+  return <CopyButton value={ALL} label="Copy all" />;
+}

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-compact.tsx

@@ -0,0 +1,95 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  DataTableBody,
+  DataTableCompactColumnsToggle,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableRowCount,
+  DataTableSortHeader,
+  DataTableToolbarSection,
+  Delta,
+  useDataTable,
+  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 },
+];
+
+const header = () => <DataTableSortHeader />;
+
+// While the Day column is hidden to fit, the day's move rides under the value it belongs to.
+function ValueCell({ holding }: { holding: Holding }) {
+  const format = useFormat();
+  const { compactColumns } = useDataTable<Holding>();
+  if (!compactColumns?.hidden.has("change")) return format.money(holding.value);
+  return (
+    <div className="flex flex-col items-end">
+      {format.money(holding.value)}
+      <Delta value={holding.change} />
+    </div>
+  );
+}
+
+const columns: DataTableColumnDef<Holding>[] = [
+  { accessorKey: "symbol", header, size: 140, meta: { label: "Symbol", compact: true } },
+  { 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", compact: true },
+    cell: ({ row }) => <ValueCell holding={row.original} />,
+  },
+  {
+    accessorKey: "change",
+    header,
+    size: 110,
+    meta: { label: "Day", variant: "number" },
+    cell: ({ row }) => <Delta value={row.original.change} />,
+  },
+];
+
+export default function DataTableCompactExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Holdings on a phone</CardTitle>
+        <CardDescription>
+          Symbol and value are the key columns. When the columns do not fit, the others hide from the right, and the
+          day's move rides under the value once its column is gone; All columns brings back the rest
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DataTableRoot data={holdings} columns={columns}>
+          <DataTableToolbarSection>
+            <DataTableCompactColumnsToggle />
+            <DataTableRowCount unit="holdings" />
+          </DataTableToolbarSection>
+          <DataTable aria-label="Holdings on a phone">
+            <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 flex-none 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>
+  );
+}