@siyahi/ui 0.1.9-next.3 → 0.1.9-next.31

package/agents/examples/input-states.tsx

@@ -0,0 +1,23 @@
+import { Field, FieldDescription, FieldError, FieldLabel, Input } from "@siyahi/ui";
+
+// A field is its label, the input and one line under it: a hint, or the error that replaces it.
+export default function InputStatesExample() {
+  return (
+    <div className="grid max-w-sm gap-5">
+      <Field>
+        <FieldLabel htmlFor="budget">Monthly budget</FieldLabel>
+        <Input id="budget" inputMode="numeric" defaultValue="25,000" aria-describedby="budget-hint" />
+        <FieldDescription id="budget-hint">In rupees, before tax</FieldDescription>
+      </Field>
+      <Field data-invalid>
+        <FieldLabel htmlFor="pin">PIN code</FieldLabel>
+        <Input id="pin" defaultValue="56/001" aria-invalid aria-describedby="pin-error" />
+        <FieldError id="pin-error">A PIN code is six digits, such as 560001</FieldError>
+      </Field>
+      <Field data-disabled>
+        <FieldLabel htmlFor="team">Team</FieldLabel>
+        <Input id="team" defaultValue="Finance" disabled />
+      </Field>
+    </div>
+  );
+}

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="Order number" aria-label="Order number" />
+      <InputGroup>
+        <InputGroupAddon>
+          <SearchIcon />
+        </InputGroupAddon>
+        <InputGroupInput placeholder="Search customers" aria-label="Search customers" />
+      </InputGroup>
+      <Textarea placeholder="Note for this order" 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>
+        Figures 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,46 @@
+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: "Revenue",
+      value: money(4512300),
+      change: 0.031,
+      note: "against September",
+      trend: [3820000, 3950000, 4110000, 4020000, 4380000, 4512300],
+    },
+    {
+      label: "Target",
+      value: moneyCompact(4025000),
+      change: 85000,
+      changeFormat: "money",
+      trend: [3600000, 3685000, 3770000, 3855000, 3940000, 4025000],
+    },
+    { label: "Gross margin", value: pct(0.142), change: -0.004, trend: [0.151, 0.149, 0.152, 0.144, 0.146, 0.142] },
+    {
+      label: "Cash flow",
+      value: moneyCompact(-61200),
+      change: -61200,
+      changeFormat: "money",
+      trend: [14200, -3800, 9100, 2600, -18400, -61200],
+    },
+    { label: "Gift cards", value: moneyCompact(38400), change: 0.18, trend: [4100, 0, 12800, 3300, 9900, 8300] },
+    { label: "Products", value: count(42), note: "3 added in Oct", trend: [38, 39, 39, 40, 39, 42] },
+  ];
+  return (
+    <MetricStrip
+      title="Revenue up 3.1% in 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">Booked up to 31 Oct 2026</p>}
+    />
+  );
+}

package/agents/examples/overview-dashboard.tsx

