@serkonda7/solid-components 0.0.4 → 0.0.7

package/README.md

@@ -8,7 +8,7 @@ Reusable components for [SolidJS](https://www.solidjs.com/).
 
 ## 📦 Installation
 ```sh
-bun install @serkonda7/solid-components solid-js
+bun install @serkonda7/solid-components solid-js @tabler/icons-solidjs
 ```
 
 
@@ -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.
+- `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

@@ -0,0 +1,48 @@
+import type { Component, JSX } from 'solid-js';
+/** Icon component rendered before an option label, e.g. one from `@tabler/icons-solidjs`. */
+export type ComboboxIcon = Component<{
+    size?: number;
+}>;
+/** One `Combobox` entry. */
+export interface ComboboxOption {
+    value: number | string;
+    label: string;
+    /** Secondary text (e.g. the manufacturer), shown muted in a column after the labels. */
+    detail?: string;
+    /** Glyph shown before the label, in the list and in the closed input. */
+    icon?: ComboboxIcon;
+}
+export interface ComboboxProps {
+    /** Input id, for pairing with an external `<label for>`. Generated when omitted. */
+    id?: string;
+    /** Selected option value as a string; `''` means nothing (or the empty entry) is selected. */
+    value: string;
+    /** Omitted on read-only comboboxes. */
+    onChange?: (value: string) => void;
+    options: ComboboxOption[];
+    /** Label of the empty (`''`) first entry; omit for no empty choice. */
+    emptyLabel?: string;
+    required?: boolean;
+    disabled?: boolean;
+    autofocus?: boolean;
+    ariaLabel?: string;
+    describedBy?: string;
+    /** Called whenever the list opens, e.g. to refetch the options. */
+    onOpen?: () => unknown;
+    /** Pins an "Add …" entry at the end of the list; receives the trimmed search text. */
+    onAdd?: (query: string) => void;
+    /** Text of the pinned add entry. Defaults to `Add`. */
+    addLabel?: 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`. */
+    noMatchesLabel?: string;
+    class?: string;
+}
+/**
+ * Searchable dropdown of `options`, with an optional leading empty choice.
+ * A text combobox: typing filters the options by label and detail, arrow keys
+ * move the highlight (wrapping around), Enter picks it, Escape closes. The
+ * input shows the selected label while closed; the value sits in `data-value`.
+ */
+export declare function Combobox(props: ComboboxProps): JSX.Element;

package/dist/index.d.ts

@@ -4,4 +4,5 @@
  * Add components here as they are implemented so consumers can import them
  * from the package root.
  */
+export { Combobox, type ComboboxIcon, type ComboboxOption, type ComboboxProps, } from './combobox';
 export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, type DataTableSortDirection, } from './data-table';

package/dist/index.js

