@siyahi/ui 0.1.9-next.23 → 0.1.9-next.25

package/dist/components/siyahi/slope-chart.js

@@ -0,0 +1,159 @@
+import { useFormat } from "../../lib/format.js";
+import { useElementWidth } from "../../lib/use-element-width.js";
+import { fit, textWidth } from "../../lib/fit-text.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/slope-chart.tsx
+const ROW = 18;
+const TOP = 32;
+const BOTTOM = 8;
+const GAP = 12;
+const NONE = [];
+/**
+* Pushes labels apart so none sits closer than `gap` to the next, keeping their order and staying inside [min, max]:
+* down from the top first, then back up from the bottom when the last one ran past it.
+*/
+function spread(ys, gap, min, max) {
+	const order = ys.map((y, index) => ({
+		y,
+		index
+	})).toSorted((a, b) => a.y - b.y);
+	let floor = min;
+	for (const label of order) {
+		label.y = Math.max(label.y, floor);
+		floor = label.y + gap;
+	}
+	let ceiling = max;
+	for (const label of order.toReversed()) {
+		label.y = Math.min(label.y, ceiling);
+		ceiling = label.y - gap;
+	}
+	const placed = Array.from({ length: ys.length }, () => 0);
+	for (const { y, index } of order) placed[index] = y;
+	return placed;
+}
+/**
+* Each item as a line from its value on the left to its value on the right, so rises, falls and crossings read at a
+* glance: allocation against a target, a weight against an index's, or one year against the next. Lines are grey and
+* the page picks the few to draw in the accent; names sit on the left, values at both ends, nudged apart when close.
+*/
+function SlopeChart({ items: given, fromLabel, toLabel, highlighted = NONE, valueFormatter, className }) {
+	const [ref, width] = useElementWidth();
+	const { pct } = useFormat();
+	const format = valueFormatter ?? ((value) => pct(value));
+	const items = given.filter(({ from, to }) => Number.isFinite(from) && Number.isFinite(to));
+	const height = TOP + Math.max(items.length * ROW * 1.5, 180) + BOTTOM;
+	const values = items.flatMap(({ from, to }) => [from, to]);
+	const low = Math.min(...values);
+	const high = Math.max(...values);
+	const y = (value) => high === low ? (TOP + height - BOTTOM) / 2 : TOP + (high - value) / (high - low) * (height - TOP - BOTTOM - ROW) + ROW / 2;
+	const rightTexts = [toLabel, ...items.map(({ to }) => format(to))];
+	const column = Math.min(Math.ceil(Math.max(...rightTexts.map(textWidth)) * 1.1) + 8, Math.round(width * .4));
+	const left = Math.min(Math.max(Math.round(width * .45), width - column - 96), 240);
+	const right = width - column;
+	const lefts = spread(items.map(({ from }) => y(from)), ROW, 41, height - BOTTOM - ROW / 2);
+	const rights = spread(items.map(({ to }) => y(to)), ROW, 41, height - BOTTOM - ROW / 2);
+	const marked = new Set(highlighted);
+	const isMarked = (item) => marked.has(item.key ?? item.name);
+	const order = items.map((item, index) => ({
+		item,
+		index
+	})).toSorted((a, b) => Number(isMarked(a.item)) - Number(isMarked(b.item)));
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "slope-chart",
+		className: cn("w-full max-w-2xl", className),
+		style: { height },
+		children: [width > 0 && /* @__PURE__ */ jsxs("svg", {
+			width,
+			height,
+			"aria-hidden": "true",
+			className: "text-xs",
+			children: [
+				/* @__PURE__ */ jsx("text", {
+					x: left,
+					y: 14,
+					textAnchor: "end",
+					className: "fill-muted-foreground font-medium",
+					children: fit(fromLabel, left)
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: right,
+					y: 14,
+					className: "fill-muted-foreground font-medium",
+					children: fit(toLabel, column)
+				}),
+				[left, right].map((x) => /* @__PURE__ */ jsx("line", {
+					x1: x,
+					x2: x,
+					y1: 26,
+					y2: height - BOTTOM,
+					className: "stroke-border"
+				}, x)),
+				order.map(({ item, index }) => {
+					const strong = isMarked(item);
+					const ink = strong ? "var(--chart-1)" : "var(--muted-foreground)";
+					const a = y(item.from);
+					const b = y(item.to);
+					return /* @__PURE__ */ jsxs("g", {
+						"data-slot": "slope-chart-item",
+						"data-highlighted": strong || void 0,
+						children: [
+							/* @__PURE__ */ jsx("title", { children: `${item.name}: ${format(item.from)} to ${format(item.to)}` }),
+							strong && /* @__PURE__ */ jsx("line", {
+								x1: left + GAP,
+								y1: a,
+								x2: right - GAP,
+								y2: b,
+								stroke: "var(--card)",
+								strokeWidth: 6.5,
+								strokeLinecap: "round"
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: left + GAP,
+								y1: a,
+								x2: right - GAP,
+								y2: b,
+								stroke: ink,
+								strokeWidth: strong ? 2.5 : 1.5
+							}),
+							[[left + GAP, a], [right - GAP, b]].map(([cx, cy]) => /* @__PURE__ */ jsx("circle", {
+								cx,
+								cy,
+								r: strong ? 4 : 3,
+								fill: ink,
+								stroke: strong ? "var(--card)" : void 0,
+								strokeWidth: strong ? 2 : void 0
+							}, cx)),
+							/* @__PURE__ */ jsxs("text", {
+								x: left - 4,
+								y: lefts[index],
+								dominantBaseline: "central",
+								textAnchor: "end",
+								className: cn("tabular-nums", strong ? "fill-foreground font-medium" : "fill-muted-foreground"),
+								children: [
+									fit(item.name, left - 8 - textWidth(` ${format(item.from)}`)),
+									" ",
+									format(item.from)
+								]
+							}),
+							/* @__PURE__ */ jsx("text", {
+								x: right + 4,
+								y: rights[index],
+								dominantBaseline: "central",
+								className: cn("tabular-nums", strong ? "fill-foreground font-medium" : "fill-muted-foreground"),
+								children: format(item.to)
+							})
+						]
+					}, item.key ?? item.name);
+				})
+			]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "sr-only",
+			"aria-label": `${fromLabel} against ${toLabel}`,
+			children: items.map((item) => /* @__PURE__ */ jsx("li", { children: `${item.name}: ${fromLabel} ${format(item.from)}, ${toLabel} ${format(item.to)}` }, item.key ?? item.name))
+		})]
+	});
+}
+//#endregion
+export { SlopeChart, spread };

