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

package/agents/examples/data-table.tsx

@@ -18,21 +18,22 @@ import {
   type DataTableColumnDef,
 } from "@siyahi/ui";
 
-interface Holding {
-  symbol: string;
-  sector: string;
-  quantity: number;
-  value: number;
+interface Product {
+  product: string;
+  category: string;
+  /** Units sold and revenue this month; change is the revenue against last week. Made-up figures. */
+  units: number;
+  revenue: 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 },
+const products: Product[] = [
+  { product: "Standing desk", category: "Furniture", units: 120, revenue: 224400, change: 0.018 },
+  { product: "Office chair", category: "Seating", units: 150, revenue: 262500, change: -0.006 },
+  { product: "Bookshelf", category: "Furniture", units: 40, revenue: 166000, change: 0.004 },
+  { product: "Dinner set", category: "Kitchen, Dining & Tableware", units: 600, revenue: 276000, change: -0.012 },
+  { product: "Kids chair", category: "Seating", units: 200, revenue: 258000, change: 0.022 },
+  { product: "Desk lamp", category: "Lighting", units: 900, revenue: 255600, change: 0.009 },
 ];
 
 // One click sorts largest (or Z) first; the title comes from meta.label.
@@ -42,22 +43,22 @@ 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" } },
+const columns: DataTableColumnDef<Product>[] = [
+  { accessorKey: "product", header, size: 140, meta: { label: "Product" } },
+  { accessorKey: "category", header, size: 120, meta: { label: "Category" } },
+  { accessorKey: "units", header, size: 100, meta: { label: "Units", variant: "number" } },
   {
-    accessorKey: "value",
+    accessorKey: "revenue",
     header,
     size: 140,
-    meta: { label: "Value", variant: "number" },
-    cell: ({ row }) => <Money amount={row.original.value} />,
+    meta: { label: "Revenue", variant: "number" },
+    cell: ({ row }) => <Money amount={row.original.revenue} />,
   },
   {
     accessorKey: "change",
     header,
     size: 110,
-    meta: { label: "Day", variant: "number" },
+    meta: { label: "Week", variant: "number" },
     cell: ({ row }) => <Delta value={row.original.change} />,
   },
 ];
@@ -66,28 +67,28 @@ export default function DataTableExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Holdings</CardTitle>
+        <CardTitle>Products</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
+          Search every column, filter by category, sort any column in one click; the product stays put when the table
+          scrolls in wide panels. In narrow panels every column scrolls, leaving room for the figures
         </CardDescription>
       </CardHeader>
       <CardContent>
         <DataTableRoot
-          data={holdings}
+          data={products}
           columns={columns}
-          initialState={{ columnPinning: { start: ["symbol"], end: [] } }}
+          initialState={{ columnPinning: { start: ["product"], end: [] } }}
         >
           <DataTableToolbarSection>
             <DataTableSearchFilter
-              placeholder="Search holdings…"
-              label="Filter holdings"
+              placeholder="Search products…"
+              label="Filter products"
               className="flex-none sm:w-64"
             />
-            <DataTableFacetedFilter accessorKey="sector" title="Sector" />
-            <DataTableRowCount unit="holdings" />
+            <DataTableFacetedFilter accessorKey="category" title="Category" />
+            <DataTableRowCount unit="products" />
           </DataTableToolbarSection>
-          <DataTable aria-label="Holdings">
+          <DataTable aria-label="Products">
             <DataTableHeader />
             <DataTableBody />
           </DataTable>

package/agents/examples/dialog.tsx

@@ -13,11 +13,11 @@ import {
 export default function DialogExample() {
   return (
     <Dialog>
-      <DialogTrigger render={<Button variant="outline" className="w-fit" />}>Show fills</DialogTrigger>
+      <DialogTrigger render={<Button variant="outline" className="w-fit" />}>Show parcels</DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Fills for this sell</DialogTitle>
-          <DialogDescription>Each lot this sale was matched against, oldest first.</DialogDescription>
+          <DialogTitle>Parcels for this order</DialogTitle>
+          <DialogDescription>Each parcel this order was split into, earliest first.</DialogDescription>
         </DialogHeader>
         <DialogFooter>
           <DialogClose render={<Button variant="outline" />}>Close</DialogClose>

package/agents/examples/distribution-bar-tug.tsx

@@ -11,17 +11,17 @@ import {
   type DistributionSegment,
 } from "@siyahi/ui";
 
-// Each closed position's net realized, ₹; made-up figures.
-const positions = [
-  { name: "INFY", value: 61000 },
-  { name: "TCS", value: 38000 },
-  { name: "HDFCBANK", value: 17000 },
-  { name: "ITC", value: -26000 },
-  { name: "WIPRO", value: -14000 },
-  { name: "SBIN", value: -6000 },
+// Each finished marketing campaign's net return, ₹: sales it brought in less what it cost; made-up figures.
+const campaigns = [
+  { name: "Festive sale", value: 61000 },
+  { name: "Referrals", value: 38000 },
+  { name: "Email win-back", value: 17000 },
+  { name: "Billboards", value: -26000 },
+  { name: "Podcast ads", value: -14000 },
+  { name: "Trade fair", value: -6000 },
 ];
-const won = positions.filter((p) => p.value > 0).reduce((sum, p) => sum + p.value, 0);
-const lost = positions.filter((p) => p.value < 0).reduce((sum, p) => sum + p.value, 0);
+const won = campaigns.filter((c) => c.value > 0).reduce((sum, c) => sum + c.value, 0);
+const lost = campaigns.filter((c) => c.value < 0).reduce((sum, c) => sum + c.value, 0);
 // One scale both ways, so whichever side reaches farther is the net.
 const reach = Math.max(won, -lost);
 
@@ -31,30 +31,32 @@ export default function DistributionBarTugExample() {
     <Card>
       <CardHeader>
         <CardTitle>The tug-of-war</CardTitle>
-        <CardDescription>Each closed position, losses left of break-even and gains right</CardDescription>
+        <CardDescription>Each finished campaign, losses left of break-even and gains right</CardDescription>
       </CardHeader>
-      <CardContent className="flex flex-col gap-2">
-        <DistributionBar
-          min={-reach}
-          max={reach}
-          showLegend={false}
-          markers={[{ at: 0 }]}
-          highlighted={focus?.name ?? null}
-          onHover={setFocus}
-          segments={positions.map(({ name, value }) => ({
-            name,
-            value,
-            color: value > 0 ? "var(--positive)" : "var(--negative)",
-          }))}
-        />
-        <div className="grid grid-cols-3 text-xs text-muted-foreground tabular-nums">
-          <span>
-            losers <Delta value={lost} format="money" />
-          </span>
-          <span className="text-center">break-even</span>
-          <span className="text-right">
-            winners <Delta value={won} format="money" />
-          </span>
+      <CardContent>
+        <div className="flex flex-col gap-2">
+          <DistributionBar
+            min={-reach}
+            max={reach}
+            showLegend={false}
+            markers={[{ at: 0 }]}
+            highlighted={focus?.name ?? null}
+            onHover={setFocus}
+            segments={campaigns.map(({ name, value }) => ({
+              name,
+              value,
+              color: value > 0 ? "var(--positive)" : "var(--negative)",
+            }))}
+          />
+          <div className="grid grid-cols-3 text-xs text-muted-foreground tabular-nums">
+            <span>
+              lost <Delta value={lost} format="money" />
+            </span>
+            <span className="text-center">break-even</span>
+            <span className="text-right">
+              earned <Delta value={won} format="money" />
+            </span>
+          </div>
         </div>
       </CardContent>
       <CardFooter className="min-h-12" aria-live="polite">
@@ -64,7 +66,7 @@ export default function DistributionBarTugExample() {
             <Delta value={focus.value} format="money" />
           </p>
         ) : (
-          <p className="text-muted-foreground">Hover a band to see its position.</p>
+          <p className="text-muted-foreground">Hover a band to see its campaign.</p>
         )}
       </CardFooter>
     </Card>

package/agents/examples/dropdown-menu.tsx

@@ -19,8 +19,8 @@ export default function DropdownMenuExample() {
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuGroup>
-          <DropdownMenuLabel>Holding</DropdownMenuLabel>
-          <DropdownMenuItem>View lots</DropdownMenuItem>
+          <DropdownMenuLabel>Order</DropdownMenuLabel>
+          <DropdownMenuItem>View parcels</DropdownMenuItem>
           <DropdownMenuItem>Export CSV</DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />

package/agents/examples/heatmap-calendar.tsx

@@ -13,7 +13,7 @@ import {
   CardTitle,
 } from "@siyahi/ui";
 
-// A year of trading days with a count of trades on each.
+// A year of working days with a count of production deploys on each.
 const data = Array.from({ length: 365 }, (_, i) => {
   const day = new Date(Date.UTC(2025, 9, 20 + i));
   const weekday = day.getUTCDay();
@@ -29,11 +29,11 @@ export default function HeatmapCalendarExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Trades per day</CardTitle>
+        <CardTitle>Deploys per day</CardTitle>
         <CardDescription>The last 12 months; counts use a single-hue fade of --chart-1</CardDescription>
       </CardHeader>
       <CardContent>
-        <CalendarHeatmap data={data} labels={{ heatmapLabel: "Trades per day over the last 12 months" }}>
+        <CalendarHeatmap data={data} labels={{ heatmapLabel: "Deploys per day over the last 12 months" }}>
           <CalendarHeatmapBody>
             {({ activity, dayIndex, weekIndex }) => (
               <CalendarHeatmapBlock
@@ -45,13 +45,15 @@ export default function HeatmapCalendarExample() {
               />
             )}
           </CalendarHeatmapBody>
-          <CalendarHeatmapFooter className="items-center justify-between gap-x-6 gap-y-2 whitespace-normal">
-            <p aria-live="polite" className="text-sm">
-              {picked
-                ? `${picked.date}: ${count(picked.value)} trades`
-                : "Select a day for its trade count. Use arrow keys to move between days."}
-            </p>
-            <CalendarHeatmapLegend labels={{ less: "0 trades", more: `${count(busiest)} trades` }} />
+          <CalendarHeatmapFooter className="whitespace-normal">
+            <div className="flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2">
+              <p aria-live="polite" className="text-sm">
+                {picked
+                  ? `${picked.date}: ${count(picked.value)} deploys`
+                  : "Select a day for its deploy count. Use arrow keys to move between days."}
+              </p>
+              <CalendarHeatmapLegend labels={{ less: "0 deploys", more: `${count(busiest)} deploys` }} />
+            </div>
           </CalendarHeatmapFooter>
         </CalendarHeatmap>
       </CardContent>

package/agents/examples/heatmap-status.tsx

@@ -26,7 +26,7 @@ export default function HeatmapStatusExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Price feed</CardTitle>
+        <CardTitle>Checkout API</CardTitle>
         <CardDescription>Daily health: healthy, degraded or critical</CardDescription>
       </CardHeader>
       <CardContent>
@@ -41,14 +41,16 @@ export default function HeatmapStatusExample() {
               />
             )}
           </StatusHeatmapBody>
-          <StatusHeatmapFooter className="items-center justify-between gap-x-6 gap-y-2 whitespace-normal">
-            <p aria-live="polite" className="text-sm">
-              {picked
-                ? `${picked.date}: ${["unknown", "critical", "degraded", "healthy"][picked.value] ?? "unknown"}`
-                : "Select a day for its health. Use arrow keys to move between days."}
-            </p>
-            {/* No day lacks data, so the legend leaves out "No Data". */}
-            <StatusHeatmapLegend className="gap-3" />
+          <StatusHeatmapFooter className="whitespace-normal">
+            <div className="flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2">
+              <p aria-live="polite" className="text-sm">
+                {picked
+                  ? `${picked.date}: ${["unknown", "critical", "degraded", "healthy"][picked.value] ?? "unknown"}`
+                  : "Select a day for its health. Use arrow keys to move between days."}
+              </p>
+              {/* No day lacks data, so the legend leaves out "No Data". */}
+              <StatusHeatmapLegend />
+            </div>
           </StatusHeatmapFooter>
         </StatusHeatmap>
       </CardContent>

package/agents/examples/heatmap-weekday.tsx

@@ -12,7 +12,7 @@ import {
   WeekdayHeatmapLegend,
 } from "@siyahi/ui";
 
-// Orders placed by weekday and hour of the trading session.
+// Support tickets opened by weekday and office hour; the overnight queue lands at 9.
 const data = [1, 2, 3, 4, 5].flatMap((weekday) =>
   [9, 10, 11, 12, 13, 14, 15].map((hour) => ({
     weekday,
@@ -33,40 +33,37 @@ export default function HeatmapWeekdayExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>When orders are placed</CardTitle>
-        <CardDescription>Weekday by hour in India Standard Time, market hours only</CardDescription>
+        <CardTitle>When support tickets arrive</CardTitle>
+        <CardDescription>Weekday by hour in India Standard Time, office hours only</CardDescription>
       </CardHeader>
       {/* Seven hours by five days is a small grid: capped, it keeps square cells, and the legend and the answer
           sit beside it instead of a wide empty card. */}
       <CardContent>
-        <WeekdayHeatmap
-          data={data}
-          hours={[9, 10, 11, 12, 13, 14, 15]}
-          weekdays={[1, 2, 3, 4, 5]}
-          className="gap-4 lg:flex-row lg:items-center lg:gap-8"
-        >
-          <WeekdayHeatmapBody className="lg:w-md lg:shrink-0">
-            {({ activity }) => (
-              <WeekdayHeatmapBlock
-                activity={activity}
-                selected={isPicked(activity)}
-                onCellClick={(cell) => setPicked(isPicked(cell) ? null : cell)}
+        <WeekdayHeatmap data={data} hours={[9, 10, 11, 12, 13, 14, 15]} weekdays={[1, 2, 3, 4, 5]}>
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:gap-8">
+            <WeekdayHeatmapBody className="lg:w-md lg:shrink-0">
+              {({ activity }) => (
+                <WeekdayHeatmapBlock
+                  activity={activity}
+                  selected={isPicked(activity)}
+                  onCellClick={(cell) => setPicked(isPicked(cell) ? null : cell)}
+                />
+              )}
+            </WeekdayHeatmapBody>
+            <div className="flex flex-col items-start gap-3 text-sm">
+              <WeekdayHeatmapLegend
+                className="ml-0"
+                labels={{ less: "0 tickets", more: `${count(busiest.value)} tickets an hour` }}
               />
-            )}
-          </WeekdayHeatmapBody>
-          <div className="flex flex-col items-start gap-3 text-sm">
-            <WeekdayHeatmapLegend
-              className="ml-0"
-              labels={{ less: "0 orders", more: `${count(busiest.value)} orders an hour` }}
-            />
-            <p>
-              Busiest: {DAYS[busiest.weekday]} at {hourLabel(busiest.hour)}, {count(busiest.value)} orders
-            </p>
-            <p aria-live="polite" className="text-muted-foreground">
-              {picked
-                ? `${DAYS[picked.weekday]}, ${hourLabel(picked.hour)} IST: ${count(picked.value)} orders`
-                : "Select a cell for its order count. Use arrow keys to move between cells."}
-            </p>
+              <p>
+                Busiest: {DAYS[busiest.weekday]} at {hourLabel(busiest.hour)}, {count(busiest.value)} tickets
+              </p>
+              <p aria-live="polite" className="text-muted-foreground">
+                {picked
+                  ? `${DAYS[picked.weekday]}, ${hourLabel(picked.hour)} IST: ${count(picked.value)} tickets`
+                  : "Select a cell for its ticket count. Use arrow keys to move between cells."}
+              </p>
+            </div>
           </div>
         </WeekdayHeatmap>
       </CardContent>

package/agents/examples/input-states.tsx

@@ -10,23 +10,23 @@ export default function InputStatesExample() {
         </label>
         <Input id="budget" inputMode="numeric" defaultValue="25,000" aria-describedby="budget-hint" />
         <p id="budget-hint" className="text-sm text-muted-foreground">
-          In rupees, before brokerage
+          In rupees, before tax
         </p>
       </div>
       <div className="grid gap-1.5">
-        <label htmlFor="folio" className="text-sm font-medium">
-          Folio number
+        <label htmlFor="pin" className="text-sm font-medium">
+          PIN code
         </label>
-        <Input id="folio" defaultValue="12/34" aria-invalid aria-describedby="folio-error" />
-        <p id="folio-error" className="text-sm text-destructive">
-          A folio is digits only, such as 1234567
+        <Input id="pin" defaultValue="56/001" aria-invalid aria-describedby="pin-error" />
+        <p id="pin-error" className="text-sm text-destructive">
+          A PIN code is six digits, such as 560001
         </p>
       </div>
       <div className="grid gap-1.5">
-        <label htmlFor="broker" className="text-sm font-medium text-muted-foreground">
-          Broker
+        <label htmlFor="team" className="text-sm font-medium text-muted-foreground">
+          Team
         </label>
-        <Input id="broker" defaultValue="Kite" disabled />
+        <Input id="team" defaultValue="Finance" disabled />
       </div>
     </div>
   );

package/agents/examples/input.tsx

@@ -4,14 +4,14 @@ 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" />
+      <Input placeholder="Order number" aria-label="Order number" />
       <InputGroup>
         <InputGroupAddon>
           <SearchIcon />
         </InputGroupAddon>
-        <InputGroupInput placeholder="Search symbols" aria-label="Search symbols" />
+        <InputGroupInput placeholder="Search customers" aria-label="Search customers" />
       </InputGroup>
-      <Textarea placeholder="Note for this trade" aria-label="Note" />
+      <Textarea placeholder="Note for this order" aria-label="Note" />
     </div>
   );
 }

package/agents/examples/local-time.tsx

@@ -4,7 +4,7 @@ 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.
+        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 />.

package/agents/examples/metric-strip.tsx

@@ -5,33 +5,33 @@ export default function MetricStripExample() {
   // trend is each figure's month-end run, oldest first.
   const items: MetricStripItem[] = [
     {
-      label: "Portfolio value",
+      label: "Revenue",
       value: money(4512300),
       change: 0.031,
       note: "vs Sep",
       trend: [3820000, 3950000, 4110000, 4020000, 4380000, 4512300],
     },
     {
-      label: "Invested",
+      label: "Target",
       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: "Gross margin", value: pct(0.142), change: -0.004, trend: [0.151, 0.149, 0.152, 0.144, 0.146, 0.142] },
     {
-      label: "Realised",
+      label: "Cash flow",
       value: moneyCompact(-61200),
       change: -61200,
       changeFormat: "money",
       trend: [14200, -3800, 9100, 2600, -18400, -61200],
     },
-    { 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", trend: [38, 39, 39, 40, 39, 42] },
+    { 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="Portfolio up 3.1% in October"
+      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">
@@ -40,7 +40,7 @@ export default function MetricStripExample() {
         </ToggleGroup>
       }
       items={items}
-      footer={<p className="text-muted-foreground">Valued at the last close, 31 Oct 2026</p>}
+      footer={<p className="text-muted-foreground">Booked up to 31 Oct 2026</p>}
     />
   );
 }

package/agents/examples/page-hero.tsx

@@ -19,8 +19,8 @@ export default function PageHeroExample() {
     <PageHero
       eyebrow="@siyahi/ui"
       title="Siyahi"
-      lead="Ink for numbers. A design system for pages people read figures from: portfolios, ledgers, research."
-      detail="Stock shadcn/ui on Base UI and Tailwind v4, with a finance theme, charts and tables that fit a phone, Indian-aware formatters and a lint. Siyahi is Hindi for ink."
+      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" />}>

package/agents/examples/popover.tsx

@@ -11,11 +11,11 @@ import {
 export default function PopoverExample() {
   return (
     <Popover>
-      <PopoverTrigger render={<Button variant="outline" className="w-fit" />}>How is this priced?</PopoverTrigger>
+      <PopoverTrigger render={<Button variant="outline" className="w-fit" />}>How is this counted?</PopoverTrigger>
       <PopoverContent align="start">
         <PopoverHeader>
-          <PopoverTitle>Last close</PopoverTitle>
-          <PopoverDescription>Holdings are valued at the exchange's last closing price.</PopoverDescription>
+          <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

@@ -1,6 +1,6 @@
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, PriceChart } from "@siyahi/ui";
 
-// A made-up daily close series for one year.
+// 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 };
@@ -10,14 +10,14 @@ export default function PriceChartExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>INFY</CardTitle>
-        <CardDescription>Daily close, one year</CardDescription>
+        <CardTitle>Average order value</CardTitle>
+        <CardDescription>Daily, one year, ₹</CardDescription>
       </CardHeader>
       <CardContent>
         <PriceChart data={data} height={256} />
       </CardContent>
-      <CardFooter className="text-xs text-muted-foreground">
-        <span>
+      <CardFooter>
+        <span className="text-xs text-muted-foreground">
           Chart by{" "}
           <a
             className="text-link underline-offset-4 hover:underline"

package/agents/examples/progress-tone.tsx

@@ -1,22 +1,23 @@
 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 },
+// 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">
-      {positions.map((p) => (
-        <div key={p.symbol} className="flex items-center gap-3">
-          <span className="w-16 font-medium">{p.symbol}</span>
+      {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.realized >= 0 ? "positive" : "negative"}
+            tone={p.profit >= 0 ? "positive" : "negative"}
             value={p.share * 100}
-            aria-label={`${p.symbol}'s share of the booked P&L`}
+            aria-label={`${p.channel}'s share of the quarter's profit and loss`}
             getAriaValueText={() => pct(p.share)}
             className="w-24"
           />

package/agents/examples/progress.tsx

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