@acronis-platform/ui-react 5.2.0 → 5.3.1

package/dist/components/ui/sankey-chart/sankey-chart.js

@@ -1,119 +1,119 @@
 "use client";
 import { cn as e } from "../../../lib/utils.js";
 import { CHART_DEFAULT_PALETTE as t } from "../chart/chart-palette.js";
-import { ChartContainer as n, ChartStyle as r, ChartTooltip as i, resolveChartColors as a } from "../chart/chart.js";
-import * as o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Rectangle as l, Sankey as u } from "recharts";
+import { ChartContainer as n, ChartStyle as r, ChartTooltip as i, resolveChartColors as a, toCssKey as o } from "../chart/chart.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Rectangle as u, Sankey as d } from "recharts";
 //#region src/components/ui/sankey-chart/sankey-chart.tsx
-function d(e, t, n) {
-	return function({ x: r, y: i, width: a, height: o, index: u, payload: d }) {
-		let f = String(d.name), p = e[f]?.label ?? f, m = t.has(u);
-		return /* @__PURE__ */ c("g", { children: [/* @__PURE__ */ s(l, {
+function f(e, t, n) {
+	return function({ x: r, y: i, width: a, height: s, index: d, payload: f }) {
+		let p = String(f.name), m = e[p]?.label ?? p, h = t.has(d);
+		return /* @__PURE__ */ l("g", { children: [/* @__PURE__ */ c(u, {
 			x: r,
 			y: i,
 			width: a,
-			height: o,
-			fill: `var(--color-${f})`,
+			height: s,
+			fill: `var(--color-${o(p)})`,
 			radius: 2
-		}), n && /* @__PURE__ */ s("text", {
-			x: m ? r + a + 6 : r - 6,
-			y: i + o / 2,
-			textAnchor: m ? "start" : "end",
+		}), n && /* @__PURE__ */ c("text", {
+			x: h ? r + a + 6 : r - 6,
+			y: i + s / 2,
+			textAnchor: h ? "start" : "end",
 			dominantBaseline: "middle",
 			className: "fill-foreground text-xs",
-			children: p
+			children: m
 		})] });
 	};
 }
-function f({ sourceX: e, targetX: t, sourceY: n, targetY: r, sourceControlX: i, targetControlX: a, linkWidth: o, payload: c }) {
-	let l = String(c.target.name), u = c.color ?? `var(--color-${l})`;
-	return /* @__PURE__ */ s("path", {
+function p({ sourceX: e, targetX: t, sourceY: n, targetY: r, sourceControlX: i, targetControlX: a, linkWidth: s, payload: l }) {
+	let u = String(l.target.name), d = l.color ?? `var(--color-${o(u)})`;
+	return /* @__PURE__ */ c("path", {
 		d: `M${e},${n}C${i},${n} ${a},${r} ${t},${r}`,
 		fill: "none",
-		stroke: u,
-		strokeWidth: Math.max(1, o),
-		strokeOpacity: c.color ? 1 : .35
+		stroke: d,
+		strokeWidth: Math.max(1, s),
+		strokeOpacity: l.color ? 1 : .35
 	});
 }
-function p(e, t, n) {
+function m(e, t, n) {
 	let r = (t) => e[t]?.label ?? t, i = /* @__PURE__ */ new Map();
 	for (let e of t) {
 		let t = n[e.source]?.name ?? "", r = n[e.target]?.name ?? "";
 		i.set(t + " - " + r, {
-			color: e.color ?? `var(--color-${r})`,
+			color: e.color ?? `var(--color-${o(r)})`,
 			opacity: e.color ? 1 : .35
 		});
 	}
 	return function({ active: e, payload: t }) {
 		if (!e || !t?.length) return null;
-		let n = t[0], a = String(n?.name ?? "").split(" - "), l = a[a.length - 1], u = i.get(String(n?.name ?? "")), d = u?.color ?? `var(--color-${l})`, f = u?.opacity ?? 1, p = n?.value;
-		return /* @__PURE__ */ c("div", {
+		let n = t[0], a = String(n?.name ?? "").split(" - "), u = a[a.length - 1], d = i.get(String(n?.name ?? "")), f = d?.color ?? `var(--color-${o(u)})`, p = d?.opacity ?? 1, m = n?.value;
+		return /* @__PURE__ */ l("div", {
 			className: "flex items-center gap-2 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md",
 			children: [
-				/* @__PURE__ */ s("span", {
+				/* @__PURE__ */ c("span", {
 					className: "h-2.5 w-2.5 shrink-0 rounded-[2px]",
 					style: {
-						backgroundColor: d,
-						opacity: f
+						backgroundColor: f,
+						opacity: p
 					}
 				}),
-				/* @__PURE__ */ s("span", {
+				/* @__PURE__ */ c("span", {
 					className: "text-muted-foreground",
-					children: a.map((e, t) => /* @__PURE__ */ c(o.Fragment, { children: [t > 0 && " → ", r(e)] }, `${e}-${t}`))
+					children: a.map((e, t) => /* @__PURE__ */ l(s.Fragment, { children: [t > 0 && " → ", r(e)] }, `${e}-${t}`))
 				}),
-				p != null && /* @__PURE__ */ s("span", {
+				m != null && /* @__PURE__ */ c("span", {
 					className: "ms-2 font-medium tabular-nums",
-					children: m(p)
+					children: h(m)
 				})
 			]
 		});
 	};
 }
-function m(e) {
-	return Array.isArray(e) ? e.map((e) => m(e)).join(" – ") : typeof e == "number" ? e.toLocaleString() : String(e);
+function h(e) {
+	return Array.isArray(e) ? e.map((e) => h(e)).join(" – ") : typeof e == "number" ? e.toLocaleString() : String(e);
 }
-var h = o.forwardRef(({ className: l, config: m, palette: h, data: g, nodePadding: _ = 24, nodeWidth: v = 12, linkCurvature: y = .5, sort: b = !1, showLabels: x = !0, showLegend: S = !1, showTooltip: C = !0, tooltipContent: w, ...T }, E) => {
-	let D = `chart-${o.useId().replace(/:/g, "")}`, O = o.useMemo(() => new Set(g.links.map((e) => e.source)), [g.links]), k = o.useMemo(() => d(m, O, x), [
-		m,
-		O,
-		x
-	]), A = o.useMemo(() => p(m, g.links, g.nodes), [
-		m,
-		g.links,
-		g.nodes
-	]), j = o.useMemo(() => {
+var g = s.forwardRef(({ className: u, config: h, palette: g, data: _, nodePadding: v = 24, nodeWidth: y = 12, linkCurvature: b = .5, sort: x = !1, showLabels: S = !0, showLegend: C = !1, showTooltip: w = !0, tooltipContent: T, ...E }, D) => {
+	let O = `chart-${s.useId().replace(/:/g, "")}`, k = s.useMemo(() => new Set(_.links.map((e) => e.source)), [_.links]), A = s.useMemo(() => f(h, k, S), [
+		h,
+		k,
+		S
+	]), j = s.useMemo(() => m(h, _.links, _.nodes), [
+		h,
+		_.links,
+		_.nodes
+	]), M = s.useMemo(() => {
 		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
-		for (let n of g.links) t.set(n.source, (t.get(n.source) ?? 0) + n.value), e.set(n.target, (e.get(n.target) ?? 0) + n.value);
-		let n = g.nodes.map((n, r) => e.get(r) ?? t.get(r) ?? 0), r = n.length ? Math.max(...n) : 0;
-		return g.nodes.map((e, t) => ({
+		for (let n of _.links) t.set(n.source, (t.get(n.source) ?? 0) + n.value), e.set(n.target, (e.get(n.target) ?? 0) + n.value);
+		let n = _.nodes.map((n, r) => e.get(r) ?? t.get(r) ?? 0), r = n.length ? Math.max(...n) : 0;
+		return _.nodes.map((e, t) => ({
 			name: e.name,
 			value: n[t],
 			pct: r > 0 ? Math.round(n[t] / r * 100) : 0
 		}));
-	}, [g]);
-	return /* @__PURE__ */ c("div", {
-		ref: E,
-		"data-chart": D,
-		className: e("flex flex-col", l),
-		...T,
+	}, [_]);
+	return /* @__PURE__ */ l("div", {
+		ref: D,
+		"data-chart": O,
+		className: e("flex flex-col", u),
+		...E,
 		children: [
-			/* @__PURE__ */ s(r, {
-				id: D,
-				config: a(m, h ?? t)
+			/* @__PURE__ */ c(r, {
+				id: O,
+				config: a(h, g ?? t)
 			}),
-			/* @__PURE__ */ s(n, {
-				config: m,
-				palette: h,
+			/* @__PURE__ */ c(n, {
+				config: h,
+				palette: g,
 				className: "min-h-0 flex-1",
-				children: /* @__PURE__ */ s(u, {
-					data: g,
-					node: k,
-					link: f,
-					nodePadding: _,
-					nodeWidth: v,
-					linkCurvature: y,
-					sort: b,
+				children: /* @__PURE__ */ c(d, {
+					data: _,
+					node: A,
+					link: p,
+					nodePadding: v,
+					nodeWidth: y,
+					linkCurvature: b,
+					sort: x,
 					align: "left",
 					margin: {
 						top: 8,
@@ -121,28 +121,28 @@ var h = o.forwardRef(({ className: l, config: m, palette: h, data: g, nodePaddin
 						bottom: 8,
 						left: 24
 					},
-					children: C && /* @__PURE__ */ s(i, { content: w ?? A })
+					children: w && /* @__PURE__ */ c(i, { content: T ?? j })
 				})
 			}),
-			S && /* @__PURE__ */ s("div", {
+			C && /* @__PURE__ */ c("div", {
 				"data-slot": "sankey-chart-legend",
 				className: "mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs",
-				children: j.map(({ name: e, value: t, pct: n }) => /* @__PURE__ */ c("div", {
+				children: M.map(({ name: e, value: t, pct: n }) => /* @__PURE__ */ l("div", {
 					className: "flex items-center gap-2",
 					children: [
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ c("span", {
 							className: "size-2.5 shrink-0 rounded-sm",
-							style: { backgroundColor: `var(--color-${e})` }
+							style: { backgroundColor: `var(--color-${o(e)})` }
 						}),
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ c("span", {
 							className: "truncate text-muted-foreground",
-							children: m[e]?.label ?? e
+							children: h[e]?.label ?? e
 						}),
-						/* @__PURE__ */ s("span", {
+						/* @__PURE__ */ c("span", {
 							className: "ms-auto font-semibold tabular-nums",
 							children: t.toLocaleString()
 						}),
-						/* @__PURE__ */ c("span", {
+						/* @__PURE__ */ l("span", {
 							className: "w-9 shrink-0 text-end tabular-nums text-muted-foreground",
 							children: [n, "%"]
 						})
@@ -152,8 +152,8 @@ var h = o.forwardRef(({ className: l, config: m, palette: h, data: g, nodePaddin
 		]
 	});
 });
-h.displayName = "SankeyChart";
+g.displayName = "SankeyChart";
 //#endregion
-export { h as SankeyChart, p as makeSankeyTooltip };
+export { g as SankeyChart, m as makeSankeyTooltip };
 
 //# sourceMappingURL=sankey-chart.js.map

package/dist/components/ui/sankey-chart/sankey-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../../../src/components/ui/sankey-chart/sankey-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Sankey as RechartsSankey, Rectangle } from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartStyle,\n  resolveChartColors,\n  CHART_DEFAULT_PALETTE,\n  ChartTooltip,\n  type ChartConfig,\n  type ChartPalette,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives — a flow\n// diagram where link width is proportional to the value flowing between nodes.\n// Like Treemap/Funnel it's a single recharts element (`<Sankey>`) themed through\n// custom `node` / `link` renderers (recharts' defaults paint one flat grey and\n// carry no token hooks). No CVA variant: a Sankey's expressiveness is the\n// nodes/links graph + geometry (plain props), not a visual \"mode\".\n//\n// Node `name`s are the color keys: each must match a `config` entry, so they\n// must be CSS-safe (they become part of a `--color-<name>` custom property).\n// The human-readable text comes from `config[name].label`.\n\n/** A node in the flow — `name` is its color/config key (CSS-safe, unique). */\nexport interface SankeyChartNode {\n  name: string;\n}\n\n/** A directed flow between two nodes, referenced by their index in `nodes`. */\nexport interface SankeyChartLink {\n  /** Index of the source node in `data.nodes`. */\n  source: number;\n  /** Index of the target node in `data.nodes`. */\n  target: number;\n  /** Flow magnitude — drives the link's width. */\n  value: number;\n  /**\n   * Ribbon color (any CSS color, e.g. a `var(--ui-*)` token), rendered at **full\n   * opacity** so it matches its node bar. Omit to use the target node's color at\n   * 35% (the default tinted ribbon).\n   */\n  color?: string;\n}\n\nexport interface SankeyChartProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children'\n> {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** The graph: `nodes` (color keys) + `links` (source/target indices + value). */\n  data: {\n    nodes: ReadonlyArray<SankeyChartNode>;\n    links: ReadonlyArray<SankeyChartLink>;\n  };\n  /**\n   * Per-node map of `label` / `icon` / `tone`, keyed by the node's `name`\n   * (imported from the shared `Chart` primitives). Turned into `--color-<name>`\n   * custom properties. Series take their colour from the container's `palette`;\n   * each entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Vertical gap between nodes in the same column. */\n  nodePadding?: number;\n  /** Thickness of each node bar. */\n  nodeWidth?: number;\n  /** Curviness of the links (0 = straight, 1 = fully curved). */\n  linkCurvature?: number;\n  /**\n   * Sort nodes vertically to minimize link crossings (recharts' relaxation).\n   * Defaults to `false` — nodes render in the order given by `data.nodes` within\n   * each column, which keeps curated flows tidy; set `true` to auto-order.\n   */\n  sort?: boolean;\n  /** Render each node's label (from `config[name].label`) beside its bar. */\n  showLabels?: boolean;\n  /** Render a legend (color dot + label + value + % per node) below the chart. */\n  showLegend?: boolean;\n  /** Show a hover tooltip on nodes and links (dot + `source → target` + value). */\n  showTooltip?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting without composing recharts yourself. Ignored when\n   * `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\n// recharts injects these into the `node` / `link` render functions but doesn't\n// export their prop types from the package root, so we type the fields we use\n// (structurally compatible with recharts' internal NodeProps / LinkProps).\ninterface SankeyNodeShapeProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  index: number;\n  payload: { name: string; value: number };\n}\n\ninterface SankeyLinkShapeProps {\n  sourceX: number;\n  targetX: number;\n  sourceY: number;\n  targetY: number;\n  sourceControlX: number;\n  targetControlX: number;\n  linkWidth: number;\n  // recharts spreads the original link onto `payload` (then overrides\n  // source/target with node objects), so a custom `color` survives here.\n  payload: {\n    source: { name: string };\n    target: { name: string };\n    value: number;\n    color?: string;\n  };\n}\n\n// Node bar: a rect filled from `--color-<name>`, with the config label placed on\n// whichever side keeps it inside the plot — to the right for nodes that have\n// outgoing links (sources), to the left for terminal nodes (sinks).\nfunction makeNodeRenderer(\n  config: ChartConfig,\n  sourceIndices: ReadonlySet<number>,\n  showLabels: boolean\n) {\n  return function SankeyNodeShape({\n    x,\n    y,\n    width,\n    height,\n    index,\n    payload,\n  }: SankeyNodeShapeProps) {\n    const name = String(payload.name);\n    const label = config[name]?.label ?? name;\n    const isSource = sourceIndices.has(index);\n    return (\n      <g>\n        <Rectangle\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          fill={`var(--color-${name})`}\n          radius={2}\n        />\n        {showLabels && (\n          <text\n            x={isSource ? x + width + 6 : x - 6}\n            y={y + height / 2}\n            textAnchor={isSource ? 'start' : 'end'}\n            dominantBaseline=\"middle\"\n            className=\"fill-foreground text-xs\"\n          >\n            {label}\n          </text>\n        )}\n      </g>\n    );\n  };\n}\n\n// Link ribbon: a bezier stroked at 35% opacity in the link's own `color` if\n// given (recharts preserves custom link fields on the render `payload`), else\n// the **target** node's color (so a flow reads as \"where it goes\"). Drawn as a\n// stroke, not a fill, so the ribbon width comes from `linkWidth`.\nfunction SankeyLinkShape({\n  sourceX,\n  targetX,\n  sourceY,\n  targetY,\n  sourceControlX,\n  targetControlX,\n  linkWidth,\n  payload,\n}: SankeyLinkShapeProps) {\n  const targetName = String(payload.target.name);\n  const stroke = payload.color ?? `var(--color-${targetName})`;\n  return (\n    <path\n      d={`M${sourceX},${sourceY}C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n      fill=\"none\"\n      stroke={stroke}\n      strokeWidth={Math.max(1, linkWidth)}\n      // An explicit per-link color is the caller's exact choice — render it at\n      // full opacity (so it matches its node bar); the default target-tint is\n      // dimmed to 35% so ribbons don't overwhelm the nodes.\n      strokeOpacity={payload.color ? 1 : 0.35}\n    />\n  );\n}\n\n// Default tooltip: recharts' Sankey payload carries no config color, and labels\n// a hovered link \"source - target\" using the node keys (a node is a single key).\n// Parse that name to a color dot (the target node's color) + the mapped config\n// labels joined with an arrow + the value — driven by `config`, so it's reliable\n// where the shared ChartTooltipContent can't resolve the Sankey payload.\n//\n// Exported (module-only, not from the package barrel) so its branches can be\n// unit-tested directly: recharts can't lay out a Sankey in happy-dom, and its\n// hover tooltip has no statically-open form the component exposes, so rendering\n// `<SankeyChart>` never reaches this code.\nexport function makeSankeyTooltip(\n  config: ChartConfig,\n  links: ReadonlyArray<SankeyChartLink>,\n  nodes: ReadonlyArray<SankeyChartNode>\n) {\n  const labelFor = (key: string): React.ReactNode => config[key]?.label ?? key;\n  // Resolve each link's dot color by its \"source - target\" name (which is the\n  // tooltip item's name): the link's own color if set, else the target's, via\n  // the `--color-<name>` bridge.\n  const styleByName = new Map<string, { color: string; opacity: number }>();\n  for (const link of links) {\n    const source = nodes[link.source]?.name ?? '';\n    const target = nodes[link.target]?.name ?? '';\n    // Mirror the ribbon: an explicit color renders full-opacity; the default\n    // target tint renders at 35%.\n    styleByName.set(source + ' - ' + target, {\n      color: link.color ?? `var(--color-${target})`,\n      opacity: link.color ? 1 : 0.35,\n    });\n  }\n\n  return function SankeyTooltipContent({\n    active,\n    payload,\n  }: {\n    active?: boolean;\n    payload?: ReadonlyArray<{\n      name?: string | number;\n      value?: number | string | ReadonlyArray<number | string>;\n    }>;\n  }) {\n    if (!active || !payload?.length) return null;\n    const item = payload[0];\n    const parts = String(item?.name ?? '').split(' - ');\n    const targetKey = parts[parts.length - 1];\n    const linkStyle = styleByName.get(String(item?.name ?? ''));\n    const dotColor = linkStyle?.color ?? `var(--color-${targetKey})`;\n    const dotOpacity = linkStyle?.opacity ?? 1;\n    const value = item?.value;\n    return (\n      <div className=\"flex items-center gap-2 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md\">\n        <span\n          className=\"h-2.5 w-2.5 shrink-0 rounded-[2px]\"\n          style={{ backgroundColor: dotColor, opacity: dotOpacity }}\n        />\n        <span className=\"text-muted-foreground\">\n          {/* A config label can be any ReactNode, so the arrow-joined label is\n              built as nodes rather than stringified. */}\n          {parts.map((key, index) => (\n            <React.Fragment key={`${key}-${index}`}>\n              {index > 0 && ' → '}\n              {labelFor(key)}\n            </React.Fragment>\n          ))}\n        </span>\n        {value != null && (\n          <span className=\"ms-2 font-medium tabular-nums\">\n            {formatTooltipValue(value)}\n          </span>\n        )}\n      </div>\n    );\n  };\n}\n\n// recharts types a tooltip item's value as a scalar *or* a range tuple; a plain\n// `String()` would print \"1,2\" for the tuple, so format each part and join.\nfunction formatTooltipValue(\n  value: number | string | ReadonlyArray<number | string>\n): string {\n  if (Array.isArray(value)) {\n    return value.map((part) => formatTooltipValue(part)).join(' – ');\n  }\n  return typeof value === 'number'\n    ? value.toLocaleString()\n    : String(value as string);\n}\n\nconst SankeyChart = React.forwardRef<HTMLDivElement, SankeyChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      nodePadding = 24,\n      nodeWidth = 12,\n      linkCurvature = 0.5,\n      sort = false,\n      showLabels = true,\n      showLegend = false,\n      showTooltip = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${uniqueId.replace(/:/g, '')}`;\n\n    // Node indices that appear as a link `source` have outgoing flow — used by\n    // the node renderer to place the label on the readable side.\n    const sourceIndices = React.useMemo(\n      () => new Set(data.links.map((link) => link.source)),\n      [data.links]\n    );\n\n    const nodeRenderer = React.useMemo(\n      () => makeNodeRenderer(config, sourceIndices, showLabels),\n      [config, sourceIndices, showLabels]\n    );\n\n    const defaultTooltip = React.useMemo(\n      () => makeSankeyTooltip(config, data.links, data.nodes),\n      [config, data.links, data.nodes]\n    );\n\n    // Per-node value (incoming flow, or outgoing for a source with no incoming)\n    // and its share of the largest node — drives the legend's count + %.\n    const nodeStats = React.useMemo(() => {\n      const incoming = new Map<number, number>();\n      const outgoing = new Map<number, number>();\n      for (const link of data.links) {\n        outgoing.set(\n          link.source,\n          (outgoing.get(link.source) ?? 0) + link.value\n        );\n        incoming.set(\n          link.target,\n          (incoming.get(link.target) ?? 0) + link.value\n        );\n      }\n      const values = data.nodes.map(\n        (_, i) => incoming.get(i) ?? outgoing.get(i) ?? 0\n      );\n      const total = values.length ? Math.max(...values) : 0;\n      return data.nodes.map((node, i) => ({\n        name: node.name,\n        value: values[i],\n        pct: total > 0 ? Math.round((values[i] / total) * 100) : 0,\n      }));\n    }, [data]);\n\n    return (\n      <div\n        ref={ref}\n        // The legend sits outside `ChartContainer`, so the root carries its own\n        // `--color-<name>` scope for it (the plot and the recharts-portaled\n        // tooltip resolve theirs from ChartContainer's).\n        data-chart={chartId}\n        className={cn('flex flex-col', className)}\n        {...props}\n      >\n        <ChartStyle\n          id={chartId}\n          config={resolveChartColors(config, palette ?? CHART_DEFAULT_PALETTE)}\n        />\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"min-h-0 flex-1\"\n        >\n          <RechartsSankey\n            data={\n              data as { nodes: SankeyChartNode[]; links: SankeyChartLink[] }\n            }\n            node={nodeRenderer}\n            link={SankeyLinkShape}\n            nodePadding={nodePadding}\n            nodeWidth={nodeWidth}\n            linkCurvature={linkCurvature}\n            sort={sort}\n            // recharts defaults to `justify`, which right-aligns sink nodes to\n            // the last column — so a terminal node like \"No certification\" would\n            // jump to the far right instead of staying at its real depth. `left`\n            // positions every node by its distance from the source, keeping the\n            // flow's columns intact.\n            align=\"left\"\n            // Node labels never extend past the plot's right edge: a node in the\n            // last column has no outgoing links, so its label is drawn to the\n            // LEFT of its bar (see the node renderer). Only a small gutter is\n            // needed here — a wide reserve would just shrink the diagram.\n            margin={{ top: 8, right: 24, bottom: 8, left: 24 }}\n          >\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? defaultTooltip} />\n            )}\n          </RechartsSankey>\n        </ChartContainer>\n        {showLegend && (\n          <div\n            data-slot=\"sankey-chart-legend\"\n            className=\"mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs\"\n          >\n            {nodeStats.map(({ name, value, pct }) => (\n              <div key={name} className=\"flex items-center gap-2\">\n                <span\n                  className=\"size-2.5 shrink-0 rounded-sm\"\n                  style={{ backgroundColor: `var(--color-${name})` }}\n                />\n                <span className=\"truncate text-muted-foreground\">\n                  {config[name]?.label ?? name}\n                </span>\n                <span className=\"ms-auto font-semibold tabular-nums\">\n                  {value.toLocaleString()}\n                </span>\n                <span className=\"w-9 shrink-0 text-end tabular-nums text-muted-foreground\">\n                  {pct}%\n                </span>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\nSankeyChart.displayName = 'SankeyChart';\n\nexport { SankeyChart };\n"],"mappings":"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"}
+{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../../../src/components/ui/sankey-chart/sankey-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Sankey as RechartsSankey, Rectangle } from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartStyle,\n  resolveChartColors,\n  CHART_DEFAULT_PALETTE,\n  ChartTooltip,\n  toCssKey,\n  type ChartConfig,\n  type ChartPalette,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives — a flow\n// diagram where link width is proportional to the value flowing between nodes.\n// Like Treemap/Funnel it's a single recharts element (`<Sankey>`) themed through\n// custom `node` / `link` renderers (recharts' defaults paint one flat grey and\n// carry no token hooks). No CVA variant: a Sankey's expressiveness is the\n// nodes/links graph + geometry (plain props), not a visual \"mode\".\n//\n// Node `name`s are the color keys: each must match a `config` entry. They are\n// sanitized automatically to a valid CSS custom-property fragment; CSS-safe\n// names are preferred to avoid dev-mode warnings.\n// The human-readable text comes from `config[name].label`.\n\n/** A node in the flow — `name` is its color/config key (unique; sanitized automatically to a CSS-safe fragment). */\nexport interface SankeyChartNode {\n  name: string;\n}\n\n/** A directed flow between two nodes, referenced by their index in `nodes`. */\nexport interface SankeyChartLink {\n  /** Index of the source node in `data.nodes`. */\n  source: number;\n  /** Index of the target node in `data.nodes`. */\n  target: number;\n  /** Flow magnitude — drives the link's width. */\n  value: number;\n  /**\n   * Ribbon color (any CSS color, e.g. a `var(--ui-*)` token), rendered at **full\n   * opacity** so it matches its node bar. Omit to use the target node's color at\n   * 35% (the default tinted ribbon).\n   */\n  color?: string;\n}\n\nexport interface SankeyChartProps extends Omit<\n  React.ComponentProps<'div'>,\n  'children'\n> {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** The graph: `nodes` (color keys) + `links` (source/target indices + value). */\n  data: {\n    nodes: ReadonlyArray<SankeyChartNode>;\n    links: ReadonlyArray<SankeyChartLink>;\n  };\n  /**\n   * Per-node map of `label` / `icon` / `tone`, keyed by the node's `name`\n   * (imported from the shared `Chart` primitives). Turned into `--color-<name>`\n   * custom properties. Series take their colour from the container's `palette`;\n   * each entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Vertical gap between nodes in the same column. */\n  nodePadding?: number;\n  /** Thickness of each node bar. */\n  nodeWidth?: number;\n  /** Curviness of the links (0 = straight, 1 = fully curved). */\n  linkCurvature?: number;\n  /**\n   * Sort nodes vertically to minimize link crossings (recharts' relaxation).\n   * Defaults to `false` — nodes render in the order given by `data.nodes` within\n   * each column, which keeps curated flows tidy; set `true` to auto-order.\n   */\n  sort?: boolean;\n  /** Render each node's label (from `config[name].label`) beside its bar. */\n  showLabels?: boolean;\n  /** Render a legend (color dot + label + value + % per node) below the chart. */\n  showLegend?: boolean;\n  /** Show a hover tooltip on nodes and links (dot + `source → target` + value). */\n  showTooltip?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize formatting without composing recharts yourself. Ignored when\n   * `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\n// recharts injects these into the `node` / `link` render functions but doesn't\n// export their prop types from the package root, so we type the fields we use\n// (structurally compatible with recharts' internal NodeProps / LinkProps).\ninterface SankeyNodeShapeProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  index: number;\n  payload: { name: string; value: number };\n}\n\ninterface SankeyLinkShapeProps {\n  sourceX: number;\n  targetX: number;\n  sourceY: number;\n  targetY: number;\n  sourceControlX: number;\n  targetControlX: number;\n  linkWidth: number;\n  // recharts spreads the original link onto `payload` (then overrides\n  // source/target with node objects), so a custom `color` survives here.\n  payload: {\n    source: { name: string };\n    target: { name: string };\n    value: number;\n    color?: string;\n  };\n}\n\n// Node bar: a rect filled from `--color-<name>`, with the config label placed on\n// whichever side keeps it inside the plot — to the right for nodes that have\n// outgoing links (sources), to the left for terminal nodes (sinks).\nfunction makeNodeRenderer(\n  config: ChartConfig,\n  sourceIndices: ReadonlySet<number>,\n  showLabels: boolean\n) {\n  return function SankeyNodeShape({\n    x,\n    y,\n    width,\n    height,\n    index,\n    payload,\n  }: SankeyNodeShapeProps) {\n    const name = String(payload.name);\n    const label = config[name]?.label ?? name;\n    const isSource = sourceIndices.has(index);\n    return (\n      <g>\n        <Rectangle\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          fill={`var(--color-${toCssKey(name)})`}\n          radius={2}\n        />\n        {showLabels && (\n          <text\n            x={isSource ? x + width + 6 : x - 6}\n            y={y + height / 2}\n            textAnchor={isSource ? 'start' : 'end'}\n            dominantBaseline=\"middle\"\n            className=\"fill-foreground text-xs\"\n          >\n            {label}\n          </text>\n        )}\n      </g>\n    );\n  };\n}\n\n// Link ribbon: a bezier stroked at 35% opacity in the link's own `color` if\n// given (recharts preserves custom link fields on the render `payload`), else\n// the **target** node's color (so a flow reads as \"where it goes\"). Drawn as a\n// stroke, not a fill, so the ribbon width comes from `linkWidth`.\nfunction SankeyLinkShape({\n  sourceX,\n  targetX,\n  sourceY,\n  targetY,\n  sourceControlX,\n  targetControlX,\n  linkWidth,\n  payload,\n}: SankeyLinkShapeProps) {\n  const targetName = String(payload.target.name);\n  const stroke = payload.color ?? `var(--color-${toCssKey(targetName)})`;\n  return (\n    <path\n      d={`M${sourceX},${sourceY}C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n      fill=\"none\"\n      stroke={stroke}\n      strokeWidth={Math.max(1, linkWidth)}\n      // An explicit per-link color is the caller's exact choice — render it at\n      // full opacity (so it matches its node bar); the default target-tint is\n      // dimmed to 35% so ribbons don't overwhelm the nodes.\n      strokeOpacity={payload.color ? 1 : 0.35}\n    />\n  );\n}\n\n// Default tooltip: recharts' Sankey payload carries no config color, and labels\n// a hovered link \"source - target\" using the node keys (a node is a single key).\n// Parse that name to a color dot (the target node's color) + the mapped config\n// labels joined with an arrow + the value — driven by `config`, so it's reliable\n// where the shared ChartTooltipContent can't resolve the Sankey payload.\n//\n// Exported (module-only, not from the package barrel) so its branches can be\n// unit-tested directly: recharts can't lay out a Sankey in happy-dom, and its\n// hover tooltip has no statically-open form the component exposes, so rendering\n// `<SankeyChart>` never reaches this code.\nexport function makeSankeyTooltip(\n  config: ChartConfig,\n  links: ReadonlyArray<SankeyChartLink>,\n  nodes: ReadonlyArray<SankeyChartNode>\n) {\n  const labelFor = (key: string): React.ReactNode => config[key]?.label ?? key;\n  // Resolve each link's dot color by its \"source - target\" name (which is the\n  // tooltip item's name): the link's own color if set, else the target's, via\n  // the `--color-<name>` bridge.\n  const styleByName = new Map<string, { color: string; opacity: number }>();\n  for (const link of links) {\n    const source = nodes[link.source]?.name ?? '';\n    const target = nodes[link.target]?.name ?? '';\n    // Mirror the ribbon: an explicit color renders full-opacity; the default\n    // target tint renders at 35%.\n    styleByName.set(source + ' - ' + target, {\n      color: link.color ?? `var(--color-${toCssKey(target)})`,\n      opacity: link.color ? 1 : 0.35,\n    });\n  }\n\n  return function SankeyTooltipContent({\n    active,\n    payload,\n  }: {\n    active?: boolean;\n    payload?: ReadonlyArray<{\n      name?: string | number;\n      value?: number | string | ReadonlyArray<number | string>;\n    }>;\n  }) {\n    if (!active || !payload?.length) return null;\n    const item = payload[0];\n    const parts = String(item?.name ?? '').split(' - ');\n    const targetKey = parts[parts.length - 1];\n    const linkStyle = styleByName.get(String(item?.name ?? ''));\n    const dotColor = linkStyle?.color ?? `var(--color-${toCssKey(targetKey)})`;\n    const dotOpacity = linkStyle?.opacity ?? 1;\n    const value = item?.value;\n    return (\n      <div className=\"flex items-center gap-2 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md\">\n        <span\n          className=\"h-2.5 w-2.5 shrink-0 rounded-[2px]\"\n          style={{ backgroundColor: dotColor, opacity: dotOpacity }}\n        />\n        <span className=\"text-muted-foreground\">\n          {/* A config label can be any ReactNode, so the arrow-joined label is\n              built as nodes rather than stringified. */}\n          {parts.map((key, index) => (\n            <React.Fragment key={`${key}-${index}`}>\n              {index > 0 && ' → '}\n              {labelFor(key)}\n            </React.Fragment>\n          ))}\n        </span>\n        {value != null && (\n          <span className=\"ms-2 font-medium tabular-nums\">\n            {formatTooltipValue(value)}\n          </span>\n        )}\n      </div>\n    );\n  };\n}\n\n// recharts types a tooltip item's value as a scalar *or* a range tuple; a plain\n// `String()` would print \"1,2\" for the tuple, so format each part and join.\nfunction formatTooltipValue(\n  value: number | string | ReadonlyArray<number | string>\n): string {\n  if (Array.isArray(value)) {\n    return value.map((part) => formatTooltipValue(part)).join(' – ');\n  }\n  return typeof value === 'number'\n    ? value.toLocaleString()\n    : String(value as string);\n}\n\nconst SankeyChart = React.forwardRef<HTMLDivElement, SankeyChartProps>(\n  (\n    {\n      className,\n      config,\n      palette,\n      data,\n      nodePadding = 24,\n      nodeWidth = 12,\n      linkCurvature = 0.5,\n      sort = false,\n      showLabels = true,\n      showLegend = false,\n      showTooltip = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    const uniqueId = React.useId();\n    const chartId = `chart-${uniqueId.replace(/:/g, '')}`;\n\n    // Node indices that appear as a link `source` have outgoing flow — used by\n    // the node renderer to place the label on the readable side.\n    const sourceIndices = React.useMemo(\n      () => new Set(data.links.map((link) => link.source)),\n      [data.links]\n    );\n\n    const nodeRenderer = React.useMemo(\n      () => makeNodeRenderer(config, sourceIndices, showLabels),\n      [config, sourceIndices, showLabels]\n    );\n\n    const defaultTooltip = React.useMemo(\n      () => makeSankeyTooltip(config, data.links, data.nodes),\n      [config, data.links, data.nodes]\n    );\n\n    // Per-node value (incoming flow, or outgoing for a source with no incoming)\n    // and its share of the largest node — drives the legend's count + %.\n    const nodeStats = React.useMemo(() => {\n      const incoming = new Map<number, number>();\n      const outgoing = new Map<number, number>();\n      for (const link of data.links) {\n        outgoing.set(\n          link.source,\n          (outgoing.get(link.source) ?? 0) + link.value\n        );\n        incoming.set(\n          link.target,\n          (incoming.get(link.target) ?? 0) + link.value\n        );\n      }\n      const values = data.nodes.map(\n        (_, i) => incoming.get(i) ?? outgoing.get(i) ?? 0\n      );\n      const total = values.length ? Math.max(...values) : 0;\n      return data.nodes.map((node, i) => ({\n        name: node.name,\n        value: values[i],\n        pct: total > 0 ? Math.round((values[i] / total) * 100) : 0,\n      }));\n    }, [data]);\n\n    return (\n      <div\n        ref={ref}\n        // The legend sits outside `ChartContainer`, so the root carries its own\n        // `--color-<name>` scope for it (the plot and the recharts-portaled\n        // tooltip resolve theirs from ChartContainer's).\n        data-chart={chartId}\n        className={cn('flex flex-col', className)}\n        {...props}\n      >\n        <ChartStyle\n          id={chartId}\n          config={resolveChartColors(config, palette ?? CHART_DEFAULT_PALETTE)}\n        />\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"min-h-0 flex-1\"\n        >\n          <RechartsSankey\n            data={\n              data as { nodes: SankeyChartNode[]; links: SankeyChartLink[] }\n            }\n            node={nodeRenderer}\n            link={SankeyLinkShape}\n            nodePadding={nodePadding}\n            nodeWidth={nodeWidth}\n            linkCurvature={linkCurvature}\n            sort={sort}\n            // recharts defaults to `justify`, which right-aligns sink nodes to\n            // the last column — so a terminal node like \"No certification\" would\n            // jump to the far right instead of staying at its real depth. `left`\n            // positions every node by its distance from the source, keeping the\n            // flow's columns intact.\n            align=\"left\"\n            // Node labels never extend past the plot's right edge: a node in the\n            // last column has no outgoing links, so its label is drawn to the\n            // LEFT of its bar (see the node renderer). Only a small gutter is\n            // needed here — a wide reserve would just shrink the diagram.\n            margin={{ top: 8, right: 24, bottom: 8, left: 24 }}\n          >\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? defaultTooltip} />\n            )}\n          </RechartsSankey>\n        </ChartContainer>\n        {showLegend && (\n          <div\n            data-slot=\"sankey-chart-legend\"\n            className=\"mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs\"\n          >\n            {nodeStats.map(({ name, value, pct }) => (\n              <div key={name} className=\"flex items-center gap-2\">\n                <span\n                  className=\"size-2.5 shrink-0 rounded-sm\"\n                  style={{ backgroundColor: `var(--color-${toCssKey(name)})` }}\n                />\n                <span className=\"truncate text-muted-foreground\">\n                  {config[name]?.label ?? name}\n                </span>\n                <span className=\"ms-auto font-semibold tabular-nums\">\n                  {value.toLocaleString()}\n                </span>\n                <span className=\"w-9 shrink-0 text-end tabular-nums text-muted-foreground\">\n                  {pct}%\n                </span>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\nSankeyChart.displayName = 'SankeyChart';\n\nexport { SankeyChart };\n"],"mappings":"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"}

package/dist/components/ui/scatter-chart/scatter-chart.js

@@ -1,30 +1,30 @@
 "use client";
 import { cn as e } from "../../../lib/utils.js";
-import { ChartContainer as t, ChartLegend as n, ChartLegendContent as r, ChartTooltip as i, ChartTooltipContent as a } from "../chart/chart.js";
-import { resolveAnimation as o, resolveAxisDomain as s, resolveRotatedTickAnchor as c, resolveXAxisHeight as l, resolveXAxisTitle as u, resolveYAxisTitle as d } from "../chart/chart-format.js";
-import * as f from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { CartesianGrid as h, Scatter as g, ScatterChart as _, XAxis as v, YAxis as y, ZAxis as b } from "recharts";
+import { ChartContainer as t, ChartLegend as n, ChartLegendContent as r, ChartTooltip as i, ChartTooltipContent as a, toCssKey as o } from "../chart/chart.js";
+import { resolveAnimation as s, resolveAxisDomain as c, resolveRotatedTickAnchor as l, resolveXAxisHeight as u, resolveXAxisTitle as d, resolveYAxisTitle as f } from "../chart/chart-format.js";
+import * as p from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { CartesianGrid as g, Scatter as _, ScatterChart as v, XAxis as y, YAxis as b, ZAxis as x } from "recharts";
 //#region src/components/ui/scatter-chart/scatter-chart.tsx
-var x = f.forwardRef(({ className: f, config: x, palette: S = {
+var S = p.forwardRef(({ className: p, config: S, palette: C = {
 	type: "diverging",
 	pair: "teal-violet"
-}, series: C, xKey: w, yKey: T, zKey: E, zRange: D = [60, 400], shape: O = "circle", xAxisLabel: k, yAxisLabel: A, xUnit: j, yUnit: M, showGrid: N = !0, showTooltip: P = !0, showLegend: ee = !0, showXAxis: F = !0, showYAxis: I = !0, xTickFormatter: L, yTickFormatter: R, xAxisAngle: z, xAxisInterval: B, yAxisTickCount: V, yAxisDomain: H, gridDashed: U = !0, gridHorizontal: W, gridVertical: G, tooltipContent: K, animate: q, animationDuration: J, animationBegin: Y, animationEasing: X, ...Z }, Q) => {
-	let $ = o({
-		animate: q,
-		animationDuration: J,
-		animationBegin: Y,
-		animationEasing: X
-	}), te = u(k, "insideBottom", -8), ne = d(A), re = s(H), ie = l(k, z);
-	return /* @__PURE__ */ p("div", {
-		ref: Q,
-		className: e(f),
-		...Z,
-		children: /* @__PURE__ */ p(t, {
-			config: x,
-			palette: S,
+}, series: w, xKey: T, yKey: E, zKey: D, zRange: O = [60, 400], shape: k = "circle", xAxisLabel: A, yAxisLabel: j, xUnit: M, yUnit: N, showGrid: P = !0, showTooltip: ee = !0, showLegend: F = !0, showXAxis: I = !0, showYAxis: L = !0, xTickFormatter: R, yTickFormatter: z, xAxisAngle: B, xAxisInterval: V, yAxisTickCount: H, yAxisDomain: U, gridDashed: W = !0, gridHorizontal: G, gridVertical: K, tooltipContent: q, animate: J, animationDuration: Y, animationBegin: X, animationEasing: Z, ...Q }, $) => {
+	let te = s({
+		animate: J,
+		animationDuration: Y,
+		animationBegin: X,
+		animationEasing: Z
+	}), ne = d(A, "insideBottom", -8), re = f(j), ie = c(U), ae = u(A, B);
+	return /* @__PURE__ */ m("div", {
+		ref: $,
+		className: e(p),
+		...Q,
+		children: /* @__PURE__ */ m(t, {
+			config: S,
+			palette: C,
 			className: "size-full [&_.recharts-label]:fill-foreground",
-			children: /* @__PURE__ */ m(_, {
+			children: /* @__PURE__ */ h(v, {
 				margin: {
 					top: 16,
 					right: 16,
@@ -32,28 +32,12 @@ var x = f.forwardRef(({ className: f, config: x, palette: S = {
 					left: 16
 				},
 				children: [
-					N && /* @__PURE__ */ p(h, {
-						horizontal: W ?? !0,
-						vertical: G ?? !1,
-						strokeDasharray: U ? "3 3" : void 0
+					P && /* @__PURE__ */ m(g, {
+						horizontal: G ?? !0,
+						vertical: K ?? !1,
+						strokeDasharray: W ? "3 3" : void 0
 					}),
-					/* @__PURE__ */ p(v, {
-						type: "number",
-						dataKey: w,
-						name: w,
-						unit: j,
-						hide: !F,
-						tickLine: !1,
-						axisLine: !1,
-						tickMargin: 8,
-						tickFormatter: L,
-						angle: z,
-						interval: B,
-						textAnchor: c(z),
-						height: ie,
-						label: te
-					}),
-					/* @__PURE__ */ p(y, {
+					/* @__PURE__ */ m(y, {
 						type: "number",
 						dataKey: T,
 						name: T,
@@ -63,36 +47,52 @@ var x = f.forwardRef(({ className: f, config: x, palette: S = {
 						axisLine: !1,
 						tickMargin: 8,
 						tickFormatter: R,
-						tickCount: V,
-						domain: re,
-						width: A ? 72 : void 0,
+						angle: B,
+						interval: V,
+						textAnchor: l(B),
+						height: ae,
 						label: ne
 					}),
-					E && /* @__PURE__ */ p(b, {
+					/* @__PURE__ */ m(b, {
 						type: "number",
 						dataKey: E,
-						range: D,
-						name: E
+						name: E,
+						unit: N,
+						hide: !L,
+						tickLine: !1,
+						axisLine: !1,
+						tickMargin: 8,
+						tickFormatter: z,
+						tickCount: H,
+						domain: ie,
+						width: j ? 72 : void 0,
+						label: re
+					}),
+					D && /* @__PURE__ */ m(x, {
+						type: "number",
+						dataKey: D,
+						range: O,
+						name: D
 					}),
-					P && /* @__PURE__ */ p(i, {
+					ee && /* @__PURE__ */ m(i, {
 						cursor: { strokeDasharray: "3 3" },
-						content: K ?? /* @__PURE__ */ p(a, {})
+						content: q ?? /* @__PURE__ */ m(a, {})
 					}),
-					ee && /* @__PURE__ */ p(n, { content: /* @__PURE__ */ p(r, {}) }),
-					C.map((e) => /* @__PURE__ */ p(g, {
+					F && /* @__PURE__ */ m(n, { content: /* @__PURE__ */ m(r, {}) }),
+					w.map((e) => /* @__PURE__ */ m(_, {
 						name: e.key,
 						data: e.data,
-						fill: `var(--color-${e.key})`,
-						shape: O,
-						...$
+						fill: `var(--color-${o(e.key)})`,
+						shape: k,
+						...te
 					}, e.key))
 				]
 			})
 		})
 	});
 });
-x.displayName = "ScatterChart";
+S.displayName = "ScatterChart";
 //#endregion
-export { x as ScatterChart };
+export { S as ScatterChart };
 
 //# sourceMappingURL=scatter-chart.js.map

package/dist/components/ui/scatter-chart/scatter-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"scatter-chart.js","names":[],"sources":["../../../../src/components/ui/scatter-chart/scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  CartesianGrid,\n  Scatter,\n  ScatterChart as RechartsScatterChart,\n  XAxis,\n  YAxis,\n  ZAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  type ChartConfig,\n  type ChartPalette,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. Unlike the\n// other chart types, a scatter has no visual \"mode\" to model as a CVA variant —\n// its shape is fixed (x/y points, optionally sized by z) and its expressiveness\n// comes from the data mapping. So there is no `cva` axis here (matches the\n// skill's \"usually none\"); marker `shape` and bubble sizing are plain props.\n// Each series carries its own point array (points aren't columns of a shared\n// row the way bar/line/area series are), so the API takes a `series` list rather\n// than `dataKeys` over one `data` array.\nexport type ScatterMarkerShape =\n  | 'circle'\n  | 'cross'\n  | 'diamond'\n  | 'square'\n  | 'star'\n  | 'triangle'\n  | 'wye';\n\nexport interface ScatterSeries {\n  /** Series key — must match a `config` entry; drives its `--color-<key>` fill and legend label. */\n  key: string;\n  /** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */\n  data: ReadonlyArray<Record<string, number>>;\n}\n\nexport interface ScatterChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    CartesianChartProps,\n    ChartAnimationProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */\n  series: ScatterSeries[];\n  /**\n   * Per-series map of `label` / `icon` / `tone`, keyed by `series[].key`\n   * (imported from the shared `Chart` primitives). Turned into `--color-<key>`\n   * custom properties. Series take their colour from the container's `palette`;\n   * each entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Numeric field for the horizontal axis. */\n  xKey: string;\n  /** Numeric field for the vertical axis. */\n  yKey: string;\n  /** Unit suffix appended to X-axis tick values (recharts `unit`). */\n  xUnit?: string;\n  /** Optional numeric field mapped to point size (a bubble chart), via recharts `ZAxis`. */\n  zKey?: string;\n  /** Point-size range `[min, max]` the `zKey` maps into. Ignored when `zKey` is unset (points use recharts' default size). */\n  zRange?: [number, number];\n  /** Marker shape for every point. */\n  shape?: ScatterMarkerShape;\n  showLegend?: boolean;\n}\n\nconst ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(\n  (\n    {\n      className,\n      config,\n      palette = { type: 'diverging', pair: 'teal-violet' },\n      series,\n      xKey,\n      yKey,\n      zKey,\n      zRange = [60, 400],\n      shape = 'circle',\n      xAxisLabel,\n      yAxisLabel,\n      xUnit,\n      yUnit,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed = true,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = resolveXAxisTitle(\n      xAxisLabel,\n      'insideBottom',\n      -8\n    );\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsScatterChart\n            margin={{ top: 16, right: 16, bottom: 16, left: 16 }}\n          >\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              type=\"number\"\n              dataKey={xKey}\n              name={xKey}\n              unit={xUnit}\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              dataKey={yKey}\n              name={yKey}\n              unit={yUnit}\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {zKey && (\n              <ZAxis type=\"number\" dataKey={zKey} range={zRange} name={zKey} />\n            )}\n            {showTooltip && (\n              <ChartTooltip\n                cursor={{ strokeDasharray: '3 3' }}\n                content={tooltipContent ?? <ChartTooltipContent />}\n              />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {series.map((s) => (\n              <Scatter\n                key={s.key}\n                name={s.key}\n                data={s.data as Record<string, number>[]}\n                fill={`var(--color-${s.key})`}\n                shape={shape}\n                {...animation}\n              />\n            ))}\n          </RechartsScatterChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nScatterChart.displayName = 'ScatterChart';\n\nexport { ScatterChart };\n"],"mappings":";;;;;;;;AAwFA,IAAM,IAAe,EAAM,YAEvB,EACE,cACA,WACA,aAAU;CAAE,MAAM;CAAa,MAAM;AAAc,GACnD,WACA,SACA,SACA,SACA,YAAS,CAAC,IAAI,GAAG,GACjB,WAAQ,UACR,eACA,eACA,UACA,UACA,cAAW,IACX,iBAAc,IACd,iBAAa,IACb,eAAY,IACZ,eAAY,IACZ,mBACA,mBACA,eACA,kBACA,mBACA,gBACA,gBAAa,IACb,mBACA,iBACA,mBACA,YACA,sBACA,mBACA,oBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAY,EAAiB;EACjC;EACA;EACA;EACA;CACF,CAAC,GAIK,KAAa,EACjB,GACA,gBACA,EACF,GACM,KAAa,EAAkB,CAAU,GAEzC,KAAU,EAAkB,CAAW,GAEvC,KAAc,EAAmB,GAAY,CAAU;CAE7D,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,CAAS;EAAG,GAAI;EAC3C,UAAA,kBAAC,GAAD;GACU;GACC;GACT,WAAU;GAEV,UAAA,kBAAC,GAAD;IACE,QAAQ;KAAE,KAAK;KAAI,OAAO;KAAI,QAAQ;KAAI,MAAM;IAAG;IADrD,UAAA;KAGG,KACC,kBAAC,GAAD;MACE,YAAY,KAAkB;MAC9B,UAAU,KAAgB;MAC1B,iBAAiB,IAAa,QAAQ,KAAA;KACvC,CAAA;KAEH,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,MAAM;MACN,MAAM;MACN,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,YAAY;MACZ,eAAe;MACf,OAAO;MACP,UAAU;MACV,YAAY,EAAyB,CAAU;MAC/C,QAAQ;MACR,OAAO;KACR,CAAA;KACD,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,MAAM;MACN,MAAM;MACN,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,YAAY;MACZ,eAAe;MACf,WAAW;MACX,QAAQ;MACR,OAAO,IAAa,KAAK,KAAA;MACzB,OAAO;KACR,CAAA;KACA,KACC,kBAAC,GAAD;MAAO,MAAK;MAAS,SAAS;MAAM,OAAO;MAAQ,MAAM;KAAO,CAAA;KAEjE,KACC,kBAAC,GAAD;MACE,QAAQ,EAAE,iBAAiB,MAAM;MACjC,SAAS,KAAkB,kBAAC,GAAD,CAAsB,CAAA;KAClD,CAAA;KAEF,MAAc,kBAAC,GAAD,EAAa,SAAS,kBAAC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAC7D,EAAO,KAAK,MACX,kBAAC,GAAD;MAEE,MAAM,EAAE;MACR,MAAM,EAAE;MACR,MAAM,eAAe,EAAE,IAAI;MACpB;MACP,GAAI;KACL,GANM,EAAE,GAMR,CACF;IACmB;;EACR,CAAA;CACb,CAAA;AAET,CACF;AACA,EAAa,cAAc"}
+{"version":3,"file":"scatter-chart.js","names":[],"sources":["../../../../src/components/ui/scatter-chart/scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  CartesianGrid,\n  Scatter,\n  ScatterChart as RechartsScatterChart,\n  XAxis,\n  YAxis,\n  ZAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  resolveAnimation,\n  resolveAxisDomain,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  type ChartConfig,\n  type ChartPalette,\n  toCssKey,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. Unlike the\n// other chart types, a scatter has no visual \"mode\" to model as a CVA variant —\n// its shape is fixed (x/y points, optionally sized by z) and its expressiveness\n// comes from the data mapping. So there is no `cva` axis here (matches the\n// skill's \"usually none\"); marker `shape` and bubble sizing are plain props.\n// Each series carries its own point array (points aren't columns of a shared\n// row the way bar/line/area series are), so the API takes a `series` list rather\n// than `dataKeys` over one `data` array.\nexport type ScatterMarkerShape =\n  | 'circle'\n  | 'cross'\n  | 'diamond'\n  | 'square'\n  | 'star'\n  | 'triangle'\n  | 'wye';\n\nexport interface ScatterSeries {\n  /** Series key — must match a `config` entry; drives its `--color-<key>` fill and legend label. */\n  key: string;\n  /** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */\n  data: ReadonlyArray<Record<string, number>>;\n}\n\nexport interface ScatterChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    CartesianChartProps,\n    ChartAnimationProps {\n  /**\n   * The dataviz palette this chart's series are painted from. Series that\n   * state no `color` of their own take a stop of it. See `ChartPalette`.\n   */\n  palette?: ChartPalette;\n  /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */\n  series: ScatterSeries[];\n  /**\n   * Per-series map of `label` / `icon` / `tone`, keyed by `series[].key`\n   * (imported from the shared `Chart` primitives). Turned into `--color-<key>`\n   * custom properties. Series take their colour from the container's `palette`;\n   * each entry maps a key to a `label` and an optional `tone`.\n   */\n  config: ChartConfig;\n  /** Numeric field for the horizontal axis. */\n  xKey: string;\n  /** Numeric field for the vertical axis. */\n  yKey: string;\n  /** Unit suffix appended to X-axis tick values (recharts `unit`). */\n  xUnit?: string;\n  /** Optional numeric field mapped to point size (a bubble chart), via recharts `ZAxis`. */\n  zKey?: string;\n  /** Point-size range `[min, max]` the `zKey` maps into. Ignored when `zKey` is unset (points use recharts' default size). */\n  zRange?: [number, number];\n  /** Marker shape for every point. */\n  shape?: ScatterMarkerShape;\n  showLegend?: boolean;\n}\n\nconst ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(\n  (\n    {\n      className,\n      config,\n      palette = { type: 'diverging', pair: 'teal-violet' },\n      series,\n      xKey,\n      yKey,\n      zKey,\n      zRange = [60, 400],\n      shape = 'circle',\n      xAxisLabel,\n      yAxisLabel,\n      xUnit,\n      yUnit,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      showXAxis = true,\n      showYAxis = true,\n      xTickFormatter,\n      yTickFormatter,\n      xAxisAngle,\n      xAxisInterval,\n      yAxisTickCount,\n      yAxisDomain,\n      gridDashed = true,\n      gridHorizontal,\n      gridVertical,\n      tooltipContent,\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n      ...props\n    },\n    ref\n  ) => {\n    const animation = resolveAnimation({\n      animate,\n      animationDuration,\n      animationBegin,\n      animationEasing,\n    });\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = resolveXAxisTitle(\n      xAxisLabel,\n      'insideBottom',\n      -8\n    );\n    const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n    const yDomain = resolveAxisDomain(yAxisDomain);\n\n    const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={config}\n          palette={palette}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsScatterChart\n            margin={{ top: 16, right: 16, bottom: 16, left: 16 }}\n          >\n            {showGrid && (\n              <CartesianGrid\n                horizontal={gridHorizontal ?? true}\n                vertical={gridVertical ?? false}\n                strokeDasharray={gridDashed ? '3 3' : undefined}\n              />\n            )}\n            <XAxis\n              type=\"number\"\n              dataKey={xKey}\n              name={xKey}\n              unit={xUnit}\n              hide={!showXAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n              height={xAxisHeight}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              dataKey={yKey}\n              name={yKey}\n              unit={yUnit}\n              hide={!showYAxis}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={yTickFormatter}\n              tickCount={yAxisTickCount}\n              domain={yDomain}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {zKey && (\n              <ZAxis type=\"number\" dataKey={zKey} range={zRange} name={zKey} />\n            )}\n            {showTooltip && (\n              <ChartTooltip\n                cursor={{ strokeDasharray: '3 3' }}\n                content={tooltipContent ?? <ChartTooltipContent />}\n              />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {series.map((s) => (\n              <Scatter\n                key={s.key}\n                name={s.key}\n                data={s.data as Record<string, number>[]}\n                fill={`var(--color-${toCssKey(s.key)})`}\n                shape={shape}\n                {...animation}\n              />\n            ))}\n          </RechartsScatterChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nScatterChart.displayName = 'ScatterChart';\n\nexport { ScatterChart };\n"],"mappings":";;;;;;;;AAyFA,IAAM,IAAe,EAAM,YAEvB,EACE,cACA,WACA,aAAU;CAAE,MAAM;CAAa,MAAM;AAAc,GACnD,WACA,SACA,SACA,SACA,YAAS,CAAC,IAAI,GAAG,GACjB,WAAQ,UACR,eACA,eACA,UACA,UACA,cAAW,IACX,kBAAc,IACd,gBAAa,IACb,eAAY,IACZ,eAAY,IACZ,mBACA,mBACA,eACA,kBACA,mBACA,gBACA,gBAAa,IACb,mBACA,iBACA,mBACA,YACA,sBACA,mBACA,oBACA,GAAG,KAEL,MACG;CACH,IAAM,KAAY,EAAiB;EACjC;EACA;EACA;EACA;CACF,CAAC,GAIK,KAAa,EACjB,GACA,gBACA,EACF,GACM,KAAa,EAAkB,CAAU,GAEzC,KAAU,EAAkB,CAAW,GAEvC,KAAc,EAAmB,GAAY,CAAU;CAE7D,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,CAAS;EAAG,GAAI;EAC3C,UAAA,kBAAC,GAAD;GACU;GACC;GACT,WAAU;GAEV,UAAA,kBAAC,GAAD;IACE,QAAQ;KAAE,KAAK;KAAI,OAAO;KAAI,QAAQ;KAAI,MAAM;IAAG;IADrD,UAAA;KAGG,KACC,kBAAC,GAAD;MACE,YAAY,KAAkB;MAC9B,UAAU,KAAgB;MAC1B,iBAAiB,IAAa,QAAQ,KAAA;KACvC,CAAA;KAEH,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,MAAM;MACN,MAAM;MACN,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,YAAY;MACZ,eAAe;MACf,OAAO;MACP,UAAU;MACV,YAAY,EAAyB,CAAU;MAC/C,QAAQ;MACR,OAAO;KACR,CAAA;KACD,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,MAAM;MACN,MAAM;MACN,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,YAAY;MACZ,eAAe;MACf,WAAW;MACX,QAAQ;MACR,OAAO,IAAa,KAAK,KAAA;MACzB,OAAO;KACR,CAAA;KACA,KACC,kBAAC,GAAD;MAAO,MAAK;MAAS,SAAS;MAAM,OAAO;MAAQ,MAAM;KAAO,CAAA;KAEjE,MACC,kBAAC,GAAD;MACE,QAAQ,EAAE,iBAAiB,MAAM;MACjC,SAAS,KAAkB,kBAAC,GAAD,CAAsB,CAAA;KAClD,CAAA;KAEF,KAAc,kBAAC,GAAD,EAAa,SAAS,kBAAC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAC7D,EAAO,KAAK,MACX,kBAAC,GAAD;MAEE,MAAM,EAAE;MACR,MAAM,EAAE;MACR,MAAM,eAAe,EAAS,EAAE,GAAG,EAAE;MAC9B;MACP,GAAI;KACL,GANM,EAAE,GAMR,CACF;IACmB;;EACR,CAAA;CACb,CAAA;AAET,CACF;AACA,EAAa,cAAc"}