@spark-ui/components 17.3.2 → 17.4.0

package/dist/table/index.mjs

@@ -5,64 +5,65 @@ import { cva as r, cx as i } from "class-variance-authority";
 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";
+import { Cell as y, TableBody as b, TableHeader as x, useTableColumnResizeState as S, useTableState as C } from "@react-stately/table";
+import { mergeProps as w, useFocusRing as T, useTable as ee, useTableCell as E, useTableColumnHeader as te, useTableHeaderRow as D, useTableRow as ne, useTableRowGroup as O } from "react-aria";
+import { useTableColumnResize as re, useTableSelectAllCheckbox as ie, useTableSelectionCheckbox as ae } from "@react-aria/table";
+import { ArrowDown as oe } from "@spark-ui/icons/ArrowDown";
+import { ArrowUp as se } from "@spark-ui/icons/ArrowUp";
+import { Sort as ce } from "@spark-ui/icons/Sort";
 //#region src/table/internal/TableContext.tsx
-var fe = o({
+var le = o({
 	isResizable: !1,
 	tableWidth: 0
 });
-function pe() {
-	return c(fe);
+function ue() {
+	return c(le);
 }
-var me = o({
+var de = o({
 	selectedCount: 0,
 	onClearSelection: () => {}
 });
-function E() {
-	return c(me);
+function k() {
+	return c(de);
 }
 //#endregion
 //#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,
+function fe({ children: e, className: t, selectedKeys: n, onSelectionChange: r, totalCount: a, hasMultiplePages: o, onClearSelection: s, onSelectAll: c, allowsResizing: l = !0, resizeColumnAriaLabel: u, maxHeight: d, stickyHeader: f, onResizeStart: p, onResize: h, onResizeEnd: g, onKeyDownCapture: _, sortDescriptor: v, onSortChange: y, ...b }) {
+	let x = 0;
+	n === "all" ? x = a ?? 0 : n instanceof Set ? x = n.size : n && (x = new Set(n).size);
+	let S = s ?? (() => r?.(/* @__PURE__ */ new Set())), C = {
+		...b,
 		selectedKeys: n,
 		onSelectionChange: r,
 		totalCount: a,
 		hasMultiplePages: o,
 		onSelectAll: c,
-		selectedCount: b,
-		onClearSelection: x,
+		selectedCount: x,
+		onClearSelection: S,
 		allowsResizing: l,
 		resizeColumnAriaLabel: u,
 		maxHeight: d,
-		onResizeStart: f,
-		onResize: p,
-		onResizeEnd: h,
-		onKeyDownCapture: g,
-		sortDescriptor: _,
-		onSortChange: v,
+		stickyHeader: f,
+		onResizeStart: p,
+		onResize: h,
+		onResizeEnd: g,
+		onKeyDownCapture: _,
+		sortDescriptor: v,
+		onSortChange: y,
 		className: t
 	};
-	return /* @__PURE__ */ m(me.Provider, {
-		value: S,
+	return /* @__PURE__ */ m(de.Provider, {
+		value: C,
 		children: /* @__PURE__ */ m("div", {
 			className: i("gap-md flex flex-col", t),
 			children: e
 		})
 	});
 }
-D.displayName = "Table";
+fe.displayName = "Table";
 //#endregion
 //#region src/table/internal/ResizableTableContainer.tsx
-function O({ className: e, children: t, ...n }) {
+function A({ className: e, children: t, ...n }) {
 	let r = f(null), [a, o] = p(0);
 	return u(() => {
 		let e = r.current;
@@ -73,7 +74,7 @@ function O({ className: e, children: t, ...n }) {
 			let e = r.current;
 			e && o(e.clientWidth);
 		}
-	}), /* @__PURE__ */ m(fe.Provider, {
+	}), /* @__PURE__ */ m(le.Provider, {
 		value: {
 			isResizable: !0,
 			tableWidth: a
@@ -87,59 +88,19 @@ function O({ className: e, children: t, ...n }) {
 		})
 	});
 }
-O.displayName = "ResizableTableContainer";
+A.displayName = "ResizableTableContainer";
 //#endregion
-//#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",
-	"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: {
-		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",
-	"border-transparent",
-	"data-focus-visible:u-outline data-focus-visible:outline-offset-2"
-], {
-	variants: {},
-	defaultVariants: {}
-});
-r(["empty:italic empty:text-center empty:text-body-2 empty:py-lg"], {
-	variants: {},
-	defaultVariants: {}
-});
-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]",
-	"data-focus-visible:u-outline-inset data-focus-visible:outline-dashed"
-], {
-	variants: { checkbox: { true: ["w-sz-64 py-sm px-0 align-middle"] } },
-	defaultVariants: { checkbox: !1 }
-}), 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\"]";
+//#region src/table/internal/table-keyboard.ts
+var 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) {
+function pe(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]";
+var me = "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);
 }
@@ -147,7 +108,7 @@ 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));
+	return Array.from(e.querySelectorAll(me)).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)) {
@@ -164,12 +125,12 @@ 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 }) {
+function he({ 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, {
+		return w(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;
@@ -224,7 +185,7 @@ function ye({ ref: e, gridProps: t, onKeyDownCapture: n, onFocusCapture: r }) {
 					return;
 				}
 				if (o.current === "interaction" && e.key === "Escape") {
-					if (_e(e.target)) return;
+					if (pe(e.target)) return;
 					let t = s.current;
 					if (!t) return;
 					e.preventDefault(), e.stopPropagation(), o.current = "grid", a("grid"), t.focus();
@@ -285,33 +246,73 @@ function ye({ ref: e, gridProps: t, onKeyDownCapture: n, onFocusCapture: r }) {
 	};
 }
 //#endregion
-//#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) {
+//#region src/table/internal/Table.styles.tsx
+var R = r([
+	"h-sz-64 min-w-sz-64",
+	"relative group/column first:rounded-l-xl last:rounded-r-xl bg-neutral-container",
+	"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: {
+		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
+	}
+}), ge = r([
+	"flex flex-1 justify-between items-center gap-md",
+	"font-inherit text-left text-inherit",
+	"whitespace-nowrap text-ellipsis",
+	"border-transparent",
+	"data-focus-visible:u-outline data-focus-visible:outline-offset-2"
+], {
+	variants: {},
+	defaultVariants: {}
+});
+r(["empty:italic empty:text-center empty:text-body-2 empty:py-lg"], {
+	variants: {},
+	defaultVariants: {}
+});
+var z = 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]",
+	"data-focus-visible:u-outline-inset data-focus-visible:outline-dashed"
+], {
+	variants: { checkbox: { true: ["w-sz-64 py-sm px-0 align-middle"] } },
+	defaultVariants: { checkbox: !1 }
+}), _e = 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: {}
+}), B = "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\"]", ve = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
+function ye(e) {
 	if (!e || !(e instanceof Element)) return !1;
 	let t = e;
-	return t.matches(R) || t.closest(R) !== null;
+	return t.matches(B) || t.closest(B) !== null;
 }
