@siyahi/ui 0.1.9-next.6 → 0.1.9-next.8

package/README.md

@@ -67,12 +67,13 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 
 ## What is in it
 
-- **shadcn/ui components** in the `base-luma` style, installed with the shadcn
-  CLI and never edited.
+- **shadcn/ui components** in the `base-nova` style, shadcn's flat and compact
+  one, installed with the shadcn CLI and never edited.
 - **Registry add-ons**, copied once with their origin and licence recorded:
   bar, area and line chart cards from shadcn's chart blocks, a data table on
   TanStack Table, calendar, weekday and status heatmaps, a ranked
-  bar list, the `SectionCards` stat tile and the `sidebar-07` app shell.
+  bar list, a `Sparkline`, the `MetricStrip` row of figures, the
+  `SectionCards` stat tile and the `sidebar-07` app shell.
 - **Siyahi components**: `Delta` (a signed figure with ▲ ▼), `PriceChart`
   (TradingView Lightweight Charts in theme colours), `Treemap` (holdings heat
   map; hover or tap a tile for its figures) with `TreemapLegend` (its colour
@@ -80,9 +81,13 @@ Every merge to `main` also attaches both tarballs to a GitHub release
   in a tooltip), `ToneProgress` (Progress in a meaning colour), the page parts
   `PageSection`, `PageSubheading`, `DataList` and `InlineCode`, the data table
   parts `DataTableSortHeader` (sorts on one click) and `DataTableRowCount`
-  ("12 of 48"), and `SiyahiProvider`.
-- **Cards and badges as installed**: every `Card`, stat tiles included, keeps
-  luma's `rounded-4xl`, `shadow-md` and faint ring. A category (a sector, a
+  ("12 of 48"), `DataBar` (a figure in a table cell with a bar giving its size
+  against the column's largest), `PanelGrid` (data blocks side by side, with
+  hairlines between them on a ruled page), and `SiyahiProvider`.
+- **Surfaces**: by default a data block has no box. Every `Card` on a ruled
+  page, chart cards and stat tiles included, loses its fill, corner and ring,
+  and a `PanelGrid` draws hairlines between blocks; see Surfaces below. A
+  category (a sector, a
   broker, a unit's kind) is an outline `Badge`: categories stay neutral, and
   colour is left to the four meaning colours and the charts. On a narrow card
   (header under 24rem, so any phone) a header action such as a toggle drops
@@ -110,6 +115,9 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 | Ranked counts or amounts by category (a name, a bar and a figure)       | `BarList`; give two lists one `max` to share a scale                |
 | Where a budget sits, a split of a whole, or losses against gains        | `DistributionBar`                                                   |
 | Headline figures with their change                                      | `SectionCards`, with a `Delta` in each badge                        |
+| Many figures of equal weight, each with its change and recent run       | `MetricStrip`                                                       |
+| A run of values beside a figure, in a tile, a strip or a table cell     | `Sparkline`; in a tile, `SectionCards`' `trend`                     |
+| A table column that should read as a bar chart                          | `DataBar` in the column's cell                                      |
 | One instrument's price history                                          | `PriceChart`                                                        |
 | Holdings sized by weight and coloured by change                         | `Treemap`                                                           |
 | Activity by day, by weekday and hour, or a status over time             | `CalendarHeatmap`, `WeekdayHeatmap`, `StatusHeatmap`                |
@@ -122,6 +130,8 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 | Label and value pairs, such as a record's fields                        | `DataList` and `DataListItem`                                       |
 | A command or file to copy, wrapped or scrolling                         | `CodeBlock` with `CodeBlockCopyButton`                              |
 | A labelled copy action, such as "Copy all" for a section                | `CopyButton`                                                        |
+| Data blocks side by side: charts, tables, a strip of figures            | `PanelGrid`                                                         |
+| Boxes back, or no lines at all, for a page or a part of one             | `SiyahiProvider` with `surface="card"` or `surface="open"`          |
 | A command, file or identifier inside prose                              | `InlineCode`                                                        |
 | A signed figure (a gain, a loss, a change)                              | `Delta`                                                             |
 | A time, with the viewer's own clock on hover                            | `LocalTime`                                                         |
@@ -166,6 +176,28 @@ loss, a change) goes through `<Delta>`, which adds ▲ or ▼ and the meaning
 colour. Time zone names come from the runtime's ICU data; a slim Node or
 browser build may print `GMT+5:30` where a full one prints `IST`.
 
