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

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

@@ -16,61 +16,61 @@ import {
   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;
+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 the close sits, 0 at the low and 1 at the high, so the column sorts. */
+  /** How far up its range today sits, 0 at the fastest day and 1 at the slowest, so the column sorts. */
   position: number;
 }
 
-const holding = (symbol: string, close: number, low: number, high: number): Holding => ({
-  symbol,
-  close,
+const service = (name: string, today: number, low: number, high: number): Service => ({
+  service: name,
+  today,
   low,
   high,
-  position: (close - low) / (high - low),
+  position: (today - 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),
+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 Price({ amount }: { amount: number }) {
-  return useFormat().money(amount, 2);
+function Milliseconds({ value }: { value: number }) {
+  return `${useFormat().count(value)} ms`;
 }
 
 const header = () => <DataTableSortHeader />;
 
-const columns: DataTableColumnDef<Holding>[] = [
-  { accessorKey: "symbol", header, size: 130, meta: { label: "Symbol", compact: true } },
+const columns: DataTableColumnDef<Service>[] = [
+  { accessorKey: "service", header, size: 130, meta: { label: "Service", compact: true } },
   {
-    accessorKey: "close",
+    accessorKey: "today",
     header,
     size: 120,
-    meta: { label: "Close", variant: "number" },
-    cell: ({ row }) => <Price amount={row.original.close} />,
+    meta: { label: "p95 today", variant: "number" },
+    cell: ({ row }) => <Milliseconds value={row.original.today} />,
   },
   {
     accessorKey: "position",
     header,
     size: 200,
-    meta: { label: "52-week range", compact: true },
+    meta: { label: "30-day 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"
+        value={row.original.today}
+        lowLabel="30-day fastest"
+        highLabel="30-day slowest"
       />
     ),
   },
@@ -80,17 +80,17 @@ export default function RangePositionTableExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>NIFTYBEES trades near its 52-week high, HDFCBANK near its low</CardTitle>
+        <CardTitle>Search is near its slowest of the month, login near its fastest</CardTitle>
         <CardDescription>
-          Each close on a track from the year's low close to its high; sort to rank them
+          Each service's response time today on a track from its fastest day to its slowest; sort to rank them
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <DataTableRoot data={holdings} columns={columns}>
+        <DataTableRoot data={services} columns={columns}>
           <DataTableToolbarSection>
             <DataTableCompactColumnsToggle />
           </DataTableToolbarSection>
-          <DataTable aria-label="Holdings in their 52-week range">
+          <DataTable aria-label="Services in their 30-day range">
             <DataTableHeader />
             <DataTableBody />
           </DataTable>

package/agents/examples/range-position.tsx

@@ -10,43 +10,45 @@ import {
   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;
+// 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 price = (value: number) => f.money(value, 2);
+  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>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>
+        <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 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>
+        <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>
   );

package/agents/examples/scroll-area.tsx

@@ -6,15 +6,17 @@ const months = Array.from({ length: 24 }, (_, i) =>
 
 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>
+    <div className="h-48 w-56 overflow-hidden rounded-lg border">
+      <ScrollArea className="h-full">
+        <div className="p-4">
+          {months.map((month) => (
+            <div key={month}>
+              <div className="text-sm">{month}</div>
+              <Separator className="my-2" />
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
   );
 }

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

@@ -1,25 +1,26 @@
 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 },
+// Each sales channel's profit this quarter and its orders; made-up figures.
+const channels = [
+  { label: "All", net: 110200, orders: 181 },
+  { label: "Online", net: 171400, orders: 164 },
+  { label: "Wholesale", net: 0, orders: 0 },
+  { label: "Marketplace", net: -61200, orders: 17 },
 ];
 
 export default function SectionCardsSelectExample() {
   const [scope, setScope] = useState("All");
   const { count } = useFormat();
-  const items: SectionCard[] = classes.map((c) => ({
+  const items: SectionCard[] = channels.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,
+    detail: `${count(c.orders)} orders`,
+    // Nothing to show for a channel with no orders, so it cannot be picked.
+    disabled: c.orders === 0,
   }));
   return (
-    // On a ruled surface the tiles part with hairlines, as on a trading screen, instead of sitting as cards.
+    // On a ruled surface the tiles part with hairlines, as on a dense operations screen, instead of sitting as cards.
     <SiyahiProvider surface="ruled">
       <div className="flex flex-col gap-3">
         <SectionCards items={items} selected={scope} onSelect={setScope} />

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

@@ -4,14 +4,14 @@ export default function SectionCardsTrendExample() {
   const { money, moneyCompact } = useFormat();
   const items: SectionCard[] = [
     {
-      label: "Portfolio value",
+      label: "Revenue",
       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",
+      label: "Cash flow this year",
       value: moneyCompact(-61200),
       badge: <Delta value={-61200} format="money" />,
       // A run of losses: the meaning colour, not a chart slot.
@@ -19,11 +19,11 @@ export default function SectionCardsTrendExample() {
       detail: "Running total since April",
     },
     {
-      label: "Dividends this year",
+      label: "Gift cards 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",
+      detail: "Sold each month",
     },
   ];
   return <SectionCards items={items} />;

package/agents/examples/section-cards.tsx

@@ -4,38 +4,38 @@ export default function SectionCardsExample() {
   const { money, moneyCompact } = useFormat();
   const items: SectionCard[] = [
     {
-      label: "Portfolio value",
+      label: "Revenue",
       value: money(4512300),
       badge: <Delta value={0.031} />,
       headline: "Up for the third month",
-      detail: "Valued at the last close",
+      detail: "Paid orders, less refunds",
     },
     {
-      label: "Invested",
+      label: "Target",
       value: money(4025000),
-      headline: "SIPs on the 5th and 20th",
-      detail: "Across 4 accounts",
+      headline: "Set at the start of the quarter",
+      detail: "Across 4 stores",
     },
     {
-      label: "Unrealised gain",
+      label: "Ahead of target",
       value: moneyCompact(487300),
       badge: <Delta value={0.121} />,
-      headline: "XIRR 14.2%",
-      detail: "Since the first buy",
+      headline: "Gross margin 14.2%",
+      detail: "Since April",
     },
     {
-      label: "Realised this year",
+      label: "Cash flow this year",
       value: moneyCompact(-61200),
       badge: <Delta value={-61200} format="money" />,
-      headline: "Two loss-making exits",
+      headline: "Two large inventory buys",
       detail: "Before tax",
     },
     {
-      label: "Dividends this year",
+      label: "Gift cards this year",
       value: moneyCompact(38400),
       badge: <Delta value={0.18} />,
-      headline: "From 11 holdings",
-      detail: "Credited to the bank",
+      headline: "Sold in 11 stores",
+      detail: "Paid at purchase",
     },
   ];
   return (

package/agents/examples/select.tsx

@@ -1,23 +1,23 @@
 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" },
+const stores = [
+  { label: "All stores", value: "all" },
+  { label: "Online", value: "online" },
+  { label: "Retail", value: "retail" },
+  { label: "Wholesale", value: "wholesale" },
 ];
 
 export default function SelectExample() {
   return (
-    <Select items={accounts} defaultValue="all">
+    <Select items={stores} defaultValue="all">
       <SelectTrigger className="w-48">
         <SelectValue />
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>
-          {accounts.map((account) => (
-            <SelectItem key={account.value} value={account.value}>
-              {account.label}
+          {stores.map((store) => (
+            <SelectItem key={store.value} value={store.value}>
+              {store.label}
             </SelectItem>
           ))}
         </SelectGroup>

package/agents/examples/separator.tsx

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

package/agents/examples/sheet.tsx

@@ -7,7 +7,7 @@ export default function SheetExample() {
       <SheetContent>
         <SheetHeader>
           <SheetTitle>Filters</SheetTitle>
-          <SheetDescription>Narrow the ledger by account, symbol or date.</SheetDescription>
+          <SheetDescription>Narrow the orders by store, status or date.</SheetDescription>
         </SheetHeader>
       </SheetContent>
     </Sheet>

package/agents/examples/slider.tsx

@@ -1,5 +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" />;
+  return <Slider defaultValue={[20, 80]} max={100} step={5} aria-label="Price range" className="max-w-sm" />;
 }

package/agents/examples/surfaces.tsx

@@ -32,19 +32,19 @@ const orders = [
   { hour: 15, orders: 38 },
 ];
 
-const holdings = [
-  { symbol: "ITC", value: 276000 },
-  { symbol: "INFY", value: 224400 },
-  { symbol: "TCS", value: 166000 },
+const products = [
+  { product: "Dinner set", revenue: 276000 },
+  { product: "Standing desk", revenue: 224400 },
+  { product: "Bookshelf", revenue: 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" },
+    { label: "Revenue", value: money(4512300), change: 0.031 },
+    { label: "Target", value: moneyCompact(4025000), change: 85000, changeFormat: "money" },
+    { label: "Gross margin", value: pct(0.142), change: -0.004 },
+    { label: "Cash flow", value: moneyCompact(-61200), change: -61200, changeFormat: "money" },
   ];
   return (
     <div className="flex flex-col gap-6">
@@ -61,22 +61,22 @@ function Dashboard() {
         />
         <Card>
           <CardHeader>
-            <CardTitle>Holdings</CardTitle>
-            <CardDescription>Largest three</CardDescription>
+            <CardTitle>Top products</CardTitle>
+            <CardDescription>Largest three by revenue</CardDescription>
           </CardHeader>
           <CardContent>
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>Symbol</TableHead>
-                  <TableHead>Value</TableHead>
+                  <TableHead>Product</TableHead>
+                  <TableHead>Revenue</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>
+                {products.map((row) => (
+                  <TableRow key={row.product}>
+                    <TableCell>{row.product}</TableCell>
+                    <TableCell>{money(row.revenue)}</TableCell>
                   </TableRow>
                 ))}
               </TableBody>

package/agents/examples/tabs.tsx

@@ -2,15 +2,15 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@siyahi/ui";
 
 export default function TabsExample() {
   return (
-    <Tabs defaultValue="holdings">
+    <Tabs defaultValue="orders">
       <TabsList>
-        <TabsTrigger value="holdings">Holdings</TabsTrigger>
-        <TabsTrigger value="realized">Realized</TabsTrigger>
-        <TabsTrigger value="cash">Cash flow</TabsTrigger>
+        <TabsTrigger value="orders">Orders</TabsTrigger>
+        <TabsTrigger value="returns">Returns</TabsTrigger>
+        <TabsTrigger value="payouts">Payouts</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>
+      <TabsContent value="orders">Every order placed, newest first.</TabsContent>
+      <TabsContent value="returns">Items sent back and the refunds paid for them.</TabsContent>
+      <TabsContent value="payouts">Money paid out to sellers each week.</TabsContent>
     </Tabs>
   );
 }

package/agents/examples/target-rows.tsx

@@ -10,60 +10,64 @@ import {
   type TargetStatus,
 } from "@siyahi/ui";
 
-interface Sleeve {
+interface Team {
   name: string;
-  holdings: string;
-  /** Today's share of the portfolio and the plan's share, as fractions; made-up figures. */
+  costs: string;
+  /** The team's share of this year's spend so far and the budget'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 },
+const teams: Team[] = [
+  { name: "Engineering", costs: "Cloud hosting, tools, contractors", weight: 0.426, target: 0.4 },
+  { name: "Marketing", costs: "Ads, events, design agency", weight: 0.189, target: 0.2 },
+  { name: "Sales", costs: "Travel, commissions, CRM seats", weight: 0.194, target: 0.25 },
+  { name: "Support", costs: "Help desk seats, training", weight: 0.093, target: 0.1 },
+  { name: "Operations", costs: "Office rent, facilities", weight: 0.098, target: 0.05 },
 ];
 
-// Within two points of the plan is on target; past five is far enough to rebalance.
+// Within two points of the budget is on target; past five is far enough to review it.
 const NEAR = 0.02;
 const FAR = 0.05;
 
 const pts = (value: number) => `${(value * 100).toFixed(1)} pts`;
 
-function statusOf({ weight, target }: Sleeve): TargetStatus {
+function statusOf({ weight, target }: Team): 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` };
+  return { kind: "warning", label: `${size}, review` };
 }
 
 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,
+  const rows: TargetRow[] = teams.map((team) => ({
+    label: team.name,
+    detail: team.costs,
+    value: team.weight,
+    target: team.target,
     bands: [
-      [sleeve.target - FAR, sleeve.target + FAR],
-      [sleeve.target - NEAR, sleeve.target + NEAR],
+      [team.target - FAR, team.target + FAR],
+      [team.target - NEAR, team.target + NEAR],
     ],
-    status: statusOf(sleeve),
+    status: statusOf(team),
   }));
   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>
+        <CardTitle>Sales is 5.6 points under its budget</CardTitle>
+        <CardDescription>
+          Each team's share of spend against its share of the budget, 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>
+        <div className="grid gap-2">
+          <p className="text-sm text-muted-foreground">
+            Bar: the share spent so far. Tall tick: the budgeted share. Shading: within 5 points of it, darker within 2.
+          </p>
+          <TargetRows rows={rows} domain={[0, 0.5]} valueFormatter={(value) => f.pct(value)} />
+        </div>
       </CardContent>
     </Card>
   );

package/agents/examples/tooltip.tsx

@@ -4,10 +4,10 @@ import { InfoIcon } from "lucide-react";
 export default function TooltipExample() {
   return (
     <Tooltip>
-      <TooltipTrigger render={<Button variant="outline" size="icon" aria-label="About XIRR" />}>
+      <TooltipTrigger render={<Button variant="outline" size="icon" aria-label="About churn" />}>
         <InfoIcon />
       </TooltipTrigger>
-      <TooltipContent>XIRR weighs every cash flow by its date.</TooltipContent>
+      <TooltipContent>Churn counts customers who did not renew this month.</TooltipContent>
     </Tooltip>
   );
 }