@thebuoyant-tsdev/mui-ts-library 3.2.1 → 3.6.0

package/dist/components/sql-editor/SqlEditorToolbar.js

@@ -0,0 +1,163 @@
+import { ToolbarButton as e } from "../shared/ToolbarButton.js";
+import { SqlEditorHistoryMenu as t } from "./SqlEditorHistoryMenu.js";
+import { useState as n } from "react";
+import { Box as r, Divider as i } from "@mui/material";
+import { redo as a, undo as o } from "@codemirror/commands";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@mui/icons-material/ContentCopy";
+import d from "@mui/icons-material/Check";
+import f from "@mui/icons-material/Delete";
+import p from "@mui/icons-material/Undo";
+import m from "@mui/icons-material/Redo";
+import h from "@mui/icons-material/AutoFixHigh";
+import g from "@mui/icons-material/PlayArrow";
+import { format as _ } from "sql-formatter";
+//#region src/components/sql-editor/SqlEditorToolbar.tsx
+var v = {
+	standard: "sql",
+	mysql: "mysql",
+	postgresql: "postgresql",
+	sqlite: "sqlite",
+	mssql: "tsql"
+};
+function y({ editorView: y, toolbarConfig: b, translation: x, dialect: S, disabled: C, onExecute: w, queryHistory: T = [], onSelectHistoryEntry: E, onClearHistory: D }) {
+	let [O, k] = n(!1), A = C || !y;
+	function j() {
+		let e = y?.state.doc.toString() ?? "";
+		navigator.clipboard.writeText(e).then(() => {
+			k(!0), setTimeout(() => k(!1), 2e3);
+		});
+	}
+	function M() {
+		let e = y;
+		e && (e.dispatch({ changes: {
+			from: 0,
+			to: e.state.doc.length,
+			insert: ""
+		} }), e.focus());
+	}
+	function N() {
+		let e = y;
+		e && (o(e), e.focus());
+	}
+	function P() {
+		let e = y;
+		e && (a(e), e.focus());
+	}
+	function F() {
+		let e = y;
+		if (!e) return;
+		let t = e.state.doc.toString();
+		try {
+			let n = _(t, { language: v[S] });
+			e.dispatch({ changes: {
+				from: 0,
+				to: e.state.doc.length,
+				insert: n
+			} });
+		} catch {}
+		e.focus();
+	}
+	function I() {
+		let e = y;
+		!e || !w || w(e.state.doc.toString());
+	}
+	let L = b.showFormat, R = b.showCopy || b.showClear, z = b.showUndoRedo, B = b.showExecute && !!w, V = b.showHistory && !!w && !!E && !!D;
+	return /* @__PURE__ */ l(r, {
+		sx: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center",
+			gap: .25,
+			px: 1,
+			py: .5
+		},
+		role: "toolbar",
+		"aria-label": "SQL editor actions",
+		children: [
+			L && /* @__PURE__ */ c(r, {
+				sx: {
+					display: "flex",
+					gap: .25
+				},
+				children: /* @__PURE__ */ c(e, {
+					label: x.format,
+					icon: /* @__PURE__ */ c(h, { fontSize: "small" }),
+					onClick: F,
+					disabled: A
+				})
+			}),
+			L && (R || z) && /* @__PURE__ */ c(i, {
+				orientation: "vertical",
+				flexItem: !0,
+				sx: { mx: .5 }
+			}),
+			R && /* @__PURE__ */ l(r, {
+				sx: {
+					display: "flex",
+					gap: .25
+				},
+				children: [b.showCopy && /* @__PURE__ */ c(e, {
+					label: O ? x.copySuccess : x.copy,
+					icon: O ? /* @__PURE__ */ c(d, {
+						fontSize: "small",
+						color: "success"
+					}) : /* @__PURE__ */ c(u, { fontSize: "small" }),
+					onClick: j,
+					disabled: A
+				}), b.showClear && /* @__PURE__ */ c(e, {
+					label: x.clear,
+					icon: /* @__PURE__ */ c(f, { fontSize: "small" }),
+					onClick: M,
+					disabled: A
+				})]
+			}),
+			R && z && /* @__PURE__ */ c(i, {
+				orientation: "vertical",
+				flexItem: !0,
+				sx: { mx: .5 }
+			}),
+			z && /* @__PURE__ */ l(r, {
+				sx: {
+					display: "flex",
+					gap: .25
+				},
+				children: [/* @__PURE__ */ c(e, {
+					label: x.undo,
+					icon: /* @__PURE__ */ c(p, { fontSize: "small" }),
+					onClick: N,
+					disabled: A
+				}), /* @__PURE__ */ c(e, {
+					label: x.redo,
+					icon: /* @__PURE__ */ c(m, { fontSize: "small" }),
+					onClick: P,
+					disabled: A
+				})]
+			}),
+			V && /* @__PURE__ */ l(s, { children: [(R || z) && /* @__PURE__ */ c(i, {
+				orientation: "vertical",
+				flexItem: !0,
+				sx: { mx: .5 }
+			}), /* @__PURE__ */ c(t, {
+				history: T,
+				onSelect: E,
+				onClear: D,
+				translation: x,
+				disabled: C
+			})] }),
+			B && /* @__PURE__ */ l(s, { children: [(R || z || V) && /* @__PURE__ */ c(i, {
+				orientation: "vertical",
+				flexItem: !0,
+				sx: { mx: .5 }
+			}), /* @__PURE__ */ c(e, {
+				label: x.execute,
+				icon: /* @__PURE__ */ c(g, { fontSize: "small" }),
+				onClick: I,
+				disabled: A
+			})] }),
+			!L && !R && !z && !V && !B && /* @__PURE__ */ c(r, { sx: { height: 32 } })
+		]
+	});
+}
+//#endregion
+export { y as SqlEditorToolbar };