+## Surfaces
+
+A data block sits on the page in one of three ways, set by `SiyahiProvider`'s
+`surface`:
+
+- `"ruled"`, the default: no box. Every `Card` loses its fill, corner and ring,
+  and blocks side by side in a `PanelGrid` are parted by hairlines, with a rule
+  above and below the grid. One surface, as on a trading screen.
+- `"open"`: no box and no lines. The card's padding goes too, so a block's
+  content sits level with the page's text; for pages read top to bottom.
+- `"card"`: shadcn's own Nova card, a filled box with a 1px ring.
+
+A component outside any provider is ruled. A nested provider sets the surface
+for one part of a page. A picked `SectionCards` tile keeps its ring on every
+surface.
+
+```tsx
+<SiyahiProvider surface="open">
+  <PageSection title="Why XIRR fell">…</PageSection>
+</SiyahiProvider>
+```
+
 ## Dark mode
 
 The colour scheme follows the device (`prefers-color-scheme`). There is no

package/THIRD_PARTY_NOTICES.md

@@ -8,17 +8,17 @@ file as copied; `packages/ui/registry.lock.json` lists them all and
 
 ## Copied into `@siyahi/ui`
 
-| What                                                                                  | Where in the package                                     | Origin                                                                                                                                                                                                                                                                                                                                                              | Licence                                                                             |
-| ------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| shadcn/ui core components (installed with `shadcn add`, never edited)                 | `src/components/ui/*`, `src/hooks/use-mobile.ts`         | https://github.com/shadcn-ui/ui                                                                                                                                                                                                                                                                                                                                     | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn `tailwind.css` (variants and utilities the components use)                     | `styles/shadcn.css`                                      | https://github.com/shadcn-ui/ui/tree/main/packages/shadcn                                                                                                                                                                                                                                                                                                           | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn block `sidebar-07`                                                             | `src/components/registry/sidebar-07/*`                   | https://ui.shadcn.com/r/styles/base-vega/sidebar-07.json                                                                                                                                                                                                                                                                                                            | MIT, Copyright (c) 2023 shadcn                                                      |
-| shadcn block `dashboard-01`, `SectionCards` only                                      | `src/components/registry/dashboard-01/section-cards.tsx` | https://ui.shadcn.com/r/styles/base-vega/dashboard-01.json                                                                                                                                                                                                                                                                                                          | MIT, Copyright (c) 2023 shadcn                                                      |
-| Heatmaps: calendar, weekday by hour, status timeline                                  | `src/components/registry/heatmap/*`                      | https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json, https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json, https://shadcn-heatmap.pages.dev/r/status-heatmap.json (source: https://github.com/rutopio/shadcn-heatmap)                                                                                                                                       | MIT, Copyright (c) 2026 ChingRu                                                     |
-| niko-table data table on TanStack Table                                               | `src/components/registry/niko-table/*`                   | https://niko-table.com/r/data-table.json, https://niko-table.com/r/data-table-core.json, https://niko-table.com/r/data-table-ui.json, https://niko-table.com/r/data-table-faceted-filter.json, https://niko-table.com/r/data-table-column-sort.json, https://niko-table.com/r/data-table-search-filter.json (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
-| shadcn chart blocks `chart-bar-multiple`, `chart-area-stacked`, `chart-line-multiple` | `src/components/registry/charts/*`                       | https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-multiple.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-area-stacked.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-line-multiple.json                                                                                                                                                         | MIT, Copyright (c) 2023 shadcn                                                      |
-| dashboardcn ranked list (`BarList`) and stacked bar (`DistributionBar`)               | `src/components/registry/dashboardcn/*`                  | https://dashboardcn.com/r/bar-list.json, https://dashboardcn.com/r/distribution-bar.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                                                                                                          | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
-| MiniDev copy button (`CopyButton`)                                                    | `src/components/registry/minidev/copy-button.tsx`        | https://ui.minidev.pro/r/copy-button.json (source: https://github.com/amankaushik481/minidev-ui)                                                                                                                                                                                                                                                                    | MIT, Copyright (c) 2026 MiniDev                                                     |
+| What                                                                                                | Where in the package                                     | Origin                                                                                                                                                                                                                                                                                                                                                              | Licence                                                                             |
+| --------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
+| shadcn/ui core components (installed with `shadcn add`, never edited)                               | `src/components/ui/*`, `src/hooks/use-mobile.ts`         | https://github.com/shadcn-ui/ui                                                                                                                                                                                                                                                                                                                                     | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn `tailwind.css` (variants and utilities the components use)                                   | `styles/shadcn.css`                                      | https://github.com/shadcn-ui/ui/tree/main/packages/shadcn                                                                                                                                                                                                                                                                                                           | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn block `sidebar-07`                                                                           | `src/components/registry/sidebar-07/*`                   | https://ui.shadcn.com/r/styles/base-vega/sidebar-07.json                                                                                                                                                                                                                                                                                                            | MIT, Copyright (c) 2023 shadcn                                                      |
+| shadcn block `dashboard-01`, `SectionCards` only                                                    | `src/components/registry/dashboard-01/section-cards.tsx` | https://ui.shadcn.com/r/styles/base-vega/dashboard-01.json                                                                                                                                                                                                                                                                                                          | MIT, Copyright (c) 2023 shadcn                                                      |
+| Heatmaps: calendar, weekday by hour, status timeline                                                | `src/components/registry/heatmap/*`                      | https://shadcn-heatmap.pages.dev/r/calendar-heatmap.json, https://shadcn-heatmap.pages.dev/r/weekday-heatmap.json, https://shadcn-heatmap.pages.dev/r/status-heatmap.json (source: https://github.com/rutopio/shadcn-heatmap)                                                                                                                                       | MIT, Copyright (c) 2026 ChingRu                                                     |
+| niko-table data table on TanStack Table                                                             | `src/components/registry/niko-table/*`                   | https://niko-table.com/r/data-table.json, https://niko-table.com/r/data-table-core.json, https://niko-table.com/r/data-table-ui.json, https://niko-table.com/r/data-table-faceted-filter.json, https://niko-table.com/r/data-table-column-sort.json, https://niko-table.com/r/data-table-search-filter.json (source: https://github.com/Semkoo/niko-table-registry) | MIT, Copyright (c) 2025 Semir N.; original work Copyright (c) 2025 WebDevSimplified |
+| shadcn chart blocks `chart-bar-multiple`, `chart-area-stacked`, `chart-line-multiple`               | `src/components/registry/charts/*`                       | https://ui.shadcn.com/r/styles/new-york-v4/chart-bar-multiple.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-area-stacked.json, https://ui.shadcn.com/r/styles/new-york-v4/chart-line-multiple.json                                                                                                                                                         | MIT, Copyright (c) 2023 shadcn                                                      |
+| dashboardcn ranked list (`BarList`), stacked bar (`DistributionBar`), `Sparkline` and `MetricStrip` | `src/components/registry/dashboardcn/*`                  | https://dashboardcn.com/r/bar-list.json, https://dashboardcn.com/r/distribution-bar.json, https://dashboardcn.com/r/sparkline.json, https://dashboardcn.com/r/kpi-row-card.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                   | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
+| MiniDev copy button (`CopyButton`)                                                                  | `src/components/registry/minidev/copy-button.tsx`        | https://ui.minidev.pro/r/copy-button.json (source: https://github.com/amankaushik481/minidev-ui)                                                                                                                                                                                                                                                                    | MIT, Copyright (c) 2026 MiniDev                                                     |
 
 ## Runtime dependencies with attribution terms
 

