@serkonda7/solid-components 0.0.8 → 0.1.0

package/README.md

@@ -26,6 +26,7 @@ import '@serkonda7/solid-components/styles.css'
 
 These components are available:
 - `DataTable` - generic table with optional sorting, row selection, actions, loading, empty states, and column customizer.
+- `FilterTable` - `DataTable` with filtering: quick search, a grouped filter form, and removable filter pills.
 - `Combobox` - searchable, accessible dropdown with keyboard navigation, option icons, a detail column, and an optional "Add …" entry.
 
 For the full API, examples, and agent notes, see [docs.md](docs.md).

package/dist/combobox.d.ts

@@ -33,6 +33,8 @@ export interface ComboboxProps {
     onAdd?: (query: string) => void;
     /** Text of the pinned add entry. Defaults to `Add`. */
     addLabel?: string;
+    /** Placeholder while closed and nothing is selected; `emptyLabel` takes precedence. */
+    placeholder?: string;
     /** Placeholder while open and nothing is selected. Defaults to `Search`. */
     searchLabel?: string;
     /** Shown when no option matches the search. Defaults to `No matching objects`. */

package/dist/data-table.d.ts

@@ -40,6 +40,8 @@ export interface DataTableProps<TRow> {
     columnCustomizerTitle?: string;
     columnCustomizerShowAllLabel?: string;
     columnCustomizerResetLabel?: string;
+    /** Content rendered at the start of the toolbar, before the column customizer. */
+    toolbar?: JSX.Element;
     loading?: boolean | Accessor<boolean>;
     empty?: boolean | Accessor<boolean>;
     loadingContent?: JSX.Element;

package/dist/filter-table.d.ts

@@ -0,0 +1,53 @@
+import type { Accessor, JSX } from 'solid-js';
+import { type ComboboxOption } from './combobox';
+import { type DataTableProps } from './data-table';
+export type FilterTableFilterType = 'text' | 'select' | 'boolean';
+/** A filter's value: text for `text`/`boolean` (`'true'`/`'false'`), a list for `select`. */
+export type FilterTableValue = string | string[];
+/**
+ * Applied filters by filter key, plus the quick search under `q`. Inactive
+ * filters are omitted, so the record maps directly onto URL query params.
+ */
+export type FilterTableValues = Record<string, FilterTableValue>;
+export interface FilterTableFilter<TRow> {
+    key: string;
+    label: string;
+    type: FilterTableFilterType;
+    /** Fieldset heading in the filter form; ungrouped filters come first. */
+    group?: string;
+    /** Value matched against; defaults to `row[key]`. May return an array for `select`. */
+    getValue?: (row: TRow) => unknown;
+    /** Replaces the built-in matching for this filter. */
+    match?: (row: TRow, value: FilterTableValue) => boolean;
+    /** Choices of a `select` filter; derived from the row values when omitted. */
+    options?: ComboboxOption[];
+    placeholder?: string;
+}
+export interface FilterTableProps<TRow> extends Omit<DataTableProps<TRow>, 'toolbar'> {
+    filters: FilterTableFilter<TRow>[];
+    /** Controlled applied filters; pair with `onFilterValuesChange`. */
+    filterValues?: FilterTableValues | Accessor<FilterTableValues>;
+    defaultFilterValues?: FilterTableValues;
+    onFilterValuesChange?: (values: FilterTableValues) => void;
+    /** Pass `rows` through unfiltered, e.g. when the server applies `filterValues`. */
+    manualFiltering?: boolean;
+    /** Shows the quick search input above the table. Defaults to `true`. */
+    quickSearch?: boolean;
+    /** Text matched by the quick search; defaults to the row's column values. */
+    getSearchText?: (row: TRow) => string;
+    quickSearchLabel?: string;
+    resultsLabel?: string;
+    filtersLabel?: string;
+    applyLabel?: string;
+    resetLabel?: string;
+    clearAllLabel?: string;
+    anyLabel?: string;
+    yesLabel?: string;
+    noLabel?: string;
+}
+/**
+ * `DataTable` with filtering: a Results tab with a quick search and
+ * removable pills for the applied filters, and a Filters tab with a grouped form
+ * that is applied on submit.
+ */
+export declare function FilterTable<TRow>(props: FilterTableProps<TRow>): JSX.Element;

package/dist/index.d.ts

@@ -6,3 +6,4 @@
  */
 export { Combobox, type ComboboxIcon, type ComboboxOption, type ComboboxProps, } from './combobox';
 export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, type DataTableSortDirection, } from './data-table';
+export { FilterTable, type FilterTableFilter, type FilterTableFilterType, type FilterTableProps, type FilterTableValue, type FilterTableValues, } from './filter-table';

package/dist/index.js

@@ -1,7 +1,7 @@
 import { Dynamic as e, className as t, createComponent as n, delegateEvents as r, effect as i, insert as a, memo as o, mergeProps as s, setAttribute as c, spread as l, template as u, use as d } from "solid-js/web";
-import { For as f, Show as p, createEffect as m, createMemo as h, createSignal as g, createUniqueId as _, onCleanup as v, onMount as y, splitProps as b } from "solid-js";
+import { For as f, Show as p, children as m, createEffect as h, createMemo as g, createSignal as _, createUniqueId as v, on as y, onCleanup as b, onMount as x, splitProps as S } from "solid-js";
 //#region node_modules/@tabler/icons-solidjs/dist/source/defaultAttributes.js
-var x = {
+var C = {
 	outline: {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: 24,
@@ -21,9 +21,9 @@ var x = {
 		fill: "currentColor",
 		stroke: "none"
 	}
-}, S = /*#__PURE__*/ u("<svg>"), C = /*#__PURE__*/ u("<title>"), w = (t, r, i, c) => {
+}, w = /*#__PURE__*/ u("<svg>"), T = /*#__PURE__*/ u("<title>"), E = (t, r, i, c) => {
 	let u = (i) => {
-		let [u, d] = b(i, [
+		let [u, d] = S(i, [
 			"color",
 			"size",
 			"stroke",
@@ -31,9 +31,9 @@ var x = {
 			"title",
 			"children",
 			"class"
-		]), f = x[t], p = u.stroke ?? u.strokeWidth;
+		]), f = C[t], p = u.stroke ?? u.strokeWidth;
 		return (() => {
-			var i = S();
+			var i = w();
 			return l(i, s(f, d, {
 				get width() {
 					return o(() => u.size != null)() ? u.size : f.width;
@@ -50,66 +50,62 @@ var x = {
 			}), !0, !0), a(i, (() => {
 				var e = o(() => u.title != null);
 				return () => e() && (() => {
-					var e = C();
+					var e = T();
 					return a(e, () => u.title), e;
 				})();
 			})(), null), a(i, () => c.map(([t, r]) => n(e, s({ component: t }, r))), null), a(i, () => u.children, null), i;
 		})();
 	};
 	return u.displayName = `${i}`, u;
-}, T = w("outline", "chevron-down", "ChevronDown", [["path", { d: "M6 9l6 6l6 -6" }]]), E = w("outline", "plus", "Plus", [["path", { d: "M12 5l0 14" }], ["path", { d: "M5 12l14 0" }]]), D = /*#__PURE__*/ u("<span class=combobox-value aria-hidden=true><span class=combobox-option-label></span><span class=combobox-detail>"), ee = /*#__PURE__*/ u("<div role=option class=\"combobox-option combobox-option-add\">"), O = /*#__PURE__*/ u("<div class=combobox-list role=listbox>"), k = /*#__PURE__*/ u("<div><input class=combobox-input role=combobox aria-autocomplete=list autocomplete=off>"), A = /*#__PURE__*/ u("<span class=combobox-icon aria-hidden=true>"), te = /*#__PURE__*/ u("<div class=combobox-empty>"), j = /*#__PURE__*/ u("<span class=combobox-detail>"), M = /*#__PURE__*/ u("<div role=option class=combobox-option><span class=combobox-option-label>"), N = /*#__PURE__*/ u("<span class=combobox-option-icon aria-hidden=true>");
-function P(r) {
-	let s, l, u = _(), v = () => r.id ?? u, b = () => `${v()}-listbox`, x = (e) => `${v()}-option-${e}`, [S, C] = g(!1), [w, P] = g(""), [F, I] = g(0), L = h(() => r.emptyLabel === void 0 ? r.options : [{
+}, ee = E("outline", "chevron-down", "ChevronDown", [["path", { d: "M6 9l6 6l6 -6" }]]), D = E("outline", "plus", "Plus", [["path", { d: "M12 5l0 14" }], ["path", { d: "M5 12l14 0" }]]), O = E("outline", "search", "Search", [["path", { d: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }], ["path", { d: "M21 21l-6 -6" }]]), k = E("outline", "x", "X", [["path", { d: "M18 6l-12 12" }], ["path", { d: "M6 6l12 12" }]]), A = /*#__PURE__*/ u("<span class=combobox-value aria-hidden=true><span class=combobox-option-label></span><span class=combobox-detail>"), j = /*#__PURE__*/ u("<div role=option class=\"combobox-option combobox-option-add\">"), M = /*#__PURE__*/ u("<div class=combobox-list role=listbox>"), te = /*#__PURE__*/ u("<div><input class=combobox-input role=combobox aria-autocomplete=list autocomplete=off>"), N = /*#__PURE__*/ u("<span class=combobox-icon aria-hidden=true>"), P = /*#__PURE__*/ u("<div class=combobox-empty>"), F = /*#__PURE__*/ u("<span class=combobox-detail>"), I = /*#__PURE__*/ u("<div role=option class=combobox-option><span class=combobox-option-label>"), L = /*#__PURE__*/ u("<span class=combobox-option-icon aria-hidden=true>");
+function R(r) {
+	let s, l, u = v(), m = () => r.id ?? u, y = () => `${m()}-listbox`, b = (e) => `${m()}-option-${e}`, [S, C] = _(!1), [w, T] = _(""), [E, O] = _(0), k = g(() => r.emptyLabel === void 0 ? r.options : [{
 		value: "",
 		label: r.emptyLabel
-	}, ...r.options]), R = h(() => r.value === "" ? void 0 : L().find((e) => String(e.value) === r.value)), z = h(() => {
+	}, ...r.options]), R = g(() => r.value === "" ? void 0 : k().find((e) => String(e.value) === r.value)), z = g(() => {
 		let e = w().trim().toLowerCase();
-		return e === "" ? L() : L().filter((t) => t.label.toLowerCase().includes(e) || (t.detail?.toLowerCase().includes(e) ?? !1));
-	}), ne = () => r.options.some((e) => e.detail !== void 0), B = () => z().length, V = () => z().length + +!!r.onAdd, re = () => !r.disabled && r.onChange !== void 0;
-	y(() => {
+		return e === "" ? k() : k().filter((t) => t.label.toLowerCase().includes(e) || (t.detail?.toLowerCase().includes(e) ?? !1));
+	}), B = () => r.options.some((e) => e.detail !== void 0), V = () => z().length, H = () => z().length + +!!r.onAdd, U = () => !r.disabled && r.onChange !== void 0;
+	x(() => {
 		r.autofocus === !0 && s?.focus();
-	}), m(() => {
-		S() && l?.querySelector(`[data-index="${F()}"]`)?.scrollIntoView({ block: "nearest" });
+	}), h(() => {
+		S() && l?.querySelector(`[data-index="${E()}"]`)?.scrollIntoView({ block: "nearest" });
 	});
-	function H() {
-		if (S() || !re()) return;
-		P("");
-		let e = L().findIndex((e) => String(e.value) === r.value);
-		I(Math.max(e, 0)), C(!0), r.onOpen?.();
-	}
-	function U(e) {
-		if (C(!1), r.onAdd && e === B()) {
+	function W() {
+		if (S() || !U()) return;
+		T("");
+		let e = k().findIndex((e) => String(e.value) === r.value);
+		O(Math.max(e, 0)), C(!0), r.onOpen?.();
+	}
+	function G(e) {
+		if (C(!1), r.onAdd && e === V()) {
 			r.onAdd(w().trim());
 			return;
 		}
 		let t = z()[e];
 		t && String(t.value) !== r.value && r.onChange?.(String(t.value));
 	}
-	function W(e) {
-		let t = V();
-		S() ? t > 0 && I((F() + e + t) % t) : H();
+	function K(e) {
+		let t = H();
+		S() ? t > 0 && O((E() + e + t) % t) : W();
 	}
-	function G(e) {
-		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-			e.preventDefault(), W(e.key === "ArrowDown" ? 1 : -1);
-			return;
-		}
-		S() && (e.key === "Enter" ? (e.preventDefault(), U(F())) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), C(!1)));
+	function q(e) {
+		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), K(e.key === "ArrowDown" ? 1 : -1)) : S() && (e.key === "Enter" ? (e.preventDefault(), G(E())) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), C(!1)));
 	}
-	let K = () => S() ? R()?.label ?? r.emptyLabel ?? r.searchLabel ?? "Search" : r.emptyLabel;
+	let ne = () => S() ? R()?.label ?? r.emptyLabel ?? r.searchLabel ?? "Search" : r.emptyLabel ?? r.placeholder;
 	return (() => {
-		var u = k(), m = u.firstChild;
-		m.addEventListener("blur", () => C(!1)), m.$$keydown = G, m.$$input = (e) => {
+		var u = te(), h = u.firstChild;
+		h.addEventListener("blur", () => C(!1)), h.$$keydown = q, h.$$input = (e) => {
 			let t = e.currentTarget.value;
-			H(), P(t), I(0);
-		}, m.$$click = H;
-		var h = s;
-		return typeof h == "function" ? d(h, m) : s = m, a(u, n(p, {
+			W(), T(t), O(0);
+		}, h.$$click = W;
+		var g = s;
+		return typeof g == "function" ? d(g, h) : s = h, a(u, n(p, {
 			get when() {
 				return o(() => !S())() && R()?.icon;
 			},
 			children: (t) => (() => {
-				var r = A();
+				var r = N();
 				return a(r, n(e, {
 					get component() {
 						return t();
@@ -122,10 +118,10 @@ function P(r) {
 				return o(() => !S())() && R()?.detail;
 			},
 			get children() {
-				var e = D(), t = e.firstChild, n = t.nextSibling;
+				var e = A(), t = e.firstChild, n = t.nextSibling;
 				return a(t, () => R()?.label), a(n, () => R()?.detail), e;
 			}
-		}), null), a(u, n(T, {
+		}), null), a(u, n(ee, {
 			class: "combobox-chevron",
 			size: 16,
 			"aria-hidden": "true"
@@ -134,25 +130,25 @@ function P(r) {
 				return S();
 			},
 			get children() {
-				var t = O(), o = l;
+				var t = M(), o = l;
 				return typeof o == "function" ? d(o, t) : l = t, a(t, n(f, {
 					get each() {
 						return z();
 					},
 					get fallback() {
 						return (() => {
-							var e = te();
+							var e = P();
 							return a(e, () => r.noMatchesLabel ?? "No matching objects"), e;
 						})();
 					},
 					children: (t, o) => (() => {
-						var s = M(), l = s.firstChild;
-						return s.$$click = () => U(o()), s.$$mousemove = () => I(o()), s.$$mousedown = (e) => e.preventDefault(), a(l, n(p, {
+						var s = I(), l = s.firstChild;
+						return s.$$click = () => G(o()), s.$$mousemove = () => O(o()), s.$$mousedown = (e) => e.preventDefault(), a(l, n(p, {
 							get when() {
 								return t.icon;
 							},
 							children: (t) => (() => {
-								var r = N();
+								var r = L();
 								return a(r, n(e, {
 									get component() {
 										return t();
@@ -165,11 +161,11 @@ function P(r) {
 								return t.detail;
 							},
 							get children() {
-								var e = j();
+								var e = F();
 								return a(e, () => t.detail), e;
 							}
 						}), null), i((e) => {
-							var n = x(o()), i = o(), a = String(t.value) === r.value, l = o() === F(), u = t.value === "";
+							var n = b(o()), i = o(), a = String(t.value) === r.value, l = o() === E(), u = t.value === "";
 							return n !== e.e && c(s, "id", e.e = n), i !== e.t && c(s, "data-index", e.t = i), a !== e.a && c(s, "aria-selected", e.a = a), l !== e.o && s.classList.toggle("combobox-option-active", e.o = l), u !== e.i && s.classList.toggle("combobox-option-empty", e.i = u), e;
 						}, {
 							e: void 0,
@@ -184,12 +180,12 @@ function P(r) {
 						return r.onAdd;
 					},
 					get children() {
-						var e = ee();
-						return e.$$click = () => U(B()), e.$$mousemove = () => I(B()), e.$$mousedown = (e) => e.preventDefault(), c(e, "aria-selected", !1), a(e, n(E, {
+						var e = j();
+						return e.$$click = () => G(V()), e.$$mousemove = () => O(V()), e.$$mousedown = (e) => e.preventDefault(), c(e, "aria-selected", !1), a(e, n(D, {
 							size: 14,
 							"aria-hidden": "true"
 						}), null), a(e, () => r.addLabel ?? "Add", null), i((t) => {
-							var n = x(B()), r = B(), i = B() === F();
+							var n = b(V()), r = V(), i = V() === E();
 							return n !== t.e && c(e, "id", t.e = n), r !== t.t && c(e, "data-index", t.t = r), i !== t.a && e.classList.toggle("combobox-option-active", t.a = i), t;
 						}, {
 							e: void 0,
@@ -198,7 +194,7 @@ function P(r) {
 						}), e;
 					}
 				}), null), i((e) => {
-					var n = !!ne(), r = b();
+					var n = !!B(), r = y();
 					return n !== e.e && t.classList.toggle("combobox-list-detail", e.e = n), r !== e.t && c(t, "id", e.t = r), e;
 				}, {
 					e: void 0,
@@ -206,8 +202,8 @@ function P(r) {
 				}), t;
 			}
 		}), null), i((e) => {
-			var n = r.class ? `combobox ${r.class}` : "combobox", i = !!S(), a = !(S() || !R()?.detail), o = !(S() || R()?.icon === void 0), s = v(), l = S(), d = b(), f = S() && V() > 0 ? x(F()) : void 0, p = r.ariaLabel, h = r.describedBy, g = r.required, _ = r.disabled, y = r.onChange === void 0, C = r.value, w = K();
-			return n !== e.e && t(u, e.e = n), i !== e.t && u.classList.toggle("combobox-open", e.t = i), a !== e.a && u.classList.toggle("combobox-with-detail", e.a = a), o !== e.o && u.classList.toggle("combobox-with-icon", e.o = o), s !== e.i && c(m, "id", e.i = s), l !== e.n && c(m, "aria-expanded", e.n = l), d !== e.s && c(m, "aria-controls", e.s = d), f !== e.h && c(m, "aria-activedescendant", e.h = f), p !== e.r && c(m, "aria-label", e.r = p), h !== e.d && c(m, "aria-describedby", e.d = h), g !== e.l && (m.required = e.l = g), _ !== e.u && (m.disabled = e.u = _), y !== e.c && (m.readOnly = e.c = y), C !== e.w && c(m, "data-value", e.w = C), w !== e.m && c(m, "placeholder", e.m = w), e;
+			var n = r.class ? `combobox ${r.class}` : "combobox", i = !!S(), a = !(S() || !R()?.detail), o = !(S() || R()?.icon === void 0), s = m(), l = S(), d = y(), f = S() && H() > 0 ? b(E()) : void 0, p = r.ariaLabel, g = r.describedBy, _ = r.required, v = r.disabled, x = r.onChange === void 0, C = r.value, w = ne();
+			return n !== e.e && t(u, e.e = n), i !== e.t && u.classList.toggle("combobox-open", e.t = i), a !== e.a && u.classList.toggle("combobox-with-detail", e.a = a), o !== e.o && u.classList.toggle("combobox-with-icon", e.o = o), s !== e.i && c(h, "id", e.i = s), l !== e.n && c(h, "aria-expanded", e.n = l), d !== e.s && c(h, "aria-controls", e.s = d), f !== e.h && c(h, "aria-activedescendant", e.h = f), p !== e.r && c(h, "aria-label", e.r = p), g !== e.d && c(h, "aria-describedby", e.d = g), _ !== e.l && (h.required = e.l = _), v !== e.u && (h.disabled = e.u = v), x !== e.c && (h.readOnly = e.c = x), C !== e.w && c(h, "data-value", e.w = C), w !== e.m && c(h, "placeholder", e.m = w), e;
 		}, {
 			e: void 0,
 			t: void 0,
@@ -224,7 +220,7 @@ function P(r) {
 			c: void 0,
 			w: void 0,
 			m: void 0
-		}), i(() => m.value = S() ? w() : R()?.label ?? ""), u;
+		}), i(() => h.value = S() ? w() : R()?.label ?? ""), u;
 	})();
 }
 r([
@@ -236,131 +232,147 @@ r([
 ]);
 //#endregion
 //#region src/data-table.tsx
-var F = /*#__PURE__*/ u("<div role=dialog class=data-table-customizer-panel><p class=data-table-customizer-title></p><ul class=data-table-customizer-list></ul><div class=data-table-customizer-actions><button type=button></button><button type=button>"), I = /*#__PURE__*/ u("<div class=data-table-toolbar><div class=data-table-customizer><button type=button class=data-table-customizer-button aria-haspopup=dialog><span aria-hidden=true>⚙</span> "), L = /*#__PURE__*/ u("<th class=data-table-checkbox><span class=data-table-visually-hidden>Select rows</span><input type=checkbox>"), R = /*#__PURE__*/ u("<th>Actions"), z = /*#__PURE__*/ u("<div><div class=data-table-scroll><table class=data-table><thead><tr></tr></thead><tbody>"), ne = /*#__PURE__*/ u("<li><label class=data-table-customizer-option><input type=checkbox>"), B = /*#__PURE__*/ u("<button type=button class=data-table-sort><span class=data-table-sort-indicator aria-hidden=true>"), V = /*#__PURE__*/ u("<th>"), re = /*#__PURE__*/ u("<td class=data-table-checkbox><input type=checkbox>"), H = /*#__PURE__*/ u("<td>"), U = /*#__PURE__*/ u("<tr>"), W = /*#__PURE__*/ u("<p class=data-table-status>Loading…"), G = /*#__PURE__*/ u("<p class=data-table-status>No results.");
-function K(e) {
+var z = /*#__PURE__*/ u("<div class=data-table-toolbar-start>"), B = /*#__PURE__*/ u("<div role=dialog class=data-table-customizer-panel><p class=data-table-customizer-title></p><ul class=data-table-customizer-list></ul><div class=data-table-customizer-actions><button type=button></button><button type=button>"), V = /*#__PURE__*/ u("<div class=data-table-customizer><button type=button class=data-table-customizer-button aria-haspopup=dialog><span aria-hidden=true>⚙</span> "), H = /*#__PURE__*/ u("<div class=data-table-toolbar>"), U = /*#__PURE__*/ u("<th class=data-table-checkbox><span class=data-table-visually-hidden>Select rows</span><input type=checkbox>"), W = /*#__PURE__*/ u("<th>Actions"), G = /*#__PURE__*/ u("<div><div class=data-table-scroll><table class=data-table><thead><tr></tr></thead><tbody>"), K = /*#__PURE__*/ u("<li><label class=data-table-customizer-option><input type=checkbox>"), q = /*#__PURE__*/ u("<button type=button class=data-table-sort><span class=data-table-sort-indicator aria-hidden=true>"), ne = /*#__PURE__*/ u("<th>"), re = /*#__PURE__*/ u("<td class=data-table-checkbox><input type=checkbox>"), ie = /*#__PURE__*/ u("<td>"), ae = /*#__PURE__*/ u("<tr>"), oe = /*#__PURE__*/ u("<p class=data-table-status>Loading…"), se = /*#__PURE__*/ u("<p class=data-table-status>No results.");
+function J(e) {
 	return typeof e == "function" ? e() : e;
 }
-function q(e) {
-	let r = h(() => K(e.rows)), s = () => K(e.loading ?? !1), l = () => K(e.selected ?? []), u = e.sortKey !== void 0 || e.sortDirection !== void 0, [y, b] = g(e.defaultSort), x = () => u ? K(e.sortKey ?? void 0) : y()?.key, S = () => u ? K(e.sortDirection ?? "asc") : y()?.direction ?? "asc", C = () => K(e.showColumnCustomizer ?? !1), w = () => e.selected !== void 0 && e.onSelectionChange !== void 0, T = () => {
+function Y(e) {
+	let r = g(() => J(e.rows)), s = () => J(e.loading ?? !1), l = () => J(e.selected ?? []), u = e.sortKey !== void 0 || e.sortDirection !== void 0, [y, x] = _(e.defaultSort), S = () => u ? J(e.sortKey ?? void 0) : y()?.key, C = () => u ? J(e.sortDirection ?? "asc") : y()?.direction ?? "asc", w = () => J(e.showColumnCustomizer ?? !1), T = m(() => e.toolbar), E = () => e.selected !== void 0 && e.onSelectionChange !== void 0, ee = () => {
 		let t = l();
 		return r().length > 0 && r().every((n) => t.includes(e.getRowId(n)));
-	}, E = h(() => e.defaultVisibleColumns ?? e.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [D, ee] = g(void 0), O = () => e.visibleColumns === void 0 ? D() ?? E() : K(e.visibleColumns), k = h(() => new Set(O())), A = h(() => e.columns.filter((e) => e.toggleable === !1 || k().has(e.key))), te = h(() => e.columns.filter((e) => e.toggleable !== !1)), j = h(() => te().map((e) => e.key));
-	function M(e, t) {
+	}, D = g(() => e.defaultVisibleColumns ?? e.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [O, k] = _(void 0), A = () => e.visibleColumns === void 0 ? O() ?? D() : J(e.visibleColumns), j = g(() => new Set(A())), M = g(() => e.columns.filter((e) => e.toggleable === !1 || j().has(e.key))), te = g(() => e.columns.filter((e) => e.toggleable !== !1)), N = g(() => te().map((e) => e.key));
+	function P(e, t) {
 		return t.sortValue ? t.sortValue(e) : e[t.key];
 	}
-	function N(e, t) {
+	function F(e, t) {
 		return e === t ? 0 : e == null ? -1 : t == null ? 1 : typeof e == "number" && typeof t == "number" ? e - t : String(e).localeCompare(String(t), void 0, { numeric: !0 });
 	}
-	let P = h(() => {
-		let t = r(), n = x();
+	let I = g(() => {
+		let t = r(), n = S();
 		if (u || !n) return t;
 		let i = e.columns.find((e) => e.key === n);
 		if (!i) return t;
-		let a = S() === "asc" ? 1 : -1;
-		return [...t].sort((e, t) => a * N(M(e, i), M(t, i)));
+		let a = C() === "asc" ? 1 : -1;
+		return [...t].sort((e, t) => a * F(P(e, i), P(t, i)));
 	});
-	function q(t) {
-		let n = x() === t, r = n && S() === "desc" ? void 0 : {
+	function L(t) {
+		let n = S() === t, r = n && C() === "desc" ? void 0 : {
 			key: t,
 			direction: n ? "desc" : "asc"
 		};
-		u || b(r), e.onSort?.(t), r || e.onSortClear?.(), e.onSortChange?.(r);
+		u || x(r), e.onSort?.(t), r || e.onSortClear?.(), e.onSortChange?.(r);
 	}
-	function ie(t) {
+	function R(t) {
 		let n = new Map(e.columns.map((e, t) => [e.key, t]));
 		return [...t].sort((e, t) => (n.get(e) ?? 0) - (n.get(t) ?? 0));
 	}
-	function J(t) {
-		let n = ie(t);
-		e.visibleColumns === void 0 && ee(n), e.onVisibleColumnsChange?.(n);
+	function Y(t) {
+		let n = R(t);
+		e.visibleColumns === void 0 && k(n), e.onVisibleColumnsChange?.(n);
 	}
-	function ae(e, t) {
-		let n = new Set(O());
-		t ? n.add(e) : n.delete(e), J(j().filter((e) => n.has(e)));
+	function ce(e, t) {
+		let n = new Set(A());
+		t ? n.add(e) : n.delete(e), Y(N().filter((e) => n.has(e)));
 	}
-	function oe() {
-		J(j());
+	function le() {
+		Y(N());
 	}
-	function se() {
-		J(E());
+	function ue() {
+		Y(D());
 	}
-	let Y = `${_()}-panel`, [X, Z] = g(!1), Q;
-	m(() => {
-		if (!X() || !C()) return;
+	let de = `${v()}-panel`, [X, fe] = _(!1), Z;
+	h(() => {
+		if (!X() || !w()) return;
 		function e(e) {
-			Q && !Q.contains(e.target) && Z(!1);
+			Z && !Z.contains(e.target) && fe(!1);
 		}
 		function t(e) {
-			e.key === "Escape" && Z(!1);
+			e.key === "Escape" && fe(!1);
 		}
-		document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), v(() => {
+		document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), b(() => {
 			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
 		});
 	});
-	let $;
-	m(() => {
-		$ && ($.indeterminate = l().length > 0 && !T());
+	let Q;
+	h(() => {
+		Q && (Q.indeterminate = l().length > 0 && !ee());
 	});
-	function ce(t) {
+	function pe(t) {
 		e.onSelectionChange?.(t ? r().map(e.getRowId) : []);
 	}
-	function le(t, n) {
+	function me(t, n) {
 		let r = e.getRowId(t), i = l(), a = n ? [...i, r] : i.filter((e) => e !== r);
 		e.onSelectionChange?.(a);
 	}
-	function ue(t) {
+	function he(t) {
 		return l().includes(e.getRowId(t));
 	}
-	function de(e) {
-		return e.toggleable === !1 || k().has(e.key);
+	function ge(e) {
+		return e.toggleable === !1 || j().has(e.key);
 	}
-	function fe(t, n) {
+	function _e(t, n) {
 		return e.getCell?.(t, n) ?? n.getValue?.(t) ?? null;
 	}
 	return (() => {
-		var l = z(), m = l.firstChild, h = m.firstChild.firstChild, g = h.firstChild, _ = h.nextSibling;
+		var l = G(), m = l.firstChild, h = m.firstChild.firstChild, g = h.firstChild, _ = h.nextSibling;
 		return a(l, n(p, {
 			get when() {
-				return C();
+				return w() || T.toArray().length > 0;
 			},
 			get children() {
-				var t = I(), r = t.firstChild, o = r.firstChild;
-				o.firstChild.nextSibling;
-				var s = Q;
-				return typeof s == "function" ? d(s, r) : Q = r, o.$$click = () => Z((e) => !e), c(o, "aria-controls", Y), a(o, () => e.columnCustomizerLabel ?? "Columns", null), a(r, n(p, {
+				var t = H();
+				return a(t, n(p, {
 					get when() {
-						return X();
+						return T.toArray().length > 0;
 					},
 					get children() {
-						var t = F(), r = t.firstChild, o = r.nextSibling, s = o.nextSibling.firstChild, l = s.nextSibling;
-						return c(t, "id", Y), a(r, () => e.columnCustomizerTitle ?? "Shown columns"), a(o, n(f, {
-							get each() {
-								return e.columns;
+						var e = z();
+						return a(e, T), e;
+					}
+				}), null), a(t, n(p, {
+					get when() {
+						return w();
+					},
+					get children() {
+						var t = V(), r = t.firstChild;
+						r.firstChild.nextSibling;
+						var o = Z;
+						return typeof o == "function" ? d(o, t) : Z = t, r.$$click = () => fe((e) => !e), c(r, "aria-controls", de), a(r, () => e.columnCustomizerLabel ?? "Columns", null), a(t, n(p, {
+							get when() {
+								return X();
 							},
-							children: (e) => (() => {
-								var t = ne(), n = t.firstChild, r = n.firstChild;
-								return r.addEventListener("change", (t) => ae(e.key, t.currentTarget.checked)), a(n, () => e.ariaLabel ?? e.label, null), i(() => r.disabled = e.toggleable === !1), i(() => r.checked = de(e)), t;
-							})()
-						})), s.$$click = oe, a(s, () => e.columnCustomizerShowAllLabel ?? "Show all"), l.$$click = se, a(l, () => e.columnCustomizerResetLabel ?? "Reset"), i(() => c(t, "aria-label", e.columnCustomizerTitle ?? "Customize columns")), t;
+							get children() {
+								var t = B(), r = t.firstChild, o = r.nextSibling, s = o.nextSibling.firstChild, l = s.nextSibling;
+								return c(t, "id", de), a(r, () => e.columnCustomizerTitle ?? "Shown columns"), a(o, n(f, {
+									get each() {
+										return e.columns;
+									},
+									children: (e) => (() => {
+										var t = K(), n = t.firstChild, r = n.firstChild;
+										return r.addEventListener("change", (t) => ce(e.key, t.currentTarget.checked)), a(n, () => e.ariaLabel ?? e.label, null), i(() => r.disabled = e.toggleable === !1), i(() => r.checked = ge(e)), t;
+									})()
+								})), s.$$click = le, a(s, () => e.columnCustomizerShowAllLabel ?? "Show all"), l.$$click = ue, a(l, () => e.columnCustomizerResetLabel ?? "Reset"), i(() => c(t, "aria-label", e.columnCustomizerTitle ?? "Customize columns")), t;
+							}
+						}), null), i(() => c(r, "aria-expanded", X())), t;
 					}
-				}), null), i(() => c(o, "aria-expanded", X())), t;
+				}), null), t;
 			}
 		}), m), a(g, n(p, {
 			get when() {
-				return w();
+				return E();
 			},
 			get children() {
-				var t = L(), n = t.firstChild.nextSibling;
-				n.addEventListener("change", (e) => ce(e.currentTarget.checked));
-				var r = $;
-				return typeof r == "function" ? d(r, n) : $ = n, i(() => c(n, "aria-label", e.selectionLabel ?? "Select all rows")), i(() => n.checked = T()), t;
+				var t = U(), n = t.firstChild.nextSibling;
+				n.addEventListener("change", (e) => pe(e.currentTarget.checked));
+				var r = Q;
+				return typeof r == "function" ? d(r, n) : Q = n, i(() => c(n, "aria-label", e.selectionLabel ?? "Select all rows")), i(() => n.checked = ee()), t;
 			}
 		}), null), a(g, n(f, {
 			get each() {
-				return A();
+				return M();
 			},
 			children: (r) => (() => {
-				var s = V();
+				var s = ne();
 				return a(s, n(p, {
 					get when() {
 						return o(() => !!r.sortable)() && (!u || e.onSort || e.onSortChange);
@@ -369,14 +381,14 @@ function q(e) {
 						return r.label;
 					},
 					get children() {
-						var e = B(), t = e.firstChild;
-						return e.$$click = () => q(r.key), a(e, () => r.label, t), a(t, (() => {
-							var e = o(() => x() === r.key);
-							return () => e() ? S() === "asc" ? "▲" : "▼" : "";
+						var e = q(), t = e.firstChild;
+						return e.$$click = () => L(r.key), a(e, () => r.label, t), a(t, (() => {
+							var e = o(() => S() === r.key);
+							return () => e() ? C() === "asc" ? "▲" : "▼" : "";
 						})()), e;
 					}
 				})), i((e) => {
-					var n = r.class, i = r.sortable ? x() === r.key ? S() === "asc" ? "ascending" : "descending" : "none" : void 0;
+					var n = r.class, i = r.sortable ? S() === r.key ? C() === "asc" ? "ascending" : "descending" : "none" : void 0;
 					return n !== e.e && t(s, e.e = n), i !== e.t && c(s, "aria-sort", e.t = i), e;
 				}, {
 					e: void 0,
@@ -388,36 +400,36 @@ function q(e) {
 				return e.rowActions;
 			},
 			get children() {
-				return R();
+				return W();
 			}
 		}), null), a(_, n(f, {
 			get each() {
-				return P();
+				return I();
 			},
 			children: (r) => (() => {
-				var o = U();
+				var o = ae();
 				return a(o, n(p, {
 					get when() {
-						return w();
+						return E();
 					},
 					get children() {
 						var t = re(), n = t.firstChild;
-						return n.addEventListener("change", (e) => le(r, e.currentTarget.checked)), i(() => c(n, "aria-label", `Select row ${e.getRowId(r)}`)), i(() => n.checked = ue(r)), t;
+						return n.addEventListener("change", (e) => me(r, e.currentTarget.checked)), i(() => c(n, "aria-label", `Select row ${e.getRowId(r)}`)), i(() => n.checked = he(r)), t;
 					}
 				}), null), a(o, n(f, {
 					get each() {
-						return A();
+						return M();
 					},
 					children: (e) => (() => {
-						var n = H();
-						return a(n, () => fe(r, e)), i(() => t(n, e.class)), n;
+						var n = ie();
+						return a(n, () => _e(r, e)), i(() => t(n, e.class)), n;
 					})()
 				}), null), a(o, n(p, {
 					get when() {
 						return e.rowActions;
 					},
 					get children() {
-						var t = H();
+						var t = ie();
 						return a(t, () => e.rowActions?.(r)), t;
 					}
 				}), null), o;
@@ -427,18 +439,344 @@ function q(e) {
 				return s();
 			},
 			get children() {
-				return e.loadingContent ?? W();
+				return e.loadingContent ?? oe();
 			}
 		}), null), a(l, n(p, {
 			get when() {
-				return o(() => !s())() && (e.empty === void 0 ? r().length === 0 : K(e.empty));
+				return o(() => !s())() && (e.empty === void 0 ? r().length === 0 : J(e.empty));
 			},
 			get children() {
-				return e.emptyContent ?? G();
+				return e.emptyContent ?? se();
 			}
 		}), null), i(() => t(l, `data-table-wrap${e.class ? ` ${e.class}` : ""}`)), l;
 	})();
 }
 r(["click"]);
 //#endregion
-export { P as Combobox, q as DataTable };
+//#region src/filter-table.tsx
+var ce = /*#__PURE__*/ u("<input class=filter-table-input type=text>"), le = /*#__PURE__*/ u("<ul class=filter-table-chips>"), ue = /*#__PURE__*/ u("<div class=filter-table-multi>"), de = /*#__PURE__*/ u("<li class=filter-table-chip><button type=button class=filter-table-chip-remove>"), X = /*#__PURE__*/ u("<div class=filter-table-search><input type=search class=filter-table-input>"), fe = /*#__PURE__*/ u("<ul class=filter-table-pills aria-label=\"Applied filters\"><li><button type=button class=\"filter-table-pill filter-table-pill-clear\">"), Z = /*#__PURE__*/ u("<div class=filter-table-toolbar>"), Q = /*#__PURE__*/ u("<li><button type=button class=filter-table-pill>"), pe = /*#__PURE__*/ u("<div><div class=filter-table-tabs role=tablist></div><div role=tabpanel></div><div role=tabpanel><form class=filter-table-form><div class=filter-table-form-actions><button type=button class=filter-table-button></button><button type=submit class=\"filter-table-button filter-table-button-primary\">"), me = /*#__PURE__*/ u("<span class=filter-table-badge>"), he = /*#__PURE__*/ u("<button type=button role=tab class=filter-table-tab>"), ge = /*#__PURE__*/ u("<legend class=filter-table-legend>"), _e = /*#__PURE__*/ u("<fieldset class=filter-table-fieldset>"), ve = /*#__PURE__*/ u("<div class=filter-table-field><label class=filter-table-label>"), ye = "q";
+function be(e) {
+	return typeof e == "function" ? e() : e;
+}
+function xe(e) {
+	return Array.isArray(e) ? e.length > 0 : (e ?? "").trim() !== "";
+}
+function Se(e) {
+	let t = {};
+	for (let [n, r] of Object.entries(e)) xe(r) && (t[n] = Array.isArray(r) ? r : r.trim());
+	return t;
+}
+function $(e) {
+	return typeof e == "string" || typeof e == "number" || typeof e == "boolean" ? String(e) : "";
+}
+function Ce(e) {
+	let [r, o] = S(e, [
+		"rows",
+		"filters",
+		"filterValues",
+		"defaultFilterValues",
+		"onFilterValuesChange",
+		"manualFiltering",
+		"quickSearch",
+		"getSearchText",
+		"quickSearchLabel",
+		"resultsLabel",
+		"filtersLabel",
+		"applyLabel",
+		"resetLabel",
+		"clearAllLabel",
+		"anyLabel",
+		"yesLabel",
+		"noLabel",
+		"class"
+	]), l = g(() => be(r.rows)), [u, d] = _(Se(r.defaultFilterValues ?? {})), m = g(() => r.filterValues === void 0 ? u() : Se(be(r.filterValues)));
+	function b(e) {
+		let t = Se(e);
+		r.filterValues === void 0 && d(t), r.onFilterValuesChange?.(t);
+	}
+	function x(e, t) {
+		b({
+			...m(),
+			[e]: t
+		});
+	}
+	let C = () => $(m()[ye]), w = g(() => r.filters.filter((e) => xe(m()[e.key])));
+	function T(e, t) {
+		return t.getValue ? t.getValue(e) : e[t.key];
+	}
+	function E(e, t, n) {
+		if (t.match) return t.match(e, n);
+		let r = T(e, t);
+		if (t.type === "select") {
+			let e = Array.isArray(n) ? n : [n];
+			return (Array.isArray(r) ? r : [r]).some((t) => e.includes($(t)));
+		}
+		return t.type === "boolean" ? !!r == (n === "true") : $(r).toLowerCase().includes($(n).toLowerCase());
+	}
+	function ee(e) {
+		return r.getSearchText ? r.getSearchText(e) : o.columns.map((t) => $(t.sortValue?.(e) ?? e[t.key])).join(" ");
+	}
+	let D = g(() => {
+		if (r.manualFiltering) return l();
+		let e = C().toLowerCase(), t = w();
+		return l().filter((n) => (e === "" || ee(n).toLowerCase().includes(e)) && t.every((e) => E(n, e, m()[e.key])));
+	});
+	function A(e) {
+		if (e.options) return e.options;
+		let t = /* @__PURE__ */ new Set();
+		for (let n of l()) {
+			let r = T(n, e);
+			for (let e of Array.isArray(r) ? r : [r]) {
+				let n = $(e);
+				n !== "" && t.add(n);
+			}
+		}
+		return [...t].sort((e, t) => e.localeCompare(t, void 0, { numeric: !0 })).map((e) => ({
+			value: e,
+			label: e
+		}));
+	}
+	function j(e, t) {
+		return e.type === "boolean" ? t === "true" ? r.yesLabel ?? "Yes" : r.noLabel ?? "No" : e.type === "select" ? A(e).find((e) => String(e.value) === t)?.label ?? t : t;
+	}
+	let M = g(() => w().flatMap((e) => {
+		let t = m()[e.key];
+		return (Array.isArray(t) ? t : [t]).map((t) => ({
+			filter: e,
+			item: t,
+			text: `${e.label}: ${j(e, t)}`
+		}));
+	}));
+	function te(e, t) {
+		let n = m()[e.key];
+		x(e.key, Array.isArray(n) ? n.filter((e) => e !== t) : "");
+	}
+	function N() {
+		b({ [ye]: C() });
+	}
+	let [P, F] = _(m());
+	h(y(m, (e) => F(e)));
+	function I(e) {
+		return P()[e];
+	}
+	function L(e, t) {
+		F((n) => ({
+			...n,
+			[e]: t
+		}));
+	}
+	let z = g(() => {
+		let e = /* @__PURE__ */ new Map([[void 0, []]]);
+		for (let t of r.filters) e.set(t.group, [...e.get(t.group) ?? [], t]);
+		return [...e.entries()].filter(([, e]) => e.length > 0).map(([e, t]) => ({
+			name: e,
+			filters: t
+		}));
+	}), B = v(), V = ["results", "filters"], [H, U] = _("results"), W = (e) => `${B}-tab-${e}`, G = (e) => `${B}-panel-${e}`, K = (e) => `${B}-filter-${e}`;
+	function q(e) {
+		e === "filters" && F(m()), U(e);
+	}
+	function ne(e) {
+		let t = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+		if (t === 0) return;
+		e.preventDefault();
+		let n = V[(V.indexOf(H()) + t + V.length) % V.length];
+		q(n), document.getElementById(W(n))?.focus();
+	}
+	function re(e) {
+		e.preventDefault(), b(P()), U("results");
+	}
+	function ie() {
+		N(), U("results");
+	}
+	function ae(e) {
+		if (e.type === "text") return (() => {
+			var t = ce();
+			return t.$$input = (t) => L(e.key, t.currentTarget.value), i((n) => {
+				var r = K(e.key), i = e.placeholder;
+				return r !== n.e && c(t, "id", n.e = r), i !== n.t && c(t, "placeholder", n.t = i), n;
+			}, {
+				e: void 0,
+				t: void 0
+			}), i(() => t.value = $(I(e.key))), t;
+		})();
+		if (e.type === "boolean") return n(R, {
+			get id() {
+				return K(e.key);
+			},
+			get value() {
+				return $(I(e.key));
+			},
+			onChange: (t) => L(e.key, t),
+			get emptyLabel() {
+				return r.anyLabel ?? "Any";
+			},
+			get options() {
+				return [{
+					value: "true",
+					label: r.yesLabel ?? "Yes"
+				}, {
+					value: "false",
+					label: r.noLabel ?? "No"
+				}];
+			}
+		});
+		let t = () => {
+			let t = I(e.key);
+			return Array.isArray(t) ? t : [];
+		};
+		return (() => {
+			var o = ue();
+			return a(o, n(R, {
+				get id() {
+					return K(e.key);
+				},
+				value: "",
+				onChange: (n) => L(e.key, [...t(), n]),
+				get options() {
+					return A(e).filter((e) => !t().includes(String(e.value)));
+				},
+				get placeholder() {
+					return e.placeholder ?? r.anyLabel ?? "Any";
+				}
+			}), null), a(o, n(p, {
+				get when() {
+					return t().length > 0;
+				},
+				get children() {
+					var r = le();
+					return a(r, n(f, {
+						get each() {
+							return t();
+						},
+						children: (r) => (() => {
+							var o = de(), s = o.firstChild;
+							return a(o, () => j(e, r), s), s.$$click = () => L(e.key, t().filter((e) => e !== r)), a(s, n(k, {
+								size: 12,
+								"aria-hidden": "true"
+							})), i(() => c(s, "aria-label", `Remove ${j(e, r)}`)), o;
+						})()
+					})), r;
+				}
+			}), null), o;
+		})();
+	}
+	let oe = (() => {
+		var e = Z();
+		return a(e, n(p, {
+			get when() {
+				return r.quickSearch !== !1;
+			},
+			get children() {
+				var e = X(), t = e.firstChild;
+				return a(e, n(O, {
+					class: "filter-table-search-icon",
+					size: 16,
+					"aria-hidden": "true"
+				}), t), t.$$input = (e) => x(ye, e.currentTarget.value), i((e) => {
+					var n = r.quickSearchLabel ?? "Quick search", i = r.quickSearchLabel ?? "Quick search";
+					return n !== e.e && c(t, "aria-label", e.e = n), i !== e.t && c(t, "placeholder", e.t = i), e;
+				}, {
+					e: void 0,
+					t: void 0
+				}), i(() => t.value = C()), e;
+			}
+		}), null), a(e, n(p, {
+			get when() {
+				return M().length > 0;
+			},
+			get children() {
+				var e = fe(), t = e.firstChild, o = t.firstChild;
+				return a(e, n(f, {
+					get each() {
+						return M();
+					},
+					children: (e) => (() => {
+						var t = Q(), r = t.firstChild;
+						return r.$$click = () => te(e.filter, e.item), a(r, () => e.text, null), a(r, n(k, {
+							size: 12,
+							"aria-hidden": "true"
+						}), null), i(() => c(r, "aria-label", `Remove filter ${e.text}`)), t;
+					})()
+				}), t), o.$$click = N, a(o, () => r.clearAllLabel ?? "Clear all"), e;
+			}
+		}), null), e;
+	})();
+	return (() => {
+		var e = pe(), l = e.firstChild, u = l.nextSibling, d = u.nextSibling, m = d.firstChild, h = m.firstChild, g = h.firstChild, _ = g.nextSibling;
+		return a(l, n(f, {
+			each: V,
+			children: (e) => (() => {
+				var t = he();
+				return t.$$keydown = ne, t.$$click = () => q(e), a(t, () => e === "results" ? r.resultsLabel ?? "Results" : r.filtersLabel ?? "Filters", null), a(t, n(p, {
+					get when() {
+						return e === "results" || w().length > 0;
+					},
+					get children() {
+						var t = me();
+						return a(t, () => e === "results" ? D().length : w().length), t;
+					}
+				}), null), i((n) => {
+					var r = W(e), i = H() === e, a = G(e), o = H() === e ? 0 : -1;
+					return r !== n.e && c(t, "id", n.e = r), i !== n.t && c(t, "aria-selected", n.t = i), a !== n.a && c(t, "aria-controls", n.a = a), o !== n.o && c(t, "tabindex", n.o = o), n;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0
+				}), t;
+			})()
+		})), a(u, n(Y, s(o, {
+			rows: D,
+			toolbar: oe
+		}))), m.addEventListener("submit", re), a(m, n(f, {
+			get each() {
+				return z();
+			},
+			children: (e) => (() => {
+				var t = _e();
+				return a(t, n(p, {
+					get when() {
+						return e.name;
+					},
+					get children() {
+						var t = ge();
+						return a(t, () => e.name), t;
+					}
+				}), null), a(t, n(f, {
+					get each() {
+						return e.filters;
+					},
+					children: (e) => (() => {
+						var t = ve(), n = t.firstChild;
+						return a(n, () => e.label), a(t, () => ae(e), null), i(() => c(n, "for", K(e.key))), t;
+					})()
+				}), null), t;
+			})()
+		}), h), g.$$click = ie, a(g, n(k, {
+			size: 16,
+			"aria-hidden": "true"
+		}), null), a(g, () => r.resetLabel ?? "Reset", null), a(_, n(O, {
+			size: 16,
+			"aria-hidden": "true"
+		}), null), a(_, () => r.applyLabel ?? "Search", null), i((n) => {
+			var i = `filter-table${r.class ? ` ${r.class}` : ""}`, a = G("results"), o = W("results"), s = H() !== "results", l = G("filters"), f = W("filters"), p = H() !== "filters";
+			return i !== n.e && t(e, n.e = i), a !== n.t && c(u, "id", n.t = a), o !== n.a && c(u, "aria-labelledby", n.a = o), s !== n.o && (u.hidden = n.o = s), l !== n.i && c(d, "id", n.i = l), f !== n.n && c(d, "aria-labelledby", n.n = f), p !== n.s && (d.hidden = n.s = p), n;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0
+		}), e;
+	})();
+}
+r([
+	"input",
+	"click",
+	"keydown"
+]);
+//#endregion
+export { R as Combobox, Y as DataTable, Ce as FilterTable };

package/dist/styles.css

@@ -9,10 +9,17 @@
 
 .data-table-toolbar {
 	display: flex;
+	align-items: flex-start;
 	justify-content: flex-end;
+	gap: 0.5rem;
 	margin-bottom: 0.5rem;
 }
 
+.data-table-toolbar-start {
+	flex: 1;
+	min-width: 0;
+}
+
 .data-table-customizer {
 	position: relative;
 }
@@ -355,3 +362,288 @@
 	display: flex;
 	align-items: center;
 }
+
+/* FilterTable: Results/Filters tabs around a DataTable. */
+.filter-table-tabs {
+	display: flex;
+	gap: 0.25rem;
+	margin-bottom: 0.75rem;
+	border-bottom: 1px solid
+		var(--filter-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+}
+
+.filter-table-tab {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+	margin-bottom: -1px;
+	padding: 0.5rem 0.875rem;
+	border: 1px solid transparent;
+	border-radius: 0.375rem 0.375rem 0 0;
+	background: transparent;
+	color: var(
+		--filter-table-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	font: inherit;
+	cursor: pointer;
+}
+
+.filter-table-tab:hover {
+	background: transparent;
+	color: inherit;
+}
+
+.filter-table-tab[aria-selected="true"] {
+	border-color: var(
+			--filter-table-border,
+			var(--border, light-dark(#d0d0d0, #3a3e45))
+		)
+		var(--filter-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)))
+		transparent;
+	background: var(
+		--filter-table-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	color: inherit;
+	font-weight: 600;
+}
+
+.filter-table-badge {
+	min-width: 1.25rem;
+	padding: 0.05rem 0.4rem;
+	border-radius: 999px;
+	background: var(
+		--filter-table-accent,
+		var(--primary, light-dark(#1a66d6, #6ea8fe))
+	);
+	color: light-dark(#ffffff, #10141a);
+	font-size: 0.75em;
+	font-weight: 600;
+	text-align: center;
+}
+
+.filter-table-toolbar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.filter-table-input {
+	box-sizing: border-box;
+	width: 100%;
+	padding: 0.375rem 0.5rem;
+	border: 1px solid
+		var(--filter-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0.375rem;
+	background: var(
+		--filter-table-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	color: inherit;
+	font: inherit;
+}
+
+.filter-table-search {
+	position: relative;
+	flex: 0 1 16rem;
+	min-width: 10rem;
+}
+
+.filter-table-search .filter-table-input {
+	padding-left: 1.9rem;
+}
+
+.filter-table-search-icon {
+	position: absolute;
+	top: 50%;
+	left: 0.55rem;
+	transform: translateY(-50%);
+	color: var(
+		--filter-table-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	pointer-events: none;
+}
+
+.filter-table-pills,
+.filter-table-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.375rem;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.filter-table-pill,
+.filter-table-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.3rem;
+	padding: 0.2rem 0.55rem;
+	border: 1px solid transparent;
+	border-radius: 999px;
+	background: var(
+		--filter-table-pill-bg,
+		light-dark(rgb(26 102 214 / 12%), rgb(110 168 254 / 16%))
+	);
+	color: var(
+		--filter-table-accent,
+		var(--primary, light-dark(#1a66d6, #6ea8fe))
+	);
+	font: inherit;
+	font-size: 0.8125rem;
+	line-height: 1.4;
+}
+
+.filter-table-pill {
+	cursor: pointer;
+}
+
+.filter-table-pill:hover {
+	border-color: currentColor;
+	background: var(
+		--filter-table-pill-bg,
+		light-dark(rgb(26 102 214 / 12%), rgb(110 168 254 / 16%))
+	);
+}
+
+.filter-table-pill-clear {
+	background: transparent;
+	color: var(
+		--filter-table-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+}
+
+.filter-table-pill-clear:hover {
+	background: transparent;
+}
+
+.filter-table-chip-remove {
+	display: inline-flex;
+	padding: 0;
+	border: none;
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+}
+
+.filter-table-chip-remove:hover {
+	background: transparent;
+}
+
+.filter-table-multi {
+	display: grid;
+	gap: 0.375rem;
+	min-width: 0;
+}
+
+.filter-table-form {
+	/* Label column width and gap; group headings are indented by both so they
+	line up with the inputs. */
+	--filter-table-label-width: 9rem;
+	--filter-table-label-gap: 1rem;
+	display: grid;
+	gap: 1.25rem;
+	max-width: 40rem;
+}
+
+/* Groups are plain sections: a muted heading, separated by a thin rule. */
+.filter-table-fieldset {
+	display: grid;
+	gap: 0.5rem;
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+	border: none;
+}
+
+.filter-table-fieldset + .filter-table-fieldset {
+	padding-top: 1.25rem;
+	border-top: 1px solid
+		var(--filter-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+}
+
+/* Floated so it lays out as a regular grid item instead of on the border. */
+.filter-table-legend {
+	float: left;
+	width: 100%;
+	margin-bottom: 0.25rem;
+	padding: 0 0 0
+		calc(var(--filter-table-label-width) + var(--filter-table-label-gap));
+	box-sizing: border-box;
+	color: var(
+		--filter-table-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	font-size: 0.75rem;
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+
+/* Labels right-aligned in a column next to their inputs. */
+.filter-table-field {
+	display: grid;
+	grid-template-columns: var(--filter-table-label-width) minmax(0, 1fr);
+	align-items: start;
+	gap: var(--filter-table-label-gap);
+}
+
+.filter-table-label {
+	padding-top: calc(0.375rem + 1px);
+}
+
+.filter-table-form-actions {
+	display: flex;
+	justify-content: flex-end;
+	padding-top: 1.25rem;
+	border-top: 1px solid
+		var(--filter-table-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	gap: 0.5rem;
+}
+
+.filter-table-button {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+}
+
+.filter-table-button-primary {
+	border-color: var(
+		--filter-table-accent,
+		var(--primary, light-dark(#1a66d6, #6ea8fe))
+	);
+	background: var(
+		--filter-table-accent,
+		var(--primary, light-dark(#1a66d6, #6ea8fe))
+	);
+	color: light-dark(#ffffff, #10141a);
+	font-weight: 600;
+}
+
+.filter-table-button-primary:hover {
+	filter: brightness(1.1);
+	background: var(
+		--filter-table-accent,
+		var(--primary, light-dark(#1a66d6, #6ea8fe))
+	);
+}
+
+@media (max-width: 640px) {
+	.filter-table-field {
+		grid-template-columns: 1fr;
+		gap: 0.25rem;
+	}
+
+	.filter-table-label {
+		padding-top: 0;
+	}
+
+	.filter-table-legend {
+		padding-left: 0;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serkonda7/solid-components",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "Reusable components for SolidJS",
   "license": "MIT",
   "author": "serkonda7",
@@ -42,15 +42,15 @@
     "solid-js": ">=1.9.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.14",
-    "@tabler/icons-solidjs": "~3.48.0",
+    "@biomejs/biome": "2.5.15",
+    "@tabler/icons-solidjs": "~3.49.0",
     "@types/bun": "1.4.2",
-    "@vitest/browser-playwright": "^5.0.2",
-    "playwright": "~1.63.0",
-    "solid-js": "~1.9.15",
+    "@vitest/browser-playwright": "~5.0.4",
+    "playwright": "~1.64.0",
+    "solid-js": "~1.9.17",
     "typescript": "~7.0.2",
-    "vite": "~8.3.0",
+    "vite": "~8.3.4",
     "vite-plugin-solid": "~2.11.14",
-    "vitest": "~5.0.2"
+    "vitest": "~5.0.4"
   }
 }