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

package/README.de.md

@@ -2,6 +2,10 @@
 
 > [English Version →](README.md)
 
+[![CI](https://github.com/thebuoyant/mui-ts-library/actions/workflows/ci.yml/badge.svg)](https://github.com/thebuoyant/mui-ts-library/actions/workflows/ci.yml)
+[![npm](https://img.shields.io/npm/v/@thebuoyant-tsdev/mui-ts-library)](https://www.npmjs.com/package/@thebuoyant-tsdev/mui-ts-library)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
 Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **MUI (Material UI v9)**. Die Komponenten folgen MUI's Design-Sprache, unterstützen Dark Mode und Theming von Haus aus und werden mit vollständigen TypeScript-Typen, Storybook-Stories und Unit-Tests ausgeliefert.
 
 **[→ Live-Storybook](https://thebuoyant.github.io/mui-ts-library/)** — alle Komponenten interaktiv erkunden, ohne Installation.
@@ -479,6 +483,28 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.24.1] — 2026-07-10
+
+**Behoben**
+- `RichTextEditor`-Toolbar: `H1`/`H2`/`H3`- und `MD`-Button werden jetzt als `<svg><text>` gerendert statt als HTML-`<span>` — konsistente Render-Engine, Strichgewicht und Farbverhalten wie alle anderen SVG-Toolbar-Icons.
+- `RadialStackedBarChart`-Stories: ungenutzten Parameter entfernt, der einen ESLint-Fehler verursachte.
+
+---
+
+### [3.24.0] — 2026-07-10
+
+**Hinzugefügt**
+- **CSS-Klassen-API** für `TagSelection`, `PasswordStrengthMeter` und `ColorPicker` — jedes bedeutende DOM-Element trägt jetzt einen stabilen `.MuiTs<Komponente>-<Slot>`-Klassennamen. Einzelne Slots per Plain CSS, CSS Modules oder Tailwind stylen ohne MUI-Interna anzufassen. Drei typisierte Konstanten-Objekte exportiert: `tagSelectionClasses`, `passwordStrengthMeterClasses`, `colorPickerClasses` + geteilte `muiTsStateClasses` (`.MuiTs-disabled`, `.MuiTs-error`, …). Siehe [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
+
+---
+
+### [3.23.0] — 2026-07-10
+
+**Hinzugefügt**
+- `ColorPicker`: neue `format?: 'hex' | 'rgb' | 'hsl'`-Prop — kontrolliertes Anzeigeformat, ermöglicht dem Parent die Kontrolle über das aktive Format (z.B. für programmatische Form-Resets). Mit `onFormatChange` kombinieren. Ohne diese Prop bleibt das bisherige unkontrollierte Verhalten erhalten. Siehe [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
+
+---
+
 ### [3.22.0] — 2026-07-09
 
 **Hinzugefügt**

package/README.md

@@ -2,6 +2,10 @@
 
 > [Deutsche Version →](README.de.md)
 
+[![CI](https://github.com/thebuoyant/mui-ts-library/actions/workflows/ci.yml/badge.svg)](https://github.com/thebuoyant/mui-ts-library/actions/workflows/ci.yml)
+[![npm](https://img.shields.io/npm/v/@thebuoyant-tsdev/mui-ts-library)](https://www.npmjs.com/package/@thebuoyant-tsdev/mui-ts-library)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
 A type-safe React component library built on **TypeScript** and **MUI (Material UI v9)**. Components follow MUI's design language, support dark mode and theming out of the box, and ship with complete TypeScript types, Storybook stories, and unit tests.
 
 **[→ Live Storybook](https://thebuoyant.github.io/mui-ts-library/)** — explore all components interactively, no installation needed.
@@ -479,6 +483,28 @@ This project follows [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.24.1] — 2026-07-10
+
+**Fixed**
+- `RichTextEditor` toolbar: `H1`/`H2`/`H3` and `MD` buttons now render as `<svg><text>` instead of a plain HTML `<span>` — consistent rendering engine, stroke weight, and color behaviour with all other SVG toolbar icons.
+- `RadialStackedBarChart` stories: removed unused parameter that caused an ESLint error.
+
+---
+
+### [3.24.0] — 2026-07-10
+
+**Added**
+- **CSS Classes API** for `TagSelection`, `PasswordStrengthMeter`, and `ColorPicker` — every significant DOM node now carries a stable `.MuiTs<Component>-<slot>` class name. Style individual slots via plain CSS, CSS Modules, or Tailwind without touching MUI internals. Three typed constants objects exported: `tagSelectionClasses`, `passwordStrengthMeterClasses`, `colorPickerClasses` + shared `muiTsStateClasses` (`.MuiTs-disabled`, `.MuiTs-error`, …). See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
+### [3.23.0] — 2026-07-10
+
+**Added**
+- `ColorPicker`: new `format?: 'hex' | 'rgb' | 'hsl'` prop — controlled display format, lets the parent own the active format (e.g. for programmatic form resets). Combine with `onFormatChange`. Omit to keep existing uncontrolled behaviour. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
 ### [3.22.0] — 2026-07-09
 
 **Added**

package/dist/components/color-picker/ColorPicker.js

@@ -4,8 +4,8 @@ import { clamp as n, hexToRgba as r, hslaToHsva as i, hsvaToHsla as a, hsvaToRgb
 import { DEFAULT_COLOR_PICKER_TRANSLATION as u } from "./ColorPicker.types.js";
 import { useEffect as d, useRef as f, useState as p } from "react";
 import { Box as m, IconButton as ee, MenuItem as h, Select as te, TextField as g, Tooltip as ne, Typography as re, useTheme as ie } from "@mui/material";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
 import ae from "@mui/icons-material/Colorize";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/color-picker/ColorPicker.tsx
 function y(e, t) {
 	let r = n(e, 0, 100);

package/dist/components/color-picker/ColorPicker.types.d.ts

@@ -31,6 +31,19 @@ export type ColorPickerTranslation = {
     hueSliderLabel: string;
 };
 export declare const DEFAULT_COLOR_PICKER_TRANSLATION: Required<ColorPickerTranslation>;
+export type PopoverColorPickerTranslation = {
+    /** aria-label for the swatch trigger button. */
+    openLabel: string;
+};
+export declare const DEFAULT_POPOVER_COLOR_PICKER_TRANSLATION: Required<PopoverColorPickerTranslation>;
+export type PopoverColorPickerProps = Omit<ColorPickerProps, "translation"> & {
+    /** Size of the swatch trigger button in px (default: 28). */
+    swatchSize?: number;
+    /** Shape of the swatch button (default: `'square'`). */
+    swatchShape?: "square" | "circle";
+    /** i18n strings — merged with the inner ColorPicker translation. */
+    translation?: Partial<ColorPickerTranslation & PopoverColorPickerTranslation>;
+};
 export type ColorPickerProps = {
     /** Current color — accepts hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba(), or hsl()/hsla(). */
     value: string;

package/dist/components/color-picker/ColorPicker.types.js

@@ -13,6 +13,6 @@ var e = {
 	savedColorsLabel: "Saved colors",
 	gradientAreaLabel: "Saturation and brightness",
 	hueSliderLabel: "Hue"
-};
+}, t = { openLabel: "Open color picker" };
 //#endregion
-export { e as DEFAULT_COLOR_PICKER_TRANSLATION };
+export { e as DEFAULT_COLOR_PICKER_TRANSLATION, t as DEFAULT_POPOVER_COLOR_PICKER_TRANSLATION };

package/dist/components/color-picker/PopoverColorPicker.d.ts

@@ -0,0 +1,2 @@
+import { type PopoverColorPickerProps } from "./ColorPicker.types";
+export declare function PopoverColorPicker({ value, onChange, onChangeCommitted, swatchSize, swatchShape, disabled, translation, ...colorPickerProps }: PopoverColorPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/color-picker/PopoverColorPicker.js

@@ -0,0 +1,81 @@
+import { muiTsStateClasses as e } from "../../utils/muiTsClasses.js";
+import { popoverColorPickerClasses as t } from "./popoverColorPickerClasses.js";
+import { DEFAULT_POPOVER_COLOR_PICKER_TRANSLATION as n } from "./ColorPicker.types.js";
+import { ColorPicker as r } from "./ColorPicker.js";
+import { useState as i } from "react";
+import { Box as a, Popover as o, useTheme as s } from "@mui/material";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/color-picker/PopoverColorPicker.tsx
+var d = {
+	backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+	backgroundSize: "8px 8px",
+	backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
+};
+function f({ value: f, onChange: p, onChangeCommitted: m, swatchSize: h = 28, swatchShape: g = "square", disabled: _ = !1, translation: v, ...y }) {
+	let b = s(), x = {
+		...n,
+		...v
+	}, [S, C] = i(null), w = !!S, T = g === "circle" ? "50%" : `${b.shape.borderRadius}px`;
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(a, {
+		component: "button",
+		type: "button",
+		disabled: _,
+		"aria-label": x.openLabel,
+		"aria-expanded": w,
+		"aria-haspopup": "dialog",
+		onClick: (e) => C(e.currentTarget),
+		className: [t.root, _ ? e.disabled : void 0].filter(Boolean).join(" "),
+		sx: {
+			width: h,
+			height: h,
+			minWidth: h,
+			p: 0,
+			borderRadius: T,
+			border: `1px solid ${b.palette.divider}`,
+			cursor: _ ? "default" : "pointer",
+			overflow: "hidden",
+			flexShrink: 0,
+			...d,
+			"&:hover:not(:disabled)": { borderColor: b.palette.primary.main },
+			"&:focus-visible": {
+				outline: `2px solid ${b.palette.primary.main}`,
+				outlineOffset: 2
+			}
+		},
+		children: /* @__PURE__ */ l(a, {
+			className: t.swatch,
+			sx: {
+				width: "100%",
+				height: "100%",
+				borderRadius: "inherit",
+				backgroundColor: f
+			}
+		})
+	}), /* @__PURE__ */ l(o, {
+		open: w,
+		anchorEl: S,
+		onClose: () => C(null),
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		},
+		slotProps: { paper: {
+			sx: { p: 1.5 },
+			"data-testid": "popover-color-picker"
+		} },
+		children: /* @__PURE__ */ l(r, {
+			value: f,
+			onChange: p,
+			onChangeCommitted: m,
+			disabled: _,
+			translation: v,
+			...y
+		})
+	})] });
+}
+//#endregion
+export { f as PopoverColorPicker };

package/dist/components/color-picker/popoverColorPickerClasses.d.ts

@@ -0,0 +1,15 @@
+/**
+ * CSS class names for every named slot in the PopoverColorPicker component.
+ *
+ * @example
+ * ```css
+ * .MuiTsPopoverColorPicker-root { border-radius: 50%; }
+ * .MuiTsPopoverColorPicker-root.MuiTs-disabled { opacity: 0.4; pointer-events: none; }
+ * ```
+ */
+export declare const popoverColorPickerClasses: {
+    /** The swatch button that triggers the popover. Also receives `MuiTs-disabled` when `disabled={true}`. */
+    readonly root: "MuiTsPopoverColorPicker-root";
+    /** The inner colored box inside the swatch button. */
+    readonly swatch: "MuiTsPopoverColorPicker-swatch";
+};

package/dist/components/color-picker/popoverColorPickerClasses.js

@@ -0,0 +1,7 @@
+//#region src/components/color-picker/popoverColorPickerClasses.ts
+var e = {
+	root: "MuiTsPopoverColorPicker-root",
+	swatch: "MuiTsPopoverColorPicker-swatch"
+};
+//#endregion
+export { e as popoverColorPickerClasses };