@siyahi/ui 0.1.8-next.4 → 0.1.9-next.10

package/README.md

@@ -67,24 +67,33 @@ 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), `LocalTime` (a time in the configured zone with the viewer's own clock
-  in a tooltip) 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
+  map; hover or tap a tile for its figures) with `TreemapLegend` (its colour
+  scale), `LocalTime` (a time in the configured zone with the viewer's own clock
+  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"), `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
   under the title and description, left-aligned; a stat tile's badge stays
   top right.
-- **Formatters**: `money`, `moneyCompact`, `pct` and `time`, or `useFormat()`
+- **Formatters**: `count`, `money`, `moneyCompact`, `pct` and `time`, or `useFormat()`
   for the same bound to the provider's locale.
   `useFormat().time(value, { withDate: true })` (or
   `time(value, locale, { withDate: true })`) and `<LocalTime withDate>` write
@@ -94,26 +103,47 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 
 ## Which component
 
-| Need                                                                    | Component                                                   |
-| ----------------------------------------------------------------------- | ----------------------------------------------------------- |
-| Values over time or another ordered axis (months, hours, price buckets) | `BarChartCard`, `AreaChartCard` or `LineChartCard`          |
-| Counts or amounts per period, one series or several                     | `BarChartCard`; `stacked` when the series add up to a total |
-| A running level, such as a portfolio's value against money put in       | `AreaChartCard`                                             |
-| Series compared point by point, such as a return against an index       | `LineChartCard`                                             |
-| Ranked counts or amounts by category (a name, a bar and a figure)       | `BarList`                                                   |
-| Headline figures with their change                                      | `SectionCards`, with a `Delta` in each badge                |
-| 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`        |
-| Rows to sort and filter                                                 | `DataTable`, inside a `Card`                                |
-| A signed figure (a gain, a loss, a change)                              | `Delta`                                                     |
-| A time, with the viewer's own clock on hover                            | `LocalTime`                                                 |
+| Need                                                                    | Component                                                           |
+| ----------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| Values over time or another ordered axis (months, hours, price buckets) | `BarChartCard`, `AreaChartCard` or `LineChartCard`                  |
+| Counts or amounts per period, one series or several                     | `BarChartCard`; `stacked` when the series add up to a total         |
+| A running level, such as a portfolio's value against money put in       | `AreaChartCard`                                                     |
+| Series compared point by point, such as a return against an index       | `LineChartCard`                                                     |
+| Samples in time with limits and events marked                           | `LineChartCard` with `xDomain`, `xTicks` and `referenceLines`       |
+| Long category names, such as sectors                                    | `BarChartCard` with `horizontal`                                    |
+| A gain above zero and a loss below it                                   | a series with `color` and `negativeColor`                           |
+| 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`                |
+| Rows to sort and filter                                                 | `DataTable`, inside a `Card`                                        |
+| A column that sorts on one click; a search and an "n of m" count        | `DataTableSortHeader`; `DataTableSearchFilter`, `DataTableRowCount` |
+| Stat tiles that pick a scope for the page                               | `SectionCards` with `selected` and `onSelect`                       |
+| A share or a part of a whole, coloured as a gain or a loss              | `ToneProgress`                                                      |
+| The colour scale under a `Treemap`                                      | `TreemapLegend`, with the map's `range`                             |
+| One part of a long page: rule, eyebrow, heading, lead, action           | `PageSection`, with `PageSubheading` inside                         |
+| 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`                                                         |
 
 The three chart cards take the rows, the field the x axis reads and the series,
 and own everything else: the card and its header action (a range or mode
 toggle), the axes, the dashed horizontal grid, Geist Mono ticks, a tooltip that
 names the hovered point and gives each series' formatted value, and the legend
-below. A page never puts Recharts axes, grids or tooltips together itself.
+below. Props cover the rest: a footer, a placeholder while data loads,
+reference lines, a numeric x axis, a fixed value axis, axis titles, a second
+line under each tick, a picked category, sideways bars and straight segments.
+A page never puts Recharts axes, grids or tooltips together itself.
 
 ```tsx
 <BarChartCard
@@ -146,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,16 +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 (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`)                                                   | `src/components/registry/dashboardcn/bar-list.tsx`       | https://dashboardcn.com/r/bar-list.json (source: https://github.com/NoahGdev/dashboardcn)                                                                                                                                                                                                                   | MIT, Copyright (c) 2026 dashboardcn contributors                                    |
+| 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/charts/area-chart-card.d.ts

@@ -1,9 +1,10 @@
-import { SeriesChartProps } from "../../../lib/chart-series.js";
+import { ChartCurve, NumericXProps, SeriesChartProps } from "../../../lib/chart-series.js";
 //#region src/components/registry/charts/area-chart-card.d.ts
-export interface AreaChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K> {
+export interface AreaChartCardProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps {
   /** Stack the series into a total instead of overlapping them. */
   stacked?: boolean;
+  curve?: ChartCurve;
 }
 /** Values over an ordered axis as filled areas: one series, or several overlapping or stacked. */
-export declare function AreaChartCard<T extends object, K extends keyof T>({ stacked, ...props }: AreaChartCardProps<T, K>): import("react").JSX.Element;
+export declare function AreaChartCard<T extends object, K extends keyof T>({ stacked, curve, ...props }: AreaChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

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

@@ -4,13 +4,13 @@ import { jsx } from "react/jsx-runtime";
 import { Area, AreaChart } from "recharts";
 //#region src/components/registry/charts/area-chart-card.tsx
 /** Values over an ordered axis as filled areas: one series, or several overlapping or stacked. */
-function AreaChartCard({ stacked = false, ...props }) {
+function AreaChartCard({ stacked = false, curve = "monotone", ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: AreaChart,
 		...props,
 		children: props.series.map(({ key, color }) => /* @__PURE__ */ jsx(Area, {
 			dataKey: key,
-			type: "monotone",
+			type: curve,
 			fill: color,
 			fillOpacity: stacked ? .4 : .2,
 			stroke: color,

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

@@ -3,7 +3,13 @@ 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. */
+  horizontal?: boolean;
+  /** The picked category's x value: its bars stay solid and the rest fade. */
+  selected?: T[K] | null;
+  /** Called with a clicked category's x value, or null when the picked one is clicked again. */
+  onSelect?: (value: T[K] | null) => void;
 }
 /** Values over an ordered axis as bars: one series, or several grouped or stacked. */
-export declare function BarChartCard<T extends object, K extends keyof T>({ stacked, ...props }: BarChartCardProps<T, K>): import("react").JSX.Element;
+export declare function BarChartCard<T extends object, K extends keyof T>({ stacked, selected, onSelect, ...props }: BarChartCardProps<T, K>): import("react").JSX.Element;
 //#endregion

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

@@ -1,24 +1,45 @@
 "use client";
-import { ChartFrame } from "../../../lib/chart-frame.js";
+import { ChartFrame, seriesFill } from "../../../lib/chart-frame.js";
 import { jsx } from "react/jsx-runtime";
-import { Bar, BarChart } from "recharts";
+import { Bar, BarChart, Cell } from "recharts";
 //#region src/components/registry/charts/bar-chart-card.tsx
+const DOWN_FROM_ZERO = ["auto", 0];
 /** Values over an ordered axis as bars: one series, or several grouped or stacked. */
-function BarChartCard({ stacked = false, ...props }) {
+function BarChartCard({ stacked = false, selected = null, onSelect, ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: BarChart,
 		...props,
-		children: props.series.map(({ key, color }, index) => /* @__PURE__ */ jsx(Bar, {
-			dataKey: key,
-			fill: color,
-			stackId: stacked ? "stack" : void 0,
-			radius: !stacked ? 2 : index === props.series.length - 1 ? [
-				2,
-				2,
-				0,
-				0
-			] : 0
-		}, key))
+		yDomain: props.yDomain ?? (props.data.some((row) => props.series.some(({ key }) => Number(row[key]) > 0)) ? void 0 : DOWN_FROM_ZERO),
+		stackOffset: stacked ? "sign" : void 0,
+		children: props.series.map((item, index) => {
+			const { key, label, color, negativeColor } = item;
+			return /* @__PURE__ */ jsx(Bar, {
+				dataKey: key,
+				name: label,
+				fill: seriesFill(item, props.data),
+				stackId: stacked ? "stack" : void 0,
+				radius: !stacked ? 2 : index === props.series.length - 1 ? props.horizontal ? [
+					0,
+					2,
+					2,
+					0
+				] : [
+					2,
+					2,
+					0,
+					0
+				] : 0,
+				className: onSelect ? "cursor-pointer" : void 0,
+				onClick: onSelect && ((bar) => {
+					const value = bar.payload?.[props.xKey];
+					if (value !== void 0) onSelect(value === selected ? null : value);
+				}),
+				children: (negativeColor || selected !== null) && props.data.map((row, i) => /* @__PURE__ */ jsx(Cell, {
+					fill: negativeColor && Number(row[key]) < 0 ? negativeColor : color,
+					fillOpacity: selected === null || row[props.xKey] === selected ? 1 : .35
+				}, i))
+			}, key);
+		})
 	});
 }
 //#endregion

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

@@ -1,5 +1,8 @@
-import { SeriesChartProps } from "../../../lib/chart-series.js";
+import { ChartCurve, NumericXProps, SeriesChartProps } from "../../../lib/chart-series.js";
 //#region src/components/registry/charts/line-chart-card.d.ts
+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. */
-export declare function LineChartCard<T extends object, K extends keyof T>(props: SeriesChartProps<T, K>): import("react").JSX.Element;
+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

@@ -4,13 +4,13 @@ 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. */
-function LineChartCard(props) {
+function LineChartCard({ curve = "monotone", ...props }) {
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		chart: LineChart,
 		...props,
 		children: props.series.map(({ key, color }) => /* @__PURE__ */ jsx(Line, {
 			dataKey: key,
-			type: "monotone",
+			type: curve,
 			stroke: color,
 			strokeWidth: 2,
 			dot: false

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

@@ -6,12 +6,21 @@ 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. */
   detail?: React$1.ReactNode;
+  /** In a picker, a tile that cannot be picked, such as one with nothing in it: faded, and its button disabled. */
+  disabled?: boolean;
 }
-export declare function SectionCards({ items }: {
+export interface SectionCardsProps {
   items: SectionCard[];
-}): React$1.JSX.Element;
+  /** The label of the picked tile. */
+  selected?: string;
+  /** Makes each tile one button, so keep tile content non-interactive; gets the label of the tile picked. */
+  onSelect?: (label: string) => void;
+}
+export declare function SectionCards({ items, selected, onSelect }: SectionCardsProps): React$1.JSX.Element;
 //#endregion

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

@@ -1,7 +1,8 @@
 "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 { useSurface } from "../../siyahi/siyahi-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 //#region src/components/registry/dashboard-01/section-cards.tsx
@@ -12,33 +13,50 @@ const COLUMNS = {
 	5: "@3xl/main:grid-cols-3 @7xl/main:grid-cols-5",
 	6: "@3xl/main:grid-cols-3"
 };
-function SectionCards({ items }) {
+function SectionCards({ items, selected, onSelect }) {
+	const ruled = useSurface() === "ruled";
 	return /* @__PURE__ */ jsx("div", {
-		className: "@container/main",
+		className: cn("@container/main", ruled && "overflow-hidden border-y"),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("grid grid-cols-1 gap-4", COLUMNS[items.length] ?? COLUMNS[4]),
-			children: items.map((item) => /* @__PURE__ */ jsxs(Card, {
-				className: "@container/card",
-				children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
-					/* @__PURE__ */ jsx(CardDescription, { children: item.label }),
-					/* @__PURE__ */ jsx(CardTitle, {
-						className: "text-2xl font-semibold tabular-nums @[250px]/card:text-3xl",
-						children: item.value
-					}),
-					item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
-						variant: "outline",
-						children: item.badge
-					}) })
-				] }), (item.headline || item.detail) && /* @__PURE__ */ jsxs(CardFooter, {
-					className: "flex-col items-start gap-1.5 text-sm",
-					children: [item.headline && /* @__PURE__ */ jsx("div", {
-						className: "line-clamp-1 flex gap-2 font-medium",
-						children: item.headline
-					}), item.detail && /* @__PURE__ */ jsx("div", {
-						className: "text-muted-foreground",
-						children: item.detail
-					})]
-				})]
+			className: cn("grid grid-cols-1", ruled ? "-mt-px -ml-px" : "gap-4", COLUMNS[items.length] ?? COLUMNS[4]),
+			children: items.map((item) => /* @__PURE__ */ jsx("div", {
+				"data-slot": "section-card",
+				className: cn("min-w-0", ruled && "border-t border-l"),
+				children: /* @__PURE__ */ jsxs(Card, {
+					className: cn("@container/card h-full", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", item.label === selected && ruled && "ring-inset", onSelect && item.disabled && "opacity-60"),
+					children: [
+						onSelect && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": item.label,
+							"aria-pressed": item.label === selected,
+							disabled: item.disabled,
+							onClick: () => onSelect(item.label),
+							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 }),
+							/* @__PURE__ */ jsx(CardTitle, {
+								className: "text-2xl font-semibold tabular-nums @[250px]/card:text-3xl",
+								children: item.value
+							}),
+							item.badge && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Badge, {
+								variant: "outline",
+								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", {
+								className: "flex flex-wrap gap-2 font-medium",
+								children: item.headline
+							}), item.detail && /* @__PURE__ */ jsx("div", {
+								className: "text-muted-foreground",
+								children: item.detail
+							})]
+						})
+					]
+				})
 			}, item.label))
 		})
 	});

package/dist/components/registry/dashboardcn/bar-list.d.ts

@@ -19,8 +19,10 @@ export interface BarListProps extends React$1.ComponentProps<"div"> {
   color?: string;
   /** Show each row's share of the total next to its value. */
   showPercentage?: boolean;
+  /** The value a full-width bar stands for. Give two lists the same max to draw them on one scale. Defaults to the largest value. */
+  max?: number;
   onItemClick?: (item: BarListItem) => void;
 }
-declare function BarList({ data, valueFormatter, sortOrder, color, showPercentage, onItemClick, className, ...props }: BarListProps): React$1.JSX.Element;
+declare function BarList({ data, valueFormatter, sortOrder, color, showPercentage, max: scale, onItemClick, className, ...props }: BarListProps): React$1.JSX.Element;
 //#endregion
 export { BarList };

package/dist/components/registry/dashboardcn/bar-list.js

@@ -1,10 +1,10 @@
-import { useLocale } from "../../siyahi/siyahi-provider.js";
 import { cn } from "../../../lib/utils.js";
+import { useLocale } from "../../siyahi/siyahi-provider.js";
 import { pct } from "../../../lib/format.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 //#region src/components/registry/dashboardcn/bar-list.tsx
-function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(--chart-1)", showPercentage = false, onItemClick, className, ...props }) {
+function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(--chart-1)", showPercentage = false, max: scale, onItemClick, className, ...props }) {
 	const locale = useLocale();
 	const format = valueFormatter ?? ((value) => new Intl.NumberFormat(locale.numberLocale, {
 		notation: "compact",
@@ -15,7 +15,7 @@ function BarList({ data, valueFormatter, sortOrder = "descending", color = "var(
 		const sorted = [...data].sort((a, b) => a.value - b.value);
 		return sortOrder === "descending" ? sorted.reverse() : sorted;
 	}, [data, sortOrder]);
-	const max = Math.max(...items.map((item) => item.value), 0);
+	const max = scale ?? Math.max(...items.map((item) => item.value), 0);
 	const total = items.reduce((sum, item) => sum + item.value, 0);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "bar-list",

package/dist/components/registry/dashboardcn/distribution-bar.d.ts

@@ -0,0 +1,38 @@
+import { ChartColor } from "../../../lib/chart-series.js";
+import * as React$1 from "react";
+//#region src/components/registry/dashboardcn/distribution-bar.d.ts
+export interface DistributionSegment {
+  name: string;
+  value: number;
+  /** Defaults to chart-1 through chart-5 in order; var(--muted) for space that is free. */
+  color?: ChartColor | "var(--muted)";
+  /** Stable key when names can repeat. */
+  key?: string;
+}
+export interface DistributionMarker {
+  /** The value the line marks, on the bar's scale. */
+  at: number;
+  label?: string;
+}
+export interface DistributionBarProps extends Omit<React$1.ComponentProps<"div">, "onMouseLeave"> {
+  segments: DistributionSegment[];
+  valueFormatter?: (value: number) => string;
+  showLegend?: boolean;
+  /** Show absolute values in the legend in addition to the share. */
+  showValues?: boolean;
+  /** The value the bar's right end stands for. Defaults to the positive segments' total. */
+  max?: number;
+  /**
+   * The value the bar's left end stands for. Defaults to the negative segments' total, or 0 when there are none.
+   * Above zero, segments (which start at zero) fall off the bar.
+   */
+  min?: number;
+  markers?: DistributionMarker[];
+  /** The key (or name) of the one segment to keep solid; the rest fade. */
+  highlighted?: string | null;
+  /** Called with the segment under the pointer, and null when it leaves the bar. */
+  onHover?: (segment: DistributionSegment | null) => void;
+}
+declare function DistributionBar({ segments, valueFormatter, showLegend, showValues, max, min, markers, highlighted, onHover, className, "aria-label": ariaLabel, ...props }: DistributionBarProps): React$1.JSX.Element;
+//#endregion
+export { DistributionBar };