package/dist/components/registry/dashboard-01/section-cards.d.ts

@@ -6,6 +6,8 @@ export interface SectionCard {
   value: React$1.ReactNode;
   /** Outline badge, top right; usually a <Delta />. */
   badge?: React$1.ReactNode;
+  /** A small chart under the value, usually a <Sparkline /> of the recent run. */
+  trend?: React$1.ReactNode;
   /** Bold first footer line. */
   headline?: React$1.ReactNode;
   /** Muted second footer line. */

package/dist/components/registry/dashboard-01/section-cards.js

@@ -1,6 +1,6 @@
 "use client";
 import { Badge } from "../../ui/badge.js";
-import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
 import { cn } from "../../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
@@ -26,7 +26,7 @@ function SectionCards({ items, selected, onSelect }) {
 						"aria-pressed": item.label === selected,
 						disabled: item.disabled,
 						onClick: () => onSelect(item.label),
-						className: "absolute inset-0 z-10 rounded-4xl outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
+						className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
 					}),
 					/* @__PURE__ */ jsxs(CardHeader, { children: [
 						/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
@@ -39,6 +39,7 @@ function SectionCards({ items, selected, onSelect }) {
 							children: item.badge
 						}) })
 					] }),
+					item.trend && /* @__PURE__ */ jsx(CardContent, { children: item.trend }),
 					(item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
 						className: "flex-col items-start gap-1.5 text-sm",
 						children: [item.headline && /* @__PURE__ */ jsx("div", {

package/dist/components/registry/dashboardcn/kpi-row-card.d.ts

@@ -0,0 +1,29 @@
+import { Card } from "../../ui/card.js";
+import * as React$1 from "react";
+//#region src/components/registry/dashboardcn/kpi-row-card.d.ts
+export interface MetricStripItem {
+  /** Muted label above the figure. */
+  label: string;
+  /** The figure, formatted by the page: money(4512300). */
+  value: React$1.ReactNode;
+  /** The signed change, drawn as a Delta under the figure; its sign colours the trend. For "pct", a fraction. */
+  change?: number;
+  changeFormat?: "pct" | "money";
+  /** Muted words after the change, such as "vs last month". */
+  note?: React$1.ReactNode;
+  /** Recent values, oldest first, drawn as a sparkline beside the figure. */
+  trend?: number[];
+}
+export interface MetricStripProps extends Omit<React$1.ComponentProps<typeof Card>, "title"> {
+  title?: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  /** A range toggle, top right, that changes every figure. */
+  action?: React$1.ReactNode;
+  items: MetricStripItem[];
+  /** Lines under the strip, such as what the figures cover. */
+  footer?: React$1.ReactNode;
+}
+/** A card holding a row of small figures, each with its change and a sparkline: more numbers in less room than stat tiles. */
+declare function MetricStrip({ title, description, action, items, footer, className, ...props }: MetricStripProps): React$1.JSX.Element;
+//#endregion
+export { MetricStrip };

package/dist/components/registry/dashboardcn/kpi-row-card.js

@@ -0,0 +1,81 @@
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
+import { cn } from "../../../lib/utils.js";
+import { Delta } from "../../siyahi/delta.js";
+import { Sparkline } from "./sparkline.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+//#region src/components/registry/dashboardcn/kpi-row-card.tsx
+const COLUMNS = {
+	1: "basis-full",
+	2: "basis-full @2xs/strip:basis-1/2",
+	3: "basis-full @lg/strip:basis-1/3",
+	4: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4",
+	5: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/5",
+	6: "basis-full @2xs/strip:basis-1/2 @xl/strip:basis-1/3 @5xl/strip:basis-1/6",
+	8: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4 @7xl/strip:basis-1/8"
+};
+function trendColor(change) {
+	if (change === void 0) return "var(--chart-1)";
+	if (change > 0) return "var(--positive)";
+	if (change < 0) return "var(--negative)";
+	return "var(--muted-foreground)";
+}
+/** A card holding a row of small figures, each with its change and a sparkline: more numbers in less room than stat tiles. */
+function MetricStrip({ title, description, action, items, footer, className, ...props }) {
+	const columns = COLUMNS[Math.min(items.length, 8)] ?? COLUMNS[8];
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn("gap-4", className),
+		...props,
+		children: [
+			(title || description || action) && /* @__PURE__ */ jsxs(CardHeader, { children: [
+				title && /* @__PURE__ */ jsx(CardTitle, { children: title }),
+				description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
+				action && /* @__PURE__ */ jsx(CardAction, { children: action })
+			] }),
+			/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "metric-strip",
+				className: "@container/strip -mx-4 -my-3 overflow-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "-mt-px -ml-px flex flex-wrap",
+					children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+						"data-slot": "metric-strip-item",
+						className: cn("flex min-w-0 flex-col gap-1 border-t border-l px-4 py-3", columns),
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "truncate text-xs text-muted-foreground",
+							children: item.label
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-end justify-between gap-x-3 gap-y-1",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-col gap-0.5",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xl font-semibold tracking-tight tabular-nums",
+									children: item.value
+								}), (item.change !== void 0 || item.note) && /* @__PURE__ */ jsxs("div", {
+									className: "flex flex-wrap items-center gap-x-1.5 text-xs",
+									children: [item.change !== void 0 && /* @__PURE__ */ jsx(Delta, {
+										value: item.change,
+										format: item.changeFormat
+									}), item.note && /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: item.note
+									})]
+								})]
+							}), item.trend && item.trend.length > 1 && /* @__PURE__ */ jsx(Sparkline, {
+								data: item.trend,
+								variant: "line",
+								color: trendColor(item.change),
+								className: "h-8 w-16 shrink-0"
+							})]
+						})]
+					}, item.label))
+				})
+			}) }),
+			footer && /* @__PURE__ */ jsx(CardFooter, {
+				className: "flex-col items-start gap-2 text-sm",
+				children: footer
+			})
+		]
+	});
+}
+//#endregion
+export { MetricStrip };