package/dist/components/sql-editor/useSqlQueryHistory.d.ts

@@ -0,0 +1,6 @@
+import { type SqlQueryHistoryEntry } from "./util/sqlQueryHistory.util";
+export declare function useSqlQueryHistory(storageKey: string, maxEntries: number): {
+    history: SqlQueryHistoryEntry[];
+    addEntry: (sql: string) => void;
+    clearHistory: () => void;
+};

package/dist/components/sql-editor/useSqlQueryHistory.js

@@ -0,0 +1,20 @@
+import { addQueryToHistory as e, loadQueryHistory as t, saveQueryHistory as n } from "./util/sqlQueryHistory.util.js";
+import { useCallback as r, useState as i } from "react";
+//#region src/components/sql-editor/useSqlQueryHistory.ts
+function a(a, o) {
+	let [s, c] = i(() => t(a));
+	return {
+		history: s,
+		addEntry: r((t) => {
+			c((r) => {
+				let i = e(r, t, o);
+				return n(a, i), i;
+			});
+		}, [a, o]),
+		clearHistory: r(() => {
+			c([]), n(a, []);
+		}, [a])
+	};
+}
+//#endregion
+export { a as useSqlQueryHistory };

package/dist/components/sql-editor/util/sqlQueryHistory.util.d.ts

@@ -0,0 +1,12 @@
+export type SqlQueryHistoryEntry = {
+    sql: string;
+    timestamp: number;
+};
+export declare function loadQueryHistory(storageKey: string): SqlQueryHistoryEntry[];
+export declare function saveQueryHistory(storageKey: string, history: SqlQueryHistoryEntry[]): void;
+/**
+ * Adds a new entry to the front of the history. An existing entry with the
+ * same SQL is moved to the front instead of duplicated. Result is capped at
+ * maxEntries.
+ */
+export declare function addQueryToHistory(history: SqlQueryHistoryEntry[], sql: string, maxEntries: number): SqlQueryHistoryEntry[];

package/dist/components/sql-editor/util/sqlQueryHistory.util.js

