@siyahi/ui 0.1.9-next.29 → 0.1.9-next.30

package/DESIGN.md

@@ -10,8 +10,8 @@ component; this file says how to use them.
 Colour is placed, not spread. A page is neutral greys plus colour that carries
 a meaning:
 
-- **Ink indigo** is the accent: links, focus rings, the selected sidebar item,
-  the first chart series and an `accent` `Callout`. Buttons, badges and toggles
+- **Ink indigo** is the accent: links, the selected sidebar item, the first
+  chart series, a chart's "today" rule and an `accent` `Callout`. Buttons, badges, toggles and focus
   stay monochrome.
 - **Green and red** mean a gain and a loss. A signed figure is `Delta`: the figure in the text colour with its
   `+` or `−`, and only a small trend icon in green or red. In plain text (labels, tooltips) write the sign; never
@@ -22,8 +22,9 @@ a meaning:
   apart is `Callout` (`neutral`, `accent`, `warning`, `positive`,
   `negative`); a quotation is `Quote`. Each takes a faint wash of its colour
   inside a 1px border of the same colour all round. Large marks follow the same
-  rule: gain and loss bars are a tint inside a full-colour edge, not solid
-  slabs.
+  rule: every bar is a tint inside a 1px full-colour edge, not a solid slab.
+  A bar is read by its edge, which reaches 3:1 against the card; the tint is a
+  fill carried by that edge.
 - **Never a stripe down one side.** Do not mark a notice, card, row or quote
   with a left (or any single-side) coloured border; tint the box or add an
   icon. 1px neutral dividers between columns are separators, not accents, and
@@ -33,8 +34,13 @@ a meaning:
   canvas and the card; dividers, card rings, gridlines and the outlines of
   buttons, toggles and code blocks are the `--border` hairline (the text colour
   at 18% in light, white at 20% in dark), firm enough to carry the page's
-  structure. Focus is an opaque
-  `--ring`, or the opaque destructive red on a destructive control. A selected
+  structure. Focus is drawn inside the control, so no neighbour or clipping box
+  covers it: a 2px ring in the text colour (`--ring`) on its edge with a 2px
+  ring of the page colour inside, which reads on a black, white or hovered
+  fill alike. A field shows it as its own edge, 2px in the text colour; a chart
+  mark as a dashed stroke, apart from a picked mark's solid one. A destructive
+  control and an invalid field focus in the destructive red. Menu items show
+  focus as their highlight. A selected
   toggle or pill tab fills with the foreground. A chart bar that a selection
   dims keeps its full-colour outline and fades only inside.
 - **Destructive is not loss.** `--destructive` (delete, an invalid field) is a
@@ -82,6 +88,9 @@ mono face and the link colour, so the text can point to one.
   `rounded-*` class to a box.
 - **Joined toggles.** The items of a `ToggleGroup` sit flush and share their
   borders, one control; the pressed item fills with the foreground.
+- **A code block's copy button sits in a header row** (`CodeBlockHeader`),
+  beside its title or alone, never floating over the code, where it would
+  cover the end of a line. An untitled snippet takes the extra row.
 - Badges stay boxed (an outline), the primary button and the pressed toggle
   black (white in dark), titles in the sans face, at normal spacing.
 
@@ -93,9 +102,69 @@ the actions at the right, and a hairline under it. One per page; no hero card.
 
 ## Labels and totals
 
-- **Labels over figures are small monospaced capitals**: a stat tile's label
-  and footer lines, a `MetricStrip` label, a table's column heads. The
-  components and the theme set them; never set a label in this style by hand
-  elsewhere, and never set a figure or a title in it.
+- **Labels are small monospaced capitals**: a stat tile's label and footer
+  lines, a `MetricStrip` label, a table's column heads, a sidebar group's
+  label, and a form field's label (muted, above the field). The components and
+  the theme set them; never set a label in this style by hand elsewhere, and
+  never set a figure or a title in it.
 - **A total row reads as a ledger's**: in `TableFooter`, one rule above it and
   a double rule under it in the text colour, no band.
