@thebuoyant-tsdev/mui-ts-library 3.29.2 → 3.30.0

package/README.de.md

@@ -16,13 +16,14 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 
 ## Komponenten
 
-13 produktionsreife Komponenten in drei Kategorien. Jede verlinkt zu einer interaktiven Live-Demo und einem vollständigen Manual mit allen Props, Typen und Mustern.
+15 produktionsreife Komponenten in drei Kategorien. Jede verlinkt zu einer interaktiven Live-Demo und einem vollständigen Manual mit allen Props, Typen und Mustern.
 
 ### Interaktive UI
 
 | Komponente | Wofür | Ausprobieren |
 |---|---|---|
 | [`GanttChart`](#ganttchart) | Drag-and-Drop-Projekt-Timelines mit Meilensteinen, Abhängigkeiten und CSV-Export | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-ganttchart--default) · [Docs](user-manuals/GanttChart.de.md) |
+| [`KanbanBoard`](#kanbanboard) | Drag-and-Drop-Kanban-Board mit eingebauten CRUD-Dialogen, WIP-Limits und i18n | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-kanbanboard--default) · [Docs](user-manuals/KanbanBoard.de.md) |
 | [`DateRangePicker`](#daterangepicker) | Start- und Enddatum in einem Inline-Picker — schließt die MUI X Pro-Lücke, kostenlos und ohne zusätzliche Abhängigkeiten | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-daterangepicker--default) · [Docs](user-manuals/DateRangePicker.de.md) |
 | [`TagSelection`](#tagselection) | Multi-Tag-Autocomplete mit freier Tag-Erstellung und Suchergebnis-Highlighting | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-tagselection--default) · [Docs](user-manuals/TagSelection.de.md) |
 | [`PasswordStrengthMeter`](#passwordstrengthmeter) | Echtzeit-Stärke-Feedback mit eingebautem sicheren Passwort-Generator | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-passwordstrengthmeter--default) · [Docs](user-manuals/PasswordStrengthMeter.de.md) |
@@ -101,6 +102,43 @@ const tasks: GanttTask[] = [
 
 ---
 
+### KanbanBoard
+
+Ein Drag-and-Drop-Kanban-Board mit eingebauten Hinzufügen-/Bearbeiten-/Löschen-Dialogen, WIP-Limits und vollständiger i18n. Ideal für Task-Management-Dashboards, Sprint-Boards oder jeden Workflow, bei dem Nutzer Aufgaben zwischen Statusspalten verschieben sollen — mit Kartenfarben, Zuständige-Person-Chips, Fälligkeitsdatum-Chips und konfigurierbarer Chip-Darstellung.
+
+```tsx
+import { KanbanBoard } from '@thebuoyant-tsdev/mui-ts-library';
+import type { KanbanColumn, KanbanTask } from '@thebuoyant-tsdev/mui-ts-library';
+import { useState } from 'react';
+
+const columns: KanbanColumn[] = [
+  { id: 'todo',        label: 'Zu erledigen', color: '#9e9e9e' },
+  { id: 'in-progress', label: 'In Arbeit',    color: '#2196f3' },
+  { id: 'done',        label: 'Erledigt',     color: '#4caf50' },
+];
+
+function App() {
+  const [tasks, setTasks] = useState<KanbanTask[]>([
+    { id: '1', title: 'Projekt aufsetzen',  status: 'todo',        assignee: 'Alice' },
+    { id: '2', title: 'Feature umsetzen',   status: 'in-progress', assignee: 'Bob', dueDate: new Date('2026-08-01') },
+    { id: '3', title: 'Tests schreiben',    status: 'done' },
+  ]);
+
+  return (
+    <KanbanBoard
+      columns={columns}
+      tasks={tasks}
+      onTasksChange={setTasks}
+      height={500}
+    />
+  );
+}
+```
+
+→ [Vollständige Dokumentation](user-manuals/KanbanBoard.de.md)
+
+---
+
 ### DateRangePicker
 
 Start- und Enddatum in einem einzigen Inline-Picker — kein MUI X Pro-Lizenz erforderlich. Entwickelt für Formulare, Filter und Buchungsflows. Unterstützt Controlled/Uncontrolled-Modus, `minDate`/`maxDate`, `required`, Inline-Validierung und vollständige i18n. `onChange` gibt für jedes Datum sowohl ein `Date`-Objekt als auch einen ISO-String zurück.
@@ -458,6 +496,9 @@ import type {
   // GanttChart
   GanttTask, GanttTranslations, GanttTheme, GanttToolbarConfig,
 
+  // KanbanBoard
+  KanbanTask, KanbanColumn, KanbanBoardProps, KanbanBoardTranslation,
+
   // DateRangePicker
   DateRange, DateRangeEntry, DateRangeInput, DateRangePickerProps, DateRangePickerTranslation,
 
@@ -514,6 +555,13 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.30.0] — 2026-07-17
+
+**Hinzugefügt**
+- **KanbanBoard** — neue Drag-and-Drop-Kanban-Board-Komponente mit eingebauten CRUD-Dialogen, WIP-Limits, Kartenfarben, Zuständige-Person- und Fälligkeitsdatum-Chips, `chipVariant`-Prop, vollständiger i18n und CSS-Klassen-API (`kanbanBoardClasses`). Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
+
+---
+
 ### [3.29.2] — 2026-07-16
 
 **Behoben**

package/README.md

@@ -16,13 +16,14 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 
 ## Components
 
-13 production-ready components across three categories. Each links to a live, interactive demo and a full manual covering every prop, type, and pattern.
+15 production-ready components across three categories. Each links to a live, interactive demo and a full manual covering every prop, type, and pattern.
 
 ### Interactive UI
 
 | Component | What it's for | Try it |
 |---|---|---|
 | [`GanttChart`](#ganttchart) | Drag-and-drop project timelines with milestones, dependencies, and CSV export | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-ganttchart--default) · [Docs](user-manuals/GanttChart.md) |
+| [`KanbanBoard`](#kanbanboard) | Drag-and-drop Kanban board with built-in CRUD dialogs, WIP limits, and i18n | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-kanbanboard--default) · [Docs](user-manuals/KanbanBoard.md) |
 | [`DateRangePicker`](#daterangepicker) | Start + end date in one inline picker — fills the MUI X Pro gap, free and dependency-free | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-daterangepicker--default) · [Docs](user-manuals/DateRangePicker.md) |
 | [`TagSelection`](#tagselection) | Multi-tag autocomplete with free-form tag creation and search highlighting | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-tagselection--default) · [Docs](user-manuals/TagSelection.md) |
 | [`PasswordStrengthMeter`](#passwordstrengthmeter) | Real-time strength feedback with a built-in secure password generator | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-passwordstrengthmeter--default) · [Docs](user-manuals/PasswordStrengthMeter.md) |
@@ -101,6 +102,43 @@ const tasks: GanttTask[] = [
 
 ---
 
+### KanbanBoard
+
+A drag-and-drop Kanban board with built-in Add / Edit / Delete dialogs, WIP limits, and full i18n. Use it for task management dashboards, sprint boards, or any workflow where users move work items between status columns — with card colors, assignee chips, due-date chips, and a configurable chip style.
+
+```tsx
+import { KanbanBoard } from '@thebuoyant-tsdev/mui-ts-library';
+import type { KanbanColumn, KanbanTask } from '@thebuoyant-tsdev/mui-ts-library';
+import { useState } from 'react';
+
+const columns: KanbanColumn[] = [
+  { id: 'todo',        label: 'To Do',       color: '#9e9e9e' },
+  { id: 'in-progress', label: 'In Progress', color: '#2196f3' },
+  { id: 'done',        label: 'Done',        color: '#4caf50' },
+];
+
+function App() {
+  const [tasks, setTasks] = useState<KanbanTask[]>([
+    { id: '1', title: 'Set up project',    status: 'todo',        assignee: 'Alice' },
+    { id: '2', title: 'Implement feature', status: 'in-progress', assignee: 'Bob', dueDate: new Date('2026-08-01') },
+    { id: '3', title: 'Write tests',       status: 'done' },
+  ]);
+
+  return (
+    <KanbanBoard
+      columns={columns}
+      tasks={tasks}
+      onTasksChange={setTasks}
+      height={500}
+    />
+  );
+}
+```
+
+→ [Full documentation](user-manuals/KanbanBoard.md)
+
+---
+
 ### DateRangePicker
 
 Start and end date in a single inline picker — no MUI X Pro license required. Built for forms, filters, and booking flows. Supports controlled/uncontrolled mode, `minDate`/`maxDate`, `required`, inline validation, and full i18n. `onChange` returns both a `Date` object and an ISO string for each date.
@@ -458,6 +496,9 @@ import type {
   // GanttChart
   GanttTask, GanttTranslations, GanttTheme, GanttToolbarConfig,
 
+  // KanbanBoard
+  KanbanTask, KanbanColumn, KanbanBoardProps, KanbanBoardTranslation,
+
   // DateRangePicker
   DateRange, DateRangeEntry, DateRangeInput, DateRangePickerProps, DateRangePickerTranslation,
 
@@ -514,6 +555,13 @@ This project follows [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.30.0] — 2026-07-17
+
+**Added**
+- **KanbanBoard** — new drag-and-drop Kanban board component with built-in Add / Edit / Delete dialogs, WIP limits, card colors, assignee and due-date chips, `chipVariant` prop, full i18n, and a CSS classes API (`kanbanBoardClasses`). See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
 ### [3.29.2] — 2026-07-16
 
 **Fixed**

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

@@ -1,19 +1,19 @@
 import { DEFAULT_CHORD_CHART_TRANSLATION as e } from "./ChordChart.types.js";
-import { useCallback as t, useLayoutEffect as n, useMemo as r, useRef as i, useState as a } from "react";
-import { Box as o, Tooltip as s, Typography as c, useTheme as l } from "@mui/material";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import * as f from "d3";
+import { Box as t, Tooltip as n, Typography as r, useTheme as i } from "@mui/material";
+import { useCallback as a, useLayoutEffect as o, useMemo as s, useRef as ee, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import * as d from "d3";
 //#region src/components/chord-chart/ChordChart.tsx
-function p(e, t = 0, n = ".", r = ",") {
+function te(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 m({ name: e, valueOut: t, valueIn: n, fmt: r }) {
-	return /* @__PURE__ */ d(o, {
+function f({ name: e, valueOut: n, valueIn: i, fmt: a }) {
+	return /* @__PURE__ */ u(t, {
 		sx: { py: .25 },
 		children: [
-			/* @__PURE__ */ u(c, {
+			/* @__PURE__ */ l(r, {
 				variant: "caption",
 				sx: {
 					fontWeight: "bold",
@@ -21,30 +21,30 @@ function m({ name: e, valueOut: t, valueIn: n, fmt: r }) {
 				},
 				children: e
 			}),
-			/* @__PURE__ */ d(c, {
+			/* @__PURE__ */ u(r, {
 				variant: "caption",
 				sx: {
 					display: "block",
 					opacity: .85
 				},
-				children: [r(t), " outgoing →"]
+				children: [a(n), " outgoing →"]
 			}),
-			/* @__PURE__ */ d(c, {
+			/* @__PURE__ */ u(r, {
 				variant: "caption",
 				sx: {
 					display: "block",
 					opacity: .85
 				},
-				children: [r(n), " incoming ←"]
+				children: [a(i), " incoming ←"]
 			})
 		]
 	});
 }
-function h({ sourceName: e, targetName: t, sourceValue: n, targetValue: r, directed: i, fmt: a }) {
-	return /* @__PURE__ */ d(o, {
+function p({ sourceName: e, targetName: n, sourceValue: i, targetValue: a, directed: o, fmt: s }) {
+	return /* @__PURE__ */ u(t, {
 		sx: { py: .25 },
 		children: [
-			/* @__PURE__ */ d(c, {
+			/* @__PURE__ */ u(r, {
 				variant: "caption",
 				sx: {
 					fontWeight: "bold",
@@ -53,18 +53,18 @@ function h({ sourceName: e, targetName: t, sourceValue: n, targetValue: r, direc
 				children: [
 					e,
 					" → ",
-					t
+					n
 				]
 			}),
-			/* @__PURE__ */ u(c, {
+			/* @__PURE__ */ l(r, {
 				variant: "caption",
 				sx: {
 					display: "block",
 					opacity: .85
 				},
-				children: a(n)
+				children: s(i)
 			}),
-			i && r > 0 && r !== n && /* @__PURE__ */ d(c, {
+			o && a > 0 && a !== i && /* @__PURE__ */ u(r, {
 				variant: "caption",
 				sx: {
 					display: "block",
@@ -72,56 +72,56 @@ function h({ sourceName: e, targetName: t, sourceValue: n, targetValue: r, direc
 					mt: .25
 				},
 				children: [
-					t,
+					n,
 					" → ",
 					e,
 					": ",
-					a(r)
+					s(a)
 				]
 			})
 		]
 	});
 }
-function g({ data: c, size: g = 500, innerRadius: _, ringThickness: ee = 20, padAngle: te, ribbonPadAngle: ne, sortSubgroups: v = "descending", sortChords: y = "descending", chartColors: b, groupColorConfigs: x, showGroupLabels: re = !0, labelOffset: ie = 8, ribbonOpacity: ae = .75, ribbonBlendMode: oe, directed: S = !0, valueDecimalCount: C = 0, valueDecimalSeparator: w = ".", valueThousandsSeparator: T = ",", valueFormatter: E, onGroupClick: D, onGroupHover: O, onChordClick: k, onChordHover: A, zoomable: j = !1, disabled: M = !1, translation: se }) {
-	let N = l(), ce = {
+function m({ data: r, size: m = 500, innerRadius: h, ringThickness: g = 20, padAngle: ne, ribbonPadAngle: re, sortSubgroups: _ = "descending", sortChords: v = "descending", chartColors: y, groupColorConfigs: b, showGroupLabels: ie = !0, labelOffset: ae = 8, ribbonOpacity: oe = .75, ribbonBlendMode: se, directed: x = !0, valueDecimalCount: S = 0, valueDecimalSeparator: C = ".", valueThousandsSeparator: w = ",", valueFormatter: T, onGroupClick: E, onGroupHover: D, onChordClick: O, onChordHover: k, zoomable: A = !1, disabled: j = !1, translation: ce }) {
+	let M = i(), le = {
 		...e,
-		...se
-	}, le = c.length === 0, ue = oe ?? (N.palette.mode === "dark" ? "normal" : "multiply"), de = [
-		N.palette.primary.main,
-		N.palette.secondary.main,
-		N.palette.error.main,
-		N.palette.warning.main,
-		N.palette.success.main,
-		N.palette.info.main
-	], P = b && b.length > 0 ? b : de, fe = _ ?? Math.min(g, g) * .5 - 90, F = Math.max(10, fe), I = F + Math.max(1, ee), L = te ?? 10 / F, R = ne ?? 1 / F, z = t((e) => E ? E(e) : p(e, C, w, T), [
-		E,
+		...ce
+	}, ue = r.length === 0, de = se ?? (M.palette.mode === "dark" ? "normal" : "multiply"), fe = [
+		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 : fe, P = h ?? Math.min(m, m) * .5 - 90, F = Math.max(10, P), I = F + Math.max(1, g), L = ne ?? 10 / F, R = re ?? 1 / F, z = a((e) => T ? T(e) : te(e, S, C, w), [
+		T,
+		S,
 		C,
-		w,
-		T
-	]), { names: B, matrix: V } = r(() => {
-		let e = f.sort(f.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) {
-			let a = t.get(e), o = t.get(r);
-			a == null || o == null || (n[a][o] += i);
+		w
+	]), { names: B, matrix: V } = s(() => {
+		let e = d.sort(d.union(r.map((e) => e.source), r.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: i, value: a } of r) {
+			let r = t.get(e), o = t.get(i);
+			r == null || o == null || (n[r][o] += a);
 		}
 		return {
 			names: e,
 			matrix: n
 		};
-	}, [c]), H = r(() => {
-		let e = (S ? f.chordDirected() : f.chord()).padAngle(L);
-		return v === "ascending" && (e = e.sortSubgroups(f.ascending)), v === "descending" && (e = e.sortSubgroups(f.descending)), y === "ascending" && (e = e.sortChords(f.ascending)), y === "descending" && (e = e.sortChords(f.descending)), e(V);
+	}, [r]), H = s(() => {
+		let e = (x ? d.chordDirected() : d.chord()).padAngle(L);
+		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(V);
 	}, [
 		V,
 		L,
-		S,
-		v,
-		y
-	]), pe = r(() => f.arc().innerRadius(F).outerRadius(I), [F, I]), U = r(() => (S ? f.ribbonArrow() : f.ribbon()).radius(F - 1).padAngle(R), [
+		x,
+		_,
+		v
+	]), pe = s(() => d.arc().innerRadius(F).outerRadius(I), [F, I]), U = s(() => (x ? d.ribbonArrow() : d.ribbon()).radius(F - 1).padAngle(R), [
 		F,
 		R,
-		S
-	]), me = t((e) => U({
+		x
+	]), me = a((e) => U({
 		source: {
 			startAngle: e.source.startAngle,
 			endAngle: e.source.endAngle,
@@ -132,16 +132,16 @@ function g({ data: c, size: g = 500, innerRadius: _, ringThickness: ee = 20, pad
 			endAngle: e.target.endAngle,
 			radius: F - 1
 		}
-	}) ?? "", [U, F]), W = r(() => f.scaleOrdinal().domain(f.range(B.length)).range(P.length >= B.length ? P : [...Array(Math.ceil(B.length / P.length))].flatMap(() => P).slice(0, B.length)), [P, B.length]), G = t((e) => x?.[B[e]]?.fill ?? W(e), [
-		x,
+	}) ?? "", [U, F]), W = s(() => d.scaleOrdinal().domain(d.range(B.length)).range(N.length >= B.length ? N : [...Array(Math.ceil(B.length / N.length))].flatMap(() => N).slice(0, B.length)), [N, B.length]), G = a((e) => b?.[B[e]]?.fill ?? W(e), [
+		b,
 		B,
 		W
-	]), K = i(null), [q, J] = a(`-${g / 2} -${g / 2} ${g} ${g}`), [Y, X] = a(1), he = r(() => {
+	]), K = ee(null), [q, J] = c(`-${m / 2} -${m / 2} ${m} ${m}`), [Y, X] = c(1), he = s(() => {
 		if (Y === 1) return q;
 		let [e, t, n, r] = q.split(" ").map(Number), i = n / Y, a = r / Y;
 		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
 	}, [q, Y]);
-	n(() => {
+	o(() => {
 		let e = K.current;
 		if (!e) return;
 		let t = requestAnimationFrame(() => {
@@ -149,27 +149,27 @@ function g({ data: c, size: g = 500, innerRadius: _, ringThickness: ee = 20, pad
 				let t = e.getBBox();
 				J(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
 			} catch {
-				J(`-${g / 2} -${g / 2} ${g} ${g}`);
+				J(`-${m / 2} -${m / 2} ${m} ${m}`);
 			}
 		});
 		return () => cancelAnimationFrame(t);
 	}, [
-		g,
+		m,
 		F,
 		I,
 		B.length,
 		H
 	]);
-	let [Z, Q] = a(null), ge = t((e) => ({
+	let [Z, Q] = c(null), ge = a((e) => ({
 		name: B[e.index],
 		index: e.index,
-		valueOut: f.sum(H, (t) => (t.source.index === e.index ? t.source.value : 0) + (!S && t.target.index === e.index ? t.target.value : 0)),
-		valueIn: f.sum(H, (t) => (t.target.index === e.index ? t.source.value : 0) + (!S && t.source.index === e.index ? t.target.value : 0))
+		valueOut: d.sum(H, (t) => (t.source.index === e.index ? t.source.value : 0) + (!x && t.target.index === e.index ? t.target.value : 0)),
+		valueIn: d.sum(H, (t) => (t.target.index === e.index ? t.source.value : 0) + (!x && t.source.index === e.index ? t.target.value : 0))
 	}), [
 		B,
 		H,
-		S
-	]), _e = t((e) => ({
+		x
+	]), _e = a((e) => ({
 		source: {
 			name: B[e.source.index],
 			index: e.source.index,
@@ -182,81 +182,81 @@ function g({ data: c, size: g = 500, innerRadius: _, ringThickness: ee = 20, pad
 		}
 	}), [B]), ve = (e) => {
 		let t = (e.startAngle + e.endAngle) / 2, n = t * 180 / Math.PI - 90, r = t > Math.PI ? " rotate(180)" : "";
-		return `rotate(${n}) translate(${I + ie})${r}`;
-	}, ye = (e) => (e.startAngle + e.endAngle) / 2 > Math.PI ? "end" : "start", be = t((e) => {
-		if (!j || M || !e.ctrlKey) return;
+		return `rotate(${n}) translate(${I + ae})${r}`;
+	}, ye = (e) => (e.startAngle + e.endAngle) / 2 > Math.PI ? "end" : "start", be = a((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)));
-	}, [j, M]);
-	n(() => {
-		if (!j) return;
+	}, [A, j]);
+	o(() => {
+		if (!A) return;
 		let e = (e) => {
 			e.key === "Escape" && X(1);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [j]);
+	}, [A]);
 	let $ = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
-		disableHoverListener: M,
+		disableHoverListener: j,
 		slotProps: { tooltip: { sx: { maxWidth: 240 } } }
-	}, xe = N.palette.text.primary, Se = N.typography.fontFamily;
-	return /* @__PURE__ */ u(o, {
+	}, xe = M.palette.text.primary, Se = M.typography.fontFamily;
+	return /* @__PURE__ */ l(t, {
 		sx: {
 			display: "inline-flex",
-			opacity: M ? .5 : 1,
-			cursor: M ? "not-allowed" : "default",
+			opacity: j ? .5 : 1,
+			cursor: j ? "not-allowed" : "default",
 			userSelect: "none"
 		},
-		children: /* @__PURE__ */ u("svg", {
-			width: g,
-			height: g,
+		children: /* @__PURE__ */ l("svg", {
+			width: m,
+			height: m,
 			viewBox: he,
 			onWheel: be,
 			style: {
 				fontFamily: Se ?? "sans-serif",
-				overflow: j && Y > 1 ? "hidden" : "visible"
+				overflow: A && Y > 1 ? "hidden" : "visible"
 			},
 			role: "img",
 			"aria-label": "Chord chart",
-			children: /* @__PURE__ */ d("g", {
+			children: /* @__PURE__ */ u("g", {
 				ref: K,
 				children: [
-					le && /* @__PURE__ */ u("text", {
+					ue && /* @__PURE__ */ l("text", {
 						textAnchor: "middle",
 						dy: "0.35em",
 						fontSize: 13,
-						fill: N.palette.text.secondary,
-						children: ce.noData
+						fill: M.palette.text.secondary,
+						children: le.noData
 					}),
-					/* @__PURE__ */ u("g", { children: H.groups.map((e) => {
-						let t = ge(e), n = Z === e.index, r = Z !== null && !n;
-						return /* @__PURE__ */ u(s, {
+					/* @__PURE__ */ l("g", { children: H.groups.map((e) => {
+						let t = ge(e), r = Z === e.index, i = Z !== null && !r;
+						return /* @__PURE__ */ l(n, {
 							...$,
-							title: /* @__PURE__ */ u(m, {
+							title: /* @__PURE__ */ l(f, {
 								name: t.name,
 								valueOut: t.valueOut,
 								valueIn: t.valueIn,
 								fmt: z
 							}),
-							children: /* @__PURE__ */ d("g", {
-								style: { cursor: M ? "not-allowed" : "pointer" },
+							children: /* @__PURE__ */ u("g", {
+								style: { cursor: j ? "not-allowed" : "pointer" },
 								onMouseEnter: (n) => {
-									M || (Q(e.index), O?.(t, n));
+									j || (Q(e.index), D?.(t, n));
 								},
 								onMouseLeave: (e) => {
-									Q(null), O?.(null, e);
+									Q(null), D?.(null, e);
 								},
-								onClick: (e) => !M && D?.(t, e),
-								children: [/* @__PURE__ */ u("path", {
+								onClick: (e) => !j && E?.(t, e),
+								children: [/* @__PURE__ */ l("path", {
 									d: pe(e) || "",
 									fill: G(e.index),
-									stroke: N.palette.divider,
-									opacity: r ? .35 : 1,
+									stroke: M.palette.divider,
+									opacity: i ? .35 : 1,
 									style: { transition: "opacity 0.15s" }
-								}), re && /* @__PURE__ */ u("text", {
+								}), ie && /* @__PURE__ */ l("text", {
 									dy: "0.35em",
 									fontSize: 11,
 									fill: xe,
@@ -268,37 +268,37 @@ function g({ data: c, size: g = 500, innerRadius: _, ringThickness: ee = 20, pad
 							})
 						}, `grp-tt-${e.index}`);
 					}) }),
-					/* @__PURE__ */ u("g", {
-						fillOpacity: ae,
-						style: { mixBlendMode: ue },
+					/* @__PURE__ */ l("g", {
+						fillOpacity: oe,
+						style: { mixBlendMode: de },
 						children: H.map((e, t) => {
-							let n = _e(e), r = Z === null || e.source.index === Z || e.target.index === Z;
-							return /* @__PURE__ */ u(s, {
+							let r = _e(e), i = Z === null || e.source.index === Z || e.target.index === Z;
+							return /* @__PURE__ */ l(n, {
 								...$,
-								title: /* @__PURE__ */ u(h, {
-									sourceName: n.source.name,
-									targetName: n.target.name,
-									sourceValue: n.source.value,
-									targetValue: n.target.value,
-									directed: S,
+								title: /* @__PURE__ */ l(p, {
+									sourceName: r.source.name,
+									targetName: r.target.name,
+									sourceValue: r.source.value,
+									targetValue: r.target.value,
+									directed: x,
 									fmt: z
 								}),
-								children: /* @__PURE__ */ u("path", {
+								children: /* @__PURE__ */ l("path", {
 									d: me(e),
 									fill: G(e.target.index),
 									stroke: "none",
-									opacity: r ? 1 : .12,
+									opacity: i ? 1 : .12,
 									style: {
-										cursor: M ? "not-allowed" : "pointer",
+										cursor: j ? "not-allowed" : "pointer",
 										transition: "opacity 0.15s"
 									},
 									onMouseEnter: (e) => {
-										M || A?.(n, e);
+										j || k?.(r, e);
 									},
 									onMouseLeave: (e) => {
-										A?.(null, e);
+										k?.(null, e);
 									},
-									onClick: (e) => !M && k?.(n, e)
+									onClick: (e) => !j && O?.(r, e)
 								})
 							}, `chord-tt-${t}`);
 						})
@@ -308,6 +308,6 @@ function g({ data: c, size: g = 500, innerRadius: _, ringThickness: ee = 20, pad
 		})
 	});
 }
-g.displayName = "ChordChart";
+m.displayName = "ChordChart";
 //#endregion
-export { g as ChordChart };
+export { m as ChordChart };