@@ -0,0 +1,180 @@
+import {
+  Badge,
+  Button,
+  Callout,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Delta,
+  Input,
+  PageHero,
+  PanelGrid,
+  StatusBadge,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  ToggleGroup,
+  ToggleGroupItem,
+  useFormat,
+} from "@siyahi/ui";
+import { DownloadIcon, LightbulbIcon, PlusIcon } from "lucide-react";
+import { useState } from "react";
+import ChartArea from "./chart-area";
+import SectionCardsTrend from "./section-cards-trend";
+
+interface Holding {
+  name: string;
+  kind: string;
+  status: string;
+  tone: "positive" | "warning" | "negative";
+  value: number;
+  change: number;
+}
+
+const holdings: Holding[] = [
+  { name: "Nifty 50 index fund", kind: "Equity", status: "On track", tone: "positive", value: 1840000, change: 0.124 },
+  { name: "Flexi cap fund", kind: "Equity", status: "On track", tone: "positive", value: 962000, change: 0.087 },
+  { name: "Gold bonds, 2031", kind: "Gold", status: "Needs review", tone: "warning", value: 410500, change: 0.211 },
+  { name: "Short-term debt fund", kind: "Debt", status: "On track", tone: "positive", value: 655000, change: 0.031 },
+  { name: "Small cap fund", kind: "Equity", status: "Below plan", tone: "negative", value: 318200, change: -0.064 },
+];
+
+// The catalogue's own ink drop, painted with currentColor so the masthead 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>
+  );
+}
+
+function Holdings({ rows }: { rows: Holding[] }) {
+  const { money, pct } = useFormat();
+  const total = rows.reduce((sum, row) => sum + row.value, 0);
+  // The change of the whole: today's total against what the same holdings were worth a year ago.
+  const yearAgo = rows.reduce((sum, row) => sum + row.value / (1 + row.change), 0);
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Holdings</CardTitle>
+        <CardDescription>Value today and change over twelve months</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Holding</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead data-numeric>Value</TableHead>
+              <TableHead data-numeric>Change over 12 months</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={4}>
+                  <span className="text-muted-foreground">No holding matches the search.</span>
+                </TableCell>
+              </TableRow>
+            )}
+            {rows.map((row) => (
+              // Only the holdings that need a look are marked; a row on track stays plain.
+              <TableRow key={row.name} data-tone={row.tone === "positive" ? undefined : row.tone}>
+                <TableCell>
+                  <span className="flex flex-wrap items-center gap-2">
+                    {row.name}
+                    <Badge variant="outline">{row.kind}</Badge>
+                  </span>
+                </TableCell>
+                <TableCell>
+                  <StatusBadge tone={row.tone}>{row.status}</StatusBadge>
+                </TableCell>
+                <TableCell data-numeric>{money(row.value)}</TableCell>
+                <TableCell data-numeric>
+                  <Delta value={row.change} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={2}>Total</TableCell>
+              <TableCell data-numeric>{money(total)}</TableCell>
+              <TableCell data-numeric>{yearAgo > 0 && pct(total / yearAgo - 1)}</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+}
+
+// An app page on the default, ruled surface: masthead, controls, stat tiles, a chart and a table in a PanelGrid, and
+// the takeaway. It sets no surface: ruled on white is what a page gets.
+export default function OverviewDashboard() {
+  const [query, setQuery] = useState("");
+  const shown = holdings.filter((row) => row.name.toLowerCase().includes(query.trim().toLowerCase()));
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHero
+        mark={<InkDrop />}
+        eyebrow="The Book"
+        title="Holdings"
+        lead="What you own, what it is worth today, and how each part has moved."
+        detail="Prices as of the last market close."
+        actions={
+          <>
+            <Button>
+              <PlusIcon />
+              Add a holding
+            </Button>
+            <Button variant="outline">
+              <DownloadIcon />
+              Export
+            </Button>
+          </>
+        }
+      />
+      <div className="flex flex-wrap items-center gap-3">
+        <ToggleGroup defaultValue={["1y"]} variant="outline" aria-label="Period">
+          <ToggleGroupItem value="1m">1 month</ToggleGroupItem>
+          <ToggleGroupItem value="1y">1 year</ToggleGroupItem>
+          <ToggleGroupItem value="all">All</ToggleGroupItem>
+        </ToggleGroup>
+        <Input
+          className="w-56"
+          type="search"
+          placeholder="Search holdings"
+          aria-label="Search holdings"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+        />
+        <p className="text-sm text-muted-foreground">
+          Five holdings in three kinds.{" "}
+          <a className="text-link underline underline-offset-4" href="#/data">
+            How value is worked out
+          </a>
+        </p>
+      </div>
+      <SectionCardsTrend />
+      <PanelGrid>
+        <ChartArea />
+        <Holdings rows={shown} />
+      </PanelGrid>
+      <Callout tone="accent" icon={<LightbulbIcon />} title="The takeaway">
+        Equity is <strong>74%</strong> of the book against a plan of 65%. The small cap fund is the only holding below
+        plan.
+      </Callout>
+    </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: dashboards, ledgers, reports."
+      detail="Stock shadcn/ui on Base UI and Tailwind v4, with a theme for figures, 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/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 counted?</PopoverTrigger>
+      <PopoverContent align="start">
+        <PopoverHeader>
+          <PopoverTitle>Paid orders</PopoverTitle>
+          <PopoverDescription>Revenue counts paid orders, less refunds, on the day each was placed.</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 series for one year: the average order value, in rupees.
+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>Average order value</CardTitle>
+        <CardDescription>Daily, one year, ₹</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <PriceChart data={data} height={256} />
+      </CardContent>
+      <CardFooter>
+        <span className="text-xs text-muted-foreground">
+          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,29 @@
+import { ToneProgress, useFormat } from "@siyahi/ui";
+
+// Each sales channel's profit or loss this quarter, and its share of all the profit and loss booked; made-up figures.
+const channels = [
+  { channel: "Online", profit: 84200, share: 0.41 },
+  { channel: "Retail", profit: -61200, share: 0.3 },
+  { channel: "Export", profit: 21000, share: 0.1 },
+];
+
+export default function ProgressToneExample() {
+  const { pct } = useFormat();
+  return (
+    <div className="flex max-w-sm flex-col gap-3 text-sm">
+      {channels.map((p) => (
+        <div key={p.channel} className="flex items-center gap-3">
+          <span className="w-16 font-medium">{p.channel}</span>
+          <ToneProgress
+            tone={p.profit >= 0 ? "positive" : "negative"}
+            value={p.share * 100}
+            aria-label={`${p.channel}'s share of the quarter's profit and loss`}
+            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>Orders imported</ProgressLabel>
+      <ProgressValue />
+    </Progress>
+  );
+}

package/agents/examples/range-position-table.tsx

@@ -0,0 +1,113 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  DataTableBody,
+  DataTableCompactColumnsToggle,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableSortHeader,
+  DataTableToolbarSection,
+  RangePosition,
+  useFormat,
+  type DataTableColumnDef,
+} from "@siyahi/ui";
+
+interface Service {
+  service: string;
+  /** Today's 95th-percentile response time and the fastest and slowest day of the last 30, in ms; made-up figures. */
+  today: number;
+  low: number;
+  high: number;
+  /** How far up its range today sits, 0 at the fastest day and 1 at the slowest, so the column sorts. */
+  position: number;
+}
+
+const service = (name: string, today: number, low: number, high: number): Service => ({
+  service: name,
+  today,
+  low,
+  high,
+  position: (today - low) / (high - low),
+});
+
+const services: Service[] = [
+  service("search", 284, 241, 292),
+  service("catalogue", 187, 131, 201),
+  service("checkout", 329, 265, 342),
+  service("images", 415, 359, 459),
+  service("payments", 460, 399, 529),
+  service("login", 175, 161, 203),
+];
+
+function useMilliseconds(): (value: number) => string {
+  const { count } = useFormat();
+  return (value) => `${count(value)} ms`;
+}
+
+function Milliseconds({ value }: { value: number }) {
+  return useMilliseconds()(value);
+}
+
+function Range({ row }: { row: Service }) {
+  const ms = useMilliseconds();
+  return (
+    <RangePosition
+      variant="compact"
+      low={row.low}
+      high={row.high}
+      value={row.today}
+      valueFormatter={ms}
+      lowLabel="30-day fastest"
+      highLabel="30-day slowest"
+    />
+  );
+}
+
+const header = () => <DataTableSortHeader />;
+
+const columns: DataTableColumnDef<Service>[] = [
+  { accessorKey: "service", header, size: 130, meta: { label: "Service", compact: true } },
+  {
+    accessorKey: "today",
+    header,
+    size: 170,
+    meta: { label: "95th percentile today", variant: "number" },
+    cell: ({ row }) => <Milliseconds value={row.original.today} />,
+  },
+  {
+    accessorKey: "position",
+    header,
+    size: 200,
+    meta: { label: "30-day range", compact: true },
+    cell: ({ row }) => <Range row={row.original} />,
+  },
+];
+
+export default function RangePositionTableExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Search is near its slowest of the month, login near its fastest</CardTitle>
+        <CardDescription>
+          Each service's 95th-percentile response time today (95 in 100 requests were faster) on a track from its
+          fastest day to its slowest; sort to rank them
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DataTableRoot data={services} columns={columns}>
+          <DataTableToolbarSection>
+            <DataTableCompactColumnsToggle />
+          </DataTableToolbarSection>
+          <DataTable aria-label="Services in their 30-day range">
+            <DataTableHeader />
+            <DataTableBody />
+          </DataTable>
+        </DataTableRoot>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/range-position.tsx

@@ -0,0 +1,55 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataList,
+  DataListItem,
+  RangePosition,
+  useFormat,
+} from "@siyahi/ui";
+
+// Checkout's daily 95th-percentile response time over the last 30 days, in ms; made-up figures.
+const low = 161;
+const high = 203;
+const today = 175;
+
+export default function RangePositionExample() {
+  const f = useFormat();
+  const ms = (value: number) => `${f.count(value)} ms`;
+  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>Checkout sits {f.pct((today - low) / (high - low), 0)} of the way up its 30-day range</CardTitle>
+        <CardDescription>Today's response time against the month's fastest and slowest day</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div 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="Fastest day, 3 weeks ago">
+              <span className="tabular-nums">{ms(low)}</span>
+            </DataListItem>
+            <DataListItem label="Slowest day, 9 days ago">
+              <span className="tabular-nums">{ms(high)}</span>
+            </DataListItem>
+            <DataListItem label="Today, 95th percentile">
+              <span className="tabular-nums">{ms(today)}</span>
+            </DataListItem>
+          </DataList>
+          <RangePosition
+            low={low}
+            high={high}
+            value={today}
+            lowLabel="30-day fastest"
+            highLabel="30-day slowest"
+            caption="of the way up the 30-day range"
+            valueFormatter={ms}
+            className="@xl/range:flex-1"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}