@spark-ui/components 17.3.0 → 17.3.2

package/dist/table/index.mjs

@@ -2,156 +2,110 @@ import { t as e } from "../icon-D05Uqh8_.mjs";
 import { t } from "../button-C6nlNPdv.mjs";
 import { n } from "../checkbox-xsURzANi.mjs";
 import { cva as r, cx as i } from "class-variance-authority";
-import { createContext as a, forwardRef as o, useContext as s, useEffect as c, useLayoutEffect as l, useMemo as u, useRef as d, useState as f } from "react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-import { Button as g, Cell as _, CheckboxContext as v, Collection as y, Column as b, ColumnResizer as x, Group as ee, ResizableTableContainer as S, Row as te, Table as ne, TableBody as re, TableHeader as C, TableStateContext as w, composeRenderProps as ie, useContextProps as ae, useTableOptions as T } from "react-aria-components";
-import { ArrowUp as E } from "@spark-ui/icons/ArrowUp";
-import { Sort as oe } from "@spark-ui/icons/Sort";
-//#region src/table/table-utils.ts
-var D = "button, [role=\"button\"], [role=\"switch\"], [role=\"checkbox\"], [role=\"option\"], input:not([type=\"hidden\"]), select, textarea, [href]", se = "[data-resizable-direction]";
-function O(e) {
-	if (!e || !(e instanceof Element)) return !1;
-	let t = e;
-	return t.matches(D) || t.closest(D) !== null;
-}
-function k(e) {
-	return !e || !(e instanceof Element) ? !1 : e.closest(se) !== null;
-}
-//#endregion
-//#region src/table/TableContext.tsx
-var A = a({ isResizable: !1 });
-function j() {
-	return s(A);
+import a, { createContext as o, useCallback as s, useContext as c, useEffect as l, useLayoutEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { filterDOMProps as g, getEventTarget as _, useResizeObserver as v } from "@react-aria/utils";
+import { Cell as y, TableBody as b, TableHeader as x, useTableColumnResizeState as S, useTableState as ee } from "@react-stately/table";
+import { mergeProps as C, useFocusRing as w, useTable as te, useTableCell as T, useTableColumnHeader as ne, useTableHeaderRow as re, useTableRow as ie, useTableRowGroup as ae } from "react-aria";
+import { useTableColumnResize as oe, useTableSelectAllCheckbox as se, useTableSelectionCheckbox as ce } from "@react-aria/table";
+import { ArrowDown as le } from "@spark-ui/icons/ArrowDown";
+import { ArrowUp as ue } from "@spark-ui/icons/ArrowUp";
+import { Sort as de } from "@spark-ui/icons/Sort";
+//#region src/table/internal/TableContext.tsx
+var fe = o({
+	isResizable: !1,
+	tableWidth: 0
+});
+function pe() {
+	return c(fe);
 }
-var M = a({
+var me = o({
 	selectedCount: 0,
 	onClearSelection: () => {}
 });
-function N() {
-	return s(M);
-}
-//#endregion
-//#region src/table/ResizableTableContainer.tsx
-function P({ className: e, children: t, ...n }) {
-	let r = d(null);
-	return l(() => {
-		let e = r.current;
-		if (!e) return;
-		let t = (t) => {
-			t.key !== " " && t.key !== "Enter" || O(t.target) && e.contains(t.target) && (k(t.target) || (t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation(), t.target.click()));
-		};
-		return e.addEventListener("keydown", t, !0), () => e.removeEventListener("keydown", t, !0);
-	}, []), /* @__PURE__ */ m(A.Provider, {
-		value: { isResizable: !0 },
-		children: /* @__PURE__ */ m(S, {
-			ref: r,
-			"data-spark-component": "resizable-table-container",
-			className: i("relative w-full overflow-auto", e),
-			...n,
-			children: t
-		})
-	});
+function E() {
+	return c(me);
 }
-P.displayName = "ResizableTableContainer";
 //#endregion
-//#region src/table/Table.tsx
-function F({ children: e, className: t, selectedKeys: n, onSelectionChange: r, totalCount: a, hasMultiplePages: o, onClearSelection: s, onSelectAll: c, allowsResizing: l = !0, maxHeight: u, onResizeStart: d, onResize: f, onResizeEnd: p, onKeyDownCapture: h, sortDescriptor: g, onSortChange: _, ...v }) {
-	let y = 0;
-	n === "all" ? y = a ?? 0 : n instanceof Set ? y = n.size : n && (y = new Set(n).size);
-	let b = s ?? (() => r?.(/* @__PURE__ */ new Set())), x = {
-		...v,
+//#region src/table/internal/TableRootWrapper.tsx
+function D({ children: e, className: t, selectedKeys: n, onSelectionChange: r, totalCount: a, hasMultiplePages: o, onClearSelection: s, onSelectAll: c, allowsResizing: l = !0, resizeColumnAriaLabel: u, maxHeight: d, onResizeStart: f, onResize: p, onResizeEnd: h, onKeyDownCapture: g, sortDescriptor: _, onSortChange: v, ...y }) {
+	let b = 0;
+	n === "all" ? b = a ?? 0 : n instanceof Set ? b = n.size : n && (b = new Set(n).size);
+	let x = s ?? (() => r?.(/* @__PURE__ */ new Set())), S = {
+		...y,
 		selectedKeys: n,
 		onSelectionChange: r,
 		totalCount: a,
 		hasMultiplePages: o,
 		onSelectAll: c,
-		selectedCount: y,
-		onClearSelection: b,
+		selectedCount: b,
+		onClearSelection: x,
 		allowsResizing: l,
-		maxHeight: u,
-		onResizeStart: d,
-		onResize: f,
-		onResizeEnd: p,
-		onKeyDownCapture: h,
-		sortDescriptor: g,
-		onSortChange: _,
+		resizeColumnAriaLabel: u,
+		maxHeight: d,
+		onResizeStart: f,
+		onResize: p,
+		onResizeEnd: h,
+		onKeyDownCapture: g,
+		sortDescriptor: _,
+		onSortChange: v,
 		className: t
 	};
-	return /* @__PURE__ */ m(M.Provider, {
-		value: x,
+	return /* @__PURE__ */ m(me.Provider, {
+		value: S,
 		children: /* @__PURE__ */ m("div", {
 			className: i("gap-md flex flex-col", t),
 			children: e
 		})
 	});
 }
-F.displayName = "Table";
-var I = ({ className: e, onKeyDownCapture: t, ...n }) => {
-	let r = d(null);
-	return l(() => {
+D.displayName = "Table";
+//#endregion
+//#region src/table/internal/ResizableTableContainer.tsx
+function O({ className: e, children: t, ...n }) {
+	let r = f(null), [a, o] = p(0);
+	return u(() => {
 		let e = r.current;
-		if (!e) return;
-		let t = (t) => {
-			t.key !== " " && t.key !== "Enter" || O(t.target) && e.contains(t.target) && (k(t.target) || (t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation(), t.target.click()));
-		};
-		return e.addEventListener("keydown", t, !0), () => e.removeEventListener("keydown", t, !0);
-	}, []), /* @__PURE__ */ m(ne, {
+		e && o(e.clientWidth);
+	}, []), v({
 		ref: r,
-		"data-spark-component": "table",
-		className: i("default:w-full", "border-separate border-spacing-y-0", "bg-surface", "outline-none", "text-body-1", "forced-color-adjust-none", "data-focus-visible:u-outline-inset", "has-[>[data-empty]]:h-full", e),
-		...t ? {
+		onResize: () => {
+			let e = r.current;
+			e && o(e.clientWidth);
+		}
+	}), /* @__PURE__ */ m(fe.Provider, {
+		value: {
+			isResizable: !0,
+			tableWidth: a
+		},
+		children: /* @__PURE__ */ m("div", {
+			ref: r,
+			"data-spark-component": "resizable-table-container",
+			className: i("relative w-full overflow-auto", e),
 			...n,
-			onKeyDownCapture: t
-		} : n
-	});
-};
-I.displayName = "Table.Grid.Inner";
-function ce(e) {
-	return typeof e == "number" ? `${e}px` : e;
-}
-function L({ "aria-label": e, "aria-labelledby": t, className: n, children: r }) {
-	let { allowsResizing: i = !0, maxHeight: a, onResizeStart: o, onResize: s, onResizeEnd: c, onKeyDownCapture: l, sortDescriptor: u, onSortChange: d, className: f, ...p } = N(), h = a == null ? void 0 : { maxHeight: ce(a) }, g = n ?? f, _ = {
-		...p,
-		...e != null && { "aria-label": e },
-		...t != null && { "aria-labelledby": t },
-		sortDescriptor: u,
-		onSortChange: d,
-		onKeyDownCapture: l,
-		className: g
-	};
-	return i ? /* @__PURE__ */ m(P, {
-		className: g,
-		style: h,
-		onResizeStart: o,
-		onResize: s,
-		onResizeEnd: c,
-		children: /* @__PURE__ */ m(I, {
-			..._,
-			children: r
-		})
-	}) : /* @__PURE__ */ m("div", {
-		className: "relative w-full overflow-auto",
-		style: h,
-		children: /* @__PURE__ */ m(I, {
-			..._,
-			children: r
+			children: t
 		})
 	});
 }
-L.displayName = "Table.Grid";
+O.displayName = "ResizableTableContainer";
 //#endregion
-//#region src/table/Table.styles.tsx
-var R = r([
+//#region src/table/internal/Table.styles.tsx
+var k = r([
 	"h-sz-64 min-w-sz-64",
 	"relative group/column first:rounded-l-xl last:rounded-r-xl bg-neutral-container",
-	"px-lg py-sm text-left outline-none box-border",
+	"pl-lg pr-lg py-sm text-left outline-none box-border",
 	"cursor-default",
 	"data-focus-visible:u-outline data-focus-visible:-outline-offset-2"
 ], {
-	variants: {},
-	defaultVariants: {}
-});
-r([
+	variants: {
+		checkbox: { true: ["w-sz-64 min-w-sz-64 max-w-sz-64", "px-0 align-middle"] },
+		resizable: { true: ["pr-xl"] }
+	},
+	defaultVariants: {
+		checkbox: !1,
+		resizable: !1
+	}
+}), he = r([
 	"flex flex-1 justify-between items-center gap-md",
 	"font-inherit text-left text-inherit",
 	"whitespace-nowrap text-ellipsis",
@@ -161,10 +115,11 @@ r([
 	variants: {},
 	defaultVariants: {}
 });
-var le = r(["empty:italic empty:text-center empty:text-body-2 empty:py-lg"], {
+r(["empty:italic empty:text-center empty:text-body-2 empty:py-lg"], {
 	variants: {},
 	defaultVariants: {}
-}), ue = r([
+});
+var A = r([
 	"p-lg outline-none box-border default:overflow-hidden",
 	"border-b-sm border-outline [tr:last-child>&]:border-b-0",
 	"[-webkit-tap-highlight-color:transparent]",
@@ -172,62 +127,521 @@ var le = r(["empty:italic empty:text-center empty:text-body-2 empty:py-lg"], {
 ], {
 	variants: { checkbox: { true: ["w-sz-64 py-sm px-0 align-middle"] } },
 	defaultVariants: { checkbox: !1 }
-});
-r(["pointer-events-none", "[&_td]:h-sz-16 [&_td]:p-0 [&_td]:border-0 [&_td]:border-b-0 [&_td]:bg-surface [&_td]:align-middle"], {
+}), ge = r(["pointer-events-none", "[&_td]:h-sz-16 [&_td]:p-0 [&_td]:border-0 [&_td]:border-b-0 [&_td]:bg-surface [&_td]:align-middle"], {
 	variants: {},
 	defaultVariants: {}
-});
+}), j = "[data-spark-component=\"table-cell\"]";
+function M(e) {
+	return !e || !(e instanceof Element) ? !1 : !!e.closest("[role=\"combobox\"],select,[data-spark-component=\"dropdown-trigger\"],[data-spark-component=\"combobox-input\"]");
+}
+function _e(e) {
+	if (!e || !(e instanceof Element)) return !1;
+	let t = e.closest("[role=\"combobox\"],[data-spark-component=\"dropdown-trigger\"],[data-spark-component=\"combobox-input\"]");
+	return t ? t.getAttribute("aria-expanded") === "true" : !1;
+}
+var ve = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
+function N(e) {
+	return !e || !(e instanceof Element) ? null : e.closest(j);
+}
+function P(e) {
+	return e.getAttribute("data-table-cell-kind") === "selection";
+}
+function F(e) {
+	return Array.from(e.querySelectorAll(ve)).filter((t) => !(t === e || t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true" || t.getAttribute("hidden") !== null));
+}
+function I(e, t) {
+	for (let n of F(e)) {
+		let e = "data-prev-tabindex";
+		if (!t) n.hasAttribute(e) || n.setAttribute(e, n.getAttribute("tabindex") ?? ""), n.setAttribute("tabindex", "-1");
+		else {
+			let t = n.getAttribute(e);
+			if (t === null) continue;
+			n.removeAttribute(e), t === "" ? n.removeAttribute("tabindex") : n.setAttribute("tabindex", t);
+		}
+	}
+}
+function L(e) {
+	let t = Array.from(e.querySelectorAll(j));
+	for (let e of t) I(e, !1);
+}
+function ye({ ref: e, gridProps: t, onKeyDownCapture: n, onFocusCapture: r }) {
+	let [i, a] = p("grid"), o = f("grid"), s = f(null), c = f(!1), u = d(() => {
+		let { onKeyDown: l, ...u } = t, d = (e) => {
+			s.current = e, o.current = "interaction", a("interaction"), I(e, !0);
+		};
+		return C(u, {
+			onKeyDown: (e) => {
+				if (o.current === "interaction" && (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown")) {
+					let e = s.current, t = document.activeElement;
+					if (e && t instanceof Node && e.contains(t)) return;
+				}
+				o.current === "interaction" && (e.key === "ArrowUp" || e.key === "ArrowDown") && M(e.target) && N(e.target) === s.current || l?.(e);
+			},
+			onKeyDownCapture: (e) => {
+				if (n?.(e), o.current === "interaction" && e.key === "Tab") {
+					let t = N(e.target);
+					t && t === s.current && e.stopPropagation();
+					return;
+				}
+				if (M(e.target) && o.current === "interaction" && (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown")) {
+					let t = N(e.target);
+					if (t && t === s.current) return;
+				}
+				if (o.current === "interaction" && (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown")) {
+					let t = N(e.target);
+					if (t && t === s.current) {
+						e.stopPropagation();
+						return;
+					}
+				}
+				if (o.current === "grid" && e.key === "ArrowRight") {
+					let t = N(e.target);
+					if (t) {
+						let n = t.closest("tr");
+						if (n) {
+							let r = Array.from(n.querySelectorAll(j));
+							if (r.length > 0 && r[r.length - 1] === t) {
+								e.preventDefault(), e.stopPropagation(), n.focus();
+								return;
+							}
+						}
+					}
+				}
+				if (o.current === "grid" && e.key === "Enter") {
+					let t = N(e.target);
+					if (!t || P(t)) return;
+					let n = F(t);
+					if (n.length === 0) return;
+					e.preventDefault(), e.stopPropagation(), d(t), n[0]?.focus();
+					return;
+				}
+				if (o.current === "grid" && e.key === "F2") {
+					let t = N(e.target);
+					if (!t || P(t)) return;
+					let n = F(t);
+					if (n.length === 0) return;
+					e.preventDefault(), e.stopPropagation(), d(t), n[0]?.focus();
+					return;
+				}
+				if (o.current === "interaction" && e.key === "Escape") {
+					if (_e(e.target)) return;
+					let t = s.current;
+					if (!t) return;
+					e.preventDefault(), e.stopPropagation(), o.current = "grid", a("grid"), t.focus();
+				}
+				if (o.current === "interaction" && e.key === "F2") {
+					let t = s.current;
+					if (!t) return;
+					e.preventDefault(), e.stopPropagation(), o.current = "grid", a("grid"), t.focus();
+				}
+			},
+			onBlurCapture: (t) => {
+				if (o.current !== "interaction") return;
+				let n = e.current;
+				if (!n) return;
+				let r = t.relatedTarget;
+				r instanceof Node && n.contains(r) || (s.current = null, o.current = "grid", a("grid"));
+			},
+			onFocusCapture: (t) => {
+				r?.(t);
+				let n = c.current;
+				c.current = !1;
+				let i = e.current, l = N(t.target);
+				if (o.current === "interaction" && s.current && i) {
+					let e = !!(l && l !== s.current), n = !l && t.target instanceof Element && i.contains(t.target) && !s.current.contains(t.target);
+					(e || n) && (o.current = "grid", a("grid"), n && (s.current = null));
+				}
+				if (!l) return;
+				s.current = l;
+				let u = t.target instanceof Element ? t.target : null, f = l.matches(j), p = o.current === "grid", m = !!(u && u !== l && l.contains(u)), h = F(l).length > 0;
+				p && f && m && h && !n && queueMicrotask(() => l.focus()), n && p && m && f && h && !P(l) && d(l);
+			},
+			onPointerDownCapture: (e) => {
+				let t = N(e.target);
+				t?.matches(j) && e.target instanceof Element && e.target !== t && t.contains(e.target) && (c.current = !0);
+			},
+			"data-table-keyboard-mode": i
+		});
+	}, [
+		t,
+		i,
+		e,
+		r,
+		n
+	]);
+	return l(() => {
+		o.current = i;
+		let t = e.current;
+		if (t) {
+			if (i === "grid") {
+				L(t), s.current?.focus?.();
+				return;
+			}
+			L(t), s.current && I(s.current, !0);
+		}
+	}, [i, e]), {
+		gridProps: u,
+		keyboardMode: i
+	};
+}
 //#endregion
-//#region src/table/TableBody.tsx
-function z({ className: e, renderEmptyState: t, ...n }) {
-	let r = t == null ? void 0 : (e) => /* @__PURE__ */ m("div", {
-		"data-spark-component": "table-empty",
-		className: "p-lg",
-		children: t(e)
+//#region src/table/internal/table-utils.ts
+var R = "button, [role=\"button\"], [role=\"switch\"], [role=\"checkbox\"], [role=\"option\"], input:not([type=\"hidden\"]), select, textarea, [href], [data-spark-component=\"dropdown-trigger\"], [data-spark-component=\"icon-button\"], [data-spark-component=\"switch\"], [data-spark-component=\"switch-input\"], [data-spark-component=\"combobox-input\"]", be = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
+function xe(e) {
+	if (!e || !(e instanceof Element)) return !1;
+	let t = e;
+	return t.matches(R) || t.closest(R) !== null;
+}
+function Se(e) {
+	return e ? e instanceof Element ? e : e instanceof Text ? e.parentElement : null : null;
+}
+function Ce(e) {
+	for (let t of e.querySelectorAll(be)) if (t !== e && !t.hasAttribute("disabled") && t.getAttribute("aria-disabled") !== "true" && t.getAttribute("hidden") === null) return !0;
+	return !1;
+}
+function we(e) {
+	let t = Se(e);
+	if (!t) return !1;
+	if (xe(t)) return !0;
+	let n = t.closest("[data-spark-component=\"table-cell\"]");
+	return !n || n.getAttribute("data-table-cell-kind") === "selection" ? !1 : Ce(n);
+}
+//#endregion
+//#region src/table/internal/TableKeyboardModeContext.tsx
+var z = o("grid");
+//#endregion
+//#region src/table/internal/TableSelectionCheckbox.tsx
+function B({ checkboxProps: e, className: t, suppressFocusWalker: r }) {
+	let { isSelected: i, isIndeterminate: a, isDisabled: o, onChange: s, ...c } = e, l = a === !0 ? "indeterminate" : !!i;
+	return /* @__PURE__ */ m("span", {
+		...r ? { "data-react-aria-prevent-focus": !0 } : void 0,
+		onClick: (e) => e.stopPropagation(),
+		onPointerDown: (e) => e.stopPropagation(),
+		className: t ?? "flex h-full min-h-full items-center justify-center",
+		children: /* @__PURE__ */ m(n, {
+			checked: l,
+			disabled: o,
+			onCheckedChange: s,
+			...c
+		})
 	});
-	return /* @__PURE__ */ m(re, {
-		"data-spark-component": "table-body",
-		className: i(le(), e),
-		renderEmptyState: r,
-		...n
+}
+B.displayName = "Table.SelectionCheckbox";
+//#endregion
+//#region src/table/internal/TableBodyCellRenderer.tsx
+function V({ cell: e, state: t, resizeState: n }) {
+	let r = f(null), { gridCellProps: i } = T({ node: e }, t, r), { isFocusVisible: a, focusProps: o } = w(), l = c(z), u = s((e) => {
+		l === "interaction" && (e.key !== " " && e.key !== "Enter" || e.stopPropagation());
+	}, [l]), { onKeyDownCapture: d, ...p } = i, h = s((e) => {
+		[
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(e.key) || d?.(e);
+	}, [d]), g = ce({ key: e.parentKey ?? e.key }, t), _ = t.collection.columns[e.index ?? 0]?.key ?? null, v = _ ? n?.columnWidths?.get?.(_) : void 0;
+	return e.props?.isSelectionCell ? /* @__PURE__ */ m("td", {
+		...C(p, { onKeyDownCapture: h }, o, { onKeyDown: u }),
+		ref: r,
+		"data-spark-component": "table-cell",
+		"data-table-cell-kind": "selection",
+		className: A({ checkbox: !0 }),
+		"data-focus-visible": a || void 0,
+		children: /* @__PURE__ */ m(B, {
+			suppressFocusWalker: l === "grid",
+			checkboxProps: g.checkboxProps
+		})
+	}) : /* @__PURE__ */ m("td", {
+		...C(p, { onKeyDownCapture: h }, o, { onKeyDown: u }),
+		ref: r,
+		"data-spark-component": "table-cell",
+		className: A(),
+		"data-focus-visible": a || void 0,
+		style: v ? { width: v } : void 0,
+		children: e.rendered
 	});
 }
-z.displayName = "Table.Body";
+V.displayName = "Table.BodyCellRenderer";
+//#endregion
+//#region src/table/internal/TableBodyRowRenderer.tsx
+function H(e) {
+	if (e) return (t) => {
+		we(_(t.nativeEvent)) || e(t);
+	};
+}
+function U({ item: e, state: t, resizeState: n }) {
+	let r = f(null), { rowProps: a, isSelected: o } = ie({ node: e }, t, r), { isFocusVisible: s, focusProps: c } = w(), { onClick: l, onPointerDown: u, onMouseDown: d, onPointerUp: p, onPointerCancel: h, ...g } = a, _ = i("outline-none box-border data-focus-visible:u-outline-inset data-focus-visible:outline-dashed", g.className, o && "bg-support-container text-on-support-container");
+	return /* @__PURE__ */ m("tr", {
+		...C(g, c),
+		onPointerDown: H(u),
+		onMouseDown: H(d),
+		onPointerUp: H(p),
+		onPointerCancel: H(h),
+		onClick: H(l),
+		ref: r,
+		"data-spark-component": "table-row",
+		"data-selected": o || void 0,
+		"data-focus-visible": s || void 0,
+		className: _,
+		tabIndex: -1,
+		children: [...e.childNodes].map((e) => /* @__PURE__ */ m(V, {
+			cell: e,
+			state: t,
+			resizeState: n
+		}, e.key))
+	});
+}
+U.displayName = "Table.BodyRowRenderer";
+//#endregion
+//#region src/table/internal/TableColumnResizer.tsx
+function W({ column: e, ariaLabel: t, resizeState: n, resizeCallbacks: r }) {
+	let a = f(null), { resizerProps: o, inputProps: s, isResizing: c } = oe({
+		column: e,
+		"aria-label": t ?? "Resize column",
+		onResizeStart: r.onResizeStart,
+		onResize: r.onResize,
+		onResizeEnd: r.onResizeEnd
+	}, n, a);
+	return /* @__PURE__ */ m("div", {
+		role: "presentation",
+		className: i("cursor-col-resize absolute inset-y-lg right-0 flex w-lg items-center justify-center", "after:block after:h-full after:w-[2px] after:bg-outline", "has-[input:focus-visible]:after:u-outline has-[input:focus-visible]:after:outline-offset-2"),
+		"data-resizable-direction": "both",
+		...o,
+		children: /* @__PURE__ */ m("input", {
+			ref: a,
+			disabled: !c,
+			...s
+		})
+	});
+}
+W.displayName = "Table.ColumnResizer";
+//#endregion
+//#region src/table/internal/TableHeaderSelectionCheckbox.tsx
+function G({ state: e }) {
+	let { checkboxProps: t } = se(e), { collection: n, selectionManager: r } = e, i = r.selectedKeys, a = n, o = a.body, s = o == null ? new Set(n.getKeys()) : new Set([...a.getChildren(o.key)].map((e) => e.key)), c = i === "all" ? s : i, l = [...s].filter((e) => c.has(e)).length, u = s.size, d = u > 0 && l === u, f = l > 0 && l < u, { isSelected: p, isIndeterminate: h, onChange: g, ..._ } = t, v = (e) => {
+		(e.key === " " || e.key === "Enter") && e.stopPropagation(), e.key === "Enter" && (e.preventDefault(), t.isDisabled || g?.(!d));
+	};
+	return /* @__PURE__ */ m(B, { checkboxProps: {
+		..._,
+		isSelected: d,
+		isIndeterminate: f,
+		onChange: g,
+		onKeyDown: v
+	} });
+}
+G.displayName = "Table.HeaderSelectionCheckbox";
+//#endregion
+//#region src/table/internal/TableColumnHeader.tsx
+function Te({ column: t, state: n, resizeState: r, resizeCallbacks: a, isLastColumnInRow: o = !1 }) {
+	let s = f(null), { resizeColumnAriaLabel: c } = E(), { columnHeaderProps: l } = ne({ node: t }, n, s), { isFocusVisible: u, focusProps: d } = w(), p = t.props?.allowsResizing !== !1 && !o, g = r?.columnWidths?.get?.(t.key), _ = !!(r && p);
+	if (t.props?.isSelectionCell) return /* @__PURE__ */ m("th", {
+		...l,
+		ref: s,
+		role: "columnheader",
+		className: k({ checkbox: !0 }),
+		"data-spark-component": "table-column",
+		"data-table-selection-columnheader": !0,
+		"data-focus-visible": u || void 0,
+		children: /* @__PURE__ */ m(G, { state: n })
+	});
+	let v = !!t.props?.allowsSorting, y = n.sortDescriptor?.column === t.key, b = n.sortDescriptor?.direction ?? "ascending", x = m(y ? b === "descending" ? le : ue : de, {}), S = (e) => {
+		v && (e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), n.sort?.(t.key)));
+	};
+	return /* @__PURE__ */ h("th", {
+		...C(l, d),
+		ref: s,
+		role: "columnheader",
+		className: i(k({ resizable: _ })),
+		style: g ? { width: g } : void 0,
+		"data-spark-component": "table-column",
+		"data-focus-visible": u || void 0,
+		onKeyDown: S,
+		children: [/* @__PURE__ */ h("div", {
+			className: he(),
+			children: [/* @__PURE__ */ m("button", {
+				type: "button",
+				className: i("gap-md flex min-w-0 flex-1 items-center text-left", "focus-visible:u-outline outline-none", "bg-transparent p-0 border-0"),
+				onKeyDown: S,
+				children: /* @__PURE__ */ m("span", {
+					className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
+					children: t.rendered
+				})
+			}), v ? /* @__PURE__ */ m("span", {
+				"aria-hidden": "true",
+				className: i("shrink-0 opacity-dim-2 group-hover/column:opacity-100", y && "opacity-100"),
+				children: /* @__PURE__ */ m(e, {
+					size: "sm",
+					children: x
+				})
+			}) : null]
+		}), r && p ? /* @__PURE__ */ m(W, {
+			column: t,
+			ariaLabel: typeof c == "function" ? c(t) : c,
+			resizeState: r,
+			resizeCallbacks: a
+		}) : null]
+	});
+}
+Te.displayName = "Table.ColumnHeader";
+//#endregion
+//#region src/table/internal/TableHeaderRowRenderer.tsx
+function Ee({ item: e, state: t, resizeState: n, resizeCallbacks: r }) {
+	let i = f(null), { rowProps: a } = re({ node: e }, t, i), o = [...e.childNodes];
+	return /* @__PURE__ */ m("tr", {
+		...a,
+		ref: i,
+		children: o.map((e, i) => /* @__PURE__ */ m(Te, {
+			column: e,
+			state: t,
+			resizeState: n,
+			resizeCallbacks: r,
+			isLastColumnInRow: i === o.length - 1
+		}, e.key))
+	});
+}
+Ee.displayName = "Table.HeaderRowRenderer";
+//#endregion
+//#region src/table/internal/TableRoot.tsx
+function De({ className: e, children: t, ...n }) {
+	let r = f(null), a = pe(), o = n.selectionMode === "multiple", s = ee({
+		...n,
+		showSelectionCheckboxes: n.selectionMode === "multiple",
+		children: t
+	}), c = S({ tableWidth: a.tableWidth }, s), l = a.isResizable && n.allowsResizing !== !1 ? c : null, { gridProps: u } = te({ ...n }, s, r), d = s.collection.headerRows, p = [...s.collection.body.childNodes], _ = s.collection.body.props?.renderEmptyState, v = s.collection.columns.length || 1, y = p.length > 0 || !!_, { rowGroupProps: b } = ae(), { rowGroupProps: x } = ae(), { gridProps: w, keyboardMode: T } = ye({
+		ref: r,
+		gridProps: u,
+		onKeyDownCapture: n.onKeyDownCapture,
+		onFocusCapture: n.onFocusCapture
+	});
+	return /* @__PURE__ */ m(z.Provider, {
+		value: T,
+		children: /* @__PURE__ */ h("table", {
+			...C(w, g(n, { global: !0 })),
+			ref: r,
+			"data-spark-component": "table",
+			className: i("default:w-full", o ? "table-fixed" : void 0, "border-separate border-spacing-y-0", "bg-surface", "outline-none", "text-body-1", "forced-color-adjust-none", "data-focus-visible:u-outline-inset", "has-[>[data-empty]]:h-full", e),
+			children: [/* @__PURE__ */ m("thead", {
+				...b,
+				"data-spark-component": "table-header",
+				children: d.map((e) => /* @__PURE__ */ m(Ee, {
+					item: e,
+					state: s,
+					resizeState: l,
+					resizeCallbacks: {
+						onResizeStart: n.onResizeStart,
+						onResize: n.onResize,
+						onResizeEnd: n.onResizeEnd
+					}
+				}, e.key))
+			}), /* @__PURE__ */ h("tbody", {
+				...x,
+				"data-spark-component": "table-body",
+				children: [
+					y ? /* @__PURE__ */ m("tr", {
+						"aria-hidden": "true",
+						className: ge(),
+						role: "presentation",
+						"data-spark-component": "table-body-spacer",
+						children: /* @__PURE__ */ m("td", {
+							colSpan: v,
+							role: "presentation"
+						})
+					}) : null,
+					p.length === 0 && _ ? /* @__PURE__ */ m("tr", {
+						"data-empty": !0,
+						children: /* @__PURE__ */ m("td", {
+							colSpan: v,
+							children: _({ isEmpty: !0 })
+						})
+					}) : null,
+					p.map((e) => /* @__PURE__ */ m(U, {
+						item: e,
+						state: s,
+						resizeState: l
+					}, e.key))
+				]
+			})]
+		})
+	});
+}
+De.displayName = "Table.Grid.Inner";
+//#endregion
+//#region src/table/internal/TableGrid.tsx
+function Oe(e) {
+	return typeof e == "number" ? `${e}px` : e;
+}
+function ke({ "aria-label": e, "aria-labelledby": t, className: n, children: r }) {
+	let { allowsResizing: i = !0, maxHeight: a, onResizeStart: o, onResize: s, onResizeEnd: c, onKeyDownCapture: l, sortDescriptor: u, onSortChange: d, className: f, ...p } = E(), h = a == null ? void 0 : { maxHeight: Oe(a) }, g = n ?? f, _ = {
+		...p,
+		...e != null && { "aria-label": e },
+		...t != null && { "aria-labelledby": t },
+		sortDescriptor: u,
+		onSortChange: d,
+		onKeyDownCapture: l,
+		className: g
+	}, v = De;
+	return i ? /* @__PURE__ */ m(O, {
+		className: g,
+		style: h,
+		onResizeStart: o,
+		onResize: s,
+		onResizeEnd: c,
+		children: /* @__PURE__ */ m(v, {
+			..._,
+			children: r
+		})
+	}) : /* @__PURE__ */ m("div", {
+		className: "relative w-full overflow-auto",
+		style: h,
+		children: /* @__PURE__ */ m(v, {
+			..._,
+			children: r
+		})
+	});
+}
+ke.displayName = "Table.Grid";
+//#endregion
+//#region src/table/TableBody.tsx
+function K(e) {
+	return /* @__PURE__ */ m(b, { ...e });
+}
+K.displayName = "Table.Body", K.getCollectionNode = b.getCollectionNode;
 //#endregion
 //#region src/table/TableBulkBar.tsx
-var B = a(null);
-function V() {
-	let e = s(B);
+var Ae = o(null);
+function q() {
+	let e = c(Ae);
 	if (!e) throw Error("Table.BulkBar subcomponents must be used within Table.BulkBar");
 	return e;
 }
-function H({ children: e, className: t }) {
-	let { selectedCount: n, totalCount: r, onClearSelection: a, onSelectAll: o, hasMultiplePages: s } = N(), c = {
-		selectedCount: n,
-		totalCount: r,
-		onClearSelection: a,
-		onSelectAll: o,
-		hasMultiplePages: s
+function je({ children: e, className: t, rootProps: n, ...r }) {
+	let { selectedCount: a, totalCount: o, onClearSelection: s, onSelectAll: c, hasMultiplePages: l } = E(), u = {
+		selectedCount: a,
+		totalCount: o,
+		onClearSelection: s,
+		onSelectAll: c,
+		hasMultiplePages: l
 	};
-	return /* @__PURE__ */ m(B.Provider, {
-		value: c,
+	return /* @__PURE__ */ m(Ae.Provider, {
+		value: u,
 		children: /* @__PURE__ */ m("div", {
 			role: "toolbar",
-			"aria-label": "Table bulk actions",
+			"aria-label": r["aria-label"] ?? "Table bulk actions",
 			"data-spark-component": "table-bulk-bar",
-			className: i("gap-lg min-h-sz-64 flex w-full flex-wrap items-center justify-between", "rounded-lg", "bg-basic-container text-on-basic-container p-lg", t),
+			className: i("gap-lg min-h-sz-64 flex w-full flex-wrap items-center justify-between", "rounded-lg", "bg-support-container text-on-support-container p-lg", t),
+			...n,
 			children: e
 		})
 	});
 }
-function U({ children: e }) {
-	return V(), /* @__PURE__ */ m("span", {
+function Me({ children: e }) {
+	return q(), /* @__PURE__ */ m("span", {
 		className: "text-body-1 font-bold",
 		children: e
 	});
 }
-function W({ className: e, children: n, ...r }) {
-	let { selectedCount: a, onClearSelection: o, hasMultiplePages: s } = V();
+function J({ className: e, children: n, ...r }) {
+	let { selectedCount: a, onClearSelection: o, hasMultiplePages: s } = q();
 	return s ? /* @__PURE__ */ m(t, {
 		size: "sm",
 		design: "ghost",
@@ -240,8 +654,8 @@ function W({ className: e, children: n, ...r }) {
 		children: n
 	}) : null;
 }
-function G({ className: e, children: n, ...r }) {
-	let { selectedCount: a, totalCount: o, onSelectAll: s, hasMultiplePages: c } = V();
+function Ne({ className: e, children: n, ...r }) {
+	let { selectedCount: a, totalCount: o, onSelectAll: s, hasMultiplePages: c } = q();
 	return c ? /* @__PURE__ */ m(t, {
 		size: "sm",
 		design: "ghost",
@@ -254,182 +668,126 @@ function G({ className: e, children: n, ...r }) {
 		children: n
 	}) : null;
 }
-H.displayName = "Table.BulkBar";
-var K = H;
-K.displayName = "Table.BulkBar", U.displayName = "Table.BulkBarSelectedCount", W.displayName = "Table.BulkBarClearButton", G.displayName = "Table.BulkBarSelectAllButton";
+je.displayName = "Table.BulkBar";
+var Pe = je;
+Pe.displayName = "Table.BulkBar", Me.displayName = "Table.BulkBarSelectedCount", J.displayName = "Table.BulkBarClearButton", Ne.displayName = "Table.BulkBarSelectAllButton";
 //#endregion
 //#region src/table/TableCell.tsx
-function q({ className: e, checkbox: t, onClick: n, onPointerDown: r, ...a }) {
-	let o = (e) => {
-		O(e.target) && e.stopPropagation();
-	};
-	return /* @__PURE__ */ m(_, {
-		"data-spark-component": "table-cell",
-		className: i(ue({ checkbox: t }), e),
-		onClick: (e) => {
-			o(e), n?.(e);
-		},
-		onPointerDown: (e) => {
-			o(e), r?.(e);
-		},
-		...a
-	});
+function Y(e) {
+	return /* @__PURE__ */ m(y, { ...e });
 }
-q.displayName = "Table.Cell";
+Y.displayName = "Table.Cell", Y.getCollectionNode = y.getCollectionNode;
 //#endregion
 //#region src/table/TableColumn.tsx
-function J({ className: t, label: n, children: r, allowsResizing: a = !0, minWidth: o = 120, ...s }) {
-	let { isResizable: c } = j(), l = r;
-	return /* @__PURE__ */ m(b, {
-		"data-spark-component": "table-column",
-		className: i(R(), t),
-		minWidth: o,
-		...s,
-		children: ie(l, (t, o) => {
-			let { allowsSorting: l, sortDirection: u } = o, d = (e) => {
-				O(e.target) && e.stopPropagation();
-			};
-			return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h(ee, {
-				role: "presentation",
-				tabIndex: -1,
-				className: i("border-transparent", "focus-visible:u-outline focus-visible:outline-offset-2", "gap-sm box-border flex flex-1 items-center"),
-				onClick: d,
-				onPointerDown: d,
-				children: [/* @__PURE__ */ h("div", {
-					className: "gap-md flex min-w-0 shrink items-center",
-					children: [/* @__PURE__ */ m("p", {
-						className: "truncate",
-						children: n
-					}), r && /* @__PURE__ */ m("div", {
-						className: "inline-flex shrink-0 items-center",
-						children: typeof t == "function" ? t({
-							...o,
-							defaultChildren: void 0
-						}) : t
-					})]
-				}), l && /* @__PURE__ */ m("span", {
-					className: "size-sz-32 ml-auto inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full",
-					children: /* @__PURE__ */ m(e, {
-						size: "sm",
-						className: i(u === "descending" && "rotate-180"),
-						children: m(u ? E : oe, {})
-					})
-				})]
-			}), c && a && !s.width && /* @__PURE__ */ m(x, { className: i("z-raised absolute top-0 right-[-8px]", "group-last/column:hidden", "h-full w-[16px] touch-none", "mx-0 cursor-col-resize", "data-focus-visible:after:u-outline", "data-resizing:after:bg-outline-high after:transition-transform after:duration-200 data-resizing:after:scale-125", "after:h-sz-32 after:bg-outline after:absolute after:top-1/2 after:left-1/2 after:w-[2px] after:-translate-y-1/2") })] });
-		})
-	});
+function X({ label: e, allowsResizing: t = !0, ...n }) {
+	return null;
 }
-J.displayName = "Table.Column";
-//#endregion
-//#region src/table/TableSelectionCheckbox.tsx
-var Y = o(function(e, t) {
-	let [r, i] = ae({
-		...e,
-		slot: "selection"
-	}, t, v), { isSelected: a, isIndeterminate: o, onChange: s, ...c } = r;
-	return /* @__PURE__ */ m("span", {
-		onClick: (e) => e.stopPropagation(),
-		onPointerDown: (e) => e.stopPropagation(),
-		className: "flex h-full min-h-full items-center justify-center",
-		children: /* @__PURE__ */ m(n, {
-			ref: i,
-			checked: o === !0 ? "indeterminate" : !!a,
-			onCheckedChange: s,
-			...c
-		})
-	});
-});
-Y.displayName = "Table.SelectionCheckbox";
-//#endregion
-//#region src/table/TableHeaderSelectionCheckbox.tsx
-function X() {
-	let e = s(w);
-	if (!e) return /* @__PURE__ */ m(Y, {});
-	let { collection: t, selectionManager: r } = e, i = r.selectedKeys, a = t, o = a.body, c = o == null ? new Set(t.getKeys()) : new Set([...a.getChildren(o.key)].map((e) => e.key)), l = i === "all" ? c : i, u = [...c].filter((e) => l.has(e)).length, d = c.size;
-	return /* @__PURE__ */ m("span", {
-		onClick: (e) => e.stopPropagation(),
-		onPointerDown: (e) => e.stopPropagation(),
-		className: "flex h-full min-h-full items-center justify-center",
-		children: /* @__PURE__ */ m(n, {
-			checked: u > 0 && u < d ? "indeterminate" : d > 0 && u === d,
-			onCheckedChange: () => {
-				r.toggleSelectAll();
+X.displayName = "Table.Column", X.getCollectionNode = function* (e, t) {
+	let n = e.title ?? e.label ?? e.children ?? null, r = e.textValue || (typeof n == "string" ? n : "") || e["aria-label"], i = yield {
+		type: "column",
+		key: e.id ?? null,
+		hasChildNodes: !!e.childColumns || !!e.title && a.Children.count(e.children) > 0,
+		rendered: n,
+		textValue: r,
+		props: {
+			...e,
+			title: e.title ?? e.label,
+			allowsResizing: e.allowsResizing
+		},
+		*childNodes() {
+			if (e.childColumns) for (let t of e.childColumns) yield {
+				type: "column",
+				value: t
+			};
+			else if (e.title) {
+				let t = [];
+				a.Children.forEach(e.children, (e) => {
+					t.push({
+						type: "column",
+						element: e
+					});
+				}), yield* t;
 			}
-		})
-	});
-}
-X.displayName = "Table.HeaderSelectionCheckbox";
+		},
+		shouldInvalidate(e) {
+			return o(e), !1;
+		}
+	}, o = (e) => {
+		for (let t of i) t.hasChildNodes || e.columns.push(t);
+	};
+	o(t);
+};
 //#endregion
 //#region src/table/TableHeader.tsx
-function Z({ className: e, columns: t, children: n, sticky: r = !0, ...a }) {
-	let { selectionBehavior: o, selectionMode: s, allowsDragging: c } = T();
-	return /* @__PURE__ */ h(C, {
-		"data-spark-component": "table-header",
-		className: i([
-			r && "z-raised sticky top-0",
-			"text-on-neutral-container text-body-1 font-semibold",
-			"after:pt-md after:block after:size-0"
-		], e),
-		columns: t,
-		...a,
-		children: [
-			c && /* @__PURE__ */ m(b, {
-				width: 20,
-				minWidth: 20,
-				className: "w-sz-20 min-w-sz-20 box-border"
-			}),
-			o === "toggle" && /* @__PURE__ */ m(b, {
-				width: 56,
-				minWidth: 56,
-				className: i(R()),
-				children: s === "multiple" && /* @__PURE__ */ m(X, {})
-			}),
-			t == null ? n : /* @__PURE__ */ m(y, {
-				items: t,
-				children: n
-			})
-		]
-	});
+function Z(e) {
+	return /* @__PURE__ */ m(x, { ...e });
 }
-Z.displayName = "Table.Header";
+Z.displayName = "Table.Header", Z.getCollectionNode = x.getCollectionNode;
 //#endregion
 //#region src/table/TableRow.tsx
-function Q({ id: e, columns: t, children: n, className: r, ...a }) {
-	let { selectionBehavior: o, allowsDragging: s } = T();
-	return /* @__PURE__ */ h(te, {
-		id: e,
-		"data-spark-component": "table-row",
-		className: i("group/row", "h-sz-80", "group/row text-on-surface relative cursor-default select-none", "[-webkit-tap-highlight-color:transparent]", "data-focus-visible:u-outline-inset outline-none data-focus-visible:outline-dashed", "data-react-aria-pressable:hover:bg-surface-hovered data-react-aria-pressable:pressed:bg-surface-hovered", "data-selected:bg-basic-container data-selected:text-on-basic-container", "data-selected:hover:bg-basic-container-hovered data-selected:data-pressed:bg-basic-container-hovered", "data-disabled:text-on-surface/dim-3", "data-href:cursor-pointer", r),
-		columns: t,
-		...a,
-		children: [
-			s && /* @__PURE__ */ m(q, { children: /* @__PURE__ */ m(g, {
-				slot: "drag",
-				className: "w-sz-15 data-focus-visible:u-outline flex items-center justify-center text-center outline-none data-[focus-visible]:rounded-md",
-				children: "≡"
-			}) }),
-			o === "toggle" && /* @__PURE__ */ m(q, {
-				checkbox: !0,
-				children: /* @__PURE__ */ m(Y, {})
-			}),
-			t == null ? n : /* @__PURE__ */ m(y, {
-				items: t,
-				children: n
-			})
-		]
-	});
+function Q(e) {
+	return null;
 }
-Q.displayName = "Table.Row";
+Q.displayName = "Table.Row", Q.getCollectionNode = function* (e, t) {
+	let { children: n, textValue: r, UNSTABLE_childItems: i } = e;
+	yield {
+		type: "item",
+		key: e.id ?? null,
+		props: e,
+		textValue: r,
+		"aria-label": e["aria-label"],
+		hasChildNodes: !0,
+		*childNodes() {
+			if (t.showDragButtons && (yield {
+				type: "cell",
+				key: "header-drag",
+				props: { isDragButtonCell: !0 }
+			}), t.showSelectionCheckboxes && t.selectionMode !== "none" && (yield {
+				type: "cell",
+				key: "header",
+				props: { isSelectionCell: !0 }
+			}), typeof n == "function") {
+				for (let e of t.columns) yield {
+					type: "cell",
+					element: n(e.key),
+					key: e.key
+				};
+				if (i) for (let e of i) yield {
+					type: "item",
+					value: e
+				};
+			} else {
+				let e = [], r = [], i = 0;
+				if (a.Children.forEach(n, (n) => {
+					if (n) if (n.type === Q) {
+						if (e.length < t.columns.length) throw Error("All of a Row's child Cells must be positioned before any child Rows.");
+						r.push({
+							type: "item",
+							element: n
+						});
+					} else e.push({
+						type: "cell",
+						element: n
+					}), i += n.props?.colSpan ?? 1;
+				}), i !== t.columns.length) throw Error(`Cell count must match column count. Found ${i} cells and ${t.columns.length} columns.`);
+				yield* e, yield* r;
+			}
+		},
+		shouldInvalidate(e) {
+			return e.columns.length !== t.columns.length || e.columns.some((e, n) => e.key !== t.columns[n].key) || e.showSelectionCheckboxes !== t.showSelectionCheckboxes || e.showDragButtons !== t.showDragButtons || e.selectionMode !== t.selectionMode;
+		}
+	};
+};
 //#endregion
 //#region src/table/useTableSort.ts
-function de(e, t, n, r) {
+function Fe(e, t, n, r) {
 	let i = e[n], a = t[n];
 	if (i === a) return 0;
 	let o;
 	return o = typeof i == "number" && typeof a == "number" ? i < a ? -1 : 1 : String(i).localeCompare(String(a)), r === "descending" ? -o : o;
 }
-function fe(e, t = {}) {
-	let { initialSort: n, compare: r } = t, [i, a] = f(() => n ? {
+function Ie(e, t = {}) {
+	let { initialSort: n, compare: r } = t, [i, a] = p(() => n ? {
 		column: n.column,
 		direction: n.direction
 	} : {
@@ -440,10 +798,10 @@ function fe(e, t = {}) {
 		sortDescriptor: i,
 		onSortChange: a,
 		setSortDescriptor: a,
-		sortedItems: u(() => {
+		sortedItems: d(() => {
 			let t = i.column;
 			if (!t) return [...e];
-			let n = r ?? de, a = i.direction ?? "ascending";
+			let n = r ?? Fe, a = i.direction ?? "ascending";
 			return [...e].sort((e, r) => n(e, r, t, a));
 		}, [
 			e,
@@ -455,28 +813,28 @@ function fe(e, t = {}) {
 }
 //#endregion
 //#region src/table/useTablePagination.ts
-function pe(e, t) {
-	let { pageSize: n, initialPage: r = 1, getId: i } = t, [a, o] = f(r), [s, l] = f(() => /* @__PURE__ */ new Set()), d = e.length, p = Math.max(1, Math.ceil(d / n));
-	c(() => {
-		o((e) => e < 1 ? 1 : e > p ? p : e);
-	}, [p]);
+function Le(e, t) {
+	let { pageSize: n, initialPage: r = 1, getId: i } = t, [a, o] = p(r), [s, c] = p(() => /* @__PURE__ */ new Set()), u = e.length, f = Math.max(1, Math.ceil(u / n));
+	l(() => {
+		o((e) => e < 1 ? 1 : e > f ? f : e);
+	}, [f]);
 	let m = a;
-	m < 1 ? m = 1 : m > p && (m = p);
-	let h = u(() => {
+	m < 1 ? m = 1 : m > f && (m = f);
+	let h = d(() => {
 		let t = (m - 1) * n, r = t + n;
 		return e.slice(t, r);
 	}, [
 		e,
 		m,
 		n
-	]), g = u(() => {
+	]), g = d(() => {
 		let t = i ?? ((e) => {
 			let t = e.id;
 			if (t == null) throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");
 			return t;
 		});
 		return new Set(e.map((e) => t(e)));
-	}, [i, e]), _ = u(() => {
+	}, [i, e]), _ = d(() => {
 		let e = i ?? ((e) => {
 			let t = e.id;
 			if (t == null) throw Error("useTablePagination: item.id is undefined. Provide a `getId` option to extract a stable key.");
@@ -488,13 +846,13 @@ function pe(e, t) {
 		page: m,
 		setPage: o,
 		pageItems: h,
-		totalItems: d,
-		totalPages: p,
+		totalItems: u,
+		totalPages: f,
 		allKeys: g,
 		selectedKeys: s,
 		onSelectionChange: (e) => {
 			let t = e === "all" ? new Set(_) : new Set(e);
-			l((e) => {
+			c((e) => {
 				let n = new Set(t);
 				for (let t of e) _.has(t) || n.add(t);
 				return n;
@@ -504,26 +862,26 @@ function pe(e, t) {
 			o(e.page);
 		},
 		clearSelection: () => {
-			l(() => /* @__PURE__ */ new Set());
+			c(() => /* @__PURE__ */ new Set());
 		}
 	};
 }
 //#endregion
 //#region src/table/index.ts
-var $ = Object.assign(F, {
-	Grid: L,
+var $ = Object.assign(D, {
+	Grid: ke,
 	Header: Z,
-	Column: J,
-	Body: z,
+	Column: X,
+	Body: K,
 	Row: Q,
-	Cell: q,
-	BulkBar: K,
-	BulkBarSelectedCount: U,
-	BulkBarClearButton: W,
-	BulkBarSelectAllButton: G
+	Cell: Y,
+	BulkBar: Pe,
+	BulkBarSelectedCount: Me,
+	BulkBarClearButton: J,
+	BulkBarSelectAllButton: Ne
 });
-$.displayName = "Table", Z.displayName = "Table.Header", J.displayName = "Table.Column", z.displayName = "Table.Body", Q.displayName = "Table.Row", q.displayName = "Table.Cell";
+$.displayName = "Table", Z.displayName = "Table.Header", X.displayName = "Table.Column", K.displayName = "Table.Body", Q.displayName = "Table.Row", Y.displayName = "Table.Cell";
 //#endregion
-export { $ as Table, $ as TableWithSubcomponents, pe as useTablePagination, fe as useTableSort };
+export { $ as Table, $ as TableWithSubcomponents, Le as useTablePagination, Ie as useTableSort };
 
 //# sourceMappingURL=index.mjs.map