@siyahi/ui 0.1.9-next.1 → 0.1.9-next.3

package/README.md

@@ -104,7 +104,11 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 | 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`                                                           |
+| 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`                                                           |
@@ -117,6 +121,7 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 | 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`                                                         |
@@ -125,7 +130,10 @@ 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

@@ -17,7 +17,8 @@ file as copied; `packages/ui/registry.lock.json` lists them all and
 | 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`)                                                   | `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                                    |
+| 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,24 +1,43 @@
 "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
 /** 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))
+		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

@@ -10,6 +10,8 @@ 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 interface SectionCardsProps {
   items: SectionCard[];

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

@@ -18,12 +18,13 @@ function SectionCards({ items, selected, onSelect }) {
 		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: cn("@container/card", onSelect && "relative", item.label === selected && "ring-2 ring-primary!"),
+				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"
 					}),
@@ -41,7 +42,7 @@ function SectionCards({ items, selected, onSelect }) {
 					(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",
+							className: "flex flex-wrap gap-2 font-medium",
 							children: item.headline
 						}), item.detail && /* @__PURE__ */ jsx("div", {
 							className: "text-muted-foreground",

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

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

@@ -0,0 +1,118 @@
+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 "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/index.d.ts

@@ -1,12 +1,15 @@
-import { ChartColor, ChartSeries, ChartSeriesItem, SeriesChartProps } from "./lib/chart-series.js";
+import { ChartColor, ChartCurve, ChartReferenceLine, ChartSeries, ChartSeriesItem, NumericXProps, SeriesChartProps } from "./lib/chart-series.js";
 import { AreaChartCard, AreaChartCardProps } from "./components/registry/charts/area-chart-card.js";
 import { BarChartCard, BarChartCardProps } from "./components/registry/charts/bar-chart-card.js";
-import { LineChartCard } from "./components/registry/charts/line-chart-card.js";
+import { LineChartCard, LineChartCardProps } from "./components/registry/charts/line-chart-card.js";
 import { SectionCard, SectionCards, SectionCardsProps } from "./components/registry/dashboard-01/section-cards.js";
 import { BarList, BarListItem, BarListProps } from "./components/registry/dashboardcn/bar-list.js";
+import { DistributionBar, DistributionBarProps, DistributionMarker, DistributionSegment } from "./components/registry/dashboardcn/distribution-bar.js";
 import { Activity, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, ColorConfig, Labels } from "./components/registry/heatmap/calendar-heatmap.js";
 import { StatusActivity, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue } from "./components/registry/heatmap/status-heatmap.js";
 import { ColorConfig as ColorConfig$1, WeekdayExtraColumnSpec, WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBlockProps, WeekdayHeatmapBody, WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, WeekdayHeatmapFooterProps, WeekdayHeatmapLabels, WeekdayHeatmapLegend, WeekdayHeatmapLegendProps, WeekdayHeatmapProps, WeekdayHeatmapStat, WeekdayHeatmapStatProps, WeekdayHour, WeekdayHourlyActivity, WeekdayIndex } from "./components/registry/heatmap/weekday-heatmap.js";
+import { Button, buttonVariants } from "./components/ui/button.js";
+import { CopyButton } from "./components/registry/minidev/copy-button.js";
 import { TableColumnActions, TableColumnActionsProps } from "./components/registry/niko-table/filters/table-column-actions.js";
 import { DataTableColumnActions } from "./components/registry/niko-table/components/data-table-column-actions.js";
 import { DataTableColumnFilter } from "./components/registry/niko-table/components/data-table-column-filter.js";
@@ -38,7 +41,6 @@ import { NavMain } from "./components/registry/sidebar-07/nav-main.js";
 import { NavProjects } from "./components/registry/sidebar-07/nav-projects.js";
 import { NavUser } from "./components/registry/sidebar-07/nav-user.js";
 import { TeamSwitcher } from "./components/registry/sidebar-07/team-switcher.js";
-import { Button, buttonVariants } from "./components/ui/button.js";
 import { Input } from "./components/ui/input.js";
 import { Separator } from "./components/ui/separator.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip.js";
@@ -83,5 +85,4 @@ import { Textarea } from "./components/ui/textarea.js";
 import { Toggle, toggleVariants } from "./components/ui/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group.js";
 import { Formatters, TimeOptions, count, money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
-import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "./lib/recharts.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, Area, AreaChart, AreaChartCard, AreaChartCardProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, BarChartCard, BarChartCardProps, BarList, BarListItem, BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CartesianGrid, ChartColor, ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartSeries, ChartSeriesItem, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataList, DataListItem, DataListItemProps, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowContextValue, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableGroupedRowsProps, DataTableHeader, type DataTableHeader$1 as DataTableHeaderCell, DataTableHeaderProps, type DataTableInstance, DataTableLoading, DataTableLoadingMore, DataTableLoadingMoreProps, DataTableLoadingProps, DataTableProvider, DataTableRoot, type DataTableRow, DataTableRowContextMenu, DataTableRowContextMenuProps, DataTableRowContextMenuSlot, DataTableRowContextMenuSlotProps, DataTableRowCount, DataTableRowCountProps, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSkeletonProps, DataTableSortHeader, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, Line, LineChart, LineChartCard, LocalTime, LocalTimeProps, NavMain, NavProjects, NavUser, type Option, PageSection, PageSectionProps, PageSubheading, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, ReferenceLine, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, SectionCards, SectionCardsProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesChartProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, StatusActivity, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, TableSearchFilterProps, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, ToneProgressProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps, type ValueOf, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, XAxis, YAxis, badgeVariants, buttonVariants, count, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActiveCell, ActiveSelection, Activity, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AppSidebarProps, AreaChartCard, AreaChartCardProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarChartCardProps, BarList, BarListItem, BarListProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBlockProps, CalendarHeatmapBody, CalendarHeatmapBodyProps, CalendarHeatmapFooter, CalendarHeatmapFooterProps, CalendarHeatmapLegend, CalendarHeatmapLegendProps, CalendarHeatmapProps, CalendarHeatmapStat, CalendarHeatmapStatProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartColor, ChartConfig, ChartContainer, ChartCurve, ChartLegend, ChartLegendContent, ChartReferenceLine, ChartSeries, ChartSeriesItem, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorConfig, ColumnResizeInfo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataList, DataListItem, DataListItemProps, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowContextValue, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableGroupedRowsProps, DataTableHeader, type DataTableHeader$1 as DataTableHeaderCell, DataTableHeaderProps, type DataTableInstance, DataTableLoading, DataTableLoadingMore, DataTableLoadingMoreProps, DataTableLoadingProps, DataTableProvider, DataTableRoot, type DataTableRow, DataTableRowContextMenu, DataTableRowContextMenuProps, DataTableRowContextMenuSlot, DataTableRowContextMenuSlotProps, DataTableRowCount, DataTableRowCountProps, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSkeletonProps, DataTableSortHeader, DataTableToolbarSection, DataTableToolbarSectionProps, Delta, DeltaProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DistributionBarProps, DistributionMarker, DistributionSegment, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type ExtendedColumnFilter, type ExtendedColumnSort, type FilterOperator, type FilterOperatorValues, type FilterVariant, type FilterVariantValues, FlashCellRef, FlashCells, FlashRows, FlashRowsOptions, Formatters, type GlobalFilter, GroupedBodyRow, GroupedBodyRowProps, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, LineChartCard, LineChartCardProps, LocalTime, LocalTimeProps, NavMain, NavProjects, NavUser, NumericXProps, type Option, PageSection, PageSectionProps, PageSubheading, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollAlign, ScrollArea, ScrollBar, type ScrollEvent, ScrollRowIntoView, SectionCard, SectionCards, SectionCardsProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesChartProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiLocale, SiyahiProvider, SiyahiProviderProps, Skeleton, Slider, StatusActivity, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, TableSearchFilterProps, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, ToneProgressProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps, type ValueOf, type ColorConfig$1 as WeekdayColorConfig, type WeekdayExtraColumnSpec, type WeekdayExtraRowSpec, WeekdayHeatmap, WeekdayHeatmapBlock, type WeekdayHeatmapBlockProps, WeekdayHeatmapBody, type WeekdayHeatmapBodyProps, WeekdayHeatmapFooter, type WeekdayHeatmapFooterProps, type WeekdayHeatmapLabels, WeekdayHeatmapLegend, type WeekdayHeatmapLegendProps, type WeekdayHeatmapProps, WeekdayHeatmapStat, type WeekdayHeatmapStatProps, type WeekdayHour, type WeekdayHourlyActivity, type WeekdayIndex, badgeVariants, buttonVariants, count, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };

package/dist/index.js

@@ -38,9 +38,11 @@ import { LineChartCard } from "./components/registry/charts/line-chart-card.js";
 import { SectionCards } from "./components/registry/dashboard-01/section-cards.js";
 import { count, money, moneyCompact, pct, time, useFormat } from "./lib/format.js";
 import { BarList } from "./components/registry/dashboardcn/bar-list.js";
+import { DistributionBar } from "./components/registry/dashboardcn/distribution-bar.js";
 import { CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat } from "./components/registry/heatmap/calendar-heatmap.js";
 import { StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat } from "./components/registry/heatmap/status-heatmap.js";
 import { WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat } from "./components/registry/heatmap/weekday-heatmap.js";
+import { CopyButton } from "./components/registry/minidev/copy-button.js";
 import { TableColumnActions } from "./components/registry/niko-table/filters/table-column-actions.js";
 import { DataTableColumnHeader, DataTableColumnHeaderRoot, useColumnHeaderContext } from "./components/registry/niko-table/components/data-table-column-header.js";
 import { DataTableColumnActions } from "./components/registry/niko-table/components/data-table-column-actions.js";
@@ -80,5 +82,4 @@ import { PageSection, PageSubheading } from "./components/siyahi/page-section.js
 import { PriceChart } from "./components/siyahi/price-chart.js";
 import { ToneProgress } from "./components/siyahi/tone-progress.js";
 import { Treemap, TreemapLegend } from "./components/siyahi/treemap.js";
-import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "./lib/recharts.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, Area, AreaChart, AreaChartCard, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Bar, BarChart, BarChartCard, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CartesianGrid, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataList, DataListItem, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableHeader, DataTableLoading, DataTableLoadingMore, DataTableProvider, DataTableRoot, DataTableRowContextMenu, DataTableRowContextMenuSlot, DataTableRowCount, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSortHeader, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Line, LineChart, LineChartCard, LocalTime, NavMain, NavProjects, NavUser, PageSection, PageSubheading, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, ReferenceLine, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollArea, ScrollBar, SectionCards, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiProvider, Skeleton, Slider, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapLegend, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, XAxis, YAxis, badgeVariants, buttonVariants, count, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, AppSidebar, AreaChartCard, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartCard, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, CalendarHeatmap, CalendarHeatmapBlock, CalendarHeatmapBody, CalendarHeatmapFooter, CalendarHeatmapLegend, CalendarHeatmapStat, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataList, DataListItem, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableGroupRowProvider, DataTableGroupedRowCells, DataTableGroupedRows, DataTableHeader, DataTableLoading, DataTableLoadingMore, DataTableProvider, DataTableRoot, DataTableRowContextMenu, DataTableRowContextMenuSlot, DataTableRowCount, DataTableRowMenuScope, DataTableSearchFilter, DataTableSkeleton, DataTableSortHeader, DataTableToolbarSection, Delta, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionBar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LineChartCard, LocalTime, NavMain, NavProjects, NavUser, PageSection, PageSubheading, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScrollArea, ScrollBar, SectionCards, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiyahiProvider, Skeleton, Slider, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, Tabs, TabsContent, TabsList, TabsTrigger, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapLegend, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, badgeVariants, buttonVariants, count, defaultLocale, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useTableFacetedFilter };

package/dist/lib/chart-frame.d.ts

@@ -1,12 +1,24 @@
-import { ChartSeries, SeriesChartProps } from "./chart-series.js";
+import { ChartColor, ChartSeries, ChartSeriesItem, NumericXProps, SeriesChartProps } from "./chart-series.js";
 import { ReactNode } from "react";
 import { AreaChart, BarChart, LineChart } from "recharts";
 //#region src/lib/chart-frame.d.ts
-interface ChartFrameProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K> {
+interface ChartFrameProps<T extends object, K extends keyof T> extends SeriesChartProps<T, K>, NumericXProps {
   chart: typeof AreaChart | typeof BarChart | typeof LineChart;
   /** One Bar, Area or Line per series. */
   children: ReactNode;
+  /**
+   * Bars run sideways: the categories go down the left, where long names fit, and the value axis is hidden, as
+   * in shadcn's chart-bar-horizontal. x and y keep their meaning: x is the category, y the value.
+   */
+  horizontal?: boolean;
+  /** "sign" stacks negative values below zero and positive ones above, rather than on one running total. */
+  stackOffset?: "sign";
 }
+/**
+ * The colour a series' Bar takes, which its legend chip shows: the negative colour when every value drawn is below
+ * zero, since each bar's own Cell follows its sign but the chip follows the Bar.
+ */
+export declare function seriesFill<T>(item: ChartSeriesItem<T>, data: readonly T[]): ChartColor;
 /** A tooltip row: the series' colour and label, then its value as the page formats it, or — when the row has none. */
 export declare function seriesRow<T>(series: ChartSeries<T>, formatValue: (value: number) => string): (value: unknown, _name: unknown, item: {
   dataKey?: unknown;
@@ -17,6 +29,6 @@ export declare function seriesRow<T>(series: ChartSeries<T>, formatValue: (value
  * that gave its category axis its own id (dash#88) got a plot split in two
  * and every tooltip headed with the series name instead of the category.
  */
-export declare function ChartFrame<T extends object, K extends keyof T>({ chart: Chart, children, title, description, action, data, xKey, series, xFormatter, valueFormatter, yTickFormatter, height }: ChartFrameProps<T, K>): import("react").JSX.Element;
+export declare function ChartFrame<T extends object, K extends keyof T>({ chart: Chart, children, horizontal, stackOffset, title, description, action, data, xKey, series, xFormatter, xTooltipFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines, placeholder, footer, xDomain, xTicks }: ChartFrameProps<T, K>): import("react").JSX.Element;
 //#endregion
 export {};

package/dist/lib/chart-frame.js

@@ -1,17 +1,30 @@
-import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card.js";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "../components/ui/chart.js";
+import { cn } from "./utils.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CartesianGrid, ReferenceLine, XAxis, YAxis } from "recharts";
 //#region src/lib/chart-frame.tsx
+const AXIS_TITLE = "fill-muted-foreground text-xs";
+const TICK = { className: "fill-muted-foreground font-mono" };
+const NO_LINES = [];
+/**
+* The colour a series' Bar takes, which its legend chip shows: the negative colour when every value drawn is below
+* zero, since each bar's own Cell follows its sign but the chip follows the Bar.
+*/
+function seriesFill(item, data) {
+	const values = data.map((row) => row[item.key]).filter((value) => Number.isFinite(value)).map(Number);
+	return item.negativeColor && values.length > 0 && values.every((value) => value < 0) ? item.negativeColor : item.color;
+}
 /** A tooltip row: the series' colour and label, then its value as the page formats it, or — when the row has none. */
 function seriesRow(series, formatValue) {
 	return (value, _name, item) => {
 		const entry = series.find(({ key }) => key === item.dataKey);
+		const color = entry?.negativeColor && Number(value) < 0 ? entry.negativeColor : entry?.color;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx("span", {
 				className: "size-2.5 shrink-0 rounded-xs",
-				style: { backgroundColor: entry?.color }
+				style: { backgroundColor: color }
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "text-muted-foreground",
@@ -24,13 +37,63 @@ function seriesRow(series, formatValue) {
 		] });
 	};
 }
+const GEIST_WIDTH = 6.6;
+const MONO_WIDTH = 7.2;
+/**
+* Room to keep right of the plot when every named tick is drawn: half the last label, which centres on the
+* domain's right end, and at least 24px.
+*/
+function endRoom(xFormatter, xTicks) {
+	const last = xTicks.at(-1);
+	return Math.max(24, Math.ceil((last === void 0 ? 0 : xFormatter(last).length * MONO_WIDTH) / 2) + 4);
+}
+/** Squeezes a line into its column with SVG's own textLength when it would run into the next one. */
+const fitTo = (text, room, charWidth) => room > 0 && text.length * charWidth > room ? {
+	textLength: room,
+	lengthAdjust: "spacingAndGlyphs"
+} : {};
+/**
+* An x tick fitted to its column, drawn whenever a page names its ticks or gives each a second line: Recharts'
+* own ticks would rather drop a label than let it run into the next. With a detail, the second line comes from the
+* tick's row; under a column the lines hang below the axis, and beside a horizontal bar they straddle its middle.
+* A two-line tick is set in Geist, not Mono: a name with a figure under it reads as a label, as in BarList, and
+* sector names in Mono would take most of a phone's width.
+*/
+function fittedTick(data, xKey, xFormatter, detailOf, beside) {
+	const charWidth = detailOf ? GEIST_WIDTH : MONO_WIDTH;
+	return ({ x, y, width, visibleTicksCount, payload }) => {
+		const value = payload?.value;
+		const row = data.find((r) => r[xKey] === value);
+		const name = xFormatter(value);
+		const detail = row && detailOf ? detailOf(row) : null;
+		const room = beside || !visibleTicksCount ? 0 : Number(width) / visibleTicksCount - 6;
+		return /* @__PURE__ */ jsxs("text", {
+			x,
+			y,
+			textAnchor: beside ? "end" : "middle",
+			className: cn("recharts-cartesian-axis-tick-value fill-muted-foreground", !detailOf && "font-mono"),
+			children: [/* @__PURE__ */ jsx("tspan", {
+				x,
+				dy: beside ? -4 : 12,
+				...fitTo(name, room, charWidth),
+				children: name
+			}), detail !== null && /* @__PURE__ */ jsx("tspan", {
+				x,
+				dy: 15,
+				className: "tabular-nums",
+				...fitTo(detail, room, charWidth),
+				children: detail
+			})]
+		});
+	};
+}
 /**
 * The card, axes, grid, tooltip and legend the three chart cards share. Both
 * axes keep Recharts' default ids: marks find their axes by id, and a page
 * that gave its category axis its own id (dash#88) got a plot split in two
 * and every tooltip headed with the series name instead of the category.
 */
-function ChartFrame({ chart: Chart, children, title, description, action, data, xKey, series, xFormatter = String, valueFormatter, yTickFormatter, height }) {
+function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, title, description, action, data, xKey, series, xFormatter = String, xTooltipFormatter = xFormatter, valueFormatter, yTickFormatter, yDomain, yTicks, height, xTickDetail, xLabel, yLabel, referenceLines = NO_LINES, placeholder, footer, xDomain, xTicks }) {
 	const { numberLocale } = useLocale();
 	const formatValue = valueFormatter ?? new Intl.NumberFormat(numberLocale).format;
 	const config = Object.fromEntries(series.map(({ key, label, color }) => [key, {
@@ -38,59 +101,123 @@ function ChartFrame({ chart: Chart, children, title, description, action, data,
 		color
 	}]));
 	const crossesZero = data.some((row) => series.some(({ key }) => Number(row[key]) < 0));
-	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, { children: [
-		/* @__PURE__ */ jsx(CardTitle, { children: title }),
-		description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
-		action && /* @__PURE__ */ jsx(CardAction, { children: action })
-	] }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(ChartContainer, {
-		config,
-		className: "aspect-auto w-full",
-		style: { height },
-		children: /* @__PURE__ */ jsxs(Chart, {
-			data,
-			margin: {
-				left: 0,
-				right: 8
-			},
-			children: [
-				/* @__PURE__ */ jsx(CartesianGrid, {
-					vertical: false,
-					strokeDasharray: "3 3"
-				}),
-				/* @__PURE__ */ jsx(XAxis, {
-					dataKey: xKey,
-					tickLine: false,
-					axisLine: false,
-					tickMargin: 8,
-					tickFormatter: (value) => xFormatter(value),
-					tick: { className: "font-mono" }
-				}),
-				/* @__PURE__ */ jsx(YAxis, {
-					tickLine: false,
-					axisLine: false,
-					width: "auto",
-					tickFormatter: yTickFormatter ?? formatValue,
-					tick: { className: "font-mono" }
-				}),
-				crossesZero && /* @__PURE__ */ jsx(ReferenceLine, {
-					y: 0,
-					stroke: "var(--border)"
-				}),
-				/* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
-					labelFormatter: (_, payload) => {
-						const row = payload[0]?.payload;
-						return row ? xFormatter(row[xKey]) : null;
-					},
-					formatter: seriesRow(series, formatValue)
-				}) }),
-				children,
-				/* @__PURE__ */ jsx(ChartLegend, {
-					content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
-					itemSorter: null
-				})
-			]
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsxs(CardHeader, { children: [
+			/* @__PURE__ */ jsx(CardTitle, { children: title }),
+			description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
+			action && /* @__PURE__ */ jsx(CardAction, { children: action })
+		] }),
+		/* @__PURE__ */ jsx(CardContent, { children: placeholder ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "chart-placeholder",
+			className: "flex items-center justify-center",
+			style: { height },
+			children: placeholder
+		}) : /* @__PURE__ */ jsx(ChartContainer, {
+			config,
+			className: "aspect-auto w-full",
+			style: { height },
+			children: /* @__PURE__ */ jsxs(Chart, {
+				data,
+				layout: horizontal ? "vertical" : "horizontal",
+				stackOffset,
+				margin: {
+					left: 0,
+					right: xTicks ? endRoom(xFormatter, xTicks) : 8
+				},
+				children: [
+					/* @__PURE__ */ jsx(CartesianGrid, {
+						vertical: horizontal,
+						horizontal: !horizontal,
+						strokeDasharray: "3 3"
+					}),
+					horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+						type: "number",
+						hide: true,
+						domain: yDomain,
+						ticks: yTicks
+					}), /* @__PURE__ */ jsx(YAxis, {
+						dataKey: xKey,
+						type: "category",
+						width: "auto",
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: (value) => xFormatter(value),
+						tick: xTickDetail ? fittedTick(data, xKey, xFormatter, xTickDetail, horizontal) : TICK,
+						interval: 0
+					})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+						dataKey: xKey,
+						type: xDomain ? "number" : "category",
+						domain: xDomain,
+						ticks: xTicks,
+						height: (xTickDetail ? 40 : 30) + (xLabel ? 18 : 0),
+						label: xLabel ? {
+							value: xLabel,
+							position: "insideBottom",
+							className: AXIS_TITLE
+						} : void 0,
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: (value) => xFormatter(value),
+						tick: xTickDetail || xTicks ? fittedTick(data, xKey, xFormatter, xTickDetail, false) : TICK,
+						interval: xTickDetail || xTicks ? 0 : void 0
+					}), /* @__PURE__ */ jsx(YAxis, {
+						tickLine: false,
+						axisLine: false,
+						width: "auto",
+						domain: yDomain,
+						ticks: yTicks,
+						label: yLabel ? {
+							value: yLabel,
+							angle: -90,
+							position: "insideLeft",
+							style: { textAnchor: "middle" },
+							className: AXIS_TITLE
+						} : void 0,
+						tickFormatter: (value) => (yTickFormatter ?? formatValue)(value),
+						tick: TICK
+					})] }),
+					crossesZero && (horizontal ? /* @__PURE__ */ jsx(ReferenceLine, {
+						x: 0,
+						stroke: "var(--border)"
+					}) : /* @__PURE__ */ jsx(ReferenceLine, {
+						y: 0,
+						stroke: "var(--border)"
+					})),
+					referenceLines.map(({ label, emphasis = "muted", labelPosition = "insideTopLeft", ...at }) => /* @__PURE__ */ jsx(ReferenceLine, {
+						...horizontal ? {
+							x: at.y,
+							y: at.x
+						} : at,
+						stroke: emphasis === "strong" ? "var(--foreground)" : "var(--muted-foreground)",
+						strokeDasharray: at.y === void 0 ? void 0 : "4 4",
+						label: label === void 0 ? void 0 : {
+							value: label,
+							position: labelPosition,
+							className: "fill-muted-foreground text-xs"
+						}
+					}, `${at.x ?? ""}:${at.y ?? ""}:${label ?? ""}`)),
+					/* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+						labelFormatter: (_, payload) => {
+							const row = payload[0]?.payload;
+							return row ? xTooltipFormatter(row[xKey]) : null;
+						},
+						formatter: seriesRow(series, formatValue)
+					}) }),
+					children,
+					/* @__PURE__ */ jsx(ChartLegend, {
+						content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
+						itemSorter: null
+					})
+				]
+			})
+		}) }),
+		footer && /* @__PURE__ */ jsx(CardFooter, {
+			className: "flex-col items-start gap-2 text-sm",
+			children: footer
 		})
-	}) })] });
+	] });
 }
 //#endregion
-export { ChartFrame, seriesRow };
+export { ChartFrame, seriesFill, seriesRow };

package/dist/lib/chart-series.d.ts

@@ -1,7 +1,10 @@
 import { ReactNode } from "react";
 //#region src/lib/chart-series.d.ts
-/** The colours a series may take: the five chart slots, and muted for an "Other" past five. */
-export type ChartColor = "var(--chart-1)" | "var(--chart-2)" | "var(--chart-3)" | "var(--chart-4)" | "var(--chart-5)" | "var(--muted-foreground)";
+/**
+ * The colours a series may take: the five chart slots, muted for an "Other" past five, and the two meaning
+ * colours for a gain and a loss.
+ */
+export type ChartColor = "var(--chart-1)" | "var(--chart-2)" | "var(--chart-3)" | "var(--chart-4)" | "var(--chart-5)" | "var(--muted-foreground)" | "var(--positive)" | "var(--negative)";
 /** The fields of a row that hold numbers: the ones a series can plot. */
 type NumericKey<T> = { [K in keyof T]-?: T[K] extends number | null | undefined ? K : never; }[keyof T] & string;
 /** One series: the field it plots, its name in the legend and tooltip, and its colour. */
@@ -9,6 +12,8 @@ export interface ChartSeriesItem<T> {
   key: NumericKey<T>;
   label: string;
   color: ChartColor;
+  /** A bar below zero takes this colour instead, such as var(--negative) for a loss beside var(--positive). */
+  negativeColor?: ChartColor;
 }
 /**
  * The series in draw, stack and legend order; give the slots in order from
@@ -16,6 +21,23 @@ export interface ChartSeriesItem<T> {
  * number-like keys such as "2024" first whatever order the page wrote them in.
  */
 export type ChartSeries<T> = readonly ChartSeriesItem<T>[];
+/**
+ * A labelled line across the plot: a level on the value axis (y), such as a limit, or a point on the x axis, such
+ * as an event. A level is dashed, an event solid.
+ */
+export type ChartReferenceLine = ({
+  y: number;
+  x?: never;
+} | {
+  x: number | string;
+  y?: never;
+}) & {
+  label?: string;
+  /** "strong" draws it in the text colour, for the line that matters most; "muted" by default. */
+  emphasis?: "muted" | "strong";
+  /** Where the label sits against the line. Defaults to insideTopLeft. */
+  labelPosition?: "insideTopLeft" | "insideTopRight" | "insideBottomLeft" | "insideBottomRight";
+};
 /** What BarChartCard, AreaChartCard and LineChartCard all take. */
 export interface SeriesChartProps<T extends object, K extends keyof T> {
   title: ReactNode;
@@ -27,14 +49,44 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
   /** The field the x axis reads: a month, an hour of day, a price bucket. One row per value; a repeated value is hidden behind the first. */
   xKey: K;
   series: ChartSeries<NoInfer<T>>;
-  /** The x axis ticks and the tooltip's heading. Defaults to the value as text. */
+  /** The x axis ticks, and the tooltip's heading unless xTooltipFormatter is set. Defaults to the value as text. */
   xFormatter?: (value: T[K]) => string;
+  /** The tooltip's heading, when it should say more than a tick: "19:34:13 IST, 10 s average" against "19:34". */
+  xTooltipFormatter?: (value: T[K]) => string;
   /** A series' value in the tooltip, and the y axis unless yTickFormatter is set. Defaults to the locale's numbers. */
   valueFormatter?: (value: number) => string;
   /** The y axis, when its ticks should be shorter than the tooltip's figures: moneyCompact against money. */
   yTickFormatter?: (value: number) => string;
+  /** A fixed range for the value axis, such as [0, 100] for a percentage; by default it fits the data. */
+  yDomain?: [number, number];
+  /** Where the value axis puts its ticks, such as [0, 25, 50, 75, 100]. */
+  yTicks?: readonly number[];
   /** Height of the plot and legend, in pixels. */
   height: number;
+  /** A second line under each x tick, so a row's figure reads without a hover: "FY24" then "▲₹1.2L". */
+  xTickDetail?: (row: T) => string;
+  /** A title under the x axis, such as "Hour of day (IST)". Not drawn on sideways bars. */
+  xLabel?: string;
+  /** A title beside the value axis, read bottom to top, such as "Orders". Not drawn on sideways bars. */
+  yLabel?: string;
+  /** Limits and events to mark on the plot. A zero line draws by itself when a value goes below zero. */
+  referenceLines?: readonly ChartReferenceLine[];
+  /** Shown in the plot's place, at its height, while the data loads or after it failed to. */
+  placeholder?: ReactNode;
+  /** Lines under the chart, such as a caption or a takeaway, in the card's footer. */
+  footer?: ReactNode;
 }
+/** A numeric x axis, for samples in time or any measure where a mark can sit between two rows. */
+export interface NumericXProps {
+  /** The x axis runs over this range of the xKey field, which must hold numbers; without it the axis is one slot per row. */
+  xDomain?: [number, number];
+  /** Where the x axis puts its ticks, in the xKey field's units; give xDomain with it, so the axis is numeric. */
+  xTicks?: readonly number[];
+}
+/**
+ * How a line or an area's edge joins its points: "linear" draws straight segments, as measured samples should
+ * be drawn; "monotone", the default, smooths between them without overshooting a point.
+ */
+export type ChartCurve = "monotone" | "linear";
 //#endregion
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.1",
+  "version": "0.1.9-next.3",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",

package/registry.lock.json

@@ -41,6 +41,14 @@
       "copied": "2026-10-20",
       "sha256": "bc19cf1f5e486fa11273e7d7ed620eb7b82ba360f72e5a15e6bf488f992d16ce"
     },
+    {
+      "file": "src/components/registry/dashboardcn/distribution-bar.tsx",
+      "registry": "@dashboardcn/distribution-bar",
+      "origin": "https://dashboardcn.com/r/distribution-bar.json",
+      "licence": "MIT, Copyright (c) 2026 dashboardcn contributors, https://github.com/NoahGdev/dashboardcn/blob/main/LICENSE",
+      "copied": "2026-10-22",
+      "sha256": "9028368f1363732cef765dabad2eca3ba98b608f1e237123b09df701c41c8b5a"
+    },
     {
       "file": "src/components/registry/heatmap/calendar-heatmap.tsx",
       "registry": "@heatmap/calendar-heatmap",
@@ -65,6 +73,14 @@
       "copied": "2026-10-20",
       "sha256": "b7af6139e3764e1479880fb232988e758edb27ce4e4280d9e0349cbdf9b3d30c"
     },
+    {
+      "file": "src/components/registry/minidev/copy-button.tsx",
+      "registry": "@minidev/copy-button",
+      "origin": "https://ui.minidev.pro/r/copy-button.json",
+      "licence": "MIT, Copyright (c) 2026 MiniDev, https://github.com/amankaushik481/minidev-ui/blob/main/LICENSE",
+      "copied": "2026-10-22",
+      "sha256": "67f491ea6c947ebf3bf058423a373347badd49ad07861e022599ebdbb11cab44"
+    },
     {
       "file": "src/components/registry/niko-table/components/data-table-column-actions.tsx",
       "registry": "@niko-table/data-table",

package/dist/lib/recharts.d.ts

@@ -1,2 +0,0 @@
-import { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "recharts";
-export { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis };

package/dist/lib/recharts.js

@@ -1 +0,0 @@
-export { Area, AreaChart, Bar, BarChart, CartesianGrid, Line, LineChart, ReferenceLine, XAxis, YAxis } from "recharts";