package/dist/components/registry/dashboardcn/sparkline.d.ts

@@ -0,0 +1,18 @@
+import { ChartColor } from "../../../lib/chart-series.js";
+import * as React$1 from "react";
+//#region src/components/registry/dashboardcn/sparkline.d.ts
+export interface SparklineProps extends React$1.ComponentProps<"div"> {
+  /** Series to plot, oldest first. */
+  data: number[];
+  variant?: "area" | "line";
+  /** A chart slot, or var(--positive) or var(--negative) for a gain or a loss. Defaults to var(--chart-1). */
+  color?: ChartColor;
+  curve?: "monotone" | "linear" | "step";
+  strokeWidth?: number;
+  /** Animate after hydration and when data changes. Respects reduced motion. */
+  animate?: boolean;
+  animationDuration?: number;
+}
+declare function Sparkline({ data, variant, color, curve, strokeWidth, animate, animationDuration, className, ...props }: SparklineProps): React$1.JSX.Element;
+//#endregion
+export { Sparkline };

package/dist/components/registry/dashboardcn/sparkline.js

@@ -0,0 +1,95 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Area, AreaChart, Line, LineChart, ResponsiveContainer, YAxis } from "recharts";
+//#region src/components/registry/dashboardcn/sparkline.tsx
+const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+function subscribeToReducedMotion(onChange) {
+	const query = window.matchMedia(reducedMotionQuery);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+function getReducedMotionSnapshot() {
+	return window.matchMedia(reducedMotionQuery).matches;
+}
+function getReducedMotionServerSnapshot() {
+	return true;
+}
+function Sparkline({ data, variant = "area", color = "var(--chart-1)", curve = "monotone", strokeWidth = 1.5, animate = true, animationDuration = 500, className, ...props }) {
+	const id = React$1.useId();
+	const reducedMotion = React$1.useSyncExternalStore(subscribeToReducedMotion, getReducedMotionSnapshot, getReducedMotionServerSnapshot);
+	const animationActive = animate && !reducedMotion;
+	const points = React$1.useMemo(() => data.map((y, i) => ({
+		i,
+		y
+	})), [data]);
+	const margin = {
+		top: 2,
+		right: 0,
+		bottom: 2,
+		left: 0
+	};
+	const axis = /* @__PURE__ */ jsx(YAxis, {
+		hide: true,
+		domain: ["dataMin", "dataMax"]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sparkline",
+		"aria-hidden": "true",
+		className: cn("h-10 w-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: variant === "line" ? /* @__PURE__ */ jsxs(LineChart, {
+				data: points,
+				margin,
+				children: [axis, /* @__PURE__ */ jsx(Line, {
+					type: curve,
+					dataKey: "y",
+					stroke: color,
+					strokeWidth,
+					dot: false,
+					isAnimationActive: animationActive,
+					animationDuration,
+					animationEasing: "ease-out"
+				})]
+			}) : /* @__PURE__ */ jsxs(AreaChart, {
+				data: points,
+				margin,
+				children: [
+					axis,
+					/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+						id,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: color,
+							stopOpacity: .3
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: color,
+							stopOpacity: 0
+						})]
+					}) }),
+					/* @__PURE__ */ jsx(Area, {
+						type: curve,
+						dataKey: "y",
+						stroke: color,
+						strokeWidth,
+						fill: `url(#${id})`,
+						dot: false,
+						isAnimationActive: animationActive,
+						animationDuration,
+						animationEasing: "ease-out"
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { Sparkline };

package/dist/components/registry/niko-table/ui/table.js

@@ -52,14 +52,14 @@ function TableRow({ className, ...props }) {
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
 		...props
 	});
 }
 function TableCell({ className, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
 		...props
 	});
 }