package/dist/components/siyahi/treemap.js

@@ -1,6 +1,8 @@
 import { useFormat } from "../../lib/format.js";
 import { useElementWidth } from "../../lib/use-element-width.js";
-import { heat, heatFill, heatRange, layout } from "../../lib/treemap.js";
+import { heat, heatFill, heatRange } from "../../lib/heat.js";
+import { fit, textWidth } from "../../lib/fit-text.js";
+import { layout } from "../../lib/treemap.js";
 import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useMemo, useState } from "react";
@@ -138,12 +140,6 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		})
 	});
 }
-const CHAR_PX = 6.6;
-const textWidth = (text) => text.length * CHAR_PX;
-function fit(text, width) {
-	const room = Math.floor(width / CHAR_PX);
-	return text.length <= room ? text : `${text.slice(0, Math.max(room - 1, 1)).trimEnd()}…`;
-}
 const MIN_LABEL_WIDTH = 56;
 const MIN_LABEL_HEIGHT = 28;
 const TWO_LINE_HEIGHT = 44;

package/dist/components/siyahi/waterfall-chart.d.ts

@@ -0,0 +1,51 @@
+import { SeriesChartProps } from "../../lib/chart-series.js";
+//#region src/components/siyahi/waterfall-chart.d.ts
+/**
+ * One bar of a waterfall. A change moves the running total by its value. A total draws the running total from zero;
+ * give it a value to set the total instead, as an opening balance does. Labels may repeat, such as "Balance" at
+ * both ends: each bar is placed by its position.
+ */
+export type WaterfallStep = {
+  kind: "change";
+  label: string;
+  value: number;
+} | {
+  kind: "total";
+  label: string;
+  value?: number;
+};
+/** A step as drawn: the running total after it, and the span its bar covers. */
+export interface WaterfallBar {
+  /** The step's position, as text: the category the bar is placed by. */
+  key: string;
+  label: string;
+  kind: "rise" | "fall" | "total";
+  /** How far the step moved the running total. */
+  change: number;
+  /** The running total after the step. */
+  level: number;
+  /** The bar's low and high ends, low first whichever way the step moved: Recharts reads a range that way. */
+  span: [number, number];
+  /** The bar picks up at the level the one before left, so a dashed line joins them. */
+  continues: boolean;
+}
+/** Walks the steps in order, keeping the running total. */
+export declare function waterfallBars(steps: readonly WaterfallStep[]): WaterfallBar[];
+export interface WaterfallChartCardProps extends Pick<SeriesChartProps<WaterfallBar, "key">, "title" | "description" | "action" | "height" | "valueFormatter" | "yTickFormatter" | "yLabel" | "referenceLines" | "placeholder" | "footer"> {
+  /** The bars in order: usually a total to start from, the changes, and a total to end on. */
+  steps: readonly WaterfallStep[];
+  /** Bars run sideways with the labels down the left, for long names such as product categories. */
+  horizontal?: boolean;
+  /** What the legend calls each kind of bar. */
+  labels?: {
+    rise: string;
+    fall: string;
+    total: string;
+  };
+}
+/**
+ * A running total bridged step by step: where it starts, each change that moved it, and where it ends, such as a
+ * year's profit built up month by month. Rises and falls float at the level the one before left; totals stand on zero.
+ */
+export declare function WaterfallChartCard({ steps, horizontal, labels, ...props }: WaterfallChartCardProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/waterfall-chart.js

@@ -0,0 +1,147 @@
+import { useLocale } from "./siyahi-provider.js";
+import { ChartFrame } from "../../lib/chart-frame.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Bar, BarChart, Cell, ReferenceLine } from "recharts";
+//#region src/components/siyahi/waterfall-chart.tsx
+const span = (a, b) => [Math.min(a, b), Math.max(a, b)];
+/** Walks the steps in order, keeping the running total. */
+function waterfallBars(steps) {
+	let level = 0;
+	return steps.map((step, index) => {
+		const before = level;
+		const key = String(index);
+		if (step.kind === "total") {
+			level = step.value ?? level;
+			const continues = level === before;
+			return {
+				key,
+				label: step.label,
+				kind: "total",
+				change: level - before,
+				level,
+				span: span(0, level),
+				continues
+			};
+		}
+		level += step.value;
+		const kind = step.value < 0 ? "fall" : "rise";
+		return {
+			key,
+			label: step.label,
+			kind,
+			change: step.value,
+			level,
+			span: span(before, level),
+			continues: true
+		};
+	});
+}
+/**
+* The first step whose figure is not a number. Every bar after it stands on the running total, so a missing change
+* cannot be skipped without drawing wrong balances; the card says which step is missing instead.
+*/
+const unknownStep = (steps) => steps.find((step) => step.value !== void 0 && !Number.isFinite(step.value));
+const COLOR = {
+	rise: "var(--positive)",
+	fall: "var(--negative)",
+	total: "var(--chart-1)"
+};
+const LABELS = {
+	rise: "Increase",
+	fall: "Decrease",
+	total: "Total"
+};
+const MINUS = "−";
+const fill = (kind) => kind === "total" ? COLOR.total : `color-mix(in oklab, ${COLOR[kind]} 35%, var(--card))`;
+function Legend({ labels }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center gap-4 pt-3",
+		children: [
+			"rise",
+			"fall",
+			"total"
+		].map((kind) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "size-2 shrink-0 rounded-xs border",
+				style: {
+					backgroundColor: fill(kind),
+					borderColor: COLOR[kind]
+				}
+			}), labels[kind]]
+		}, kind))
+	});
+}
+/**
+* A running total bridged step by step: where it starts, each change that moved it, and where it ends, such as a
+* year's profit built up month by month. Rises and falls float at the level the one before left; totals stand on zero.
+*/
+function WaterfallChartCard({ steps, horizontal = false, labels = LABELS, ...props }) {
+	const { numberLocale } = useLocale();
+	const bars = useMemo(() => waterfallBars(steps), [steps]);
+	const format = props.valueFormatter ?? new Intl.NumberFormat(numberLocale).format;
+	const signed = (value) => `${value > 0 ? "+" : value < 0 ? MINUS : ""}${format(Math.abs(value))}`;
+	const names = new Map(bars.map((bar) => [bar.key, bar.label]));
+	const unknown = unknownStep(steps);
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		chart: BarChart,
+		...props,
+		placeholder: props.placeholder ?? (unknown && /* @__PURE__ */ jsxs("p", {
+			className: "text-sm text-muted-foreground",
+			children: [unknown.label, " has no figure, so the running total after it is unknown."]
+		})),
+		horizontal,
+		data: bars,
+		xKey: "key",
+		xFormatter: (key) => names.get(key) ?? key,
+		series: [{
+			key: "level",
+			label: labels.total,
+			color: COLOR.total
+		}],
+		legend: /* @__PURE__ */ jsx(Legend, { labels }),
+		tooltipRow: (_value, _name, item) => {
+			const bar = item.payload;
+			return (bar.kind === "total" ? [[labels.total, format(bar.level)]] : [[bar.kind === "rise" ? labels.rise : labels.fall, signed(bar.change)], ["Running total", format(bar.level)]]).map(([name, figure]) => /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: name
+				}), /* @__PURE__ */ jsx("span", {
+					className: "ml-auto font-mono font-medium text-foreground tabular-nums",
+					children: figure
+				})]
+			}, name));
+		},
+		children: [bars.slice(0, -1).map((bar, i) => {
+			const next = bars[i + 1];
+			if (!next.continues) return null;
+			const at = (key) => horizontal ? {
+				x: bar.level,
+				y: key
+			} : {
+				x: key,
+				y: bar.level
+			};
+			return /* @__PURE__ */ jsx(ReferenceLine, {
+				segment: [at(bar.key), at(next.key)],
+				stroke: "var(--muted-foreground)",
+				strokeDasharray: "2 2",
+				"data-slot": "waterfall-connector"
+			}, bar.key);
+		}), /* @__PURE__ */ jsx(Bar, {
+			dataKey: "span",
+			name: labels.total,
+			maxBarSize: horizontal ? 24 : 48,
+			radius: 2,
+			children: bars.map((bar) => /* @__PURE__ */ jsx(Cell, {
+				fill: fill(bar.kind),
+				stroke: COLOR[bar.kind],
+				strokeWidth: 1.5
+			}, bar.key))
+		})]
+	});
+}
+//#endregion
+export { WaterfallChartCard, waterfallBars };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ChartColor, ChartCurve, ChartReferenceLine, ChartSeries, ChartSeriesItem, NumericXProps, SeriesChartProps } from "./lib/chart-series.js";
+import { ChartColor, ChartCurve, ChartReferenceLine, ChartSeries, ChartSeriesItem, NumericKey, 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, LineChartCardProps } from "./components/registry/charts/line-chart-card.js";
@@ -52,6 +52,7 @@ import { AppSidebar, AppSidebarProps } from "./components/registry/sidebar-07/ap
 import { Callout, CalloutProps } from "./components/siyahi/callout.js";
 import { Delta, DeltaProps } from "./components/siyahi/delta.js";
 import { ChangeBar, ChangeBarProps } from "./components/siyahi/change-bar.js";
