@bysages/solid 0.2.3 → 0.3.0

package/dist/components/table/index.mjs

@@ -1,35 +1,33 @@
 import { Pagination } from "../pagination/index.mjs";
-import { Select as Select$1 } from "../select/index.mjs";
+import { t as Select$1 } from "../../select-CHaXbzLX.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { addEventListener, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, style, template, use } from "solid-js/web";
+import { addEvent, createComponent, delegateEvents, effect, insert, memo, readShallow, ref, setAttribute, setStyleProperty, spread, style, template } from "@solidjs/web";
 import { For, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 import { createListCollection } from "@ark-ui/solid/select";
 import { FlexRender, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, createTable, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_alphanumericCaseSensitive, sortFn_basic, sortFn_datetime, sortFn_text, sortFn_textCaseSensitive, tableFeatures } from "@tanstack/solid-table";
 import { createVirtualizer } from "@tanstack/solid-virtual";
 //#region src/components/table/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"width=14 height=14 fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"width=14 height=14 fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
-var _tmpl$3 = /*#__PURE__*/ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 6 6 6-6 6">`);
-var _tmpl$4 = /*#__PURE__*/ template(`<input type=checkbox>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<div data-scope=table data-part=cell-main><button type=button data-scope=table data-part=expander>`);
-var _tmpl$6 = /*#__PURE__*/ template(`<div role=cell data-scope=table data-part=cell>`);
-var _tmpl$7 = /*#__PURE__*/ template(`<div role=row data-scope=table data-part=row>`);
-var _tmpl$8 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell>`);
-var _tmpl$9 = /*#__PURE__*/ template(`<input type=text data-scope=table data-part=header-filter placeholder=Filter>`);
-var _tmpl$0 = /*#__PURE__*/ template(`<div data-scope=table data-part=root><div data-scope=table data-part=viewport><div role=table data-scope=table data-part=table><div role=rowgroup data-scope=table data-part=header></div><div role=rowgroup data-scope=table data-part=body>`);
-var _tmpl$1 = /*#__PURE__*/ template(`<div data-scope=table data-part=toolbar><input type=search data-scope=table data-part=global-filter aria-label="Filter all columns">`);
-var _tmpl$10 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=header-cell><input type=checkbox>`);
-var _tmpl$11 = /*#__PURE__*/ template(`<div data-scope=table data-part=empty>`);
-var _tmpl$12 = /*#__PURE__*/ template(`<div role=rowgroup data-scope=table data-part=footer>`);
-var _tmpl$13 = /*#__PURE__*/ template(`<div role=columnheader data-scope=table data-part=footer-cell>`);
-var _tmpl$14 = /*#__PURE__*/ template(`<div data-scope=table data-part=pagination><span data-scope=table data-part=page-status></span><div data-scope=table data-part=page-nav>`);
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=14 height=14 fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=14 height=14 fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 6 6 6-6 6">`);
+var _tmpl$4 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div data-scope=table data-part=cell-main><button type=button data-scope=table data-part=expander>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div role=row data-scope=table data-part=row>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div><!><!>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<input type=text data-scope=table data-part=header-filter placeholder=Filter>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<div data-scope=table data-part=root><div data-scope=table data-part=viewport><div role=table data-scope=table data-part=table><div role=rowgroup data-scope=table data-part=header></div><div role=rowgroup data-scope=table data-part=body><!><!></div></div></div><!>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<div data-scope=table data-part=toolbar><input type=search data-scope=table data-part=global-filter aria-label="Filter all columns">`);
+var _tmpl$12 = /* @__PURE__ */ template(`<div><input>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<div data-scope=table data-part=empty>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<div role=rowgroup data-scope=table data-part=footer>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<div data-scope=table data-part=pagination><span data-scope=table data-part=page-status></span><div data-scope=table data-part=page-nav><!><!>`);
 /** The pagination bar's arrows — thin chevrons for the row of seals. */
 function pageGlyph(direction) {
-	return (() => {
-		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-		setAttribute(_el$2, "d", direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6");
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	setAttribute(_el$2, "d", direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6");
+	return _el$;
 }
 /** The page-size select's pointing chevron. */
 function chevronDownGlyph() {
@@ -401,44 +399,59 @@ function DataTable(props) {
 		let content;
 		if (column.id === SELECT_COL_ID) content = (() => {
 			var _el$5 = _tmpl$4();
-			spread(_el$5, mergeProps({ get checked() {
-				return row.getIsSelected();
-			} }, { indeterminate: false }, {
-				"aria-label": "Select row",
-				"onchange": () => row.toggleSelected(!row.getIsSelected())
-			}), false, false);
+			spread(_el$5, [
+				{
+					type: "checkbox",
+					get checked() {
+						return row.getIsSelected();
+					}
+				},
+				{ indeterminate: false },
+				{
+					"aria-label": "Select row",
+					onchange: () => row.toggleSelected(!row.getIsSelected())
+				}
+			], false);
 			return _el$5;
 		})();
 		else if (isExpandHost) content = (() => {
-			var _el$6 = _tmpl$5(), _el$7 = _el$6.firstChild;
-			_el$7.$$click = () => row.toggleExpanded();
+			var _el$6 = _tmpl$5();
+			var _el$7 = _el$6.firstChild;
+			_el$7._$$click = () => row.toggleExpanded();
 			insert(_el$7, chevronGlyph);
 			insert(_el$6, createComponent(FlexRender, { cell }), null);
-			effect((_p$) => {
-				var _v$ = String(row.depth), _v$2 = row.getIsExpanded() || void 0, _v$3 = !row.getCanExpand() || void 0, _v$4 = row.getIsExpanded() ? "Collapse row" : "Expand row";
-				_v$ !== _p$.e && setStyleProperty(_el$6, "--bs-table-depth", _p$.e = _v$);
-				_v$2 !== _p$.t && setAttribute(_el$7, "data-expanded", _p$.t = _v$2);
-				_v$3 !== _p$.a && setAttribute(_el$7, "data-leaf", _p$.a = _v$3);
-				_v$4 !== _p$.o && setAttribute(_el$7, "aria-label", _p$.o = _v$4);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0,
-				a: void 0,
-				o: void 0
+			effect(() => {
+				return {
+					e: String(row.depth),
+					t: row.getIsExpanded() || void 0,
+					a: !row.getCanExpand() || void 0,
+					o: row.getIsExpanded() ? "Collapse row" : "Expand row"
+				};
+			}, ({ e, t, a, o }, _p$) => {
+				e !== _p$?.e && setStyleProperty(_el$6, "--bs-table-depth", e);
+				t !== _p$?.t && setAttribute(_el$7, "data-expanded", t);
+				a !== _p$?.a && setAttribute(_el$7, "data-leaf", a);
+				o !== _p$?.o && setAttribute(_el$7, "aria-label", o);
 			});
 			return _el$6;
 		})();
 		else content = createComponent(FlexRender, { cell });
-		return (() => {
-			var _el$8 = _tmpl$6();
-			setAttribute(_el$8, "data-spanned", rowSpan > 1 ? "" : void 0);
-			spread(_el$8, mergeProps({ get ["data-numeric"]() {
-				return column.columnDef.meta?.numeric ? "" : void 0;
-			} }, pin, { "style": style }), false, true);
-			insert(_el$8, content);
-			return _el$8;
-		})();
+		var _el$8 = _tmpl$6();
+		spread(_el$8, [
+			{
+				role: "cell",
+				"data-scope": "table",
+				"data-part": "cell",
+				get "data-numeric"() {
+					return column.columnDef.meta?.numeric ? "" : void 0;
+				},
+				"data-spanned": rowSpan > 1 ? "" : void 0
+			},
+			pin,
+			{ style }
+		], true);
+		insert(_el$8, content);
+		return _el$8;
 	}
 	function renderRow(row, virtualItem) {
 		const style$1 = virtualItem ? {
@@ -449,31 +462,29 @@ function DataTable(props) {
 			"block-size": `${virtualItem.size}px`
 		} : {};
 		const draggable = rowDraggable();
-		return (() => {
-			var _el$9 = _tmpl$7();
-			addEventListener(_el$9, "dragend", draggable ? onRowDragEnd : void 0);
-			addEventListener(_el$9, "drop", draggable ? (e) => onRowDrop(row, e) : void 0);
-			addEventListener(_el$9, "dragleave", draggable ? onRowDragLeave : void 0);
-			addEventListener(_el$9, "dragover", draggable ? (e) => onRowDragOver(row, e) : void 0);
-			addEventListener(_el$9, "dragstart", draggable ? (e) => onRowDragStart(row, e) : void 0);
-			setAttribute(_el$9, "draggable", draggable || void 0);
-			insert(_el$9, createComponent(For, {
-				get each() {
-					return row.getVisibleCells();
-				},
-				children: (cell) => renderCell(cell, row)
-			}));
-			effect((_p$) => {
-				var _v$5 = row.getIsSelected() || void 0, _v$6 = style$1;
-				_v$5 !== _p$.e && setAttribute(_el$9, "data-selected", _p$.e = _v$5);
-				_p$.t = style(_el$9, _v$6, _p$.t);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0
-			});
-			return _el$9;
-		})();
+		var _el$9 = _tmpl$7();
+		addEvent(_el$9, "dragend", draggable ? onRowDragEnd : void 0);
+		addEvent(_el$9, "drop", draggable ? (e) => onRowDrop(row, e) : void 0);
+		addEvent(_el$9, "dragleave", draggable ? onRowDragLeave : void 0);
+		addEvent(_el$9, "dragover", draggable ? (e) => onRowDragOver(row, e) : void 0);
+		addEvent(_el$9, "dragstart", draggable ? (e) => onRowDragStart(row, e) : void 0);
+		setAttribute(_el$9, "draggable", draggable || void 0);
+		insert(_el$9, createComponent(For, {
+			get each() {
+				return row.getVisibleCells();
+			},
+			children: (cell) => renderCell(cell, row)
+		}));
+		effect(() => {
+			return {
+				e: row.getIsSelected() || void 0,
+				t: readShallow(style$1)
+			};
+		}, ({ e, t }, _p$) => {
+			e !== _p$?.e && setAttribute(_el$9, "data-selected", e);
+			style(_el$9, t, _p$?.t);
+		});
+		return _el$9;
 	}
 	function renderHeaderCell(header) {
 		const column = header.column;
@@ -481,90 +492,145 @@ function DataTable(props) {
 		const canSort = column.getCanSort();
 		const canFilter = props.filterable && column.getCanFilter();
 		const canDrag = !!props.reorderable && column.id !== SELECT_COL_ID && !column.getIsPinned();
-		return (() => {
-			var _el$0 = _tmpl$8();
-			setAttribute(_el$0, "data-sortable", canSort || void 0);
-			setAttribute(_el$0, "data-sort", sorted || void 0);
-			setAttribute(_el$0, "data-draggable", canDrag || void 0);
-			setAttribute(_el$0, "draggable", canDrag || void 0);
-			setAttribute(_el$0, "aria-sort", sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0);
-			spread(_el$0, mergeProps({
-				get ["data-numeric"]() {
+		var _el$10 = _tmpl$8();
+		var _el$11 = _el$10.firstChild;
+		var _el$12 = _el$11.nextSibling;
+		spread(_el$10, [
+			{
+				role: "columnheader",
+				"data-scope": "table",
+				"data-part": "header-cell",
+				"data-sortable": canSort || void 0,
+				"data-sort": sorted || void 0,
+				get "data-numeric"() {
 					return column.columnDef.meta?.numeric ? "" : void 0;
 				},
-				get ["data-id"]() {
+				"data-draggable": canDrag || void 0,
+				get "data-id"() {
 					return column.id;
-				}
-			}, () => pinAttrs(column), {
-				"onclick": canSort ? () => column.toggleSorting() : void 0,
-				"ondragstart": canDrag ? onColDragStart : void 0,
-				"ondragover": canDrag ? (e) => onColDragOver(column, e) : void 0,
-				"ondragleave": canDrag ? onColDragLeave : void 0,
-				"ondrop": canDrag ? (e) => onColDrop(column, e) : void 0,
-				"ondragend": canDrag ? onColDragEnd : void 0
-			}), false, true);
-			insert(_el$0, (() => {
-				var _c$ = memo(() => !!(header.isPlaceholder || header.column.columnDef.header === ""));
-				return () => _c$() ? null : createComponent(FlexRender, { header });
-			})(), null);
-			insert(_el$0, canFilter ? (() => {
-				var _el$1 = _tmpl$9();
-				_el$1.$$input = (e) => column.setFilterValue(e.target.value);
-				_el$1.addEventListener("dragstart", (e) => e.stopPropagation());
-				_el$1.$$click = (e) => e.stopPropagation();
-				setAttribute(_el$1, "draggable", false);
-				effect(() => setAttribute(_el$1, "aria-label", `Filter ${column.id}`));
-				effect(() => _el$1.value = column.getFilterValue() ?? "");
-				return _el$1;
-			})() : null, null);
-			return _el$0;
-		})();
-	}
-	return (() => {
-		var _el$10 = _tmpl$0(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling;
+				},
+				draggable: canDrag || void 0,
+				"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0
+			},
+			() => {
+				return pinAttrs(column);
+			},
+			{
+				onclick: canSort ? () => column.toggleSorting() : void 0,
+				ondragstart: canDrag ? onColDragStart : void 0,
+				ondragover: canDrag ? (e) => onColDragOver(column, e) : void 0,
+				ondragleave: canDrag ? onColDragLeave : void 0,
+				ondrop: canDrag ? (e) => onColDrop(column, e) : void 0,
+				ondragend: canDrag ? onColDragEnd : void 0
+			}
+		], true);
 		insert(_el$10, (() => {
-			var _c$2 = memo(() => !!(props.filterable && (props.showToolbar ?? true)));
-			return () => _c$2() ? (() => {
-				var _el$15 = _tmpl$1(), _el$16 = _el$15.firstChild;
-				_el$16.$$input = (e) => table.setGlobalFilter(e.target.value);
-				effect(() => setAttribute(_el$16, "placeholder", props.globalFilterPlaceholder));
-				effect(() => _el$16.value = table.atoms.globalFilter.get() ?? "");
-				return _el$15;
-			})() : null;
+			var _c$ = memo(() => {
+				return !!(header.isPlaceholder || header.column.columnDef.header === "");
+			});
+			return () => {
+				return _c$() ? null : createComponent(FlexRender, { header });
+			};
 		})(), _el$11);
-		use(setViewport, _el$11);
-		insert(_el$13, createComponent(For, {
-			get each() {
-				return table.getHeaderGroups();
-			},
-			children: (group) => (() => {
-				var _el$17 = _tmpl$7();
-				insert(_el$17, createComponent(For, {
-					get each() {
-						return group.headers;
-					},
-					children: (header) => {
-						const column = header.column;
-						if (column.id !== SELECT_COL_ID) return renderHeaderCell(header);
-						const all = table.getIsAllRowsSelected();
-						return (() => {
-							var _el$18 = _tmpl$10(), _el$19 = _el$18.firstChild;
-							spread(_el$18, mergeProps(() => pinAttrs(column)), false, true);
-							_el$19.checked = all;
-							spread(_el$19, mergeProps(() => ({ indeterminate: table.getIsSomeRowsSelected() && !all }), {
-								"aria-label": "Select all rows",
-								"onchange": () => table.toggleAllRowsSelected(!all)
-							}), false, false);
-							return _el$18;
-						})();
-					}
-				}));
-				return _el$17;
-			})()
-		}));
-		insert(_el$14, (() => {
-			var _c$3 = memo(() => !!virtual());
-			return () => _c$3() ? createComponent(For, {
+		insert(_el$10, canFilter ? (() => {
+			var _el$13 = _tmpl$9();
+			_el$13._$$input = (e) => column.setFilterValue(e.target.value);
+			_el$13.addEventListener("dragstart", (e) => e.stopPropagation());
+			_el$13._$$click = (e) => e.stopPropagation();
+			effect(() => {
+				return {
+					e: `Filter ${column.id}`,
+					t: column.getFilterValue() ?? ""
+				};
+			}, ({ e, t }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$13, "aria-label", e);
+				_el$13.value = t ?? "";
+			});
+			return _el$13;
+		})() : null, _el$12);
+		return _el$10;
+	}
+	var _el$14 = _tmpl$10();
+	var _el$15 = _el$14.firstChild;
+	var _el$16 = _el$15.firstChild;
+	var _el$17 = _el$16.firstChild;
+	var _el$18 = _el$17.nextSibling;
+	var _el$19 = _el$18.firstChild;
+	var _el$20 = _el$19.nextSibling;
+	var _el$21 = _el$15.nextSibling;
+	insert(_el$14, (() => {
+		var _c$2 = memo(() => {
+			return !!(props.filterable && (props.showToolbar ?? true));
+		});
+		return () => {
+			return _c$2() ? (() => {
+				var _el$22 = _tmpl$11();
+				var _el$23 = _el$22.firstChild;
+				_el$23._$$input = (e) => table.setGlobalFilter(e.target.value);
+				effect(() => {
+					return {
+						e: props.globalFilterPlaceholder,
+						t: table.atoms.globalFilter.get() ?? ""
+					};
+				}, ({ e, t }, _p$) => {
+					e !== _p$?.e && setAttribute(_el$23, "placeholder", e);
+					_el$23.value = t ?? "";
+				});
+				return _el$22;
+			})() : null;
+		};
+	})(), _el$15);
+	ref(() => {
+		return setViewport;
+	}, _el$15);
+	insert(_el$17, createComponent(For, {
+		get each() {
+			return table.getHeaderGroups();
+		},
+		children: (group) => (() => {
+			var _el$24 = _tmpl$7();
+			insert(_el$24, createComponent(For, {
+				get each() {
+					return group.headers;
+				},
+				children: (header) => {
+					const column = header.column;
+					if (column.id !== SELECT_COL_ID) return renderHeaderCell(header);
+					const all = table.getIsAllRowsSelected();
+					var _el$25 = _tmpl$12();
+					var _el$26 = _el$25.firstChild;
+					spread(_el$25, [{
+						role: "columnheader",
+						"data-scope": "table",
+						"data-part": "header-cell"
+					}, () => {
+						return pinAttrs(column);
+					}], true);
+					spread(_el$26, [
+						{
+							type: "checkbox",
+							checked: all
+						},
+						() => {
+							return { indeterminate: table.getIsSomeRowsSelected() && !all };
+						},
+						{
+							"aria-label": "Select all rows",
+							onchange: () => table.toggleAllRowsSelected(!all)
+						}
+					], false);
+					return _el$25;
+				}
+			}));
+			return _el$24;
+		})()
+	}));
+	insert(_el$18, (() => {
+		var _c$3 = memo(() => {
+			return !!virtual();
+		});
+		return () => {
+			return _c$3() ? createComponent(For, {
 				get each() {
 					return virtualizer.getVirtualItems();
 				},
@@ -575,53 +641,84 @@ function DataTable(props) {
 				},
 				children: (row) => renderRow(row)
 			});
-		})(), null);
-		insert(_el$14, (() => {
-			var _c$4 = memo(() => rows().length === 0);
-			return () => _c$4() ? (() => {
-				var _el$20 = _tmpl$11();
-				insert(_el$20, () => props.emptyText);
-				return _el$20;
+		};
+	})(), _el$19);
+	insert(_el$18, (() => {
+		var _c$4 = memo(() => {
+			return rows().length === 0;
+		});
+		return () => {
+			return _c$4() ? (() => {
+				var _el$27 = _tmpl$13();
+				insert(_el$27, () => {
+					return props.emptyText;
+				});
+				return _el$27;
 			})() : null;
-		})(), null);
-		insert(_el$12, (() => {
-			var _c$5 = memo(() => !!(props.stickyFooter && table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer))));
-			return () => _c$5() ? (() => {
-				var _el$21 = _tmpl$12();
-				insert(_el$21, createComponent(For, {
+		};
+	})(), _el$20);
+	insert(_el$16, (() => {
+		var _c$5 = memo(() => {
+			return !!(props.stickyFooter && table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer)));
+		});
+		return () => {
+			return _c$5() ? (() => {
+				var _el$28 = _tmpl$14();
+				insert(_el$28, createComponent(For, {
 					get each() {
 						return table.getFooterGroups();
 					},
 					children: (group) => (() => {
-						var _el$22 = _tmpl$7();
-						insert(_el$22, createComponent(For, {
+						var _el$29 = _tmpl$7();
+						insert(_el$29, createComponent(For, {
 							get each() {
 								return group.headers;
 							},
 							children: (header) => (() => {
-								var _el$23 = _tmpl$13();
-								spread(_el$23, mergeProps({ get ["data-numeric"]() {
-									return header.column.columnDef.meta?.numeric ? "" : void 0;
-								} }, () => pinAttrs(header.column)), false, true);
-								insert(_el$23, (() => {
-									var _c$7 = memo(() => !!header.isPlaceholder);
-									return () => _c$7() ? null : createComponent(FlexRender, { footer: header });
+								var _el$30 = _tmpl$6();
+								spread(_el$30, [{
+									role: "columnheader",
+									"data-scope": "table",
+									"data-part": "footer-cell",
+									get "data-numeric"() {
+										return header.column.columnDef.meta?.numeric ? "" : void 0;
+									}
+								}, () => {
+									return pinAttrs(header.column);
+								}], true);
+								insert(_el$30, (() => {
+									var _c$7 = memo(() => {
+										return !!header.isPlaceholder;
+									});
+									return () => {
+										return _c$7() ? null : createComponent(FlexRender, { footer: header });
+									};
 								})());
-								return _el$23;
+								return _el$30;
 							})()
 						}));
-						return _el$22;
+						return _el$29;
 					})()
 				}));
-				return _el$21;
+				return _el$28;
 			})() : null;
-		})(), null);
-		insert(_el$10, (() => {
-			var _c$6 = memo(() => !!props.paginated);
-			return () => _c$6() ? (() => {
-				var _el$24 = _tmpl$14(), _el$25 = _el$24.firstChild, _el$26 = _el$25.nextSibling;
-				insert(_el$25, () => `${table.getRowCount()} rows`);
-				insert(_el$26, createComponent(Select$1.Root, {
+		};
+	})(), null);
+	insert(_el$14, (() => {
+		var _c$6 = memo(() => {
+			return !!props.paginated;
+		});
+		return () => {
+			return _c$6() ? (() => {
+				var _el$31 = _tmpl$15();
+				var _el$32 = _el$31.firstChild;
+				var _el$33 = _el$32.nextSibling;
+				var _el$34 = _el$33.firstChild;
+				var _el$35 = _el$34.nextSibling;
+				insert(_el$32, () => {
+					return `${table.getRowCount()} rows`;
+				});
+				insert(_el$33, createComponent(Select$1.Root, {
 					get collection() {
 						return createListCollection({ items: (props.pageSizeOptions ?? [
 							10,
@@ -672,8 +769,8 @@ function DataTable(props) {
 							} });
 						} })];
 					}
-				}), null);
-				insert(_el$26, createComponent(Pagination.Root, {
+				}), _el$34);
+				insert(_el$33, createComponent(Pagination.Root, {
 					get count() {
 						return table.getRowCount();
 					},
@@ -710,30 +807,30 @@ function DataTable(props) {
 							} })
 						];
 					}
-				}), null);
-				return _el$24;
+				}), _el$35);
+				return _el$31;
 			})() : null;
-		})(), null);
-		effect((_p$) => {
-			var _v$7 = props.reorderable || void 0, _v$8 = `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`, _v$9 = colsTemplate(), _v$0 = mergeMode() || void 0, _v$1 = virtual() ? {
+		};
+	})(), _el$21);
+	effect(() => {
+		return {
+			e: props.reorderable || void 0,
+			t: `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`,
+			a: colsTemplate(),
+			o: mergeMode() || void 0,
+			i: readShallow(virtual() ? {
 				position: "relative",
 				"block-size": `${virtualizer.getTotalSize()}px`
-			} : void 0;
-			_v$7 !== _p$.e && setAttribute(_el$10, "data-reorderable", _p$.e = _v$7);
-			_v$8 !== _p$.t && setStyleProperty(_el$10, "--bs-table-row-height", _p$.t = _v$8);
-			_v$9 !== _p$.a && setStyleProperty(_el$12, "--bs-table-cols", _p$.a = _v$9);
-			_v$0 !== _p$.o && setAttribute(_el$14, "data-merge", _p$.o = _v$0);
-			_p$.i = style(_el$14, _v$1, _p$.i);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0
-		});
-		return _el$10;
-	})();
+			} : void 0)
+		};
+	}, ({ e, t, a, o, i }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$14, "data-reorderable", e);
+		t !== _p$?.t && setStyleProperty(_el$14, "--bs-table-row-height", t);
+		a !== _p$?.a && setStyleProperty(_el$16, "--bs-table-cols", a);
+		o !== _p$?.o && setAttribute(_el$18, "data-merge", o);
+		style(_el$18, i, _p$?.i);
+	});
+	return _el$14;
 }
 delegateEvents(["click", "input"]);
 //#endregion

package/dist/components/tabs/index.d.mts

@@ -9,6 +9,8 @@ import { Tabs as Tabs$1, TabsRootProps } from "@ark-ui/solid/tabs";
 type TabsOwnProps = {
   /** One rung of the control-height ladder for the tab rows. */
   size?: "sm" | "md" | "lg";
+  /** The register: a ruled line (default), or each tab its own card. */
+  variant?: "line" | "card";
 };
 declare function TabsRoot(props: TabsRootProps & TabsOwnProps): import("solid-js").JSX.Element;
 export declare const Tabs: Omit<typeof Tabs$1, "Root"> & {

package/dist/components/tabs/index.mjs

@@ -1,13 +1,18 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { Tabs as Tabs$1 } from "@ark-ui/solid/tabs";
 //#region src/components/tabs/index.tsx
 function TabsRoot(props) {
-	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Tabs$1.Root, mergeProps(rest, { get ["data-size"]() {
-		return own.size ?? "md";
-	} }));
+	const [own, rest] = splitProps(props, ["size", "variant"]);
+	return createComponent(Tabs$1.Root, mergeProps(rest, {
+		get "data-size"() {
+			return own.size ?? "md";
+		},
+		get "data-variant"() {
+			return own.variant ?? "line";
+		}
+	}));
 }
 const Tabs = {
 	...Tabs$1,