@@ -1,222 +1,389 @@
-import { className as e, createComponent as t, delegateEvents as n, effect as r, insert as i, memo as a, setAttribute as o, template as s, use as c } from "solid-js/web";
-import { For as l, Show as u, createEffect as d, createMemo as f, createSignal as p, createUniqueId as m, onCleanup as h } from "solid-js";
+import { Dynamic as e, className as t, createComponent as n, delegateEvents as r, effect as i, insert as a, memo as o, setAttribute as s, template as c, use as l } from "solid-js/web";
+import { IconChevronDown as u, IconPlus as d } from "@tabler/icons-solidjs";
+import { For as f, Show as p, createEffect as m, createMemo as h, createSignal as g, createUniqueId as _, onCleanup as v, onMount as y } from "solid-js";
+//#region src/combobox.tsx
+var b = /*#__PURE__*/ c("<span class=combobox-value aria-hidden=true><span class=combobox-option-label></span><span class=combobox-detail>"), x = /*#__PURE__*/ c("<div role=option class=\"combobox-option combobox-option-add\">"), S = /*#__PURE__*/ c("<div class=combobox-list role=listbox>"), C = /*#__PURE__*/ c("<div><input class=combobox-input role=combobox aria-autocomplete=list autocomplete=off>"), w = /*#__PURE__*/ c("<span class=combobox-icon aria-hidden=true>"), T = /*#__PURE__*/ c("<div class=combobox-empty>"), E = /*#__PURE__*/ c("<span class=combobox-detail>"), D = /*#__PURE__*/ c("<div role=option class=combobox-option><span class=combobox-option-label>"), ee = /*#__PURE__*/ c("<span class=combobox-option-icon aria-hidden=true>");
+function O(r) {
+	let c, v, O = _(), k = () => r.id ?? O, A = () => `${k()}-listbox`, j = (e) => `${k()}-option-${e}`, [M, N] = g(!1), [P, F] = g(""), [I, L] = g(0), R = h(() => r.emptyLabel === void 0 ? r.options : [{
+		value: "",
+		label: r.emptyLabel
+	}, ...r.options]), z = h(() => r.value === "" ? void 0 : R().find((e) => String(e.value) === r.value)), B = h(() => {
+		let e = P().trim().toLowerCase();
+		return e === "" ? R() : R().filter((t) => t.label.toLowerCase().includes(e) || (t.detail?.toLowerCase().includes(e) ?? !1));
+	}), V = () => r.options.some((e) => e.detail !== void 0), H = () => B().length, U = () => B().length + +!!r.onAdd, W = () => !r.disabled && r.onChange !== void 0;
+	y(() => {
+		r.autofocus === !0 && c?.focus();
+	}), m(() => {
+		M() && v?.querySelector(`[data-index="${I()}"]`)?.scrollIntoView({ block: "nearest" });
+	});
+	function G() {
+		if (M() || !W()) return;
+		F("");
+		let e = R().findIndex((e) => String(e.value) === r.value);
+		L(Math.max(e, 0)), N(!0), r.onOpen?.();
+	}
+	function K(e) {
+		if (N(!1), r.onAdd && e === H()) {
+			r.onAdd(P().trim());
+			return;
+		}
+		let t = B()[e];
+		t && String(t.value) !== r.value && r.onChange?.(String(t.value));
+	}
+	function q(e) {
+		let t = U();
+		M() ? t > 0 && L((I() + e + t) % t) : G();
+	}
+	function J(e) {
+		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+			e.preventDefault(), q(e.key === "ArrowDown" ? 1 : -1);
+			return;
+		}
+		M() && (e.key === "Enter" ? (e.preventDefault(), K(I())) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), N(!1)));
+	}
+	let te = () => M() ? z()?.label ?? r.emptyLabel ?? r.searchLabel ?? "Search" : r.emptyLabel;
+	return (() => {
+		var m = C(), h = m.firstChild;
+		h.addEventListener("blur", () => N(!1)), h.$$keydown = J, h.$$input = (e) => {
+			let t = e.currentTarget.value;
+			G(), F(t), L(0);
+		}, h.$$click = G;
+		var g = c;
+		return typeof g == "function" ? l(g, h) : c = h, a(m, n(p, {
+			get when() {
+				return o(() => !M())() && z()?.icon;
+			},
+			children: (t) => (() => {
+				var r = w();
+				return a(r, n(e, {
+					get component() {
+						return t();
+					},
+					size: 14
+				})), r;
+			})()
+		}), null), a(m, n(p, {
+			get when() {
+				return o(() => !M())() && z()?.detail;
+			},
+			get children() {
+				var e = b(), t = e.firstChild, n = t.nextSibling;
+				return a(t, () => z()?.label), a(n, () => z()?.detail), e;
+			}
+		}), null), a(m, n(u, {
+			class: "combobox-chevron",
+			size: 16,
+			"aria-hidden": "true"
+		}), null), a(m, n(p, {
+			get when() {
+				return M();
+			},
+			get children() {
+				var t = S(), o = v;
+				return typeof o == "function" ? l(o, t) : v = t, a(t, n(f, {
+					get each() {
+						return B();
+					},
+					get fallback() {
+						return (() => {
+							var e = T();
+							return a(e, () => r.noMatchesLabel ?? "No matching objects"), e;
+						})();
+					},
+					children: (t, o) => (() => {
+						var c = D(), l = c.firstChild;
+						return c.$$click = () => K(o()), c.$$mousemove = () => L(o()), c.$$mousedown = (e) => e.preventDefault(), a(l, n(p, {
+							get when() {
+								return t.icon;
+							},
+							children: (t) => (() => {
+								var r = ee();
+								return a(r, n(e, {
+									get component() {
+										return t();
+									},
+									size: 14
+								})), r;
+							})()
+						}), null), a(l, () => t.label, null), a(c, n(p, {
+							get when() {
+								return t.detail;
+							},
+							get children() {
+								var e = E();
+								return a(e, () => t.detail), e;
+							}
+						}), null), i((e) => {
+							var n = j(o()), i = o(), a = String(t.value) === r.value, l = o() === I(), u = t.value === "";
+							return n !== e.e && s(c, "id", e.e = n), i !== e.t && s(c, "data-index", e.t = i), a !== e.a && s(c, "aria-selected", e.a = a), l !== e.o && c.classList.toggle("combobox-option-active", e.o = l), u !== e.i && c.classList.toggle("combobox-option-empty", e.i = u), e;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0,
+							o: void 0,
+							i: void 0
+						}), c;
+					})()
+				}), null), a(t, n(p, {
+					get when() {
+						return r.onAdd;
+					},
+					get children() {
+						var e = x();
+						return e.$$click = () => K(H()), e.$$mousemove = () => L(H()), e.$$mousedown = (e) => e.preventDefault(), s(e, "aria-selected", !1), a(e, n(d, {
+							size: 14,
+							"aria-hidden": "true"
+						}), null), a(e, () => r.addLabel ?? "Add", null), i((t) => {
+							var n = j(H()), r = H(), i = H() === I();
+							return n !== t.e && s(e, "id", t.e = n), r !== t.t && s(e, "data-index", t.t = r), i !== t.a && e.classList.toggle("combobox-option-active", t.a = i), t;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0
+						}), e;
+					}
+				}), null), i((e) => {
+					var n = !!V(), r = A();
+					return n !== e.e && t.classList.toggle("combobox-list-detail", e.e = n), r !== e.t && s(t, "id", e.t = r), e;
+				}, {
+					e: void 0,
+					t: void 0
+				}), t;
+			}
+		}), null), i((e) => {
+			var n = r.class ? `combobox ${r.class}` : "combobox", i = !!M(), a = !(M() || !z()?.detail), o = !(M() || z()?.icon === void 0), c = k(), l = M(), u = A(), d = M() && U() > 0 ? j(I()) : void 0, f = r.ariaLabel, p = r.describedBy, g = r.required, _ = r.disabled, v = r.onChange === void 0, y = r.value, b = te();
+			return n !== e.e && t(m, e.e = n), i !== e.t && m.classList.toggle("combobox-open", e.t = i), a !== e.a && m.classList.toggle("combobox-with-detail", e.a = a), o !== e.o && m.classList.toggle("combobox-with-icon", e.o = o), c !== e.i && s(h, "id", e.i = c), l !== e.n && s(h, "aria-expanded", e.n = l), u !== e.s && s(h, "aria-controls", e.s = u), d !== e.h && s(h, "aria-activedescendant", e.h = d), f !== e.r && s(h, "aria-label", e.r = f), p !== e.d && s(h, "aria-describedby", e.d = p), g !== e.l && (h.required = e.l = g), _ !== e.u && (h.disabled = e.u = _), v !== e.c && (h.readOnly = e.c = v), y !== e.w && s(h, "data-value", e.w = y), b !== e.m && s(h, "placeholder", e.m = b), e;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0,
+			d: void 0,
+			l: void 0,
+			u: void 0,
+			c: void 0,
+			w: void 0,
+			m: void 0
+		}), i(() => h.value = M() ? P() : z()?.label ?? ""), m;
+	})();
+}
+r([
+	"click",
+	"input",
+	"keydown",
+	"mousedown",
+	"mousemove"
+]);
+//#endregion
 //#region src/data-table.tsx