-function Se(e) {
+function be(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;
+function xe(e) {
+	for (let t of e.querySelectorAll(ve)) 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);
+function Se(e) {
+	let t = be(e);
 	if (!t) return !1;
-	if (xe(t)) return !0;
+	if (ye(t)) return !0;
 	let n = t.closest("[data-spark-component=\"table-cell\"]");
-	return !n || n.getAttribute("data-table-cell-kind") === "selection" ? !1 : Ce(n);
+	return !n || n.getAttribute("data-table-cell-kind") === "selection" ? !1 : xe(n);
 }
 //#endregion
 //#region src/table/internal/TableKeyboardModeContext.tsx
-var z = o("grid");
+var V = o("grid");
 //#endregion
 //#region src/table/internal/TableSelectionCheckbox.tsx
-function B({ checkboxProps: e, className: t, suppressFocusWalker: r }) {
+function H({ 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,
@@ -326,11 +327,11 @@ function B({ checkboxProps: e, className: t, suppressFocusWalker: r }) {
 		})
 	});
 }
-B.displayName = "Table.SelectionCheckbox";
+H.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) => {
+function Ce({ cell: e, state: t, resizeState: n }) {
+	let r = f(null), { gridCellProps: i } = E({ node: e }, t, r), { isFocusVisible: a, focusProps: o } = T(), l = c(V), u = s((e) => {
 		l === "interaction" && (e.key !== " " && e.key !== "Enter" || e.stopPropagation());
 	}, [l]), { onKeyDownCapture: d, ...p } = i, h = s((e) => {
 		[
@@ -339,63 +340,63 @@ function V({ cell: e, state: t, resizeState: n }) {
 			"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;
+	}, [d]), g = ae({ 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 }),
+		...w(p, { onKeyDownCapture: h }, o, { onKeyDown: u }),
 		ref: r,
 		"data-spark-component": "table-cell",
 		"data-table-cell-kind": "selection",
-		className: A({ checkbox: !0 }),
+		className: z({ checkbox: !0 }),
 		"data-focus-visible": a || void 0,
-		children: /* @__PURE__ */ m(B, {
+		children: /* @__PURE__ */ m(H, {
 			suppressFocusWalker: l === "grid",
 			checkboxProps: g.checkboxProps
 		})
 	}) : /* @__PURE__ */ m("td", {
-		...C(p, { onKeyDownCapture: h }, o, { onKeyDown: u }),
+		...w(p, { onKeyDownCapture: h }, o, { onKeyDown: u }),
 		ref: r,
 		"data-spark-component": "table-cell",
-		className: A(),
+		className: z(),
 		"data-focus-visible": a || void 0,
 		style: v ? { width: v } : void 0,
 		children: e.rendered
 	});
 }
-V.displayName = "Table.BodyCellRenderer";
+Ce.displayName = "Table.BodyCellRenderer";
 //#endregion
 //#region src/table/internal/TableBodyRowRenderer.tsx
-function H(e) {
+function U(e) {
 	if (e) return (t) => {
-		we(_(t.nativeEvent)) || e(t);
+		Se(_(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");
+function W({ item: e, state: t, resizeState: n }) {
+	let r = f(null), { rowProps: a, isSelected: o } = ne({ node: e }, t, r), { isFocusVisible: s, focusProps: c } = T(), { 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),
+		...w(g, c),
+		onPointerDown: U(u),
+		onMouseDown: U(d),
+		onPointerUp: U(p),
+		onPointerCancel: U(h),
+		onClick: U(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, {
+		children: [...e.childNodes].map((e) => /* @__PURE__ */ m(Ce, {
 			cell: e,
 			state: t,
 			resizeState: n
 		}, e.key))
 	});
 }
-U.displayName = "Table.BodyRowRenderer";
+W.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({
+function G({ column: e, ariaLabel: t, resizeState: n, resizeCallbacks: r }) {
+	let a = f(null), { resizerProps: o, inputProps: s, isResizing: c } = re({
 		column: e,
 		"aria-label": t ?? "Resize column",
 		onResizeStart: r.onResizeStart,
@@ -404,7 +405,7 @@ function W({ column: e, ariaLabel: t, resizeState: n, resizeCallbacks: r }) {
 	}, 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"),
+		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 after:transition-all after:duration-75", "has-[input:focus-visible]:after:u-outline has-[input:focus-visible]:after:outline-offset-2", c && "after:bg-outline-high after:scale-120"),
 		"data-resizable-direction": "both",
 		...o,
 		children: /* @__PURE__ */ m("input", {
@@ -414,14 +415,14 @@ function W({ column: e, ariaLabel: t, resizeState: n, resizeCallbacks: r }) {
 		})
 	});
 }
-W.displayName = "Table.ColumnResizer";
+G.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) => {
+function K({ state: e }) {
+	let { checkboxProps: t } = ie(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: {
+	return /* @__PURE__ */ m(H, { checkboxProps: {
 		..._,
 		isSelected: d,
 		isIndeterminate: f,
@@ -429,135 +430,138 @@ function G({ state: e }) {
 		onKeyDown: v
 	} });
 }
-G.displayName = "Table.HeaderSelectionCheckbox";
+K.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);
+var we = i("sticky top-0 z-sticky");
+function Te({ column: t, state: n, resizeState: r, stickyHeader: a, resizeCallbacks: o, isLastColumnInRow: s = !1 }) {
+	let c = f(null), { resizeColumnAriaLabel: l } = k(), { columnHeaderProps: u } = te({ node: t }, n, c), { isFocusVisible: d, focusProps: p } = T(), g = t.props?.allowsResizing !== !1 && !s, _ = r?.columnWidths?.get?.(t.key), v = !!(r && g);
 	if (t.props?.isSelectionCell) return /* @__PURE__ */ m("th", {
-		...l,
-		ref: s,
+		...u,
+		ref: c,
 		role: "columnheader",
-		className: k({ checkbox: !0 }),
+		className: i(R({ checkbox: !0 }), a && we),
 		"data-spark-component": "table-column",
 		"data-table-selection-columnheader": !0,
-		"data-focus-visible": u || void 0,
-		children: /* @__PURE__ */ m(G, { state: n })
+		"data-focus-visible": d || void 0,
+		children: /* @__PURE__ */ m(K, { 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)));
+	let y = !!t.props?.allowsSorting, b = n.sortDescriptor?.column === t.key, x = n.sortDescriptor?.direction ?? "ascending", S = m(b ? x === "descending" ? oe : se : ce, {}), C = (e) => {
+		y && (e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.stopPropagation(), n.sort?.(t.key)));
 	};
 	return /* @__PURE__ */ h("th", {
-		...C(l, d),
-		ref: s,
+		...w(u, p),
+		ref: c,
 		role: "columnheader",
-		className: i(k({ resizable: _ })),
-		style: g ? { width: g } : void 0,
+		className: i(R({ resizable: v }), a && we),
+		style: _ ? { width: _ } : void 0,
 		"data-spark-component": "table-column",
-		"data-focus-visible": u || void 0,
-		onKeyDown: S,
+		"data-focus-visible": d || void 0,
+		onKeyDown: C,
 		children: [/* @__PURE__ */ h("div", {
-			className: he(),
+			className: ge(),
 			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,
+				onKeyDown: C,
 				children: /* @__PURE__ */ m("span", {
 					className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
 					children: t.rendered
 				})
-			}), v ? /* @__PURE__ */ m("span", {
+			}), y ? /* @__PURE__ */ m("span", {
 				"aria-hidden": "true",
-				className: i("shrink-0 opacity-dim-2 group-hover/column:opacity-100", y && "opacity-100"),
+				className: i("shrink-0 opacity-dim-2 group-hover/column:opacity-100", b && "opacity-100"),
 				children: /* @__PURE__ */ m(e, {
 					size: "sm",
-					children: x
+					children: S
 				})
 			}) : null]
-		}), r && p ? /* @__PURE__ */ m(W, {
+		}), r && g ? /* @__PURE__ */ m(G, {
 			column: t,
-			ariaLabel: typeof c == "function" ? c(t) : c,
+			ariaLabel: typeof l == "function" ? l(t) : l,
 			resizeState: r,
-			resizeCallbacks: a
+			resizeCallbacks: o
 		}) : 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];
+function Ee({ item: e, state: t, resizeState: n, stickyHeader: r, resizeCallbacks: i }) {
+	let a = f(null), { rowProps: o } = D({ node: e }, t, a), s = [...e.childNodes];
 	return /* @__PURE__ */ m("tr", {
-		...a,
-		ref: i,
-		children: o.map((e, i) => /* @__PURE__ */ m(Te, {
+		...o,
+		ref: a,
+		children: s.map((e, a) => /* @__PURE__ */ m(Te, {
 			column: e,
 			state: t,
 			resizeState: n,
-			resizeCallbacks: r,
-			isLastColumnInRow: i === o.length - 1
+			stickyHeader: r,
+			resizeCallbacks: i,
+			isLastColumnInRow: a === s.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",
+function De({ className: e, children: t, stickyHeader: n, ...r }) {
+	let a = !!n, o = f(null), s = ue(), c = r.selectionMode === "multiple", l = C({
+		...r,
+		showSelectionCheckboxes: r.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
+	}), u = S({ tableWidth: s.tableWidth }, l), d = s.isResizable && r.allowsResizing !== !1 ? u : null, { gridProps: p } = ee({ ...r }, l, o), _ = l.collection.headerRows, v = [...l.collection.body.childNodes], y = l.collection.body.props?.renderEmptyState, b = l.collection.columns.length || 1, x = v.length > 0 || !!y, { rowGroupProps: T } = O(), { rowGroupProps: E } = O(), { gridProps: te, keyboardMode: D } = he({
+		ref: o,
+		gridProps: p,
+		onKeyDownCapture: r.onKeyDownCapture,
+		onFocusCapture: r.onFocusCapture
 	});
-	return /* @__PURE__ */ m(z.Provider, {
-		value: T,
+	return /* @__PURE__ */ m(V.Provider, {
+		value: D,
 		children: /* @__PURE__ */ h("table", {
-			...C(w, g(n, { global: !0 })),
-			ref: r,
+			...w(te, g(r, { global: !0 })),
+			ref: o,
 			"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),
+			className: i("default:w-full", c ? "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,
+				...T,
 				"data-spark-component": "table-header",
-				children: d.map((e) => /* @__PURE__ */ m(Ee, {
+				children: _.map((e) => /* @__PURE__ */ m(Ee, {
 					item: e,
-					state: s,
-					resizeState: l,
+					state: l,
+					resizeState: d,
+					stickyHeader: a,
 					resizeCallbacks: {
-						onResizeStart: n.onResizeStart,
-						onResize: n.onResize,
-						onResizeEnd: n.onResizeEnd
+						onResizeStart: r.onResizeStart,
+						onResize: r.onResize,
+						onResizeEnd: r.onResizeEnd
 					}
 				}, e.key))
 			}), /* @__PURE__ */ h("tbody", {
-				...x,
+				...E,
 				"data-spark-component": "table-body",
 				children: [
-					y ? /* @__PURE__ */ m("tr", {
+					x ? /* @__PURE__ */ m("tr", {
 						"aria-hidden": "true",
-						className: ge(),
+						className: _e(),
 						role: "presentation",
 						"data-spark-component": "table-body-spacer",
 						children: /* @__PURE__ */ m("td", {
-							colSpan: v,
+							colSpan: b,
 							role: "presentation"
 						})
 					}) : null,
-					p.length === 0 && _ ? /* @__PURE__ */ m("tr", {
+					v.length === 0 && y ? /* @__PURE__ */ m("tr", {
 						"data-empty": !0,
 						children: /* @__PURE__ */ m("td", {
-							colSpan: v,
-							children: _({ isEmpty: !0 })
+							colSpan: b,
+							children: y({ isEmpty: !0 })
 						})
 					}) : null,
-					p.map((e) => /* @__PURE__ */ m(U, {
+					v.map((e) => /* @__PURE__ */ m(W, {
 						item: e,
-						state: s,
-						resizeState: l
+						state: l,
+						resizeState: d
 					}, e.key))
 				]
 			})]
@@ -571,30 +575,31 @@ 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,
+	let { allowsResizing: i = !0, maxHeight: a, stickyHeader: o, onResizeStart: s, onResize: c, onResizeEnd: l, onKeyDownCapture: u, sortDescriptor: d, onSortChange: f, className: p, ...h } = k(), g = a == null ? void 0 : { maxHeight: Oe(a) }, _ = n ?? p, v = {
+		...h,
 		...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, {
-			..._,
+		sortDescriptor: d,
+		onSortChange: f,
+		onKeyDownCapture: u,
+		className: _,
+		stickyHeader: o
+	}, y = De;
+	return i ? /* @__PURE__ */ m(A, {
+		className: _,
+		style: g,
+		onResizeStart: s,
+		onResize: c,
+		onResizeEnd: l,
+		children: /* @__PURE__ */ m(y, {
+			...v,
 			children: r
 		})
 	}) : /* @__PURE__ */ m("div", {
 		className: "relative w-full overflow-auto",
-		style: h,
-		children: /* @__PURE__ */ m(v, {
-			..._,
+		style: g,
+		children: /* @__PURE__ */ m(y, {
+			...v,
 			children: r
 		})
 	});
@@ -602,20 +607,20 @@ function ke({ "aria-label": e, "aria-labelledby": t, className: n, children: r }
 ke.displayName = "Table.Grid";
 //#endregion
 //#region src/table/TableBody.tsx
-function K(e) {
+function q(e) {
 	return /* @__PURE__ */ m(b, { ...e });
 }
-K.displayName = "Table.Body", K.getCollectionNode = b.getCollectionNode;
+q.displayName = "Table.Body", q.getCollectionNode = b.getCollectionNode;
 //#endregion
 //#region src/table/TableBulkBar.tsx
 var Ae = o(null);
-function q() {
+function J() {
 	let e = c(Ae);
 	if (!e) throw Error("Table.BulkBar subcomponents must be used within Table.BulkBar");
 	return e;
 }
 function je({ children: e, className: t, rootProps: n, ...r }) {
-	let { selectedCount: a, totalCount: o, onClearSelection: s, onSelectAll: c, hasMultiplePages: l } = E(), u = {
+	let { selectedCount: a, totalCount: o, onClearSelection: s, onSelectAll: c, hasMultiplePages: l } = k(), u = {
 		selectedCount: a,
 		totalCount: o,
 		onClearSelection: s,
@@ -635,13 +640,13 @@ function je({ children: e, className: t, rootProps: n, ...r }) {
 	});
 }
 function Me({ children: e }) {
-	return q(), /* @__PURE__ */ m("span", {
+	return J(), /* @__PURE__ */ m("span", {
 		className: "text-body-1 font-bold",
 		children: e
 	});
 }
-function J({ className: e, children: n, ...r }) {
-	let { selectedCount: a, onClearSelection: o, hasMultiplePages: s } = q();
+function Ne({ className: e, children: n, ...r }) {
+	let { selectedCount: a, onClearSelection: o, hasMultiplePages: s } = J();
 	return s ? /* @__PURE__ */ m(t, {
 		size: "sm",
 		design: "ghost",
@@ -654,8 +659,8 @@ function J({ className: e, children: n, ...r }) {
 		children: n
 	}) : null;
 }
-function Ne({ className: e, children: n, ...r }) {
-	let { selectedCount: a, totalCount: o, onSelectAll: s, hasMultiplePages: c } = q();
+function Pe({ className: e, children: n, ...r }) {
+	let { selectedCount: a, totalCount: o, onSelectAll: s, hasMultiplePages: c } = J();
 	return c ? /* @__PURE__ */ m(t, {
 		size: "sm",
 		design: "ghost",
@@ -669,8 +674,8 @@ function Ne({ className: e, children: n, ...r }) {
 	}) : null;
 }
 je.displayName = "Table.BulkBar";
-var Pe = je;
-Pe.displayName = "Table.BulkBar", Me.displayName = "Table.BulkBarSelectedCount", J.displayName = "Table.BulkBarClearButton", Ne.displayName = "Table.BulkBarSelectAllButton";
+var Fe = je;
+Fe.displayName = "Table.BulkBar", Me.displayName = "Table.BulkBarSelectedCount", Ne.displayName = "Table.BulkBarClearButton", Pe.displayName = "Table.BulkBarSelectAllButton";
 //#endregion
 //#region src/table/TableCell.tsx
 function Y(e) {
@@ -780,13 +785,13 @@ Q.displayName = "Table.Row", Q.getCollectionNode = function* (e, t) {
 };
 //#endregion
 //#region src/table/useTableSort.ts
-function Fe(e, t, n, r) {
+function Ie(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 Ie(e, t = {}) {
+function Le(e, t = {}) {
 	let { initialSort: n, compare: r } = t, [i, a] = p(() => n ? {
 		column: n.column,
 		direction: n.direction
@@ -801,7 +806,7 @@ function Ie(e, t = {}) {
 		sortedItems: d(() => {
 			let t = i.column;
 			if (!t) return [...e];
-			let n = r ?? Fe, a = i.direction ?? "ascending";
+			let n = r ?? Ie, a = i.direction ?? "ascending";
 			return [...e].sort((e, r) => n(e, r, t, a));
 		}, [
 			e,
@@ -813,7 +818,7 @@ function Ie(e, t = {}) {
 }
 //#endregion
 //#region src/table/useTablePagination.ts
-function Le(e, t) {
+function Re(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);
@@ -868,20 +873,20 @@ function Le(e, t) {
 }
 //#endregion
 //#region src/table/index.ts
-var $ = Object.assign(D, {
+var $ = Object.assign(fe, {
 	Grid: ke,
 	Header: Z,
 	Column: X,
-	Body: K,
+	Body: q,
 	Row: Q,
 	Cell: Y,
-	BulkBar: Pe,
+	BulkBar: Fe,
 	BulkBarSelectedCount: Me,
-	BulkBarClearButton: J,
-	BulkBarSelectAllButton: Ne
+	BulkBarClearButton: Ne,
+	BulkBarSelectAllButton: Pe
 });
-$.displayName = "Table", Z.displayName = "Table.Header", X.displayName = "Table.Column", K.displayName = "Table.Body", Q.displayName = "Table.Row", Y.displayName = "Table.Cell";
+$.displayName = "Table", Z.displayName = "Table.Header", X.displayName = "Table.Column", q.displayName = "Table.Body", Q.displayName = "Table.Row", Y.displayName = "Table.Cell";
 //#endregion
-export { $ as Table, $ as TableWithSubcomponents, Le as useTablePagination, Ie as useTableSort };
+export { $ as Table, $ as TableWithSubcomponents, Re as useTablePagination, Le as useTableSort };
 
 //# sourceMappingURL=index.mjs.map