@thebuoyant-tsdev/mui-ts-library 3.11.3 → 3.13.0

package/README.de.md

@@ -12,7 +12,7 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 
 ## Komponenten
 
-11 produktionsreife Komponenten in drei Kategorien. Jede verlinkt zu einer interaktiven Live-Demo und einem vollständigen Manual mit allen Props, Typen und Mustern.
+12 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
 
@@ -21,6 +21,7 @@ Eine typsichere React-Komponentenbibliothek auf Basis von **TypeScript** und **M
 | [`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) |
 | [`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) |
+| [`ColorPicker`](#colorpicker) | Sättigung/Farbton/Alpha-Farbwähler-Panel mit Pipette-Werkzeug — MUI bringt keinen mit | [Live-Demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-colorpicker--default) · [Docs](user-manuals/ColorPicker.de.md) |
 
 ### Code-Editoren
 
@@ -137,6 +138,31 @@ import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 
 ---
 
+### ColorPicker
+
+Ein Sättigung/Farbton/Alpha-Farbwähler-Panel — schließt eine echte MUI-Lücke, denn MUI bringt überhaupt keinen Farbwähler mit. Nutze es für Theme-Customizer, Markenfarben-Auswahl oder Design-System-Playgrounds. Vollständig kontrolliert; du besitzt `value` und aktualisierst es über `onChange`.
+
+```tsx
+import { useState } from 'react';
+import { ColorPicker } from '@thebuoyant-tsdev/mui-ts-library';
+
+function BrandColorPicker() {
+  const [color, setColor] = useState('#1976d2');
+
+  return (
+    <ColorPicker
+      value={color}
+      onChange={(hex) => setColor(hex)}
+      savedColors={['#f44336', '#2196f3', '#4caf50', '#ffeb3b']}
+    />
+  );
+}
+```
+
+→ [Vollständige Dokumentation](user-manuals/ColorPicker.de.md)
+
+---
+
 ### RichTextEditor
 
 Vollständiger WYSIWYG-Editor für formatierte Langtexte. Ideal für CMS-Felder, E-Mail-Templates, Kommentarbereiche und alle Eingaben, die mehr als ein einfaches `<textarea>` benötigen — mit Toolbar, Tabellen, Bild-Embed, Emoji-Picker, Vollbild und Markdown-Einfügen.
@@ -408,6 +434,25 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/). In der Praxis b
 
 ## Changelog
 