+import { ChangeGrid, ChangeGridProps, ChangeGridRow } from "./components/siyahi/change-grid.js";
 import { DataBar, DataBarProps } from "./components/siyahi/data-bar.js";
 import { DataList, DataListItem, DataListItemProps } from "./components/siyahi/data-list.js";
 import { DataTableCompactColumnsToggle } from "./components/siyahi/data-table-compact-columns-toggle.js";
@@ -59,6 +60,8 @@ import { DataTableFootnote, DataTableFootnoteProps } from "./components/siyahi/d
 import { DataTableRowCount, DataTableRowCountProps } from "./components/siyahi/data-table-row-count.js";
 import { DataTableSortHeader } from "./components/siyahi/data-table-sort-header.js";
 import { defaultSidebarOpen } from "./components/siyahi/default-sidebar-open.js";
+import { DrawdownChartCard, DrawdownChartCardProps, DrawdownPoint, drawdowns } from "./components/siyahi/drawdown-chart.js";
+import { HistogramBin, HistogramChartCard, HistogramChartCardProps, HistogramMark, bucketOf, histogram, markLines, percentile } from "./components/siyahi/histogram-chart.js";
 import { InlineCode } from "./components/siyahi/inline-code.js";
 import { LocalTime, LocalTimeProps } from "./components/siyahi/local-time.js";
 import { PageHero, PageHeroProps } from "./components/siyahi/page-hero.js";
