@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/components/dashboard/GlobalFiltersBar/FilterChip.js

@@ -1,7 +1,8 @@
 import { useEffect as e, useRef as t, useState as n } from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/GlobalFiltersBar/FilterChip.tsx
-var o = (e) => ({
+var s = (e) => ({
 	bgPrimary: e ? "#1f2937" : "#ffffff",
 	bgSecondary: e ? "#374151" : "#f9fafb",
 	textPrimary: e ? "#f9fafb" : "#111827",
@@ -17,7 +18,7 @@ var o = (e) => ({
 	actionPrimaryText: e ? "#c7d2fe" : "#4338ca",
 	backdropBg: "rgba(0, 0, 0, 0.5)"
 });
-function s() {
+function c() {
 	let [t, r] = n(!1);
 	return e(() => {
 		let e = () => {
@@ -31,12 +32,12 @@ function s() {
 		}), () => t.disconnect();
 	}, []), t;
 }
-function c(e, t) {
-	if (e == null) return "All";
+function l(e, t, n) {
+	if (e == null) return n("bigconsole.filters.chip.value.all", "All");
 	switch (t) {
 		case "DATE_RANGE": {
 			let t = e;
-			return t.start && t.end ? `${l(t.start)} - ${l(t.end)}` : "All dates";
+			return t.start && t.end ? `${u(t.start)} - ${u(t.end)}` : n("bigconsole.filters.chip.value.allDates", "All dates");
 		}
 		case "CATEGORY":
 			if (Array.isArray(e) && e.length > 0) {
@@ -44,75 +45,75 @@ function c(e, t) {
 					let t = e[0];
 					return (typeof t == "object" && t ? t.label : t) || String(e[0]);
 				}
-				return `${e.length} selected`;
+				return n("bigconsole.filters.chip.value.countSelected", "{{count}} selected", { count: e.length });
 			}
-			return typeof e == "object" && e ? e.label || "All" : String(e) || "All";
-		case "TEXT_SEARCH": return e || "Any";
+			return typeof e == "object" && e ? e.label || n("bigconsole.filters.chip.value.all", "All") : String(e) || n("bigconsole.filters.chip.value.all", "All");
+		case "TEXT_SEARCH": return e || n("bigconsole.filters.chip.value.any", "Any");
 		case "NUMERIC_RANGE": {
 			let t = e;
-			return t.min !== void 0 && t.max !== void 0 ? `${t.min} - ${t.max}` : t.min === void 0 ? t.max === void 0 ? "Any" : `<= ${t.max}` : `>= ${t.min}`;
+			return t.min !== void 0 && t.max !== void 0 ? `${t.min} - ${t.max}` : t.min === void 0 ? t.max === void 0 ? n("bigconsole.filters.chip.value.any", "Any") : `<= ${t.max}` : `>= ${t.min}`;
 		}
 		case "CUSTOM": return typeof e == "object" ? JSON.stringify(e).substring(0, 30) + "..." : String(e);
 		default: return String(e);
 	}
 }
-function l(e) {
+function u(e) {
 	return new Date(e).toLocaleDateString("en-US", {
 		month: "short",
 		day: "numeric"
 	});
 }
-function u({ filter: l, value: u, onChange: f, onEdit: p, onDelete: m }) {
-	let [h, g] = n(!1), [_, v] = n(!1), y = t(null), b = t(null), x = o(s()), S = u != null && u !== "", C = c(u, l.type);
+function d({ filter: u, value: d, onChange: p, onEdit: m, onDelete: h }) {
+	let { t: g } = r(), [_, v] = n(!1), [y, b] = n(!1), x = t(null), S = t(null), C = s(c()), w = d != null && d !== "", T = l(d, u.type, g);
 	return e(() => {
 		function e(e) {
-			y.current && !y.current.contains(e.target) && (g(!1), v(!1));
+			x.current && !x.current.contains(e.target) && (v(!1), b(!1));
 		}
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, []), /* @__PURE__ */ a("div", {
-		ref: y,
+	}, []), /* @__PURE__ */ o("div", {
+		ref: x,
 		style: {
 			position: "relative",
 			display: "inline-flex",
 			alignItems: "center",
-			gap: "8px",
-			padding: "8px 16px",
-			backgroundColor: S ? x.actionPrimaryBgSubtle : x.bgPrimary,
-			border: `2px solid ${S ? x.actionPrimaryBg : x.textTertiary}`,
-			borderRadius: "24px",
-			fontSize: "15px",
+			gap: "var(--space-iconGap)",
+			padding: "0 var(--space-controlGap)",
+			backgroundColor: w ? "var(--color-bg-accentSubtle)" : "var(--color-bg-surface)",
+			border: `1px solid ${w ? "var(--color-action-primary-border)" : "var(--color-border-subtle)"}`,
+			borderRadius: "var(--radius-pill)",
+			fontSize: "var(--font-size-body-sm)",
 			cursor: "pointer",
 			userSelect: "none",
-			boxShadow: "0 2px 6px rgba(0,0,0,0.12)",
-			transition: "all 0.2s ease",
-			minHeight: "36px"
+			transition: "background-color 0.15s ease, border-color 0.15s ease",
+			minHeight: "var(--size-controlHeight-md)",
+			maxWidth: "100%"
 		},
 		children: [
-			/* @__PURE__ */ a("span", {
+			/* @__PURE__ */ o("span", {
 				style: {
-					fontWeight: 700,
-					color: S ? x.actionPrimaryText : x.textPrimary,
-					fontSize: "14px"
+					fontWeight: "var(--font-weight-semibold)",
+					color: "var(--color-text-primary)",
+					fontSize: "var(--font-size-body-sm)"
 				},
-				onClick: () => g(!h),
-				children: [l.name, ":"]
+				onClick: () => v(!_),
+				children: [u.name, ":"]
 			}),
-			/* @__PURE__ */ i("span", {
+			/* @__PURE__ */ a("span", {
 				style: {
-					color: S ? x.actionPrimaryBg : x.textSecondary,
-					maxWidth: "200px",
+					color: w ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+					maxWidth: "min(200px, 45vw)",
 					overflow: "hidden",
 					textOverflow: "ellipsis",
 					whiteSpace: "nowrap",
-					fontWeight: 600,
-					fontSize: "14px"
+					fontWeight: "var(--font-weight-medium)",
+					fontSize: "var(--font-size-body-sm)"
 				},
-				onClick: () => g(!h),
-				children: C
+				onClick: () => v(!_),
+				children: T
 			}),
-			S && /* @__PURE__ */ i("button", {
+			w && /* @__PURE__ */ a("button", {
 				onClick: (e) => {
-					e.stopPropagation(), f(void 0);
+					e.stopPropagation(), p(void 0);
 				},
 				style: {
 					display: "flex",
@@ -121,22 +122,22 @@ function u({ filter: l, value: u, onChange: f, onEdit: p, onDelete: m }) {
 					width: "22px",
 					height: "22px",
 					padding: 0,
-					backgroundColor: x.statusErrorBg,
+					backgroundColor: C.statusErrorBg,
 					border: "none",
 					borderRadius: "50%",
 					cursor: "pointer",
-					color: x.actionPrimaryFg,
+					color: C.actionPrimaryFg,
 					fontSize: "14px",
 					fontWeight: "bold",
 					marginLeft: "4px",
-					boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+					boxShadow: "var(--shadow-elevation-1)"
 				},
-				title: "Clear filter",
+				title: g("bigconsole.filters.chip.action.clear", "Clear filter"),
 				children: "×"
 			}),
-			/* @__PURE__ */ i("button", {
+			/* @__PURE__ */ a("button", {
 				onClick: (e) => {
-					e.stopPropagation(), v(!_);
+					e.stopPropagation(), b(!y);
 				},
 				style: {
 					display: "flex",
@@ -145,28 +146,28 @@ function u({ filter: l, value: u, onChange: f, onEdit: p, onDelete: m }) {
 					width: "22px",
 					height: "22px",
 					padding: 0,
-					backgroundColor: x.textTertiary,
+					backgroundColor: C.textTertiary,
 					border: "none",
 					borderRadius: "50%",
 					cursor: "pointer",
-					color: x.actionPrimaryFg,
+					color: C.actionPrimaryFg,
 					fontSize: "16px",
 					fontWeight: "bold",
 					marginLeft: "4px",
-					boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+					boxShadow: "var(--shadow-elevation-1)"
 				},
-				title: "Filter options",
+				title: g("bigconsole.filters.chip.action.options", "Filter options"),
 				children: "⋮"
 			}),
-			h && /* @__PURE__ */ i(d, {
-				filter: l,
-				value: u,
+			_ && /* @__PURE__ */ a(f, {
+				filter: u,
+				value: d,
 				onChange: (e) => {
-					f(e), g(!1);
+					p(e), v(!1);
 				},
-				onClose: () => g(!1)
+				onClose: () => v(!1)
 			}),
-			_ && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
+			y && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
 				style: {
 					position: "fixed",
 					top: 0,
@@ -176,26 +177,27 @@ function u({ filter: l, value: u, onChange: f, onEdit: p, onDelete: m }) {
 					zIndex: 99998
 				},
 				onClick: (e) => {
-					e.stopPropagation(), v(!1);
+					e.stopPropagation(), b(!1);
 				}
-			}), /* @__PURE__ */ a("div", {
-				ref: b,
+			}), /* @__PURE__ */ o("div", {
+				ref: S,
 				style: {
 					position: "absolute",
 					top: "100%",
 					right: 0,
 					marginTop: "8px",
-					minWidth: "150px",
-					backgroundColor: x.bgPrimary,
-					border: `1px solid ${x.borderDefault}`,
+					minWidth: "min(150px, calc(100vw - 2rem))",
+					maxWidth: "calc(100vw - 2rem)",
+					backgroundColor: C.bgPrimary,
+					border: `1px solid ${C.borderDefault}`,
 					borderRadius: "8px",
-					boxShadow: "0 8px 24px rgba(0,0,0,0.2)",
+					boxShadow: "var(--shadow-elevation-3)",
 					zIndex: 99999,
 					overflow: "hidden"
 				},
-				children: [/* @__PURE__ */ i("button", {
+				children: [/* @__PURE__ */ o("button", {
 					onClick: (e) => {
-						e.stopPropagation(), v(!1), p();
+						e.stopPropagation(), b(!1), m();
 					},
 					style: {
 						display: "flex",
@@ -206,16 +208,16 @@ function u({ filter: l, value: u, onChange: f, onEdit: p, onDelete: m }) {
 						textAlign: "left",
 						backgroundColor: "transparent",
 						border: "none",
-						borderBottom: `1px solid ${x.borderDefault}`,
+						borderBottom: `1px solid ${C.borderDefault}`,
 						cursor: "pointer",
 						fontSize: "14px",
-						color: x.textPrimary,
+						color: C.textPrimary,
 						fontWeight: 500
 					},
-					children: "✏️ Edit Filter"
-				}), /* @__PURE__ */ i("button", {
+					children: ["✏️ ", g("bigconsole.filters.chip.menu.edit", "Edit Filter")]
+				}), /* @__PURE__ */ o("button", {
 					onClick: (e) => {
-						e.stopPropagation(), v(!1), m();
+						e.stopPropagation(), b(!1), h();
 					},
 					style: {
 						display: "flex",
@@ -228,18 +230,18 @@ function u({ filter: l, value: u, onChange: f, onEdit: p, onDelete: m }) {
 						border: "none",
 						cursor: "pointer",
 						fontSize: "14px",
-						color: x.statusErrorText,
+						color: C.statusErrorText,
 						fontWeight: 500
 					},
-					children: "🗑️ Delete Filter"
+					children: ["🗑️ ", g("bigconsole.filters.chip.menu.delete", "Delete Filter")]
 				})]
 			})] })
 		]
 	});
 }
-function d({ filter: e, value: t, onChange: c, onClose: l }) {
-	let [u, d] = n(t), f = o(s());
-	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
+function f({ filter: e, value: t, onChange: l, onClose: u }) {
+	let { t: d } = r(), [f, p] = n(t), m = s(c());
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
 		style: {
 			position: "fixed",
 			top: 0,
@@ -248,202 +250,203 @@ function d({ filter: e, value: t, onChange: c, onClose: l }) {
 			bottom: 0,
 			zIndex: 99998
 		},
-		onClick: l
-	}), /* @__PURE__ */ a("div", {
+		onClick: u
+	}), /* @__PURE__ */ o("div", {
 		style: {
 			position: "absolute",
 			top: "100%",
 			left: 0,
 			marginTop: "8px",
-			minWidth: "280px",
+			minWidth: "min(280px, calc(100vw - 2rem))",
+			maxWidth: "calc(100vw - 2rem)",
 			padding: "16px",
-			backgroundColor: f.bgPrimary,
-			border: `1px solid ${f.borderDefault}`,
+			backgroundColor: m.bgPrimary,
+			border: `1px solid ${m.borderDefault}`,
 			borderRadius: "12px",
-			boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
+			boxShadow: "var(--shadow-elevation-3)",
 			zIndex: 99999
 		},
 		onClick: (e) => e.stopPropagation(),
 		children: [
-			e.type === "TEXT_SEARCH" && /* @__PURE__ */ i("input", {
+			e.type === "TEXT_SEARCH" && /* @__PURE__ */ a("input", {
 				type: "text",
-				value: u || "",
-				onChange: (e) => d(e.target.value),
-				placeholder: "Search...",
+				value: f || "",
+				onChange: (e) => p(e.target.value),
+				placeholder: d("bigconsole.filters.chip.editor.searchPlaceholder", "Search..."),
 				style: {
 					width: "100%",
 					padding: "8px",
-					border: `1px solid ${f.borderDefault}`,
+					border: `1px solid ${m.borderDefault}`,
 					borderRadius: "4px",
 					fontSize: "13px",
 					boxSizing: "border-box",
-					backgroundColor: f.bgPrimary,
-					color: f.textPrimary
+					backgroundColor: m.bgPrimary,
+					color: m.textPrimary
 				}
 			}),
-			e.type === "CATEGORY" && /* @__PURE__ */ a("select", {
-				value: u || "",
-				onChange: (e) => d(e.target.value),
+			e.type === "CATEGORY" && /* @__PURE__ */ o("select", {
+				value: f || "",
+				onChange: (e) => p(e.target.value),
 				style: {
 					width: "100%",
 					padding: "8px",
-					border: `1px solid ${f.borderDefault}`,
+					border: `1px solid ${m.borderDefault}`,
 					borderRadius: "4px",
 					fontSize: "13px",
-					backgroundColor: f.bgPrimary,
-					color: f.textPrimary
+					backgroundColor: m.bgPrimary,
+					color: m.textPrimary
 				},
-				children: [/* @__PURE__ */ i("option", {
+				children: [/* @__PURE__ */ a("option", {
 					value: "",
-					children: "All"
-				}), e.config.options?.map((e) => /* @__PURE__ */ i("option", {
+					children: d("bigconsole.filters.chip.editor.allOption", "All")
+				}), e.config.options?.map((e) => /* @__PURE__ */ a("option", {
 					value: String(e.value),
 					children: String(e.label)
 				}, String(e.value)))]
 			}),
 			e.type === "DATE_RANGE" && (() => {
-				let e = u || {};
-				return /* @__PURE__ */ a("div", {
+				let e = f || {};
+				return /* @__PURE__ */ o("div", {
 					style: {
 						display: "flex",
 						flexDirection: "column",
 						gap: "8px"
 					},
-					children: [/* @__PURE__ */ i("input", {
+					children: [/* @__PURE__ */ a("input", {
 						type: "date",
 						value: e.start || "",
-						onChange: (t) => d({
+						onChange: (t) => p({
 							...e,
 							start: t.target.value
 						}),
 						style: {
 							padding: "8px",
-							border: `1px solid ${f.borderDefault}`,
+							border: `1px solid ${m.borderDefault}`,
 							borderRadius: "4px",
 							fontSize: "13px",
-							backgroundColor: f.bgPrimary,
-							color: f.textPrimary
+							backgroundColor: m.bgPrimary,
+							color: m.textPrimary
 						}
-					}), /* @__PURE__ */ i("input", {
+					}), /* @__PURE__ */ a("input", {
 						type: "date",
 						value: e.end || "",
-						onChange: (t) => d({
+						onChange: (t) => p({
 							...e,
 							end: t.target.value
 						}),
 						style: {
 							padding: "8px",
-							border: `1px solid ${f.borderDefault}`,
+							border: `1px solid ${m.borderDefault}`,
 							borderRadius: "4px",
 							fontSize: "13px",
-							backgroundColor: f.bgPrimary,
-							color: f.textPrimary
+							backgroundColor: m.bgPrimary,
+							color: m.textPrimary
 						}
 					})]
 				});
 			})(),
 			e.type === "NUMERIC_RANGE" && (() => {
-				let e = u || {};
-				return /* @__PURE__ */ a("div", {
+				let e = f || {};
+				return /* @__PURE__ */ o("div", {
 					style: {
 						display: "flex",
 						gap: "8px"
 					},
-					children: [/* @__PURE__ */ i("input", {
+					children: [/* @__PURE__ */ a("input", {
 						type: "number",
 						value: e.min ?? "",
-						onChange: (t) => d({
+						onChange: (t) => p({
 							...e,
 							min: t.target.value ? Number(t.target.value) : void 0
 						}),
-						placeholder: "Min",
+						placeholder: d("bigconsole.filters.chip.editor.minPlaceholder", "Min"),
 						style: {
 							flex: 1,
 							padding: "8px",
-							border: `1px solid ${f.borderDefault}`,
+							border: `1px solid ${m.borderDefault}`,
 							borderRadius: "4px",
 							fontSize: "13px",
-							backgroundColor: f.bgPrimary,
-							color: f.textPrimary
+							backgroundColor: m.bgPrimary,
+							color: m.textPrimary
 						}
-					}), /* @__PURE__ */ i("input", {
+					}), /* @__PURE__ */ a("input", {
 						type: "number",
 						value: e.max ?? "",
-						onChange: (t) => d({
+						onChange: (t) => p({
 							...e,
 							max: t.target.value ? Number(t.target.value) : void 0
 						}),
-						placeholder: "Max",
+						placeholder: d("bigconsole.filters.chip.editor.maxPlaceholder", "Max"),
 						style: {
 							flex: 1,
 							padding: "8px",
-							border: `1px solid ${f.borderDefault}`,
+							border: `1px solid ${m.borderDefault}`,
 							borderRadius: "4px",
 							fontSize: "13px",
-							backgroundColor: f.bgPrimary,
-							color: f.textPrimary
+							backgroundColor: m.bgPrimary,
+							color: m.textPrimary
 						}
 					})]
 				});
 			})(),
-			e.type === "CUSTOM" && /* @__PURE__ */ i("input", {
+			e.type === "CUSTOM" && /* @__PURE__ */ a("input", {
 				type: "text",
-				value: typeof u == "string" ? u : JSON.stringify(u || ""),
-				onChange: (e) => d(e.target.value),
-				placeholder: "Custom filter value...",
+				value: typeof f == "string" ? f : JSON.stringify(f || ""),
+				onChange: (e) => p(e.target.value),
+				placeholder: d("bigconsole.filters.chip.editor.customPlaceholder", "Custom filter value..."),
 				style: {
 					width: "100%",
 					padding: "8px",
-					border: `1px solid ${f.borderDefault}`,
+					border: `1px solid ${m.borderDefault}`,
 					borderRadius: "4px",
 					fontSize: "13px",
 					boxSizing: "border-box",
-					backgroundColor: f.bgPrimary,
-					color: f.textPrimary
+					backgroundColor: m.bgPrimary,
+					color: m.textPrimary
 				}
 			}),
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", {
 				style: {
 					marginTop: "16px",
 					display: "flex",
 					justifyContent: "flex-end",
 					gap: "10px"
 				},
-				children: [/* @__PURE__ */ i("button", {
-					onClick: l,
+				children: [/* @__PURE__ */ a("button", {
+					onClick: u,
 					style: {
 						padding: "8px 16px",
 						fontSize: "14px",
-						backgroundColor: f.bgPrimary,
-						border: `1px solid ${f.borderDefault}`,
+						backgroundColor: m.bgPrimary,
+						border: `1px solid ${m.borderDefault}`,
 						borderRadius: "6px",
 						cursor: "pointer",
-						color: f.textSecondary,
+						color: m.textSecondary,
 						fontWeight: 500
 					},
-					children: "Cancel"
-				}), /* @__PURE__ */ i("button", {
+					children: d("bigconsole.filters.chip.editor.cancel", "Cancel")
+				}), /* @__PURE__ */ a("button", {
 					onClick: () => {
-						c(u);
+						l(f);
 					},
 					style: {
 						padding: "8px 16px",
 						fontSize: "14px",
-						backgroundColor: f.actionPrimaryBg,
-						color: f.actionPrimaryFg,
+						backgroundColor: m.actionPrimaryBg,
+						color: m.actionPrimaryFg,
 						border: "none",
 						borderRadius: "6px",
 						cursor: "pointer",
 						fontWeight: 500,
-						boxShadow: "0 2px 4px rgba(99, 102, 241, 0.3)"
+						boxShadow: "var(--shadow-elevation-1)"
 					},
-					children: "Apply"
+					children: d("bigconsole.filters.chip.editor.apply", "Apply")
 				})]
 			})
 		]
 	})] });
 }
 //#endregion
-export { u as default };
+export { d as default };
 
 //# sourceMappingURL=FilterChip.js.map