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

package/agents/examples/heatmap-weekday.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import {
+  useFormat,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  WeekdayHeatmap,
+  WeekdayHeatmapBlock,
+  WeekdayHeatmapBody,
+} from "@siyahi/ui";
+
+// Orders placed by weekday and hour of the trading session.
+const data = [1, 2, 3, 4, 5].flatMap((weekday) =>
+  [9, 10, 11, 12, 13, 14, 15].map((hour) => ({
+    weekday,
+    hour,
+    value: ((weekday * 5 + hour * 3) % 9) + (hour === 9 ? 6 : 0),
+  })),
+);
+
+export default function HeatmapWeekdayExample() {
+  const [selected, setSelected] = useState<string | null>(null);
+  const { count } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>When orders are placed</CardTitle>
+        <CardDescription>Weekday by hour in India Standard Time, market hours only</CardDescription>
+      </CardHeader>
+      <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`,
+                  )
+                }
+              />
+            )}
+          </WeekdayHeatmapBody>
+        </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.tsx

@@ -0,0 +1,17 @@
+import { Input, InputGroup, InputGroupAddon, InputGroupInput, Textarea } from "@siyahi/ui";
+import { SearchIcon } from "lucide-react";
+
+export default function InputExample() {
+  return (
+    <div className="flex max-w-sm flex-col gap-3">
+      <Input placeholder="Folio number" aria-label="Folio number" />
+      <InputGroup>
+        <InputGroupAddon>
+          <SearchIcon />
+        </InputGroupAddon>
+        <InputGroupInput placeholder="Search symbols" aria-label="Search symbols" />
+      </InputGroup>
+      <Textarea placeholder="Note for this trade" aria-label="Note" />
+    </div>
+  );
+}

package/agents/examples/local-time.tsx

@@ -0,0 +1,14 @@
+import { LocalTime } from "@siyahi/ui";
+
+export default function LocalTimeExample() {
+  return (
+    <>
+      <p>
+        Prices as of <LocalTime value="2026-10-20T10:00:00Z" />. Hover the time to see it on your own clock.
+      </p>
+      <p>
+        Daily snapshot of <LocalTime value="2026-06-26T04:11:00Z" withDate />.
+      </p>
+    </>
+  );
+}

package/agents/examples/metric-strip.tsx

@@ -0,0 +1,40 @@
+import { MetricStrip, ToggleGroup, ToggleGroupItem, useFormat, type MetricStripItem } from "@siyahi/ui";
+
+export default function MetricStripExample() {
+  const { money, moneyCompact, pct, count } = useFormat();
+  // trend is each figure's month-end run, oldest first.
+  const items: MetricStripItem[] = [
+    {
+      label: "Portfolio value",
+      value: money(4512300),
+      change: 0.031,
+      note: "vs Sep",
+      trend: [3820000, 3950000, 4110000, 4020000, 4380000, 4512300],
+    },
+    {
+      label: "Invested",
+      value: moneyCompact(4025000),
+      change: 85000,
+      changeFormat: "money",
+      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: "Dividends", value: moneyCompact(38400), change: 0.18, trend: [4100, 0, 12800, 3300, 9900, 8300] },
+    { label: "Holdings", value: count(42), note: "3 bought in Oct" },
+  ];
+  return (
+    <MetricStrip
+      title="October"
+      description="Month-end figures with the six-month run behind each"
+      action={
+        <ToggleGroup defaultValue={["1M"]} variant="outline" size="sm" aria-label="Period">
+          <ToggleGroupItem value="1M">1M</ToggleGroupItem>
+          <ToggleGroupItem value="1Y">1Y</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      items={items}
+      footer={<p className="text-muted-foreground">Valued at the last close, 31 Oct 2026</p>}
+    />
+  );
+}

package/agents/examples/page-section.tsx

@@ -0,0 +1,52 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  DataList,
+  DataListItem,
+  InlineCode,
+  PageSection,
+  PageSubheading,
+} from "@siyahi/ui";
+import { ArrowDownIcon } from "lucide-react";
+
+export default function PageSectionExample() {
+  return (
+    <PageSection
+      id="toolkit"
+      eyebrow="Part 2"
+      title="The toolkit"
+      lead={
+        <p>
+          One command, <InlineCode>vp</InlineCode>, builds, tests and lints; it replaces the separate config of each.
+        </p>
+      }
+      action={
+        <Button variant="outline" size="sm">
+          <ArrowDownIcon data-icon="inline-start" />
+          Skip to the commands
+        </Button>
+      }
+    >
+      <PageSubheading>What each tool does</PageSubheading>
+      <Card>
+        <CardHeader>
+          <CardTitle>Vite+</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DataList>
+            <DataListItem label="In Java terms">Maven, the compiler plugin and Surefire in one binary.</DataListItem>
+            <DataListItem label="How it is set up">
+              One <InlineCode>vite.config.ts</InlineCode> at the root of the repo.
+            </DataListItem>
+            <DataListItem label="Remember">
+              <InlineCode>vp check</InlineCode>
+            </DataListItem>
+          </DataList>
+        </CardContent>
+      </Card>
+    </PageSection>
+  );
+}

package/agents/examples/popover.tsx

@@ -0,0 +1,23 @@
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "@siyahi/ui";
+
+export default function PopoverExample() {
+  return (
+    <Popover>
+      <PopoverTrigger render={<Button variant="outline" className="w-fit" />}>How is this priced?</PopoverTrigger>
+      <PopoverContent align="start">
+        <PopoverHeader>
+          <PopoverTitle>Last close</PopoverTitle>
+          <PopoverDescription>Holdings are valued at the exchange's last closing price.</PopoverDescription>
+        </PopoverHeader>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/agents/examples/price-chart.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, PriceChart } from "@siyahi/ui";
+
+// A made-up daily close series for one year.
+const data = Array.from({ length: 250 }, (_, i) => {
+  const day = new Date(Date.UTC(2025, 9, 20 + Math.floor((i * 7) / 5)));
+  return { time: day.toISOString().slice(0, 10), value: 1500 + i * 1.2 + Math.sin(i / 9) * 60 + Math.sin(i / 3) * 18 };
+});
+
+export default function PriceChartExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>INFY</CardTitle>
+        <CardDescription>Daily close, one year</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <PriceChart data={data} height={256} />
+      </CardContent>
+      <CardFooter className="text-xs text-muted-foreground">
+        <span>
+          Chart by{" "}
+          <a
+            className="text-link underline-offset-4 hover:underline"
+            href="https://www.tradingview.com/lightweight-charts/"
+          >
+            TradingView Lightweight Charts
+          </a>
+        </span>
+      </CardFooter>
+    </Card>
+  );
+}

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/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,27 @@
+import { Delta, SectionCards, 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 (
+    <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>
+  );
+}

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,115 @@
+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>("ruled");
+  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"
+      >
+        <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}>
+        <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>
+  );
+}