@@ -68,8 +71,11 @@ import { PanelGrid, PanelGridProps } from "./components/siyahi/panel-grid.js";
 import { PriceChart, PriceChartProps } from "./components/siyahi/price-chart.js";
 import { Quote, QuoteProps } from "./components/siyahi/quote.js";
 import { RangePosition, RangePositionProps } from "./components/siyahi/range-position.js";
+import { ScatterQuadrants } from "./lib/scatter.js";
+import { ScatterChartCard, ScatterChartCardProps, ScatterDetail, ScatterPoint } from "./components/siyahi/scatter-chart.js";
 import { SiyahiLocale, defaultLocale } from "./lib/locale.js";
 import { SiyahiProvider, SiyahiProviderProps, Surface, useLocale, useSurface } from "./components/siyahi/siyahi-provider.js";
+import { SlopeChart, SlopeChartProps, SlopeItem, spread } from "./components/siyahi/slope-chart.js";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "./components/ui/alert.js";
 import { StatusAlert, StatusAlertProps } from "./components/siyahi/status-alert.js";
 import { Badge, badgeVariants } from "./components/ui/badge.js";
@@ -78,6 +84,7 @@ import { TargetRow, TargetRows, TargetRowsProps, TargetStatus } from "./componen
 import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "./components/ui/progress.js";
 import { ToneProgress, ToneProgressProps } from "./components/siyahi/tone-progress.js";
 import { Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps } from "./components/siyahi/treemap.js";
