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

package/agents/examples/progress-tone.tsx

@@ -0,0 +1,28 @@
+import { ToneProgress, useFormat } from "@siyahi/ui";
+
+const positions = [
+  { symbol: "INFY", realized: 84200, share: 0.41 },
+  { symbol: "ITC", realized: -61200, share: 0.3 },
+  { symbol: "TCS", realized: 21000, share: 0.1 },
+];
+
+export default function ProgressToneExample() {
+  const { pct } = useFormat();
+  return (
+    <div className="flex max-w-sm flex-col gap-3 text-sm">
+      {positions.map((p) => (
+        <div key={p.symbol} className="flex items-center gap-3">
+          <span className="w-16 font-medium">{p.symbol}</span>
+          <ToneProgress
+            tone={p.realized >= 0 ? "positive" : "negative"}
+            value={p.share * 100}
+            aria-label={`${p.symbol}'s share of the booked P&L`}
+            getAriaValueText={() => pct(p.share)}
+            className="w-24"
+          />
+          <span className="tabular-nums">{pct(p.share)}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/agents/examples/progress.tsx

@@ -0,0 +1,10 @@
+import { Progress, ProgressLabel, ProgressValue } from "@siyahi/ui";
+
+export default function ProgressExample() {
+  return (
+    <Progress value={64} className="max-w-sm">
+      <ProgressLabel>Statements imported</ProgressLabel>
+      <ProgressValue />
+    </Progress>
+  );
+}

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/scroll-area.tsx

@@ -0,0 +1,20 @@
+import { ScrollArea, Separator } from "@siyahi/ui";
+
+const months = Array.from({ length: 24 }, (_, i) =>
+  new Date(2025, i, 1).toLocaleString("en-IN", { month: "long", year: "numeric" }),
+);
+
+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>
+  );
+}

package/agents/examples/section-cards-select.tsx

@@ -0,0 +1,30 @@
+import { Delta, SectionCards, SiyahiProvider, useFormat, type SectionCard } from "@siyahi/ui";
+import { useState } from "react";
+
+const classes = [
+  { label: "All", net: 110200, positions: 181 },
+  { label: "Equity", net: 171400, positions: 164 },
+  { label: "Gold bonds", net: 0, positions: 0 },
+  { label: "F&O", net: -61200, positions: 17 },
+];
+
+export default function SectionCardsSelectExample() {
+  const [scope, setScope] = useState("All");
+  const { count } = useFormat();
+  const items: SectionCard[] = classes.map((c) => ({
+    label: c.label,
+    value: <Delta value={c.net} format="money" />,
+    detail: `${count(c.positions)} positions`,
+    // Nothing to show for a class with no positions, so it cannot be picked.
+    disabled: c.positions === 0,
+  }));
+  return (
+    // 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/section-cards-trend.tsx

@@ -0,0 +1,30 @@
+import { Delta, SectionCards, Sparkline, useFormat, type SectionCard } from "@siyahi/ui";
+
+export default function SectionCardsTrendExample() {
+  const { money, moneyCompact } = useFormat();
+  const items: SectionCard[] = [
+    {
+      label: "Portfolio value",
+      value: money(4512300),
+      badge: <Delta value={0.031} />,
+      trend: <Sparkline data={[3820000, 3950000, 4110000, 4020000, 4380000, 4512300]} />,
+      detail: "Month-end, last six months",
+    },
+    {
+      label: "Realised this year",
+      value: moneyCompact(-61200),
+      badge: <Delta value={-61200} format="money" />,
+      // A run of losses: the meaning colour, not a chart slot.
+      trend: <Sparkline data={[0, -8200, -14100, -30400, -52800, -61200]} color="var(--negative)" />,
+      detail: "Running total since April",
+    },
+    {
+      label: "Dividends this year",
+      value: moneyCompact(38400),
+      badge: <Delta value={0.18} />,
+      trend: <Sparkline data={[4100, 0, 12800, 3300, 9900, 8300]} variant="line" curve="linear" />,
+      detail: "Credited each month",
+    },
+  ];
+  return <SectionCards items={items} />;
+}

package/agents/examples/section-cards.tsx

@@ -0,0 +1,48 @@
+import { Delta, SectionCards, type SectionCard, useFormat } from "@siyahi/ui";
+
+export default function SectionCardsExample() {
+  const { money, moneyCompact } = useFormat();
+  const items: SectionCard[] = [
+    {
+      label: "Portfolio value",
+      value: money(4512300),
+      badge: <Delta value={0.031} />,
+      headline: "Up for the third month",
+      detail: "Valued at the last close",
+    },
+    {
+      label: "Invested",
+      value: money(4025000),
+      headline: "SIPs on the 5th and 20th",
+      detail: "Across 4 accounts",
+    },
+    {
+      label: "Unrealised gain",
+      value: moneyCompact(487300),
+      badge: <Delta value={0.121} />,
+      headline: "XIRR 14.2%",
+      detail: "Since the first buy",
+    },
+    {
+      label: "Realised this year",
+      value: moneyCompact(-61200),
+      badge: <Delta value={-61200} format="money" />,
+      headline: "Two loss-making exits",
+      detail: "Before tax",
+    },
+    {
+      label: "Dividends this year",
+      value: moneyCompact(38400),
+      badge: <Delta value={0.18} />,
+      headline: "From 11 holdings",
+      detail: "Credited to the bank",
+    },
+  ];
+  return (
+    <div className="flex flex-col gap-6">
+      <SectionCards items={items.slice(0, 3)} />
+      <SectionCards items={items.slice(0, 4)} />
+      <SectionCards items={items} />
+    </div>
+  );
+}

package/agents/examples/select.tsx

@@ -0,0 +1,27 @@
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@siyahi/ui";
+
+const accounts = [
+  { label: "All accounts", value: "all" },
+  { label: "Equity", value: "equity" },
+  { label: "Mutual funds", value: "funds" },
+  { label: "Bonds", value: "bonds" },
+];
+
+export default function SelectExample() {
+  return (
+    <Select items={accounts} defaultValue="all">
+      <SelectTrigger className="w-48">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {accounts.map((account) => (
+            <SelectItem key={account.value} value={account.value}>
+              {account.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}

package/agents/examples/separator.tsx

@@ -0,0 +1,13 @@
+import { Separator } from "@siyahi/ui";
+
+export default function SeparatorExample() {
+  return (
+    <div className="flex h-6 items-center gap-4 text-sm">
+      <span>Equity</span>
+      <Separator orientation="vertical" />
+      <span>Debt</span>
+      <Separator orientation="vertical" />
+      <span>Gold</span>
+    </div>
+  );
+}

package/agents/examples/sheet.tsx

@@ -0,0 +1,15 @@
+import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@siyahi/ui";
+
+export default function SheetExample() {
+  return (
+    <Sheet>
+      <SheetTrigger render={<Button variant="outline" className="w-fit" />}>Filters</SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Filters</SheetTitle>
+          <SheetDescription>Narrow the ledger by account, symbol or date.</SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/agents/examples/skeleton.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@siyahi/ui";
+
+export default function SkeletonExample() {
+  return (
+    <div className="flex max-w-sm flex-col gap-2">
+      <Skeleton className="h-4 w-32" />
+      <Skeleton className="h-8 w-48" />
+      <Skeleton className="h-4 w-full" />
+    </div>
+  );
+}

package/agents/examples/slider.tsx

@@ -0,0 +1,5 @@
+import { Slider } from "@siyahi/ui";
+
+export default function SliderExample() {
+  return <Slider defaultValue={[20, 80]} max={100} step={5} aria-label="Allocation band" className="max-w-sm" />;
+}

package/agents/examples/surfaces.tsx

@@ -0,0 +1,116 @@
+import {
+  BarChartCard,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  MetricStrip,
+  PanelGrid,
+  SiyahiProvider,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  ToggleGroup,
+  ToggleGroupItem,
+  useFormat,
+  type MetricStripItem,
+  type Surface,
+} from "@siyahi/ui";
+import { useState } from "react";
+
+const orders = [
+  { hour: 9, orders: 42 },
+  { hour: 10, orders: 31 },
+  { hour: 11, orders: 18 },
+  { hour: 12, orders: 12 },
+  { hour: 13, orders: 15 },
+  { hour: 14, orders: 24 },
+  { hour: 15, orders: 38 },
+];
+
+const holdings = [
+  { symbol: "ITC", value: 276000 },
+  { symbol: "INFY", value: 224400 },
+  { symbol: "TCS", value: 166000 },
+];
+
+function Dashboard() {
+  const { money, moneyCompact, pct } = useFormat();
+  const kpis: MetricStripItem[] = [
+    { label: "Portfolio value", value: money(4512300), change: 0.031 },
+    { label: "Invested", value: moneyCompact(4025000), change: 85000, changeFormat: "money" },
+    { label: "XIRR", value: pct(0.142), change: -0.004 },
+    { label: "Realised", value: moneyCompact(-61200), change: -61200, changeFormat: "money" },
+  ];
+  return (
+    <div className="flex flex-col gap-6">
+      <MetricStrip items={kpis} />
+      <PanelGrid>
+        <BarChartCard
+          title="Orders by hour"
+          description="Today, IST"
+          data={orders}
+          xKey="hour"
+          xFormatter={(hour) => `${String(hour).padStart(2, "0")}:00`}
+          series={[{ key: "orders", label: "Orders", color: "var(--chart-1)" }]}
+          height={200}
+        />
+        <Card>
+          <CardHeader>
+            <CardTitle>Holdings</CardTitle>
+            <CardDescription>Largest three</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Symbol</TableHead>
+                  <TableHead>Value</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {holdings.map((row) => (
+                  <TableRow key={row.symbol}>
+                    <TableCell className="font-mono">{row.symbol}</TableCell>
+                    <TableCell className="tabular-nums">{money(row.value)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </PanelGrid>
+    </div>
+  );
+}
+
+export default function SurfacesExample() {
+  const [surface, setSurface] = useState<Surface>("card");
+  return (
+    <div className="flex flex-col gap-4">
+      <ToggleGroup
+        value={[surface]}
+        onValueChange={([next]) => {
+          // Pressing the selected surface again would leave none selected; keep it.
+          if (next) setSurface(next as Surface);
+        }}
+        variant="outline"
+        size="sm"
+        aria-label="Surface"
+      >
+        {/* The default first. */}
+        <ToggleGroupItem value="card">Card</ToggleGroupItem>
+        <ToggleGroupItem value="ruled">Ruled</ToggleGroupItem>
+        <ToggleGroupItem value="open">Open</ToggleGroupItem>
+      </ToggleGroup>
+      {/* A nested provider sets the surface for its part of the page. */}
+      <SiyahiProvider surface={surface}>
+        <Dashboard />
+      </SiyahiProvider>
+    </div>
+  );
+}

package/agents/examples/table.tsx

@@ -0,0 +1,50 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  useFormat,
+} from "@siyahi/ui";
+
+const rows = [
+  { month: "July", in: 85000, out: 12000 },
+  { month: "August", in: 85000, out: 64000 },
+  { month: "September", in: 92000, out: 8000 },
+];
+
+export default function TableExample() {
+  const { money } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Cash flow</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Month</TableHead>
+              <TableHead className="text-right">In</TableHead>
+              <TableHead className="text-right">Out</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow key={row.month}>
+                <TableCell>{row.month}</TableCell>
+                <TableCell className="text-right">{money(row.in)}</TableCell>
+                <TableCell className="text-right">{money(row.out)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/tabs.tsx

@@ -0,0 +1,16 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@siyahi/ui";
+
+export default function TabsExample() {
+  return (
+    <Tabs defaultValue="holdings">
+      <TabsList>
+        <TabsTrigger value="holdings">Holdings</TabsTrigger>
+        <TabsTrigger value="realized">Realized</TabsTrigger>
+        <TabsTrigger value="cash">Cash flow</TabsTrigger>
+      </TabsList>
+      <TabsContent value="holdings">What you own today, valued at the last close.</TabsContent>
+      <TabsContent value="realized">Gains and losses booked by selling.</TabsContent>
+      <TabsContent value="cash">Money in and out of every account.</TabsContent>
+    </Tabs>
+  );
+}

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/toggle-group.tsx

@@ -0,0 +1,12 @@
+import { ToggleGroup, ToggleGroupItem } from "@siyahi/ui";
+
+export default function ToggleGroupExample() {
+  return (
+    <ToggleGroup defaultValue={["1Y"]} variant="outline" size="sm" aria-label="Range">
+      <ToggleGroupItem value="1M">1M</ToggleGroupItem>
+      <ToggleGroupItem value="6M">6M</ToggleGroupItem>
+      <ToggleGroupItem value="1Y">1Y</ToggleGroupItem>
+      <ToggleGroupItem value="All">All</ToggleGroupItem>
+    </ToggleGroup>
+  );
+}