@ethanhann/mantine-dataview 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,38 +1,38 @@
 import { a as e, i as t, n, r, t as i } from "./serializer-u2zq_sU7.js";
 import { createColumnHelper as a, createColumnHelper as o, flexRender as s, functionalUpdate as c, getCoreRowModel as l, useReactTable as u } from "@tanstack/react-table";
-import { ActionIcon as d, Anchor as f, Badge as p, Box as m, Button as h, Card as g, Center as _, Checkbox as v, CloseButton as ee, Drawer as y, Group as b, Input as x, Menu as S, MultiSelect as te, NumberInput as C, Pagination as w, Paper as T, Popover as E, RangeSlider as ne, SegmentedControl as D, Select as O, SimpleGrid as re, Skeleton as k, Stack as A, Table as j, Text as M, TextInput as N, UnstyledButton as P, useMantineTheme as F } from "@mantine/core";
-import { Fragment as I, jsx as L, jsxs as R } from "react/jsx-runtime";
-import { Fragment as ie, createContext as ae, useCallback as z, useContext as B, useEffect as V, useMemo as H, useRef as U, useState as W } from "react";
-import { useDisclosure as oe, useMediaQuery as G } from "@mantine/hooks";
-import { DatePickerInput as K } from "@mantine/dates";
+import { ActionIcon as d, Anchor as f, Badge as p, Box as m, Button as h, Card as g, Center as _, Checkbox as v, CloseButton as y, Drawer as b, Group as x, Input as S, Menu as C, MultiSelect as ee, NumberInput as w, Pagination as te, Paper as ne, Popover as T, RangeSlider as E, SegmentedControl as D, Select as O, SimpleGrid as k, Skeleton as A, Stack as j, Table as M, Text as N, TextInput as P, UnstyledButton as re, useMantineTheme as ie } from "@mantine/core";
+import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
+import { Fragment as R, createContext as ae, useCallback as z, useContext as B, useEffect as V, useMemo as H, useRef as U, useState as W } from "react";
+import { useDisclosure as oe, useMediaQuery as se } from "@mantine/hooks";
+import { DatePickerInput as ce } from "@mantine/dates";
 import "@mantine/dates/styles.css";
 //#region src/components/DataBulkActions/DataBulkActions.tsx