+import { WaterfallBar, WaterfallChartCard, WaterfallChartCardProps, WaterfallStep, waterfallBars } from "./components/siyahi/waterfall-chart.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/ui/accordion.js";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "./components/ui/avatar.js";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/ui/breadcrumb.js";
@@ -101,4 +108,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";
-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, Callout, CalloutProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, ChangeBarProps, 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, CompactColumns, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataBarProps, DataList, DataListItem, DataListItemProps, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableCompactColumnsToggle, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, DataTableFootnoteProps, 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, MetricStrip, MetricStripItem, MetricStripProps, NavMain, NavProjects, NavUser, NumericXProps, type Option, PageHero, PageHeroProps, PageSection, PageSectionProps, PageSubheading, PageToc, PageTocItem, PageTocProps, PanelGrid, PanelGridProps, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, Quote, QuoteProps, RangePosition, RangePositionProps, 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, Sparkline, SparklineProps, StatusActivity, StatusAlert, StatusAlertProps, StatusBadge, StatusBadgeProps, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Surface, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, TableSearchFilterProps, Tabs, TabsContent, TabsList, TabsTrigger, TargetRow, TargetRows, TargetRowsProps, TargetStatus, 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, defaultSidebarOpen, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, 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, Callout, CalloutProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, ChangeBarProps, ChangeGrid, ChangeGridProps, ChangeGridRow, 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, CompactColumns, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DataBar, DataBarProps, DataList, DataListItem, DataListItemProps, DataTable, DataTableActions, DataTableBody, DataTableBodyProps, type DataTableCell, type DataTableColumn, DataTableColumnActions, type DataTableColumnDef, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderProps, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, type DataTableColumns, DataTableCompactColumnsToggle, DataTableConfig, DataTableContainerProps, DataTableContext, DataTableContextState, DataTableEmptyActions, DataTableEmptyActionsProps, DataTableEmptyBody, DataTableEmptyBodyProps, DataTableEmptyDescription, DataTableEmptyDescriptionProps, DataTableEmptyFilteredMessage, DataTableEmptyFilteredMessageProps, DataTableEmptyIcon, DataTableEmptyIconProps, DataTableEmptyMessage, DataTableEmptyMessageProps, DataTableEmptyState, DataTableEmptyStateProps, DataTableEmptyTitle, DataTableEmptyTitleProps, DataTableErrorBoundary, DataTableErrorBoundaryProps, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, DataTableFootnoteProps, 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, DrawdownChartCard, DrawdownChartCardProps, DrawdownPoint, 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, HistogramBin, HistogramChartCard, HistogramChartCardProps, HistogramMark, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type JoinOperator, type JoinOperatorValues, Labels, LineChartCard, LineChartCardProps, LocalTime, LocalTimeProps, MetricStrip, MetricStripItem, MetricStripProps, NavMain, NavProjects, NavUser, NumericKey, NumericXProps, type Option, PageHero, PageHeroProps, PageSection, PageSectionProps, PageSubheading, PageToc, PageTocItem, PageTocProps, PanelGrid, PanelGridProps, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, PriceChartProps, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, type QueryKeys, Quote, QuoteProps, RangePosition, RangePositionProps, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScatterChartCard, ScatterChartCardProps, ScatterDetail, ScatterPoint, type ScatterQuadrants, 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, SlopeChart, SlopeChartProps, SlopeItem, Sparkline, SparklineProps, StatusActivity, StatusAlert, StatusAlertProps, StatusBadge, StatusBadgeProps, StatusColorConfig, StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBlockProps, StatusHeatmapBody, StatusHeatmapBodyProps, StatusHeatmapFooter, StatusHeatmapFooterProps, StatusHeatmapLabels, StatusHeatmapLegend, StatusHeatmapLegendProps, StatusHeatmapProps, StatusHeatmapStat, StatusHeatmapStatProps, StatusValue, Surface, Table, TableBody, TableCaption, TableCell, TableColumnActions, TableColumnActionsProps, TableColumnSortMenu, TableColumnSortOptions, TableColumnTitle, TableFacetedFilter, TableFacetedFilterContent, TableFacetedFilterProps, TableFooter, TableHead, TableHeader, TableRow, TableSearchFilter, TableSearchFilterProps, Tabs, TabsContent, TabsList, TabsTrigger, TargetRow, TargetRows, TargetRowsProps, TargetStatus, TeamSwitcher, Textarea, TimeOptions, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, ToneProgressProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapItem, TreemapLegend, TreemapLegendProps, TreemapProps, type ValueOf, WaterfallBar, WaterfallChartCard, WaterfallChartCardProps, WaterfallStep, 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, bucketOf, buttonVariants, count, defaultLocale, defaultSidebarOpen, drawdowns, flashCellKey, histogram, markLines, money, moneyCompact, pct, percentile, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, spread, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, useTableFacetedFilter, waterfallBars };