-var g = /*#__PURE__*/ s("<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>"), ee = /*#__PURE__*/ s("<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> "), _ = /*#__PURE__*/ s("<th class=data-table-checkbox><span class=data-table-visually-hidden>Select rows</span><input type=checkbox>"), te = /*#__PURE__*/ s("<th>Actions"), v = /*#__PURE__*/ s("<div><div class=data-table-scroll><table class=data-table><thead><tr></tr></thead><tbody>"), y = /*#__PURE__*/ s("<li><label class=data-table-customizer-option><input type=checkbox>"), b = /*#__PURE__*/ s("<button type=button class=data-table-sort>"), ne = /*#__PURE__*/ s("<button type=button class=data-table-sort-clear aria-label=\"Clear sorting\"title=\"Clear sorting\">×"), re = /*#__PURE__*/ s("<th>"), ie = /*#__PURE__*/ s("<td class=data-table-checkbox><input type=checkbox>"), x = /*#__PURE__*/ s("<td>"), ae = /*#__PURE__*/ s("<tr>"), S = /*#__PURE__*/ s("<p class=data-table-status>Loading…"), C = /*#__PURE__*/ s("<p class=data-table-status>No results.");
-function w(e) {
+var k = /*#__PURE__*/ c("<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>"), A = /*#__PURE__*/ c("<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> "), j = /*#__PURE__*/ c("<th class=data-table-checkbox><span class=data-table-visually-hidden>Select rows</span><input type=checkbox>"), M = /*#__PURE__*/ c("<th>Actions"), N = /*#__PURE__*/ c("<div><div class=data-table-scroll><table class=data-table><thead><tr></tr></thead><tbody>"), P = /*#__PURE__*/ c("<li><label class=data-table-customizer-option><input type=checkbox>"), F = /*#__PURE__*/ c("<button type=button class=data-table-sort><span class=data-table-sort-indicator aria-hidden=true>"), I = /*#__PURE__*/ c("<th>"), L = /*#__PURE__*/ c("<td class=data-table-checkbox><input type=checkbox>"), R = /*#__PURE__*/ c("<td>"), z = /*#__PURE__*/ c("<tr>"), B = /*#__PURE__*/ c("<p class=data-table-status>Loading…"), V = /*#__PURE__*/ c("<p class=data-table-status>No results.");
+function H(e) {
 	return typeof e == "function" ? e() : e;
 }
-function T(n) {
-	let s = f(() => w(n.rows)), T = () => w(n.loading ?? !1), E = () => w(n.selected ?? []), D = n.sortKey !== void 0 || n.sortDirection !== void 0, [O, k] = p(n.defaultSort), A = () => D ? w(n.sortKey ?? void 0) : O()?.key, j = () => D ? w(n.sortDirection ?? "asc") : O()?.direction ?? "asc", M = () => w(n.showColumnCustomizer ?? !1), N = () => n.selected !== void 0 && n.onSelectionChange !== void 0, P = () => {
-		let e = E();
-		return s().length > 0 && s().every((t) => e.includes(n.getRowId(t)));
-	}, F = f(() => n.defaultVisibleColumns ?? n.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [I, L] = p(void 0), R = () => n.visibleColumns === void 0 ? I() ?? F() : w(n.visibleColumns), z = f(() => new Set(R())), B = f(() => n.columns.filter((e) => e.toggleable === !1 || z().has(e.key))), V = f(() => n.columns.filter((e) => e.toggleable !== !1)), H = f(() => V().map((e) => e.key));
-	function U(e, t) {
+function U(e) {
+	let r = h(() => H(e.rows)), c = () => H(e.loading ?? !1), u = () => H(e.selected ?? []), d = e.sortKey !== void 0 || e.sortDirection !== void 0, [y, b] = g(e.defaultSort), x = () => d ? H(e.sortKey ?? void 0) : y()?.key, S = () => d ? H(e.sortDirection ?? "asc") : y()?.direction ?? "asc", C = () => H(e.showColumnCustomizer ?? !1), w = () => e.selected !== void 0 && e.onSelectionChange !== void 0, T = () => {
+		let t = u();
+		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() : H(e.visibleColumns), U = h(() => new Set(O())), W = h(() => e.columns.filter((e) => e.toggleable === !1 || U().has(e.key))), G = h(() => e.columns.filter((e) => e.toggleable !== !1)), K = h(() => G().map((e) => e.key));
+	function q(e, t) {
 		return t.sortValue ? t.sortValue(e) : e[t.key];
 	}
-	function W(e, t) {
+	function J(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 G = f(() => {
-		let e = s(), t = A();
-		if (D || !t) return e;
-		let r = n.columns.find((e) => e.key === t);
-		if (!r) return e;
-		let i = j() === "asc" ? 1 : -1;
-		return [...e].sort((e, t) => i * W(U(e, r), U(t, r)));
+	let te = h(() => {
+		let t = r(), n = x();
+		if (d || !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 * J(q(e, i), q(t, i)));
 	});
-	function K(e) {
-		let t = {
-			key: e,
-			direction: A() === e && j() === "asc" ? "desc" : "asc"
+	function ne(t) {
+		let n = x() === t, r = n && S() === "desc" ? void 0 : {
+			key: t,
+			direction: n ? "desc" : "asc"
 		};
-		D || k(t), n.onSort?.(e), n.onSortChange?.(t);
-	}
-	function q() {
-		D || k(void 0), n.onSortClear?.(), n.onSortChange?.(void 0);
+		d || b(r), e.onSort?.(t), r || e.onSortClear?.(), e.onSortChange?.(r);
 	}
-	function oe(e) {
-		let t = new Map(n.columns.map((e, t) => [e.key, t]));
-		return [...e].sort((e, n) => (t.get(e) ?? 0) - (t.get(n) ?? 0));
+	function re(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(e) {
-		let t = oe(e);
-		n.visibleColumns === void 0 && L(t), n.onVisibleColumnsChange?.(t);
+	function Y(t) {
+		let n = re(t);
+		e.visibleColumns === void 0 && ee(n), e.onVisibleColumnsChange?.(n);
 	}
-	function se(e, t) {
-		let n = new Set(R());
-		t ? n.add(e) : n.delete(e), J(H().filter((e) => n.has(e)));
+	function ie(e, t) {
+		let n = new Set(O());
+		t ? n.add(e) : n.delete(e), Y(K().filter((e) => n.has(e)));
 	}
-	function ce() {
-		J(H());
+	function ae() {
+		Y(K());
 	}
-	function le() {
-		J(F());
+	function oe() {
+		Y(E());
 	}
-	let Y = `${m()}-panel`, [X, Z] = p(!1), Q;
-	d(() => {
-		if (!X() || !M()) return;
+	let se = `${_()}-panel`, [X, Z] = g(!1), Q;
+	m(() => {
+		if (!X() || !C()) return;
 		function e(e) {
 			Q && !Q.contains(e.target) && Z(!1);
 		}
 		function t(e) {
 			e.key === "Escape" && Z(!1);
 		}
-		document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), h(() => {
+		document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), v(() => {
 			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
 		});
 	});
 	let $;
-	d(() => {
-		$ && ($.indeterminate = E().length > 0 && !P());
+	m(() => {
+		$ && ($.indeterminate = u().length > 0 && !T());
 	});
-	function ue(e) {
-		n.onSelectionChange?.(e ? s().map(n.getRowId) : []);
+	function ce(t) {
+		e.onSelectionChange?.(t ? r().map(e.getRowId) : []);
 	}
-	function de(e, t) {
-		let r = n.getRowId(e), i = E(), a = t ? [...i, r] : i.filter((e) => e !== r);
-		n.onSelectionChange?.(a);
+	function le(t, n) {
+		let r = e.getRowId(t), i = u(), a = n ? [...i, r] : i.filter((e) => e !== r);
+		e.onSelectionChange?.(a);
 	}
-	function fe(e) {
-		return E().includes(n.getRowId(e));
+	function ue(t) {
+		return u().includes(e.getRowId(t));
 	}
-	function pe(e) {
-		return e.toggleable === !1 || z().has(e.key);
+	function de(e) {
+		return e.toggleable === !1 || U().has(e.key);
 	}
-	function me(e, t) {
-		return n.getCell?.(e, t) ?? t.getValue?.(e) ?? null;
+	function fe(t, n) {
+		return e.getCell?.(t, n) ?? n.getValue?.(t) ?? null;
 	}
 	return (() => {
-		var d = v(), f = d.firstChild, p = f.firstChild.firstChild, m = p.firstChild, h = p.nextSibling;
-		return i(d, t(u, {
+		var u = N(), m = u.firstChild, h = m.firstChild.firstChild, g = h.firstChild, _ = h.nextSibling;
+		return a(u, n(p, {
 			get when() {
-				return M();
+				return C();
 			},
 			get children() {
-				var e = ee(), a = e.firstChild, s = a.firstChild;
-				s.firstChild.nextSibling;
-				var d = Q;
-				return typeof d == "function" ? c(d, a) : Q = a, s.$$click = () => Z((e) => !e), o(s, "aria-controls", Y), i(s, () => n.columnCustomizerLabel ?? "Columns", null), i(a, t(u, {
+				var t = A(), r = t.firstChild, o = r.firstChild;
+				o.firstChild.nextSibling;
+				var c = Q;
+				return typeof c == "function" ? l(c, r) : Q = r, o.$$click = () => Z((e) => !e), s(o, "aria-controls", se), a(o, () => e.columnCustomizerLabel ?? "Columns", null), a(r, n(p, {
 					get when() {
 						return X();
 					},
 					get children() {
-						var e = g(), a = e.firstChild, s = a.nextSibling, c = s.nextSibling.firstChild, u = c.nextSibling;
-						return o(e, "id", Y), i(a, () => n.columnCustomizerTitle ?? "Shown columns"), i(s, t(l, {
+						var t = k(), r = t.firstChild, o = r.nextSibling, c = o.nextSibling.firstChild, l = c.nextSibling;
+						return s(t, "id", se), a(r, () => e.columnCustomizerTitle ?? "Shown columns"), a(o, n(f, {
 							get each() {
-								return n.columns;
+								return e.columns;
 							},
 							children: (e) => (() => {
-								var t = y(), n = t.firstChild, a = n.firstChild;
-								return a.addEventListener("change", (t) => se(e.key, t.currentTarget.checked)), i(n, () => e.ariaLabel ?? e.label, null), r(() => a.disabled = e.toggleable === !1), r(() => a.checked = pe(e)), t;
+								var t = P(), n = t.firstChild, r = n.firstChild;
+								return r.addEventListener("change", (t) => ie(e.key, t.currentTarget.checked)), a(n, () => e.ariaLabel ?? e.label, null), i(() => r.disabled = e.toggleable === !1), i(() => r.checked = de(e)), t;
 							})()
-						})), c.$$click = ce, i(c, () => n.columnCustomizerShowAllLabel ?? "Show all"), u.$$click = le, i(u, () => n.columnCustomizerResetLabel ?? "Reset"), r(() => o(e, "aria-label", n.columnCustomizerTitle ?? "Customize columns")), e;
+						})), c.$$click = ae, a(c, () => e.columnCustomizerShowAllLabel ?? "Show all"), l.$$click = oe, a(l, () => e.columnCustomizerResetLabel ?? "Reset"), i(() => s(t, "aria-label", e.columnCustomizerTitle ?? "Customize columns")), t;
 					}
-				}), null), r(() => o(s, "aria-expanded", X())), e;
+				}), null), i(() => s(o, "aria-expanded", X())), t;
 			}
-		}), f), i(m, t(u, {
+		}), m), a(g, n(p, {
 			get when() {
-				return N();
+				return w();
 			},
 			get children() {
-				var e = _(), t = e.firstChild.nextSibling;
-				t.addEventListener("change", (e) => ue(e.currentTarget.checked));
-				var i = $;
-				return typeof i == "function" ? c(i, t) : $ = t, r(() => o(t, "aria-label", n.selectionLabel ?? "Select all rows")), r(() => t.checked = P()), e;
+				var t = j(), n = t.firstChild.nextSibling;
+				n.addEventListener("change", (e) => ce(e.currentTarget.checked));
+				var r = $;
+				return typeof r == "function" ? l(r, n) : $ = n, i(() => s(n, "aria-label", e.selectionLabel ?? "Select all rows")), i(() => n.checked = T()), t;
 			}
-		}), null), i(m, t(l, {
+		}), null), a(g, n(f, {
 			get each() {
-				return B();
+				return W();
 			},
-			children: (s) => (() => {
-				var c = re();
-				return i(c, t(u, {
+			children: (r) => (() => {
+				var c = I();
+				return a(c, n(p, {
 					get when() {
-						return a(() => !!s.sortable)() && n.onSort;
+						return o(() => !!r.sortable)() && (!d || e.onSort || e.onSortChange);
 					},
 					get fallback() {
-						return s.label;
+						return r.label;
 					},
 					get children() {
-						return [(() => {
-							var e = b();
-							return e.$$click = () => K(s.key), i(e, () => s.label, null), i(e, (() => {
-								var e = a(() => A() === s.key);
-								return () => e() ? j() === "asc" ? " ▲" : " ▼" : "";
-							})(), null), e;
-						})(), t(u, {
-							get when() {
-								return a(() => A() === s.key)() && (!D || n.onSortClear || n.onSortChange);
-							},
-							get children() {
-								var e = ne();
-								return e.$$click = q, e;
-							}
-						})];
+						var e = F(), t = e.firstChild;
+						return e.$$click = () => ne(r.key), a(e, () => r.label, t), a(t, (() => {
+							var e = o(() => x() === r.key);
+							return () => e() ? S() === "asc" ? "▲" : "▼" : "";
+						})()), e;
 					}
-				})), r((t) => {
-					var n = s.class, r = s.sortable ? A() === s.key ? j() === "asc" ? "ascending" : "descending" : "none" : void 0;
-					return n !== t.e && e(c, t.e = n), r !== t.t && o(c, "aria-sort", t.t = r), t;
+				})), i((e) => {
+					var n = r.class, i = r.sortable ? x() === r.key ? S() === "asc" ? "ascending" : "descending" : "none" : void 0;
+					return n !== e.e && t(c, e.e = n), i !== e.t && s(c, "aria-sort", e.t = i), e;
 				}, {
 					e: void 0,
 					t: void 0
 				}), c;
 			})()
-		}), null), i(m, t(u, {
+		}), null), a(g, n(p, {
 			get when() {
-				return n.rowActions;
+				return e.rowActions;
 			},
 			get children() {
-				return te();
+				return M();
 			}
-		}), null), i(h, t(l, {
+		}), null), a(_, n(f, {
 			get each() {
-				return G();
+				return te();
 			},
-			children: (a) => (() => {
-				var s = ae();
-				return i(s, t(u, {
+			children: (r) => (() => {
+				var o = z();
+				return a(o, n(p, {
 					get when() {
-						return N();
+						return w();
 					},
 					get children() {
-						var e = ie(), t = e.firstChild;
-						return t.addEventListener("change", (e) => de(a, e.currentTarget.checked)), r(() => o(t, "aria-label", `Select row ${n.getRowId(a)}`)), r(() => t.checked = fe(a)), e;
+						var t = L(), n = t.firstChild;
+						return n.addEventListener("change", (e) => le(r, e.currentTarget.checked)), i(() => s(n, "aria-label", `Select row ${e.getRowId(r)}`)), i(() => n.checked = ue(r)), t;
 					}
-				}), null), i(s, t(l, {
+				}), null), a(o, n(f, {
 					get each() {
-						return B();
+						return W();
 					},
-					children: (t) => (() => {
-						var n = x();
-						return i(n, () => me(a, t)), r(() => e(n, t.class)), n;
+					children: (e) => (() => {
+						var n = R();
+						return a(n, () => fe(r, e)), i(() => t(n, e.class)), n;
 					})()
-				}), null), i(s, t(u, {
+				}), null), a(o, n(p, {
 					get when() {
-						return n.rowActions;
+						return e.rowActions;
 					},
 					get children() {
-						var e = x();
-						return i(e, () => n.rowActions?.(a)), e;
+						var t = R();
+						return a(t, () => e.rowActions?.(r)), t;
 					}
-				}), null), s;
+				}), null), o;
 			})()
-		})), i(d, t(u, {
+		})), a(u, n(p, {
 			get when() {
-				return T();
+				return c();
 			},
 			get children() {
-				return n.loadingContent ?? S();
+				return e.loadingContent ?? B();
 			}
-		}), null), i(d, t(u, {
+		}), null), a(u, n(p, {
 			get when() {
-				return a(() => !T())() && (n.empty === void 0 ? s().length === 0 : w(n.empty));
+				return o(() => !c())() && (e.empty === void 0 ? r().length === 0 : H(e.empty));
 			},
 			get children() {
-				return n.emptyContent ?? C();
+				return e.emptyContent ?? V();
 			}
-		}), null), r(() => e(d, `data-table-wrap${n.class ? ` ${n.class}` : ""}`)), d;
+		}), null), i(() => t(u, `data-table-wrap${e.class ? ` ${e.class}` : ""}`)), u;
 	})();
 }
-n(["click"]);
+r(["click"]);
 //#endregion
-export { T as DataTable };
+export { O as Combobox, U as DataTable };

package/dist/styles.css

@@ -118,20 +118,11 @@
 	text-decoration: underline;
 }
 
-.data-table-sort-clear {
-	margin-left: 0.25rem;
-	padding: 0;
-	border: none;
-	background: transparent;
-	color: inherit;
-	font: inherit;
-	line-height: 1;
-	cursor: pointer;
-}
-
-.data-table-sort-clear:hover {
-	color: var(--data-table-sort-clear-hover, currentColor);
-	opacity: 0.7;
+.data-table-sort-indicator {
+	display: inline-block;
+	width: 1em;
+	margin-left: 0.25em;
+	text-align: center;
 }
 
 .data-table-status {
@@ -146,3 +137,221 @@
 	clip: rect(0 0 0 0);
 	white-space: nowrap;
 }
+
+/* Combobox: text input plus an absolutely positioned listbox below it. */
+.combobox {
+	position: relative;
+	min-width: 0;
+}
+
+.combobox-input {
+	box-sizing: border-box;
+	width: 100%;
+	padding: 0.375rem 1.8rem 0.375rem 0.5rem;
+	border: 1px solid
+		var(--combobox-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0.375rem;
+	background: var(
+		--combobox-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	color: inherit;
+	font: inherit;
+	text-overflow: ellipsis;
+	cursor: pointer;
+}
+
+.combobox-open .combobox-input {
+	cursor: text;
+}
+
+.combobox-input:disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.combobox-with-detail .combobox-input {
+	/* The `.combobox-value` overlay renders the label alongside its detail. */
+	color: transparent;
+}
+
+.combobox-with-icon .combobox-input {
+	padding-left: 1.7rem;
+}
+
+/* Closed-state glyph of the selected option, inside the input's left padding. */
+.combobox-icon {
+	position: absolute;
+	top: 50%;
+	left: 0.55rem;
+	display: inline-flex;
+	transform: translateY(-50%);
+	color: var(
+		--combobox-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	pointer-events: none;
+}
+
+.combobox-option-icon {
+	display: inline-flex;
+	margin-right: 0.4rem;
+	vertical-align: -0.15em;
+	color: var(
+		--combobox-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+}
+
+.combobox-chevron {
+	position: absolute;
+	top: 50%;
+	right: 0.5rem;
+	transform: translateY(-50%);
+	color: var(
+		--combobox-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	pointer-events: none;
+}
+
+.combobox-list {
+	position: absolute;
+	top: calc(100% + 0.2rem);
+	left: 0;
+	right: 0;
+	z-index: 20;
+	max-height: 16rem;
+	overflow-y: auto;
+	margin: 0;
+	padding: 0.2rem;
+	border: 1px solid
+		var(--combobox-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0.375rem;
+	background: var(
+		--combobox-panel-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+}
+
+.combobox-option,
+.combobox-empty {
+	padding: 0.3rem 0.5rem;
+	border-radius: 0.25rem;
+}
+
+.combobox-option {
+	cursor: pointer;
+}
+
+.combobox-option-label,
+.combobox-detail {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.combobox-detail {
+	color: var(
+		--combobox-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+	font-weight: 400;
+	font-size: 0.875em;
+}
+
+/* Closed-state value with detail, overlaid on the (transparent) input text. */
+.combobox-value {
+	position: absolute;
+	top: 50%;
+	left: calc(0.5rem + 1px);
+	right: 1.8rem;
+	transform: translateY(-50%);
+	display: flex;
+	align-items: baseline;
+	gap: 0.6rem;
+	min-width: 0;
+	pointer-events: none;
+}
+
+.combobox-with-icon .combobox-value {
+	left: calc(1.7rem + 1px);
+}
+
+.combobox-value > .combobox-option-label {
+	flex: 0 1 auto;
+	min-width: 3rem;
+}
+
+.combobox-value > .combobox-detail {
+	flex: 0 1 auto;
+	min-width: 0;
+}
+
+.combobox-option-active {
+	background: var(
+		--combobox-hover-bg,
+		var(--surface-hover, light-dark(#f5f5f5, #292d33))
+	);
+}
+
+.combobox-option[aria-selected="true"] {
+	font-weight: 600;
+}
+
+/* Pinned "Add …" entry below the options, kept in view while scrolling. */
+.combobox-option-add {
+	position: sticky;
+	bottom: -0.2rem;
+	display: flex;
+	align-items: center;
+	gap: 0.4rem;
+	margin-top: 0.2rem;
+	border-top: 1px solid
+		var(--combobox-border, var(--border, light-dark(#d0d0d0, #3a3e45)));
+	border-radius: 0 0 0.25rem 0.25rem;
+	background: var(
+		--combobox-panel-bg,
+		var(--surface, light-dark(#ffffff, #1d2024))
+	);
+	color: var(--combobox-accent, var(--primary, light-dark(#1a66d6, #6ea8fe)));
+	font-weight: 600;
+}
+
+.combobox-option-add.combobox-option-active {
+	background: var(
+		--combobox-hover-bg,
+		var(--surface-hover, light-dark(#f5f5f5, #292d33))
+	);
+}
+
+.combobox-option-empty,
+.combobox-empty {
+	color: var(
+		--combobox-muted,
+		var(--text-secondary, light-dark(#616161, #9b9da5))
+	);
+}
+
+/* Options with a detail line up in two columns: the detail starts right
+   after the longest label. */
+.combobox-list-detail {
+	display: grid;
+	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
+	column-gap: 1rem;
+	align-content: start;
+}
+
+.combobox-list-detail > .combobox-option,
+.combobox-list-detail > .combobox-empty {
+	display: grid;
+	grid-column: 1 / -1;
+	grid-template-columns: subgrid;
+	align-items: baseline;
+}
+
+.combobox-list-detail > .combobox-option-add {
+	display: flex;
+	align-items: center;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serkonda7/solid-components",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "description": "Reusable components for SolidJS",
   "license": "MIT",
   "author": "serkonda7",
@@ -28,6 +28,7 @@
     "lint": "biome check --write",
     "lint:ci": "biome ci",
     "check": "tsc --noEmit",
+    "test": "vitest run",
     "examples": "vite --config examples/vite.config.ts",
     "build:dev": "bun run scripts/build.ts --dev",
     "build": "bun run check && bun run scripts/build.ts --prod",
@@ -38,14 +39,19 @@
   },
   "packageManager": "bun@1.4.2",
   "peerDependencies": {
+    "@tabler/icons-solidjs": ">=3.0.0",
     "solid-js": ">=1.9.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.14",
+    "@tabler/icons-solidjs": "~3.48.0",
     "@types/bun": "1.4.2",
+    "@vitest/browser-playwright": "^5.0.2",
+    "playwright": "~1.63.0",
     "solid-js": "~1.9.15",
     "typescript": "~7.0.2",
     "vite": "~8.3.0",
-    "vite-plugin-solid": "~2.11.14"
+    "vite-plugin-solid": "~2.11.14",
+    "vitest": "~5.0.2"
   }
 }