+### [3.13.0] — 2026-06-29
+
+**Hinzugefügt**
+- Neue Komponente: `ColorPicker` — ein Sättigung/Farbton/Alpha-Farbwähler-Panel mit Pipette-Werkzeug, schließt eine echte MUI-Lücke. Siehe [Quick Start](#colorpicker) und [Changelog](#3130--2026-06-29) für Details.
+
+---
+
+### [3.12.0] — 2026-06-29
+
+**Hinzugefügt**
+- TagSelection: `searchDebounceMs` (debounced `onSearchChange`) und `serverSideFilter` (vertraut `tags` als bereits gefiltert, für Fuzzy-/Nicht-Substring-Server-Suche) — schließt die seit längerem offene "Async Search"-Lücke.
+
+**Behoben**
+- TagSelection: bei der Umsetzung oben gefunden — ein verirrter zweiter `onSearchChange("")`-Aufruf feuerte direkt nach jedem echten Tastenanschlag (MUIs internes `reason="reset"`-Event). Wird jetzt herausgefiltert.
+
+Details siehe [Changelog](#3120--2026-06-29).
+
+---
+
 ### [3.11.3] — 2026-06-29
 
 **Behoben**

package/README.md

@@ -12,7 +12,7 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 
 ## Components
 
-11 production-ready components across three categories. Each links to a live, interactive demo and a full manual covering every prop, type, and pattern.
+12 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
 
@@ -21,6 +21,7 @@ A type-safe React component library built on **TypeScript** and **MUI (Material
 | [`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) |
 | [`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) |
+| [`ColorPicker`](#colorpicker) | Saturation/hue/alpha color picker panel with an eyedropper tool — MUI ships none | [Live demo](https://thebuoyant.github.io/mui-ts-library/?path=/story/components-colorpicker--default) · [Docs](user-manuals/ColorPicker.md) |
 
 ### Code Editors
 
@@ -137,6 +138,31 @@ import { PasswordStrengthMeter } from '@thebuoyant-tsdev/mui-ts-library';
 
 ---
 
+### ColorPicker
+
+A saturation/hue/alpha color picker panel — fills a real MUI gap, since MUI ships no color picker at all. Use it for theme customizers, brand-color pickers, or design-system playgrounds. Fully controlled; you own `value` and update it from `onChange`.
+
+```tsx
+import { useState } from 'react';
+import { ColorPicker } from '@thebuoyant-tsdev/mui-ts-library';
+
+function BrandColorPicker() {
+  const [color, setColor] = useState('#1976d2');
+
+  return (
+    <ColorPicker
+      value={color}
+      onChange={(hex) => setColor(hex)}
+      savedColors={['#f44336', '#2196f3', '#4caf50', '#ffeb3b']}
+    />
+  );
+}
+```
+
+→ [Full documentation](user-manuals/ColorPicker.md)
+
+---
+
 ### RichTextEditor
 
 Full-featured WYSIWYG editor for long-form formatted content. Best for CMS fields, email templates, comment boxes, and any input that needs more than a plain `<textarea>` — with toolbar, tables, image embed, emoji picker, fullscreen, and Markdown paste support.
@@ -408,6 +434,25 @@ This project follows [Semantic Versioning](https://semver.org/). In practice:
 
 ## Changelog
 
+### [3.13.0] — 2026-06-29
+
+**Added**
+- New component: `ColorPicker` — a saturation/hue/alpha color picker panel with an eyedropper tool, fills a real MUI gap. See [Quick Start](#colorpicker) and the [Changelog](#3130--2026-06-29) for details.
+
+---
+
+### [3.12.0] — 2026-06-29
+
+**Added**
+- TagSelection: `searchDebounceMs` (debounces `onSearchChange`) and `serverSideFilter` (trusts `tags` as already filtered, for fuzzy/non-substring server search) — closes the long-standing "Async Search" gap.
+
+**Fixed**
+- TagSelection: found while implementing the above — a spurious second `onSearchChange("")` call fired right after every real keystroke (MUI's internal `reason="reset"` event). Now filtered out.
+
+See [Changelog](#3120--2026-06-29) for details.
+
+---
+
 ### [3.11.3] — 2026-06-29
 
 **Fixed**

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

@@ -0,0 +1,11 @@
+import { type ColorPickerProps } from "./ColorPicker.types";
+declare global {
+    interface Window {
+        EyeDropper?: new () => {
+            open: () => Promise<{
+                sRGBHex: string;
+            }>;
+        };
+    }
+}
+export declare function ColorPicker({ value, onChange, onChangeCommitted, defaultFormat, onFormatChange, showAlpha, showEyeDropper, showSliderSection, showInputSection, savedColors, disabled, colorGradientSize, inputSize, width, name, translation, }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,527 @@
+import { clamp as e, hexToRgba as t, hslaToHsva as n, hsvaToHsla as r, hsvaToRgba as i, parseColorString as a, rgbaToHex as o, rgbaToHsva as s } from "./util/colorConversion.util.js";
+import { DEFAULT_COLOR_PICKER_TRANSLATION as c } from "./ColorPicker.types.js";
+import { useEffect as l, useRef as u, useState as d } from "react";
+import { Box as f, IconButton as p, MenuItem as m, Select as ee, TextField as h, Tooltip as te, Typography as ne, useTheme as re } from "@mui/material";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import ie from "@mui/icons-material/Colorize";
+//#region src/components/color-picker/ColorPicker.tsx
+function v(t, n) {
+	let r = e(t, 0, 100);
+	return `calc(${n / 2}px + (100% - ${n}px) * ${r / 100})`;
+}
+function y(e) {
+	let t = i(e), n = r(e), a = o(t);
+	return {
+		hex: a,
+		info: {
+			hex: a,
+			rgb: {
+				r: Math.round(t.r),
+				g: Math.round(t.g),
+				b: Math.round(t.b),
+				a: t.a
+			},
+			hsl: {
+				h: Math.round(n.h),
+				s: Math.round(n.s),
+				l: Math.round(n.l),
+				a: n.a
+			}
+		}
+	};
+}
+function b({ value: t, onCommit: n, min: r, max: i, label: a, disabled: o, size: s, onBlurExtra: c, fullWidth: u }) {
+	let [f, p] = d(String(Math.round(t)));
+	return l(() => {
+		p(String(Math.round(t)));
+	}, [t]), /* @__PURE__ */ g(h, {
+		size: s,
+		value: f,
+		disabled: o,
+		onChange: (t) => {
+			let a = t.target.value;
+			p(a);
+			let o = Number(a);
+			a.trim() !== "" && !Number.isNaN(o) && n(e(o, r, i));
+		},
+		onBlur: () => {
+			p(String(Math.round(t))), c?.();
+		},
+		slotProps: { htmlInput: {
+			"aria-label": a,
+			style: { textAlign: "center" }
+		} },
+		sx: u ? {
+			flex: 1,
+			minWidth: 0
+		} : {
+			width: 64,
+			flexShrink: 0
+		}
+	});
+}
+function x({ value: o, onChange: x, onChangeCommitted: S, defaultFormat: ae = "hex", onFormatChange: oe, showAlpha: C = !0, showEyeDropper: se = !0, showSliderSection: ce = !0, showInputSection: le = !0, savedColors: w, disabled: T = !1, colorGradientSize: E = "medium", inputSize: D = "medium", width: ue = 280, name: O, translation: de }) {
+	let k = re(), A = {
+		...c,
+		...de
+	}, [j, M] = d(() => {
+		let e = a(o);
+		return e ? s(e) : {
+			h: 0,
+			s: 0,
+			v: 0,
+			a: 1
+		};
+	}), [N, fe] = d(ae), [pe, P] = d(o);
+	if (pe !== o) {
+		P(o);
+		let e = a(o);
+		e && M(s(e));
+	}
+	let { hex: me, info: he } = y(j), F = me.slice(0, 7), [ge, I] = d(F);
+	l(() => {
+		I(F);
+	}, [F]);
+	let L = u(null), R = u(null), z = u(null), B = (e) => {
+		M(e);
+		let t = y(e);
+		P(t.hex), x(t.hex, t.info);
+	}, V = (e) => {
+		if (B(e), S) {
+			let t = y(e);
+			S(t.hex, t.info);
+		}
+	}, H = () => {
+		if (!S) return;
+		let e = y(j);
+		S(e.hex, e.info);
+	}, _e = E === "small" ? 130 : 160, U = E === "small" ? 20 : 24, W = E === "small" ? 10 : 12, G = E === "small" ? 13 : 16, K = (t) => {
+		if (T || !L.current) return;
+		let n = L.current.getBoundingClientRect(), r = e(t.clientX - n.left, 0, n.width), i = e(t.clientY - n.top, 0, n.height);
+		B({
+			...j,
+			s: r / n.width * 100,
+			v: 100 - i / n.height * 100
+		});
+	}, q = (t) => {
+		if (T || !R.current) return;
+		let n = R.current.getBoundingClientRect(), r = e(t.clientX - n.left, 0, n.width);
+		B({
+			...j,
+			h: r / n.width * 360
+		});
+	}, J = (t) => {
+		if (T || !z.current) return;
+		let n = z.current.getBoundingClientRect(), r = e(t.clientX - n.left, 0, n.width);
+		B({
+			...j,
+			a: r / n.width
+		});
+	}, Y = typeof window < "u" && !!window.EyeDropper, ve = async () => {
+		if (!(T || !window.EyeDropper)) try {
+			let e = t((await new window.EyeDropper().open()).sRGBHex);
+			e && V(s({
+				...e,
+				a: j.a
+			}));
+		} catch {}
+	}, ye = (e) => {
+		fe(e), oe?.(e);
+	}, X = i(j), Z = r(j), Q = F, $ = {
+		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"
+	};
+	return /* @__PURE__ */ _(f, {
+		sx: {
+			width: ue,
+			opacity: T ? .6 : 1,
+			display: "flex",
+			flexDirection: "column",
+			gap: 1
+		},
+		children: [
+			/* @__PURE__ */ g(f, {
+				ref: L,
+				role: "slider",
+				tabIndex: T ? -1 : 0,
+				"aria-label": A.gradientAreaLabel,
+				"aria-valuetext": `${Math.round(j.s)}, ${Math.round(j.v)}`,
+				onPointerDown: (e) => {
+					e.currentTarget.setPointerCapture?.(e.pointerId), K(e);
+				},
+				onPointerMove: (e) => {
+					e.buttons === 1 && K(e);
+				},
+				onPointerUp: H,
+				sx: {
+					position: "relative",
+					width: "100%",
+					height: _e,
+					borderRadius: `${k.shape.borderRadius}px`,
+					border: `1px solid ${k.palette.divider}`,
+					cursor: T ? "default" : "crosshair",
+					touchAction: "none",
+					background: `linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, hsl(${j.h}, 100%, 50%))`
+				},
+				children: /* @__PURE__ */ g(f, { sx: {
+					position: "absolute",
+					left: v(j.s, G),
+					top: v(100 - j.v, G),
+					width: G,
+					height: G,
+					borderRadius: "50%",
+					border: "2px solid #fff",
+					boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
+					transform: "translate(-50%, -50%)",
+					pointerEvents: "none",
+					backgroundColor: Q
+				} })
+			}),
+			ce && /* @__PURE__ */ _(f, {
+				sx: {
+					display: "flex",
+					gap: 1,
+					alignItems: "center"
+				},
+				children: [se && Y && /* @__PURE__ */ g(te, {
+					title: A.eyeDropperLabel,
+					children: /* @__PURE__ */ g("span", { children: /* @__PURE__ */ g(p, {
+						size: "small",
+						onClick: ve,
+						disabled: T,
+						"aria-label": A.eyeDropperLabel,
+						children: /* @__PURE__ */ g(ie, { fontSize: "small" })
+					}) })
+				}), /* @__PURE__ */ _(f, {
+					sx: {
+						flex: 1,
+						display: "flex",
+						flexDirection: "column",
+						gap: .75
+					},
+					children: [/* @__PURE__ */ g(f, {
+						ref: R,
+						role: "slider",
+						tabIndex: T ? -1 : 0,
+						"aria-label": A.hueSliderLabel,
+						"aria-valuemin": 0,
+						"aria-valuemax": 360,
+						"aria-valuenow": Math.round(j.h),
+						onPointerDown: (e) => {
+							e.currentTarget.setPointerCapture?.(e.pointerId), q(e);
+						},
+						onPointerMove: (e) => {
+							e.buttons === 1 && q(e);
+						},
+						onPointerUp: H,
+						sx: {
+							position: "relative",
+							width: "100%",
+							height: W,
+							borderRadius: W,
+							cursor: T ? "default" : "pointer",
+							touchAction: "none",
+							background: "linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)"
+						},
+						children: /* @__PURE__ */ g(f, { sx: {
+							position: "absolute",
+							left: v(j.h / 360 * 100, G),
+							top: "50%",
+							width: G,
+							height: G,
+							borderRadius: "50%",
+							border: "2px solid #fff",
+							boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
+							transform: "translate(-50%, -50%)",
+							pointerEvents: "none",
+							backgroundColor: `hsl(${j.h}, 100%, 50%)`
+						} })
+					}), C && /* @__PURE__ */ _(f, {
+						ref: z,
+						role: "slider",
+						tabIndex: T ? -1 : 0,
+						"aria-label": A.alphaFieldLabel,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": Math.round(j.a * 100),
+						onPointerDown: (e) => {
+							e.currentTarget.setPointerCapture?.(e.pointerId), J(e);
+						},
+						onPointerMove: (e) => {
+							e.buttons === 1 && J(e);
+						},
+						onPointerUp: H,
+						sx: {
+							position: "relative",
+							width: "100%",
+							height: W,
+							borderRadius: W,
+							cursor: T ? "default" : "pointer",
+							touchAction: "none",
+							...$
+						},
+						children: [/* @__PURE__ */ g(f, { sx: {
+							position: "absolute",
+							inset: 0,
+							borderRadius: W,
+							background: `linear-gradient(to right, transparent, ${Q})`
+						} }), /* @__PURE__ */ g(f, { sx: {
+							position: "absolute",
+							left: v(j.a * 100, G),
+							top: "50%",
+							width: G,
+							height: G,
+							borderRadius: "50%",
+							border: "2px solid #fff",
+							boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
+							transform: "translate(-50%, -50%)",
+							pointerEvents: "none",
+							backgroundColor: Q
+						} })]
+					})]
+				})]
+			}),
+			le && /* @__PURE__ */ _(f, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					gap: .75
+				},
+				children: [
+					/* @__PURE__ */ _(f, {
+						sx: {
+							display: "flex",
+							gap: .75,
+							alignItems: "center"
+						},
+						children: [
+							/* @__PURE__ */ _(ee, {
+								size: D,
+								value: N,
+								"aria-label": A.formatLabel,
+								disabled: T,
+								onChange: (e) => ye(e.target.value),
+								sx: {
+									minWidth: 72,
+									fontSize: "0.75rem",
+									flexShrink: 0
+								},
+								children: [
+									/* @__PURE__ */ g(m, {
+										value: "hex",
+										children: "HEX"
+									}),
+									/* @__PURE__ */ g(m, {
+										value: "rgb",
+										children: "RGB"
+									}),
+									/* @__PURE__ */ g(m, {
+										value: "hsl",
+										children: "HSL"
+									})
+								]
+							}),
+							N === "hex" && /* @__PURE__ */ g(h, {
+								size: D,
+								value: ge,
+								disabled: T,
+								onChange: (e) => {
+									let n = e.target.value;
+									I(n);
+									let r = t(n);
+									r && B(s({
+										...r,
+										a: j.a
+									}));
+								},
+								onBlur: () => {
+									I(F), H();
+								},
+								slotProps: { htmlInput: { "aria-label": A.hexFieldLabel } },
+								sx: {
+									flex: 1,
+									minWidth: 0
+								}
+							}),
+							N !== "hex" && /* @__PURE__ */ g(f, { sx: { flex: 1 } }),
+							C && /* @__PURE__ */ g(b, {
+								label: A.alphaFieldLabel,
+								value: Math.round(j.a * 100),
+								min: 0,
+								max: 100,
+								disabled: T,
+								size: D,
+								onBlurExtra: H,
+								onCommit: (e) => B({
+									...j,
+									a: e / 100
+								})
+							})
+						]
+					}),
+					N === "rgb" && /* @__PURE__ */ _(f, {
+						sx: {
+							display: "flex",
+							gap: .75
+						},
+						children: [
+							/* @__PURE__ */ g(b, {
+								label: A.redLabel,
+								value: X.r,
+								min: 0,
+								max: 255,
+								disabled: T,
+								size: D,
+								onBlurExtra: H,
+								fullWidth: !0,
+								onCommit: (e) => B(s({
+									r: e,
+									g: X.g,
+									b: X.b,
+									a: j.a
+								}))
+							}),
+							/* @__PURE__ */ g(b, {
+								label: A.greenLabel,
+								value: X.g,
+								min: 0,
+								max: 255,
+								disabled: T,
+								size: D,
+								onBlurExtra: H,
+								fullWidth: !0,
+								onCommit: (e) => B(s({
+									r: X.r,
+									g: e,
+									b: X.b,
+									a: j.a
+								}))
+							}),
+							/* @__PURE__ */ g(b, {
+								label: A.blueLabel,
+								value: X.b,
+								min: 0,
+								max: 255,
+								disabled: T,
+								size: D,
+								onBlurExtra: H,
+								fullWidth: !0,
+								onCommit: (e) => B(s({
+									r: X.r,
+									g: X.g,
+									b: e,
+									a: j.a
+								}))
+							})
+						]
+					}),
+					N === "hsl" && /* @__PURE__ */ _(f, {
+						sx: {
+							display: "flex",
+							gap: .75
+						},
+						children: [
+							/* @__PURE__ */ g(b, {
+								label: A.hueFieldLabel,
+								value: Z.h,
+								min: 0,
+								max: 360,
+								disabled: T,
+								size: D,
+								onBlurExtra: H,
+								fullWidth: !0,
+								onCommit: (e) => B({
+									...j,
+									h: e
+								})
+							}),
+							/* @__PURE__ */ g(b, {
+								label: A.saturationFieldLabel,
+								value: Z.s,
+								min: 0,
+								max: 100,
+								disabled: T,
+								size: D,
+								onBlurExtra: H,
+								fullWidth: !0,
+								onCommit: (e) => B(n({
+									h: Z.h,
+									s: e,
+									l: Z.l,
+									a: Z.a
+								}))
+							}),
+							/* @__PURE__ */ g(b, {
+								label: A.lightnessFieldLabel,
+								value: Z.l,
+								min: 0,
+								max: 100,
+								disabled: T,
+								size: D,
+								onBlurExtra: H,
+								fullWidth: !0,
+								onCommit: (e) => B(n({
+									h: Z.h,
+									s: Z.s,
+									l: e,
+									a: Z.a
+								}))
+							})
+						]
+					})
+				]
+			}),
+			w && w.length > 0 && /* @__PURE__ */ _(f, { children: [/* @__PURE__ */ g(ne, {
+				variant: "caption",
+				sx: {
+					color: "text.secondary",
+					display: "block",
+					mb: .5
+				},
+				children: A.savedColorsLabel
+			}), /* @__PURE__ */ g(f, {
+				sx: {
+					display: "flex",
+					flexWrap: "wrap",
+					gap: .75
+				},
+				children: w.map((e, t) => /* @__PURE__ */ g(f, {
+					component: "button",
+					type: "button",
+					disabled: T,
+					"aria-label": e,
+					onClick: () => {
+						let t = a(e);
+						t && V(s(t));
+					},
+					sx: {
+						width: U,
+						height: U,
+						p: 0,
+						borderRadius: .5,
+						border: `1px solid ${k.palette.divider}`,
+						cursor: T ? "default" : "pointer",
+						flexShrink: 0,
+						...$,
+						backgroundSize: "6px 6px",
+						"&:hover": T ? void 0 : { borderColor: k.palette.primary.main }
+					},
+					children: /* @__PURE__ */ g(f, { sx: {
+						width: "100%",
+						height: "100%",
+						borderRadius: .5,
+						backgroundColor: e
+					} })
+				}, `${e}-${t}`))
+			})] }),
+			O && /* @__PURE__ */ g("input", {
+				type: "hidden",
+				name: O,
+				value: he.hex
+			})
+		]
+	});
+}
+//#endregion
+export { x as ColorPicker };