package/dist/index.js

@@ -77,6 +77,7 @@ import { TeamSwitcher } from "./components/registry/sidebar-07/team-switcher.js"
 import { AppSidebar } from "./components/registry/sidebar-07/app-sidebar.js";
 import { Callout } from "./components/siyahi/callout.js";
 import { ChangeBar } from "./components/siyahi/change-bar.js";
+import { ChangeGrid } from "./components/siyahi/change-grid.js";
 import { DataBar } from "./components/siyahi/data-bar.js";
 import { DataList, DataListItem } from "./components/siyahi/data-list.js";
 import { DataTableCompactColumnsToggle } from "./components/siyahi/data-table-compact-columns-toggle.js";
@@ -84,6 +85,8 @@ import { DataTableFootnote } from "./components/siyahi/data-table-footnote.js";
 import { DataTableRowCount } from "./components/siyahi/data-table-row-count.js";
 import { DataTableSortHeader } from "./components/siyahi/data-table-sort-header.js";
 import { defaultSidebarOpen } from "./components/siyahi/default-sidebar-open.js";
+import { DrawdownChartCard, drawdowns } from "./components/siyahi/drawdown-chart.js";
+import { HistogramChartCard, bucketOf, histogram, markLines, percentile } from "./components/siyahi/histogram-chart.js";
 import { InlineCode } from "./components/siyahi/inline-code.js";
 import { LocalTime } from "./components/siyahi/local-time.js";
 import { PageHero } from "./components/siyahi/page-hero.js";