+
+## Charts
+
+- **Names at the line ends.** A line chart and overlapping areas name each
+  series at its line's end, in the text colour beside a square of its colour,
+  in a gutter after the last point; ends that crowd are spread 14px apart with
+  a short leader. A legend goes below instead on a card under 400px wide (a
+  phone), where the names would take more than 30% of it or not fit the
+  plot's height, and where a line ends short of the plot's right edge (a
+  missing last reading, a single point, an x axis running past the data). Bars and stacks
+  keep a legend.
+- **Five colours, then grey.** Past five series, the page names the few it is
+  about in chart colours and gives the rest `var(--muted-foreground)`: they
+  draw first, in grey. Every line is still named: a grey one's name at its end
+  is muted with no square, and its place says which line it is. Never a count
+  standing in for names. In the legend a grey name is a button that raises its
+  line in the text colour, since a shared grey square cannot tell lines apart;
+  a stack's grey bands read in the legend's order, bottom to top.
+- **No fill under overlapping areas**: from three series on, fills bury each
+  other. A stack fills each band with a flat tint, never a gradient.
+- **Forecast and today.** `forecastFrom` dashes every line from that point,
+  hatches the stretch faintly behind lines on card-coloured halos, labels it
+  FORECAST and hollows the end dots (a stack keeps solid edges and no hatching:
+  its fills cover the stretch);
+  `today` is a 1px rule in the link colour, labelled TODAY.
+- Gridlines are solid hairlines. Lines draw in left to right over 1.3s on
+  first draw, a stack's fills revealed with them; then the names fade in, and
+  each end dot as its line finishes; bars fade in rather than grow. Reduced
+  motion shows them at once.
+- **Stale data is marked by the page**: `stale` on a chart card or a
+  `SectionCards` tile, with since when ("3 Nov"). The block greys and its
+  chart or sparkline draws at about 65% strength, a tile's figure and badge
+  turn muted, and a small "Stale · 3 Nov" note says so. A stale block is meant
+  to be harder to read, so its marks are exempt from the 3:1 mark bar; the
+  note and the figure keep their text contrast. Never infer it from dates.
+
+## Tables
+
+Tables are dense, as a ledger is: compact rows, a 1px rule in the text colour
+under the column heads, the first column (what the row is) in medium weight,
+and figures in the mono face. A figure is a cell marked `data-numeric`, which
+also right-aligns it (the data table marks its number columns; a plain
+`TableCell` or `TableHead` takes the attribute), and any `Delta` in a cell.
+Alignment alone is not a figure. Row hairlines stay; never stripes, never
+column rules.
+
+## Forms
+
+- Every field is a `Field` with a `FieldLabel` above the control, a
+  `FieldDescription` hint or a `FieldError` under it. Never write a bare
+  `<label>` with its own styles.
+- An invalid field (`aria-invalid` on the control, `data-invalid` on its
+  `Field`) keeps its red edge and takes a faint red wash.
+
+## Sidebar
+
+The sidebar is parted from the page by a hairline on its page-side edge, its
+group labels are small monospaced capitals and its rows are compact. Its fill,
+icons and the current page's mark stay as shadcn draws them.

package/agents/examples/avatar.tsx

@@ -1,14 +1,24 @@
-import { Avatar, AvatarFallback } from "@siyahi/ui";
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup } from "@siyahi/ui";
 
 export default function AvatarExample() {
   return (
-    <div className="flex gap-2">
+    <div className="flex items-center gap-6">
       <Avatar>
         <AvatarFallback>JB</AvatarFallback>
       </Avatar>
-      <Avatar>
-        <AvatarFallback>HU</AvatarFallback>
-      </Avatar>
+      {/* A group overlaps its avatars; the first one's badge stays over its neighbour. */}
+      <AvatarGroup>
+        <Avatar>
+          <AvatarFallback>JB</AvatarFallback>
+          <AvatarBadge aria-label="Online" />
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>HU</AvatarFallback>
+        </Avatar>
+        <Avatar>
+          <AvatarFallback>AK</AvatarFallback>
+        </Avatar>
+      </AvatarGroup>
     </div>
   );
 }

package/agents/examples/chart-line-forecast.tsx