@@ -0,0 +1,28 @@
+//#region src/components/sql-editor/util/sqlQueryHistory.util.ts
+function e(e) {
+	if (typeof window > "u") return [];
+	try {
+		let t = window.localStorage.getItem(e);
+		if (!t) return [];
+		let n = JSON.parse(t);
+		return Array.isArray(n) ? n.filter((e) => typeof e?.sql == "string" && typeof e?.timestamp == "number") : [];
+	} catch {
+		return [];
+	}
+}
+function t(e, t) {
+	if (!(typeof window > "u")) try {
+		window.localStorage.setItem(e, JSON.stringify(t));
+	} catch {}
+}
+function n(e, t, n) {
+	let r = t.trim();
+	if (!r) return e;
+	let i = e.filter((e) => e.sql !== r);
+	return [{
+		sql: r,
+		timestamp: Date.now()
+	}, ...i].slice(0, Math.max(0, n));
+}
+//#endregion
+export { n as addQueryToHistory, e as loadQueryHistory, t as saveQueryHistory };

package/dist/components/sunburst-chart/SunburstChart.js

@@ -0,0 +1,292 @@
+import { useCallback as e, useLayoutEffect as t, useMemo as n, useRef as r, useState as i } from "react";
+import { Box as a, Tooltip as o, Typography as s, useTheme as c } from "@mui/material";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import * as d from "d3";
+//#region src/components/sunburst-chart/SunburstChart.tsx
+var f = 2 * Math.PI, p = 11, m = p * .5, h = 5;
+function g(e, t = 0, n = ".", r = ",") {
+	if (e == null || !isFinite(e)) return "0";
+	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 ee(e, t) {
+	let n = Math.floor(t / m);
+	return n <= 0 ? "" : e.length <= n ? e : n < h ? "" : e.slice(0, n - 1) + "…";
+}
+function te({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsSep: r }) {
+	let i = (e.value ?? 0) > 0, o = e.ancestors().map((e) => e.data.name).reverse().join(" › ");
+	return /* @__PURE__ */ u(a, {
+		sx: { py: .25 },
+		children: [
+			/* @__PURE__ */ l(s, {
+				variant: "caption",
+				sx: {
+					fontWeight: "bold",
+					display: "block"
+				},
+				children: e.data.name
+			}),
+			i && /* @__PURE__ */ l(s, {
+				variant: "caption",
+				sx: {
+					display: "block",
+					opacity: .85
+				},
+				children: g(e.value ?? 0, t, n, r)
+			}),
+			e.depth > 0 && /* @__PURE__ */ l(s, {
+				variant: "caption",
+				sx: {
+					display: "block",
+					opacity: .65,
+					mt: .25
+				},
+				children: o
+			})
+		]
+	});
+}
+function _({ data: s, size: m = 500, showSegmentLabels: h = !0, innerRadius: g = 0, sortBy: _ = "value", chartColors: v, showRootLabel: y = !0, onSegmentClick: b, onZoomChange: x, valueDecimalCount: ne = 0, valueDecimalSeparator: re = ".", valueThousandsSeparator: S = ",", zoomable: C = !1, disabled: w = !1 }) {
+	let T = c(), E = r(null), [D, O] = i(`-${m / 2} -${m / 2} ${m} ${m}`), [k, A] = i(1), ie = n(() => {
+		if (k === 1) return D;
+		let [e, t, n, r] = D.split(" ").map(Number), i = n / k, a = r / k;
+		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
+	}, [D, k]), j = m / 2, M = Math.max(0, Math.min(g, Math.max(0, j - 1))), N = Math.max(1, j - M), ae = [
+		T.palette.primary.main,
+		T.palette.secondary.main,
+		T.palette.error.main,
+		T.palette.warning.main,
+		T.palette.success.main,
+		T.palette.info.main
+	], P = v && v.length > 0 ? v : ae, { root: F, ringThickness: I } = n(() => {
+		let e = d.hierarchy(s).sum((e) => e.value ?? 0);
+		_ === "value" ? e.sort((e, t) => (t.value ?? 0) - (e.value ?? 0)) : e.sort((e, t) => String(e.data.name).localeCompare(String(t.data.name), void 0, {
+			numeric: !0,
+			sensitivity: "base"
+		}));
+		let t = d.partition().size([f, N])(e), n = d.max(t.descendants(), (e) => e.depth) ?? 0, r = n > 0 ? N / n : N;
+		return n > 0 && t.descendants().forEach((e) => {
+			e.depth === 0 ? (e.y0 = 0, e.y1 = 0) : (e.y0 = (e.depth - 1) * r, e.y1 = e.depth * r);
+		}), {
+			root: t,
+			ringThickness: r
+		};
+	}, [
+		s,
+		N,
+		_
+	]), [L, R] = i(F), [z, oe] = i(F);
+	z !== F && (oe(F), R(F));
+	let B = n(() => F.children?.map((e) => e.data.name) ?? [F.data.name], [F]), se = n(() => d.scaleOrdinal().domain(B).range(P), [P, B]), V = (e) => {
+		if (e.data.colorConfig?.fill) return e.data.colorConfig.fill;
+		let t = e;
+		for (; t.depth > 1;) t = t.parent;
+		return se(t.data.name);
+	}, H = n(() => d.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).padAngle((e) => Math.min((e.x1 - e.x0) / 2, .005)).padRadius(j / 2).innerRadius((e) => M + e.y0).outerRadius((e) => M + e.y1 - 1), [j, M]), U = e((e) => {
+		let t = f / (L.x1 - L.x0), n = Math.max(0, Math.min(f, (e.x0 - L.x0) * t)), r = Math.max(0, Math.min(f, (e.x1 - L.x0) * t)), i = L.depth === 0 ? 0 : (L.depth - 1) * I;
+		return {
+			x0: n,
+			x1: r,
+			y0: Math.max(0, e.y0 - i),
+			y1: Math.max(0, e.y1 - i)
+		};
+	}, [L, I]), W = (e) => e.x1 > e.x0 && e.y1 > e.y0, G = (e) => (M + (e.y0 + e.y1) / 2) * (e.x1 - e.x0) > 12, ce = (e) => {
+		let t = (e.x0 + e.x1) / 2 * 180 / Math.PI, n = M + (e.y0 + e.y1) / 2, r = t < 180 ? 0 : 180;
+		return `rotate(${t - 90}) translate(${n},0) rotate(${r})`;
+	}, le = e((e) => e.ancestors().includes(L), [L]), K = e((e) => {
+		let t = e.ancestors().reverse(), n = e.value ?? 0, r = F.value ?? 0;
+		return {
+			id: e.data.id,
+			name: e.data.name,
+			value: n || null,
+			percentage: r > 0 ? Math.round(n / r * 1e4) / 100 : 0,
+			depth: e.depth,
+			path: t.map((e) => e.data.name),
+			pathIds: t.map((e) => e.data.id),
+			childrenCount: e.children?.length ?? 0,
+			data: e.data
+		};
+	}, [F]), q = e((e) => {
+		R(e), x && x({
+			focusNode: K(e),
+			isRoot: e === F
+		});
+	}, [
+		F,
+		K,
+		x
+	]);
+	t(() => {
+		let e = E.current;
+		if (!e) return;
+		let t = requestAnimationFrame(() => {
+			try {
+				let t = e.getBBox();
+				O(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
+			} catch {
+				O(`-${m / 2} -${m / 2} ${m} ${m}`);
+			}
+		});
+		return () => cancelAnimationFrame(t);
+	}, [
+		m,
+		F,
+		L,
+		M,
+		I,
+		y
+	]);
+	let J = r(null), ue = (e) => {
+		J.current &&= (clearTimeout(J.current), null), J.current = setTimeout(() => {
+			e(), J.current = null;
+		}, 250);
+	}, Y = () => {
+		J.current &&= (clearTimeout(J.current), null);
+	};
+	t(() => {
+		if (w) return;
+		let e = (e) => {
+			e.key === "Escape" && (Y(), q(F), A(1));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		w,
+		F,
+		q
+	]);
+	let de = e((e) => {
+		if (!C || w || !e.ctrlKey) return;
+		e.preventDefault();
+		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+		A((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [C, w]), X = F.descendants().filter((e) => e.depth > 0), fe = (e) => {
+		if (w) return;
+		let t = X[Number(e.currentTarget.getAttribute("data-idx"))];
+		if (t) {
+			if (e.ctrlKey || e.metaKey) {
+				t.children && ue(() => q(t));
+				return;
+			}
+			b?.(K(t), e);
+		}
+	}, pe = (e) => {
+		w || (e.ctrlKey || e.metaKey) && (Y(), q(L.parent ?? F));
+	}, Z = (e) => {
+		if (!w) {
+			if (e.ctrlKey || e.metaKey) {
+				Y(), q(L.parent ?? F);
+				return;
+			}
+			b?.(K(L.parent ?? F), e);
+		}
+	}, Q = {
+		followCursor: !0,
+		enterDelay: 50,
+		enterNextDelay: 0,
+		disableHoverListener: w,
+		slotProps: { tooltip: { sx: { maxWidth: 260 } } }
+	}, $ = T.palette.text.primary, me = T.typography.fontFamily;
+	return /* @__PURE__ */ l(a, {
+		sx: {
+			display: "inline-flex",
+			opacity: w ? .5 : 1,
+			cursor: w ? "not-allowed" : "default",
+			userSelect: "none"
+		},
+		children: /* @__PURE__ */ l("svg", {
+			width: m,
+			height: m,
+			viewBox: ie,
+			onWheel: de,
+			style: {
+				fontFamily: me ?? "sans-serif",
+				overflow: C && k > 1 ? "hidden" : "visible"
+			},
+			role: "img",
+			"aria-label": s.name,
+			children: /* @__PURE__ */ u("g", {
+				ref: E,
+				children: [
+					M > 0 && /* @__PURE__ */ l(o, {
+						...Q,
+						title: L.data.name,
+						placement: "top",
+						children: /* @__PURE__ */ l("circle", {
+							cx: 0,
+							cy: 0,
+							r: M,
+							fill: "transparent",
+							pointerEvents: w ? "none" : "auto",
+							onClick: Z,
+							style: { cursor: w ? "not-allowed" : "pointer" }
+						})
+					}),
+					/* @__PURE__ */ l("g", { children: X.map((e, t) => {
+						let n = U(e), r = W(n), i = !!e.children;
+						return /* @__PURE__ */ l(o, {
+							...Q,
+							placement: "top",
+							title: r ? /* @__PURE__ */ l(te, {
+								node: e,
+								valueDecimalCount: ne,
+								valueDecimalSep: re,
+								valueThousandsSep: S
+							}) : "",
+							children: /* @__PURE__ */ l("path", {
+								"data-idx": t,
+								d: H(n) || "",
+								fill: V(e),
+								fillOpacity: r ? i ? .75 : .5 : 0,
+								style: {
+									pointerEvents: r && !w ? "auto" : "none",
+									cursor: i && !w ? "pointer" : "default",
+									transition: "fill-opacity 0.15s"
+								},
+								onClick: fe,
+								onDoubleClick: pe
+							})
+						}, `tt-${e.data.id}-${t}`);
+					}) }),
+					h && /* @__PURE__ */ l("g", {
+						pointerEvents: "none",
+						textAnchor: "middle",
+						fill: $,
+						children: X.map((e, t) => {
+							if (!le(e)) return null;
+							let n = U(e);
+							if (!G(n)) return null;
+							let r = (M + (n.y0 + n.y1) / 2) * (n.x1 - n.x0) * .88, i = ee(e.data.name, r);
+							return i ? /* @__PURE__ */ l("text", {
+								transform: ce(n),
+								dy: "0.35em",
+								fontSize: p,
+								children: i
+							}, `lbl-${e.data.id}-${t}`) : null;
+						})
+					}),
+					y && /* @__PURE__ */ l(o, {
+						...Q,
+						placement: "top",
+						title: "",
+						children: /* @__PURE__ */ l("g", {
+							textAnchor: "middle",
+							fill: $,
+							pointerEvents: w ? "none" : "auto",
+							onClick: Z,
+							style: { cursor: L !== F && !w ? "pointer" : "default" },
+							children: /* @__PURE__ */ l("text", {
+								fontSize: 13,
+								dy: "0.35em",
+								fontWeight: "bold",
+								children: L.data.name
+							})
+						})
+					})
+				]
+			})
+		})
+	});
+}
+_.displayName = "SunburstChart";
+//#endregion
+export { _ as SunburstChart };

package/dist/components/sunburst-chart/SunburstChart.types.js

@@ -0,0 +1,4 @@
+//#region src/components/sunburst-chart/SunburstChart.types.ts
+var e = { noData: "No data" };
+//#endregion
+export { e as DEFAULT_SUNBURST_CHART_TRANSLATION };

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

@@ -0,0 +1,102 @@
+import { createTagSelectionStore as e } from "./TagSelection.store.js";
+import { TagSelectionAutocomplete as t } from "./TagSelectionAutocomplete.js";
+import { TagSelectionSelectedTags as n } from "./TagSelectionSelectedTags.js";
+import { DEFAULT_TAG_SELECTION_TRANSLATION as r } from "./TagSelection.types.js";
+import { createContext as i, useContext as a, useEffect as o, useMemo as s, useState as c } from "react";
+import { Box as l, Stack as u } from "@mui/material";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useStore as p } from "zustand";
+//#region src/components/tag-selection/TagSelection.tsx
+var m = i(null);
+function h(e) {
+	let t = a(m);
+	if (!t) throw Error("TagSelectionStoreContext is missing.");
+	return p(t, e);
+}
+function g({ tags: e, showSelectedTags: r = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, inputSize: c = "medium", chipSize: p = "small", disabled: m = !1, loading: g = !1, maxTags: _, allowCreate: v = !1, maxVisibleChips: y, popoverPlacement: b = "bottom", listboxMaxHeight: x, translation: S, onTagSelect: C, onTagDelete: w, onTagsChange: T, onSearchChange: E, onTagCreate: D }) {
+	let O = h((e) => e.tags), k = h((e) => e.searchValue), A = h((e) => e.setTags), j = h((e) => e.setSearchValue), M = h((e) => e.selectTag), N = h((e) => e.deleteTag), P = h((e) => e.addTag);
+	o(() => {
+		A(e);
+	}, [e, A]);
+	let F = s(() => O.filter((e) => e.selected).sort((e, t) => e.label.localeCompare(t.label)), [O]), I = s(() => O.filter((e) => !e.selected && !e.disabled).sort((e, t) => e.label.localeCompare(t.label)), [O]), L = _ !== void 0 && F.length >= _, R = (e) => {
+		T && T(e.filter((e) => e.selected), e);
+	};
+	return /* @__PURE__ */ d(l, {
+		sx: { width: "100%" },
+		children: /* @__PURE__ */ f(u, { children: [r && /* @__PURE__ */ d(n, {
+			selectedTags: F,
+			translation: S,
+			onTagDelete: (e) => {
+				N(e.id);
+				let t = O.map((t) => t.id === e.id ? {
+					...t,
+					selected: !1
+				} : t), n = t.filter((e) => e.selected), r = t.find((t) => t.id === e.id);
+				r && w && w(r, n, t), R(t);
+			},
+			showSelectedTagsLabel: i,
+			chipSize: p,
+			disabled: m,
+			maxVisibleChips: y,
+			popoverPlacement: b
+		}), a && /* @__PURE__ */ d(t, {
+			availableTags: I,
+			searchValue: k,
+			translation: S,
+			onSearchChange: (e) => {
+				j(e), E && E(e);
+			},
+			onTagSelect: (e) => {
+				if (e.disabled || e.selected) return;
+				M(e.id);
+				let t = O.map((t) => t.id === e.id ? {
+					...t,
+					selected: !0
+				} : t), n = t.filter((e) => e.selected), r = t.find((t) => t.id === e.id);
+				r && C && C(r, n, t), R(t);
+			},
+			onTagCreate: (e) => {
+				P(e), R([...O, e]), D && D(e);
+			},
+			inputSize: c,
+			chipSize: p,
+			disabled: m,
+			loading: g,
+			isMaxReached: L,
+			allowCreate: v,
+			listboxMaxHeight: x
+		})] })
+	});
+}
+function _({ tags: t, showSelectedTags: n = !0, showSelectedTagsLabel: i = !0, showAutoComplete: a = !0, translation: o, inputSize: s = "medium", chipSize: l = "small", disabled: u = !1, loading: f = !1, maxTags: p, allowCreate: h = !1, maxVisibleChips: _, popoverPlacement: v = "bottom", listboxMaxHeight: y, onTagSelect: b, onTagDelete: x, onTagsChange: S, onSearchChange: C, onTagCreate: w }) {
+	let T = {
+		...r,
+		...o
+	}, [E] = c(() => e(t));
+	return /* @__PURE__ */ d(m.Provider, {
+		value: E,
+		children: /* @__PURE__ */ d(g, {
+			tags: t,
+			showSelectedTags: n,
+			showSelectedTagsLabel: i,
+			showAutoComplete: a,
+			translation: T,
+			inputSize: s,
+			chipSize: l,
+			disabled: u,
+			loading: f,
+			maxTags: p,
+			allowCreate: h,
+			maxVisibleChips: _,
+			popoverPlacement: v,
+			listboxMaxHeight: y,
+			onTagSelect: b,
+			onTagDelete: x,
+			onTagsChange: S,
+			onSearchChange: C,
+			onTagCreate: w
+		})
+	});
+}
+//#endregion
+export { _ as TagSelection };

package/dist/components/tag-selection/TagSelection.store.js

@@ -0,0 +1,40 @@
+import { createStore as e } from "zustand/vanilla";
+//#region src/components/tag-selection/TagSelection.store.ts
+function t(t) {
+	return e((e) => ({
+		tags: t,
+		searchValue: "",
+		setTags: (t) => {
+			e({ tags: t });
+		},
+		setSearchValue: (t) => {
+			e({ searchValue: t });
+		},
+		selectTag: (t) => {
+			e((e) => ({
+				tags: e.tags.map((e) => e.id === t && !e.disabled ? {
+					...e,
+					selected: !0
+				} : e),
+				searchValue: ""
+			}));
+		},
+		deleteTag: (t) => {
+			e((e) => ({ tags: e.tags.map((e) => e.id === t ? {
+				...e,
+				selected: !1
+			} : e) }));
+		},
+		addTag: (t) => {
+			e((e) => ({
+				tags: [...e.tags, {
+					...t,
+					selected: !0
+				}],
+				searchValue: ""
+			}));
+		}
+	}));
+}
+//#endregion
+export { t as createTagSelectionStore };

package/dist/components/tag-selection/TagSelection.types.d.ts

@@ -20,6 +20,8 @@ export type TagSelectionTranslation = {
     backgroundColorLabel: string;
     textColorLabel: string;
     autoTextColorLabel: string;
+    confirmCreateLabel: string;
+    cancelCreateLabel: string;
 };
 export declare const DEFAULT_TAG_SELECTION_TRANSLATION: TagSelectionTranslation;
 export type TagSelectionProps = {