package/dist/components/siyahi/data-bar.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/data-bar.d.ts
+export interface DataBarProps {
+  value: number;
+  /** The value a full bar stands for, usually the column's largest: Math.max(...rows.map((row) => row.value)). */
+  max: number;
+  /** "sign" draws a gain in --positive and a loss in --negative; by default every bar is --chart-1. */
+  tone?: "chart" | "sign";
+  /** The figure, as the page formats it. */
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * A table cell's figure behind a short bar whose length is the figure's share of max, so a column reads as a chart.
+ * The bar has a fixed width, so every row draws to the same scale, and sits on the figure's line, so the row
+ * keeps its height.
+ */
+export declare function DataBar({ value, max, tone, children, className }: DataBarProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/data-bar.js

@@ -0,0 +1,29 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/data-bar.tsx
+/**
+* A table cell's figure behind a short bar whose length is the figure's share of max, so a column reads as a chart.
+* The bar has a fixed width, so every row draws to the same scale, and sits on the figure's line, so the row
+* keeps its height.
+*/
+function DataBar({ value, max, tone = "chart", children, className }) {
+	const share = max > 0 ? Math.min(1, Math.abs(value) / max) : 0;
+	const fill = tone === "chart" ? "bg-chart-1" : value < 0 ? "bg-negative" : "bg-positive";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-bar",
+		className: cn("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "h-1.5 w-16 shrink-0 overflow-hidden rounded-full bg-muted",
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full rounded-full", fill),
+				style: { width: `${share * 100}%` }
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children
+		})]
+	});
+}
+//#endregion
+export { DataBar };