-function q({ view: e, slots: t, ...n }) {
+function G({ view: e, slots: t, ...n }) {
 	let { selection: r } = e;
-	return r.count === 0 ? null : /* @__PURE__ */ L(T, {
+	return r.count === 0 ? null : /* @__PURE__ */ I(ne, {
 		withBorder: !0,
 		p: "xs",
 		radius: "sm",
 		role: "region",
 		"aria-label": "Bulk actions",
 		...n,
-		children: /* @__PURE__ */ R(b, {
+		children: /* @__PURE__ */ L(x, {
 			justify: "space-between",
 			wrap: "wrap",
 			gap: "sm",
-			children: [/* @__PURE__ */ R(b, {
+			children: [/* @__PURE__ */ L(x, {
 				gap: "sm",
-				children: [/* @__PURE__ */ R(M, {
+				children: [/* @__PURE__ */ L(N, {
 					size: "sm",
 					fw: 500,
 					children: [r.count, " selected"]
-				}), /* @__PURE__ */ L(h, {
+				}), /* @__PURE__ */ I(h, {
 					variant: "subtle",
 					size: "xs",
 					onClick: r.clear,
 					children: "Clear"
 				})]
-			}), t?.BulkActions && /* @__PURE__ */ L(b, {
+			}), t?.BulkActions && /* @__PURE__ */ I(x, {
 				gap: "xs",
 				children: t.BulkActions(r)
 			})]
@@ -41,14 +41,14 @@ function q({ view: e, slots: t, ...n }) {
 }
 //#endregion
 //#region src/core/cardComposition.ts
-function J(e) {
+function K(e) {
 	let { meta: t, header: n } = e.columnDef;
 	return t?.label ? t.label : typeof n == "string" ? n : e.id;
 }
-function se(e, t, n) {
+function le(e, t, n) {
 	return t ? t === "hidden" ? null : t : e.accessorFn == null || n === "hidden" ? null : n;
 }
-function Y(e, t = {}) {
+function ue(e, t = {}) {
 	let n = t.fallbackRole ?? "meta", r = {
 		title: [],
 		subtitle: [],
@@ -57,14 +57,14 @@ function Y(e, t = {}) {
 		meta: []
 	};
 	e.getVisibleLeafColumns().forEach((e, t) => {
-		let i = e.columnDef.meta?.card, a = se(e, i?.role, n);
+		let i = e.columnDef.meta?.card, a = le(e, i?.role, n);
 		a && r[a].push({
 			order: i?.order ?? t,
 			index: t,
 			field: {
 				id: e.id,
 				column: e,
-				label: J(e),
+				label: K(e),
 				showLabel: i?.showLabel ?? a === "meta"
 			}
 		});
@@ -79,21 +79,36 @@ function Y(e, t = {}) {
 	};
 }
 //#endregion
+//#region src/core/useRowTransition.ts
+function q(e, t) {
+	let n = U([]), r = U(!1), i = U(0), a = e.map((e) => e.id), o = /* @__PURE__ */ new Set();
+	if (t && r.current) {
+		let e = n.current, t = new Set(e);
+		if (a.length !== e.length || a.some((t, n) => t !== e[n])) if (i.current++, a.length === e.length && a.every((e) => t.has(e))) for (let e of a) o.add(e);
+		else for (let e of a) t.has(e) || o.add(e);
+	}
+	return n.current = a, r.current = !0, {
+		rows: e,
+		entering: o,
+		generation: i.current
+	};
+}
+//#endregion
 //#region src/components/StateMessage.tsx
-function ce(e) {
+function de(e) {
 	e.resetColumnFilters(), e.setGlobalFilter("");
 }
-function le({ view: e, slots: t }) {
-	return t?.ErrorState ? /* @__PURE__ */ L(I, { children: t.ErrorState({
+function fe({ view: e, slots: t }) {
+	return t?.ErrorState ? /* @__PURE__ */ I(F, { children: t.ErrorState({
 		error: e.error,
 		retry: e.refetch
-	}) }) : /* @__PURE__ */ R(A, {
+	}) }) : /* @__PURE__ */ L(j, {
 		align: "center",
 		gap: "xs",
-		children: [/* @__PURE__ */ L(M, {
+		children: [/* @__PURE__ */ I(N, {
 			c: "red",
 			children: "Something went wrong."
-		}), /* @__PURE__ */ L(h, {
+		}), /* @__PURE__ */ I(h, {
 			variant: "light",
 			size: "xs",
 			onClick: e.refetch,
@@ -101,119 +116,125 @@ function le({ view: e, slots: t }) {
 		})]
 	});
 }
-function ue({ view: e, slots: t }) {
-	let n = e.renderStatus.phase === "empty-filtered", r = () => ce(e.table);
-	return t?.Empty ? /* @__PURE__ */ L(I, { children: t.Empty({
+function J({ view: e, slots: t }) {
+	let n = e.renderStatus.phase === "empty-filtered", r = () => de(e.table);
+	return t?.Empty ? /* @__PURE__ */ I(F, { children: t.Empty({
 		filtered: n,
 		clearFilters: r
-	}) }) : n ? /* @__PURE__ */ R(A, {
+	}) }) : n ? /* @__PURE__ */ L(j, {
 		align: "center",
 		gap: "xs",
-		children: [/* @__PURE__ */ L(M, {
+		children: [/* @__PURE__ */ I(N, {
 			c: "dimmed",
 			children: "No matches."
-		}), /* @__PURE__ */ L(h, {
+		}), /* @__PURE__ */ I(h, {
 			variant: "subtle",
 			size: "xs",
 			onClick: r,
 			children: "Clear filters"
 		})]
-	}) : /* @__PURE__ */ L(M, {
+	}) : /* @__PURE__ */ I(N, {
 		c: "dimmed",
 		children: "No results."
 	});
 }
 //#endregion
 //#region src/components/DataCards/DataCards.tsx
-var de = {
+var pe = {
 	base: 1,
 	sm: 2,
 	lg: 3
 };
-function fe({ view: e, slots: t, renderCard: n, fallbackRole: r, enableSelection: i, loadingCardCount: a, cols: o = de, ...s }) {
-	let { table: c, renderStatus: l } = e, u = i ?? c.options.enableRowSelection !== !1, d = a ?? Math.min(e.state.pagination.pageSize, 6), f = {
-		cols: o,
-		...s
+function me({ view: e, slots: t, renderCard: n, fallbackRole: r, enableSelection: i, loadingCardCount: a, animateRows: o = !1, cols: s = pe, ...c }) {
+	let { table: l, renderStatus: u } = e, d = i ?? l.options.enableRowSelection !== !1, f = a ?? Math.min(e.state.pagination.pageSize, 6), p = {
+		cols: s,
+		...c
+	}, m = q(l.getRowModel().rows, o), h = (e) => {
+		let i = ue(l, { fallbackRole: r });
+		return /* @__PURE__ */ I(k, {
+			"data-changed": o || void 0,
+			...p,
+			children: e.map((e) => {
+				let r = e.getIsSelected(), a = {
+					row: e,
+					data: e.original,
+					selected: r,
+					toggleSelected: () => e.toggleSelected()
+				}, o = m.entering.has(e.id) || void 0;
+				if (n) return /* @__PURE__ */ I("div", {
+					"data-entering": o,
+					children: n(a)
+				}, e.id);
+				let s = /* @__PURE__ */ I(he, {
+					row: e,
+					layout: i,
+					selectionEnabled: d
+				});
+				return t?.Card ? /* @__PURE__ */ I("div", {
+					"data-entering": o,
+					children: t.Card({
+						...a,
+						children: s
+					})
+				}, e.id) : /* @__PURE__ */ I(g, {
+					withBorder: !0,
+					padding: "lg",
+					pos: "relative",
+					"data-selected": r || void 0,
+					"data-entering": o,
+					children: s
+				}, e.id);
+			})
+		}, m.generation);
 	};
-	switch (l.phase) {
-		case "loading": return t?.LoadingCards ? t.LoadingCards() : /* @__PURE__ */ L(re, {
-			...f,
-			children: Array.from({ length: d }, (e, t) => /* @__PURE__ */ L(g, {
+	if (o && u.phase === "loading" && m.rows.length > 0) return h(m.rows);
+	switch (u.phase) {
+		case "loading": return t?.LoadingCards ? t.LoadingCards() : /* @__PURE__ */ I(k, {
+			...p,
+			children: Array.from({ length: f }, (e, t) => /* @__PURE__ */ I(g, {
 				withBorder: !0,
 				padding: "md",
-				children: /* @__PURE__ */ R(A, {
+				children: /* @__PURE__ */ L(j, {
 					gap: "xs",
 					children: [
-						/* @__PURE__ */ L(k, {
+						/* @__PURE__ */ I(A, {
 							height: 20,
 							width: "60%"
 						}),
-						/* @__PURE__ */ L(k, {
+						/* @__PURE__ */ I(A, {
 							height: 12,
 							width: "40%"
 						}),
-						/* @__PURE__ */ L(k, { height: 12 })
+						/* @__PURE__ */ I(A, { height: 12 })
 					]
 				})
 			}, t))
 		});
-		case "error": return /* @__PURE__ */ L(_, {
+		case "error": return /* @__PURE__ */ I(_, {
 			p: "xl",
-			children: /* @__PURE__ */ L(le, {
+			children: /* @__PURE__ */ I(fe, {
 				view: e,
 				slots: t
 			})
 		});
 		case "empty":
-		case "empty-filtered": return /* @__PURE__ */ L(_, {
+		case "empty-filtered": return /* @__PURE__ */ I(_, {
 			p: "xl",
-			children: /* @__PURE__ */ L(ue, {
+			children: /* @__PURE__ */ I(J, {
 				view: e,
 				slots: t
 			})
 		});
-		default: {
-			let e = Y(c, { fallbackRole: r });
-			return /* @__PURE__ */ L(re, {
-				...f,
-				children: c.getRowModel().rows.map((r) => {
-					let i = r.getIsSelected(), a = {
-						row: r,
-						data: r.original,
-						selected: i,
-						toggleSelected: () => r.toggleSelected()
-					};
-					if (n) return /* @__PURE__ */ L(pe, { children: n(a) }, r.id);
-					let o = /* @__PURE__ */ L(me, {
-						row: r,
-						layout: e,
-						selectionEnabled: u
-					});
-					return t?.Card ? /* @__PURE__ */ L(pe, { children: t.Card({
-						...a,
-						children: o
-					}) }, r.id) : /* @__PURE__ */ L(g, {
-						withBorder: !0,
-						padding: "lg",
-						pos: "relative",
-						"data-selected": i || void 0,
-						children: o
-					}, r.id);
-				})
-			});
-		}
+		default: return h(m.rows);
 	}
 }
-function pe({ children: e }) {
-	return /* @__PURE__ */ L(I, { children: e });
-}
-function me({ row: e, layout: t, selectionEnabled: n }) {
+function he({ row: e, layout: t, selectionEnabled: n }) {
 	let r = new Map(e.getAllCells().map((e) => [e.column.id, e])), i = (e) => {
 		let t = r.get(e.id);
 		return t ? s(t.column.columnDef.cell, t.getContext()) : null;
 	};
-	return /* @__PURE__ */ R(I, { children: [
-		n && /* @__PURE__ */ L(v, {
+	return /* @__PURE__ */ L(F, { children: [
+		n && /* @__PURE__ */ I(v, {
 			"aria-label": "Select card",
 			checked: e.getIsSelected(),
 			disabled: !e.getCanSelect(),
@@ -225,42 +246,42 @@ function me({ row: e, layout: t, selectionEnabled: n }) {
 				zIndex: 1
 			}
 		}),
-		t.media.length > 0 && /* @__PURE__ */ L(g.Section, {
+		t.media.length > 0 && /* @__PURE__ */ I(g.Section, {
 			mb: "xs",
-			children: t.media.map((e) => /* @__PURE__ */ L(m, { children: i(e) }, e.id))
+			children: t.media.map((e) => /* @__PURE__ */ I(m, { children: i(e) }, e.id))
 		}),
-		/* @__PURE__ */ R(A, {
+		/* @__PURE__ */ L(j, {
 			gap: "md",
 			children: [
-				(t.title.length > 0 || t.subtitle.length > 0) && /* @__PURE__ */ R(A, {
+				(t.title.length > 0 || t.subtitle.length > 0) && /* @__PURE__ */ L(j, {
 					gap: 4,
-					children: [t.title.map((e) => /* @__PURE__ */ L(M, {
+					children: [t.title.map((e) => /* @__PURE__ */ I(N, {
 						fw: 600,
 						size: "lg",
 						lh: 1.2,
 						pr: n ? 28 : 0,
 						children: i(e)
-					}, e.id)), t.subtitle.map((e) => /* @__PURE__ */ L(M, {
+					}, e.id)), t.subtitle.map((e) => /* @__PURE__ */ I(N, {
 						size: "sm",
 						c: "dimmed",
 						children: i(e)
 					}, e.id))]
 				}),
-				t.badge.length > 0 && /* @__PURE__ */ L(b, {
+				t.badge.length > 0 && /* @__PURE__ */ I(x, {
 					gap: "xs",
-					children: t.badge.map((e) => /* @__PURE__ */ L(ie, { children: i(e) }, e.id))
+					children: t.badge.map((e) => /* @__PURE__ */ I(R, { children: i(e) }, e.id))
 				}),
-				t.meta.length > 0 && /* @__PURE__ */ L(A, {
+				t.meta.length > 0 && /* @__PURE__ */ I(j, {
 					gap: 4,
-					children: t.meta.map((e) => /* @__PURE__ */ R(b, {
+					children: t.meta.map((e) => /* @__PURE__ */ L(x, {
 						justify: "space-between",
 						gap: "xs",
 						wrap: "nowrap",
-						children: [e.showLabel && /* @__PURE__ */ L(M, {
+						children: [e.showLabel && /* @__PURE__ */ I(N, {
 							size: "sm",
 							c: "dimmed",
 							children: e.label
-						}), /* @__PURE__ */ L(M, {
+						}), /* @__PURE__ */ I(N, {
 							size: "sm",
 							children: i(e)
 						})]
@@ -272,24 +293,24 @@ function me({ row: e, layout: t, selectionEnabled: n }) {
 }
 //#endregion
 //#region src/components/DataPagination/DataPagination.tsx
-function he({ view: e, pageSizeOptions: t, showPageSize: n = !0, showRange: r = !0, pageSizeLabel: i = "Rows per page", ...a }) {
+function ge({ view: e, pageSizeOptions: t, showPageSize: n = !0, showRange: r = !0, pageSizeLabel: i = "Rows per page", ...a }) {
 	let { table: o } = e, { pageIndex: s, pageSize: c } = e.state.pagination, l = o.getRowCount(), u = o.getPageCount(), d = t ?? e.pageSizeOptions, f = l === 0 ? 0 : s * c + 1, p = Math.min((s + 1) * c, l);
-	return /* @__PURE__ */ R(b, {
+	return /* @__PURE__ */ L(x, {
 		justify: "space-between",
 		wrap: "wrap",
 		gap: "sm",
 		...a,
-		children: [/* @__PURE__ */ R(b, {
+		children: [/* @__PURE__ */ L(x, {
 			gap: "sm",
 			wrap: "wrap",
-			children: [n && /* @__PURE__ */ L(O, {
+			children: [n && /* @__PURE__ */ I(O, {
 				"aria-label": i,
 				data: d.map(String),
 				value: String(c),
 				onChange: (e) => e && o.setPageSize(Number(e)),
 				w: 80,
 				comboboxProps: { withinPortal: !0 }
-			}), r && /* @__PURE__ */ R(M, {
+			}), r && /* @__PURE__ */ L(N, {
 				size: "sm",
 				c: "dimmed",
 				children: [
@@ -300,7 +321,7 @@ function he({ view: e, pageSizeOptions: t, showPageSize: n = !0, showRange: r =
 					l
 				]
 			})]
-		}), /* @__PURE__ */ L(w, {
+		}), /* @__PURE__ */ I(te, {
 			value: s + 1,
 			total: Math.max(u, 1),
 			onChange: (e) => o.setPageIndex(e - 1),
@@ -310,8 +331,8 @@ function he({ view: e, pageSizeOptions: t, showPageSize: n = !0, showRange: r =
 }
 //#endregion
 //#region src/components/icons.tsx
-function ge({ direction: e }) {
-	return /* @__PURE__ */ R("svg", {
+function _e({ direction: e }) {
+	return /* @__PURE__ */ L("svg", {
 		width: "14",
 		height: "14",
 		viewBox: "0 0 24 24",
@@ -320,8 +341,8 @@ function ge({ direction: e }) {
 		focusable: "false",
 		style: { flexShrink: 0 },
 		children: [
-			/* @__PURE__ */ L("title", { children: "sort" }),
-			/* @__PURE__ */ L("path", {
+			/* @__PURE__ */ I("title", { children: "sort" }),
+			/* @__PURE__ */ I("path", {
 				d: "M8 10l4-4 4 4",
 				stroke: "currentColor",
 				strokeWidth: "2",
@@ -329,7 +350,7 @@ function ge({ direction: e }) {
 				strokeLinejoin: "round",
 				opacity: e === "asc" ? 1 : .35
 			}),
-			/* @__PURE__ */ L("path", {
+			/* @__PURE__ */ I("path", {
 				d: "M8 14l4 4 4-4",
 				stroke: "currentColor",
 				strokeWidth: "2",
@@ -340,8 +361,8 @@ function ge({ direction: e }) {
 		]
 	});
 }
-function X({ d: e, title: t }) {
-	return /* @__PURE__ */ R("svg", {
+function Y({ d: e, title: t }) {
+	return /* @__PURE__ */ L("svg", {
 		width: "16",
 		height: "16",
 		viewBox: "0 0 24 24",
@@ -353,48 +374,48 @@ function X({ d: e, title: t }) {
 		"aria-hidden": "true",
 		focusable: "false",
 		style: { flexShrink: 0 },
-		children: [/* @__PURE__ */ L("title", { children: t }), /* @__PURE__ */ L("path", { d: e })]
+		children: [/* @__PURE__ */ I("title", { children: t }), /* @__PURE__ */ I("path", { d: e })]
 	});
 }
-function _e() {
-	return /* @__PURE__ */ L(X, {
+function ve() {
+	return /* @__PURE__ */ I(Y, {
 		title: "search",
 		d: "M21 21l-4.3-4.3M11 19a8 8 0 110-16 8 8 0 010 16z"
 	});
 }
-function ve() {
-	return /* @__PURE__ */ L(X, {
+function ye() {
+	return /* @__PURE__ */ I(Y, {
 		title: "filter",
 		d: "M3 5h18M7 12h10M10 19h4"
 	});
 }
-function ye() {
-	return /* @__PURE__ */ L(X, {
+function be() {
+	return /* @__PURE__ */ I(Y, {
 		title: "open",
 		d: "M6 9l6 6 6-6"
 	});
 }
-function be() {
-	return /* @__PURE__ */ L(X, {
+function xe() {
+	return /* @__PURE__ */ I(Y, {
 		title: "close",
 		d: "M18 6L6 18M6 6l12 12"
 	});
 }
-function xe() {
-	return /* @__PURE__ */ L(X, {
+function Se() {
+	return /* @__PURE__ */ I(Y, {
 		title: "pin left",
 		d: "M4 4v16M9 8h8M9 12h6M9 16h8"
 	});
 }
-function Se() {
-	return /* @__PURE__ */ L(X, {
+function Ce() {
+	return /* @__PURE__ */ I(Y, {
 		title: "pin right",
 		d: "M20 4v16M7 8h8M9 12h6M7 16h8"
 	});
 }
 //#endregion
 //#region src/components/DataTable/DataTable.tsx
-function Ce(e) {
+function we(e) {
 	let t = e.getIsPinned();
 	if (t) return {
 		position: "sticky",
@@ -403,94 +424,102 @@ function Ce(e) {
 		backgroundColor: "var(--mantine-color-body)"
 	};
 }
-function we({ view: e, slots: t, enableSelection: n, loadingRowCount: r, ...i }) {
-	let { table: a, renderStatus: o } = e, c = a.getVisibleLeafColumns(), l = n ?? a.options.enableRowSelection !== !1, u = c.length + +!!l, d = r ?? Math.min(e.state.pagination.pageSize, 8), f = () => {
-		switch (o.phase) {
-			case "loading": return t?.LoadingTable ? t.LoadingTable() : /* @__PURE__ */ L(j.Tbody, { children: Array.from({ length: d }, (e, t) => /* @__PURE__ */ R(j.Tr, { children: [l && /* @__PURE__ */ L(j.Td, { children: /* @__PURE__ */ L(k, {
+function Te({ view: e, slots: t, enableSelection: n, loadingRowCount: r, disableWhileLoading: i = !0, animateRows: a = !1, ...o }) {
+	let { table: c, renderStatus: l } = e, u = i && e.status === "loading", d = q(c.getRowModel().rows, a), f = c.getVisibleLeafColumns(), p = n ?? c.options.enableRowSelection !== !1, m = f.length + +!!p, h = r ?? Math.min(e.state.pagination.pageSize, 8), g = (e) => /* @__PURE__ */ I(M.Tbody, {
+		"data-changed": a || void 0,
+		children: e.map((e) => {
+			let n = d.entering.has(e.id) || void 0, r = /* @__PURE__ */ L(F, { children: [p && /* @__PURE__ */ I(M.Td, { children: /* @__PURE__ */ I(v, {
+				"aria-label": "Select row",
+				checked: e.getIsSelected(),
+				disabled: !e.getCanSelect(),
+				indeterminate: e.getIsSomeSelected(),
+				onChange: e.getToggleSelectedHandler()
+			}) }), e.getVisibleCells().map((e) => {
+				let t = e.column.columnDef.meta?.align;
+				return /* @__PURE__ */ I(M.Td, {
+					style: {
+						...we(e.column),
+						...t ? { textAlign: t } : void 0
+					},
+					children: s(e.column.columnDef.cell, e.getContext())
+				}, e.id);
+			})] });
+			return t?.Row ? /* @__PURE__ */ I(Ee, { children: t.Row({
+				row: e,
+				cells: r
+			}) }, e.id) : /* @__PURE__ */ I(M.Tr, {
+				"data-selected": e.getIsSelected() || void 0,
+				"data-entering": n,
+				children: r
+			}, e.id);
+		})
+	}, d.generation), _ = () => {
+		if (a && l.phase === "loading" && d.rows.length > 0) return g(d.rows);
+		switch (l.phase) {
+			case "loading": return t?.LoadingTable ? t.LoadingTable() : /* @__PURE__ */ I(M.Tbody, { children: Array.from({ length: h }, (e, t) => /* @__PURE__ */ L(M.Tr, { children: [p && /* @__PURE__ */ I(M.Td, { children: /* @__PURE__ */ I(A, {
 				height: 16,
 				width: 16
-			}) }), c.map((e) => /* @__PURE__ */ L(j.Td, { children: /* @__PURE__ */ L(k, { height: 12 }) }, e.id))] }, t)) });
-			case "error": return /* @__PURE__ */ L(Ee, {
-				colSpan: u,
-				children: /* @__PURE__ */ L(le, {
+			}) }), f.map((e) => /* @__PURE__ */ I(M.Td, { children: /* @__PURE__ */ I(A, { height: 12 }) }, e.id))] }, t)) });
+			case "error": return /* @__PURE__ */ I(De, {
+				colSpan: m,
+				children: /* @__PURE__ */ I(fe, {
 					view: e,
 					slots: t
 				})
 			});
 			case "empty":
-			case "empty-filtered": return /* @__PURE__ */ L(Ee, {
-				colSpan: u,
-				children: /* @__PURE__ */ L(ue, {
+			case "empty-filtered": return /* @__PURE__ */ I(De, {
+				colSpan: m,
+				children: /* @__PURE__ */ I(J, {
 					view: e,
 					slots: t
 				})
 			});
-			default: return /* @__PURE__ */ L(j.Tbody, { children: a.getRowModel().rows.map((e) => {
-				let n = /* @__PURE__ */ R(I, { children: [l && /* @__PURE__ */ L(j.Td, { children: /* @__PURE__ */ L(v, {
-					"aria-label": "Select row",
-					checked: e.getIsSelected(),
-					disabled: !e.getCanSelect(),
-					indeterminate: e.getIsSomeSelected(),
-					onChange: e.getToggleSelectedHandler()
-				}) }), e.getVisibleCells().map((e) => {
-					let t = e.column.columnDef.meta?.align;
-					return /* @__PURE__ */ L(j.Td, {
-						style: {
-							...Ce(e.column),
-							...t ? { textAlign: t } : void 0
-						},
-						children: s(e.column.columnDef.cell, e.getContext())
-					}, e.id);
-				})] });
-				return t?.Row ? /* @__PURE__ */ L(Te, { children: t.Row({
-					row: e,
-					cells: n
-				}) }, e.id) : /* @__PURE__ */ L(j.Tr, {
-					"data-selected": e.getIsSelected() || void 0,
-					children: n
-				}, e.id);
-			}) });
+			default: return g(d.rows);
 		}
 	};
-	return /* @__PURE__ */ L("div", {
-		style: a.getIsSomeColumnsPinned() ? { overflowX: "auto" } : void 0,
-		children: /* @__PURE__ */ R(j, {
+	return /* @__PURE__ */ I("div", {
+		style: c.getIsSomeColumnsPinned() ? { overflowX: "auto" } : void 0,
+		children: /* @__PURE__ */ L(M, {
 			layout: "fixed",
-			...i,
-			children: [/* @__PURE__ */ L(j.Thead, { children: a.getHeaderGroups().map((e) => /* @__PURE__ */ R(j.Tr, { children: [l && /* @__PURE__ */ L(j.Th, {
+			...o,
+			children: [/* @__PURE__ */ I(M.Thead, { children: c.getHeaderGroups().map((e) => /* @__PURE__ */ L(M.Tr, { children: [p && /* @__PURE__ */ I(M.Th, {
 				style: { width: 40 },
-				children: /* @__PURE__ */ L(v, {
+				children: /* @__PURE__ */ I(v, {
 					"aria-label": "Select all rows on this page",
-					checked: a.getIsAllPageRowsSelected(),
-					indeterminate: a.getIsSomePageRowsSelected() && !a.getIsAllPageRowsSelected(),
-					onChange: a.getToggleAllPageRowsSelectedHandler()
+					checked: c.getIsAllPageRowsSelected(),
+					indeterminate: c.getIsSomePageRowsSelected() && !c.getIsAllPageRowsSelected(),
+					onChange: c.getToggleAllPageRowsSelectedHandler()
 				})
-			}), e.headers.map((e) => /* @__PURE__ */ L(De, { header: e }, e.id))] }, e.id)) }), f()]
+			}), e.headers.map((e) => /* @__PURE__ */ I(Oe, {
+				header: e,
+				disabled: u
+			}, e.id))] }, e.id)) }), _()]
 		})
 	});
 }
-function Te({ children: e }) {
-	return /* @__PURE__ */ L(I, { children: e });
+function Ee({ children: e }) {
+	return /* @__PURE__ */ I(F, { children: e });
 }
-function Ee({ colSpan: e, children: t }) {
-	return /* @__PURE__ */ L(j.Tbody, { children: /* @__PURE__ */ L(j.Tr, { children: /* @__PURE__ */ L(j.Td, {
+function De({ colSpan: e, children: t }) {
+	return /* @__PURE__ */ I(M.Tbody, { children: /* @__PURE__ */ I(M.Tr, { children: /* @__PURE__ */ I(M.Td, {
 		colSpan: e,
-		children: /* @__PURE__ */ L(_, {
+		children: /* @__PURE__ */ I(_, {
 			p: "xl",
 			children: t
 		})
 	}) }) });
 }
-function De({ header: e }) {
-	let { column: t } = e, n = t.columnDef.meta?.align, r = t.getIsSorted(), i = t.getSortIndex(), a = i > 0, o = e.isPlaceholder ? null : s(t.columnDef.header, e.getContext());
-	return /* @__PURE__ */ L(j.Th, {
+function Oe({ header: e, disabled: t }) {
+	let { column: n } = e, r = n.columnDef.meta?.align, i = n.getIsSorted(), a = n.getSortIndex(), o = a > 0, c = e.isPlaceholder ? null : s(n.columnDef.header, e.getContext()), l = n.getCanSort() && !t;
+	return /* @__PURE__ */ I(M.Th, {
 		style: {
-			...Ce(t),
-			...n ? { textAlign: n } : void 0
+			...we(n),
+			...r ? { textAlign: r } : void 0
 		},
-		"aria-sort": r === "asc" ? "ascending" : r === "desc" ? "descending" : void 0,
-		children: t.getCanSort() ? /* @__PURE__ */ R(P, {
-			onClick: t.getToggleSortingHandler(),
+		"aria-sort": i === "asc" ? "ascending" : i === "desc" ? "descending" : void 0,
+		children: l ? /* @__PURE__ */ L(re, {
+			onClick: n.getToggleSortingHandler(),
 			style: {
 				display: "inline-flex",
 				alignItems: "center",
@@ -498,37 +527,45 @@ function De({ header: e }) {
 				font: "inherit"
 			},
 			children: [
-				o,
-				/* @__PURE__ */ L(ge, { direction: r }),
-				a && /* @__PURE__ */ L("span", {
+				c,
+				/* @__PURE__ */ I(_e, { direction: i }),
+				o && /* @__PURE__ */ I("span", {
 					role: "note",
 					style: {
 						fontSize: "0.7em",
 						opacity: .6
 					},
-					"aria-label": `Sort priority ${i + 1}`,
-					children: i + 1
+					"aria-label": `Sort priority ${a + 1}`,
+					children: a + 1
 				})
 			]
-		}) : o
+		}) : /* @__PURE__ */ L("span", {
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: 4,
+				...t ? { opacity: .5 } : {}
+			},
+			children: [c, i && /* @__PURE__ */ I(_e, { direction: i })]
+		})
 	});
 }
 //#endregion
 //#region src/core/useForceCards.ts
-var Oe = "(max-width: 0px)";
-function ke(e) {
+var ke = "(max-width: 0px)";
+function Ae(e) {
 	let t = /^([\d.]+)(\D*)$/.exec(e.trim());
 	if (!t) return `(max-width: ${e})`;
 	let n = Number(t[1]), r = t[2] || "px";
 	return `(max-width: ${n - (r === "em" || r === "rem" ? .01 : .1)}${r})`;
 }
-function Ae(e) {
-	let t = F(), n = e?.forceCardsBelow, r = n ? t.breakpoints[n] : void 0, i = G(r ? ke(r) : Oe, !1);
+function je(e) {
+	let t = ie(), n = e?.forceCardsBelow, r = n ? t.breakpoints[n] : void 0, i = se(r ? Ae(r) : ke, !1);
 	return !!r && !!i;
 }
 //#endregion
 //#region src/core/formatValue.ts
-var je = {
+var Me = {
 	text: (e) => e == null ? "" : String(e),
 	number: (e) => e == null ? "" : new Intl.NumberFormat().format(Number(e)),
 	currency: (e) => e == null ? "" : new Intl.NumberFormat(void 0, {
@@ -542,7 +579,7 @@ var je = {
 	},
 	boolean: (e) => e == null ? "" : e ? "Yes" : "No"
 };
-function Me(e, t) {
+function Ne(e, t) {
 	if (e === "number" || e === "currency") {
 		let n = new Intl.NumberFormat(void 0, e === "currency" ? {
 			style: "currency",
@@ -558,35 +595,35 @@ function Me(e, t) {
 			return Number.isNaN(n.getTime()) ? String(t) : e.format(n);
 		};
 	}
-	return je[e];
+	return Me[e];
 }
-function Ne(e, t, n) {
+function X(e, t, n) {
 	let r = t ?? n?.[e];
-	return r ? typeof r == "function" ? r : Me(e, r) : je[e];
+	return r ? typeof r == "function" ? r : Ne(e, r) : Me[e];
 }
 //#endregion
 //#region src/components/DataToolbar/FacetBuckets.tsx
 function Pe({ facet: e, value: t, onChange: n }) {
 	let r = Array.isArray(t) ? t : null;
-	return /* @__PURE__ */ L(A, {
+	return /* @__PURE__ */ I(j, {
 		gap: 4,
 		children: e.ranges.map((e) => {
 			let t = r != null && r[0] === e.from && r[1] === e.to;
-			return /* @__PURE__ */ L(P, {
+			return /* @__PURE__ */ I(re, {
 				onClick: () => n(t ? void 0 : [e.from, e.to]),
 				style: {
 					padding: "4px 8px",
 					borderRadius: 4,
 					background: t ? "var(--mantine-color-blue-light)" : void 0
 				},
-				children: /* @__PURE__ */ R(b, {
+				children: /* @__PURE__ */ L(x, {
 					gap: "xs",
 					justify: "space-between",
 					wrap: "nowrap",
-					children: [/* @__PURE__ */ L(M, {
+					children: [/* @__PURE__ */ I(N, {
 						size: "sm",
 						children: e.label
-					}), /* @__PURE__ */ L(p, {
+					}), /* @__PURE__ */ I(p, {
 						size: "sm",
 						variant: "light",
 						color: e.count === 0 ? "gray" : "blue",
@@ -600,14 +637,14 @@ function Pe({ facet: e, value: t, onChange: n }) {
 //#endregion
 //#region src/components/DataToolbar/FilterControl.tsx
 function Fe({ label: e, onClear: t }) {
-	return /* @__PURE__ */ R(b, {
+	return /* @__PURE__ */ L(x, {
 		justify: "space-between",
 		wrap: "nowrap",
-		children: [/* @__PURE__ */ L(M, {
+		children: [/* @__PURE__ */ I(N, {
 			size: "sm",
 			fw: 500,
 			children: e
-		}), /* @__PURE__ */ L(f, {
+		}), /* @__PURE__ */ I(f, {
 			component: "button",
 			type: "button",
 			size: "xs",
@@ -633,12 +670,12 @@ function Re(e, t) {
 function ze({ column: e, facet: t }) {
 	let n = e.columnDef.meta?.filter;
 	if (!n) return null;
-	let r = J(e), i = n.placeholder ?? r, a = e.getFilterValue(), o = (t) => e.setFilterValue(t);
+	let r = K(e), i = n.placeholder ?? r, a = e.getFilterValue(), o = (t) => e.setFilterValue(t);
 	if (n.component) {
 		let t = n.component;
-		return /* @__PURE__ */ L(x.Wrapper, {
+		return /* @__PURE__ */ I(S.Wrapper, {
 			label: r,
-			children: /* @__PURE__ */ L(t, {
+			children: /* @__PURE__ */ I(t, {
 				value: a,
 				onChange: o,
 				column: e
@@ -647,7 +684,7 @@ function ze({ column: e, facet: t }) {
 	}
 	let s = t?.type === "values" ? t : void 0, c = t?.type === "ranges" ? t : void 0;
 	switch (n.variant) {
-		case "select": return /* @__PURE__ */ L(O, {
+		case "select": return /* @__PURE__ */ I(O, {
 			label: r,
 			placeholder: i,
 			clearable: !0,
@@ -655,7 +692,7 @@ function ze({ column: e, facet: t }) {
 			value: a ?? null,
 			onChange: (e) => o(e ?? void 0)
 		});
-		case "multiselect": return /* @__PURE__ */ L(te, {
+		case "multiselect": return /* @__PURE__ */ I(ee, {
 			label: r,
 			placeholder: i,
 			data: s ? Re(s, n.options) : n.options ?? [],
@@ -664,9 +701,9 @@ function ze({ column: e, facet: t }) {
 		});
 		case "boolean": {
 			let e = a == null ? "all" : a ? "yes" : "no", t = s?.values.find((e) => e.value === "true"), n = s?.values.find((e) => e.value === "false"), i = t ? `Yes (${t.count})` : "Yes", c = n ? `No (${n.count})` : "No";
-			return /* @__PURE__ */ L(x.Wrapper, {
+			return /* @__PURE__ */ I(S.Wrapper, {
 				label: r,
-				children: /* @__PURE__ */ L(D, {
+				children: /* @__PURE__ */ I(D, {
 					fullWidth: !0,
 					size: "xs",
 					data: [
@@ -691,21 +728,21 @@ function ze({ column: e, facet: t }) {
 			});
 		}
 		case "numberRange": {
-			let [t, i] = Le(a), s = n.min ?? c?.min, l = n.max ?? c?.max, u = s != null && l != null, d = a != null, f = c ? /* @__PURE__ */ L(Pe, {
+			let [t, i] = Le(a), s = n.min ?? c?.min, l = n.max ?? c?.max, u = s != null && l != null, d = a != null, f = c ? /* @__PURE__ */ I(Pe, {
 				facet: c,
 				value: a,
 				onChange: o
-			}) : null, p = d ? /* @__PURE__ */ L(Fe, {
+			}) : null, p = d ? /* @__PURE__ */ I(Fe, {
 				label: r,
 				onClear: () => o(void 0)
 			}) : r;
 			if (u) {
-				let a = [t ?? s, i ?? l], c = e.columnDef.meta?.dataType, u = c ? Ne(c, e.columnDef.meta?.format, void 0) : (e) => String(e);
-				return /* @__PURE__ */ L(x.Wrapper, {
+				let a = [t ?? s, i ?? l], c = e.columnDef.meta?.dataType, u = c ? X(c, e.columnDef.meta?.format, void 0) : (e) => String(e);
+				return /* @__PURE__ */ I(S.Wrapper, {
 					label: p,
-					children: /* @__PURE__ */ R(A, {
+					children: /* @__PURE__ */ L(j, {
 						gap: "xs",
-						children: [f, /* @__PURE__ */ L(ne, {
+						children: [f, /* @__PURE__ */ I(E, {
 							min: s,
 							max: l,
 							step: n.step ?? 1,
@@ -720,23 +757,23 @@ function ze({ column: e, facet: t }) {
 					})
 				});
 			}
-			if (f) return /* @__PURE__ */ L(x.Wrapper, {
+			if (f) return /* @__PURE__ */ I(S.Wrapper, {
 				label: p,
 				children: f
 			});
 			let m = (e) => o(e[0] == null && e[1] == null ? void 0 : e), h = (e) => e === "" || e == null ? null : Number(e);
-			return /* @__PURE__ */ L(x.Wrapper, {
+			return /* @__PURE__ */ I(S.Wrapper, {
 				label: r,
-				children: /* @__PURE__ */ R(b, {
+				children: /* @__PURE__ */ L(x, {
 					gap: 4,
 					wrap: "nowrap",
-					children: [/* @__PURE__ */ L(C, {
+					children: [/* @__PURE__ */ I(w, {
 						"aria-label": `${r} minimum`,
 						placeholder: "Min",
 						value: t ?? "",
 						onChange: (e) => m([h(e), i]),
 						w: 90
-					}), /* @__PURE__ */ L(C, {
+					}), /* @__PURE__ */ I(w, {
 						"aria-label": `${r} maximum`,
 						placeholder: "Max",
 						value: i ?? "",
@@ -746,7 +783,7 @@ function ze({ column: e, facet: t }) {
 				})
 			});
 		}
-		case "date": return /* @__PURE__ */ L(K, {
+		case "date": return /* @__PURE__ */ I(ce, {
 			label: r,
 			placeholder: i,
 			clearable: !0,
@@ -755,19 +792,19 @@ function ze({ column: e, facet: t }) {
 			onChange: (e) => o(Ie(e) ?? void 0)
 		});
 		case "dateRange": {
-			let [e, t] = Le(a), n = [e ? new Date(e) : null, t ? new Date(t) : null], s = a == null ? r : /* @__PURE__ */ L(Fe, {
+			let [e, t] = Le(a), n = [e ? new Date(e) : null, t ? new Date(t) : null], s = a == null ? r : /* @__PURE__ */ I(Fe, {
 				label: r,
 				onClear: () => o(void 0)
 			});
-			return /* @__PURE__ */ L(x.Wrapper, {
+			return /* @__PURE__ */ I(S.Wrapper, {
 				label: s,
-				children: /* @__PURE__ */ R(A, {
+				children: /* @__PURE__ */ L(j, {
 					gap: "xs",
-					children: [c && /* @__PURE__ */ L(Pe, {
+					children: [c && /* @__PURE__ */ I(Pe, {
 						facet: c,
 						value: a,
 						onChange: o
-					}), /* @__PURE__ */ L(K, {
+					}), /* @__PURE__ */ I(ce, {
 						type: "range",
 						popoverProps: { withinPortal: !1 },
 						placeholder: i,
@@ -781,7 +818,7 @@ function ze({ column: e, facet: t }) {
 				})
 			});
 		}
-		default: return /* @__PURE__ */ L(N, {
+		default: return /* @__PURE__ */ I(P, {
 			label: r,
 			placeholder: i,
 			value: a ?? "",
@@ -792,11 +829,11 @@ function ze({ column: e, facet: t }) {
 //#endregion
 //#region src/components/DataToolbar/FilterControls.tsx
 function Be({ view: e }) {
-	return e.state.columnFilters.length > 0 ? /* @__PURE__ */ L(h, {
+	return e.state.columnFilters.length > 0 ? /* @__PURE__ */ I(h, {
 		variant: "subtle",
 		size: "compact-sm",
 		color: "gray",
-		leftSection: /* @__PURE__ */ L(be, {}),
+		leftSection: /* @__PURE__ */ I(xe, {}),
 		onClick: () => e.table.resetColumnFilters(),
 		children: "Reset filters"
 	}) : null;
@@ -805,45 +842,45 @@ function Ve(e) {
 	return e > 0 ? `Filters (${e})` : "Filters";
 }
 function He({ view: e, controls: t }) {
-	return /* @__PURE__ */ R(A, {
+	return /* @__PURE__ */ L(j, {
 		gap: "sm",
 		style: { minWidth: 240 },
-		children: [t, /* @__PURE__ */ L(b, {
+		children: [t, /* @__PURE__ */ I(x, {
 			justify: "flex-end",
-			children: /* @__PURE__ */ L(Be, { view: e })
+			children: /* @__PURE__ */ I(Be, { view: e })
 		})]
 	});
 }
 function Ue({ view: e, inlineThreshold: t }) {
-	let n = e.filterableColumns, r = G(ke(F().breakpoints.sm), !1), [i, { open: a, close: o }] = oe(!1);
+	let n = e.filterableColumns, r = se(Ae(ie().breakpoints.sm), !1), [i, { open: a, close: o }] = oe(!1);
 	if (n.length === 0) return null;
-	let s = n.map((t) => /* @__PURE__ */ L(ze, {
+	let s = n.map((t) => /* @__PURE__ */ I(ze, {
 		column: t,
 		facet: e.facets[t.id]
 	}, t.id)), c = e.state.columnFilters.length;
-	return r ? /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L(h, {
+	return r ? /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I(h, {
 		variant: "default",
-		leftSection: /* @__PURE__ */ L(ve, {}),
+		leftSection: /* @__PURE__ */ I(ye, {}),
 		onClick: a,
 		children: Ve(c)
-	}), /* @__PURE__ */ L(y, {
+	}), /* @__PURE__ */ I(b, {
 		opened: i,
 		onClose: o,
 		title: "Filters",
 		position: "bottom",
 		size: "auto",
-		children: /* @__PURE__ */ L(He, {
+		children: /* @__PURE__ */ I(He, {
 			view: e,
 			controls: s
 		})
-	})] }) : n.length <= t ? /* @__PURE__ */ R(I, { children: [s, /* @__PURE__ */ L(Be, { view: e })] }) : /* @__PURE__ */ R(E, {
+	})] }) : n.length <= t ? /* @__PURE__ */ L(F, { children: [s, /* @__PURE__ */ I(Be, { view: e })] }) : /* @__PURE__ */ L(T, {
 		position: "bottom-start",
 		closeOnClickOutside: !1,
-		children: [/* @__PURE__ */ L(E.Target, { children: /* @__PURE__ */ L(h, {
+		children: [/* @__PURE__ */ I(T.Target, { children: /* @__PURE__ */ I(h, {
 			variant: "default",
-			leftSection: /* @__PURE__ */ L(ve, {}),
+			leftSection: /* @__PURE__ */ I(ye, {}),
 			children: Ve(c)
-		}) }), /* @__PURE__ */ L(E.Dropdown, { children: /* @__PURE__ */ L(He, {
+		}) }), /* @__PURE__ */ I(T.Dropdown, { children: /* @__PURE__ */ I(He, {
 			view: e,
 			controls: s
 		}) })]
@@ -853,23 +890,23 @@ function Ue({ view: e, inlineThreshold: t }) {
 //#region src/components/DataToolbar/SortControl.tsx
 function We({ view: e }) {
 	let { sortableColumns: t, state: n, table: r } = e, i = n.sorting[0];
-	return /* @__PURE__ */ R(b, {
+	return /* @__PURE__ */ L(x, {
 		gap: 4,
 		wrap: "nowrap",
-		children: [/* @__PURE__ */ L(O, {
+		children: [/* @__PURE__ */ I(O, {
 			"aria-label": "Sort by",
 			placeholder: "Sort by",
 			clearable: !0,
 			data: t.map((e) => ({
 				value: e.id,
-				label: J(e)
+				label: K(e)
 			})),
 			value: i?.id ?? null,
 			onChange: (e) => r.setSorting(e ? [{
 				id: e,
 				desc: i?.desc ?? !1
 			}] : [])
-		}), /* @__PURE__ */ L(d, {
+		}), /* @__PURE__ */ I(d, {
 			"aria-label": "Toggle sort direction",
 			variant: "default",
 			size: "lg",
@@ -878,14 +915,14 @@ function We({ view: e }) {
 				id: i.id,
 				desc: !i.desc
 			}]),
-			children: /* @__PURE__ */ L(ge, { direction: i ? i.desc ? "desc" : "asc" : !1 })
+			children: /* @__PURE__ */ I(_e, { direction: i ? i.desc ? "desc" : "asc" : !1 })
 		})]
 	});
 }
 //#endregion
 //#region src/components/DataToolbar/ViewSwitcher.tsx
-function Ge({ view: e, lockSwitcherOnMobile: t }) {
-	return e.isMobileForced && t ? null : /* @__PURE__ */ L(D, {
+function Ge({ view: e, lockSwitcherOnMobile: t, tableLabel: n = "Table", cardsLabel: r = "Cards" }) {
+	return e.isMobileForced && t ? null : /* @__PURE__ */ I(D, {
 		"aria-label": "View",
 		value: e.view,
 		disabled: e.isMobileForced,
@@ -894,10 +931,10 @@ function Ge({ view: e, lockSwitcherOnMobile: t }) {
 		},
 		data: [{
 			value: "table",
-			label: "Table"
+			label: n
 		}, {
 			value: "cards",
-			label: "Cards"
+			label: r
 		}]
 	});
 }
@@ -906,160 +943,186 @@ function Ge({ view: e, lockSwitcherOnMobile: t }) {
 function Ke({ column: e }) {
 	if (!e.getCanPin()) return null;
 	let t = e.getIsPinned();
-	return /* @__PURE__ */ R(b, {
+	return /* @__PURE__ */ L(x, {
 		gap: 2,
-		children: [/* @__PURE__ */ L(d, {
+		children: [/* @__PURE__ */ I(d, {
 			size: "xs",
 			variant: t === "left" ? "filled" : "subtle",
 			color: t === "left" ? "blue" : "gray",
-			"aria-label": `Pin ${J(e)} left`,
+			"aria-label": `Pin ${K(e)} left`,
 			onClick: () => e.pin(t === "left" ? !1 : "left"),
-			children: /* @__PURE__ */ L(xe, {})
-		}), /* @__PURE__ */ L(d, {
+			children: /* @__PURE__ */ I(Se, {})
+		}), /* @__PURE__ */ I(d, {
 			size: "xs",
 			variant: t === "right" ? "filled" : "subtle",
 			color: t === "right" ? "blue" : "gray",
-			"aria-label": `Pin ${J(e)} right`,
+			"aria-label": `Pin ${K(e)} right`,
 			onClick: () => e.pin(t === "right" ? !1 : "right"),
-			children: /* @__PURE__ */ L(Se, {})
+			children: /* @__PURE__ */ I(Ce, {})
 		})]
 	});
 }
 function qe({ view: e }) {
 	let t = e.table.getAllLeafColumns().filter((e) => e.getCanHide());
-	return t.length === 0 ? null : /* @__PURE__ */ R(S, {
+	return t.length === 0 ? null : /* @__PURE__ */ L(C, {
 		closeOnItemClick: !1,
 		withinPortal: !0,
 		position: "bottom-end",
-		children: [/* @__PURE__ */ L(S.Target, { children: /* @__PURE__ */ L(h, {
+		children: [/* @__PURE__ */ I(C.Target, { children: /* @__PURE__ */ I(h, {
 			variant: "default",
-			rightSection: /* @__PURE__ */ L(ye, {}),
+			rightSection: /* @__PURE__ */ I(be, {}),
 			children: "Columns"
-		}) }), /* @__PURE__ */ L(S.Dropdown, { children: /* @__PURE__ */ L(A, {
+		}) }), /* @__PURE__ */ I(C.Dropdown, { children: /* @__PURE__ */ I(j, {
 			gap: "xs",
 			p: "xs",
-			children: t.map((e) => /* @__PURE__ */ R(b, {
+			children: t.map((e) => /* @__PURE__ */ L(x, {
 				gap: "xs",
 				justify: "space-between",
 				wrap: "nowrap",
-				children: [/* @__PURE__ */ L(v, {
-					label: J(e),
+				children: [/* @__PURE__ */ I(v, {
+					label: K(e),
 					checked: e.getIsVisible(),
 					onChange: (t) => e.toggleVisibility(t.currentTarget.checked)
-				}), /* @__PURE__ */ L(Ke, { column: e })]
+				}), /* @__PURE__ */ I(Ke, { column: e })]
 			}, e.id))
 		}) })]
 	});
 }
 //#endregion
 //#region src/components/DataToolbar/DataToolbar.tsx
-function Je({ view: e, searchPlaceholder: t = "Search…", filterInlineThreshold: n = 3, lockSwitcherOnMobile: r, showSearch: i, showFilters: a, showSort: o, showVisibility: s, showViewSwitcher: c, ...l }) {
-	let { table: u, state: d } = e, f = i ?? u.options.enableGlobalFilter !== !1, p = a ?? e.filterableColumns.length > 0, m = o ?? e.sortableColumns.length > 0, h = s ?? !0, g = c ?? !0;
-	return /* @__PURE__ */ R(b, {
+function Je({ view: e, searchPlaceholder: t = "Search…", filterInlineThreshold: n = 3, lockSwitcherOnMobile: r, showSearch: i, showFilters: a, showSort: o, showVisibility: s, showViewSwitcher: c, disableWhileLoading: l = !0, leftSection: u, rightSection: d, ...f }) {
+	let { table: p, state: m } = e, h = l && e.status === "loading", g = i ?? p.options.enableGlobalFilter !== !1, _ = a ?? e.filterableColumns.length > 0, v = o ?? e.sortableColumns.length > 0, b = s ?? !0, S = c ?? !0;
+	return /* @__PURE__ */ L(x, {
 		justify: "space-between",
 		wrap: "wrap",
 		gap: "sm",
-		...l,
-		children: [/* @__PURE__ */ R(b, {
+		...f,
+		children: [/* @__PURE__ */ L(x, {
 			wrap: "wrap",
 			gap: "sm",
 			children: [
-				f && /* @__PURE__ */ L(N, {
+				u,
+				g && /* @__PURE__ */ I(P, {
 					"aria-label": "Search",
 					placeholder: t,
-					leftSection: /* @__PURE__ */ L(_e, {}),
-					value: d.globalFilter,
-					onChange: (e) => u.setGlobalFilter(e.currentTarget.value),
-					rightSection: d.globalFilter ? /* @__PURE__ */ L(ee, {
+					leftSection: /* @__PURE__ */ I(ve, {}),
+					value: m.globalFilter,
+					onChange: (e) => p.setGlobalFilter(e.currentTarget.value),
+					rightSection: m.globalFilter ? /* @__PURE__ */ I(y, {
 						size: "sm",
 						"aria-label": "Clear search",
-						onClick: () => u.setGlobalFilter("")
+						onClick: () => p.setGlobalFilter("")
 					}) : void 0
 				}),
-				p && /* @__PURE__ */ L(Ue, {
-					view: e,
-					inlineThreshold: n
-				}),
-				m && /* @__PURE__ */ L(We, { view: e })
+				/* @__PURE__ */ L("fieldset", {
+					disabled: h,
+					style: {
+						display: "contents",
+						border: "none",
+						padding: 0,
+						margin: 0
+					},
+					children: [_ && /* @__PURE__ */ I(Ue, {
+						view: e,
+						inlineThreshold: n
+					}), v && /* @__PURE__ */ I(We, { view: e })]
+				})
 			]
-		}), /* @__PURE__ */ R(b, {
-			wrap: "wrap",
-			gap: "sm",
-			children: [h && /* @__PURE__ */ L(qe, { view: e }), g && /* @__PURE__ */ L(Ge, {
-				view: e,
-				lockSwitcherOnMobile: r
-			})]
+		}), /* @__PURE__ */ I("fieldset", {
+			disabled: h,
+			style: {
+				display: "contents",
+				border: "none",
+				padding: 0,
+				margin: 0
+			},
+			children: /* @__PURE__ */ L(x, {
+				wrap: "wrap",
+				gap: "sm",
+				children: [
+					b && /* @__PURE__ */ I(qe, { view: e }),
+					S && /* @__PURE__ */ I(Ge, {
+						view: e,
+						lockSwitcherOnMobile: r
+					}),
+					d
+				]
+			})
 		})]
 	});
 }
 //#endregion
-//#region src/components/DataView/context.tsx
+//#region src/components/DataViewer/context.tsx
 var Ye = ae(null), Xe = Ye.Provider;
 function Z() {
 	let e = B(Ye);
-	if (!e) throw Error("DataView.Toolbar / DataView.Body / DataView.Pagination must be rendered inside <DataView>.");
+	if (!e) throw Error("DataViewer.Toolbar / DataViewer.Body / DataViewer.Pagination must be rendered inside <DataViewer>.");
 	return e;
 }
 //#endregion
-//#region src/components/DataView/DataView.tsx
-function Q({ view: e, slots: t, renderCard: n, fallbackRole: r, lockSwitcherOnMobile: i, children: a, ...o }) {
-	return /* @__PURE__ */ L(Xe, {
+//#region src/components/DataViewer/DataViewer.tsx
+function Q({ view: e, slots: t, renderCard: n, fallbackRole: r, lockSwitcherOnMobile: i, animateRows: a, children: o, ...s }) {
+	return /* @__PURE__ */ I(Xe, {
 		value: H(() => ({
 			view: e,
 			slots: t,
 			renderCard: n,
 			fallbackRole: r,
-			lockSwitcherOnMobile: i
+			lockSwitcherOnMobile: i,
+			animateRows: a
 		}), [
 			e,
 			t,
 			n,
 			r,
-			i
+			i,
+			a
 		]),
-		children: /* @__PURE__ */ L(A, {
-			...o,
-			children: a ?? /* @__PURE__ */ R(I, { children: [
-				/* @__PURE__ */ L(Ze, {}),
-				/* @__PURE__ */ L(et, {}),
-				/* @__PURE__ */ L(Qe, {}),
-				/* @__PURE__ */ L($e, {})
+		children: /* @__PURE__ */ I(j, {
+			...s,
+			children: o ?? /* @__PURE__ */ L(F, { children: [
+				/* @__PURE__ */ I(Ze, {}),
+				/* @__PURE__ */ I(et, {}),
+				/* @__PURE__ */ I(Qe, {}),
+				/* @__PURE__ */ I($e, {})
 			] })
 		})
 	});
 }
 function Ze(e) {
 	let { view: t, lockSwitcherOnMobile: n } = Z();
-	return /* @__PURE__ */ L(Je, {
+	return /* @__PURE__ */ I(Je, {
 		view: t,
 		lockSwitcherOnMobile: n,
 		...e
 	});
 }
 function Qe({ tableProps: e, cardsProps: t }) {
-	let { view: n, slots: r, renderCard: i, fallbackRole: a } = Z();
-	return n.view === "cards" ? /* @__PURE__ */ L(fe, {
+	let { view: n, slots: r, renderCard: i, fallbackRole: a, animateRows: o } = Z();
+	return n.view === "cards" ? /* @__PURE__ */ I(me, {
 		view: n,
 		slots: r,
 		renderCard: i,
 		fallbackRole: a,
+		animateRows: o,
 		...t
-	}) : /* @__PURE__ */ L(we, {
+	}) : /* @__PURE__ */ I(Te, {
 		view: n,
 		slots: r,
+		animateRows: o,
 		...e
 	});
 }
 function $e(e) {
 	let { view: t } = Z();
-	return /* @__PURE__ */ L(he, {
+	return /* @__PURE__ */ I(ge, {
 		view: t,
 		...e
 	});
 }
 function et(e) {
 	let { view: t, slots: n } = Z();
-	return /* @__PURE__ */ L(q, {
+	return /* @__PURE__ */ I(G, {
 		view: t,
 		slots: n,
 		...e
@@ -1170,9 +1233,9 @@ function at(e) {
 	return t.includes(",") || t.includes("\"") || t.includes("\n") ? `"${t.replace(/"/g, "\"\"")}"` : t;
 }
 function ot(e, t) {
-	let { filename: n = "export.csv", separator: r = ",", formatted: i = !1, formatDefaults: a } = t ?? {}, o = e.getVisibleLeafColumns().filter((e) => e.id !== "_select"), s = [o.map((e) => at(J(e))), ...e.getRowModel().rows.map((e) => o.map((t) => {
+	let { filename: n = "export.csv", separator: r = ",", formatted: i = !1, formatDefaults: a } = t ?? {}, o = e.getVisibleLeafColumns().filter((e) => e.id !== "_select"), s = [o.map((e) => at(K(e))), ...e.getRowModel().rows.map((e) => o.map((t) => {
 		let n = e.getAllCells().find((e) => e.column.id === t.id)?.getValue();
-		return i && t.columnDef.meta?.dataType ? at(Ne(t.columnDef.meta.dataType, t.columnDef.meta.format, a)(n)) : at(n);
+		return i && t.columnDef.meta?.dataType ? at(X(t.columnDef.meta.dataType, t.columnDef.meta.format, a)(n)) : at(n);
 	}))].map((e) => e.join(r)).join("\n"), c = new Blob([s], { type: "text/csv;charset=utf-8;" }), l = URL.createObjectURL(c), u = document.createElement("a");
 	u.href = l, u.download = n, u.click(), URL.revokeObjectURL(l);
 }
@@ -1300,69 +1363,73 @@ function _t(e) {
 	};
 }
 function vt(e) {
-	let { columns: t, rows: n, rowCount: r, status: i, error: a, getRowId: o, onRequestChange: s, state: d, onStateChange: f, enableRowSelection: p, enableGlobalFilter: m = !0, debounce: h, responsive: g, formatDefaults: _, facets: v } = e, ee = v ?? {}, y = H(() => t.map((e) => {
+	let { columns: t, rows: n, rowCount: r, status: i, error: a, getRowId: o, onRequestChange: s, state: d, onStateChange: f, enableRowSelection: p, enableGlobalFilter: m = !0, debounce: h, responsive: g, formatDefaults: _, facets: v, params: y } = e, b = v ?? {}, x = y ? JSON.stringify(y) : "", S = y ?? {}, C = H(() => t.map((e) => {
 		let t = e.meta?.dataType;
 		if (!t || e.cell) return e;
-		let n = Ne(t, e.meta?.format, _);
+		let n = X(t, e.meta?.format, _);
 		return {
 			...e,
 			cell: (e) => n(e.getValue())
 		};
-	}), [t, _]), b = H(() => gt(y), [y]), x = H(() => st(e.urlSync), [e.urlSync]), [S, te] = W(() => {
+	}), [t, _]), ee = H(() => gt(C), [C]), w = H(() => st(e.urlSync), [e.urlSync]), [te, ne] = W(() => {
 		let t = _t(e);
 		return {
 			...t,
-			...ct(x, t, b)
+			...ct(w, t, ee)
 		};
-	}), C = H(() => ({
-		...S,
+	}), T = H(() => ({
+		...te,
 		...d
-	}), [S, d]), w = U(C);
-	w.current = C;
-	let T = z((e) => {
-		te((t) => ({
+	}), [te, d]), E = U(T);
+	E.current = T;
+	let D = z((e) => {
+		ne((t) => ({
 			...t,
 			...e
 		})), f?.({
-			...w.current,
+			...E.current,
 			...e
 		});
 	}, [f]);
 	lt({
-		config: x,
-		state: C,
-		applyPatch: T,
-		getFilterMeta: b
+		config: w,
+		state: T,
+		applyPatch: D,
+		getFilterMeta: ee
 	});
-	let E = z(() => ({
-		...w.current.pagination,
+	let O = z(() => ({
+		...E.current.pagination,
 		pageIndex: 0
-	}), []), ne = z((e) => {
-		T({ pagination: c(e, w.current.pagination) });
-	}, [T]), D = z((e) => {
-		T({
-			sorting: c(e, w.current.sorting),
-			pagination: E()
+	}), []), k = U(x);
+	V(() => {
+		k.current !== x && (k.current = x, D({ pagination: O() }));
+	});
+	let A = z((e) => {
+		D({ pagination: c(e, E.current.pagination) });
+	}, [D]), j = z((e) => {
+		D({
+			sorting: c(e, E.current.sorting),
+			pagination: O()
 		});
-	}, [T, E]), O = z((e) => {
-		T({
-			columnFilters: c(e, w.current.columnFilters),
-			pagination: E()
+	}, [D, O]), M = z((e) => {
+		D({
+			columnFilters: c(e, E.current.columnFilters),
+			pagination: O()
 		});
-	}, [T, E]), re = z((e) => {
-		T({
-			globalFilter: c(e, w.current.globalFilter),
-			pagination: E()
+	}, [D, O]), N = z((e) => {
+		D({
+			globalFilter: c(e, E.current.globalFilter),
+			pagination: O()
 		});
-	}, [T, E]), k = z((e) => {
-		T({ rowSelection: c(e, w.current.rowSelection) });
-	}, [T]), A = z((e) => {
-		T({ columnVisibility: c(e, w.current.columnVisibility) });
-	}, [T]), j = z((e) => {
-		T({ columnPinning: c(e, w.current.columnPinning) });
-	}, [T]), M = u({
+	}, [D, O]), P = z((e) => {
+		D({ rowSelection: c(e, E.current.rowSelection) });
+	}, [D]), re = z((e) => {
+		D({ columnVisibility: c(e, E.current.columnVisibility) });
+	}, [D]), ie = z((e) => {
+		D({ columnPinning: c(e, E.current.columnPinning) });
+	}, [D]), F = u({
 		data: n,
-		columns: y,
+		columns: C,
 		getCoreRowModel: l(),
 		manualPagination: !0,
 		manualSorting: !0,
@@ -1373,91 +1440,93 @@ function vt(e) {
 		enableRowSelection: typeof p == "function" ? (e) => p(e.original) : p ?? !0,
 		enableGlobalFilter: m,
 		state: {
-			pagination: C.pagination,
-			sorting: C.sorting,
-			columnFilters: C.columnFilters,
-			globalFilter: C.globalFilter,
-			rowSelection: C.rowSelection,
-			columnVisibility: C.columnVisibility,
-			columnPinning: C.columnPinning
+			pagination: T.pagination,
+			sorting: T.sorting,
+			columnFilters: T.columnFilters,
+			globalFilter: T.globalFilter,
+			rowSelection: T.rowSelection,
+			columnVisibility: T.columnVisibility,
+			columnPinning: T.columnPinning
 		},
-		onPaginationChange: ne,
-		onSortingChange: D,
-		onColumnFiltersChange: O,
-		onGlobalFilterChange: re,
-		onRowSelectionChange: k,
-		onColumnVisibilityChange: A,
-		onColumnPinningChange: j
-	}), N = H(() => ({
-		pagination: C.pagination,
-		sorting: C.sorting,
-		filters: C.columnFilters,
-		globalFilter: C.globalFilter
+		onPaginationChange: A,
+		onSortingChange: j,
+		onColumnFiltersChange: M,
+		onGlobalFilterChange: N,
+		onRowSelectionChange: P,
+		onColumnVisibilityChange: re,
+		onColumnPinningChange: ie
+	}), I = H(() => ({
+		pagination: T.pagination,
+		sorting: T.sorting,
+		filters: T.columnFilters,
+		globalFilter: T.globalFilter,
+		params: S
 	}), [
-		C.pagination,
-		C.sorting,
-		C.columnFilters,
-		C.globalFilter
-	]), P = U(s);
-	P.current = s;
-	let F = U(mt(h));
-	F.current = mt(h);
-	let I = U(null), L = U(void 0);
+		T.pagination,
+		T.sorting,
+		T.columnFilters,
+		T.globalFilter,
+		x
+	]), L = U(s);
+	L.current = s;
+	let R = U(mt(h));
+	R.current = mt(h);
+	let ae = U(null), B = U(void 0);
 	V(() => {
-		let e = I.current, t = e === null, n = !e || e.globalFilter !== N.globalFilter, r = !e || e.filters !== N.filters, i = () => {
-			I.current = N, P.current?.(N);
+		let e = ae.current, t = e === null, n = !e || e.globalFilter !== I.globalFilter, r = !e || e.filters !== I.filters, i = () => {
+			ae.current = I, L.current?.(I);
 		}, a = 0;
-		n && (a = Math.max(a, F.current.globalFilter)), r && (a = Math.max(a, F.current.columnFilters));
+		n && (a = Math.max(a, R.current.globalFilter)), r && (a = Math.max(a, R.current.columnFilters));
 		let o = !t && (n || r) && a > 0;
-		return clearTimeout(L.current), o ? L.current = setTimeout(i, a) : i(), () => clearTimeout(L.current);
-	}, [N]);
-	let R = U(N);
-	R.current = N;
-	let ie = z(() => {
-		P.current?.(R.current);
-	}, []), ae = H(() => dt({
+		return clearTimeout(B.current), o ? B.current = setTimeout(i, a) : i(), () => clearTimeout(B.current);
+	}, [I]);
+	let oe = U(I);
+	oe.current = I;
+	let se = z(() => {
+		L.current?.(oe.current);
+	}, []), ce = H(() => dt({
 		status: i,
 		error: a,
 		pageRowCount: n.length,
-		state: C
+		state: T
 	}), [
 		i,
 		a,
 		n.length,
-		C
-	]), B = Ae(g), oe = B ? "cards" : C.view, G = z((e) => T({ view: e }), [T]), K = e.pageSizeOptions ?? ft, q = M.getAllColumns(), J = q.filter((e) => e.getCanSort()), se = q.filter((e) => e.columnDef.meta?.filter != null), Y = z(() => T({ rowSelection: {} }), [T]);
+		T
+	]), G = je(g), K = G ? "cards" : T.view, le = z((e) => D({ view: e }), [D]), ue = e.pageSizeOptions ?? ft, q = F.getAllColumns(), de = q.filter((e) => e.getCanSort()), fe = q.filter((e) => e.columnDef.meta?.filter != null), J = z(() => D({ rowSelection: {} }), [D]);
 	return {
-		table: M,
-		request: N,
-		state: C,
-		view: oe,
-		setView: G,
-		isMobileForced: B,
+		table: F,
+		request: I,
+		state: T,
+		view: K,
+		setView: le,
+		isMobileForced: G,
 		status: i,
 		error: a,
-		renderStatus: ae,
-		refetch: ie,
-		pageSizeOptions: K,
-		sortableColumns: J,
-		filterableColumns: se,
+		renderStatus: ce,
+		refetch: se,
+		pageSizeOptions: ue,
+		sortableColumns: de,
+		filterableColumns: fe,
 		selection: H(() => {
-			let e = C.rowSelection, t = Object.keys(e).filter((t) => e[t]), r = n.filter((t) => e[o(t)] === !0);
+			let e = T.rowSelection, t = Object.keys(e).filter((t) => e[t]), r = n.filter((t) => e[o(t)] === !0);
 			return {
 				count: t.length,
 				ids: t,
 				rows: r,
-				clear: Y
+				clear: J
 			};
 		}, [
-			C.rowSelection,
+			T.rowSelection,
 			n,
 			o,
-			Y
+			J
 		]),
-		exportCsv: z((e) => ot(M, e), [M]),
-		facets: ee,
-		resetFilter: z((e) => M.getColumn(e)?.setFilterValue(void 0), [M]),
-		resetAllFilters: z(() => M.resetColumnFilters(), [M])
+		exportCsv: z((e) => ot(F, e), [F]),
+		facets: b,
+		resetFilter: z((e) => F.getColumn(e)?.setFilterValue(void 0), [F]),
+		resetAllFilters: z(() => F.resetColumnFilters(), [F])
 	};
 }
 //#endregion
@@ -1492,6 +1561,6 @@ function yt({ fetcher: e, deps: t, ...n }) {
 	});
 }
 //#endregion
-export { rt as ColumnBuilder, q as DataBulkActions, fe as DataCards, he as DataPagination, we as DataTable, Je as DataToolbar, Q as DataView, ze as FilterControl, it as col, Y as composeCardLayout, a as createColumnHelper, ot as exportCsv, J as resolveColumnLabel, vt as useDataView, Z as useDataViewContext, yt as useDataViewFetcher };
+export { rt as ColumnBuilder, G as DataBulkActions, me as DataCards, ge as DataPagination, Te as DataTable, Je as DataToolbar, Q as DataViewer, ze as FilterControl, Ge as ViewSwitcher, it as col, ue as composeCardLayout, a as createColumnHelper, ot as exportCsv, K as resolveColumnLabel, vt as useDataView, Z as useDataViewContext, yt as useDataViewFetcher };
 
 //# sourceMappingURL=index.js.map