@@ -93,9 +96,12 @@ import { PanelGrid } from "./components/siyahi/panel-grid.js";
 import { PriceChart } from "./components/siyahi/price-chart.js";
 import { Quote } from "./components/siyahi/quote.js";
 import { RangePosition } from "./components/siyahi/range-position.js";
+import { ScatterChartCard } from "./components/siyahi/scatter-chart.js";
+import { SlopeChart, spread } from "./components/siyahi/slope-chart.js";
 import { StatusAlert } from "./components/siyahi/status-alert.js";
 import { StatusBadge } from "./components/siyahi/status-badge.js";
 import { TargetRows } from "./components/siyahi/target-rows.js";
 import { ToneProgress } from "./components/siyahi/tone-progress.js";
 import { Treemap, TreemapLegend } from "./components/siyahi/treemap.js";
-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, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, 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, DataBar, DataList, DataListItem, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableCompactColumnsToggle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, 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, MetricStrip, NavMain, NavProjects, NavUser, PageHero, PageSection, PageSubheading, PageToc, PanelGrid, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Quote, RangePosition, 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, Sparkline, StatusAlert, StatusBadge, 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, TargetRows, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapLegend, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, badgeVariants, buttonVariants, count, defaultLocale, defaultSidebarOpen, flashCellKey, money, moneyCompact, pct, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, useTableFacetedFilter };
+import { WaterfallChartCard, waterfallBars } from "./components/siyahi/waterfall-chart.js";
+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, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChangeBar, ChangeGrid, 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, DataBar, DataList, DataListItem, DataTable, DataTableActions, DataTableBody, DataTableColumnActions, DataTableColumnFilter, DataTableColumnHeader, DataTableColumnHeaderRoot, DataTableColumnSortMenu, DataTableColumnSortOptions, DataTableColumnTitle, DataTableCompactColumnsToggle, DataTableContext, DataTableEmptyActions, DataTableEmptyBody, DataTableEmptyDescription, DataTableEmptyFilteredMessage, DataTableEmptyIcon, DataTableEmptyMessage, DataTableEmptyState, DataTableEmptyTitle, DataTableErrorBoundary, DataTableFacetedFilter, DataTableFacetedFilterContent, DataTableFootnote, 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, DrawdownChartCard, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, GroupedBodyRow, HistogramChartCard, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LineChartCard, LocalTime, MetricStrip, NavMain, NavProjects, NavUser, PageHero, PageSection, PageSubheading, PageToc, PanelGrid, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, PriceChart, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Quote, RangePosition, RowMenuGroup, RowMenuItem, RowMenuLabel, RowMenuSeparator, RowMenuSub, RowMenuSubContent, RowMenuSubTrigger, ScatterChartCard, 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, SlopeChart, Sparkline, StatusAlert, StatusBadge, 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, TargetRows, TeamSwitcher, Textarea, Toggle, ToggleGroup, ToggleGroupItem, ToneProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Treemap, TreemapLegend, WaterfallChartCard, WeekdayHeatmap, WeekdayHeatmapBlock, WeekdayHeatmapBody, WeekdayHeatmapFooter, WeekdayHeatmapLegend, WeekdayHeatmapStat, badgeVariants, bucketOf, buttonVariants, count, defaultLocale, defaultSidebarOpen, drawdowns, flashCellKey, histogram, markLines, money, moneyCompact, pct, percentile, resolveGroupedRowsSlot, resolveRowContextMenuRenderer, spread, tabsListVariants, time, toggleVariants, useColumnHeaderContext, useColumnResizeInfo, useDataTable, useDataTableActiveCell, useDataTableActiveCellSetter, useDataTableGroupRow, useDataTableRow, useFormat, useLocale, useResolvedRowContextMenuRenderer, useSidebar, useSurface, useTableFacetedFilter, waterfallBars };

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

@@ -1,5 +1,6 @@
 import { ChartColor, ChartSeries, ChartSeriesItem, NumericXProps, SeriesChartProps } from "./chart-series.js";
