@krosoft/react 0.0.381 → 0.0.383

package/dist/components/core/filters/AdvancedFilters.js

@@ -0,0 +1,103 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as t } from "../../ui/button.js";
+import { Label as n } from "../../ui/label.js";
+import { Sheet as r, SheetContent as i, SheetFooter as a, SheetHeader as o, SheetTitle as s, SheetTrigger as c } from "../../ui/sheet.js";
+import { FilterField as l } from "./FilterField.js";
+import { useEffect as u, useMemo as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Filter as h } from "lucide-react";
+//#region src/components/core/filters/AdvancedFilters.tsx
+var g = (e) => !(e == null || e === "" || Array.isArray(e) && e.length === 0);
+function _({ sections: _, filters: v, onFiltersChange: y, buttonText: b, sheetTitle: x }) {
+	let { t: S } = e(), [C, w] = f(!1), [T, E] = f(v);
+	u(() => {
+		E(v);
+	}, [v, C]);
+	let D = (e, t) => {
+		E((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, O = (e, t) => {
+		let n = T[e], r = Array.isArray(n) ? n : [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t];
+		D(e, i);
+	}, k = () => {
+		y(T), w(!1);
+	}, A = () => {
+		E({}), y({}), w(!1);
+	}, j = d(() => {
+		let e = new Set(_.flatMap((e) => e.filters.map((e) => e.key)));
+		return Object.entries(v).filter(([t, n]) => e.has(t) && g(n)).length;
+	}, [_, v]);
+	return /* @__PURE__ */ m(r, {
+		open: C,
+		onOpenChange: w,
+		children: [/* @__PURE__ */ p(c, {
+			asChild: !0,
+			children: /* @__PURE__ */ m(t, {
+				variant: "outline",
+				className: "gap-2",
+				children: [
+					/* @__PURE__ */ p(h, { className: "size-4 shrink-0" }),
+					b ?? S("filters.more"),
+					j > 0 && /* @__PURE__ */ p("span", {
+						className: "ml-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-primary-foreground",
+						children: j
+					})
+				]
+			})
+		}), /* @__PURE__ */ m(i, {
+			side: "right",
+			className: "w-[400px] sm:w-[500px] flex flex-col p-0",
+			children: [
+				/* @__PURE__ */ p(o, {
+					className: "p-6 pb-0",
+					children: /* @__PURE__ */ p(s, { children: x ?? S("filters.advanced") })
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "flex-1 overflow-y-auto p-6 pt-6",
+					children: /* @__PURE__ */ p("div", {
+						className: "space-y-6",
+						children: _.map((e, t) => /* @__PURE__ */ m("div", {
+							className: "space-y-4",
+							children: [/* @__PURE__ */ p("h3", {
+								className: "font-semibold text-sm text-foreground border-b pb-2",
+								children: S(e.titleKey)
+							}), e.filters.map((e) => /* @__PURE__ */ m("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ p(n, {
+									htmlFor: e.key,
+									children: S(e.labelKey)
+								}), /* @__PURE__ */ p(l, {
+									field: e,
+									value: T[e.key],
+									onChange: (t) => {
+										D(e.key, t);
+									},
+									onToggleMultiSelect: (t) => {
+										O(e.key, t);
+									}
+								})]
+							}, e.key))]
+						}, t))
+					})
+				}),
+				/* @__PURE__ */ m(a, {
+					className: "gap-2 p-6 border-t bg-background",
+					children: [/* @__PURE__ */ p(t, {
+						variant: "outline",
+						className: "flex-1",
+						onClick: A,
+						children: S("filters.clear")
+					}), /* @__PURE__ */ p(t, {
+						className: "flex-1",
+						onClick: k,
+						children: S("filters.apply")
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { _ as AdvancedFilters };

package/dist/components/core/filters/ConditionFilter.js

@@ -0,0 +1,162 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { useKrosoftTranslation as t } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as n } from "../../ui/button.js";
+import { controlBaseClass as r } from "../../ui/control.js";
+import { Label as i } from "../../ui/label.js";
+import { Input as a } from "../../ui/input.js";
+import { Popover as o, PopoverContent as s, PopoverTrigger as c } from "../../ui/popover.js";
+import { ToggleGroup as l, ToggleGroupItem as u } from "../../ui/toggle-group.js";
+import { SingleSelect as d } from "../inputs/SingleSelect.js";
+import { useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { ChevronDownIcon as g, XIcon as _ } from "lucide-react";
+//#region src/components/core/filters/ConditionFilter.tsx
+var v = (e) => e?.requiresValue !== !1;
+function y({ fields: y, operators: b, value: x, onChange: S, labelKey: C, icon: w, disabled: T = !1, className: E }) {
+	let { t: D } = t(), [O, k] = f(!1), [A, j] = f({ value: "" }), M = x === void 0 ? void 0 : y.find((e) => e.value === x.field), N = x === void 0 ? void 0 : b.find((e) => e.value === x.operator), P = x !== void 0, F = b.find((e) => e.value === A.operator), I = v(F), L = F?.numeric === !0, R = A.value.trim(), z = I && L && R !== "" && Number.isNaN(Number(R)), B = A.field !== void 0 && F !== void 0 && (!I || R !== "") && !z, V = (e) => {
+		e && j(x === void 0 ? { value: "" } : { ...x }), k(e);
+	}, H = () => {
+		B && A.field !== void 0 && F !== void 0 && (S({
+			field: A.field,
+			operator: F.value,
+			value: I ? R : ""
+		}), k(!1));
+	}, U = () => {
+		S(void 0), k(!1);
+	}, W = D(C === void 0 ? "filters.condition.label" : C);
+	return /* @__PURE__ */ h(o, {
+		open: O,
+		onOpenChange: V,
+		children: [/* @__PURE__ */ m(c, {
+			asChild: !0,
+			children: /* @__PURE__ */ h("button", {
+				type: "button",
+				disabled: T,
+				className: e(r, "inline-flex items-center justify-between gap-1.5 whitespace-nowrap transition-colors", P ? "border-primary bg-primary/10 text-primary" : "hover:bg-muted", !P && "w-full md:w-[200px]", E),
+				children: [/* @__PURE__ */ h("span", {
+					className: "flex min-w-0 items-center gap-1.5",
+					children: [w !== void 0 && /* @__PURE__ */ m(w, { className: "size-3.5 shrink-0 opacity-70" }), /* @__PURE__ */ m("span", {
+						className: "truncate",
+						children: x === void 0 ? W : /* @__PURE__ */ h(p, { children: [
+							W,
+							" :",
+							" ",
+							/* @__PURE__ */ m("span", {
+								className: "font-semibold",
+								children: M?.label ?? x.field
+							}),
+							" ",
+							N?.label ?? x.operator,
+							x.value !== "" && /* @__PURE__ */ h("span", {
+								className: "font-semibold",
+								children: [" ", x.value]
+							})
+						] })
+					})]
+				}), /* @__PURE__ */ h("span", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [P && !T && /* @__PURE__ */ m("span", {
+						role: "button",
+						tabIndex: -1,
+						"aria-label": D("filters.condition.clear"),
+						onClick: (e) => {
+							e.stopPropagation();
+						},
+						onPointerDown: (e) => {
+							e.preventDefault(), e.stopPropagation(), S(void 0);
+						},
+						className: "opacity-70 hover:opacity-100",
+						children: /* @__PURE__ */ m(_, { className: "size-3.5" })
+					}), /* @__PURE__ */ m(g, { className: e("size-3.5 opacity-60 transition-transform", O && "rotate-180") })]
+				})]
+			})
+		}), /* @__PURE__ */ h(s, {
+			align: "start",
+			className: "w-80 space-y-4",
+			children: [
+				/* @__PURE__ */ h("div", {
+					className: "space-y-1.5",
+					children: [/* @__PURE__ */ m(i, { children: D("filters.condition.field") }), /* @__PURE__ */ m(d, {
+						options: y,
+						value: A.field,
+						onChange: (e) => {
+							j((t) => ({
+								...t,
+								field: e
+							}));
+						},
+						placeholder: D("filters.condition.selectField")
+					})]
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "space-y-1.5",
+					children: [/* @__PURE__ */ m(i, { children: D("filters.condition.operator") }), /* @__PURE__ */ m(l, {
+						type: "single",
+						variant: "outline",
+						size: "sm",
+						className: "flex-wrap justify-start",
+						value: A.operator ?? "",
+						onValueChange: (e) => {
+							j((t) => {
+								let n = b.find((t) => t.value === e)?.numeric !== !0 || !Number.isNaN(Number(t.value.trim()));
+								return {
+									...t,
+									operator: e === "" ? void 0 : e,
+									value: n ? t.value : ""
+								};
+							});
+						},
+						children: b.map((e) => /* @__PURE__ */ m(u, {
+							value: e.value,
+							title: e.title,
+							"aria-label": e.title ?? e.label,
+							className: "min-w-9 px-2",
+							children: e.label
+						}, e.value))
+					})]
+				}),
+				I && /* @__PURE__ */ h("div", {
+					className: "space-y-1.5",
+					children: [
+						/* @__PURE__ */ m(i, {
+							htmlFor: "condition-filter-value",
+							children: D("filters.condition.value")
+						}),
+						/* @__PURE__ */ m(a, {
+							id: "condition-filter-value",
+							value: A.value,
+							type: L ? "number" : "text",
+							step: "any",
+							onChange: (e) => {
+								j((t) => ({
+									...t,
+									value: e.target.value
+								}));
+							},
+							onKeyDown: (e) => {
+								e.key === "Enter" && (e.preventDefault(), H());
+							}
+						}),
+						"          "
+					]
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "flex justify-end gap-2",
+					children: [P && /* @__PURE__ */ m(n, {
+						variant: "ghost",
+						size: "sm",
+						onClick: U,
+						children: D("filters.condition.clear")
+					}), /* @__PURE__ */ m(n, {
+						size: "sm",
+						onClick: H,
+						disabled: !B,
+						children: D("filters.condition.apply")
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { y as ConditionFilter };

package/dist/components/core/filters/ConditionFilterGroup.js

@@ -0,0 +1,44 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { ConditionFilter as t } from "./ConditionFilter.js";
+import { useRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { PlusIcon as a } from "lucide-react";
+//#region src/components/core/filters/ConditionFilterGroup.tsx
+var o = (e, t) => e.field === t.field && e.operator === t.operator && e.value === t.value;
+function s({ fields: s, operators: c, values: l, onChange: u, labelKey: d, max: f = 5, disabled: p = !1, className: m }) {
+	let h = n(!1), g = (e) => {
+		e === void 0 || l.some((t) => o(t, e)) || u([...l, e]);
+	}, _ = (e, t) => {
+		t === void 0 ? (h.current = !0, u(l.filter((t, n) => n !== e))) : u(l.map((n, r) => r === e ? t : n));
+	}, v = l.length === 0, y = () => {
+		h.current = !1;
+	};
+	return /* @__PURE__ */ i("div", {
+		className: e("flex flex-wrap items-center gap-2", m),
+		onPointerDownCapture: y,
+		onKeyDownCapture: y,
+		onClickCapture: (e) => {
+			h.current && (h.current = !1, e.preventDefault(), e.stopPropagation());
+		},
+		children: [l.map((e, n) => /* @__PURE__ */ r(t, {
+			fields: s,
+			operators: c,
+			value: e,
+			onChange: (e) => {
+				_(n, e);
+			},
+			labelKey: d,
+			disabled: p
+		}, n)), l.length < f && /* @__PURE__ */ r(t, {
+			fields: s,
+			operators: c,
+			value: void 0,
+			onChange: g,
+			labelKey: v ? d : "filters.condition.add",
+			icon: v ? void 0 : a,
+			disabled: p
+		})]
+	});
+}
+//#endregion
+export { s as ConditionFilterGroup };

package/dist/components/core/filters/FilterField.js

@@ -0,0 +1,64 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Input as t } from "../../ui/input.js";
+import { MultiSelect as n } from "../inputs/MultiSelect.js";
+import { DatePicker as r } from "../inputs/DatePicker.js";
+import { DateRangePicker as i } from "../inputs/DateRangePicker.js";
+import { SingleSelect as a } from "../inputs/SingleSelect.js";
+import "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/core/filters/FilterField.tsx
+var s = ({ field: s, value: c, onChange: l, onToggleMultiSelect: u }) => {
+	let { t: d } = e();
+	switch (s.type) {
+		case "text": return /* @__PURE__ */ o(t, {
+			placeholder: s.placeholder,
+			value: c ?? "",
+			onChange: (e) => {
+				l(e.target.value);
+			}
+		});
+		case "number": return /* @__PURE__ */ o(t, {
+			type: "number",
+			placeholder: s.placeholder,
+			value: c ?? "",
+			onChange: (e) => {
+				l(e.target.value);
+			},
+			min: s.min,
+			max: s.max
+		});
+		case "select": return /* @__PURE__ */ o(a, {
+			options: s.options ?? [],
+			value: c,
+			onChange: l,
+			searchable: s.searchable === !0,
+			placeholder: s.placeholder,
+			searchPlaceholder: s.searchPlaceholder
+		});
+		case "date": return /* @__PURE__ */ o(r, {
+			date: c,
+			onDateChange: l,
+			placeholder: s.placeholder ?? d("date.pickDate")
+		});
+		case "date-range": return /* @__PURE__ */ o(i, {
+			value: c,
+			onChange: l,
+			placeholder: s.placeholder
+		});
+		case "multi-select": return /* @__PURE__ */ o(n, {
+			options: s.options ?? [],
+			selected: c ?? [],
+			onToggle: u,
+			onClear: () => {
+				l([]);
+			},
+			onSelectAll: l,
+			placeholder: s.placeholder,
+			searchable: s.searchable,
+			searchPlaceholder: s.searchPlaceholder
+		});
+		default: return null;
+	}
+};
+//#endregion
+export { s as FilterField };

package/dist/components/core/filters/FilterPills.js

@@ -0,0 +1,13 @@
+import { FilterPillsGroup as e } from "./FilterPillsGroup.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/core/filters/FilterPills.tsx
+function n({ options: n, value: r, onChange: i, variant: a = "solid" }) {
+	return /* @__PURE__ */ t(e, {
+		options: n,
+		values: [r],
+		onToggle: i,
+		variant: a
+	});
+}
+//#endregion
+export { n as FilterPills };

package/dist/components/core/filters/FilterPillsGroup.js

@@ -0,0 +1,39 @@
+import { cn as e } from "../../../helpers/tailwind.helper.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/core/filters/FilterPillsGroup.tsx
+var r = {
+	solid: "border-foreground bg-foreground text-background",
+	outline: "border-primary bg-primary/10 text-primary font-medium"
+};
+function i(t, n, i) {
+	return i === void 0 ? t ? r[n] : "border-border bg-background text-muted-foreground hover:text-foreground hover:border-foreground/40" : e(i, t ? "font-semibold" : "opacity-60 hover:opacity-100");
+}
+function a({ options: r, values: a, onToggle: o, variant: s = "solid" }) {
+	return /* @__PURE__ */ t("div", {
+		className: "flex flex-wrap gap-1.5",
+		children: r.map(({ value: r, label: c, count: l, icon: u, className: d }) => {
+			let f = i(a.includes(r), s, d);
+			return /* @__PURE__ */ n("button", {
+				onClick: () => {
+					o(r);
+				},
+				className: e("inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-control border transition-colors", f),
+				children: [
+					u && /* @__PURE__ */ t(u, { className: "size-3 shrink-0" }),
+					c,
+					" ",
+					l !== void 0 && /* @__PURE__ */ n("span", {
+						className: "opacity-60",
+						children: [
+							"(",
+							l,
+							")"
+						]
+					})
+				]
+			}, String(r));
+		})
+	});
+}
+//#endregion
+export { a as FilterPillsGroup };

package/dist/components/core/filters/FiltersContainer.js

@@ -0,0 +1,54 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as t } from "../../ui/button.js";
+import { SearchInput as n } from "../inputs/SearchInput.js";
+import { useMobile as r } from "../../../hooks/ui/useMobile.js";
+import { FiltersMobileDrawer as i } from "./FiltersMobileDrawer.js";
+import "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { FilterXIcon as s } from "lucide-react";
+//#region src/components/core/filters/FiltersContainer.tsx
+function c({ children: c, search: l, searchPlaceholder: u, activeFiltersCount: d = 0, onReset: f, onSearch: p }) {
+	let { t: m } = e();
+	return r() ? /* @__PURE__ */ o("div", {
+		className: "flex items-center gap-2",
+		children: [p !== void 0 && /* @__PURE__ */ a("div", {
+			className: "flex-1",
+			children: /* @__PURE__ */ a(n, {
+				search: l ?? "",
+				onSearch: p,
+				placeholder: u
+			})
+		}), /* @__PURE__ */ a(i, {
+			activeFiltersCount: d,
+			onReset: f,
+			children: c
+		})]
+	}) : /* @__PURE__ */ o("div", {
+		className: "flex justify-between",
+		children: [/* @__PURE__ */ o("div", {
+			className: "flex flex-wrap gap-2",
+			children: [p !== void 0 && /* @__PURE__ */ a(n, {
+				search: l ?? "",
+				onSearch: p,
+				placeholder: u
+			}), c]
+		}), f && /* @__PURE__ */ a("div", {
+			className: "flex flex-wrap gap-4",
+			children: /* @__PURE__ */ o(t, {
+				variant: "outline",
+				onClick: f,
+				className: "relative",
+				children: [
+					/* @__PURE__ */ a(s, {}),
+					m("filters.reset"),
+					d > 0 && /* @__PURE__ */ a("span", {
+						className: "absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground",
+						children: d
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { c as FiltersContainer };

package/dist/components/core/filters/FiltersMobileDrawer.js

@@ -0,0 +1,57 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { Button as t } from "../../ui/button.js";
+import { Drawer as n, DrawerClose as r, DrawerContent as i, DrawerFooter as a, DrawerHeader as o, DrawerTitle as s, DrawerTrigger as c } from "../../ui/drawer.js";
+import { useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { FilterIcon as f, FilterXIcon as p } from "lucide-react";
+//#region src/components/core/filters/FiltersMobileDrawer.tsx
+function m({ children: m, activeFiltersCount: h = 0, onReset: g, onApply: _ }) {
+	let { t: v } = e(), [y, b] = l(!1);
+	return /* @__PURE__ */ d(n, {
+		open: y,
+		onOpenChange: b,
+		children: [/* @__PURE__ */ u(c, {
+			asChild: !0,
+			children: /* @__PURE__ */ d(t, {
+				variant: "outline",
+				className: "relative",
+				children: [
+					/* @__PURE__ */ u(f, { className: "h-4 w-4 mr-2" }),
+					v("filters.filter"),
+					h > 0 && /* @__PURE__ */ u("span", {
+						className: "absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground",
+						children: h
+					})
+				]
+			})
+		}), /* @__PURE__ */ d(i, { children: [
+			/* @__PURE__ */ u(o, { children: /* @__PURE__ */ u(s, { children: v("filters.title") }) }),
+			/* @__PURE__ */ u("div", {
+				className: "flex flex-col gap-4 px-4 pb-4",
+				children: m
+			}),
+			/* @__PURE__ */ d(a, {
+				className: "flex-row gap-2",
+				children: [/* @__PURE__ */ d(t, {
+					variant: "outline",
+					onClick: () => {
+						g?.(), b(!1);
+					},
+					className: "flex-1",
+					children: [/* @__PURE__ */ u(p, { className: "h-4 w-4 mr-2" }), v("filters.reset")]
+				}), /* @__PURE__ */ u(r, {
+					asChild: !0,
+					children: /* @__PURE__ */ u(t, {
+						onClick: () => {
+							_?.(), b(!1);
+						},
+						className: "flex-1",
+						children: v("actions.apply")
+					})
+				})]
+			})
+		] })]
+	});
+}
+//#endregion
+export { m as FiltersMobileDrawer };

package/dist/components/core/filters/TableFilter.js

@@ -0,0 +1,101 @@
+import { useKrosoftTranslation as e } from "../../../i18n/useKrosoftTranslation.js";
+import { SearchInput as t } from "../inputs/SearchInput.js";
+import { MultiSelect as n } from "../inputs/MultiSelect.js";
+import { ActiveFilters as r } from "./ActiveFilters.js";
+import { AdvancedFilters as i } from "./AdvancedFilters.js";
+import { useMemo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/core/filters/TableFilter.tsx
+function c({ searchQuery: c, onSearchChange: l, searchPlaceholder: u, filters: d, onFiltersChange: f, sections: p, advancedButtonText: m, sheetTitle: h }) {
+	let { t: g } = e(), _ = (e, t) => {
+		let n = d[e], r = Array.isArray(n) ? n : [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = { ...d };
+		i.length === 0 ? delete a[e] : a[e] = i, f(a);
+	}, v = (e) => {
+		let t = { ...d };
+		delete t[e], f(t);
+	}, y = () => {
+		f({});
+	}, b = (e, t) => {
+		let n = { ...d }, r = n[e];
+		Array.isArray(r) ? t === void 0 ? delete n[e] : (n[e] = r.filter((e) => e !== t), Array.isArray(n[e]) && n[e].length === 0 && delete n[e]) : delete n[e], f(n);
+	}, x = a(() => {
+		let e = [];
+		return p.forEach((t) => {
+			t.filters.forEach((t) => {
+				t.isQuickFilter === !0 && e.push({
+					key: t.key,
+					labelKey: t.labelKey,
+					options: t.options ?? [],
+					searchable: t.searchable,
+					searchPlaceholder: t.searchPlaceholder
+				});
+			});
+		}), e;
+	}, [p]), S = a(() => {
+		let e = {};
+		return p.forEach((t) => {
+			t.filters.forEach((t) => {
+				e[t.key] = t.badgeLabelKey ?? t.labelKey;
+			});
+		}), e;
+	}, [p]), C = a(() => {
+		let e = {};
+		return p.forEach((t) => {
+			t.filters.forEach((t) => {
+				t.options !== void 0 && t.options.forEach((n) => {
+					e[`${t.key}_${n.value}`] = n.label;
+				});
+			});
+		}), e;
+	}, [p]);
+	return /* @__PURE__ */ s("div", {
+		className: "space-y-4 w-full",
+		children: [/* @__PURE__ */ s("div", {
+			className: "flex flex-wrap items-center gap-2 justify-between",
+			children: [/* @__PURE__ */ s("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [l === void 0 ? null : /* @__PURE__ */ o(t, {
+					searchQuery: c,
+					onSearch: l,
+					onClear: () => {
+						l("");
+					},
+					placeholder: u ?? g("search.placeholder")
+				}), x.map((e) => /* @__PURE__ */ o(n, {
+					variant: "pill",
+					labelKey: e.labelKey,
+					options: e.options,
+					selected: Array.isArray(d[e.key]) ? d[e.key] : [],
+					onToggle: (t) => {
+						_(e.key, t);
+					},
+					onClear: () => {
+						v(e.key);
+					},
+					onSelectAll: (t) => {
+						f({
+							...d,
+							[e.key]: t
+						});
+					},
+					searchable: e.searchable,
+					searchPlaceholder: e.searchPlaceholder
+				}, e.key))]
+			}), p.length > 0 && /* @__PURE__ */ o(i, {
+				sections: p,
+				filters: d,
+				onFiltersChange: f,
+				buttonText: m,
+				sheetTitle: h
+			})]
+		}), /* @__PURE__ */ o(r, {
+			filters: d,
+			onRemoveFilter: b,
+			onClearAll: y,
+			filterLabelKeys: S,
+			optionLabels: C
+		})]
+	});
+}
+//#endregion
+export { c as TableFilter };