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

package/dist/components/tag-selection/TagSelectionAutocomplete.js

@@ -1,10 +1,11 @@
-import { useState as e } from "react";
-import { Autocomplete as t, Box as n, Chip as r, IconButton as i, Stack as a, Switch as o, TextField as s, Tooltip as c, Typography as l } from "@mui/material";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import p from "@mui/icons-material/Check";
+import { tagSelectionClasses as e } from "./tagSelectionClasses.js";
+import { useState as t } from "react";
+import { Autocomplete as n, Box as r, Chip as i, IconButton as a, Stack as o, Switch as s, TextField as c, Tooltip as l, Typography as u } from "@mui/material";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "@mui/icons-material/Check";
 import ee from "@mui/icons-material/Close";
 //#region src/components/tag-selection/TagSelectionAutocomplete.tsx
-var te = [
+var h = [
 	"default",
 	"primary",
 	"secondary",
@@ -12,7 +13,7 @@ var te = [
 	"info",
 	"success",
 	"warning"
-], m = [
+], g = [
 	"#f44336",
 	"#e91e63",
 	"#9c27b0",
@@ -34,26 +35,26 @@ var te = [
 	"#607d8b",
 	"#000000"
 ];
-function h(e) {
+function _(e) {
 	return /^#[0-9A-Fa-f]{6}$/.test(e);
 }
-function g(e) {
+function v(e) {
 	let t = parseInt(e.slice(1, 3), 16), n = parseInt(e.slice(3, 5), 16), r = parseInt(e.slice(5, 7), 16);
 	return (.299 * t + .587 * n + .114 * r) / 255 > .5 ? "#000000" : "#ffffff";
 }
-function _(e, t) {
+function y(e, t) {
 	let n = t.trim();
 	if (!n) return e;
 	let r = e.toLowerCase().indexOf(n.toLowerCase());
-	return r === -1 ? e : /* @__PURE__ */ f(u, { children: [
+	return r === -1 ? e : /* @__PURE__ */ p(d, { children: [
 		e.slice(0, r),
-		/* @__PURE__ */ d("strong", { children: e.slice(r, r + n.length) }),
+		/* @__PURE__ */ f("strong", { children: e.slice(r, r + n.length) }),
 		e.slice(r + n.length)
 	] });
 }
-function v({ color: e, selected: t, onClick: r }) {
-	return /* @__PURE__ */ d(n, {
-		onClick: r,
+function b({ color: e, selected: t, onClick: n }) {
+	return /* @__PURE__ */ f(r, {
+		onClick: n,
 		sx: {
 			width: 24,
 			height: 24,
@@ -74,15 +75,15 @@ function v({ color: e, selected: t, onClick: r }) {
 		}
 	});
 }
-function y({ value: e, onChange: t, disabled: r = !1 }) {
-	return /* @__PURE__ */ d(s, {
+function x({ value: e, onChange: t, disabled: n = !1 }) {
+	return /* @__PURE__ */ f(c, {
 		size: "small",
 		fullWidth: !0,
 		value: e,
 		onChange: (e) => t(e.target.value),
 		placeholder: "#rrggbb",
-		disabled: r,
-		error: !r && e.length > 1 && !h(e),
+		disabled: n,
+		error: !n && e.length > 1 && !_(e),
 		sx: {
 			"& .MuiInputBase-root": { height: 28 },
 			"& .MuiInputBase-input": {
@@ -92,22 +93,22 @@ function y({ value: e, onChange: t, disabled: r = !1 }) {
 				fontFamily: "monospace"
 			}
 		},
-		slotProps: { input: { startAdornment: /* @__PURE__ */ d(n, { sx: {
+		slotProps: { input: { startAdornment: /* @__PURE__ */ f(r, { sx: {
 			width: 12,
 			height: 12,
 			borderRadius: .25,
 			flexShrink: 0,
 			mr: .5,
-			backgroundColor: h(e) ? e : "action.disabledBackground",
+			backgroundColor: _(e) ? e : "action.disabledBackground",
 			border: "1px solid",
 			borderColor: "divider"
 		} }) } }
 	});
 }
-function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C, onTagSelect: w, onTagCreate: ne, inputSize: re = "medium", chipSize: T = "medium", chipVariant: ie = "filled", disabled: E = !1, loading: D = !1, isMaxReached: O = !1, allowCreate: k = !1, listboxMaxHeight: A, serverSideFilter: j = !1 }) {
-	let [M, N] = e("default"), [P, F] = e(null), [I, L] = e(null), [R, z] = e(!0), [B, V] = e(!1), [H, U] = e(!1), [W, G] = e("#1976d2"), [K, q] = e("#ffffff"), J = E || O, Y = P !== null, ae = j ? b : b.filter((e) => e.label.toLowerCase().includes(x.trim().toLowerCase())), X = k && x.trim() !== "" && ae.length === 0, oe = H && !X, Z = Y ? R ? g(P) : I ?? "#000000" : void 0, Q = () => {
+function S({ availableTags: S, searchValue: C, translation: w, onSearchChange: T, onTagSelect: te, onTagCreate: ne, inputSize: re = "medium", chipSize: E = "medium", chipVariant: ie = "filled", disabled: D = !1, loading: O = !1, isMaxReached: k = !1, allowCreate: ae = !1, listboxMaxHeight: A, serverSideFilter: j = !1 }) {
+	let [M, N] = t("default"), [P, F] = t(null), [I, L] = t(null), [R, z] = t(!0), [B, V] = t(!1), [H, U] = t(!1), [W, G] = t("#1976d2"), [K, q] = t("#ffffff"), J = D || k, Y = P !== null, oe = j ? S : S.filter((e) => e.label.toLowerCase().includes(C.trim().toLowerCase())), X = ae && C.trim() !== "" && oe.length === 0, se = H && !X, Z = Y ? R ? v(P) : I ?? "#000000" : void 0, Q = () => {
 		if (J) return;
-		let e = x.trim(), t = e.toLowerCase().replace(/\s+/g, "-");
+		let e = C.trim(), t = e.toLowerCase().replace(/\s+/g, "-");
 		ne?.(Y && P ? {
 			id: t,
 			label: e,
@@ -120,45 +121,46 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 			label: e,
 			selected: !0,
 			color: M
-		}), N("default"), F(null), L(null), z(!0), V(!1), C("");
-	}, se = () => {
-		C(""), N("default"), F(null), L(null), z(!0), V(!1);
-	}, ce = (e) => {
-		F(e), G(e), N("default");
+		}), N("default"), F(null), L(null), z(!0), V(!1), T("");
+	}, ce = () => {
+		T(""), N("default"), F(null), L(null), z(!0), V(!1);
 	}, le = (e) => {
-		G(e), h(e) && (F(e), N("default"));
+		F(e), G(e), N("default");
 	}, ue = (e) => {
-		L(e), q(e);
+		G(e), _(e) && (F(e), N("default"));
 	}, de = (e) => {
-		q(e), h(e) && L(e);
+		L(e), q(e);
 	}, fe = (e) => {
+		q(e), _(e) && L(e);
+	}, pe = (e) => {
 		if (z(e), e) L(null);
 		else if (P) {
-			let e = g(P);
+			let e = v(P);
 			L(e), q(e);
 		}
 	}, $ = (e) => e.preventDefault();
-	return /* @__PURE__ */ f(n, {
+	return /* @__PURE__ */ p(r, {
 		sx: { mb: 2 },
-		children: [/* @__PURE__ */ d(t, {
-			options: b,
+		className: e.autocomplete,
+		children: [/* @__PURE__ */ f(n, {
+			options: S,
 			filterOptions: j ? (e) => e : void 0,
 			value: null,
-			open: oe,
+			open: se,
 			onOpen: () => {
 				X || U(!0);
 			},
 			onClose: () => U(!1),
 			size: re,
 			disabled: J,
-			loading: D,
+			loading: O,
 			getOptionLabel: (e) => e.label,
-			inputValue: x,
+			inputValue: C,
 			onInputChange: (e, t, n) => {
-				n === "input" && C(t);
+				n === "input" && T(t);
 			},
 			onChange: (e, t) => {
-				t && w(t);
+				t && te(t);
 			},
 			slotProps: { listbox: { sx: {
 				display: "flex",
@@ -170,11 +172,11 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 					overflowY: "auto"
 				}
 			} } },
-			renderInput: (e) => /* @__PURE__ */ d(s, {
+			renderInput: (e) => /* @__PURE__ */ f(c, {
 				...e,
-				label: S.autoCompleteLabel,
-				placeholder: S.placeholder,
-				helperText: O && !E ? S.maxTagsReachedText : void 0,
+				label: w.autoCompleteLabel,
+				placeholder: w.placeholder,
+				helperText: k && !D ? w.maxTagsReachedText : void 0,
 				onKeyDown: (e) => {
 					X && !J && e.key === "Enter" && (e.preventDefault(), Q());
 				},
@@ -182,52 +184,54 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 					...e.slotProps,
 					input: {
 						...e.slotProps?.input,
-						endAdornment: /* @__PURE__ */ f(u, { children: [X && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(i, {
+						endAdornment: /* @__PURE__ */ p(d, { children: [X && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(a, {
 							size: "small",
 							sx: { color: "success.main" },
 							onMouseDown: $,
 							onClick: Q,
 							disabled: J,
-							"aria-label": S.confirmCreateLabel,
-							children: /* @__PURE__ */ d(p, { fontSize: "small" })
-						}), /* @__PURE__ */ d(i, {
+							"aria-label": w.confirmCreateLabel,
+							children: /* @__PURE__ */ f(m, { fontSize: "small" })
+						}), /* @__PURE__ */ f(a, {
 							size: "small",
 							onMouseDown: $,
-							onClick: se,
-							"aria-label": S.cancelCreateLabel,
-							children: /* @__PURE__ */ d(ee, { fontSize: "small" })
+							onClick: ce,
+							"aria-label": w.cancelCreateLabel,
+							children: /* @__PURE__ */ f(ee, { fontSize: "small" })
 						})] }), e.slotProps?.input?.endAdornment] })
 					}
 				}
 			}),
-			renderOption: ({ key: e, ...t }, n) => {
-				let i = !!(n.foregroundColor || n.backgroundColor);
-				return /* @__PURE__ */ d("li", {
-					...t,
+			renderOption: ({ key: t, ...n }, r) => {
+				let a = !!(r.foregroundColor || r.backgroundColor);
+				return /* @__PURE__ */ f("li", {
+					...n,
 					style: {
 						width: "auto",
 						padding: 0,
 						margin: 0
 					},
-					children: /* @__PURE__ */ d(r, {
-						size: T,
+					children: /* @__PURE__ */ f(i, {
+						size: E,
 						variant: ie,
-						label: _(n.label, x),
-						color: i ? void 0 : n.color ?? "default",
-						sx: i ? {
-							color: n.foregroundColor ?? "inherit",
-							backgroundColor: n.backgroundColor ?? "transparent"
+						label: y(r.label, C),
+						color: a ? void 0 : r.color ?? "default",
+						className: e.option,
+						sx: a ? {
+							color: r.foregroundColor ?? "inherit",
+							backgroundColor: r.backgroundColor ?? "transparent"
 						} : void 0
 					})
-				}, e);
+				}, t);
 			},
 			isOptionEqualToValue: (e, t) => e.id === t.id,
-			noOptionsText: S.noAvailableTagsText,
-			loadingText: S.loadingText
-		}), X && /* @__PURE__ */ f(n, {
+			noOptionsText: w.noAvailableTagsText,
+			loadingText: w.loadingText
+		}), X && /* @__PURE__ */ p(r, {
 			sx: { position: "relative" },
 			onMouseDown: $,
-			children: [/* @__PURE__ */ f(a, {
+			className: e.createPanel,
+			children: [/* @__PURE__ */ p(o, {
 				direction: "row",
 				sx: {
 					mt: .5,
@@ -235,8 +239,8 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 					gap: .5,
 					alignItems: "center"
 				},
-				children: [te.map((e) => /* @__PURE__ */ d(r, {
-					size: T,
+				children: [h.map((e) => /* @__PURE__ */ f(i, {
+					size: E,
 					color: e,
 					label: e,
 					variant: !Y && M === e ? "filled" : "outlined",
@@ -244,10 +248,10 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 						N(e), F(null), L(null), V(!1);
 					},
 					clickable: !0
-				}, e)), /* @__PURE__ */ d(c, {
-					title: S.colorPickerLabel,
-					children: /* @__PURE__ */ d(r, {
-						size: T,
+				}, e)), /* @__PURE__ */ f(l, {
+					title: w.colorPickerLabel,
+					children: /* @__PURE__ */ f(i, {
+						size: E,
 						label: Y ? P : "···",
 						variant: "outlined",
 						onClick: () => {
@@ -274,7 +278,7 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 						clickable: !0
 					})
 				})]
-			}), B && /* @__PURE__ */ d(n, {
+			}), B && /* @__PURE__ */ f(r, {
 				sx: {
 					position: "absolute",
 					top: "calc(100% + 4px)",
@@ -288,13 +292,13 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 					p: 1.25,
 					width: "max-content"
 				},
-				children: /* @__PURE__ */ f(n, {
+				children: /* @__PURE__ */ p(r, {
 					sx: {
 						display: "grid",
 						gridTemplateColumns: "auto auto",
 						gap: 2
 					},
-					children: [/* @__PURE__ */ f(n, { children: [/* @__PURE__ */ d(l, {
+					children: [/* @__PURE__ */ p(r, { children: [/* @__PURE__ */ f(u, {
 						variant: "caption",
 						sx: {
 							fontWeight: 700,
@@ -302,29 +306,29 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 							display: "block",
 							mb: .5
 						},
-						children: S.backgroundColorLabel
-					}), /* @__PURE__ */ f(n, {
+						children: w.backgroundColorLabel
+					}), /* @__PURE__ */ p(r, {
 						sx: {
 							display: "grid",
 							gridTemplateColumns: "repeat(5, 24px)",
 							gap: .5
 						},
-						children: [m.map((e) => /* @__PURE__ */ d(v, {
+						children: [g.map((e) => /* @__PURE__ */ f(b, {
 							color: e,
 							selected: P === e,
-							onClick: () => ce(e)
-						}, e)), /* @__PURE__ */ d(n, {
+							onClick: () => le(e)
+						}, e)), /* @__PURE__ */ f(r, {
 							sx: {
 								gridColumn: "span 5",
 								mt: .25
 							},
-							children: /* @__PURE__ */ d(y, {
+							children: /* @__PURE__ */ f(x, {
 								value: W,
-								onChange: le
+								onChange: ue
 							})
 						})]
-					})] }), /* @__PURE__ */ f(n, { children: [
-						/* @__PURE__ */ d(l, {
+					})] }), /* @__PURE__ */ p(r, { children: [
+						/* @__PURE__ */ f(u, {
 							variant: "caption",
 							sx: {
 								fontWeight: 700,
@@ -332,9 +336,9 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 								display: "block",
 								mb: .5
 							},
-							children: S.textColorLabel
+							children: w.textColorLabel
 						}),
-						/* @__PURE__ */ f(n, {
+						/* @__PURE__ */ p(r, {
 							sx: {
 								display: "grid",
 								gridTemplateColumns: "repeat(5, 24px)",
@@ -343,23 +347,23 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 								pointerEvents: R ? "none" : "auto",
 								transition: "opacity 0.15s"
 							},
-							children: [m.map((e) => /* @__PURE__ */ d(v, {
+							children: [g.map((e) => /* @__PURE__ */ f(b, {
 								color: e,
 								selected: I === e,
-								onClick: () => ue(e)
-							}, e)), /* @__PURE__ */ d(n, {
+								onClick: () => de(e)
+							}, e)), /* @__PURE__ */ f(r, {
 								sx: {
 									gridColumn: "span 5",
 									mt: .25
 								},
-								children: /* @__PURE__ */ d(y, {
+								children: /* @__PURE__ */ f(x, {
 									value: R ? Z ?? "#000000" : K,
-									onChange: de,
+									onChange: fe,
 									disabled: R
 								})
 							})]
 						}),
-						/* @__PURE__ */ f(a, {
+						/* @__PURE__ */ p(o, {
 							direction: "row",
 							sx: {
 								width: "100%",
@@ -368,14 +372,14 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 								gap: .5,
 								mt: .25
 							},
-							children: [/* @__PURE__ */ d(l, {
+							children: [/* @__PURE__ */ f(u, {
 								variant: "caption",
 								color: "text.secondary",
-								children: S.autoTextColorLabel
-							}), /* @__PURE__ */ d(o, {
+								children: w.autoTextColorLabel
+							}), /* @__PURE__ */ f(s, {
 								size: "small",
 								checked: R,
-								onChange: (e) => fe(e.target.checked)
+								onChange: (e) => pe(e.target.checked)
 							})]
 						})
 					] })]
@@ -385,4 +389,4 @@ function b({ availableTags: b, searchValue: x, translation: S, onSearchChange: C
 	});
 }
 //#endregion
-export { b as TagSelectionAutocomplete };
+export { S as TagSelectionAutocomplete };

package/dist/components/tag-selection/TagSelectionChip.js

@@ -1,30 +1,33 @@
-import { Chip as e } from "@mui/material";
-import { jsx as t } from "react/jsx-runtime";
+import { muiTsStateClasses as e } from "../../utils/muiTsClasses.js";
+import { tagSelectionClasses as t } from "./tagSelectionClasses.js";
+import { Chip as n } from "@mui/material";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/components/tag-selection/TagSelectionChip.tsx
-function n({ tag: n, onDelete: r, onClick: i, chipSize: a = "medium", chipVariant: o = "filled", disabled: s = !1 }) {
-	let c = !!(n.foregroundColor || n.backgroundColor);
-	return /* @__PURE__ */ t(e, {
-		size: a,
-		label: n.label,
-		onDelete: r ? () => r(n) : void 0,
-		onClick: i ? () => i(n) : void 0,
-		clickable: !!i && !n.disabled && !s,
-		disabled: s || n.disabled,
-		variant: o,
-		color: c ? void 0 : n.color ?? "default",
+function i({ tag: i, onDelete: a, onClick: o, chipSize: s = "medium", chipVariant: c = "filled", disabled: l = !1 }) {
+	let u = !!(i.foregroundColor || i.backgroundColor), d = l || i.disabled;
+	return /* @__PURE__ */ r(n, {
+		size: s,
+		label: i.label,
+		onDelete: a ? () => a(i) : void 0,
+		onClick: o ? () => o(i) : void 0,
+		clickable: !!o && !i.disabled && !l,
+		disabled: d,
+		variant: c,
+		color: u ? void 0 : i.color ?? "default",
+		className: [t.chip, d && e.disabled].filter(Boolean).join(" "),
 		sx: {
-			...c && {
-				color: n.foregroundColor ?? "inherit",
-				backgroundColor: n.backgroundColor ?? "transparent",
-				borderColor: n.backgroundColor ?? void 0,
+			...u && {
+				color: i.foregroundColor ?? "inherit",
+				backgroundColor: i.backgroundColor ?? "transparent",
+				borderColor: i.backgroundColor ?? void 0,
 				"& .MuiChip-deleteIcon": {
-					color: n.foregroundColor ? `${n.foregroundColor}99` : "inherit",
-					"&:hover": { color: n.foregroundColor ?? "inherit" }
+					color: i.foregroundColor ? `${i.foregroundColor}99` : "inherit",
+					"&:hover": { color: i.foregroundColor ?? "inherit" }
 				}
 			},
-			cursor: i && !n.disabled && !s ? "pointer" : "default"
+			cursor: o && !i.disabled && !d ? "pointer" : "default"
 		}
 	});
 }
 //#endregion
-export { n as TagSelectionChip };
+export { i as TagSelectionChip };

package/dist/components/tag-selection/TagSelectionSelectedTags.js

@@ -1,57 +1,62 @@
-import { TagSelectionChip as e } from "./TagSelectionChip.js";
-import { useState as t } from "react";
-import { Box as n, Chip as r, Popover as i, Stack as a, Typography as o } from "@mui/material";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { tagSelectionClasses as e } from "./tagSelectionClasses.js";
+import { TagSelectionChip as t } from "./TagSelectionChip.js";
+import { useState as n } from "react";
+import { Box as r, Chip as i, Popover as a, Stack as o, Typography as s } from "@mui/material";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/tag-selection/TagSelectionSelectedTags.tsx
-function u({ selectedTags: u, translation: d, onTagDelete: f, showSelectedTagsLabel: p, chipSize: m = "medium", chipVariant: h = "filled", disabled: g = !1, maxVisibleChips: _, popoverPlacement: v = "bottom" }) {
-	let [y, b] = t(null), x = _ === void 0 ? u : u.slice(0, _), S = _ === void 0 ? [] : u.slice(_), C = !!y && S.length > 0, w = v === "top" ? {
+function d({ selectedTags: d, translation: f, onTagDelete: p, showSelectedTagsLabel: m, chipSize: h = "medium", chipVariant: g = "filled", disabled: _ = !1, maxVisibleChips: v, popoverPlacement: y = "bottom" }) {
+	let [b, x] = n(null), S = v === void 0 ? d : d.slice(0, v), C = v === void 0 ? [] : d.slice(v), w = !!b && C.length > 0, T = y === "top" ? {
 		vertical: "top",
 		horizontal: "left"
 	} : {
 		vertical: "bottom",
 		horizontal: "left"
-	}, T = v === "top" ? {
+	}, E = y === "top" ? {
 		vertical: "bottom",
 		horizontal: "left"
 	} : {
 		vertical: "top",
 		horizontal: "left"
 	};
-	return /* @__PURE__ */ l(n, {
+	return /* @__PURE__ */ u(r, {
 		sx: { mb: 2 },
-		children: [p && /* @__PURE__ */ c(o, {
+		className: e.selectedTags,
+		children: [m && /* @__PURE__ */ l(s, {
 			variant: "subtitle2",
 			gutterBottom: !0,
-			children: d.selectedTagsLabel
-		}), u.length === 0 ? /* @__PURE__ */ c(o, {
+			className: e.selectedTagsLabel,
+			children: f.selectedTagsLabel
+		}), d.length === 0 ? /* @__PURE__ */ l(s, {
 			variant: "body2",
 			color: "text.secondary",
-			children: d.noSelectedTagsText
-		}) : /* @__PURE__ */ l(a, {
+			children: f.noSelectedTagsText
+		}) : /* @__PURE__ */ u(o, {
 			direction: "row",
 			sx: {
 				flexWrap: "wrap",
 				gap: 1
 			},
-			children: [x.map((t) => /* @__PURE__ */ c(e, {
-				tag: t,
-				onDelete: f,
-				chipSize: m,
-				chipVariant: h,
-				disabled: g
-			}, t.id)), S.length > 0 && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(r, {
-				size: m,
-				label: `+${S.length}`,
+			className: e.chipsStack,
+			children: [S.map((e) => /* @__PURE__ */ l(t, {
+				tag: e,
+				onDelete: p,
+				chipSize: h,
+				chipVariant: g,
+				disabled: _
+			}, e.id)), C.length > 0 && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(i, {
+				size: h,
+				label: `+${C.length}`,
 				variant: "outlined",
 				clickable: !0,
-				onClick: (e) => b(e.currentTarget)
-			}), /* @__PURE__ */ c(i, {
-				open: C,
-				anchorEl: y,
-				onClose: () => b(null),
-				anchorOrigin: w,
-				transformOrigin: T,
-				children: /* @__PURE__ */ c(n, {
+				onClick: (e) => x(e.currentTarget),
+				className: e.overflowChip
+			}), /* @__PURE__ */ l(a, {
+				open: w,
+				anchorEl: b,
+				onClose: () => x(null),
+				anchorOrigin: T,
+				transformOrigin: E,
+				children: /* @__PURE__ */ l(r, {
 					sx: {
 						p: 1,
 						display: "flex",
@@ -59,17 +64,18 @@ function u({ selectedTags: u, translation: d, onTagDelete: f, showSelectedTagsLa
 						gap: .5,
 						maxWidth: 320
 					},
-					children: S.map((t) => /* @__PURE__ */ c(e, {
-						tag: t,
-						onDelete: g ? void 0 : f,
-						chipSize: m,
-						chipVariant: h,
-						disabled: g
-					}, t.id))
+					className: e.overflowPopover,
+					children: C.map((e) => /* @__PURE__ */ l(t, {
+						tag: e,
+						onDelete: _ ? void 0 : p,
+						chipSize: h,
+						chipVariant: g,
+						disabled: _
+					}, e.id))
 				})
 			})] })]
 		})]
 	});
 }
 //#endregion
-export { u as TagSelectionSelectedTags };
+export { d as TagSelectionSelectedTags };

package/dist/components/tag-selection/tagSelectionClasses.d.ts

@@ -0,0 +1,34 @@
+/**
+ * CSS class names for every named slot in the TagSelection component.
+ *
+ * Use these to style individual parts of the component without relying on
+ * MUI's internal class names, which can change between versions.
+ *
+ * @example
+ * ```css
+ * .MuiTsTagSelection-chip { border-radius: 4px; }
+ * .MuiTsTagSelection-chip.MuiTs-disabled { opacity: 0.5; }
+ * ```
+ */
+export declare const tagSelectionClasses: {
+    /** The outermost wrapper element of the TagSelection component. Also receives `MuiTs-disabled` when `disabled={true}`. */
+    readonly root: "MuiTsTagSelection-root";
+    /** The area that shows the selected-tags section (label + chips). */
+    readonly selectedTags: "MuiTsTagSelection-selectedTags";
+    /** The label text above the selected chips ("Selected tags"). */
+    readonly selectedTagsLabel: "MuiTsTagSelection-selectedTagsLabel";
+    /** The flex row that wraps all selected chips. */
+    readonly chipsStack: "MuiTsTagSelection-chipsStack";
+    /** Each selected tag chip. Also receives `MuiTs-disabled` when the chip is disabled. */
+    readonly chip: "MuiTsTagSelection-chip";
+    /** The overflow "+N" chip shown when `maxVisibleChips` is exceeded. */
+    readonly overflowChip: "MuiTsTagSelection-overflowChip";
+    /** The content box inside the overflow popover. */
+    readonly overflowPopover: "MuiTsTagSelection-overflowPopover";
+    /** The autocomplete section (search input + dropdown). */
+    readonly autocomplete: "MuiTsTagSelection-autocomplete";
+    /** Each option chip rendered inside the autocomplete dropdown list. */
+    readonly option: "MuiTsTagSelection-option";
+    /** The create-tag panel (color row + palette) shown when `allowCreate={true}` and search has no match. */
+    readonly createPanel: "MuiTsTagSelection-createPanel";
+};

package/dist/components/tag-selection/tagSelectionClasses.js

@@ -0,0 +1,15 @@
+//#region src/components/tag-selection/tagSelectionClasses.ts
+var e = {
+	root: "MuiTsTagSelection-root",
+	selectedTags: "MuiTsTagSelection-selectedTags",
+	selectedTagsLabel: "MuiTsTagSelection-selectedTagsLabel",
+	chipsStack: "MuiTsTagSelection-chipsStack",
+	chip: "MuiTsTagSelection-chip",
+	overflowChip: "MuiTsTagSelection-overflowChip",
+	overflowPopover: "MuiTsTagSelection-overflowPopover",
+	autocomplete: "MuiTsTagSelection-autocomplete",
+	option: "MuiTsTagSelection-option",
+	createPanel: "MuiTsTagSelection-createPanel"
+};
+//#endregion
+export { e as tagSelectionClasses };