@nocoo/basalt 2.2.0 → 3.1.0

package/dist/components/data-table.d.ts

@@ -1,4 +1,6 @@
 import { type CSSProperties, type ReactNode } from "react";
+import { type TableTextAlign } from "./table.js";
+export type DataTableEdge = "inset" | "attached";
 export type DataTableColumn<T> = {
     id: string;
     header: string;
@@ -9,12 +11,16 @@ export type DataTableColumn<T> = {
     headerContent?: ReactNode;
     /** Whether the header changes sorting. @default true */
     sortable?: boolean;
-    /** Width of the header and its column. */
+    /** Preferred and minimum column width; narrow viewports scroll instead of squeezing it. */
     width?: CSSProperties["width"];
+    /** Allow multiline cell content. Default false keeps dense records on one line. */
+    wrap?: boolean;
     /** Classes applied to the header cell. */
     headerClassName?: string;
     /** Classes applied to each data cell. */
     cellClassName?: string;
+    /** Logical header and cell alignment. Omitted cells inherit from the table. */
+    textAlign?: TableTextAlign;
 };
 export type DataTableSort = {
     id: string;
@@ -86,6 +92,10 @@ export type DataTableProps<T = unknown> = {
      * Additional classes for the table.
      */
     className?: string;
+    /** Bound the local scroll region; column headers stay visible while scrolling. */
+    maxHeight?: CSSProperties["maxHeight"];
+    /** Show display-order row numbers, continuous across pages. @default false */
+    rowNumbers?: boolean;
     /** Controlled sorting. null explicitly disables sorting. */
     sort?: DataTableSort | null;
     /** Initial sorting for uncontrolled usage. @default null */
@@ -110,5 +120,7 @@ export type DataTableProps<T = unknown> = {
     "aria-label"?: string;
     /** ID of additional table instructions or summary. */
     "aria-describedby"?: string;
+    /** Direct-card rails on the first and last display columns. @default "inset" */
+    edge?: DataTableEdge;
 };
-export declare function DataTable<T>({ data, columns, filter, loading, empty, selected, defaultSelected, onSelectedChange, multiple, page, defaultPage, pageSize, onPageChange, getRowId, className, sort: controlledSort, defaultSort, onSortChange, manualSorting, manualPagination, manualFiltering, total, error, onRetry, retryLabel, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: DataTableProps<T>): import("react").JSX.Element;
+export declare function DataTable<T>({ data, columns, filter, loading, empty, selected, defaultSelected, onSelectedChange, multiple, page, defaultPage, pageSize, onPageChange, getRowId, className, maxHeight, rowNumbers, sort: controlledSort, defaultSort, onSortChange, manualSorting, manualPagination, manualFiltering, total, error, onRetry, retryLabel, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, edge, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/components/data-table.js

@@ -1,17 +1,21 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { Button as t } from "./button.js";
-import { SkeletonLine as n } from "./skeleton-line.js";
-import { Pagination as r } from "./pagination.js";
-import { Table as i, TableBody as a, TableCell as o, TableHead as s, TableHeader as c, TableRow as l } from "./table.js";
-import { useCallback as u, useEffect as d, useLayoutEffect as ee, useMemo as te, useRef as f, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Checkbox as n } from "./checkbox.js";
+import { SkeletonLine as r } from "./skeleton-line.js";
+import { Pagination as i } from "./pagination.js";
+import { Table as a, TableBody as o, TableCell as s, TableHead as c, TableHeader as l, TableRow as u, TableSortableHeader as d } from "./table.js";
+import { useCallback as f, useEffect as ee, useLayoutEffect as te, useMemo as ne, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/data-table.tsx
-function g(e) {
+function _(t, n, r) {
+	if (t === "attached") return e(n === 0 && "ps-basalt-table-edge", n === r - 1 && "pe-basalt-table-edge");
+}
+function v(e) {
 	return e === -Infinity ? 0 : typeof e == "bigint" || typeof e == "number" && Number.isFinite(e) ? 1 : e === Infinity ? 2 : typeof e == "number" ? 3 : typeof e == "string" ? 4 : 5;
 }
-function ne(e, t) {
-	let n = g(e), r = g(t);
+function re(e, t) {
+	let n = v(e), r = v(t);
 	if (n !== r) return n - r;
 	if (n === 1) {
 		let n = e, r = t;
@@ -20,7 +24,7 @@ function ne(e, t) {
 	let i = String(e), a = String(t);
 	return i < a ? -1 : +(i > a);
 }
-function re(e, t, n, r) {
+function ie(e, t, n, r) {
 	if (e === null) return "prim:null";
 	if (e === void 0) return "prim:undefined";
 	if (typeof e == "symbol") {
@@ -30,33 +34,33 @@ function re(e, t, n, r) {
 	let i = typeof e;
 	return i === "number" ? Object.is(e, -0) ? "prim:number:-0" : `prim:number:${String(e)}` : i === "string" || i === "bigint" || i === "boolean" ? `prim:${i}:${String(e)}` : `prim:${t}`;
 }
-function _(e) {
+function y(e) {
 	return e.startsWith("dup:") || e.startsWith("gen:");
 }
-function v(e) {
+function b(e) {
 	return typeof e == "function" || typeof e == "object" && !!e;
 }
-function ie(e, t) {
+function ae(e, t) {
 	if (e.filterValue) return String(e.filterValue(t));
 	if (e.sortValue) return String(e.sortValue(t));
 	let n = e.accessor(t);
 	return typeof n == "string" || typeof n == "number" || typeof n == "bigint" ? String(n) : "";
 }
-function y(e, t, n, r) {
+function x(e, t, n, r) {
 	let i = r?.(e, t);
-	return i === void 0 ? v(e) && "id" in e && e.id != null ? String(e.id) : n : i;
+	return i === void 0 ? b(e) && "id" in e && e.id != null ? String(e.id) : n : i;
 }
-function b({ data: g, columns: b, filter: ae = "", loading: x = !1, empty: oe = "No results", selected: S, defaultSelected: C, onSelectedChange: w, multiple: se = !1, page: T, defaultPage: ce = 1, pageSize: E, onPageChange: le, getRowId: D, className: ue, sort: O, defaultSort: de = null, onSortChange: fe, manualSorting: k = !1, manualPagination: A = !1, manualFiltering: j = !1, total: M, error: N, onRetry: P, retryLabel: pe = "Try again", "aria-label": F = "Data table", "aria-describedby": me }) {
-	let [he, ge] = p(de), I = O === void 0 ? he : O, _e = (e) => {
-		O === void 0 && ge(e), fe?.(e);
-	}, [ve, ye] = p(C ?? []), [L, be] = p(ce), R = f(/* @__PURE__ */ new WeakMap()), z = f(0), B = f(/* @__PURE__ */ new WeakMap()), V = f(/* @__PURE__ */ new Map()), H = f(/* @__PURE__ */ new Map()), U = f(/* @__PURE__ */ new Map()), xe = f(/* @__PURE__ */ new Map()), W = ae.trim().toLowerCase(), G = te(() => {
+function S({ data: v, columns: S, filter: oe = "", loading: C = !1, empty: se = "No results", selected: w, defaultSelected: ce, onSelectedChange: T, multiple: le = !1, page: E, defaultPage: ue = 1, pageSize: D, onPageChange: O, getRowId: k, className: de, maxHeight: fe, rowNumbers: A = !1, sort: j, defaultSort: pe = null, onSortChange: me, manualSorting: M = !1, manualPagination: N = !1, manualFiltering: P = !1, total: F, error: I, onRetry: L, retryLabel: he = "Try again", "aria-label": R = "Data table", "aria-describedby": ge, edge: z }) {
+	let [_e, ve] = m(pe), B = j === void 0 ? _e : j, ye = (e) => {
+		j === void 0 && ve(e), me?.(e);
+	}, [be, xe] = m(ce ?? []), [V, Se] = m(ue), H = p(/* @__PURE__ */ new WeakMap()), U = p(0), W = p(/* @__PURE__ */ new WeakMap()), G = p(/* @__PURE__ */ new Map()), Ce = p(/* @__PURE__ */ new Map()), we = p(/* @__PURE__ */ new Map()), Te = p(/* @__PURE__ */ new Map()), K = oe.trim().toLowerCase(), q = ne(() => {
 		let e = (e) => {
-			let t = R.current.get(e);
-			return t || (t = `basalt-row-${z.current++}`, R.current.set(e, t)), t;
+			let t = H.current.get(e);
+			return t || (t = `basalt-row-${U.current++}`, H.current.set(e, t)), t;
 		}, t = (e, t) => {
-			let n = D?.(e, t);
+			let n = k?.(e, t);
 			if (n !== void 0) return `get:${n}`;
-			if (v(e) && "id" in e) {
+			if (b(e) && "id" in e) {
 				let t = e.id;
 				if (t != null) return `id:${String(t)}`;
 			}
@@ -65,12 +69,12 @@ function b({ data: g, columns: b, filter: ae = "", loading: x = !1, empty: oe =
 			let l = a.get(c) ?? [];
 			l.push(s), a.set(c, l), o.set(s, c);
 			let u = t(e, n);
-			if (u && (r.set(u, s), _(s))) {
+			if (u && (r.set(u, s), y(s))) {
 				let e = i.get(u) ?? [];
 				e.push(s), i.set(u, e);
 			}
-		}, c = /* @__PURE__ */ new WeakMap(), l = g.map((e, t) => {
-			let n = v(e) ? e : null, r = n ? c.get(n) ?? 0 : 0;
+		}, c = /* @__PURE__ */ new WeakMap(), l = v.map((e, t) => {
+			let n = b(e) ? e : null, r = n ? c.get(n) ?? 0 : 0;
 			return n && c.set(n, r + 1), {
 				row: e,
 				index: t,
@@ -79,29 +83,29 @@ function b({ data: g, columns: b, filter: ae = "", loading: x = !1, empty: oe =
 			};
 		});
 		for (let e of l) {
-			let t = v(e.row) ? e.row : null;
+			let t = b(e.row) ? e.row : null;
 			if (!t) continue;
-			let r = B.current.get(t)?.[e.occurrence];
-			r && !n.has(r) && V.current.get(r) === t && (e.key = r, n.add(r));
+			let r = W.current.get(t)?.[e.occurrence];
+			r && !n.has(r) && G.current.get(r) === t && (e.key = r, n.add(r));
 		}
 		let u = l.map(({ row: r, index: i, occurrence: a, key: o }) => {
-			let c = v(r) ? r : null;
+			let c = b(r) ? r : null;
 			if (o) return s(r, i, o, c), {
 				row: r,
 				key: o,
-				selectId: y(r, i, o, D)
+				selectId: x(r, i, o, k)
 			};
 			let l = a > 0, u, d = t(r, i);
 			if (d && (u = d), c) {
 				let t = e(c);
 				if (!u) u = l ? `gen:${t}#${a}` : `gen:${t}`;
-				else if (n.has(u) || l) u = (U.current.get(u) ?? []).find((e) => !n.has(e)) ?? (l ? `dup:${t}#${a}` : `dup:${t}`);
+				else if (n.has(u) || l) u = (we.current.get(u) ?? []).find((e) => !n.has(e)) ?? (l ? `dup:${t}#${a}` : `dup:${t}`);
 				else {
-					let e = H.current.get(u);
-					e && !n.has(e) && _(e) && (u = e);
+					let e = Ce.current.get(u);
+					e && !n.has(e) && y(e) && (u = e);
 				}
 			}
-			if (u ??= re(r, i, xe.current, z), n.has(u)) {
+			if (u ??= ie(r, i, Te.current, U), n.has(u)) {
 				let e = 0, t = `occ:${u}#${e}`;
 				for (; n.has(t);) e += 1, t = `occ:${u}#${e}`;
 				u = t;
@@ -109,16 +113,16 @@ function b({ data: g, columns: b, filter: ae = "", loading: x = !1, empty: oe =
 			return n.add(u), s(r, i, u, c), {
 				row: r,
 				key: u,
-				selectId: y(r, i, u, D)
+				selectId: x(r, i, u, k)
 			};
-		}), d = W && !j ? u.filter(({ row: e }) => b.some((t) => ie(t, e).toLowerCase().includes(W))) : u;
+		}), d = K && !P ? u.filter(({ row: e }) => S.some((t) => ae(t, e).toLowerCase().includes(K))) : u;
 		return {
 			rows: (() => {
-				if (!I || k) return d;
-				let e = b.find((e) => e.id === I.id);
+				if (!B || M) return d;
+				let e = S.find((e) => e.id === B.id);
 				return e ? [...d].sort((t, n) => {
-					let r = ne(e.sortValue?.(t.row) ?? e.accessor(t.row), e.sortValue?.(n.row) ?? e.accessor(n.row));
-					return I.dir === "asc" ? r : -r;
+					let r = re(e.sortValue?.(t.row) ?? e.accessor(t.row), e.sortValue?.(n.row) ?? e.accessor(n.row));
+					return B.dir === "asc" ? r : -r;
 				}) : d;
 			})(),
 			assigned: a,
@@ -127,140 +131,186 @@ function b({ data: g, columns: b, filter: ae = "", loading: x = !1, empty: oe =
 			dups: i
 		};
 	}, [
-		b,
-		g,
-		D,
-		W,
-		I,
-		j,
-		k
+		S,
+		v,
+		k,
+		K,
+		B,
+		P,
+		M
 	]);
+	te(() => {
+		for (let [e, t] of q.assigned) W.current.set(e, t);
+		G.current = q.owner, Ce.current = q.lastKey, we.current = q.dups;
+	}, [q]);
+	let J = w !== void 0 || ce !== void 0 || T !== void 0, Y = w ?? be, Ee = f((e) => {
+		w === void 0 && xe(e), T?.(e);
+	}, [T, w]), De = N && F !== void 0 ? Math.max(0, F) : q.rows.length, Oe = D && D > 0 ? Math.max(1, Math.ceil(De / D)) : 1, X = Math.min(Oe, Math.max(1, E ?? V)), Z = f((e) => {
+		E === void 0 && Se(e), O?.(e);
+	}, [O, E]), Q = p(null);
 	ee(() => {
-		for (let [e, t] of G.assigned) B.current.set(e, t);
-		V.current = G.owner, H.current = G.lastKey, U.current = G.dups;
-	}, [G]);
-	let K = S !== void 0 || C !== void 0 || w !== void 0, q = S ?? ve, J = u((e) => {
-		S === void 0 && ye(e), w?.(e);
-	}, [w, S]), Se = A && M !== void 0 ? Math.max(0, M) : G.rows.length, Y = E && E > 0 ? Math.max(1, Math.ceil(Se / E)) : 1, X = Math.min(Y, Math.max(1, T ?? L)), Z = u((e) => {
-		T === void 0 && be(e), le?.(e);
-	}, [le, T]), Q = f(null);
-	d(() => {
-		let e = T ?? L;
-		if (e === X || x) {
+		let e = E ?? V;
+		if (e === X || C) {
 			Q.current = null;
 			return;
 		}
 		let t = `${e}:${X}`;
 		Q.current !== t && (Q.current = t, Z(X));
 	}, [
-		T,
-		L,
+		E,
+		V,
 		X,
-		x,
+		C,
 		Z
 	]);
-	let Ce = !A && E && E > 0 ? G.rows.slice((X - 1) * E, X * E) : G.rows, $ = b.length + +!!K, we = (e) => {
-		if (se) {
-			J(q.includes(e) ? q.filter((t) => t !== e) : [...q, e]);
+	let ke = !N && D && D > 0 ? q.rows.slice((X - 1) * D, X * D) : q.rows, $ = S.length + +!!J + +!!A, Ae = (e) => {
+		if (le) {
+			Ee(Y.includes(e) ? Y.filter((t) => t !== e) : [...Y, e]);
 			return;
 		}
-		J(q.includes(e) ? [] : [e]);
+		Ee(Y.includes(e) ? [] : [e]);
 	};
-	return /* @__PURE__ */ h("div", {
-		className: "flex min-w-0 flex-col gap-3",
-		children: [/* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ g("div", {
+		className: "flex min-w-0 flex-col gap-basalt-space-lg",
+		children: [/* @__PURE__ */ h("div", {
 			role: "region",
-			"aria-label": `${F} scroll area`,
+			"aria-label": `${R} scroll area`,
 			tabIndex: 0,
-			className: "min-w-0 overflow-x-auto rounded-basalt-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-primary",
-			children: /* @__PURE__ */ h(i, {
-				className: e("w-full", ue),
-				"aria-label": F,
-				"aria-describedby": me,
-				"aria-busy": x || void 0,
-				children: [/* @__PURE__ */ m(c, { children: /* @__PURE__ */ h(l, { children: [K ? /* @__PURE__ */ m(s, { children: /* @__PURE__ */ m("span", {
-					className: "sr-only",
-					children: "Select"
-				}) }) : null, b.map((e) => /* @__PURE__ */ m(s, {
-					className: e.headerClassName,
-					style: { width: e.width },
-					scope: "col",
-					"aria-sort": e.sortable === !1 ? void 0 : I?.id === e.id ? I.dir === "asc" ? "ascending" : "descending" : "none",
-					children: e.sortable === !1 ? e.headerContent ?? e.header : /* @__PURE__ */ h("button", {
-						type: "button",
-						"aria-label": e.header,
-						className: "appearance-none border-0 bg-transparent p-0 font-inherit text-inherit font-medium cursor-pointer rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-basalt-primary",
-						onClick: () => _e(I?.id === e.id && I.dir === "asc" ? {
-							id: e.id,
-							dir: "desc"
-						} : {
-							id: e.id,
-							dir: "asc"
-						}),
-						children: [e.headerContent ?? e.header, I?.id === e.id ? I.dir === "asc" ? " ↑" : " ↓" : ""]
-					})
-				}, e.id))] }) }), /* @__PURE__ */ m(a, { children: x ? /* @__PURE__ */ m(l, { children: /* @__PURE__ */ m(o, {
+			className: "relative min-w-0 overflow-auto rounded-basalt-md focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-basalt-primary",
+			style: { maxHeight: fe },
+			children: /* @__PURE__ */ g(a, {
+				className: e("w-full", de),
+				"aria-label": R,
+				"aria-describedby": ge,
+				"aria-busy": C || void 0,
+				"data-basalt-data-table": "",
+				children: [/* @__PURE__ */ h(l, { children: /* @__PURE__ */ g(u, { children: [
+					A && /* @__PURE__ */ g(c, {
+						scope: "col",
+						textAlign: "end",
+						className: e("sticky top-0 z-10 w-basalt-10 min-w-basalt-10 bg-basalt-control", _(z, 0, $)),
+						children: [/* @__PURE__ */ h("span", {
+							"aria-hidden": "true",
+							children: "#"
+						}), /* @__PURE__ */ h("span", {
+							className: "sr-only",
+							children: "Row number"
+						})]
+					}),
+					J ? /* @__PURE__ */ h(c, {
+						scope: "col",
+						className: e("sticky top-0 z-10 w-basalt-10 min-w-basalt-10 bg-basalt-control text-center", _(z, +!!A, $)),
+						children: /* @__PURE__ */ h("span", {
+							className: "sr-only",
+							children: "Select"
+						})
+					}) : null,
+					S.map((t, n) => /* @__PURE__ */ h(c, {
+						textAlign: t.textAlign,
+						className: e("sticky top-0 z-10 bg-basalt-control", _(z, +!!A + +!!J + n, $), t.headerClassName),
+						style: {
+							width: t.width,
+							minWidth: t.width
+						},
+						scope: "col",
+						"aria-sort": t.sortable === !1 ? void 0 : B?.id === t.id ? B.dir === "asc" ? "ascending" : "descending" : "none",
+						children: t.sortable === !1 ? /* @__PURE__ */ h("span", {
+							className: e("flex items-center gap-basalt-control-gap", t.textAlign === "end" && "w-full justify-end text-end"),
+							children: t.headerContent ?? t.header
+						}) : /* @__PURE__ */ h(d, {
+							textAlign: t.textAlign,
+							sorted: B?.id === t.id ? B.dir : void 0,
+							"aria-label": t.header,
+							onClick: () => ye(B?.id === t.id && B.dir === "asc" ? {
+								id: t.id,
+								dir: "desc"
+							} : {
+								id: t.id,
+								dir: "asc"
+							}),
+							children: t.headerContent ?? t.header
+						})
+					}, t.id))
+				] }) }), /* @__PURE__ */ h(o, { children: C ? /* @__PURE__ */ h(u, { children: /* @__PURE__ */ h(s, {
 					colSpan: $,
-					children: /* @__PURE__ */ h("div", {
+					className: _(z, 0, 1),
+					children: /* @__PURE__ */ g("div", {
 						role: "status",
-						className: "flex flex-col gap-2 py-2",
+						className: "flex flex-col gap-basalt-space-lg py-basalt-space-lg",
 						children: [
-							/* @__PURE__ */ m("span", {
+							/* @__PURE__ */ h("span", {
 								className: "sr-only",
 								children: "Loading"
 							}),
-							/* @__PURE__ */ m(n, {}),
-							/* @__PURE__ */ m(n, {}),
-							/* @__PURE__ */ m(n, {})
+							/* @__PURE__ */ h(r, {}),
+							/* @__PURE__ */ h(r, {}),
+							/* @__PURE__ */ h(r, {})
 						]
 					})
-				}) }) : N != null && N !== !1 ? /* @__PURE__ */ m(l, { children: /* @__PURE__ */ m(o, {
+				}) }) : I != null && I !== !1 ? /* @__PURE__ */ h(u, { children: /* @__PURE__ */ h(s, {
 					colSpan: $,
-					children: /* @__PURE__ */ h("div", {
+					className: _(z, 0, 1),
+					children: /* @__PURE__ */ g("div", {
 						role: "alert",
-						className: "flex flex-wrap items-center justify-between gap-3 py-6",
-						children: [/* @__PURE__ */ m("div", { children: N }), P ? /* @__PURE__ */ m(t, {
+						className: "flex flex-wrap items-center justify-between gap-basalt-space-lg py-basalt-space-lg",
+						children: [/* @__PURE__ */ h("div", { children: I }), L ? /* @__PURE__ */ h(t, {
 							variant: "outline",
 							size: "sm",
-							onClick: P,
-							children: pe
+							onClick: L,
+							children: he
 						}) : null]
 					})
-				}) }) : Ce.length === 0 ? /* @__PURE__ */ m(l, { children: /* @__PURE__ */ m(o, {
+				}) }) : ke.length === 0 ? /* @__PURE__ */ h(u, { children: /* @__PURE__ */ h(s, {
 					colSpan: $,
-					children: /* @__PURE__ */ m("div", {
+					className: _(z, 0, 1),
+					children: /* @__PURE__ */ h("div", {
 						role: "status",
-						children: oe
+						children: se
 					})
-				}) }) : Ce.map(({ row: e, key: t, selectId: n }) => {
-					let r = q.includes(n);
-					return /* @__PURE__ */ h(l, {
-						variant: r ? "selected" : "default",
-						"aria-selected": K ? r : void 0,
-						children: [K ? /* @__PURE__ */ m(o, { children: /* @__PURE__ */ m("input", {
-							type: "checkbox",
-							checked: r,
-							"aria-label": `Select ${n}`,
-							onChange: () => we(n)
-						}) }) : null, b.map((t) => {
-							let n = t.accessor(e);
-							return /* @__PURE__ */ m(o, {
-								className: t.cellClassName,
-								children: typeof n == "bigint" ? String(n) : n
-							}, t.id);
-						})]
-					}, t);
+				}) }) : ke.map(({ row: t, key: r, selectId: i }, a) => {
+					let o = Y.includes(i);
+					return /* @__PURE__ */ g(u, {
+						variant: o ? "selected" : "default",
+						"aria-selected": J ? o : void 0,
+						children: [
+							A && /* @__PURE__ */ h(s, {
+								"data-row-number": "",
+								textAlign: "end",
+								className: e("text-basalt-sm text-basalt-muted-foreground", _(z, 0, $)),
+								children: (D && D > 0 ? (X - 1) * D : 0) + a + 1
+							}),
+							J ? /* @__PURE__ */ h(s, {
+								className: e("text-center", _(z, +!!A, $)),
+								children: /* @__PURE__ */ h(n, {
+									checked: o,
+									"aria-label": `Select ${i}`,
+									onCheckedChange: () => Ae(i),
+									className: "align-middle"
+								})
+							}) : null,
+							S.map((n, r) => {
+								let i = n.accessor(t);
+								return /* @__PURE__ */ h(s, {
+									textAlign: n.textAlign,
+									className: e(n.wrap ? "whitespace-normal break-words" : "whitespace-nowrap", _(z, +!!A + +!!J + r, $), n.cellClassName),
+									style: { minWidth: n.width },
+									children: typeof i == "bigint" ? String(i) : i
+								}, n.id);
+							})
+						]
+					}, r);
 				}) })]
 			})
-		}), E && E > 0 ? /* @__PURE__ */ m(r, {
+		}), D && D > 0 ? /* @__PURE__ */ h(i, {
 			page: X,
-			pageCount: Y,
-			disabled: x,
-			onPageChange: Z
+			pageCount: Oe,
+			disabled: C,
+			onPageChange: Z,
+			className: z === "attached" ? "px-basalt-panel-x pb-basalt-panel-y" : void 0
 		}) : null]
 	});
 }
 //#endregion
-export { b as DataTable };
+export { S as DataTable };
 
 //# sourceMappingURL=data-table.js.map