@siyahi/ui 0.1.9-next.17 → 0.1.9-next.19

package/dist/components/registry/niko-table/lib/flex-columns.js

@@ -24,19 +24,19 @@
 * Returns the set of column ids to render widthless (empty when fill is off or
 * no eligible column exists — the table then sizes to its columns as before).
 */
-function resolveFlexColumnIds(table) {
+function resolveFlexColumnIds(table, pinningEnabled = true) {
 	const ids = /* @__PURE__ */ new Set();
 	if (!table.options.enableColumnResizing) return ids;
 	if (table.options.meta?.disableFlexFill) return ids;
 	const leafColumns = table.getVisibleLeafColumns();
 	const columnSizing = table.state.columnSizing;
 	let hasExplicit = false;
-	for (const column of leafColumns) if (column.columnDef.meta?.flex === true && !column.getIsPinned() && columnSizing[column.id] == null) {
+	for (const column of leafColumns) if (column.columnDef.meta?.flex === true && !(pinningEnabled && column.getIsPinned()) && columnSizing[column.id] == null) {
 		ids.add(column.id);
 		hasExplicit = true;
 	}
 	if (hasExplicit) return ids;
-	const auto = leafColumns.find((column) => column.getCanResize() && !column.getIsPinned() && column.columnDef.meta?.flex !== false && columnSizing[column.id] == null);
+	const auto = leafColumns.find((column) => column.getCanResize() && !(pinningEnabled && column.getIsPinned()) && column.columnDef.meta?.flex !== false && columnSizing[column.id] == null);
 	if (auto) ids.add(auto.id);
 	return ids;
 }

package/dist/components/registry/niko-table/lib/styles.d.ts

@@ -2,5 +2,5 @@ import { DataTableFeatures } from "./data-table-features.js";
 import React from "react";
 import { Column, RowData } from "@tanstack/react-table";
 //#region src/components/registry/niko-table/lib/styles.d.ts
-export declare const getCommonPinningStyles: <TData extends RowData>(column: Column<DataTableFeatures, TData>, isHeader?: boolean) => React.CSSProperties;
+export declare const getCommonPinningStyles: <TData extends RowData>(column: Column<DataTableFeatures, TData>, isHeader?: boolean, pinningEnabled?: boolean) => React.CSSProperties;
 //#endregion

package/dist/components/registry/niko-table/lib/styles.js

@@ -1,8 +1,8 @@
 import "@tanstack/react-table";
 //#region src/components/registry/niko-table/lib/styles.ts
-const getCommonPinningStyles = (column, isHeader = false) => {
+const getCommonPinningStyles = (column, isHeader = false, pinningEnabled = true) => {
 	const isPinned = column.getIsPinned();
-	if (!isPinned) return {};
+	if (!isPinned || !pinningEnabled) return {};
 	const isLeft = isPinned === "start";
 	const columnSize = column.getSize();
 	return {

package/dist/components/registry/sidebar-07/nav-main.js

@@ -2,9 +2,11 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../ui/co
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar } from "../../ui/sidebar.js";
 import { ChevronRightIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/components/registry/sidebar-07/nav-main.tsx
 function NavMain({ items, label = "Navigation" }) {
 	const { isMobile, setOpenMobile } = useSidebar();
+	const [expanded, setExpanded] = useState({});
 	const closeDrawer = () => {
 		if (isMobile) setOpenMobile(false);
 	};
@@ -19,7 +21,11 @@ function NavMain({ items, label = "Navigation" }) {
 		onClick: closeDrawer,
 		children: [item.icon, /* @__PURE__ */ jsx("span", { children: item.title })]
 	}) }, item.title) : /* @__PURE__ */ jsxs(Collapsible, {
-		defaultOpen: item.isActive,
+		open: expanded[item.title] ?? !!item.isActive,
+		onOpenChange: (open) => setExpanded((previous) => ({
+			...previous,
+			[item.title]: open
+		})),
 		className: "group/collapsible",
 		render: /* @__PURE__ */ jsx(SidebarMenuItem, {}),
 		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {

package/dist/components/siyahi/treemap.js

@@ -2,12 +2,13 @@ import { useFormat } from "../../lib/format.js";
 import { heat, heatFill, heatRange, layout } from "../../lib/treemap.js";
 import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
 //#region src/components/siyahi/treemap.tsx
 /** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
 function Treemap({ items, height, range, onHover, selected, onSelect }) {
 	const ref = useRef(null);
 	const [width, setWidth] = useState(0);
+	const [focusedKey, setFocusedKey] = useState(null);
 	const selectedKey = selected ? selected.key ?? selected.name : null;
 	const { pct } = useFormat();
 	useLayoutEffect(() => {
@@ -25,7 +26,12 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		document.addEventListener("pointerdown", onPointerDown);
 		return () => document.removeEventListener("pointerdown", onPointerDown);
 	}, [selectedKey]);
-	const { groups, tiles } = layout(items, width, height);
+	const { groups, tiles } = useMemo(() => layout(items, width, height), [
+		items,
+		width,
+		height
+	]);
+	const focusKey = tiles.some(({ item }) => (item.key ?? item.name) === focusedKey) ? focusedKey : tiles[0]?.item.key ?? tiles[0]?.item.name;
 	const change = (value) => value === null ? "—" : `${value > 0 ? "▲ " : value < 0 ? "▼ " : ""}${pct(Math.abs(value))}`;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -34,7 +40,7 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		children: /* @__PURE__ */ jsxs("svg", {
 			width,
 			height,
-			role: "img",
+			role: onSelect ? "group" : "img",
 			"aria-label": "Treemap of holdings by weight and change",
 			className: "text-xs",
 			onPointerLeave: () => onHover?.(null),
@@ -53,12 +59,48 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 					className: "fill-muted-foreground font-medium",
 					children: group
 				})]
-			}, group)), tiles.map(({ item, ...box }) => {
+			}, group)), tiles.map(({ item, ...box }, index) => {
 				const key = item.key ?? item.name;
 				return /* @__PURE__ */ jsxs("svg", {
 					...box,
 					"data-slot": "treemap-tile",
 					"data-selected": key === selectedKey || void 0,
+					role: onSelect ? "button" : void 0,
+					tabIndex: onSelect ? key === focusKey ? 0 : -1 : void 0,
+					"aria-label": `${item.name}${item.group ? `, ${item.group}` : ""}, ${change(item.change)}`,
+					"aria-pressed": onSelect ? key === selectedKey : void 0,
+					onFocus: () => setFocusedKey(key),
+					onKeyDown: (event) => {
+						if (!onSelect) return;
+						if (event.key === "Enter" || event.key === " ") {
+							event.preventDefault();
+							onSelect(key === selectedKey ? null : item);
+						} else if (event.key === "Escape") onSelect(null);
+						else {
+							let next;
+							switch (event.key) {
+								case "Home":
+									next = 0;
+									break;
+								case "End":
+									next = tiles.length - 1;
+									break;
+								case "ArrowRight":
+								case "ArrowDown":
+									next = (index + 1) % tiles.length;
+									break;
+								case "ArrowLeft":
+								case "ArrowUp":
+									next = (index + tiles.length - 1) % tiles.length;
+									break;
+								default: return;
+							}
+							event.preventDefault();
+							const target = tiles[next]?.item;
+							if (target) setFocusedKey(target.key ?? target.name);
+							ref.current?.querySelectorAll("[data-slot=\"treemap-tile\"]")[next]?.focus();
+						}
+					},
 					onPointerEnter: () => onHover?.(item),
 					onClick: () => onSelect?.(key === selectedKey ? null : item),
 					children: [

package/dist/lib/chart-frame.js

@@ -3,7 +3,8 @@ import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartToo
 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";
+import { useMemo } from "react";
+import { CartesianGrid, ReferenceLine, Text, XAxis, YAxis, useChartWidth } from "recharts";
 //#region src/lib/chart-frame.tsx
 const AXIS_TITLE = "fill-muted-foreground text-xs";
 const TICK = { className: "fill-muted-foreground font-mono" };
@@ -47,26 +48,51 @@ 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'
+* An x tick with a second line or explicit position: 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 }) => {
+function fittedTick(data, xKey, xFormatter, detailOf, beside, labelWidth) {
+	const rows = /* @__PURE__ */ new Map();
+	for (const row of data) if (!rows.has(row[xKey])) rows.set(row[xKey], row);
+	return ({ x, y, payload }) => {
 		const value = payload?.value;
-		const row = data.find((r) => r[xKey] === value);
+		const row = rows.get(value);
 		const name = xFormatter(value);
 		const detail = row && detailOf ? detailOf(row) : null;
-		const room = beside || !visibleTicksCount ? 0 : Number(width) / visibleTicksCount - 6;
+		if (beside) return /* @__PURE__ */ jsxs("g", {
+			className: "fill-muted-foreground",
+			children: [/* @__PURE__ */ jsx(Text, {
+				x,
+				y: Number(y) - (detail ? 4 : 0),
+				width: labelWidth,
+				maxLines: 2,
+				textAnchor: "end",
+				verticalAnchor: detail ? "end" : "middle",
+				lineHeight: 14,
+				style: { fontSize: "var(--text-xs)" },
+				"aria-label": name,
+				className: "recharts-cartesian-axis-tick-value fill-muted-foreground",
+				children: name
+			}), detail !== null && /* @__PURE__ */ jsx(Text, {
+				x,
+				y: Number(y) + 4,
+				width: labelWidth,
+				textAnchor: "end",
+				verticalAnchor: "start",
+				lineHeight: 14,
+				style: {
+					fontSize: "var(--text-xs)",
+					fontVariantNumeric: "tabular-nums"
+				},
+				"aria-label": detail,
+				className: "fill-muted-foreground tabular-nums",
+				children: detail
+			})]
+		});
 		return /* @__PURE__ */ jsxs("text", {
 			x,
 			y,
@@ -74,19 +100,32 @@ function fittedTick(data, xKey, xFormatter, detailOf, beside) {
 			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),
+				dy: 12,
 				children: name
 			}), detail !== null && /* @__PURE__ */ jsx("tspan", {
 				x,
 				dy: 15,
 				className: "tabular-nums",
-				...fitTo(detail, room, charWidth),
 				children: detail
 			})]
 		});
 	};
 }
+function HorizontalAxis({ data, xKey, xFormatter, xTickDetail, xTicks }) {
+	const width = Math.min(240, Math.floor((useChartWidth() ?? 320) * .45));
+	return /* @__PURE__ */ jsx(YAxis, {
+		dataKey: xKey,
+		type: "category",
+		width,
+		tickLine: false,
+		axisLine: false,
+		tickMargin: 8,
+		tickFormatter: xFormatter,
+		interval: 0,
+		ticks: xTicks,
+		tick: fittedTick(data, xKey, xFormatter, xTickDetail, true, width - 16)
+	});
+}
 /**
 * 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
@@ -95,127 +134,144 @@ function fittedTick(data, xKey, xFormatter, detailOf, beside) {
 */
 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 }) {
 	const { numberLocale } = useLocale();
-	const formatValue = valueFormatter ?? new Intl.NumberFormat(numberLocale).format;
+	const formatValue = useMemo(() => valueFormatter ?? new Intl.NumberFormat(numberLocale).format, [valueFormatter, numberLocale]);
 	const config = Object.fromEntries(series.map(({ key, label, color }) => [key, {
 		label,
 		color
 	}]));
 	const crossesZero = data.some((row) => series.some(({ key }) => Number(row[key]) < 0));
+	const detailedRows = horizontal && xTickDetail !== void 0;
+	const rowCount = (xTicks ?? data).length;
+	const plotClass = detailedRows ? "min-h-(--wrapped-chart-height) @min-[24rem]/chart:min-h-0" : void 0;
+	let minWidth;
+	if (!horizontal && (xTicks || xTickDetail)) {
+		const labelledValues = xTicks ?? data.map((row) => row[xKey]);
+		let tickWidth = 0;
+		for (const value of labelledValues) tickWidth = Math.max(tickWidth, xFormatter(value).length * MONO_WIDTH);
+		if (xTickDetail) for (const row of data) tickWidth = Math.max(tickWidth, xTickDetail(row).length * GEIST_WIDTH);
+		minWidth = Math.ceil((tickWidth + 12) * labelledValues.length + 64);
+	}
+	const plotStyle = {
+		height: detailedRows ? Math.max(height, rowCount * 72 + 48) : height,
+		minWidth,
+		...detailedRows ? { "--wrapped-chart-height": `${rowCount * 104 + 48}px` } : {}
+	};
 	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: cn("aspect-auto w-full", onClick && "cursor-pointer"),
-			style: { height },
-			children: /* @__PURE__ */ jsxs(Chart, {
-				data,
-				layout: horizontal ? "vertical" : "horizontal",
-				stackOffset,
-				onClick,
-				throttledEvents: onClick ? [] : void 0,
-				margin: {
-					left: 0,
-					right: !horizontal && 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 || xTicks ? fittedTick(data, xKey, xFormatter, xTickDetail, horizontal) : TICK,
-						ticks: xTicks,
-						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
-					})
-				]
+		/* @__PURE__ */ jsx(CardContent, {
+			className: "@container/chart overflow-x-auto",
+			role: minWidth ? "region" : void 0,
+			"aria-label": minWidth ? "Chart, scroll horizontally for all labelled values" : void 0,
+			tabIndex: minWidth ? 0 : void 0,
+			children: placeholder ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "chart-placeholder",
+				className: cn("flex items-center justify-center", plotClass),
+				style: plotStyle,
+				children: placeholder
+			}) : /* @__PURE__ */ jsx(ChartContainer, {
+				config,
+				className: cn("aspect-auto w-full", plotClass, onClick && "cursor-pointer"),
+				style: plotStyle,
+				children: /* @__PURE__ */ jsxs(Chart, {
+					data,
+					layout: horizontal ? "vertical" : "horizontal",
+					stackOffset,
+					onClick,
+					throttledEvents: onClick ? [] : void 0,
+					margin: {
+						left: 0,
+						right: !horizontal && 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(HorizontalAxis, {
+							data,
+							xKey,
+							xFormatter,
+							xTickDetail,
+							xTicks
+						})] }) : /* @__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

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

@@ -66,7 +66,7 @@ export interface SeriesChartProps<T extends object, K extends keyof T> {
   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 of the plot and legend, in pixels. Sideways bars grow when wrapped tick details need more room. */
   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;

package/dist/lib/format.js

@@ -2,9 +2,21 @@ import { defaultLocale } from "./locale.js";
 import { useLocale } from "../components/siyahi/siyahi-provider.js";
 import { useMemo } from "react";
 //#region src/lib/format.ts
+const numbers = /* @__PURE__ */ new Map();
+const clocks = /* @__PURE__ */ new Map();
+const regions = /* @__PURE__ */ new Map();
+function numberFormat(locale, options) {
+	const key = JSON.stringify([locale, options]);
+	let formatter = numbers.get(key);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locale, options);
+		numbers.set(key, formatter);
+	}
+	return formatter;
+}
 /** An amount in the locale's currency, whole units by default: ₹1,53,110. Signed figures belong in `Delta`. */
 function money(value, locale = defaultLocale, fractionDigits = 0) {
-	return new Intl.NumberFormat(locale.numberLocale, {
+	return numberFormat(locale.numberLocale, {
 		style: "currency",
 		currency: locale.currency,
 		minimumFractionDigits: fractionDigits,
@@ -18,8 +30,9 @@ function money(value, locale = defaultLocale, fractionDigits = 0) {
 * `Delta`, which adds the arrow.
 */
 function moneyCompact(value, locale = defaultLocale) {
-	if (new Intl.Locale(locale.numberLocale).region === "IN" && Math.abs(value) < 1e5) return money(value, locale);
-	return new Intl.NumberFormat(locale.numberLocale, {
+	if (!regions.has(locale.numberLocale)) regions.set(locale.numberLocale, new Intl.Locale(locale.numberLocale).region);
+	if (regions.get(locale.numberLocale) === "IN" && Math.abs(value) < 1e5) return money(value, locale);
+	return numberFormat(locale.numberLocale, {
 		style: "currency",
 		currency: locale.currency,
 		notation: "compact",
@@ -28,11 +41,11 @@ function moneyCompact(value, locale = defaultLocale) {
 }
 /** A whole count with the locale's grouping: 1,53,110 in en-IN. */
 function count(value, locale = defaultLocale) {
-	return new Intl.NumberFormat(locale.numberLocale, { maximumFractionDigits: 0 }).format(value);
+	return numberFormat(locale.numberLocale, { maximumFractionDigits: 0 }).format(value);
 }
 /** A fraction as a percentage: 0.1234 is 12.3%. */
 function pct(value, locale = defaultLocale, fractionDigits = 1) {
-	return new Intl.NumberFormat(locale.numberLocale, {
+	return numberFormat(locale.numberLocale, {
 		style: "percent",
 		minimumFractionDigits: fractionDigits,
 		maximumFractionDigits: fractionDigits
@@ -40,19 +53,25 @@ function pct(value, locale = defaultLocale, fractionDigits = 1) {
 }
 /** A 24-hour time in the locale's zone, with the zone written: 14:30 IST. */
 function time(value, locale = defaultLocale, { withDate = false } = {}) {
-	const date = withDate ? {
-		day: "numeric",
-		month: "short",
-		year: "numeric"
-	} : {};
-	return new Intl.DateTimeFormat(locale.numberLocale, {
-		...date,
+	const options = {
+		...withDate ? {
+			day: "numeric",
+			month: "short",
+			year: "numeric"
+		} : {},
 		hour: "2-digit",
 		minute: "2-digit",
 		hourCycle: "h23",
 		timeZone: locale.timeZone,
 		timeZoneName: "short"
-	}).format(new Date(value));
+	};
+	const key = JSON.stringify([locale.numberLocale, options]);
+	let formatter = clocks.get(key);
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat(locale.numberLocale, options);
+		clocks.set(key, formatter);
+	}
+	return formatter.format(new Date(value));
 }
 /** The formatters above, bound to the locale of the nearest `SiyahiProvider`. */
 function useFormat() {

package/dist/lib/heatmap-navigation.d.ts

@@ -0,0 +1,8 @@
+import { KeyboardEventHandler, RefObject } from "react";
+//#region src/lib/heatmap-navigation.d.ts
+/** One tab stop per heatmap; arrows move between its actual drawn cells. */
+export declare function useHeatmapNavigation(): {
+  ref: RefObject<HTMLDivElement | null>;
+  onKeyDown: KeyboardEventHandler<HTMLDivElement>;
+};
+//#endregion