@thebuoyant-tsdev/mui-ts-library 3.20.0 → 3.22.0

package/README.de.md

@@ -461,20 +461,34 @@ import type {
 
 ## Versionierung & Abwärtskompatibilität
 
-Dieses Projekt folgt [Semantic Versioning](https://semver.org/). In der Praxis bedeutet das:
+Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
 
-- **Patch** (`3.7.0` → `3.7.1`) — nur Bugfixes, jederzeit gefahrlos aktualisierbar.
-- **Minor** (`3.6.0` → `3.7.0`) — neue Features, vollständig abwärtskompatibel.
-- **Major** (`2.x` → `3.0.0`) — Breaking Changes, explizit im [Changelog](#changelog) gekennzeichnet.
+- **Patch** — nur Bugfixes, jederzeit gefahrlos aktualisierbar.
+- **Minor** — neue Features, vollständig abwärtskompatibel.
+- **Major** — Breaking Changes, explizit im [Changelog](#changelog) gekennzeichnet.
 
-**Bisher nur ein Breaking Release:** [`3.0.0`](#300--2026-06-15--breaking-changes) hat `ConfirmDialog` / `ConfirmDialogProvider` / `useConfirm` entfernt und die Signatur von `TagSelection`s `onTagCreate` geändert. Jedes Release seitdem war additiv.
+**Bisher nur ein Breaking Release:** [`3.0.0`](#300--2026-06-15--breaking-changes) hat `ConfirmDialog` / `ConfirmDialogProvider` / `useConfirm` entfernt und die Signatur von `TagSelection`s `onTagCreate` geändert. Jedes andere Release war additiv.
 
-**TypeScript-Hinweis:** Translation-Typen (z.B. `TagSelectionTranslation`, `SqlEditorTranslation`, `GanttTranslations`) bekommen mit der Zeit neue optionale Felder, wenn Features hinzukommen — ein `Partial<...>`-Objekt direkt an die `translation`/`translations`-Prop zu übergeben (das in dieser README durchgängig verwendete Muster) ist immer vorwärtskompatibel. Eine eigenständige Variable, die gegen den vollen benannten Typ deklariert wird, bleibt nur kompatibel, solange neue Felder optional sind. Ein Audit über alle Komponenten fand eine Lücke — `GanttTranslations` hatte 3 nach Release ergänzte required Felder — behoben in `3.9.1` (siehe [Changelog](#391--2026-06-25)). Seit dieser Version ist jeder Translation-Typ optional-sicher.
+**TypeScript-Hinweis:** Translation-Objekte immer als `Partial<...>` inline übergeben — z.B. `translation={{ noData: 'Keine Daten' }}`. Translation-Typen bekommen mit neuen Features optionale Felder hinzu; `Partial<...>` macht den Code automatisch vorwärtskompatibel.
 
 ---
 
 ## Changelog
 
+### [3.22.0] — 2026-07-09
+
+**Hinzugefügt**
+- `RadialStackedBarChart`, `ChordChart`, `SunburstChart`, `CirclePackingChart`: neue `valueFormatter`-Prop für vollständige Kontrolle über numerische Tooltip-Werte — überschreibt die eingebauten `valueDecimalCount`/Separator-Props wenn gesetzt. `RadialStackedBarChart` erhält zusätzlich ein `seriesKey`-Argument für serienabhängige Formatierung. Siehe [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) für Details.
+
+---
+
+### [3.21.0] — 2026-07-09
+
+**Hinzugefügt**
+- `TagSelection`: neue Prop `chipVariant?: 'filled' | 'outlined'` (Standard: `'filled'`) — steuert die MUI-Chip-Variante für alle Tag-Chips im Auswahl-Bereich und im Autocomplete-Dropdown. Consumer mit eigenem Design-System, das `outlined`-Chips bevorzugt, müssen keine Styles mehr manuell überschreiben. Siehe [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) für Details.
+
+---
+
 ### [3.20.0] — 2026-07-09
 
 **Hinzugefügt**

package/README.md

@@ -461,20 +461,34 @@ import type {
 
 ## Versioning & Compatibility
 
-This project follows [Semantic Versioning](https://semver.org/). In practice:
+This project follows [Semantic Versioning](https://semver.org/):
 
-- **Patch** (`3.7.0` → `3.7.1`) — bug fixes only, always safe to upgrade.
-- **Minor** (`3.6.0` → `3.7.0`) — new features, fully backwards compatible.
-- **Major** (`2.x` → `3.0.0`) — breaking changes, called out explicitly in the [Changelog](#changelog).
+- **Patch** — bug fixes only, always safe to upgrade.
+- **Minor** — new features, fully backwards compatible.
+- **Major** — breaking changes, called out explicitly in the [Changelog](#changelog).
 
-**Only one breaking release to date:** [`3.0.0`](#300--2026-06-15--breaking-changes) removed `ConfirmDialog` / `ConfirmDialogProvider` / `useConfirm` and changed `TagSelection`'s `onTagCreate` signature. Every other release since has been additive.
+**Only one breaking release to date:** [`3.0.0`](#300--2026-06-15--breaking-changes) removed `ConfirmDialog` / `ConfirmDialogProvider` / `useConfirm` and changed `TagSelection`'s `onTagCreate` signature. Every other release has been additive.
 
-**TypeScript note:** translation types (e.g. `TagSelectionTranslation`, `SqlEditorTranslation`, `GanttTranslations`) gain new optional fields over time as features are added — passing a `Partial<...>` object straight to the `translation`/`translations` prop (the pattern used throughout this README) is always forward-compatible. Declaring a standalone variable typed against the full named type only stays compatible if new fields are optional. An audit across all components turned up one gap — `GanttTranslations` had 3 required fields added after release — fixed in `3.9.1` (see [Changelog](#391--2026-06-25)). Every translation type is optional-safe as of that version.
+**TypeScript note:** Always pass translation objects as `Partial<...>` inline — e.g. `translation={{ noData: 'No data' }}`. Translation types gain new optional fields as features are added; using `Partial<...>` keeps your code forward-compatible automatically.
 
 ---
 
 ## Changelog
 
+### [3.22.0] — 2026-07-09
+
+**Added**
+- `RadialStackedBarChart`, `ChordChart`, `SunburstChart`, `CirclePackingChart`: new `valueFormatter` prop for full control over numeric values in tooltips — replaces the built-in `valueDecimalCount`/separator props when set. `RadialStackedBarChart` additionally receives a `seriesKey` argument for per-series formatting. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
+### [3.21.0] — 2026-07-09
+
+**Added**
+- `TagSelection`: new `chipVariant?: 'filled' | 'outlined'` prop (default: `'filled'`) — controls the MUI Chip variant for all tag chips in the selected-tags area and in the autocomplete dropdown. Consumers with a design system that prefers `outlined` chips no longer need to override styles manually. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
 ### [3.20.0] — 2026-07-09
 
 **Added**

package/dist/components/chord-chart/ChordChart.d.ts

@@ -1,5 +1,5 @@
 import { type ChordChartProps } from "./ChordChart.types";
-export declare function ChordChart({ data, size, innerRadius, ringThickness, padAngle, ribbonPadAngle, sortSubgroups, sortChords, chartColors, groupColorConfigs, showGroupLabels, labelOffset, ribbonOpacity, ribbonBlendMode, directed, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, onGroupClick, onChordClick, zoomable, disabled, translation, }: ChordChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChordChart({ data, size, innerRadius, ringThickness, padAngle, ribbonPadAngle, sortSubgroups, sortChords, chartColors, groupColorConfigs, showGroupLabels, labelOffset, ribbonOpacity, ribbonBlendMode, directed, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, valueFormatter, onGroupClick, onChordClick, zoomable, disabled, translation, }: ChordChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ChordChart {
     var displayName: string;
 }

package/dist/components/chord-chart/ChordChart.js

@@ -4,12 +4,12 @@ import { Box as o, Tooltip as s, Typography as c, useTheme as ee } from "@mui/ma
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import * as d from "d3";
 //#region src/components/chord-chart/ChordChart.tsx
-function te(e, t = 0, n = ".", r = ",") {
+function f(e, t = 0, n = ".", r = ",") {
 	if (!isFinite(e)) return String(e);
 	let [i, a] = e.toFixed(Math.max(0, t)).split("."), o = i.replace(/\B(?=(\d{3})+(?!\d))/g, r);
 	return a ? `${o}${n}${a}` : o;
 }
-function ne({ name: e, valueOut: t, valueIn: n, fmt: r }) {
+function te({ name: e, valueOut: t, valueIn: n, fmt: r }) {
 	return /* @__PURE__ */ u(o, {
 		sx: { py: .25 },
 		children: [
@@ -40,7 +40,7 @@ function ne({ name: e, valueOut: t, valueIn: n, fmt: r }) {
 		]
 	});
 }
-function f({ sourceName: e, targetName: t, sourceValue: n, targetValue: r, directed: i, fmt: a }) {
+function ne({ sourceName: e, targetName: t, sourceValue: n, targetValue: r, directed: i, fmt: a }) {
 	return /* @__PURE__ */ u(o, {
 		sx: { py: .25 },
 		children: [
@@ -82,21 +82,22 @@ function f({ sourceName: e, targetName: t, sourceValue: n, targetValue: r, direc
 		]
 	});
 }
-function p({ data: c, size: p = 500, innerRadius: m, ringThickness: h = 20, padAngle: re, ribbonPadAngle: g, sortSubgroups: _ = "descending", sortChords: v = "descending", chartColors: y, groupColorConfigs: b, showGroupLabels: ie = !0, labelOffset: x = 8, ribbonOpacity: S = .75, ribbonBlendMode: C, directed: w = !0, valueDecimalCount: T = 0, valueDecimalSeparator: E = ".", valueThousandsSeparator: D = ",", onGroupClick: O, onChordClick: k, zoomable: A = !1, disabled: j = !1, translation: ae }) {
-	let M = ee(), oe = {
+function p({ data: c, size: p = 500, innerRadius: m, ringThickness: h = 20, padAngle: g, ribbonPadAngle: _, sortSubgroups: v = "descending", sortChords: y = "descending", chartColors: b, groupColorConfigs: x, showGroupLabels: re = !0, labelOffset: S = 8, ribbonOpacity: C = .75, ribbonBlendMode: w, directed: T = !0, valueDecimalCount: E = 0, valueDecimalSeparator: D = ".", valueThousandsSeparator: O = ",", valueFormatter: k, onGroupClick: ie, onChordClick: ae, zoomable: A = !1, disabled: j = !1, translation: oe }) {
+	let M = ee(), se = {
 		...e,
-		...ae
-	}, se = c.length === 0, ce = C ?? (M.palette.mode === "dark" ? "normal" : "multiply"), le = [
+		...oe
+	}, ce = c.length === 0, le = w ?? (M.palette.mode === "dark" ? "normal" : "multiply"), ue = [
 		M.palette.primary.main,
 		M.palette.secondary.main,
 		M.palette.error.main,
 		M.palette.warning.main,
 		M.palette.success.main,
 		M.palette.info.main
-	], N = y && y.length > 0 ? y : le, ue = m ?? Math.min(p, p) * .5 - 90, P = Math.max(10, ue), F = P + Math.max(1, h), I = re ?? 10 / P, L = g ?? 1 / P, R = t((e) => te(e, T, E, D), [
-		T,
+	], N = b && b.length > 0 ? b : ue, de = m ?? Math.min(p, p) * .5 - 90, P = Math.max(10, de), F = P + Math.max(1, h), I = g ?? 10 / P, L = _ ?? 1 / P, R = t((e) => k ? k(e) : f(e, E, D, O), [
+		k,
 		E,
-		D
+		D,
+		O
 	]), { names: z, matrix: B } = r(() => {
 		let e = d.sort(d.union(c.map((e) => e.source), c.map((e) => e.target))), t = new Map(e.map((e, t) => [e, t])), n = Array.from({ length: e.length }, () => Array(e.length).fill(0));
 		for (let { source: e, target: r, value: i } of c) {
@@ -108,19 +109,19 @@ function p({ data: c, size: p = 500, innerRadius: m, ringThickness: h = 20, padA
 			matrix: n
 		};
 	}, [c]), V = r(() => {
-		let e = (w ? d.chordDirected() : d.chord()).padAngle(I);
-		return _ === "ascending" && (e = e.sortSubgroups(d.ascending)), _ === "descending" && (e = e.sortSubgroups(d.descending)), v === "ascending" && (e = e.sortChords(d.ascending)), v === "descending" && (e = e.sortChords(d.descending)), e(B);
+		let e = (T ? d.chordDirected() : d.chord()).padAngle(I);
+		return v === "ascending" && (e = e.sortSubgroups(d.ascending)), v === "descending" && (e = e.sortSubgroups(d.descending)), y === "ascending" && (e = e.sortChords(d.ascending)), y === "descending" && (e = e.sortChords(d.descending)), e(B);
 	}, [
 		B,
 		I,
-		w,
-		_,
-		v
-	]), H = r(() => d.arc().innerRadius(P).outerRadius(F), [P, F]), U = r(() => (w ? d.ribbonArrow() : d.ribbon()).radius(P - 1).padAngle(L), [
+		T,
+		v,
+		y
+	]), fe = r(() => d.arc().innerRadius(P).outerRadius(F), [P, F]), H = r(() => (T ? d.ribbonArrow() : d.ribbon()).radius(P - 1).padAngle(L), [
 		P,
 		L,
-		w
-	]), de = t((e) => U({
+		T
+	]), pe = t((e) => H({
 		source: {
 			startAngle: e.source.startAngle,
 			endAngle: e.source.endAngle,
@@ -131,24 +132,24 @@ function p({ data: c, size: p = 500, innerRadius: m, ringThickness: h = 20, padA
 			endAngle: e.target.endAngle,
 			radius: P - 1
 		}
-	}) ?? "", [U, P]), W = r(() => d.scaleOrdinal().domain(d.range(z.length)).range(N.length >= z.length ? N : [...Array(Math.ceil(z.length / N.length))].flatMap(() => N).slice(0, z.length)), [N, z.length]), G = t((e) => b?.[z[e]]?.fill ?? W(e), [
-		b,
+	}) ?? "", [H, P]), U = r(() => d.scaleOrdinal().domain(d.range(z.length)).range(N.length >= z.length ? N : [...Array(Math.ceil(z.length / N.length))].flatMap(() => N).slice(0, z.length)), [N, z.length]), W = t((e) => x?.[z[e]]?.fill ?? U(e), [
+		x,
 		z,
-		W
-	]), K = i(null), [q, J] = a(`-${p / 2} -${p / 2} ${p} ${p}`), [Y, X] = a(1), fe = r(() => {
-		if (Y === 1) return q;
-		let [e, t, n, r] = q.split(" ").map(Number), i = n / Y, a = r / Y;
+		U
+	]), G = i(null), [K, q] = a(`-${p / 2} -${p / 2} ${p} ${p}`), [J, Y] = a(1), me = r(() => {
+		if (J === 1) return K;
+		let [e, t, n, r] = K.split(" ").map(Number), i = n / J, a = r / J;
 		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
-	}, [q, Y]);
+	}, [K, J]);
 	n(() => {
-		let e = K.current;
+		let e = G.current;
 		if (!e) return;
 		let t = requestAnimationFrame(() => {
 			try {
 				let t = e.getBBox();
-				J(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
+				q(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
 			} catch {
-				J(`-${p / 2} -${p / 2} ${p} ${p}`);
+				q(`-${p / 2} -${p / 2} ${p} ${p}`);
 			}
 		});
 		return () => cancelAnimationFrame(t);
@@ -159,16 +160,16 @@ function p({ data: c, size: p = 500, innerRadius: m, ringThickness: h = 20, padA
 		z.length,
 		V
 	]);
-	let [Z, Q] = a(null), pe = t((e) => ({
+	let [X, Z] = a(null), he = t((e) => ({
 		name: z[e.index],
 		index: e.index,
-		valueOut: d.sum(V, (t) => (t.source.index === e.index ? t.source.value : 0) + (!w && t.target.index === e.index ? t.target.value : 0)),
-		valueIn: d.sum(V, (t) => (t.target.index === e.index ? t.source.value : 0) + (!w && t.source.index === e.index ? t.target.value : 0))
+		valueOut: d.sum(V, (t) => (t.source.index === e.index ? t.source.value : 0) + (!T && t.target.index === e.index ? t.target.value : 0)),
+		valueIn: d.sum(V, (t) => (t.target.index === e.index ? t.source.value : 0) + (!T && t.source.index === e.index ? t.target.value : 0))
 	}), [
 		z,
 		V,
-		w
-	]), me = t((e) => ({
+		T
+	]), ge = t((e) => ({
 		source: {
 			name: z[e.source.index],
 			index: e.source.index,
@@ -179,19 +180,19 @@ function p({ data: c, size: p = 500, innerRadius: m, ringThickness: h = 20, padA
 			index: e.target.index,
 			value: e.target.value
 		}
-	}), [z]), he = (e) => {
+	}), [z]), _e = (e) => {
 		let t = (e.startAngle + e.endAngle) / 2, n = t * 180 / Math.PI - 90, r = t > Math.PI ? " rotate(180)" : "";
-		return `rotate(${n}) translate(${F + x})${r}`;
-	}, ge = (e) => (e.startAngle + e.endAngle) / 2 > Math.PI ? "end" : "start", _e = t((e) => {
+		return `rotate(${n}) translate(${F + S})${r}`;
+	}, Q = (e) => (e.startAngle + e.endAngle) / 2 > Math.PI ? "end" : "start", ve = t((e) => {
 		if (!A || j || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-		X((e) => Math.max(.25, Math.min(8, e * t)));
+		Y((e) => Math.max(.25, Math.min(8, e * t)));
 	}, [A, j]);
 	n(() => {
 		if (!A) return;
 		let e = (e) => {
-			e.key === "Escape" && X(1);
+			e.key === "Escape" && Y(1);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [A]);
@@ -201,7 +202,7 @@ function p({ data: c, size: p = 500, innerRadius: m, ringThickness: h = 20, padA
 		enterNextDelay: 0,
 		disableHoverListener: j,
 		slotProps: { tooltip: { sx: { maxWidth: 240 } } }
-	}, ve = M.palette.text.primary, ye = M.typography.fontFamily;
+	}, ye = M.palette.text.primary, be = M.typography.fontFamily;
 	return /* @__PURE__ */ l(o, {
 		sx: {
 			display: "inline-flex",
@@ -212,29 +213,29 @@ function p({ data: c, size: p = 500, innerRadius: m, ringThickness: h = 20, padA
 		children: /* @__PURE__ */ l("svg", {
 			width: p,
 			height: p,
-			viewBox: fe,
-			onWheel: _e,
+			viewBox: me,
+			onWheel: ve,
 			style: {
-				fontFamily: ye ?? "sans-serif",
-				overflow: A && Y > 1 ? "hidden" : "visible"
+				fontFamily: be ?? "sans-serif",
+				overflow: A && J > 1 ? "hidden" : "visible"
 			},
 			role: "img",
 			"aria-label": "Chord chart",
 			children: /* @__PURE__ */ u("g", {
-				ref: K,
+				ref: G,
 				children: [
-					se && /* @__PURE__ */ l("text", {
+					ce && /* @__PURE__ */ l("text", {
 						textAnchor: "middle",
 						dy: "0.35em",
 						fontSize: 13,
 						fill: M.palette.text.secondary,
-						children: oe.noData
+						children: se.noData
 					}),
 					/* @__PURE__ */ l("g", { children: V.groups.map((e) => {
-						let t = pe(e), n = Z === e.index, r = Z !== null && !n;
+						let t = he(e), n = X === e.index, r = X !== null && !n;
 						return /* @__PURE__ */ l(s, {
 							...$,
-							title: /* @__PURE__ */ l(ne, {
+							title: /* @__PURE__ */ l(te, {
 								name: t.name,
 								valueOut: t.valueOut,
 								valueIn: t.valueIn,
@@ -242,21 +243,21 @@ function p({ data: c, size: p = 500, innerRadius: m, ringThickness: h = 20, padA
 							}),
 							children: /* @__PURE__ */ u("g", {
 								style: { cursor: j ? "not-allowed" : "pointer" },
-								onMouseEnter: () => !j && Q(e.index),
-								onMouseLeave: () => Q(null),
-								onClick: (e) => !j && O?.(t, e),
+								onMouseEnter: () => !j && Z(e.index),
+								onMouseLeave: () => Z(null),
+								onClick: (e) => !j && ie?.(t, e),
 								children: [/* @__PURE__ */ l("path", {
-									d: H(e) || "",
-									fill: G(e.index),
+									d: fe(e) || "",
+									fill: W(e.index),
 									stroke: M.palette.divider,
 									opacity: r ? .35 : 1,
 									style: { transition: "opacity 0.15s" }
-								}), ie && /* @__PURE__ */ l("text", {
+								}), re && /* @__PURE__ */ l("text", {
 									dy: "0.35em",
 									fontSize: 11,
-									fill: ve,
-									transform: he(e),
-									textAnchor: ge(e),
+									fill: ye,
+									transform: _e(e),
+									textAnchor: Q(e),
 									pointerEvents: "none",
 									children: z[e.index]
 								})]
@@ -264,30 +265,30 @@ function p({ data: c, size: p = 500, innerRadius: m, ringThickness: h = 20, padA
 						}, `grp-tt-${e.index}`);
 					}) }),
 					/* @__PURE__ */ l("g", {
-						fillOpacity: S,
-						style: { mixBlendMode: ce },
+						fillOpacity: C,
+						style: { mixBlendMode: le },
 						children: V.map((e, t) => {
-							let n = me(e), r = Z === null || e.source.index === Z || e.target.index === Z;
+							let n = ge(e), r = X === null || e.source.index === X || e.target.index === X;
 							return /* @__PURE__ */ l(s, {
 								...$,
-								title: /* @__PURE__ */ l(f, {
+								title: /* @__PURE__ */ l(ne, {
 									sourceName: n.source.name,
 									targetName: n.target.name,
 									sourceValue: n.source.value,
 									targetValue: n.target.value,
-									directed: w,
+									directed: T,
 									fmt: R
 								}),
 								children: /* @__PURE__ */ l("path", {
-									d: de(e),
-									fill: G(e.target.index),
+									d: pe(e),
+									fill: W(e.target.index),
 									stroke: "none",
 									opacity: r ? 1 : .12,
 									style: {
 										cursor: j ? "not-allowed" : "pointer",
 										transition: "opacity 0.15s"
 									},
-									onClick: (e) => !j && k?.(n, e)
+									onClick: (e) => !j && ae?.(n, e)
 								})
 							}, `chord-tt-${t}`);
 						})

package/dist/components/chord-chart/ChordChart.types.d.ts

@@ -82,6 +82,13 @@ export type ChordChartProps = {
     valueDecimalSeparator?: string;
     /** Thousands separator (default: ',') */
     valueThousandsSeparator?: string;
+    /**
+     * Custom formatter for all numeric values shown in tooltips. Overrides
+     * `valueDecimalCount`, `valueDecimalSeparator`, and `valueThousandsSeparator`.
+     * Example: `(v) => \`${v.toLocaleString('de-DE')} kg\``
+     * @since 3.22.0
+     */
+    valueFormatter?: (value: number) => string;
     /** Fired on click of a group arc */
     onGroupClick?: (info: ChordGroupInfo, event: React.MouseEvent<SVGGElement>) => void;
     /** Fired on click of a ribbon */

package/dist/components/circle-packing-chart/CirclePackingChart.d.ts

@@ -1,5 +1,5 @@
 import { type CirclePackingChartProps } from "./CirclePackingChart.types";
-export declare function CirclePackingChart({ data, size, padding, sortBy, showLabels, showAllLabels, labelFontSize, innerLabelFontSize, labelColor, chartColors, depthColorStart, depthColorEnd, background, duration, zoomable, disabled, onCircleClick, onZoomChange, translation, }: CirclePackingChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function CirclePackingChart({ data, size, padding, sortBy, showLabels, showAllLabels, labelFontSize, innerLabelFontSize, labelColor, chartColors, depthColorStart, depthColorEnd, background, duration, zoomable, disabled, onCircleClick, onZoomChange, valueFormatter, translation, }: CirclePackingChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace CirclePackingChart {
     var displayName: string;
 }