package/dist/components/siyahi/panel-grid.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/panel-grid.d.ts
+declare const COLUMNS: {
+  readonly 1: "";
+  readonly 2: "@2xl/panels:grid-cols-2";
+  readonly 3: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-3";
+  readonly 4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4";
+};
+export interface PanelGridProps {
+  /** Blocks across on a wide page; two on a medium one, and one on a phone. */
+  columns?: keyof typeof COLUMNS;
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface a hairline parts them across and
+ * down, with a rule above and below the grid; open leaves whitespace between them, and card a gap between boxes.
+ * Each block's left and top edges carry its rules, and the grid clips the ones on its own edges.
+ */
+export declare function PanelGrid({ columns, children, className }: PanelGridProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/siyahi/panel-grid.js

@@ -0,0 +1,34 @@
+import { useSurface } from "./siyahi-provider.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Children } from "react";
+//#region src/components/siyahi/panel-grid.tsx
+const COLUMNS = {
+	1: "",
+	2: "@2xl/panels:grid-cols-2",
+	3: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-3",
+	4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4"
+};
+/**
+* Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface a hairline parts them across and
+* down, with a rule above and below the grid; open leaves whitespace between them, and card a gap between boxes.
+* Each block's left and top edges carry its rules, and the grid clips the ones on its own edges.
+*/
+function PanelGrid({ columns = 2, children, className }) {
+	const surface = useSurface();
+	const ruled = surface === "ruled";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "panel-grid",
+		className: cn("@container/panels", ruled && "overflow-hidden border-y", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("grid grid-cols-1", COLUMNS[columns], ruled ? "-mt-px -ml-px" : surface === "open" ? "gap-x-10 gap-y-8" : "gap-4"),
+			children: Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
+				"data-slot": "panel",
+				className: cn("min-w-0", ruled && "border-t border-l"),
+				children: child
+			}))
+		})
+	});
+}
+//#endregion
+export { PanelGrid };

