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

package/agents/examples/chart-bar-teams.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { BarChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Each team's share of this year's spend against a comparison; made-up figures.
+const SHARES = {
+  Plan: [
+    { team: "Engineering and Infrastructure", actual: 0.34, comparison: 0.37 },
+    { team: "Sales and Business Development", actual: 0.21, comparison: 0.13 },
+    { team: "Finance, Legal & Compliance", actual: 0.06, comparison: 0.1 },
+    { team: "Marketing and Communications", actual: 0.12, comparison: 0.08 },
+    { team: "Customer Support and Success", actual: 0.09, comparison: 0.07 },
+    { team: "Operations", actual: 0.08, comparison: 0.04 },
+  ],
+  "Last year": [
+    { team: "Engineering and Infrastructure", actual: 0.34, comparison: 0.31 },
+    { team: "Sales and Business Development", actual: 0.21, comparison: 0.1 },
+    { team: "Finance, Legal & Compliance", actual: 0.06, comparison: 0.08 },
+    { team: "Marketing and Communications", actual: 0.12, comparison: 0.07 },
+    { team: "Customer Support and Success", actual: 0.09, comparison: 0.07 },
+    { team: "Operations", actual: 0.08, comparison: 0.06 },
+  ],
+};
+type Comparison = keyof typeof SHARES;
+type Row = (typeof SHARES)[Comparison][number];
+
+export default function ChartBarTeamsExample() {
+  const { pct } = useFormat();
+  const [comparison, setComparison] = useState<Comparison>("Plan");
+  const rows = SHARES[comparison];
+  const series: ChartSeries<Row> = [
+    { key: "actual", label: "This year", color: "var(--chart-1)" },
+    { key: "comparison", label: comparison, color: "var(--chart-2)" },
+  ];
+  const gap = (row: Row) => {
+    const points = Math.abs(row.actual - row.comparison) * 100;
+    return row.actual >= row.comparison ? `+${points.toFixed(1)} pts over` : `\u2212${points.toFixed(1)} pts under`;
+  };
+  return (
+    <BarChartCard
+      title="Spend by team against plan or last year"
+      description="Each team's share of this year's spend and of the comparison"
+      action={
+        <ToggleGroup
+          value={[comparison]}
+          onValueChange={([next]) => {
+            // Pressing the selected comparison again would leave none selected; keep it.
+            if (next) setComparison(next as Comparison);
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Compare with"
+        >
+          <ToggleGroupItem value="Plan">Plan</ToggleGroupItem>
+          <ToggleGroupItem value="Last year">Last year</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      horizontal
+      data={rows}
+      xKey="team"
+      xTickDetail={(row) => `${pct(row.actual)} vs ${pct(row.comparison)} · ${gap(row)}`}
+      series={series}
+      valueFormatter={(v) => pct(v)}
+      // A tick format puts the value axis along the bottom of the sideways bars.
+      yTickFormatter={(v) => pct(v, 0)}
+      // Sideways, y is still the value: the axis runs 0 to 40% and the cap is a value level.
+      yDomain={[0, 0.4]}
+      referenceLines={[{ y: 0.3, label: "cap 30%", labelPosition: "insideBottomRight" }]}
+      height={rows.length * 56 + 48}
+      footer={<p className="text-muted-foreground">Salaries are left out; they are budgeted separately.</p>}
+    />
+  );
+}

package/agents/examples/chart-bar-years.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
 
-// Net realized gain per financial year (April to March); made-up figures.
+// Net profit per financial year (April to March); made-up figures.
 const data = [
   { fy: "FY22", net: 142000 },
   { fy: "FY23", net: 186000 },
@@ -12,19 +12,19 @@ const data = [
 
 // A gain and a loss take the meaning colours; the arrow in each tick says the same without colour.
 const series: ChartSeries<(typeof data)[number]> = [
-  { key: "net", label: "Net realized", color: "var(--positive)", negativeColor: "var(--negative)" },
+  { key: "net", label: "Net profit", color: "var(--positive)", negativeColor: "var(--negative)" },
 ];
 
 export default function ChartBarYearsExample() {
   const { money, moneyCompact } = useFormat();
   // The page owns the pick, so it can narrow the rest of the page to that year.
   const [year, setYear] = useState<string | null>(null);
-  const signed = (v: number) => `${v < 0 ? "▼" : "▲"}${moneyCompact(Math.abs(v))}`;
+  const signed = (v: number) => `${v < 0 ? "\u2212" : "+"}${moneyCompact(Math.abs(v))}`;
   return (
     <BarChartCard
-      title="Realized by financial year"
+      title="Profit by financial year"
       description={
-        year ? `${year} picked; click it again for every year` : "April to March, gross. Click a year to pick it."
+        year ? `${year} picked; click it again for every year` : "April to March, before tax. Click a year to pick it."
       }
       data={data}
       xKey="fy"

package/agents/examples/chart-bar.tsx

@@ -2,20 +2,20 @@ import { useState } from "react";
 import { BarChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
 
 const data = [
-  { quarter: "Q1", equity: 120000, debt: 40000, gold: 15000, cash: 9000, reits: 4000 },
-  { quarter: "Q2", equity: 95000, debt: 52000, gold: 20000, cash: 6000, reits: 3000 },
-  { quarter: "Q3", equity: 140000, debt: 38000, gold: 12000, cash: 11000, reits: 5000 },
-  { quarter: "Q4", equity: 160000, debt: 45000, gold: 25000, cash: 7000, reits: 2000 },
+  { quarter: "Q1", online: 120000, retail: 40000, wholesale: 15000, marketplace: 9000, events: 4000 },
+  { quarter: "Q2", online: 95000, retail: 52000, wholesale: 20000, marketplace: 6000, events: 3000 },
+  { quarter: "Q3", online: 140000, retail: 38000, wholesale: 12000, marketplace: 11000, events: 5000 },
+  { quarter: "Q4", online: 160000, retail: 45000, wholesale: 25000, marketplace: 7000, events: 2000 },
 ];
 
 // Series take the slots in order: neighbours differ in lightness, slots two
 // apart differ in hue.
 const series: ChartSeries<(typeof data)[number]> = [
-  { key: "equity", label: "Equity", color: "var(--chart-1)" },
-  { key: "debt", label: "Debt", color: "var(--chart-2)" },
-  { key: "gold", label: "Gold", color: "var(--chart-3)" },
-  { key: "cash", label: "Cash", color: "var(--chart-4)" },
-  { key: "reits", label: "REITs", color: "var(--chart-5)" },
+  { key: "online", label: "Online", color: "var(--chart-1)" },
+  { key: "retail", label: "Retail", color: "var(--chart-2)" },
+  { key: "wholesale", label: "Wholesale", color: "var(--chart-3)" },
+  { key: "marketplace", label: "Marketplace", color: "var(--chart-4)" },
+  { key: "events", label: "Events", color: "var(--chart-5)" },
 ];
 
 export default function ChartBarExample() {
@@ -23,7 +23,7 @@ export default function ChartBarExample() {
   const [layout, setLayout] = useState("grouped");
   return (
     <BarChartCard
-      title="Money invested by quarter"
+      title="Revenue by channel and quarter"
       description={
         layout === "grouped"
           ? "All five chart colours side by side, in series order"

package/agents/examples/chart-category-ticks.tsx

@@ -30,15 +30,15 @@ export default function ChartCategoryTicksExample() {
         height={300}
       />
       <BarChartCard
-        title="Orders by sector"
+        title="Orders by category"
         description="Demo orders; one long category label on a narrow chart"
         data={[
-          { sector: "Information Technology and Services", orders: 100 },
-          { sector: "Other", orders: 50 },
-          { sector: "Third", orders: 70 },
+          { category: "Home Appliances and Kitchen Equipment", orders: 100 },
+          { category: "Other", orders: 50 },
+          { category: "Third", orders: 70 },
         ]}
-        xKey="sector"
-        xTicks={["Information Technology and Services"]}
+        xKey="category"
+        xTicks={["Home Appliances and Kitchen Equipment"]}
         series={[{ key: "orders", label: "Orders", color: "var(--chart-1)" }]}
         horizontal
         height={220}

package/agents/examples/chart-line.tsx

@@ -2,26 +2,26 @@ import { useState } from "react";
 import { LineChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
 
 const cumulative = [
-  { month: "May", portfolio: 0.012, index: 0.008 },
-  { month: "Jun", portfolio: 0.021, index: 0.015 },
-  { month: "Jul", portfolio: 0.034, index: 0.029 },
-  { month: "Aug", portfolio: -0.006, index: 0.004 },
-  { month: "Sep", portfolio: 0.041, index: 0.031 },
-  { month: "Oct", portfolio: 0.052, index: 0.036 },
+  { month: "May", store: 0.012, category: 0.008 },
+  { month: "Jun", store: 0.021, category: 0.015 },
+  { month: "Jul", store: 0.034, category: 0.029 },
+  { month: "Aug", store: -0.006, category: 0.004 },
+  { month: "Sep", store: 0.041, category: 0.031 },
+  { month: "Oct", store: 0.052, category: 0.036 },
 ];
 
 const monthly = [
-  { month: "May", portfolio: 0.012, index: 0.008 },
-  { month: "Jun", portfolio: 0.009, index: 0.007 },
-  { month: "Jul", portfolio: 0.013, index: 0.014 },
-  { month: "Aug", portfolio: -0.039, index: -0.024 },
-  { month: "Sep", portfolio: 0.047, index: 0.027 },
-  { month: "Oct", portfolio: 0.011, index: 0.005 },
+  { month: "May", store: 0.012, category: 0.008 },
+  { month: "Jun", store: 0.009, category: 0.007 },
+  { month: "Jul", store: 0.013, category: 0.014 },
+  { month: "Aug", store: -0.039, category: -0.024 },
+  { month: "Sep", store: 0.047, category: 0.027 },
+  { month: "Oct", store: 0.011, category: 0.005 },
 ];
 
 const series: ChartSeries<(typeof cumulative)[number]> = [
-  { key: "portfolio", label: "Portfolio", color: "var(--chart-1)" },
-  { key: "index", label: "Nifty 50", color: "var(--chart-2)" },
+  { key: "store", label: "Our store", color: "var(--chart-1)" },
+  { key: "category", label: "Category average", color: "var(--chart-2)" },
 ];
 
 export default function ChartLineExample() {
@@ -29,7 +29,7 @@ export default function ChartLineExample() {
   const [mode, setMode] = useState("cumulative");
   return (
     <LineChartCard
-      title="Return against the index"
+      title="Sales growth against the category"
       description={mode === "cumulative" ? "Cumulative, from the start of May" : "Each month on its own"}
       action={
         <ToggleGroup
@@ -42,8 +42,8 @@ export default function ChartLineExample() {
           size="sm"
           aria-label="Mode"
         >
-          <ToggleGroupItem value="cumulative">Cumulative return</ToggleGroupItem>
-          <ToggleGroupItem value="monthly">Monthly return</ToggleGroupItem>
+          <ToggleGroupItem value="cumulative">Cumulative growth</ToggleGroupItem>
+          <ToggleGroupItem value="monthly">Monthly growth</ToggleGroupItem>
         </ToggleGroup>
       }
       data={mode === "cumulative" ? cumulative : monthly}

package/agents/examples/collapsible.tsx

@@ -6,10 +6,12 @@ export default function CollapsibleExample() {
     <Collapsible className="flex max-w-sm flex-col gap-2">
       <CollapsibleTrigger render={<Button variant="outline" className="w-fit" />}>
         <ChevronsUpDownIcon />
-        How lots are matched
+        How refunds are counted
       </CollapsibleTrigger>
-      <CollapsibleContent className="text-muted-foreground">
-        Sells are matched to the oldest buy first, as the tax rules require.
+      <CollapsibleContent>
+        <p className="text-muted-foreground">
+          A refund comes off the month the order was placed in, not the month it was paid.
+        </p>
       </CollapsibleContent>
     </Collapsible>
   );

package/agents/examples/command.tsx

@@ -1,27 +1,29 @@
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@siyahi/ui";
-import { ChartLineIcon, LandmarkIcon, WalletIcon } from "lucide-react";
+import { ChartLineIcon, PackageIcon, UsersIcon } from "lucide-react";
 
 export default function CommandExample() {
   return (
-    <Command className="rounded-lg border">
-      <CommandInput placeholder="Jump to a page" />
-      <CommandList>
-        <CommandEmpty>No page matches.</CommandEmpty>
-        <CommandGroup heading="Pages">
-          <CommandItem>
-            <WalletIcon />
-            Holdings
-          </CommandItem>
-          <CommandItem>
-            <ChartLineIcon />
-            Realized
-          </CommandItem>
-          <CommandItem>
-            <LandmarkIcon />
-            Cash flow
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
+    <div className="overflow-hidden rounded-lg border">
+      <Command>
+        <CommandInput placeholder="Jump to a page" />
+        <CommandList>
+          <CommandEmpty>No page matches.</CommandEmpty>
+          <CommandGroup heading="Pages">
+            <CommandItem>
+              <PackageIcon />
+              Orders
+            </CommandItem>
+            <CommandItem>
+              <ChartLineIcon />
+              Revenue
+            </CommandItem>
+            <CommandItem>
+              <UsersIcon />
+              Customers
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </div>
   );
 }

package/agents/examples/context-menu.tsx

@@ -3,12 +3,14 @@ import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger }
 export default function ContextMenuExample() {
   return (
     <ContextMenu>
-      <ContextMenuTrigger className="flex h-24 w-full items-center justify-center rounded-lg border border-dashed text-muted-foreground">
-        Right-click or long-press here
+      <ContextMenuTrigger className="w-full">
+        <div className="flex h-24 items-center justify-center rounded-lg border border-dashed text-muted-foreground">
+          Right-click or long-press here
+        </div>
       </ContextMenuTrigger>
       <ContextMenuContent>
-        <ContextMenuItem>Copy symbol</ContextMenuItem>
-        <ContextMenuItem>Open chart</ContextMenuItem>
+        <ContextMenuItem>Copy order number</ContextMenuItem>
+        <ContextMenuItem>Open order</ContextMenuItem>
       </ContextMenuContent>
     </ContextMenu>
   );

package/agents/examples/data-bar.tsx

@@ -15,36 +15,27 @@ import {
   type DataTableColumnDef,
 } from "@siyahi/ui";
 
-interface Holding {
-  symbol: string;
-  value: number;
-  gain: number;
-  /** Closing prices over the last ten sessions, oldest first. */
-  closes: number[];
+interface Store {
+  store: string;
+  /** This month's sales, and their change on last month, in rupees; made-up figures. */
+  sales: number;
+  change: number;
+  /** Orders on each of the last ten days, oldest first. */
+  daily: number[];
 }
 
-const holdings: Holding[] = [
-  { symbol: "ITC", value: 276000, gain: -18400, closes: [478, 474, 470, 471, 466, 463, 465, 461, 459, 460] },
-  {
-    symbol: "HDFCBANK",
-    value: 262500,
-    gain: 21300,
-    closes: [1712, 1718, 1726, 1720, 1731, 1744, 1739, 1748, 1752, 1750],
-  },
-  {
-    symbol: "ICICIBANK",
-    value: 258000,
-    gain: 44100,
-    closes: [1250, 1262, 1258, 1271, 1266, 1280, 1284, 1279, 1288, 1290],
-  },
-  { symbol: "NIFTYBEES", value: 255600, gain: 12800, closes: [281, 282, 280, 283, 284, 283, 285, 284, 286, 284] },
-  { symbol: "INFY", value: 224400, gain: 30900, closes: [1820, 1834, 1829, 1841, 1852, 1848, 1860, 1855, 1866, 1870] },
-  { symbol: "TCS", value: 166000, gain: -2600, closes: [4180, 4172, 4165, 4170, 4158, 4150, 4161, 4155, 4148, 4150] },
+const stores: Store[] = [
+  { store: "Delhi", sales: 276000, change: -18400, daily: [478, 474, 470, 471, 466, 463, 465, 461, 459, 460] },
+  { store: "Bengaluru", sales: 262500, change: 21300, daily: [312, 318, 326, 320, 331, 344, 339, 348, 352, 350] },
+  { store: "Chennai", sales: 258000, change: 44100, daily: [250, 262, 258, 271, 266, 280, 284, 279, 288, 290] },
+  { store: "Kolkata", sales: 255600, change: 12800, daily: [281, 282, 280, 283, 284, 283, 285, 284, 286, 284] },
+  { store: "Mumbai", sales: 224400, change: 30900, daily: [220, 234, 229, 241, 252, 248, 260, 255, 266, 270] },
+  { store: "Pune", sales: 166000, change: -2600, daily: [180, 172, 165, 170, 158, 150, 161, 155, 148, 150] },
 ];
 
 // Each bar is a share of its column's largest figure, so the rows draw to one scale.
-const largestValue = Math.max(...holdings.map((h) => h.value));
-const largestGain = Math.max(...holdings.map((h) => Math.abs(h.gain)));
+const largestSales = Math.max(...stores.map((s) => s.sales));
+const largestChange = Math.max(...stores.map((s) => Math.abs(s.change)));
 
 function Money({ amount }: { amount: number }) {
   return useFormat().money(amount);
@@ -52,41 +43,41 @@ function Money({ amount }: { amount: number }) {
 
 const header = () => <DataTableSortHeader />;
 
-const columns: DataTableColumnDef<Holding>[] = [
-  { accessorKey: "symbol", header, size: 120, meta: { label: "Symbol" } },
+const columns: DataTableColumnDef<Store>[] = [
+  { accessorKey: "store", header, size: 120, meta: { label: "Store" } },
   {
-    accessorKey: "value",
+    accessorKey: "sales",
     header,
     size: 170,
-    meta: { label: "Value", variant: "number" },
+    meta: { label: "Sales", variant: "number" },
     cell: ({ row }) => (
-      <DataBar value={row.original.value} max={largestValue}>
-        <Money amount={row.original.value} />
+      <DataBar value={row.original.sales} max={largestSales}>
+        <Money amount={row.original.sales} />
       </DataBar>
     ),
   },
   {
-    accessorKey: "gain",
+    accessorKey: "change",
     header,
     size: 170,
-    meta: { label: "Gain", variant: "number" },
+    meta: { label: "vs last month", variant: "number" },
     cell: ({ row }) => (
-      <DataBar value={row.original.gain} max={largestGain} tone="sign">
-        <Money amount={row.original.gain} />
+      <DataBar value={row.original.change} max={largestChange} tone="sign">
+        <Money amount={row.original.change} />
       </DataBar>
     ),
   },
   {
-    id: "closes",
+    id: "daily",
     header: "10 days",
     size: 110,
     enableSorting: false,
     cell: ({ row }) => {
-      const { closes } = row.original;
-      const rising = (closes.at(-1) ?? 0) >= (closes[0] ?? 0);
+      const { daily } = row.original;
+      const rising = (daily.at(-1) ?? 0) >= (daily[0] ?? 0);
       return (
         <Sparkline
-          data={closes}
+          data={daily}
           variant="line"
           color={rising ? "var(--positive)" : "var(--negative)"}
           animate={false}
@@ -101,15 +92,11 @@ export default function DataBarExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Holdings</CardTitle>
+        <CardTitle>Stores</CardTitle>
         <CardDescription>Bars give each figure's size against the column's largest</CardDescription>
       </CardHeader>
       <CardContent>
-        <DataTableRoot
-          data={holdings}
-          columns={columns}
-          initialState={{ columnPinning: { start: ["symbol"], end: [] } }}
-        >
+        <DataTableRoot data={stores} columns={columns} initialState={{ columnPinning: { start: ["store"], end: [] } }}>
           <DataTable>
             <DataTableHeader />
             <DataTableBody />

package/agents/examples/data-table-compact.tsx

@@ -18,52 +18,53 @@ 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 },
+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 },
 ];
 
 const header = () => <DataTableSortHeader />;
 
-// While the Day column is hidden to fit, the day's move rides under the value it belongs to.
-function ValueCell({ holding }: { holding: Holding }) {
+// While the Week column is hidden to fit, the week's change rides under the revenue it belongs to.
+function RevenueCell({ product }: { product: Product }) {
   const format = useFormat();
-  const { compactColumns } = useDataTable<Holding>();
-  if (!compactColumns?.hidden.has("change")) return format.money(holding.value);
+  const { compactColumns } = useDataTable<Product>();
+  if (!compactColumns?.hidden.has("change")) return format.money(product.revenue);
   return (
     <div className="flex flex-col items-end">
-      {format.money(holding.value)}
-      <Delta value={holding.change} />
+      {format.money(product.revenue)}
+      <Delta value={product.change} />
     </div>
   );
 }
 
-const columns: DataTableColumnDef<Holding>[] = [
-  { accessorKey: "symbol", header, size: 140, meta: { label: "Symbol", compact: true } },
-  { 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", compact: true } },
+  { 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", compact: true },
-    cell: ({ row }) => <ValueCell holding={row.original} />,
+    meta: { label: "Revenue", variant: "number", compact: true },
+    cell: ({ row }) => <RevenueCell product={row.original} />,
   },
   {
     accessorKey: "change",
     header,
     size: 110,
-    meta: { label: "Day", variant: "number" },
+    meta: { label: "Week", variant: "number" },
     cell: ({ row }) => <Delta value={row.original.change} />,
   },
 ];
@@ -72,19 +73,19 @@ export default function DataTableCompactExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Holdings on a phone</CardTitle>
+        <CardTitle>Products on a phone</CardTitle>
         <CardDescription>
-          Symbol and value are the key columns. When the columns do not fit, the others hide from the right, and the
-          day's move rides under the value once its column is gone; All columns brings back the rest
+          Product and revenue are the key columns. When the columns do not fit, the others hide from the right, and the
+          week's change rides under the revenue once its column is gone; All columns brings back the rest
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <DataTableRoot data={holdings} columns={columns}>
+        <DataTableRoot data={products} columns={columns}>
           <DataTableToolbarSection>
             <DataTableCompactColumnsToggle />
-            <DataTableRowCount unit="holdings" />
+            <DataTableRowCount unit="products" />
           </DataTableToolbarSection>
-          <DataTable aria-label="Holdings on a phone">
+          <DataTable aria-label="Products on a phone">
             <DataTableHeader />
             <DataTableBody />
           </DataTable>

package/agents/examples/data-table-filters.tsx

@@ -26,30 +26,30 @@ import {
   type DataTableColumnDef,
 } from "@siyahi/ui";
 
-interface Holding {
-  symbol: string;
-  sector: string;
-  broker: string;
+interface Order {
+  order: string;
+  status: string;
+  warehouse: string;
 }
-const data: Holding[] = [
-  { symbol: "INFY", sector: "Information technology", broker: "Kite" },
-  { symbol: "HDFCBANK", sector: "Banks", broker: "Dhan" },
-  { symbol: "TCS", sector: "Information technology", broker: "Dhan" },
+const data: Order[] = [
+  { order: "ORD-1042", status: "Out for delivery", warehouse: "Bhiwandi" },
+  { order: "ORD-1043", status: "Packed", warehouse: "Hosur" },
+  { order: "ORD-1044", status: "Out for delivery", warehouse: "Hosur" },
 ];
 const header = () => <DataTableSortHeader />;
-const columns: DataTableColumnDef<Holding>[] = [
-  { accessorKey: "symbol", header, size: 140, meta: { label: "Instrument" } },
-  { accessorKey: "sector", header, meta: { label: "Sector" } },
-  { accessorKey: "broker", header, meta: { label: "Broker" } },
+const columns: DataTableColumnDef<Order>[] = [
+  { accessorKey: "order", header, size: 140, meta: { label: "Order" } },
+  { accessorKey: "status", header, meta: { label: "Status" } },
+  { accessorKey: "warehouse", header, meta: { label: "Warehouse" } },
 ];
 
 function Filters() {
-  const { table, isCompact } = useDataTable<Holding>();
+  const { table, isCompact } = useDataTable<Order>();
   const active = table.state.columnFilters.length;
   const controls = (
     <div className="flex flex-wrap gap-2">
-      <DataTableFacetedFilter accessorKey="sector" title="Sector" />
-      <DataTableFacetedFilter accessorKey="broker" title="Broker" />
+      <DataTableFacetedFilter accessorKey="status" title="Status" />
+      <DataTableFacetedFilter accessorKey="warehouse" title="Warehouse" />
     </div>
   );
   if (!isCompact) return controls;
@@ -58,7 +58,7 @@ function Filters() {
       <SheetTrigger render={<Button variant="outline" size="sm" />}>Filters{active ? ` (${active})` : ""}</SheetTrigger>
       <SheetContent>
         <SheetHeader>
-          <SheetTitle>Holding filters</SheetTitle>
+          <SheetTitle>Order filters</SheetTitle>
           <SheetDescription>Selections stay applied when this panel closes.</SheetDescription>
         </SheetHeader>
         <div className="overflow-y-auto px-4">{controls}</div>
@@ -77,7 +77,7 @@ export default function DataTableFiltersExample() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Holdings with compact filters</CardTitle>
+        <CardTitle>Orders with compact filters</CardTitle>
         <CardDescription>Search stays visible; secondary filters move into a panel in narrow space.</CardDescription>
       </CardHeader>
       <CardContent>
@@ -86,13 +86,13 @@ export default function DataTableFiltersExample() {
           <DataTableToolbarSection>
             <DataTableSearchFilter
               label="Search compact example"
-              placeholder="Search holdings…"
+              placeholder="Search orders…"
               className="w-full flex-none sm:w-64"
             />
             <Filters />
-            <DataTableRowCount unit="holdings" />
+            <DataTableRowCount unit="orders" />
           </DataTableToolbarSection>
-          <DataTable aria-label="Holdings with compact filters">
+          <DataTable aria-label="Orders with compact filters">
             <DataTableHeader />
             <DataTableBody />
           </DataTable>