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

package/README.md

@@ -75,8 +75,12 @@ Every merge to `main` also attaches both tarballs to a GitHub release
   bar list, 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`.
+  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"), 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
   broker, a unit's kind) is an outline `Badge`: categories stay neutral, and
@@ -84,7 +88,7 @@ Every merge to `main` also attaches both tarballs to a GitHub release
   (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 +98,42 @@ 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                        |
+| 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`                                                        |
+| 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

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`) 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                                                     |
 
 ## 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,23 +1,38 @@
 "use client";
 import { ChartFrame } 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
 /** 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, {
+		stackOffset: stacked ? "sign" : void 0,
+		children: props.series.map(({ key, color, negativeColor }, index) => /* @__PURE__ */ jsx(Bar, {
 			dataKey: key,
 			fill: color,
 			stackId: stacked ? "stack" : void 0,
-			radius: !stacked ? 2 : index === props.series.length - 1 ? [
+			radius: !stacked ? 2 : index === props.series.length - 1 ? props.horizontal ? [
+				0,
+				2,
+				2,
+				0
+			] : [
 				2,
 				2,
 				0,
 				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))
 	});
 }

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

@@ -10,8 +10,15 @@ export interface SectionCard {
   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

@@ -12,33 +12,44 @@ 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 }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "@container/main",
 		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
+				className: cn("@container/card", onSelect && "relative", item.label === selected && "ring-2 ring-primary!", 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-4xl outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
 					}),
-					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
-					})]
-				})]
+					/* @__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
+						})]
+					})
+				]
 			}, 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

@@ -4,7 +4,7 @@ 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 };

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

@@ -0,0 +1,118 @@
+import { useLocale } from "../../siyahi/siyahi-provider.js";
+import { cn } from "../../../lib/utils.js";
+import { pct } from "../../../lib/format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+//#region src/components/registry/dashboardcn/distribution-bar.tsx
+const defaultColors = [
+	"var(--chart-1)",
+	"var(--chart-2)",
+	"var(--chart-3)",
+	"var(--chart-4)",
+	"var(--chart-5)"
+];
+function DistributionBar({ segments, valueFormatter, showLegend = true, showValues = false, max, min, markers = [], highlighted = null, onHover, className, "aria-label": ariaLabel, ...props }) {
+	const locale = useLocale();
+	const format = valueFormatter ?? ((value) => new Intl.NumberFormat(locale.numberLocale, {
+		notation: "compact",
+		maximumFractionDigits: 1
+	}).format(value));
+	const total = segments.reduce((sum, segment) => sum + Math.abs(segment.value), 0);
+	const gains = segments.reduce((sum, segment) => sum + Math.max(segment.value, 0), 0);
+	const losses = segments.reduce((sum, segment) => sum + Math.min(segment.value, 0), 0);
+	const bottom = min ?? losses;
+	const top = max ?? gains;
+	const span = top - bottom || 1;
+	const position = (value) => (value - bottom) / span * 100;
+	const shown = markers.filter((marker) => marker.at >= bottom && marker.at <= top).map((marker, index) => ({
+		...marker,
+		key: `${marker.at}:${marker.label ?? ""}:${index}`
+	}));
+	let above = 0;
+	let below = 0;
+	const resolved = segments.map((segment, index) => {
+		const key = segment.key ?? segment.name;
+		const size = Math.abs(segment.value);
+		const start = segment.value < 0 ? below -= size : (above += size) - size;
+		return {
+			...segment,
+			key,
+			color: segment.color ?? defaultColors[index % defaultColors.length],
+			share: total > 0 ? size / total : 0,
+			left: position(start),
+			width: size / span * 100
+		};
+	});
+	const figure = (segment) => max === void 0 ? pct(segment.share, locale) : format(segment.value);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "distribution-bar",
+		className: cn("flex flex-col gap-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [
+				shown.some((m) => m.label) ? /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground relative h-4 font-mono text-xs",
+					children: shown.map((marker) => marker.label ? /* @__PURE__ */ jsx("span", {
+						className: cn("absolute top-0 whitespace-nowrap", position(marker.at) <= 5 ? "translate-x-0" : position(marker.at) >= 95 ? "-translate-x-full" : "-translate-x-1/2"),
+						style: { left: `${position(marker.at)}%` },
+						children: marker.label
+					}, marker.key) : null)
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					role: "img",
+					"aria-label": ariaLabel ?? resolved.map((segment) => `${segment.name} ${figure(segment)}`).join(", "),
+					className: "bg-muted relative h-2.5 w-full overflow-hidden rounded-full",
+					onMouseLeave: onHover ? () => onHover(null) : void 0,
+					children: resolved.map((segment) => segment.width > 0 ? /* @__PURE__ */ jsx("div", {
+						"data-slot": "distribution-segment",
+						className: "border-card absolute inset-y-0 border-x transition-[width,left,opacity] duration-300",
+						style: {
+							left: `${segment.left}%`,
+							width: `${segment.width}%`,
+							backgroundColor: segment.color,
+							opacity: highlighted === null || highlighted === segment.key ? 1 : .35
+						},
+						onMouseEnter: onHover ? () => onHover(segment) : void 0
+					}, segment.key) : null)
+				}),
+				shown.map((marker) => /* @__PURE__ */ jsx("div", {
+					"data-slot": "distribution-marker",
+					"aria-hidden": "true",
+					className: "bg-foreground absolute bottom-0 h-2.5 w-0.5 -translate-x-1/2",
+					style: { left: `${position(marker.at)}%` }
+				}, marker.key))
+			]
+		}), showLegend ? /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-wrap gap-x-4 gap-y-1.5 text-sm",
+			children: resolved.map((segment) => /* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "size-2.5 shrink-0 rounded-xs",
+						style: { backgroundColor: segment.color }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: segment.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium tabular-nums",
+						children: figure(segment)
+					}),
+					showValues && max === void 0 ? /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground tabular-nums",
+						children: [
+							"(",
+							format(segment.value),
+							")"
+						]
+					}) : null
+				]
+			}, segment.key))
+		}) : null]
+	});
+}
+//#endregion
+export { DistributionBar };

package/dist/components/registry/minidev/copy-button.d.ts

@@ -0,0 +1,11 @@
+import { buttonVariants } from "../../ui/button.js";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/registry/minidev/copy-button.d.ts
+declare function CopyButton({ value, className, variant, size, label, copiedLabel, ...props }: {
+  value: string;
+  label?: string;
+  copiedLabel?: string;
+} & React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants>): React$1.JSX.Element;
+//#endregion
+export { CopyButton };

package/dist/components/registry/minidev/copy-button.js

@@ -0,0 +1,34 @@
+"use client";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils.js";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import "class-variance-authority";
+//#region src/components/registry/minidev/copy-button.tsx
+function CopyButton({ value, className, variant = "outline", size = "sm", label = "Copy", copiedLabel = "Copied", ...props }) {
+	const [copied, setCopied] = React$1.useState(false);
+	React$1.useEffect(() => {
+		if (!copied) return;
+		const timeout = setTimeout(() => setCopied(false), 2e3);
+		return () => clearTimeout(timeout);
+	}, [copied]);
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		variant,
+		size,
+		"data-slot": "copy-button",
+		className: cn(className),
+		"aria-label": copied ? copiedLabel : label,
+		onClick: async () => {
+			try {
+				await navigator.clipboard.writeText(value);
+				setCopied(true);
+			} catch {}
+		},
+		...props,
+		children: [copied ? /* @__PURE__ */ jsx(CheckIcon, { "data-icon": "inline-start" }) : /* @__PURE__ */ jsx(CopyIcon, { "data-icon": "inline-start" }), copied ? copiedLabel : label]
+	});
+}
+//#endregion
+export { CopyButton };

package/dist/components/registry/niko-table/components/data-table-search-filter.d.ts

@@ -0,0 +1,35 @@
+import { TableSearchFilterProps } from "../filters/table-search-filter.js";
+import { RowData } from "@tanstack/react-table";
+//#region src/components/registry/niko-table/components/data-table-search-filter.d.ts
+type DataTableSearchFilterProps<TData extends RowData> = Omit<TableSearchFilterProps<TData>, "table">;
+/**
+ * A search filter component for DataTable.
+ * Can be used in controlled or uncontrolled mode.
+ *
+ * @example
+ * // Uncontrolled (manages its own state)
+ * <DataTableSearchFilter placeholder="Search products..." />
+ *
+ * @example
+ * // Controlled (you manage the state)
+ * const [search, setSearch] = useState("")
+ * <DataTableSearchFilter
+ *   value={search}
+ *   onChange={setSearch}
+ *   placeholder="Search..."
+ * />
+ *
+ * @example
+ * // With nuqs for URL state
+ * const [search, setSearch] = useQueryState('search')
+ * <DataTableSearchFilter
+ *   value={search ?? ""}
+ *   onChange={setSearch}
+ * />
+ */
+export declare function DataTableSearchFilter<TData extends RowData>(props: DataTableSearchFilterProps<TData>): import("react").JSX.Element;
+export declare namespace DataTableSearchFilter {
+  var displayName: string;
+}
+//#endregion
+export {};