package/dist/components/siyahi/siyahi-provider.d.ts

@@ -1,12 +1,23 @@
 import { SiyahiLocale } from "../../lib/locale.js";
 import { ReactNode } from "react";
 //#region src/components/siyahi/siyahi-provider.d.ts
+/**
+ * How a data block sits on the page. "ruled": no box, hairlines between blocks in a PanelGrid. "open": no box and no
+ * lines, the block's content level with the page's text. "card": shadcn's own card, a filled box with a 1px ring.
+ */
+export type Surface = "ruled" | "open" | "card";
 export interface SiyahiProviderProps {
   /** Any setting left out keeps its default: en-IN, INR, Asia/Kolkata. */
   locale?: Partial<SiyahiLocale>;
+  /**
+   * Set it on a nested provider for one part of a page. Left out, a provider keeps the surface around it, so a
+   * provider that only changes the locale changes nothing else; the outermost default is "ruled".
+   */
+  surface?: Surface;
   children: ReactNode;
 }
-/** Wrap the app once. Carries the locale and the tooltip provider shadcn asks for. */
-export declare function SiyahiProvider({ locale, children }: SiyahiProviderProps): import("react").JSX.Element;
+/** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
+export declare function SiyahiProvider({ locale, surface, children }: SiyahiProviderProps): import("react").JSX.Element;
 export declare function useLocale(): SiyahiLocale;
+export declare function useSurface(): Surface;
 //#endregion

package/dist/components/siyahi/siyahi-provider.js

@@ -4,8 +4,9 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, use, useMemo } from "react";
 //#region src/components/siyahi/siyahi-provider.tsx
 const LocaleContext = createContext(defaultLocale);
-/** Wrap the app once. Carries the locale and the tooltip provider shadcn asks for. */
-function SiyahiProvider({ locale, children }) {
+const SurfaceContext = createContext("ruled");
+/** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
+function SiyahiProvider({ locale, surface, children }) {
 	const { numberLocale, currency, timeZone } = {
 		...defaultLocale,
 		...locale
@@ -19,13 +20,25 @@ function SiyahiProvider({ locale, children }) {
 		currency,
 		timeZone
 	]);
+	const around = use(SurfaceContext);
 	return /* @__PURE__ */ jsx(LocaleContext, {
 		value,
-		children: /* @__PURE__ */ jsx(TooltipProvider, { children })
+		children: /* @__PURE__ */ jsx(SurfaceContext, {
+			value: surface ?? around,
+			children: /* @__PURE__ */ jsx(TooltipProvider, { children: surface ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "siyahi-provider",
+				"data-surface": surface,
+				className: "contents",
+				children
+			}) : children })
+		})
 	});
 }
 function useLocale() {
 	return use(LocaleContext);
 }
+function useSurface() {
+	return use(SurfaceContext);
+}
 //#endregion
-export { SiyahiProvider, useLocale };
+export { SiyahiProvider, useLocale, useSurface };

package/dist/components/ui/accordion.js

@@ -6,14 +6,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function Accordion({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {
 		"data-slot": "accordion",
-		className: cn("flex w-full flex-col overflow-hidden rounded-2xl border", className),
+		className: cn("flex w-full flex-col", className),
 		...props
 	});
 }
 function AccordionItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Item, {
 		"data-slot": "accordion-item",
-		className: cn("not-last:border-b data-open:bg-muted/50", className),
+		className: cn("not-last:border-b", className),
 		...props
 	});
 }
@@ -22,7 +22,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
+			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
 			...props,
 			children: [
 				children,
@@ -41,10 +41,10 @@ function AccordionTrigger({ className, children, ...props }) {
 function AccordionContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Panel, {
 		"data-slot": "accordion-content",
-		className: "overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
+		className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
+			className: cn("h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
 			children
 		})
 	});