@serkonda7/solid-components 0.0.6 → 0.0.8

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.
+- `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,209 +1,444 @@
-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, 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";
+//#region node_modules/@tabler/icons-solidjs/dist/source/defaultAttributes.js
+var x = {
+	outline: {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-width": 2,
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round"
+	},
+	filled: {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		stroke: "none"
+	}
+}, S = /*#__PURE__*/ u("<svg>"), C = /*#__PURE__*/ u("<title>"), w = (t, r, i, c) => {
+	let u = (i) => {
+		let [u, d] = b(i, [
+			"color",
+			"size",
+			"stroke",
+			"strokeWidth",
+			"title",
+			"children",
+			"class"
+		]), f = x[t], p = u.stroke ?? u.strokeWidth;
+		return (() => {
+			var i = S();
+			return l(i, s(f, d, {
+				get width() {
+					return o(() => u.size != null)() ? u.size : f.width;
+				},
+				get height() {
+					return o(() => u.size != null)() ? u.size : f.height;
+				},
+				get class() {
+					return `tabler-icon tabler-icon-${r}${u.class ? ` ${u.class}` : ""}`;
+				}
+			}, () => t === "filled" ? { fill: u.color == null ? "currentColor" : u.color } : {
+				stroke: u.color == null ? "currentColor" : u.color,
+				"stroke-width": p ?? f["stroke-width"]
+			}), !0, !0), a(i, (() => {
+				var e = o(() => u.title != null);
+				return () => e() && (() => {
+					var e = C();
+					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 : [{
+		value: "",
+		label: r.emptyLabel
+	}, ...r.options]), R = h(() => r.value === "" ? void 0 : L().find((e) => String(e.value) === r.value)), z = h(() => {
+		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(() => {
+		r.autofocus === !0 && s?.focus();
+	}), m(() => {
+		S() && l?.querySelector(`[data-index="${F()}"]`)?.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()) {
+			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 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)));
+	}
+	let K = () => S() ? R()?.label ?? r.emptyLabel ?? r.searchLabel ?? "Search" : r.emptyLabel;
+	return (() => {
+		var u = k(), m = u.firstChild;
+		m.addEventListener("blur", () => C(!1)), m.$$keydown = G, m.$$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, {
+			get when() {
+				return o(() => !S())() && R()?.icon;
+			},
+			children: (t) => (() => {
+				var r = A();
+				return a(r, n(e, {
+					get component() {
+						return t();
+					},
+					size: 14
+				})), r;
+			})()
+		}), null), a(u, n(p, {
+			get when() {
+				return o(() => !S())() && R()?.detail;
+			},
+			get children() {
+				var e = D(), t = e.firstChild, n = t.nextSibling;
+				return a(t, () => R()?.label), a(n, () => R()?.detail), e;
+			}
+		}), null), a(u, n(T, {
+			class: "combobox-chevron",
+			size: 16,
+			"aria-hidden": "true"
+		}), null), a(u, n(p, {
+			get when() {
+				return S();
+			},
+			get children() {
+				var t = O(), 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();
+							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, {
+							get when() {
+								return t.icon;
+							},
+							children: (t) => (() => {
+								var r = N();
+								return a(r, n(e, {
+									get component() {
+										return t();
+									},
+									size: 14
+								})), r;
+							})()
+						}), null), a(l, () => t.label, null), a(s, n(p, {
+							get when() {
+								return t.detail;
+							},
+							get children() {
+								var e = j();
+								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 === "";
+							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,
+							t: void 0,
+							a: void 0,
+							o: void 0,
+							i: void 0
+						}), s;
+					})()
+				}), null), a(t, n(p, {
+					get when() {
+						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, {
+							size: 14,
+							"aria-hidden": "true"
+						}), null), a(e, () => r.addLabel ?? "Add", null), i((t) => {
+							var n = x(B()), r = B(), i = B() === F();
+							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,
+							t: void 0,
+							a: void 0
+						}), e;
+					}
+				}), null), i((e) => {
+					var n = !!ne(), r = b();
+					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,
+					t: void 0
+				}), 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;
+		}, {
+			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(() => m.value = S() ? w() : R()?.label ?? ""), u;
+	})();
+}
+r([
+	"click",
+	"input",
+	"keydown",
+	"mousedown",
+	"mousemove"
+]);
+//#endregion
 //#region src/data-table.tsx
-var ee = /*#__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>"), te = /*#__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> "), ne = /*#__PURE__*/ s("<th class=data-table-checkbox><span class=data-table-visually-hidden>Select rows</span><input type=checkbox>"), g = /*#__PURE__*/ s("<th>Actions"), _ = /*#__PURE__*/ s("<div><div class=data-table-scroll><table class=data-table><thead><tr></tr></thead><tbody>"), v = /*#__PURE__*/ s("<li><label class=data-table-customizer-option><input type=checkbox>"), y = /*#__PURE__*/ s("<button type=button class=data-table-sort><span class=data-table-sort-indicator aria-hidden=true>"), b = /*#__PURE__*/ s("<th>"), re = /*#__PURE__*/ s("<td class=data-table-checkbox><input type=checkbox>"), x = /*#__PURE__*/ s("<td>"), ie = /*#__PURE__*/ s("<tr>"), ae = /*#__PURE__*/ s("<p class=data-table-status>Loading…"), S = /*#__PURE__*/ s("<p class=data-table-status>No results.");
-function C(e) {
+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) {
 	return typeof e == "function" ? e() : e;
 }
-function w(n) {
-	let s = f(() => C(n.rows)), w = () => C(n.loading ?? !1), T = () => C(n.selected ?? []), E = n.sortKey !== void 0 || n.sortDirection !== void 0, [D, O] = p(n.defaultSort), k = () => E ? C(n.sortKey ?? void 0) : D()?.key, A = () => E ? C(n.sortDirection ?? "asc") : D()?.direction ?? "asc", j = () => C(n.showColumnCustomizer ?? !1), M = () => n.selected !== void 0 && n.onSelectionChange !== void 0, N = () => {
-		let e = T();
-		return s().length > 0 && s().every((t) => e.includes(n.getRowId(t)));
-	}, P = f(() => n.defaultVisibleColumns ?? n.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [F, I] = p(void 0), L = () => n.visibleColumns === void 0 ? F() ?? P() : C(n.visibleColumns), R = f(() => new Set(L())), z = f(() => n.columns.filter((e) => e.toggleable === !1 || R().has(e.key))), B = f(() => n.columns.filter((e) => e.toggleable !== !1)), V = f(() => B().map((e) => e.key));
-	function H(e, t) {
+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 = () => {
+		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) {
 		return t.sortValue ? t.sortValue(e) : e[t.key];
 	}
-	function U(e, t) {
+	function N(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 W = f(() => {
-		let e = s(), t = k();
-		if (E || !t) return e;
-		let r = n.columns.find((e) => e.key === t);
-		if (!r) return e;
-		let i = A() === "asc" ? 1 : -1;
-		return [...e].sort((e, t) => i * U(H(e, r), H(t, r)));
+	let P = h(() => {
+		let t = r(), n = x();
+		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)));
 	});
-	function G(e) {
-		let t = k() === e, r = t && A() === "desc" ? void 0 : {
-			key: e,
-			direction: t ? "desc" : "asc"
+	function q(t) {
+		let n = x() === t, r = n && S() === "desc" ? void 0 : {
+			key: t,
+			direction: n ? "desc" : "asc"
 		};
-		E || O(r), n.onSort?.(e), r || n.onSortClear?.(), n.onSortChange?.(r);
+		u || b(r), e.onSort?.(t), r || e.onSortClear?.(), e.onSortChange?.(r);
 	}
-	function K(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 ie(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 q(e) {
-		let t = K(e);
-		n.visibleColumns === void 0 && I(t), n.onVisibleColumnsChange?.(t);
+	function J(t) {
+		let n = ie(t);
+		e.visibleColumns === void 0 && ee(n), e.onVisibleColumnsChange?.(n);
 	}
-	function oe(e, t) {
-		let n = new Set(L());
-		t ? n.add(e) : n.delete(e), q(V().filter((e) => n.has(e)));
+	function ae(e, t) {
+		let n = new Set(O());
+		t ? n.add(e) : n.delete(e), J(j().filter((e) => n.has(e)));
 	}
-	function se() {
-		q(V());
+	function oe() {
+		J(j());
 	}
-	function ce() {
-		q(P());
+	function se() {
+		J(E());
 	}
-	let J = `${m()}-panel`, [Y, X] = p(!1), Z;
-	d(() => {
-		if (!Y() || !j()) return;
+	let Y = `${_()}-panel`, [X, Z] = g(!1), Q;
+	m(() => {
+		if (!X() || !C()) return;
 		function e(e) {
-			Z && !Z.contains(e.target) && X(!1);
+			Q && !Q.contains(e.target) && Z(!1);
 		}
 		function t(e) {
-			e.key === "Escape" && X(!1);
+			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 Q;
-	d(() => {
-		Q && (Q.indeterminate = T().length > 0 && !N());
+	let $;
+	m(() => {
+		$ && ($.indeterminate = l().length > 0 && !T());
 	});
-	function $(e) {
-		n.onSelectionChange?.(e ? s().map(n.getRowId) : []);
+	function ce(t) {
+		e.onSelectionChange?.(t ? r().map(e.getRowId) : []);
 	}
-	function le(e, t) {
-		let r = n.getRowId(e), i = T(), a = t ? [...i, r] : i.filter((e) => e !== r);
-		n.onSelectionChange?.(a);
+	function le(t, n) {
+		let r = e.getRowId(t), i = l(), a = n ? [...i, r] : i.filter((e) => e !== r);
+		e.onSelectionChange?.(a);
 	}
-	function ue(e) {
-		return T().includes(n.getRowId(e));
+	function ue(t) {
+		return l().includes(e.getRowId(t));
 	}
 	function de(e) {
-		return e.toggleable === !1 || R().has(e.key);
+		return e.toggleable === !1 || k().has(e.key);
 	}
-	function fe(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 = _(), f = d.firstChild, p = f.firstChild.firstChild, m = p.firstChild, h = p.nextSibling;
-		return i(d, t(u, {
+		var l = z(), m = l.firstChild, h = m.firstChild.firstChild, g = h.firstChild, _ = h.nextSibling;
+		return a(l, n(p, {
 			get when() {
-				return j();
+				return C();
 			},
 			get children() {
-				var e = te(), a = e.firstChild, s = a.firstChild;
-				s.firstChild.nextSibling;
-				var d = Z;
-				return typeof d == "function" ? c(d, a) : Z = a, s.$$click = () => X((e) => !e), o(s, "aria-controls", J), i(s, () => n.columnCustomizerLabel ?? "Columns", null), i(a, t(u, {
+				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, {
 					get when() {
-						return Y();
+						return X();
 					},
 					get children() {
-						var e = ee(), a = e.firstChild, s = a.nextSibling, c = s.nextSibling.firstChild, u = c.nextSibling;
-						return o(e, "id", J), i(a, () => n.columnCustomizerTitle ?? "Shown columns"), i(s, t(l, {
+						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 n.columns;
+								return e.columns;
 							},
 							children: (e) => (() => {
-								var t = v(), n = t.firstChild, a = n.firstChild;
-								return a.addEventListener("change", (t) => oe(e.key, t.currentTarget.checked)), i(n, () => e.ariaLabel ?? e.label, null), r(() => a.disabled = e.toggleable === !1), r(() => a.checked = de(e)), t;
+								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;
 							})()
-						})), c.$$click = se, i(c, () => n.columnCustomizerShowAllLabel ?? "Show all"), u.$$click = ce, i(u, () => n.columnCustomizerResetLabel ?? "Reset"), r(() => o(e, "aria-label", n.columnCustomizerTitle ?? "Customize columns")), e;
+						})), 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;
 					}
-				}), null), r(() => o(s, "aria-expanded", Y())), e;
+				}), null), i(() => c(o, "aria-expanded", X())), t;
 			}
-		}), f), i(m, t(u, {
+		}), m), a(g, n(p, {
 			get when() {
-				return M();
+				return w();
 			},
 			get children() {
-				var e = ne(), t = e.firstChild.nextSibling;
-				t.addEventListener("change", (e) => $(e.currentTarget.checked));
-				var i = Q;
-				return typeof i == "function" ? c(i, t) : Q = t, r(() => o(t, "aria-label", n.selectionLabel ?? "Select all rows")), r(() => t.checked = N()), e;
+				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;
 			}
-		}), null), i(m, t(l, {
+		}), null), a(g, n(f, {
 			get each() {
-				return z();
+				return A();
 			},
-			children: (s) => (() => {
-				var c = b();
-				return i(c, t(u, {
+			children: (r) => (() => {
+				var s = V();
+				return a(s, n(p, {
 					get when() {
-						return a(() => !!s.sortable)() && (!E || n.onSort || n.onSortChange);
+						return o(() => !!r.sortable)() && (!u || e.onSort || e.onSortChange);
 					},
 					get fallback() {
-						return s.label;
+						return r.label;
 					},
 					get children() {
-						var e = y(), t = e.firstChild;
-						return e.$$click = () => G(s.key), i(e, () => s.label, t), i(t, (() => {
-							var e = a(() => k() === s.key);
-							return () => e() ? A() === "asc" ? "▲" : "▼" : "";
+						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" ? "▲" : "▼" : "";
 						})()), e;
 					}
-				})), r((t) => {
-					var n = s.class, r = s.sortable ? k() === s.key ? A() === "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(s, e.e = n), i !== e.t && c(s, "aria-sort", e.t = i), e;
 				}, {
 					e: void 0,
 					t: void 0
-				}), c;
+				}), s;
 			})()
-		}), null), i(m, t(u, {
+		}), null), a(g, n(p, {
 			get when() {
-				return n.rowActions;
+				return e.rowActions;
 			},
 			get children() {
-				return g();
+				return R();
 			}
-		}), null), i(h, t(l, {
+		}), null), a(_, n(f, {
 			get each() {
-				return W();
+				return P();
 			},
-			children: (a) => (() => {
-				var s = ie();
-				return i(s, t(u, {
+			children: (r) => (() => {
+				var o = U();
+				return a(o, n(p, {
 					get when() {
-						return M();
+						return w();
 					},
 					get children() {
-						var e = re(), t = e.firstChild;
-						return t.addEventListener("change", (e) => le(a, e.currentTarget.checked)), r(() => o(t, "aria-label", `Select row ${n.getRowId(a)}`)), r(() => t.checked = ue(a)), e;
+						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;
 					}
-				}), null), i(s, t(l, {
+				}), null), a(o, n(f, {
 					get each() {
-						return z();
+						return A();
 					},
-					children: (t) => (() => {
-						var n = x();
-						return i(n, () => fe(a, t)), r(() => e(n, t.class)), n;
+					children: (e) => (() => {
+						var n = H();
+						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 = H();
+						return a(t, () => e.rowActions?.(r)), t;
 					}
-				}), null), s;
+				}), null), o;
 			})()
-		})), i(d, t(u, {
+		})), a(l, n(p, {
 			get when() {
-				return w();
+				return s();
 			},
 			get children() {
-				return n.loadingContent ?? ae();
+				return e.loadingContent ?? W();
 			}
-		}), null), i(d, t(u, {
+		}), null), a(l, n(p, {
 			get when() {
-				return a(() => !w())() && (n.empty === void 0 ? s().length === 0 : C(n.empty));
+				return o(() => !s())() && (e.empty === void 0 ? r().length === 0 : K(e.empty));
 			},
 			get children() {
-				return n.emptyContent ?? S();
+				return e.emptyContent ?? G();
 			}
-		}), null), r(() => e(d, `data-table-wrap${n.class ? ` ${n.class}` : ""}`)), d;
+		}), null), i(() => t(l, `data-table-wrap${e.class ? ` ${e.class}` : ""}`)), l;
 	})();
 }
-n(["click"]);
+r(["click"]);
 //#endregion
-export { w as DataTable };
+export { P as Combobox, q as DataTable };

package/dist/styles.css

@@ -137,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.6",
+  "version": "0.0.8",
   "description": "Reusable components for SolidJS",
   "license": "MIT",
   "author": "serkonda7",
@@ -43,13 +43,14 @@
   },
   "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",
+    "playwright": "~1.63.0",
     "solid-js": "~1.9.15",
     "typescript": "~7.0.2",
     "vite": "~8.3.0",
     "vite-plugin-solid": "~2.11.14",
-    "vitest": "^5.0.2"
+    "vitest": "~5.0.2"
   }
 }