@logicplanes/kaeso-ui 0.4.4 → 0.4.5

package/dist/components/charts/gauge.js

@@ -1,65 +1,77 @@
 "use client";
-import { t as e } from "../../chunks/cn-Dj6sRgkF.js";
-import { r as t } from "../../chunks/context-BELWW79w.js";
+import { t as e } from "../../chunks/cn-BjnOAUrA.js";
+import { i as t } from "../../chunks/context-BELWW79w.js";
 import { formatPercent as n } from "../../format.js";
-import { O as r } from "../../chunks/core-BYns5ytV.js";
+import { O as r } from "../../chunks/core-CmK-8ObW.js";
 import { forwardRef as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/charts/gauge.tsx
 var s = { size: { md: { classes: "w-180" } } }, c = { size: "md" }, l = /* @__PURE__ */ i(function({ value: i, thresholds: s = [.8], label: c, valueLabel: l, className: u, "aria-label": d }, f) {
-	t();
-	let [p] = r([Math.max(0, Math.min(1, i))]), m = (e) => Math.PI * (1 - e), h = (e, t) => [90 + t * Math.cos(m(e)), 94 - t * Math.sin(m(e))], g = (e, t) => {
-		let [n, r] = h(e, 82), [i, a] = h(t, 82);
+	let p = t(), m = Number.isFinite(i), [h] = r([m ? Math.max(0, Math.min(1, i)) : 0]), g = (e) => Math.PI * (1 - e), _ = (e, t) => [90 + t * Math.cos(g(e)), 94 - t * Math.sin(g(e))], v = (e, t) => {
+		let [n, r] = _(e, 82), [i, a] = _(t, 82);
 		return `M${n} ${r}A82 82 0 0 1 ${i} ${a}`;
-	}, _ = Math.round(i * 100), v = i >= 1 ? "var(--k-danger)" : i >= Math.min(...s, 1) ? "var(--k-warning)" : "var(--k-viz-1)";
+	}, y = m ? Math.round(i * 100) : 0, b = m && i >= 1, x = m && !b && i >= Math.min(...s, 1), S = b ? "var(--k-danger)" : x ? "var(--k-warning)" : "var(--k-viz-1)", C = b ? p("gauge.over", "Over the limit") : x ? p("gauge.near", "Near the limit") : null, w = l ?? (m ? n(i, 0) : "–"), T = [
+		typeof l == "string" ? l : m ? n(i, 0) : p("gauge.noData", "No data"),
+		typeof c == "string" ? c : null,
+		C
+	].filter(Boolean).join(", ");
 	return /* @__PURE__ */ o("div", {
 		ref: f,
 		role: "meter",
 		"aria-label": d,
 		"aria-valuemin": 0,
-		"aria-valuemax": Math.max(100, _),
-		"aria-valuenow": _,
-		className: e("relative inline-flex flex-col items-center", u),
-		children: [/* @__PURE__ */ o("svg", {
-			width: 180,
-			height: 104,
-			role: "presentation",
-			children: [
-				/* @__PURE__ */ a("path", {
-					d: g(0, 1),
-					fill: "none",
-					stroke: "var(--k-fill-3)",
-					strokeWidth: 12,
-					strokeLinecap: "round"
-				}),
-				(p ?? 0) > 0 && /* @__PURE__ */ a("path", {
-					d: g(0, Math.max(.005, p ?? 0)),
-					fill: "none",
-					stroke: v,
-					strokeWidth: 12,
-					strokeLinecap: "round"
-				}),
-				s.map((e) => {
-					let [t, n] = h(e, 73), [r, i] = h(e, 91);
-					return /* @__PURE__ */ a("line", {
-						x1: t,
-						y1: n,
-						x2: r,
-						y2: i,
-						stroke: "var(--k-bg-panel)",
-						strokeWidth: 2
-					}, e);
-				})
-			]
-		}), /* @__PURE__ */ o("div", {
-			className: "absolute inset-x-0 bottom-0 flex flex-col items-center",
-			children: [/* @__PURE__ */ a("span", {
-				className: "text-title font-semibold text-fg tabular",
-				children: l ?? n(i, 0)
-			}), c && /* @__PURE__ */ a("span", {
-				className: "text-caption font-medium text-fg-tertiary",
-				children: c
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.max(0, Math.min(100, y)),
+		"aria-valuetext": T,
+		className: e("relative inline-flex w-180 flex-col items-center", u),
+		children: [/* @__PURE__ */ o("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ o("svg", {
+				width: 180,
+				height: 104,
+				role: "presentation",
+				className: "block data-mark",
+				children: [
+					/* @__PURE__ */ a("path", {
+						d: v(0, 1),
+						fill: "none",
+						stroke: "var(--k-fill-3)",
+						strokeWidth: 12,
+						strokeLinecap: "round"
+					}),
+					(h ?? 0) > 0 && /* @__PURE__ */ a("path", {
+						d: v(0, Math.max(.005, h ?? 0)),
+						fill: "none",
+						stroke: S,
+						strokeWidth: 12,
+						strokeLinecap: "round"
+					}),
+					s.map((e) => {
+						let [t, n] = _(e, 76), [r, i] = _(e, 92);
+						return /* @__PURE__ */ a("line", {
+							x1: t,
+							y1: n,
+							x2: r,
+							y2: i,
+							stroke: "var(--k-text-tertiary)",
+							strokeWidth: 2,
+							strokeLinecap: "round"
+						}, e);
+					})
+				]
+			}), /* @__PURE__ */ o("div", {
+				className: "absolute inset-x-0 bottom-0 mx-auto flex max-w-140 flex-col items-center text-center",
+				children: [C && /* @__PURE__ */ a("span", {
+					className: e("text-caption font-medium", b ? "text-danger-text" : "text-warning-text"),
+					children: C
+				}), /* @__PURE__ */ a("span", {
+					className: "max-w-full text-title font-semibold text-fg tabular wrap-anywhere",
+					children: w
+				})]
 			})]
+		}), c && /* @__PURE__ */ a("span", {
+			className: "mt-4 max-w-full text-center text-caption font-medium text-pretty text-fg-tertiary",
+			children: c
 		})]
 	});
 });

package/dist/components/charts/gauge.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge.js","names":["cn","useLocale","useTweened","KAESO_GAUGE_VARIANTS","KAESO_GAUGE_DEFAULT_VARIANTS","Gauge","ariaLabel","t","value","a","f","pt","r","path","x1","y1","from","x2","y2","to","now","tone","thresholds","className","th","valueLabel","formatPercent","label"],"sources":["../../../src/components/charts/gauge.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { formatPercent } from \"../../format/index.js\";\nimport { useTweened } from \"./core.js\";\nimport { useLocale } from \"../../i18n/context.js\";\n\nexport const KAESO_GAUGE_VARIANTS = {\n  size: { md: { classes: \"w-180\" } },\n} as const;\nexport const KAESO_GAUGE_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport const Gauge = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  {\n    value: number;\n    thresholds?: number[] | undefined;\n    label?: ReactNode | undefined;\n    valueLabel?: ReactNode | undefined;\n    \"aria-label\": string;\n    className?: string | undefined;\n  }\n>(function Gauge({ value, thresholds = [0.8], label, valueLabel, className, \"aria-label\": ariaLabel }, ref) {\n  useLocale();\n  const W = 180;\n  const R = 82;\n  const [t] = useTweened([Math.max(0, Math.min(1, value))]);\n  const a = (f: number) => Math.PI * (1 - f);\n  const pt = (f: number, r: number) => [W / 2 + r * Math.cos(a(f)), 94 - r * Math.sin(a(f))] as const;\n  const path = (from: number, to: number) => {\n    const [x1, y1] = pt(from, R);\n    const [x2, y2] = pt(to, R);\n    return `M${x1} ${y1}A${R} ${R} 0 0 1 ${x2} ${y2}`;\n  };\n  const now = Math.round(value * 100);\n  const tone = value >= 1 ? \"var(--k-danger)\" : value >= Math.min(...thresholds, 1) ? \"var(--k-warning)\" : \"var(--k-viz-1)\";\n  return (\n    <div\n      ref={ref}\n      role=\"meter\"\n      aria-label={ariaLabel}\n      aria-valuemin={0}\n      aria-valuemax={Math.max(100, now)}\n      aria-valuenow={now}\n      className={cn(\"relative inline-flex flex-col items-center\", className)}\n    >\n      <svg width={W} height={104} role=\"presentation\">\n        <path d={path(0, 1)} fill=\"none\" stroke=\"var(--k-fill-3)\" strokeWidth={12} strokeLinecap=\"round\" />\n        {(t ?? 0) > 0 && <path d={path(0, Math.max(0.005, t ?? 0))} fill=\"none\" stroke={tone} strokeWidth={12} strokeLinecap=\"round\" />}\n        {thresholds.map((th) => {\n          const [x1, y1] = pt(th, R - 9);\n          const [x2, y2] = pt(th, R + 9);\n          return <line key={th} x1={x1} y1={y1} x2={x2} y2={y2} stroke=\"var(--k-bg-panel)\" strokeWidth={2} />;\n        })}\n      </svg>\n      <div className=\"absolute inset-x-0 bottom-0 flex flex-col items-center\">\n        <span className=\"text-title font-semibold text-fg tabular\">{valueLabel ?? formatPercent(value, 0)}</span>\n        {label && <span className=\"text-caption font-medium text-fg-tertiary\">{label}</span>}\n      </div>\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Gauge.displayName = \"Gauge\";\n"],"mappings":";;;;;;;;AAMA,IAAaG,IAAuB,EAClC,MAAM,EAAE,IAAI,EAAE,SAAS,QAAQ,EAAE,EACnC,GACaC,IAA+B,EAAE,MAAM,KAAK,GAE5CC,IAAwB,kBAUnC,SAAe,EAAE,UAAO,gBAAa,CAAC,EAAG,GAAG,UAAO,eAAY,cAAW,cAAcC,KAAa,GAAK;CAC1G,EAAU;CACV,IAEM,CAACC,KAAKL,EAAW,CAAC,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGM,CAAK,CAAC,CAAC,CAAC,GAClDC,KAAK,MAAc,KAAK,MAAM,IAAIC,IAClCC,KAAM,GAAW,MAAc,CAAC,KAAQC,IAAI,KAAK,IAAIH,EAAEC,CAAC,CAAC,GAAG,KAAKE,IAAI,KAAK,IAAIH,EAAEC,CAAC,CAAC,CAAC,GACnFG,KAAQ,GAAc,MAAe;EACzC,IAAM,CAACC,GAAIC,KAAMJ,EAAGK,GAAM,EAAC,GACrB,CAACC,GAAIC,KAAMP,EAAGQ,GAAI,EAAC;EACzB,OAAO,IAAIL,EAAG,GAAGC,EAAG,eAAmBE,EAAG,GAAGC;CAC/C,GACME,IAAM,KAAK,MAAMZ,IAAQ,GAAG,GAC5Ba,IAAOb,KAAS,IAAI,oBAAoBA,KAAS,KAAK,IAAI,GAAGc,GAAY,CAAC,IAAI,qBAAqB;CACzG,OACE,kBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAYhB;EACZ,iBAAe;EACf,iBAAe,KAAK,IAAI,KAAKc,CAAG;EAChC,iBAAeA;EACf,WAAWpB,EAAG,8CAA8CuB,CAAS;EAPvE,UAAA,CASE,kBAAC,OAAD;GAAK,OAAO;GAAG,QAAQ;GAAK,MAAK;GAAjC,UAAA;IACE,kBAAC,QAAD;KAAM,GAAGV,EAAK,GAAG,CAAC;KAAG,MAAK;KAAO,QAAO;KAAkB,aAAa;KAAI,eAAc;IAAS,CAAA;KAChGN,KAAK,KAAK,KAAK,kBAAC,QAAD;KAAM,GAAGM,EAAK,GAAG,KAAK,IAAI,MAAON,KAAK,CAAC,CAAC;KAAG,MAAK;KAAO,QAAQc;KAAM,aAAa;KAAI,eAAc;IAAS,CAAA;IAC7HC,EAAW,KAAK,MAAO;KACtB,IAAM,CAACR,GAAIC,KAAMJ,EAAGa,GAAI,EAAK,GACvB,CAACP,GAAIC,KAAMP,EAAGa,GAAI,EAAK;KAC7B,OAAO,kBAAC,QAAD;MAAmB;MAAQ;MAAQ;MAAQ;MAAI,QAAO;MAAoB,aAAa;KAAI,GAAhFA,CAAgF;IACpG,CAAC;GACE;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAA4C,UAAAC,KAAcC,EAAclB,GAAO,CAAC;GAAQ,CAAA,GACvGmB,KAAS,kBAAC,QAAD;IAAM,WAAU;IAA6C,UAAAA;GAAY,CAAA,CAChF;EACF,CAAA,CAAA;;AAET,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAM,cAAc"}
+{"version":3,"file":"gauge.js","names":["cn","useUiText","useTweened","KAESO_GAUGE_VARIANTS","KAESO_GAUGE_DEFAULT_VARIANTS","Gauge","ariaLabel","t","known","value","drawn","a","f","pt","r","path","x1","y1","from","x2","y2","to","now","over","near","thresholds","tone","status","shown","valueLabel","formatPercent","spoken","label","className","th"],"sources":["../../../src/components/charts/gauge.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { formatPercent } from \"../../format/index.js\";\nimport { useTweened } from \"./core.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_GAUGE_VARIANTS = {\n  size: { md: { classes: \"w-180\" } },\n} as const;\nexport const KAESO_GAUGE_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport const Gauge = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  {\n    value: number;\n    thresholds?: number[] | undefined;\n    label?: ReactNode | undefined;\n    valueLabel?: ReactNode | undefined;\n    \"aria-label\": string;\n    className?: string | undefined;\n  }\n>(function Gauge({ value, thresholds = [0.8], label, valueLabel, className, \"aria-label\": ariaLabel }, ref) {\n  const t = useUiText();\n  const W = 180;\n  const R = 82;\n  const known = Number.isFinite(value);\n  const [drawn] = useTweened([known ? Math.max(0, Math.min(1, value)) : 0]);\n  const a = (f: number) => Math.PI * (1 - f);\n  const pt = (f: number, r: number) => [W / 2 + r * Math.cos(a(f)), 94 - r * Math.sin(a(f))] as const;\n  const path = (from: number, to: number) => {\n    const [x1, y1] = pt(from, R);\n    const [x2, y2] = pt(to, R);\n    return `M${x1} ${y1}A${R} ${R} 0 0 1 ${x2} ${y2}`;\n  };\n  const now = known ? Math.round(value * 100) : 0;\n  const over = known && value >= 1;\n  const near = known && !over && value >= Math.min(...thresholds, 1);\n  const tone = over ? \"var(--k-danger)\" : near ? \"var(--k-warning)\" : \"var(--k-viz-1)\";\n  const status = over ? t(\"gauge.over\", \"Over the limit\") : near ? t(\"gauge.near\", \"Near the limit\") : null;\n  const shown = valueLabel ?? (known ? formatPercent(value, 0) : \"–\");\n  const spokenValue = typeof valueLabel === \"string\" ? valueLabel : known ? formatPercent(value, 0) : t(\"gauge.noData\", \"No data\");\n  const spoken = [spokenValue, typeof label === \"string\" ? label : null, status].filter(Boolean).join(\", \");\n  return (\n    <div\n      ref={ref}\n      role=\"meter\"\n      aria-label={ariaLabel}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={Math.max(0, Math.min(100, now))}\n      aria-valuetext={spoken}\n      className={cn(\"relative inline-flex w-180 flex-col items-center\", className)}\n    >\n      <div className=\"relative\">\n        <svg width={W} height={104} role=\"presentation\" className=\"block data-mark\">\n          <path d={path(0, 1)} fill=\"none\" stroke=\"var(--k-fill-3)\" strokeWidth={12} strokeLinecap=\"round\" />\n          {(drawn ?? 0) > 0 && <path d={path(0, Math.max(0.005, drawn ?? 0))} fill=\"none\" stroke={tone} strokeWidth={12} strokeLinecap=\"round\" />}\n          {thresholds.map((th) => {\n            const [x1, y1] = pt(th, R - 6);\n            const [x2, y2] = pt(th, R + 10);\n            return <line key={th} x1={x1} y1={y1} x2={x2} y2={y2} stroke=\"var(--k-text-tertiary)\" strokeWidth={2} strokeLinecap=\"round\" />;\n          })}\n        </svg>\n        <div className=\"absolute inset-x-0 bottom-0 mx-auto flex max-w-140 flex-col items-center text-center\">\n          {status && <span className={cn(\"text-caption font-medium\", over ? \"text-danger-text\" : \"text-warning-text\")}>{status}</span>}\n          <span className=\"max-w-full text-title font-semibold text-fg tabular wrap-anywhere\">{shown}</span>\n        </div>\n      </div>\n      {label && <span className=\"mt-4 max-w-full text-center text-caption font-medium text-pretty text-fg-tertiary\">{label}</span>}\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Gauge.displayName = \"Gauge\";\n"],"mappings":"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"}

package/dist/components/charts/heatmap.js

@@ -1,83 +1,192 @@
 "use client";
-import { t as e } from "../../chunks/cn-Dj6sRgkF.js";
+import { t as e } from "../../chunks/cn-BjnOAUrA.js";
 import { i as t } from "../../chunks/context-BELWW79w.js";
 import { formatNumber as n } from "../../format.js";
-import { forwardRef as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { max as o } from "d3-array";
+import { t as r } from "../../chunks/use-scroll-fade-uc8mWSDX.js";
+import { i, n as a, r as o } from "../../chunks/core-CmK-8ObW.js";
+import { forwardRef as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { max as p } from "d3-array";
 //#region src/components/charts/heatmap.tsx
-var s = { layout: {
+var m = { layout: {
 	week: { classes: "" },
 	year: { classes: "" }
-} }, c = { layout: "week" }, l = [
+} }, h = { layout: "week" }, g = [
 	"var(--k-fill-1)",
-	"color-mix(in oklab, var(--k-viz-1) 25%, var(--k-fill-1))",
-	"color-mix(in oklab, var(--k-viz-1) 50%, var(--k-fill-1))",
-	"color-mix(in oklab, var(--k-viz-1) 75%, var(--k-fill-1))",
+	"color-mix(in oklab, var(--k-viz-1) 40%, var(--k-fill-1))",
+	"color-mix(in oklab, var(--k-viz-1) 60%, var(--k-fill-1))",
+	"color-mix(in oklab, var(--k-viz-1) 80%, var(--k-fill-1))",
 	"var(--k-viz-1)"
-], u = /* @__PURE__ */ r(function({ rows: r, columns: s, values: c, formatValue: u = (e) => n(e), className: d, "aria-label": f, columnLabelEvery: p = 3 }, m) {
-	let h = t(), g = o(c.flat()) ?? 0, _ = (e) => e <= 0 || g === 0 ? 0 : Math.min(4, Math.ceil(e / g * 4));
-	return /* @__PURE__ */ a("div", {
-		ref: m,
-		className: e("flex min-w-0 max-w-full flex-col gap-12", d),
-		children: [/* @__PURE__ */ a("div", {
-			role: "table",
-			tabIndex: 0,
-			"aria-label": f,
-			className: "inline-grid max-w-full gap-3 overflow-x-auto scrollbar-quiet rounded-cell focus-ring",
-			style: { gridTemplateColumns: `40px repeat(${s.length}, 12px)` },
-			children: [
-				/* @__PURE__ */ i("span", {}),
-				s.map((e, t) => /* @__PURE__ */ i("span", {
-					className: "h-16 text-micro text-fg-tertiary tabular whitespace-nowrap",
-					"aria-hidden": !0,
-					children: t % p === 0 ? e : ""
-				}, e)),
-				r.map((e, t) => /* @__PURE__ */ a("div", {
-					role: "row",
-					className: "contents",
-					children: [/* @__PURE__ */ i("span", {
-						role: "rowheader",
-						className: "flex h-12 items-center text-micro text-fg-tertiary",
-						children: e
-					}), s.map((n, r) => {
-						let a = c[t]?.[r] ?? 0, o = h("heatmap.cell", "{row} {column}: {value}", {
-							row: e,
-							column: n,
-							value: u(a)
-						});
-						return /* @__PURE__ */ i("span", {
-							role: "cell",
-							"aria-label": o,
-							title: o,
-							className: "size-12 rounded-cell",
-							style: { background: l[_(a)] }
-						}, n);
-					})]
-				}, e))
-			]
-		}), /* @__PURE__ */ a("div", {
-			className: "flex items-center gap-3 text-caption font-medium text-fg-tertiary",
-			"aria-hidden": !0,
-			children: [
-				/* @__PURE__ */ i("span", {
-					className: "mr-4",
-					children: h("heatmap.less", "Less")
-				}),
-				l.map((e) => /* @__PURE__ */ i("span", {
-					className: "size-12 rounded-cell",
-					style: { background: e }
-				}, e)),
-				/* @__PURE__ */ i("span", {
-					className: "ml-4",
-					children: h("heatmap.more", "More")
-				})
-			]
-		})]
+], _ = 12, v = 3, y = /* @__PURE__ */ s(function({ rows: s, columns: m, values: h, formatValue: y = (e) => n(e), className: b, "aria-label": x, columnLabelEvery: S = 3 }, C) {
+	let w = t(), T = p(h.flat().filter(Number.isFinite)) ?? 0, E = (e) => !Number.isFinite(e) || e <= 0 || T === 0 ? 0 : Math.min(4, Math.ceil(e / T * 4)), D = s.length === 0 || m.length === 0, [O, k] = u(null), [A, j] = u(!1), M = l(null), N = l(null), [P, F] = u(0);
+	r(M, "[data-heatmap-grid]"), c(() => {
+		let e = N.current?.querySelector("[data-heatmap-rows]");
+		e && F(e.offsetWidth);
+	}, [s]), c(() => {
+		A && O && N.current?.querySelector(`[data-cell="${O.r}-${O.c}"]`)?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [O, A]);
+	let I = (e, t) => h[e]?.[t] ?? 0, L = (e) => Number.isFinite(e) ? y(e) : "–", R = (e, t) => w("heatmap.cell", "{row} {column}: {value}", {
+		row: s[e] ?? "",
+		column: m[t] ?? "",
+		value: L(I(e, t))
+	}), z = 19 + s.length * 15 + 8, B = {
+		columns: [w("heatmap.rows", "Row"), ...m],
+		rows: s.map((e, t) => [e, ...m.map((e, n) => L(I(t, n)))])
+	}, V = (e) => {
+		let t = O ?? {
+			r: 0,
+			c: 0
+		}, n = e === "ArrowRight" ? {
+			r: t.r,
+			c: Math.min(m.length - 1, t.c + 1)
+		} : e === "ArrowLeft" ? {
+			r: t.r,
+			c: Math.max(0, t.c - 1)
+		} : e === "ArrowDown" ? {
+			r: Math.min(s.length - 1, t.r + 1),
+			c: t.c
+		} : e === "ArrowUp" ? {
+			r: Math.max(0, t.r - 1),
+			c: t.c
+		} : e === "Home" ? {
+			r: t.r,
+			c: 0
+		} : e === "End" ? {
+			r: t.r,
+			c: m.length - 1
+		} : void 0;
+		return O === null && n ? t : n;
+	}, H = M.current?.scrollLeft ?? 0, U = O ? {
+		x: P + v + O.c * 15 + _ - H,
+		xLeft: P + v + O.c * 15 - H,
+		y: 19 + O.r * 15 + 24
+	} : null;
+	return /* @__PURE__ */ d("div", {
+		ref: C,
+		className: e("w-full min-w-0", b),
+		children: /* @__PURE__ */ d(a, {
+			label: x,
+			height: z,
+			table: D ? void 0 : B,
+			state: { empty: D },
+			legend: D ? void 0 : /* @__PURE__ */ f("div", {
+				className: "flex items-center gap-3 text-caption font-medium text-fg-tertiary",
+				"aria-hidden": !0,
+				children: [
+					/* @__PURE__ */ d("span", {
+						className: "mr-4",
+						children: w("heatmap.less", "Less")
+					}),
+					g.map((e) => /* @__PURE__ */ d("span", {
+						className: "size-12 rounded-cell data-mark",
+						style: { background: e }
+					}, e)),
+					/* @__PURE__ */ d("span", {
+						className: "ml-4",
+						children: w("heatmap.more", "More")
+					})
+				]
+			}),
+			children: !D && /* @__PURE__ */ f("div", {
+				className: "absolute inset-0",
+				children: [
+					/* @__PURE__ */ d("div", {
+						ref: M,
+						role: "group",
+						tabIndex: 0,
+						"aria-label": x,
+						onKeyDown: (e) => {
+							if (e.key === "Escape" && O) {
+								e.stopPropagation(), k(null);
+								return;
+							}
+							let t = V(e.key);
+							t && (e.preventDefault(), j(!0), k(t));
+						},
+						onFocus: (e) => {
+							if (e.target !== e.currentTarget || document.documentElement.hasAttribute("data-k-pointer")) return;
+							let t = !0;
+							try {
+								t = e.currentTarget.matches(":focus-visible");
+							} catch {}
+							t && (j(!0), k({
+								r: 0,
+								c: 0
+							}));
+						},
+						onBlur: () => {
+							k(null), j(!1);
+						},
+						onScroll: () => k((e) => A ? e : null),
+						className: "size-full overflow-x-auto overflow-y-hidden rounded-cell scrollbar-quiet scroll-fade-x focus-ring-inset",
+						children: /* @__PURE__ */ f("div", {
+							ref: N,
+							"data-heatmap-grid": "",
+							className: "inline-grid gap-3",
+							style: { gridTemplateColumns: `max-content repeat(${m.length}, ${_}px)` },
+							onPointerLeave: () => {
+								j(!1), k(null);
+							},
+							children: [
+								/* @__PURE__ */ d("span", { "data-heatmap-rows": "" }),
+								m.map((e, t) => /* @__PURE__ */ d("span", {
+									className: "h-16 overflow-visible text-caption whitespace-nowrap text-fg-tertiary tabular",
+									"aria-hidden": !0,
+									children: t % S === 0 ? e : ""
+								}, e)),
+								s.map((t, n) => /* @__PURE__ */ f("div", {
+									className: "contents",
+									children: [/* @__PURE__ */ d("span", {
+										className: "flex h-12 items-center pr-8 text-caption whitespace-nowrap text-fg-tertiary",
+										"aria-hidden": !0,
+										children: t
+									}), m.map((t, r) => {
+										let i = O?.r === n && O.c === r;
+										return /* @__PURE__ */ d("span", {
+											"data-cell": `${n}-${r}`,
+											"aria-hidden": !0,
+											onPointerEnter: () => {
+												j(!1), k({
+													r: n,
+													c: r
+												});
+											},
+											className: e("size-12 rounded-cell data-mark", i && "outline-2 outline-offset-1 outline-fg"),
+											style: { background: g[E(I(n, r))] }
+										}, t);
+									})]
+								}, t))
+							]
+						})
+					}),
+					O && U && /* @__PURE__ */ d(i, {
+						x: U.x,
+						xLeft: U.xLeft,
+						y: U.y,
+						width: M.current?.clientWidth ?? 0,
+						visible: !0,
+						heading: w("heatmap.cellHeading", "{row} {column}", {
+							row: s[O.r] ?? "",
+							column: m[O.c] ?? ""
+						}),
+						rows: [{
+							id: "v",
+							label: "",
+							color: g[E(I(O.r, O.c))],
+							value: L(I(O.r, O.c))
+						}]
+					}),
+					/* @__PURE__ */ d(o, { children: A && O ? R(O.r, O.c) : null })
+				]
+			})
+		})
 	});
 });
-process.env.NODE_ENV !== "production" && (u.displayName = "Heatmap");
+process.env.NODE_ENV !== "production" && (y.displayName = "Heatmap");
 //#endregion
-export { u as Heatmap, c as KAESO_HEATMAP_DEFAULT_VARIANTS, s as KAESO_HEATMAP_VARIANTS };
+export { y as Heatmap, h as KAESO_HEATMAP_DEFAULT_VARIANTS, m as KAESO_HEATMAP_VARIANTS };
 
 //# sourceMappingURL=heatmap.js.map

package/dist/components/charts/heatmap.js.map

@@ -1 +1 @@
-{"version":3,"file":"heatmap.js","names":["d3max","cn","useUiText","KAESO_HEATMAP_VARIANTS","KAESO_HEATMAP_DEFAULT_VARIANTS","RAMP","Heatmap","formatNumber","v","ariaLabel","t","hi","max","values","level","className","columns","i","columnLabelEvery","c","rows","r","ri","ci","cell","formatValue"],"sources":["../../../src/components/charts/heatmap.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { max as d3max } from \"d3-array\";\nimport { cn } from \"../../utils/cn.js\";\nimport { formatNumber } from \"../../format/index.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_HEATMAP_VARIANTS = {\n  layout: {\n    week: { classes: \"\" },\n    year: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_HEATMAP_DEFAULT_VARIANTS = { layout: \"week\" } as const;\n\nconst RAMP = [\n  \"var(--k-fill-1)\",\n  \"color-mix(in oklab, var(--k-viz-1) 25%, var(--k-fill-1))\",\n  \"color-mix(in oklab, var(--k-viz-1) 50%, var(--k-fill-1))\",\n  \"color-mix(in oklab, var(--k-viz-1) 75%, var(--k-fill-1))\",\n  \"var(--k-viz-1)\",\n];\n\nexport const Heatmap = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  {\n    rows: string[];\n    columns: string[];\n    values: number[][];\n    formatValue?: ((v: number) => string) | undefined;\n    \"aria-label\": string;\n    className?: string | undefined;\n    columnLabelEvery?: number | undefined;\n  }\n>(function Heatmap({ rows, columns, values, formatValue = (v) => formatNumber(v), className, \"aria-label\": ariaLabel, columnLabelEvery = 3 }, ref) {\n  const t = useUiText();\n  const hi = d3max(values.flat()) ?? 0;\n  const level = (v: number) => (v <= 0 || hi === 0 ? 0 : Math.min(4, Math.ceil((v / hi) * 4)));\n  return (\n    <div ref={ref} className={cn(\"flex min-w-0 max-w-full flex-col gap-12\", className)}>\n      <div\n        role=\"table\"\n        tabIndex={0}\n        aria-label={ariaLabel}\n        className=\"inline-grid max-w-full gap-3 overflow-x-auto scrollbar-quiet rounded-cell focus-ring\"\n        style={{ gridTemplateColumns: `40px repeat(${columns.length}, 12px)` }}\n      >\n        <span />\n        {columns.map((c, i) => (\n          <span key={c} className=\"h-16 text-micro text-fg-tertiary tabular whitespace-nowrap\" aria-hidden>\n            {i % columnLabelEvery === 0 ? c : \"\"}\n          </span>\n        ))}\n        {rows.map((r, ri) => (\n          <div key={r} role=\"row\" className=\"contents\">\n            <span role=\"rowheader\" className=\"flex h-12 items-center text-micro text-fg-tertiary\">\n              {r}\n            </span>\n            {columns.map((c, ci) => {\n              const v = values[ri]?.[ci] ?? 0;\n              const cell = t(\"heatmap.cell\", \"{row} {column}: {value}\", { row: r, column: c, value: formatValue(v) });\n              return <span key={c} role=\"cell\" aria-label={cell} title={cell} className=\"size-12 rounded-cell\" style={{ background: RAMP[level(v)] }} />;\n            })}\n          </div>\n        ))}\n      </div>\n      <div className=\"flex items-center gap-3 text-caption font-medium text-fg-tertiary\" aria-hidden>\n        <span className=\"mr-4\">{t(\"heatmap.less\", \"Less\")}</span>\n        {RAMP.map((c) => (\n          <span key={c} className=\"size-12 rounded-cell\" style={{ background: c }} />\n        ))}\n        <span className=\"ml-4\">{t(\"heatmap.more\", \"More\")}</span>\n      </div>\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Heatmap.displayName = \"Heatmap\";\n"],"mappings":";;;;;;;;AAMA,IAAaG,IAAyB,EACpC,QAAQ;CACN,MAAM,EAAE,SAAS,GAAG;CACpB,MAAM,EAAE,SAAS,GAAG;AACtB,EACF,GACaC,IAAiC,EAAE,QAAQ,OAAO,GAEzDC,IAAO;CACX;CACA;CACA;CACA;CACA;AACF,GAEaC,IAA0B,kBAWrC,SAAiB,EAAE,SAAM,YAAS,WAAQ,kBAAe,MAAMC,EAAaC,CAAC,GAAG,cAAW,cAAcC,GAAW,sBAAmB,KAAK,GAAK;CACjJ,IAAMC,IAAIR,EAAU,GACdS,IAAKX,EAAMa,EAAO,KAAK,CAAC,KAAK,GAC7BC,KAAS,MAAeN,KAAK,KAAKG,MAAO,IAAI,IAAI,KAAK,IAAI,GAAG,KAAK,KAAMH,IAAIG,IAAM,CAAC,CAAC;CAC1F,OACE,kBAAC,OAAD;EAAU;EAAK,WAAWV,EAAG,2CAA2Cc,CAAS;EAAjF,UAAA,CACE,kBAAC,OAAD;GACE,MAAK;GACL,UAAU;GACV,cAAYN;GACZ,WAAU;GACV,OAAO,EAAE,qBAAqB,eAAeO,EAAQ,OAAO,SAAS;GALvE,UAAA;IAOE,kBAAC,QAAD,CAAO,CAAA;IACNA,EAAQ,KAAK,GAAG,MACf,kBAAC,QAAD;KAAc,WAAU;KAA6D,eAAA;KAClF,UAAAC,IAAIC,MAAqB,IAAIC,IAAI;IAC9B,GAFKA,CAEL,CACP;IACAC,EAAK,KAAK,GAAG,MACZ,kBAAC,OAAD;KAAa,MAAK;KAAM,WAAU;KAAlC,UAAA,CACE,kBAAC,QAAD;MAAM,MAAK;MAAY,WAAU;MAC9B,UAAAC;KACG,CAAA,GACLL,EAAQ,KAAK,GAAG,MAAO;MACtB,IAAMR,IAAIK,EAAOS,EAAG,GAAGC,MAAO,GACxBC,IAAOd,EAAE,gBAAgB,2BAA2B;OAAE,KAAKW;OAAG,QAAQF;OAAG,OAAOM,EAAYjB,CAAC;MAAE,CAAC;MACtG,OAAO,kBAAC,QAAD;OAAc,MAAK;OAAO,cAAYgB;OAAM,OAAOA;OAAM,WAAU;OAAuB,OAAO,EAAE,YAAYnB,EAAKS,EAAMN,CAAC,GAAG;MAAI,GAAvHW,CAAuH;KAC3I,CAAC,CACE;IATK,GAAAE,CASL,CACN;GACE;EACL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAU;GAAoE,eAAA;GAAnF,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAAQ,UAAAX,EAAE,gBAAgB,MAAM;IAAQ,CAAA;IACvDL,EAAK,KAAK,MACT,kBAAC,QAAD;KAAc,WAAU;KAAuB,OAAO,EAAE,YAAYc,EAAE;IAAI,GAA/DA,CAA+D,CAC3E;IACD,kBAAC,QAAD;KAAM,WAAU;KAAQ,UAAAT,EAAE,gBAAgB,MAAM;IAAQ,CAAA;GACrD;EACF,CAAA,CAAA;;AAET,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAQ,cAAc"}
+{"version":3,"file":"heatmap.js","names":["d3max","cn","useUiText","useScrollFadeX","ChartFrame","ChartLive","KAESO_HEATMAP_VARIANTS","KAESO_HEATMAP_DEFAULT_VARIANTS","RAMP","CELL","GAP","Heatmap","formatNumber","v","ariaLabel","t","hi","max","values","level","empty","rows","columns","cell","setCell","useState","keyboard","setKeyboard","scroller","useRef","grid","labelWidth","setLabelWidth","useLayoutEffect","first","value","r","c","write","formatValue","line","height","table","ri","ci","move","at","next","key","scrollLeft","tip","className","visible","i","columnLabelEvery","on","ChartTooltip"],"sources":["../../../src/components/charts/heatmap.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState } from \"react\";\nimport { max as d3max } from \"d3-array\";\nimport { cn } from \"../../utils/cn.js\";\nimport { formatNumber } from \"../../format/index.js\";\nimport { useUiText } from \"../../i18n/context.js\";\nimport { useScrollFadeX } from \"../../hooks/use-scroll-fade.js\";\nimport { ChartFrame, ChartLive, ChartTooltip } from \"./core.js\";\n\nexport const KAESO_HEATMAP_VARIANTS = {\n  layout: {\n    week: { classes: \"\" },\n    year: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_HEATMAP_DEFAULT_VARIANTS = { layout: \"week\" } as const;\n\nconst RAMP = [\n  \"var(--k-fill-1)\",\n  \"color-mix(in oklab, var(--k-viz-1) 40%, var(--k-fill-1))\",\n  \"color-mix(in oklab, var(--k-viz-1) 60%, var(--k-fill-1))\",\n  \"color-mix(in oklab, var(--k-viz-1) 80%, var(--k-fill-1))\",\n  \"var(--k-viz-1)\",\n];\nconst CELL = 12;\nconst GAP = 3;\nconst HEAD = 16;\n\nexport const Heatmap = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  {\n    rows: string[];\n    columns: string[];\n    values: number[][];\n    formatValue?: ((v: number) => string) | undefined;\n    \"aria-label\": string;\n    className?: string | undefined;\n    columnLabelEvery?: number | undefined;\n  }\n>(function Heatmap({ rows, columns, values, formatValue = (v) => formatNumber(v), className, \"aria-label\": ariaLabel, columnLabelEvery = 3 }, ref) {\n  const t = useUiText();\n  const hi = d3max(values.flat().filter(Number.isFinite)) ?? 0;\n  const level = (v: number) => (!Number.isFinite(v) || v <= 0 || hi === 0 ? 0 : Math.min(4, Math.ceil((v / hi) * 4)));\n  const empty = rows.length === 0 || columns.length === 0;\n  const [cell, setCell] = useState<{ r: number; c: number } | null>(null);\n  const [keyboard, setKeyboard] = useState(false);\n  const scroller = useRef<HTMLDivElement | null>(null);\n  const grid = useRef<HTMLDivElement | null>(null);\n  const [labelWidth, setLabelWidth] = useState(0);\n  useScrollFadeX(scroller, \"[data-heatmap-grid]\");\n  useLayoutEffect(() => {\n    const first = grid.current?.querySelector<HTMLElement>(\"[data-heatmap-rows]\");\n    if (first) setLabelWidth(first.offsetWidth);\n  }, [rows]);\n  useLayoutEffect(() => {\n    if (!keyboard || !cell) return;\n    grid.current?.querySelector(`[data-cell=\"${cell.r}-${cell.c}\"]`)?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n  }, [cell, keyboard]);\n  const value = (r: number, c: number) => values[r]?.[c] ?? 0;\n  const write = (v: number) => (Number.isFinite(v) ? formatValue(v) : \"–\");\n  const line = (r: number, c: number) =>\n    t(\"heatmap.cell\", \"{row} {column}: {value}\", { row: rows[r] ?? \"\", column: columns[c] ?? \"\", value: write(value(r, c)) });\n  const height = HEAD + GAP + rows.length * (CELL + GAP) + 8;\n  const table = { columns: [t(\"heatmap.rows\", \"Row\"), ...columns], rows: rows.map((r, ri) => [r, ...columns.map((_, ci) => write(value(ri, ci)))]) };\n  const move = (key: string) => {\n    const at = cell ?? { r: 0, c: 0 };\n    const next =\n      key === \"ArrowRight\"\n        ? { r: at.r, c: Math.min(columns.length - 1, at.c + 1) }\n        : key === \"ArrowLeft\"\n          ? { r: at.r, c: Math.max(0, at.c - 1) }\n          : key === \"ArrowDown\"\n            ? { r: Math.min(rows.length - 1, at.r + 1), c: at.c }\n            : key === \"ArrowUp\"\n              ? { r: Math.max(0, at.r - 1), c: at.c }\n              : key === \"Home\"\n                ? { r: at.r, c: 0 }\n                : key === \"End\"\n                  ? { r: at.r, c: columns.length - 1 }\n                  : undefined;\n    return cell === null && next ? at : next;\n  };\n  const scrollLeft = scroller.current?.scrollLeft ?? 0;\n  const tip = cell\n    ? {\n        x: labelWidth + GAP + cell.c * (CELL + GAP) + CELL - scrollLeft,\n        xLeft: labelWidth + GAP + cell.c * (CELL + GAP) - scrollLeft,\n        y: HEAD + GAP + cell.r * (CELL + GAP) + 24,\n      }\n    : null;\n  return (\n    <div ref={ref} className={cn(\"w-full min-w-0\", className)}>\n      <ChartFrame\n        label={ariaLabel}\n        height={height}\n        table={empty ? undefined : table}\n        state={{ empty }}\n        legend={\n          empty ? undefined : (\n            <div className=\"flex items-center gap-3 text-caption font-medium text-fg-tertiary\" aria-hidden>\n              <span className=\"mr-4\">{t(\"heatmap.less\", \"Less\")}</span>\n              {RAMP.map((c) => (\n                <span key={c} className=\"size-12 rounded-cell data-mark\" style={{ background: c }} />\n              ))}\n              <span className=\"ml-4\">{t(\"heatmap.more\", \"More\")}</span>\n            </div>\n          )\n        }\n      >\n        {!empty && (\n          <div className=\"absolute inset-0\">\n            <div\n              ref={scroller}\n              role=\"group\"\n              tabIndex={0}\n              aria-label={ariaLabel}\n              onKeyDown={(e) => {\n                if (e.key === \"Escape\" && cell) {\n                  e.stopPropagation();\n                  setCell(null);\n                  return;\n                }\n                const next = move(e.key);\n                if (!next) return;\n                e.preventDefault();\n                setKeyboard(true);\n                setCell(next);\n              }}\n              onFocus={(e) => {\n                if (e.target !== e.currentTarget || document.documentElement.hasAttribute(\"data-k-pointer\")) return;\n                let visible = true;\n                try {\n                  visible = e.currentTarget.matches(\":focus-visible\");\n                } catch {}\n                if (visible) {\n                  setKeyboard(true);\n                  setCell({ r: 0, c: 0 });\n                }\n              }}\n              onBlur={() => {\n                setCell(null);\n                setKeyboard(false);\n              }}\n              onScroll={() => setCell((c) => (keyboard ? c : null))}\n              className=\"size-full overflow-x-auto overflow-y-hidden rounded-cell scrollbar-quiet scroll-fade-x focus-ring-inset\"\n            >\n              <div\n                ref={grid}\n                data-heatmap-grid=\"\"\n                className=\"inline-grid gap-3\"\n                style={{ gridTemplateColumns: `max-content repeat(${columns.length}, ${CELL}px)` }}\n                onPointerLeave={() => {\n                  setKeyboard(false);\n                  setCell(null);\n                }}\n              >\n                <span data-heatmap-rows=\"\" />\n                {columns.map((c, i) => (\n                  <span key={c} className=\"h-16 overflow-visible text-caption whitespace-nowrap text-fg-tertiary tabular\" aria-hidden>\n                    {i % columnLabelEvery === 0 ? c : \"\"}\n                  </span>\n                ))}\n                {rows.map((r, ri) => (\n                  <div key={r} className=\"contents\">\n                    <span className=\"flex h-12 items-center pr-8 text-caption whitespace-nowrap text-fg-tertiary\" aria-hidden>\n                      {r}\n                    </span>\n                    {columns.map((c, ci) => {\n                      const on = cell?.r === ri && cell.c === ci;\n                      return (\n                        <span\n                          key={c}\n                          data-cell={`${ri}-${ci}`}\n                          aria-hidden\n                          onPointerEnter={() => {\n                            setKeyboard(false);\n                            setCell({ r: ri, c: ci });\n                          }}\n                          className={cn(\"size-12 rounded-cell data-mark\", on && \"outline-2 outline-offset-1 outline-fg\")}\n                          style={{ background: RAMP[level(value(ri, ci))] }}\n                        />\n                      );\n                    })}\n                  </div>\n                ))}\n              </div>\n            </div>\n            {cell && tip && (\n              <ChartTooltip\n                x={tip.x}\n                xLeft={tip.xLeft}\n                y={tip.y}\n                width={scroller.current?.clientWidth ?? 0}\n                visible\n                heading={t(\"heatmap.cellHeading\", \"{row} {column}\", { row: rows[cell.r] ?? \"\", column: columns[cell.c] ?? \"\" })}\n                rows={[{ id: \"v\", label: \"\", color: RAMP[level(value(cell.r, cell.c))]!, value: write(value(cell.r, cell.c)) }]}\n              />\n            )}\n            <ChartLive>{keyboard && cell ? line(cell.r, cell.c) : null}</ChartLive>\n          </div>\n        )}\n      </ChartFrame>\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Heatmap.displayName = \"Heatmap\";\n"],"mappings":"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"}