@@ -0,0 +1,36 @@
+import { LineChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Net worth's growth against the plan since May; November and December are a forecast.
+const worth = [
+  { month: "May", actual: 0, plan: 0 },
+  { month: "Jun", actual: 0.025, plan: 0.022 },
+  { month: "Jul", actual: 0.061, plan: 0.044 },
+  { month: "Aug", actual: 0.047, plan: 0.067 },
+  { month: "Sep", actual: 0.11, plan: 0.089 },
+  { month: "Oct", actual: 0.156, plan: 0.111 },
+  { month: "Nov", actual: 0.177, plan: 0.133 },
+  { month: "Dec", actual: 0.202, plan: 0.156 },
+];
+const series: ChartSeries<(typeof worth)[number]> = [
+  { key: "actual", label: "Net worth", color: "var(--chart-1)" },
+  { key: "plan", label: "Plan", color: "var(--chart-2)" },
+];
+
+// Today is a rule in the link colour; from forecastFrom the lines dash, a hatched band covers the stretch and the end
+// dots are hollow.
+export default function ChartLineForecastExample() {
+  const { pct } = useFormat();
+  return (
+    <LineChartCard
+      title="Growth against plan"
+      description="Since May, month-end; November and December are a forecast"
+      data={worth}
+      xKey="month"
+      series={series}
+      today="Oct"
+      forecastFrom="Oct"
+      valueFormatter={pct}
+      height={256}
+    />
+  );
+}

package/agents/examples/chart-line-quiet.tsx

@@ -0,0 +1,114 @@
+import { LineChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Eight funds' month-end growth; November and December are a forecast.
+const growth = [
+  { month: "May", flexi: 0, debt: 0, small: 0, intl: 0, liquid: 0, midcap: 0, nifty: 0, gold: 0 },
+  {
+    month: "Jun",
+    flexi: 0.018,
+    debt: 0.006,
+    small: 0.034,
+    intl: 0.012,
+    liquid: 0.005,
+    midcap: 0.022,
+    nifty: 0.025,
+    gold: 0.041,
+  },
+  {
+    month: "Jul",
+    flexi: 0.049,
+    debt: 0.013,
+    small: 0.012,
+    intl: 0.038,
+    liquid: 0.011,
+    midcap: 0.03,
+    nifty: 0.061,
+    gold: 0.072,
+  },
+  {
+    month: "Aug",
+    flexi: 0.058,
+    debt: 0.02,
+    small: -0.041,
+    intl: 0.066,
+    liquid: 0.017,
+    midcap: 0.011,
+    nifty: 0.047,
+    gold: 0.118,
+  },
+  {
+    month: "Sep",
+    flexi: 0.094,
+    debt: 0.027,
+    small: -0.018,
+    intl: 0.081,
+    liquid: 0.023,
+    midcap: 0.052,
+    nifty: 0.11,
+    gold: 0.153,
+  },
+  {
+    month: "Oct",
+    flexi: 0.141,
+    debt: 0.034,
+    small: -0.052,
+    intl: 0.119,
+    liquid: 0.029,
+    midcap: 0.078,
+    nifty: 0.156,
+    gold: 0.196,
+  },
+  {
+    month: "Nov",
+    flexi: 0.166,
+    debt: 0.043,
+    small: -0.04,
+    intl: 0.142,
+    liquid: 0.037,
+    midcap: 0.099,
+    nifty: 0.177,
+    gold: 0.221,
+  },
+  {
+    month: "Dec",
+    flexi: 0.189,
+    debt: 0.052,
+    small: -0.031,
+    intl: 0.164,
+    liquid: 0.046,
+    midcap: 0.12,
+    nifty: 0.202,
+    gold: 0.245,
+  },
+];
+
+// The palette has five colours, so past five the page names the few it is about in colour; the rest are muted, draw
+// first in grey, each still named at its end.
+const QUIET = "var(--muted-foreground)";
+const series: ChartSeries<(typeof growth)[number]> = [
+  { key: "flexi", label: "Flexi cap", color: QUIET },
+  { key: "debt", label: "Debt", color: QUIET },
+  { key: "small", label: "Small cap", color: QUIET },
+  { key: "intl", label: "International", color: QUIET },
+  { key: "liquid", label: "Liquid", color: QUIET },
+  { key: "midcap", label: "Mid cap", color: QUIET },
+  { key: "nifty", label: "Nifty 50", color: "var(--chart-1)" },
+  { key: "gold", label: "Gold", color: "var(--chart-2)" },
+];
+
+export default function ChartLineQuietExample() {
+  const { pct } = useFormat();
+  return (
+    <LineChartCard
+      title="Growth by fund"
+      description="Eight funds; the two you are watching in colour"
+      data={growth}
+      xKey="month"
+      series={series}
+      today="Oct"
+      forecastFrom="Oct"
+      valueFormatter={pct}
+      height={256}
+    />
+  );
+}

package/agents/examples/chart-panels.tsx

@@ -0,0 +1,94 @@
+import { AreaChartCard, BarChartCard, LineChartCard, PanelGrid, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Month-end growth of five funds; November and December are a forecast.
+const growth = [
+  { month: "May", nifty: 0, flexi: 0, gold: 0, debt: 0, small: 0 },
+  { month: "Jun", nifty: 0.025, flexi: 0.018, gold: 0.041, debt: 0.006, small: 0.034 },
+  { month: "Jul", nifty: 0.061, flexi: 0.049, gold: 0.072, debt: 0.013, small: 0.012 },
+  { month: "Aug", nifty: 0.047, flexi: 0.058, gold: 0.118, debt: 0.02, small: -0.041 },
+  { month: "Sep", nifty: 0.11, flexi: 0.094, gold: 0.153, debt: 0.027, small: -0.018 },
+  { month: "Oct", nifty: 0.156, flexi: 0.141, gold: 0.196, debt: 0.034, small: -0.052 },
+  { month: "Nov", nifty: 0.177, flexi: 0.166, gold: 0.221, debt: 0.043, small: -0.04 },
+  { month: "Dec", nifty: 0.202, flexi: 0.189, gold: 0.245, debt: 0.052, small: -0.031 },
+];
+const funds: ChartSeries<(typeof growth)[number]> = [
+  { key: "nifty", label: "Nifty 50", color: "var(--chart-1)" },
+  { key: "flexi", label: "Flexi cap", color: "var(--chart-2)" },
+  { key: "gold", label: "Gold", color: "var(--chart-3)" },
+  { key: "debt", label: "Debt", color: "var(--chart-4)" },
+  { key: "small", label: "Small cap", color: "var(--chart-5)" },
+];
+
+const value = [
+  { month: "May", equity: 2150000, debt: 600000, gold: 320000, intl: 390000, cash: 150000 },
+  { month: "Jun", equity: 2230000, debt: 612000, gold: 334000, intl: 402000, cash: 160000 },
+  { month: "Jul", equity: 2390000, debt: 625000, gold: 352000, intl: 421000, cash: 172000 },
+  { month: "Aug", equity: 2310000, debt: 637000, gold: 371000, intl: 447000, cash: 185000 },
+  { month: "Sep", equity: 2620000, debt: 648000, gold: 390000, intl: 462000, cash: 198000 },
+  { month: "Oct", equity: 2800000, debt: 655000, gold: 410500, intl: 486300, cash: 212000 },
+];
+const added = [
+  { quarter: "Q1", equity: 180000, debt: 60000, gold: 20000, intl: 40000, cash: 25000 },
+  { quarter: "Q2", equity: 220000, debt: 40000, gold: 45000, intl: 35000, cash: 15000 },
+  { quarter: "Q3", equity: 150000, debt: 80000, gold: 30000, intl: 55000, cash: 30000 },
+  { quarter: "Q4", equity: 260000, debt: 50000, gold: 60000, intl: 70000, cash: 20000 },
+];
+const kinds = [
+  { 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: "intl", label: "International", color: "var(--chart-4)" },
+  { key: "cash", label: "Cash", color: "var(--chart-5)" },
+] as const;
+
+// Four charts in a PanelGrid: lines named at their ends, a forecast after today, overlapping areas as lines, and bars
+// as tints inside full-colour edges, grouped and stacked.
+export default function ChartPanelsExample() {
+  const { pct, money, moneyCompact } = useFormat();
+  return (
+    <PanelGrid>
+      <LineChartCard
+        title="Growth by fund"
+        description="Since May, month-end; November and December are a forecast"
+        data={growth}
+        xKey="month"
+        series={funds}
+        today="Oct"
+        forecastFrom="Oct"
+        valueFormatter={pct}
+        height={256}
+      />
+      <AreaChartCard
+        title="Value by kind"
+        description="Month-end value of each kind of holding"
+        data={value}
+        xKey="month"
+        series={kinds}
+        valueFormatter={money}
+        yTickFormatter={moneyCompact}
+        height={256}
+      />
+      <BarChartCard
+        title="Money added by kind and quarter"
+        description="Side by side"
+        data={added}
+        xKey="quarter"
+        series={kinds}
+        valueFormatter={money}
+        yTickFormatter={moneyCompact}
+        height={256}
+      />
+      <BarChartCard
+        title="Money added by kind and quarter"
+        description="Stacked into the quarter's total"
+        data={added}
+        xKey="quarter"
+        series={kinds}
+        stacked
+        valueFormatter={money}
+        yTickFormatter={moneyCompact}
+        height={256}
+      />
+    </PanelGrid>
+  );
+}

package/agents/examples/code-block.tsx

@@ -28,9 +28,11 @@ export default function CodeBlockExample() {
         <CodeBlockContent wrap>{CHECK}</CodeBlockContent>
       </CodeBlock>
       <CodeBlock size="sm">
-        <CodeBlockActions>
-          <CodeBlockCopyButton value={LOG} />
-        </CodeBlockActions>
+        <CodeBlockHeader>
+          <CodeBlockActions>
+            <CodeBlockCopyButton value={LOG} />
+          </CodeBlockActions>
+        </CodeBlockHeader>
         <CodeBlockContent className="max-h-48">{LOG}</CodeBlockContent>
       </CodeBlock>
     </div>

package/agents/examples/field.tsx

@@ -0,0 +1,108 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea,
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@siyahi/ui";
+import { IndianRupeeIcon } from "lucide-react";
+
+const kinds = [
+  { value: "equity", label: "Equity" },
+  { value: "debt", label: "Debt" },
+  { value: "gold", label: "Gold" },
+];
+
+// Each field is a Field: its label above (small mono capitals, from the theme), the control, and a hint or an error.
+export default function FieldExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Add a holding</CardTitle>
+        <CardDescription>What you bought, how much, and how often to review it</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form className="grid max-w-3xl gap-x-8 gap-y-5 sm:grid-cols-2" onSubmit={(event) => event.preventDefault()}>
+          <Field>
+            <FieldLabel htmlFor="holding-name">Name</FieldLabel>
+            <Input id="holding-name" defaultValue="Nifty Next 50 index fund" />
+            <FieldDescription>As it appears on the statement</FieldDescription>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="holding-kind">Kind</FieldLabel>
+            <Select items={kinds} defaultValue="equity">
+              <SelectTrigger id="holding-kind" className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {kinds.map((kind) => (
+                    <SelectItem key={kind.value} value={kind.value}>
+                      {kind.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="holding-amount">Amount invested</FieldLabel>
+            <InputGroup>
+              <InputGroupAddon>
+                <IndianRupeeIcon />
+              </InputGroupAddon>
+              <InputGroupInput id="holding-amount" defaultValue="2,50,000" inputMode="numeric" />
+            </InputGroup>
+            <FieldDescription>In rupees, before charges</FieldDescription>
+          </Field>
+          <Field data-invalid>
+            <FieldLabel htmlFor="holding-folio">Folio number</FieldLabel>
+            <Input id="holding-folio" defaultValue="9103-44" aria-invalid aria-describedby="holding-folio-error" />
+            <FieldError id="holding-folio-error">A folio number is 8 to 12 digits, such as 91034455</FieldError>
+          </Field>
+          <Field>
+            <FieldLabel id="holding-review">Review</FieldLabel>
+            <ToggleGroup defaultValue={["quarterly"]} variant="outline" aria-labelledby="holding-review">
+              <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
+              <ToggleGroupItem value="quarterly">Quarterly</ToggleGroupItem>
+              <ToggleGroupItem value="yearly">Yearly</ToggleGroupItem>
+            </ToggleGroup>
+          </Field>
+          <Field data-disabled>
+            <FieldLabel htmlFor="holding-account">Account</FieldLabel>
+            <Input id="holding-account" defaultValue="Demat, joint" disabled />
+            <FieldDescription>Set by the statement you imported</FieldDescription>
+          </Field>
+          <Field className="sm:col-span-2">
+            <FieldLabel htmlFor="holding-note">Note</FieldLabel>
+            <Textarea id="holding-note" placeholder="Why you bought it, and what would make you sell" />
+          </Field>
+          <div className="flex gap-2 sm:col-span-2">
+            <Button type="submit">Save holding</Button>
+            <Button type="button" variant="outline">
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/formatters.tsx

@@ -5,13 +5,13 @@ function Row({ label }: { label: string }) {
   return (
     <TableRow>
       <TableCell>{label}</TableCell>
-      <TableCell className="text-right">{count(153110)}</TableCell>
-      <TableCell className="text-right">{money(153110)}</TableCell>
-      <TableCell className="text-right">{moneyCompact(99999)}</TableCell>
-      <TableCell className="text-right">{moneyCompact(240000)}</TableCell>
-      <TableCell className="text-right">{moneyCompact(400000000)}</TableCell>
-      <TableCell className="text-right">{pct(0.1234)}</TableCell>
-      <TableCell className="text-right">{time("2026-10-20T09:00:00Z")}</TableCell>
+      <TableCell data-numeric>{count(153110)}</TableCell>
+      <TableCell data-numeric>{money(153110)}</TableCell>
+      <TableCell data-numeric>{moneyCompact(99999)}</TableCell>
+      <TableCell data-numeric>{moneyCompact(240000)}</TableCell>
+      <TableCell data-numeric>{moneyCompact(400000000)}</TableCell>
+      <TableCell data-numeric>{pct(0.1234)}</TableCell>
+      <TableCell data-numeric>{time("2026-10-20T09:00:00Z")}</TableCell>
     </TableRow>
   );
 }
@@ -22,13 +22,13 @@ export default function FormattersExample() {
       <TableHeader>
         <TableRow>
           <TableHead>Locale</TableHead>
-          <TableHead className="text-right">count</TableHead>
-          <TableHead className="text-right">money</TableHead>
-          <TableHead className="text-right">moneyCompact</TableHead>
-          <TableHead className="text-right">moneyCompact</TableHead>
-          <TableHead className="text-right">moneyCompact</TableHead>
-          <TableHead className="text-right">pct</TableHead>
-          <TableHead className="text-right">time</TableHead>
+          <TableHead data-numeric>count</TableHead>
+          <TableHead data-numeric>money</TableHead>
+          <TableHead data-numeric>moneyCompact</TableHead>
+          <TableHead data-numeric>moneyCompact</TableHead>
+          <TableHead data-numeric>moneyCompact</TableHead>
+          <TableHead data-numeric>pct</TableHead>
+          <TableHead data-numeric>time</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>

package/agents/examples/input-states.tsx

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

package/agents/examples/overview-dashboard.tsx

@@ -75,8 +75,8 @@ function Holdings({ rows }: { rows: Holding[] }) {
             <TableRow>
               <TableHead>Holding</TableHead>
               <TableHead>Status</TableHead>
-              <TableHead className="text-right">Value</TableHead>
-              <TableHead className="text-right">12 months</TableHead>
+              <TableHead data-numeric>Value</TableHead>
+              <TableHead data-numeric>12 months</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -99,8 +99,8 @@ function Holdings({ rows }: { rows: Holding[] }) {
                 <TableCell>
                   <StatusBadge tone={row.tone}>{row.status}</StatusBadge>
                 </TableCell>
-                <TableCell className="text-right">{money(row.value)}</TableCell>
-                <TableCell className="text-right">
+                <TableCell data-numeric>{money(row.value)}</TableCell>
+                <TableCell data-numeric>
                   <Delta value={row.change} />
                 </TableCell>
               </TableRow>
@@ -109,8 +109,8 @@ function Holdings({ rows }: { rows: Holding[] }) {
           <TableFooter>
             <TableRow>
               <TableCell colSpan={2}>Total</TableCell>
-              <TableCell className="text-right">{money(total)}</TableCell>
-              <TableCell className="text-right">{yearAgo > 0 && pct(total / yearAgo - 1)}</TableCell>
+              <TableCell data-numeric>{money(total)}</TableCell>
+              <TableCell data-numeric>{yearAgo > 0 && pct(total / yearAgo - 1)}</TableCell>
             </TableRow>
           </TableFooter>
         </Table>