@siyahi/ui 0.1.9-next.22 → 0.1.9-next.24

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,24 +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>
-                      <span className="font-mono">{row.symbol}</span>
-                    </TableCell>
-                    <TableCell>{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,59 +10,61 @@ 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>
         <div 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.
+            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>

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>
   );
 }

package/agents/examples/treemap.tsx

@@ -14,42 +14,45 @@ import {
 } from "@siyahi/ui";
 import { useState } from "react";
 
-interface Holding extends TreemapItem {
-  broker: string;
+interface City extends TreemapItem {
+  channel: string;
 }
 
-// change is the return since bought; LT came in as a transfer, with no cost basis.
-const holdings: Holding[] = [
-  { name: "INFY", key: "INFY-kite", broker: "Kite", group: "IT", weight: 224400, change: 0.38 },
-  { name: "INFY", key: "INFY-dhan", broker: "Dhan", group: "IT", weight: 152000, change: 0.12 },
-  { name: "TCS", broker: "Kite", group: "IT", weight: 166000, change: 0.09 },
-  { name: "WIPRO", broker: "Dhan", group: "IT", weight: 98000, change: -0.21 },
-  { name: "HDFCBANK", broker: "Kite", group: "Banks", weight: 262500, change: -0.06 },
-  { name: "ICICIBANK", broker: "Kite", group: "Banks", weight: 258000, change: 0.44 },
-  { name: "SBIN", broker: "Dhan", group: "Banks", weight: 87000, change: 0.58 },
-  { name: "ITC", broker: "Kite", group: "FMCG", weight: 276000, change: 0.27 },
-  { name: "ASIANPAINT", broker: "Dhan", group: "FMCG", weight: 64000, change: -0.33 },
-  { name: "NIFTYBEES", broker: "Kite", group: "ETF", weight: 255600, change: 0.16 },
-  { name: "LT", broker: "Dhan", group: "Construction", weight: 52000, change: null },
+// weight is the month's sales in ₹ and change their growth on the same month last year; Guwahati opened this year,
+// so it has no last year to grow from. Mumbai sells online and in stores, so it draws two tiles under one name.
+const cities: City[] = [
+  { name: "Mumbai", key: "mumbai-online", channel: "Online", group: "West", weight: 224400, change: 0.38 },
+  { name: "Mumbai", key: "mumbai-stores", channel: "Stores", group: "West", weight: 152000, change: 0.12 },
+  { name: "Pune", channel: "Stores", group: "West", weight: 166000, change: 0.09 },
+  { name: "Surat", channel: "Online", group: "West", weight: 98000, change: -0.21 },
+  { name: "Bengaluru", channel: "Stores", group: "South", weight: 262500, change: -0.06 },
+  { name: "Chennai", channel: "Stores", group: "South", weight: 258000, change: 0.44 },
+  { name: "Kochi", channel: "Online", group: "South", weight: 87000, change: 0.58 },
+  { name: "Delhi", channel: "Stores", group: "North", weight: 276000, change: 0.27 },
+  { name: "Jaipur", channel: "Online", group: "North", weight: 64000, change: -0.33 },
+  { name: "Kolkata", channel: "Stores", group: "East", weight: 255600, change: 0.16 },
+  { name: "Guwahati", channel: "Online", group: "Northeast", weight: 52000, change: null },
 ];
 
 export default function TreemapExample() {
-  const [hovered, setHovered] = useState<Holding | null>(null);
-  const [selected, setSelected] = useState<Holding | null>(null);
+  const [hovered, setHovered] = useState<City | null>(null);
+  const [selected, setSelected] = useState<City | null>(null);
   const { money, pct } = useFormat();
-  const figures = (h: Holding) =>
-    `${money(h.weight)} · ${h.change === null ? "no cost basis" : `${h.change < 0 ? "▼" : "▲"} ${pct(Math.abs(h.change))}`}`;
+  const figures = (c: City) =>
+    `${money(c.weight)} · ${c.change === null ? "new this year" : `${c.change < 0 ? "\u2212" : "+"}${pct(Math.abs(c.change))}`}`;
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Holdings by sector</CardTitle>
-        <CardDescription>Area is the holding's value; colour is its return, deepest at ±60%</CardDescription>
+        <CardTitle>Sales by region</CardTitle>
+        <CardDescription>
+          Area is the city's sales this month; colour is its growth on last year, deepest at ±60%
+        </CardDescription>
       </CardHeader>
       <CardContent>
         <Tooltip open={hovered !== null} trackCursorAxis="both">
           <TooltipTrigger render={<div />}>
             <Treemap
-              items={holdings}
+              items={cities}
               height={320}
               range={0.6}
               onHover={setHovered}
@@ -62,7 +65,7 @@ export default function TreemapExample() {
               {hovered && (
                 <>
                   <span className="font-medium">
-                    {hovered.name} · {hovered.broker}
+                    {hovered.name} · {hovered.channel}
                   </span>
                   <span>{hovered.group}</span>
                   <span>{figures(hovered)}</span>
@@ -76,7 +79,7 @@ export default function TreemapExample() {
           {selected ? (
             <>
               <span className="font-medium">
-                {selected.name} · {selected.broker}
+                {selected.name} · {selected.channel}
               </span>{" "}
               · {selected.group} · {figures(selected)}
             </>

package/agents/manifest.json

@@ -16,7 +16,7 @@
   },
   "needs": [
     {
-      "need": "Values over time or another ordered axis (months, hours, price buckets)",
+      "need": "Values over time or another ordered axis (months, hours, size buckets)",
       "guidance": "`BarChartCard`, `AreaChartCard` or `LineChartCard`",
       "components": [
         "BarChartCard",
@@ -32,14 +32,14 @@
       ]
     },
     {
-      "need": "A running level, such as a portfolio's value against money put in",
+      "need": "A running level, such as revenue against its target",
       "guidance": "`AreaChartCard`",
       "components": [
         "AreaChartCard"
       ]
     },
     {
-      "need": "Series compared point by point, such as a return against an index",
+      "need": "Series compared point by point, such as growth against a benchmark",
       "guidance": "`LineChartCard`",
       "components": [
         "LineChartCard"
@@ -53,7 +53,7 @@
       ]
     },
     {
-      "need": "Long category names, such as sectors",
+      "need": "Long category names, such as teams or product categories",
       "guidance": "`BarChartCard` with `horizontal`",
       "components": [
         "BarChartCard"
@@ -118,28 +118,28 @@
       ]
     },
     {
-      "need": "Figures against their targets, such as allocation against plan",
+      "need": "Figures against their targets, such as spend against budget",
       "guidance": "`TargetRows`, with neutral `bands` and a `status` per row",
       "components": [
         "TargetRows"
       ]
     },
     {
-      "need": "Where a value sits in its range, such as a price in its 52-week range",
+      "need": "Where a value sits in its range, such as today's response time in its 30-day range",
       "guidance": "`RangePosition`; `variant=\"compact\"` in a table cell",
       "components": [
         "RangePosition"
       ]
     },
     {
-      "need": "One instrument's price history",
+      "need": "A long daily series, such as a price or an order value",
       "guidance": "`PriceChart`",
       "components": [
         "PriceChart"
       ]
     },
     {
-      "need": "Holdings sized by weight and coloured by change",
+      "need": "Items sized by weight and coloured by change, such as sales by city",
       "guidance": "`Treemap`",
       "components": [
         "Treemap"
@@ -304,10 +304,9 @@
     {
       "file": "agents/examples/alert.tsx",
       "components": [
-        "Alert",
         "AlertDescription",
         "AlertTitle",
-        "WarningAlert"
+        "StatusAlert"
       ]
     },
     {
@@ -328,7 +327,8 @@
       "file": "agents/examples/badge.tsx",
       "components": [
         "Badge",
-        "Delta"
+        "Delta",
+        "StatusBadge"
       ]
     },
     {
@@ -401,11 +401,11 @@
     {
       "file": "agents/examples/callout.tsx",
       "components": [
+        "AlertDescription",
+        "AlertTitle",
         "Callout",
         "Quote",
-        "WarningAlert",
-        "AlertDescription",
-        "AlertTitle"
+        "StatusAlert"
       ]
     },
     {
@@ -472,7 +472,7 @@
       ]
     },
     {
-      "file": "agents/examples/chart-bar-sectors.tsx",
+      "file": "agents/examples/chart-bar-teams.tsx",
       "components": [
         "BarChartCard",
         "ToggleGroup",

package/dist/components/registry/charts/bar-chart-card.d.ts

@@ -3,7 +3,7 @@ import { SeriesChartProps } from "../../../lib/chart-series.js";
 export interface BarChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K> {
   /** Stack the series in one bar per point instead of side by side. */
   stacked?: boolean;
-  /** Bars run sideways, categories down the left: for long names, such as sectors. */
+  /** Bars run sideways, categories down the left: for long names, such as product categories. */
   horizontal?: boolean;
   /** The picked category's x value: its bars stay solid and the rest fade. */
   selected?: T[K] | null;

package/dist/components/registry/charts/line-chart-card.d.ts

@@ -3,6 +3,6 @@ import { ChartCurve, NumericXProps, SeriesChartProps } from "../../../lib/chart-
 export interface LineChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps {
   curve?: ChartCurve;
 }
-/** Values over an ordered axis as lines: one series, or several to compare, such as a portfolio against its index. */
+/** Values over an ordered axis as lines: one series, or several to compare, such as sales against a target. */
 export declare function LineChartCard<T extends object, K extends keyof T>({ curve, ...props }: LineChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

package/dist/components/registry/charts/line-chart-card.js

@@ -3,7 +3,7 @@ import { ChartFrame, endDot } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
 import { Line, LineChart } from "recharts";
 //#region src/components/registry/charts/line-chart-card.tsx
-/** Values over an ordered axis as lines: one series, or several to compare, such as a portfolio against its index. */
+/** Values over an ordered axis as lines: one series, or several to compare, such as sales against a target. */
 function LineChartCard({ curve = "monotone", ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: LineChart,

package/dist/components/siyahi/callout.d.ts

@@ -1,24 +1,17 @@
+import { Tone } from "../../lib/tone.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/siyahi/callout.d.ts
-declare const TONES: {
-  readonly neutral: "border-border bg-muted/50 [&_[data-slot=callout-icon]]:text-muted-foreground";
-  readonly accent: "border-chart-1/35 bg-chart-1/8 [&_[data-slot=callout-icon]]:text-link";
-  readonly warning: "border-warning/45 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning";
-  readonly positive: "border-positive/40 bg-positive/8 [&_[data-slot=callout-icon]]:text-positive";
-  readonly negative: "border-negative/40 bg-negative/8 [&_[data-slot=callout-icon]]:text-negative";
-};
 export interface CalloutProps extends Omit<ComponentProps<"aside">, "title"> {
   /** neutral for an aside, accent for a key point, warning for a caution, positive or negative for a gain or a loss. */
-  tone?: keyof typeof TONES;
+  tone?: Tone;
   /** A lucide icon, drawn in the tone's colour. */
   icon?: ReactNode;
   title?: ReactNode;
 }
 /**
  * A point set apart from the prose: a takeaway, a caveat, a definition. The whole box takes the tone, a faint wash
- * inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use Alert or
- * WarningAlert instead.
+ * inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use StatusAlert
+ * instead.
  */
 export declare function Callout({ tone, icon, title, className, children, ...props }: CalloutProps): import("react").JSX.Element;
-//#endregion
-export {};
+//#endregion

package/dist/components/siyahi/callout.js

@@ -1,28 +1,22 @@
+import { TONES } from "../../lib/tone.js";
 import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/siyahi/callout.tsx
-const TONES = {
-	neutral: "border-border bg-muted/50 [&_[data-slot=callout-icon]]:text-muted-foreground",
-	accent: "border-chart-1/35 bg-chart-1/8 [&_[data-slot=callout-icon]]:text-link",
-	warning: "border-warning/45 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning",
-	positive: "border-positive/40 bg-positive/8 [&_[data-slot=callout-icon]]:text-positive",
-	negative: "border-negative/40 bg-negative/8 [&_[data-slot=callout-icon]]:text-negative"
-};
 /**
 * A point set apart from the prose: a takeaway, a caveat, a definition. The whole box takes the tone, a faint wash
-* inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use Alert or
-* WarningAlert instead.
+* inside a border of the same colour; never a single coloured edge. For a notice that interrupts, use StatusAlert
+* instead.
 */
 function Callout({ tone = "neutral", icon, title, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("aside", {
 		"data-slot": "callout",
 		"data-tone": tone,
-		className: cn("flex gap-3 rounded-lg border px-4 py-3 text-sm", TONES[tone], className),
+		className: cn("flex gap-3 rounded-lg border px-4 py-3 text-sm", TONES[tone].box, className),
 		...props,
 		children: [icon && /* @__PURE__ */ jsx("span", {
 			"data-slot": "callout-icon",
 			"aria-hidden": true,
-			className: "mt-0.5 shrink-0 [&>svg]:size-4",
+			className: cn("mt-0.5 shrink-0 [&>svg]:size-4", TONES[tone].ink),
 			children: icon
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-col gap-1",