-import { ComponentProps, ReactNode } from "react";
+import { ChartTooltipContent } from "../components/ui/chart.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
 import { AreaChart, BarChart, LineChart, YAxisProps } from "recharts";
 //#region src/lib/chart-frame.d.ts
 interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<SeriesChartProps<T, K>, "yDomain">, NumericXProps {
@@ -17,6 +18,10 @@ interface ChartFrameProps<T extends object, K extends keyof T> extends Omit<Seri
   /** "sign" stacks negative values below zero and positive ones above, rather than on one running total. */
   stackOffset?: "sign";
   onClick?: ComponentProps<typeof BarChart>["onClick"];
+  /** A tooltip row per hovered mark; by default each series' colour, label and formatted value (seriesRow). */
+  tooltipRow?: ComponentProps<typeof ChartTooltipContent>["formatter"];
+  /** The legend under the plot; by default one chip per series. */
+  legend?: ReactElement;
 }
 /**
  * The colour a series' Bar takes, which its legend chip shows: the negative colour when every value drawn is below
@@ -42,6 +47,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, horizontal, stackOffset, onClick, 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;
+export declare function ChartFrame<T extends object, K extends keyof T>({ chart: Chart, children, horizontal, stackOffset, onClick, tooltipRow, legend, 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

@@ -9,6 +9,31 @@ import { CartesianGrid, ReferenceLine, Text, XAxis, YAxis, useChartWidth, useXAx
 const AXIS_TITLE = "fill-muted-foreground text-xs";
 const TICK = { className: "fill-muted-foreground font-mono" };
 const NO_LINES = [];
+const SERIES_LEGEND = /* @__PURE__ */ jsx(ChartLegendContent, { className: "flex-wrap gap-y-1" });
+/**
+* A reference line over a card-coloured band, so it stays traceable where it crosses a bar or an area: the text
+* colour on --chart-1 is only 2:1, but each against the card is well over 3:1.
+*/
+function haloLine({ x1, y1, x2, y2, stroke, strokeDasharray }) {
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+		"data-slot": "reference-line-halo",
+		x1,
+		y1,
+		x2,
+		y2,
+		stroke: "var(--card)",
+		strokeWidth: 4
+	}), /* @__PURE__ */ jsx("line", {
+		className: "recharts-reference-line-line",
+		x1,
+		y1,
+		x2,
+		y2,
+		stroke,
+		strokeDasharray,
+		strokeWidth: 1
+	})] });
+}
 /**
 * 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.
@@ -161,7 +186,7 @@ function HorizontalAxis({ data, xKey, xFormatter, xTickDetail, xTicks }) {
 * 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, horizontal = false, stackOffset, onClick, 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 }) {
+function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, onClick, tooltipRow, legend = SERIES_LEGEND, 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 = useMemo(() => valueFormatter ?? new Intl.NumberFormat(numberLocale).format, [valueFormatter, numberLocale]);
 	const config = Object.fromEntries(series.map(({ key, label, color }) => [key, {
@@ -293,23 +318,32 @@ function ChartFrame({ chart: Chart, children, horizontal = false, stackOffset, o
 								y: at.x
 							} : at,
 							stroke: emphasis === "strong" ? "var(--foreground)" : "var(--muted-foreground)",
+							shape: haloLine,
 							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"
+								className: "fill-muted-foreground stroke-card text-xs",
+								style: {
+									paintOrder: "stroke",
+									strokeWidth: 3,
+									strokeLinejoin: "round"
+								}
 							}
 						}, `${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)
-						}) }),
+						/* @__PURE__ */ jsx(ChartTooltip, {
+							cursor: { fillOpacity: .4 },
+							content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+								labelFormatter: (_, payload) => {
+									const row = payload[0]?.payload;
+									return row ? xTooltipFormatter(row[xKey]) : null;
+								},
+								formatter: tooltipRow ?? seriesRow(series, formatValue)
+							})
+						}),
 						children,
 						/* @__PURE__ */ jsx(ChartLegend, {
-							content: /* @__PURE__ */ jsx(ChartLegendContent, {}),
+							content: legend,
 							itemSorter: null
 						})
 					]

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

@@ -6,7 +6,7 @@ import { ReactNode } from "react";
  */
 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;
+export 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. */
 export interface ChartSeriesItem<T> {
   key: NumericKey<T>;
@@ -94,5 +94,4 @@ export interface NumericXProps {
  * be drawn; "monotone", the default, smooths between them without overshooting a point.
  */
 export type ChartCurve = "monotone" | "linear";
-//#endregion
-export {};
+//#endregion