@thebuoyant-tsdev/mui-ts-library 3.21.0 → 3.24.1

package/README.de.md

@@ -160,6 +160,10 @@ function BrandColorPicker() {
 }
 ```
 
+| Neu in v3.23.0 | |
+|---|---|
+| **`format`-Prop** | Kontrolliertes Anzeigeformat (`'hex' \| 'rgb' \| 'hsl'`) — der Parent bestimmt das aktive Format, z.B. um den Picker programmatisch per Formular-Reset zurückzusetzen. Mit `onFormatChange` kombinieren. Weglassen für `defaultFormat` (unkontrolliert, bisheriges Verhalten). |
+
 → [Vollständige Dokumentation](user-manuals/ColorPicker.de.md)
 
 ---
@@ -461,20 +465,27 @@ 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**

package/README.md

@@ -160,6 +160,10 @@ function BrandColorPicker() {
 }
 ```
 
+| New in v3.23.0 | |
+|---|---|
+| **`format` prop** | Controlled display format (`'hex' \| 'rgb' \| 'hsl'`) — lets the parent own the active format, e.g. to reset the picker programmatically from a form reset button. Combine with `onFormatChange` to update it. Omit to use `defaultFormat` (uncontrolled, existing behavior). |
+
 → [Full documentation](user-manuals/ColorPicker.md)
 
 ---
@@ -461,20 +465,27 @@ 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**

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;
 }