@logicplanes/kaeso-ui 0.2.1 → 0.3.0

package/dist/components/data-table.js

@@ -1,306 +1,364 @@
 "use client";
-import { t as e } from "../chunks/cn-CidVUKMm.js";
-import { n as t } from "../chunks/inset-BLMdxX4I.js";
-import { i as n } from "../chunks/context-BELWW79w.js";
-import { formatDate as r, formatDuration as i, formatNumber as a, formatRelative as o, formatTokens as s, formatUSD as c } from "../format.js";
-import { t as ee } from "../chunks/icon-CeNQtobn.js";
-import { r as l } from "../chunks/tooltip-DEbCCsru.js";
+import { t as e } from "../chunks/cn-DUDmdLpZ.js";
+import { i as t, r as n } from "../chunks/inset-BnBj8NJV.js";
+import { i as r } from "../chunks/context-BELWW79w.js";
+import { formatDate as i, formatDuration as a, formatNumber as o, formatRelative as s, formatTokens as c, formatUSD as l } from "../format.js";
+import { t as ee } from "../chunks/icon-BqujXDUc.js";
+import { r as u } from "../chunks/tooltip-S1DmyLVl.js";
 import { t as te } from "../chunks/observe-resize-DhxhmoyB.js";
-import { r as ne } from "../chunks/text--5MKh2G4.js";
-import { n as re } from "../chunks/button-DQvoOxVQ.js";
-import { n as u } from "../chunks/checkbox-BgRdbfCE.js";
-import { t as d } from "../chunks/menu-DyVPwgfF.js";
-import { r as ie } from "../chunks/skeleton-kfuqdl1a.js";
-import { r as ae } from "../chunks/pagination-CCMxQ5pH.js";
-import { t as oe } from "../chunks/empty-DIbBpytW.js";
-import { i as f } from "../chunks/status-dot-CBoQpyL4.js";
-import { t as p } from "../chunks/avatar-D2nJNbtC.js";
+import { r as ne } from "../chunks/text-Dvvgg5Jt.js";
+import { n as re } from "../chunks/button-CAPyW-v8.js";
+import { n as d } from "../chunks/checkbox-C5yvSS7O.js";
+import { t as f } from "../chunks/menu-Bnfi9P3t.js";
+import { r as ie } from "../chunks/skeleton-BM797MAg.js";
+import { r as ae } from "../chunks/pagination-CEmWZNjp.js";
+import { t as p } from "../chunks/empty-YXmSkKzR.js";
+import { i as m } from "../chunks/status-dot-BqVOlShY.js";
+import { t as oe } from "../chunks/avatar-DOzOhYJr.js";
 import { t as se } from "../chunks/scroll-parent-WXvzQcUo.js";
 import { t as ce } from "../chunks/tone-CWpsHPb6.js";
 import { t as le } from "../chunks/use-scroll-margin-DfdTc_5D.js";
-import { forwardRef as m, useLayoutEffect as h, useMemo as g, useRef as _, useState as v } from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { forwardRef as h, useLayoutEffect as g, useMemo as _, useRef as v, useState as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
 import { ArrowDown01Icon as ue, ArrowUp01Icon as de } from "@hugeicons/core-free-icons";
-import { flexRender as x, getCoreRowModel as fe, getSortedRowModel as pe, useReactTable as me } from "@tanstack/react-table";
-import { useVirtualizer as he } from "@tanstack/react-virtual";
+import { useVirtualizer as fe } from "@tanstack/react-virtual";
+import { flexRender as S, getCoreRowModel as pe, getSortedRowModel as me, useReactTable as he } from "@tanstack/react-table";
 //#region src/components/data-table/data-table.tsx
-var S = { density: {
+var C = { density: {
 	compact: { classes: "h-36" },
 	default: { classes: "h-40" },
 	comfortable: { classes: "h-48" }
-} }, C = { density: "default" }, ge = {
+} }, ge = { density: "default" }, _e = {
 	compact: 36,
 	default: 40,
 	comfortable: 48
-}, w = 136;
-function T(e, t) {
+}, ve = 136;
+function ye(e, t, n = 48) {
 	if (!t) return {
 		hidden: [],
 		tight: !1,
 		overflow: !1
 	};
-	let n = [...e].sort((e, t) => e.priority - t.priority), r = 48, i = /* @__PURE__ */ new Set();
-	for (let e of n) r += e.size, (r <= t || e.priority <= 1 || e.fixed) && i.add(e.id);
-	let a = e.filter((e) => i.has(e.id)), o = a.reduce((e, t) => e + t.size, 48), s = a.reduce((e, t) => e + (t.grow ? E(t) : t.size), 0);
-	if (s > t && a.some((e) => e.grow)) {
-		let e = a[a.length - 1];
-		for (let n of [...a].reverse()) {
-			if (s <= t) break;
-			n.grow || n.fixed || n === e || (i.delete(n.id), s -= n.size);
+	let r = [...e].sort((e, t) => e.priority - t.priority), i = n, a = /* @__PURE__ */ new Set();
+	for (let e of r) i += e.size, (i <= t || e.priority <= 1 || e.fixed) && a.add(e.id);
+	let o = e.filter((e) => a.has(e.id)), s = o.reduce((e, t) => e + t.size, n), c = o.reduce((e, t) => e + (t.grow ? w(t) : t.size), 0);
+	if (c > t && o.some((e) => e.grow)) {
+		let e = o[o.length - 1];
+		for (let n of [...o].reverse()) {
+			if (c <= t) break;
+			n.grow || n.fixed || n === e || (a.delete(n.id), c -= n.size);
 		}
 	}
 	return {
-		hidden: e.filter((e) => !i.has(e.id)).map((e) => e.id),
-		tight: o > t,
-		overflow: s > t
+		hidden: e.filter((e) => !a.has(e.id)).map((e) => e.id),
+		tight: s > t,
+		overflow: c > t
 	};
 }
-var E = (e) => Math.min(e.size, e.minWidth ?? 136);
-function D({ data: r, columns: i, getRowId: a, density: o = "default", onRowClick: s, rowMenu: c, selectable: l, selection: f, onSelectionChange: p, sorting: m, onSortingChange: C, manualSorting: w, loading: D, error: O, onRetry: k, empty: A, hasMore: j, loadingMore: M, onLoadMore: N, stickyFirstColumn: _e, virtualizeAbove: ve = 100, className: ye, activeRowId: be, freshRowIds: xe, "aria-label": Se }, P) {
-	let F = t(), I = n(), [Ce, we] = v([]), [Te, Ee] = v({}), L = m ?? Ce, R = f ?? Te, De = g(() => l ? [{
+function be(e) {
+	let t = getComputedStyle(e);
+	return e.getBoundingClientRect().width - (parseFloat(t.paddingLeft) || 0) - (parseFloat(t.paddingRight) || 0);
+}
+function xe(e, t) {
+	if (!e?.id) return;
+	let n = e.meta?.text?.(t.original);
+	if (n) return n;
+	let r = t.getValue(e.id);
+	return typeof r == "string" && r ? r : void 0;
+}
+var w = (e) => Math.min(e.size, e.minWidth ?? 136);
+function T({ data: i, columns: a, getRowId: o, density: s = "default", onRowClick: c, rowMenu: l, selectable: u, selection: m, onSelectionChange: oe, sorting: h, onSortingChange: ge, manualSorting: ve, loading: T, error: E, onRetry: D, empty: O, hasMore: k, loadingMore: A, onLoadMore: j, stickyFirstColumn: Se, virtualizeAbove: Ce = 100, className: we, activeRowId: Te, freshRowIds: Ee, onHiddenColumnsChange: M, "aria-label": De }, N) {
+	let P = t(), Oe = n(), F = r(), [ke, Ae] = y([]), [je, Me] = y({}), [I, L] = y(0), R = h ?? ke, Ne = m ?? je, Pe = _(() => u ? [{
 		id: "__select",
 		size: 44,
 		enableSorting: !1,
 		enableResizing: !1,
 		meta: { priority: 1 },
-		header: ({ table: e }) => /* @__PURE__ */ y(u, {
-			"aria-label": I("dataTable.selectAllRows", "Select all rows"),
+		header: ({ table: e }) => /* @__PURE__ */ b(d, {
+			"aria-label": F("dataTable.selectAllRows", "Select all rows"),
 			checked: e.getIsAllRowsSelected(),
 			indeterminate: e.getIsSomeRowsSelected(),
 			onCheckedChange: (t) => e.toggleAllRowsSelected(t)
 		}),
-		cell: ({ row: e }) => /* @__PURE__ */ y(u, {
-			"aria-label": I("dataTable.selectRow", "Select row"),
-			checked: e.getIsSelected(),
-			onCheckedChange: (t) => e.toggleSelected(t)
-		})
-	}, ...i] : i, [
-		i,
-		l,
-		I
-	]), z = me({
-		data: r,
-		columns: De,
+		cell: ({ row: e }) => {
+			let t = xe(a[0], e);
+			return /* @__PURE__ */ b(d, {
+				"aria-label": t ? F("dataTable.selectNamed", "Select {name}", { name: t }) : F("dataTable.selectRow", "Select row"),
+				checked: e.getIsSelected(),
+				onCheckedChange: (t) => e.toggleSelected(t)
+			});
+		}
+	}, ...a] : a, [
+		a,
+		u,
+		F
+	]), z = he({
+		data: i,
+		columns: Pe,
 		state: {
-			sorting: L,
-			rowSelection: R
+			sorting: R,
+			rowSelection: Ne
 		},
 		onSortingChange: (e) => {
-			let t = typeof e == "function" ? e(L) : e;
-			m || we(t), C?.(t);
+			let t = typeof e == "function" ? e(R) : e;
+			h || Ae(t), ge?.(t);
 		},
 		onRowSelectionChange: (e) => {
-			let t = typeof e == "function" ? e(R) : e;
-			f || Ee(t), p?.(t);
+			let t = typeof e == "function" ? e(Ne) : e;
+			m || Me(t), oe?.(t);
 		},
-		getCoreRowModel: fe(),
-		getSortedRowModel: pe(),
-		manualSorting: !!w,
-		enableRowSelection: !!l,
+		getCoreRowModel: pe(),
+		getSortedRowModel: me(),
+		manualSorting: !!ve,
+		enableRowSelection: !!u,
 		columnResizeMode: "onChange",
-		...a ? { getRowId: (e) => a(e) } : {},
+		...o ? { getRowId: (e) => o(e) } : {},
 		defaultColumn: {
 			size: 140,
 			minSize: 64,
 			maxSize: 640
 		}
-	}), B = _(null), V = _(null), H = _(null), U = z.getVisibleLeafColumns(), W = U.map((e) => ({
+	}), B = v(null), V = v(null), H = v(null), Fe = z.getVisibleLeafColumns(), Ie = Fe.map((e) => ({
 		id: e.id,
 		size: e.getSize(),
 		priority: e.columnDef.meta?.priority ?? 2,
 		grow: !!e.columnDef.meta?.grow,
 		minWidth: e.columnDef.meta?.minWidth,
 		fixed: e.id === "__select"
-	})), Oe = JSON.stringify(W), G = (e) => {
-		let t = T(W, e);
+	})), Le = JSON.stringify(Ie), Re = (e) => {
+		let t = ye(Ie, e, P ? 48 : 0);
 		return `${t.tight ? "!" : ""}${t.overflow ? ">" : ""}|${t.hidden.join(" ")}`;
-	}, K = _(G);
-	K.current = G;
-	let [ke, q] = v("|");
-	h(() => {
+	}, U = v(Re);
+	U.current = Re;
+	let [ze, Be] = y("|");
+	g(() => {
 		let e = B.current;
-		if (e) return te([e], ([e]) => q(K.current(Math.round(e?.contentRect.width ?? 0))));
-	}, []), h(() => {
-		B.current && q(K.current(Math.round(B.current.getBoundingClientRect().width)));
-	}, [Oe]);
-	let [Ae = "", je = ""] = ke.split("|"), Me = Ae.includes("!"), Ne = Ae.includes(">"), J = g(() => new Set(je.split(" ").filter(Boolean)), [je]), Y = U.filter((e) => !J.has(e.id)), Pe = (e) => e.columnDef.meta?.grow && Me ? E({
+		if (e) return te([e], ([e]) => Be(U.current(Math.round(e?.contentRect.width ?? 0))));
+	}, []), g(() => {
+		B.current && Be(U.current(Math.round(be(B.current))));
+	}, [Le]);
+	let [Ve = "", He = ""] = ze.split("|"), Ue = Ve.includes("!"), We = Ve.includes(">"), W = _(() => new Set(He.split(" ").filter(Boolean)), [He]), Ge = v(M);
+	Ge.current = M, g(() => {
+		Ge.current?.([...W]);
+	}, [W]);
+	let G = Fe.filter((e) => !W.has(e.id)), Ke = (e) => e.columnDef.meta?.grow && Ue ? w({
 		size: e.getSize(),
 		minWidth: e.columnDef.meta.minWidth
-	}) : e.getSize(), X = {
-		gridTemplateColumns: Y.map((e) => e.columnDef.meta?.grow ? `minmax(${Pe(e)}px, 1fr)` : `${e.getSize()}px`).join(" "),
-		minWidth: Y.reduce((e, t) => e + Pe(t), 0)
-	}, Fe = Ne && Y.length > 1 && !Y[Y.length - 1]?.columnDef.meta?.grow, Z = z.getRowModel().rows, Ie = Z.length > ve, Le = () => se(B.current), Re = le(H, Le, Z.length), ze = he({
-		count: Z.length,
-		getScrollElement: Le,
-		estimateSize: () => ge[o],
+	}) : e.getSize(), K = {
+		gridTemplateColumns: G.map((e) => e.columnDef.meta?.grow ? `minmax(${Ke(e)}px, 1fr)` : `${e.getSize()}px`).join(" "),
+		minWidth: G.reduce((e, t) => e + Ke(t), 0)
+	}, qe = We && G.length > 1 && !G[G.length - 1]?.columnDef.meta?.grow, q = z.getRowModel().rows, J = q.length > Ce, Y = () => se(B.current), Je = le(H, Y, q.length), X = fe({
+		count: q.length,
+		getScrollElement: Y,
+		estimateSize: () => _e[s],
 		overscan: 16,
-		enabled: Ie,
-		scrollMargin: Re
-	}), Q = (t) => e("flex min-w-0 items-center px-12", t === 0 && (F ? "pl-16" : "pl-24"), t === Y.length - 1 && (F ? "pr-16" : "pr-24")), $ = (t) => (_e && t === 0 || Fe && t === Y.length - 1) && e("sticky z-10 group-hover/tr:bg-fill-1 group-aria-selected/tr:bg-fill-2 group-data-active/tr:bg-fill-2", t === 0 ? "left-0" : "right-0", F ? "bg-raised" : "bg-panel"), Be = (t, n) => {
-		let r = t.getVisibleCells().filter((e) => !J.has(e.column.id)), i = /* @__PURE__ */ y("div", {
+		enabled: J,
+		scrollMargin: Je
+	}), Z = (t) => e("flex min-w-0 items-center px-12", P && t === 0 && "pl-20", P && t === G.length - 1 && "pr-20"), Q = (t) => (Se && t === 0 || qe && t === G.length - 1) && e("sticky z-10 group-hover/tr:bg-fill-1 group-aria-selected/tr:bg-fill-2 group-data-active/tr:bg-fill-2", t === 0 ? "left-0" : "right-0", P ? "bg-raised" : e("bg-panel", t === 0 ? "rounded-l-item" : "rounded-r-item")), Ye = !!c || !!u, Xe = Math.min(I, Math.max(q.length - 1, 0)), Ze = (e) => {
+		let t = Math.max(0, Math.min(q.length - 1, e));
+		L(t), J && X.scrollToIndex(t, { align: "auto" });
+		let n = () => H.current?.querySelector(`[data-row-index="${t}"]`), r = n();
+		r ? r.focus() : requestAnimationFrame(() => n()?.focus());
+	}, Qe = () => Math.max(1, Math.floor((Y()?.clientHeight ?? 400) / _e[s]) - 1), $e = (e, t, n) => {
+		if (e.target !== e.currentTarget || e.altKey || e.metaKey || e.ctrlKey) return;
+		let r = {
+			ArrowDown: n + 1,
+			ArrowUp: n - 1,
+			Home: 0,
+			End: q.length - 1,
+			PageDown: n + Qe(),
+			PageUp: n - Qe()
+		}[e.key];
+		r === void 0 ? e.key === "Enter" ? (e.preventDefault(), c?.(t.original)) : e.key === " " && u && (e.preventDefault(), t.toggleSelected()) : (e.preventDefault(), Ze(r));
+	}, $ = (t, n, r) => {
+		let i = t.getVisibleCells().filter((e) => !W.has(e.column.id)), a = /* @__PURE__ */ b("div", {
 			role: "row",
-			"aria-selected": l ? t.getIsSelected() : void 0,
-			"data-active": t.id === be || void 0,
-			"data-fresh": xe?.has(t.id) || void 0,
-			tabIndex: s ? 0 : void 0,
-			onClick: (e) => {
-				e.target.closest("button, a, [role=checkbox]") || s?.(t.original);
+			"aria-rowindex": n + 2,
+			"aria-selected": u ? t.getIsSelected() : void 0,
+			"data-active": t.id === Te || void 0,
+			"data-fresh": Ee?.has(t.id) || void 0,
+			"data-row-index": n,
+			tabIndex: Ye ? n === Xe ? 0 : -1 : void 0,
+			onFocus: (e) => {
+				e.target === e.currentTarget && n !== I && L(n);
 			},
-			onKeyDown: (e) => {
-				e.key === "Enter" && e.target === e.currentTarget && s?.(t.original);
+			onClick: (e) => {
+				e.target.closest("button, a, [role=checkbox]") || c?.(t.original);
 			},
+			onKeyDown: (e) => $e(e, t, n),
 			style: {
-				...X,
-				...n
+				...K,
+				...r
 			},
-			className: e("group/tr grid w-full text-body text-fg transition-control focus-ring-inset", S.density[o].classes, s && "cursor-pointer", "hover:bg-fill-1 aria-selected:bg-fill-2 data-active:bg-fill-2 data-fresh:animate-row-fresh", "hover:controls-on-fill aria-selected:controls-on-fill data-active:controls-on-fill"),
-			children: r.map((n, r) => {
-				let i = n.column.columnDef.meta, a = x(n.column.columnDef.cell, n.getContext()), o = n.getValue(), s = i?.text ? i.text(t.original) : typeof o == "string" ? o : void 0, c = i?.tone?.(t.original);
-				return /* @__PURE__ */ y("div", {
+			className: e("group/tr grid w-full text-body text-fg transition-control focus-ring-inset", !P && "rounded-item", C.density[s].classes, c && "cursor-pointer", "hover:bg-fill-1 aria-selected:bg-fill-2 data-active:bg-fill-2 data-fresh:animate-row-fresh", "hover:controls-on-fill aria-selected:controls-on-fill data-active:controls-on-fill"),
+			children: i.map((n, r) => {
+				let i = n.column.columnDef.meta, a = S(n.column.columnDef.cell, n.getContext()), o = n.getValue(), s = i?.text ? i.text(t.original) : typeof o == "string" ? o : void 0, c = i?.tone?.(t.original);
+				return /* @__PURE__ */ b("div", {
 					role: "cell",
-					className: e(Q(r), i?.align === "end" && "justify-end text-right tabular", i?.mono && "mono text-small", c && ce[c], $(r)),
-					children: s !== void 0 && typeof a != "object" ? /* @__PURE__ */ y(ne, {
+					className: e(Z(r), i?.align === "end" && "justify-end text-right tabular", i?.mono && "mono text-small", c && ce[c], Q(r)),
+					children: s !== void 0 && typeof a != "object" ? /* @__PURE__ */ b(ne, {
 						truncate: !0,
 						tone: c ?? "default",
 						className: e("min-w-0", i?.mono && "text-small"),
 						mono: !!i?.mono,
 						children: s
-					}) : /* @__PURE__ */ y("span", {
-						className: "min-w-0 truncate cell-fit",
+					}) : /* @__PURE__ */ b("span", {
+						className: e("min-w-0 truncate cell-fit", i?.grow && "flex-1"),
 						children: a
 					})
 				}, n.id);
 			})
 		});
-		return c ? /* @__PURE__ */ b(d, { children: [/* @__PURE__ */ y(d.Trigger, { children: i }), /* @__PURE__ */ y(d.Content, { children: c(t.original) })] }, t.id) : /* @__PURE__ */ y("div", { children: i }, t.id);
+		return l ? /* @__PURE__ */ x(f, { children: [/* @__PURE__ */ b(f.Trigger, { children: a }), /* @__PURE__ */ b(f.Content, { children: l(t.original) })] }, t.id) : /* @__PURE__ */ b("div", { children: a }, t.id);
 	};
-	return /* @__PURE__ */ b("div", {
+	return /* @__PURE__ */ x("div", {
 		ref: (e) => {
-			B.current = e, typeof P == "function" ? P(e) : P && (P.current = e);
+			B.current = e, typeof N == "function" ? N(e) : N && (N.current = e);
 		},
-		className: e("relative w-full min-w-0", ye),
-		children: [/* @__PURE__ */ b("div", {
+		className: e("relative w-full min-w-0", !P && !Oe && "px-24", we),
+		children: [/* @__PURE__ */ x("div", {
 			role: "table",
-			"aria-label": Se,
-			"aria-rowcount": Z.length + 1,
-			"aria-busy": D || void 0,
-			className: e("w-full overflow-clip", F && "rounded-group bg-raised shadow-xs"),
-			children: [/* @__PURE__ */ y("div", {
+			"aria-label": De,
+			"aria-rowcount": q.length + 1,
+			"aria-busy": T || void 0,
+			className: e("w-full overflow-clip", P && "rounded-group bg-raised shadow-xs"),
+			children: [/* @__PURE__ */ b("div", {
 				ref: V,
 				role: "rowgroup",
-				className: e("sticky top-0 z-20 overflow-hidden", F ? "bg-raised" : "bg-panel"),
+				className: e("sticky top-0 z-20 overflow-hidden", P ? "bg-raised" : "bg-panel"),
 				onScroll: (e) => {
 					H.current && H.current.scrollLeft !== e.currentTarget.scrollLeft && (H.current.scrollLeft = e.currentTarget.scrollLeft);
 				},
-				children: z.getHeaderGroups().map((t) => /* @__PURE__ */ y("div", {
+				children: z.getHeaderGroups().map((t) => /* @__PURE__ */ b("div", {
 					role: "row",
+					"aria-rowindex": 1,
 					className: "grid h-36 hairline-b-strong",
-					style: X,
-					children: t.headers.filter((e) => !J.has(e.column.id)).map((t, n) => {
+					style: K,
+					children: t.headers.filter((e) => !W.has(e.column.id)).map((t, n) => {
 						let r = t.column.columnDef.meta, i = t.column.getCanSort(), a = t.column.getIsSorted();
-						return /* @__PURE__ */ b("div", {
+						return /* @__PURE__ */ x("div", {
 							role: "columnheader",
 							"aria-sort": a === "asc" ? "ascending" : a === "desc" ? "descending" : i ? "none" : void 0,
-							className: e("group/th relative", Q(n), r?.align === "end" && "justify-end", $(n), $(n) && "hairline-b-strong"),
-							children: [i ? /* @__PURE__ */ b("button", {
+							className: e("group/th relative", Z(n), r?.align === "end" && "justify-end", Q(n), Q(n) && "hairline-b-strong"),
+							children: [i ? /* @__PURE__ */ x("button", {
 								type: "button",
 								onClick: t.column.getToggleSortingHandler(),
 								className: e("relative -mx-6 inline-flex h-28 min-w-0 cursor-pointer items-center gap-4 rounded-pill px-6 text-caption font-medium transition-control hover:bg-fill-1 hover:text-fg focus-ring tap-target", a ? "text-fg" : "text-fg-secondary", r?.align === "end" && "flex-row-reverse"),
-								children: [/* @__PURE__ */ y("span", {
+								children: [/* @__PURE__ */ b("span", {
 									className: "truncate",
-									children: x(t.column.columnDef.header, t.getContext())
-								}), /* @__PURE__ */ y(ee, {
+									children: S(t.column.columnDef.header, t.getContext())
+								}), /* @__PURE__ */ b(ee, {
 									icon: a === "desc" ? ue : de,
 									size: "xs",
 									className: e("shrink-0 transition-control", a ? "opacity-100" : "opacity-0 group-hover/th:opacity-60")
 								})]
-							}) : /* @__PURE__ */ y("span", {
+							}) : /* @__PURE__ */ b("span", {
 								className: "truncate text-caption font-medium text-fg-secondary",
-								children: x(t.column.columnDef.header, t.getContext())
-							}), t.column.getCanResize() && /* @__PURE__ */ y("div", {
+								children: S(t.column.columnDef.header, t.getContext())
+							}), t.column.getCanResize() && /* @__PURE__ */ b("div", {
 								role: "separator",
 								"aria-orientation": "vertical",
-								"aria-label": I("dataTable.resizeColumn", "Resize column"),
+								"aria-label": F("dataTable.resizeColumn", "Resize column"),
+								"aria-valuenow": t.column.getSize(),
+								"aria-valuemin": t.column.columnDef.minSize ?? 64,
+								"aria-valuemax": t.column.columnDef.maxSize ?? 640,
+								tabIndex: 0,
+								onKeyDown: (e) => {
+									let n = {
+										ArrowLeft: -16,
+										ArrowRight: 16
+									}[e.key];
+									if (n === void 0) return;
+									e.preventDefault();
+									let r = t.column.id, i = t.column.columnDef.minSize ?? 64, a = t.column.columnDef.maxSize ?? 640;
+									z.setColumnSizing((e) => ({
+										...e,
+										[r]: Math.max(i, Math.min(a, t.column.getSize() + n))
+									}));
+								},
 								onMouseDown: t.getResizeHandler(),
 								onTouchStart: t.getResizeHandler(),
 								onDoubleClick: () => t.column.resetSize(),
-								className: "absolute top-8 right-0 bottom-8 w-8 cursor-col-resize after:absolute after:inset-y-0 after:right-0 after:w-1 after:bg-transparent after:transition-control group-hover/th:after:bg-line-strong"
+								className: "absolute top-8 right-0 bottom-8 w-8 cursor-col-resize rounded-pill after:absolute after:inset-y-0 after:right-0 after:w-1 after:bg-transparent after:transition-control group-hover/th:after:bg-line-strong focus-ring-inset"
 							})]
 						}, t.id);
 					})
 				}, t.id))
-			}), /* @__PURE__ */ y("div", {
+			}), /* @__PURE__ */ b("div", {
 				ref: H,
 				role: "rowgroup",
 				className: "overflow-x-auto scrollbar-quiet",
 				onScroll: (e) => {
 					V.current && V.current.scrollLeft !== e.currentTarget.scrollLeft && (V.current.scrollLeft = e.currentTarget.scrollLeft);
 				},
-				children: O ? /* @__PURE__ */ y("div", {
+				children: E ? /* @__PURE__ */ b("div", {
 					role: "row",
-					children: /* @__PURE__ */ y("div", {
+					children: /* @__PURE__ */ b("div", {
 						role: "cell",
-						"aria-colspan": Y.length,
+						"aria-colspan": G.length,
 						className: "block",
-						children: /* @__PURE__ */ y(oe, {
-							size: "compact",
-							title: I("dataTable.loadFailed", "Couldn't load these rows"),
-							actions: k && /* @__PURE__ */ y(re, {
-								size: "sm",
-								onClick: k,
-								children: I("dataTable.tryAgain", "Try again")
+						children: /* @__PURE__ */ b("div", {
+							role: "alert",
+							children: /* @__PURE__ */ b(p, {
+								size: "compact",
+								title: F("dataTable.loadFailed", "Couldn't load these rows"),
+								actions: D && /* @__PURE__ */ b(re, {
+									size: "sm",
+									onClick: D,
+									children: F("dataTable.tryAgain", "Try again")
+								})
 							})
 						})
 					})
-				}) : D && Z.length === 0 ? Array.from({ length: 8 }, (t, n) => /* @__PURE__ */ y("div", {
+				}) : T && q.length === 0 ? Array.from({ length: 8 }, (t, n) => /* @__PURE__ */ b("div", {
 					role: "row",
-					className: e("grid", S.density[o].classes),
-					style: X,
-					children: Y.map((t, r) => /* @__PURE__ */ y("div", {
+					className: e("grid", C.density[s].classes),
+					style: K,
+					children: G.map((t, r) => /* @__PURE__ */ b("div", {
 						role: "cell",
-						className: e(Q(r), t.columnDef.meta?.align === "end" && "justify-end"),
-						children: /* @__PURE__ */ y(ie, {
+						className: e(Z(r), t.columnDef.meta?.align === "end" && "justify-end"),
+						children: /* @__PURE__ */ b(ie, {
 							shape: "line",
 							style: { width: `${40 + (n * 7 + r * 13) % 45}%` }
 						})
 					}, t.id))
-				}, n)) : Z.length === 0 ? /* @__PURE__ */ y("div", {
+				}, n)) : q.length === 0 ? /* @__PURE__ */ b("div", {
 					role: "row",
-					children: /* @__PURE__ */ y("div", {
+					children: /* @__PURE__ */ b("div", {
 						role: "cell",
-						"aria-colspan": Y.length,
+						"aria-colspan": G.length,
 						className: "block",
-						children: A ?? /* @__PURE__ */ y(oe, {
+						children: O ?? /* @__PURE__ */ b(p, {
 							size: "compact",
-							title: I("dataTable.noRows", "No rows"),
-							description: I("dataTable.noMatches", "Nothing matches these filters.")
+							title: F("dataTable.noRows", "No rows"),
+							description: F("dataTable.noMatches", "Nothing matches these filters.")
 						})
 					})
-				}) : Ie ? /* @__PURE__ */ y("div", {
+				}) : J ? /* @__PURE__ */ b("div", {
 					className: "relative",
-					style: { height: ze.getTotalSize() },
-					children: ze.getVirtualItems().map((e) => Be(Z[e.index], {
+					style: { height: X.getTotalSize() },
+					children: X.getVirtualItems().map((e) => $(q[e.index], e.index, {
 						position: "absolute",
 						top: 0,
 						left: 0,
-						transform: `translateY(${Math.round(e.start - Re)}px)`
+						transform: `translateY(${Math.round(e.start - Je)}px)`
 					}))
-				}) : Z.map((e) => Be(e))
+				}) : q.map((e, t) => $(e, t))
 			})]
-		}), j && /* @__PURE__ */ y(ae, {
+		}), k && /* @__PURE__ */ b(ae, {
 			variant: "load-more",
 			hasMore: !0,
-			loading: M,
-			onLoadMore: N
+			loading: A,
+			onLoadMore: j
 		})]
 	});
 }
-var O = /* @__PURE__ */ m(D);
-process.env.NODE_ENV !== "production" && (O.displayName = "DataTable");
-var k = O;
+var E = /* @__PURE__ */ h(T);
+process.env.NODE_ENV !== "production" && (E.displayName = "DataTable");
+var D = E;
 //#endregion
 //#region src/components/data-table/columns.tsx
-function A(e, t, n, r = {}, i) {
+function O(e, t, n, r = {}, i) {
 	return {
 		id: e.id,
 		header: () => e.header,
@@ -317,82 +375,82 @@ function A(e, t, n, r = {}, i) {
 		}
 	};
 }
-function j({ value: e }) {
-	let t = n()("dataTable.tokenCount", "{count} tokens", { count: a(e) });
-	return /* @__PURE__ */ y(l, {
+function k({ value: e }) {
+	let t = r()("dataTable.tokenCount", "{count} tokens", { count: o(e) });
+	return /* @__PURE__ */ b(u, {
 		content: t,
-		children: /* @__PURE__ */ b("span", { children: [/* @__PURE__ */ y("span", {
+		children: /* @__PURE__ */ x("span", { children: [/* @__PURE__ */ b("span", {
 			"aria-hidden": !0,
-			children: s(e)
-		}), /* @__PURE__ */ y("span", {
+			children: c(e)
+		}), /* @__PURE__ */ b("span", {
 			className: "sr-only",
 			children: t
 		})] })
 	});
 }
-function M({ value: e, now: t }) {
-	let n = r(e, {
+function A({ value: e, now: t }) {
+	let n = i(e, {
 		time: !0,
 		seconds: !0
 	});
-	return /* @__PURE__ */ y(l, {
-		content: `${n} · ${r(e, {
+	return /* @__PURE__ */ b(u, {
+		content: `${n} · ${i(e, {
 			time: !0,
 			utc: !0
 		})}`,
 		shape: "multiline",
-		children: /* @__PURE__ */ b("span", {
+		children: /* @__PURE__ */ x("span", {
 			className: "text-fg-secondary",
-			children: [/* @__PURE__ */ y("time", {
+			children: [/* @__PURE__ */ b("time", {
 				dateTime: new Date(e).toISOString(),
-				children: o(e, t)
-			}), /* @__PURE__ */ b("span", {
+				children: s(e, t)
+			}), /* @__PURE__ */ x("span", {
 				className: "sr-only",
 				children: [" ", n]
 			})]
 		})
 	});
 }
-var N = {
-	text: (e, t) => A(e, t, (e) => e, { text: (e) => t(e) }),
-	mono: (e, t) => A(e, t, (e) => e, {
+var j = {
+	text: (e, t) => O(e, t, (e) => e, { text: (e) => t(e) }),
+	mono: (e, t) => O(e, t, (e) => e, {
 		mono: !0,
 		text: (e) => t(e)
 	}),
-	number: (e, t) => A(e, t, (e) => a(e), { align: "end" }),
-	money: (e, t, n = {}) => A(e, t, (e) => c(e, n.decimals === void 0 ? {} : { decimals: n.decimals }), {
+	number: (e, t) => O(e, t, (e) => o(e), { align: "end" }),
+	money: (e, t, n = {}) => O(e, t, (e) => l(e, n.decimals === void 0 ? {} : { decimals: n.decimals }), {
 		align: "end",
 		mono: !1
 	}, (e, t, n) => Number(e.getValue(n)) - Number(t.getValue(n))),
-	tokens: (e, t) => A(e, t, (e) => /* @__PURE__ */ y(j, { value: e }), { align: "end" }),
-	duration: (e, t) => A(e, t, (e) => i(e), { align: "end" }),
-	date: (e, t) => A(e, t, (e) => /* @__PURE__ */ y("time", {
+	tokens: (e, t) => O(e, t, (e) => /* @__PURE__ */ b(k, { value: e }), { align: "end" }),
+	duration: (e, t) => O(e, t, (e) => a(e), { align: "end" }),
+	date: (e, t) => O(e, t, (e) => /* @__PURE__ */ b("time", {
 		dateTime: new Date(e).toISOString(),
-		children: r(e, { time: !0 })
+		children: i(e, { time: !0 })
 	}), {}, "datetime"),
-	relative: (e, t, n = {}) => A(e, t, (e) => /* @__PURE__ */ y(M, {
+	relative: (e, t, n = {}) => O(e, t, (e) => /* @__PURE__ */ b(A, {
 		value: e,
 		now: n.now ?? Date.now()
 	}), {}, (e, t, n) => new Date(e.getValue(n)).getTime() - new Date(t.getValue(n)).getTime()),
-	status: (e, t) => A(e, t, (e) => /* @__PURE__ */ y(f, {
+	status: (e, t) => O(e, t, (e) => /* @__PURE__ */ b(m, {
 		tone: e.tone,
 		children: e.label
 	}), { text: void 0 }),
-	avatar: (e, t) => A(e, t, (e) => /* @__PURE__ */ b("span", {
+	avatar: (e, t) => O(e, t, (e) => /* @__PURE__ */ x("span", {
 		className: "inline-flex min-w-0 items-center gap-8",
-		children: [/* @__PURE__ */ y(p, {
+		children: [/* @__PURE__ */ b(oe, {
 			name: e.name,
 			...e.src ? { src: e.src } : {},
 			size: 24,
 			decorative: !0
-		}), /* @__PURE__ */ y("span", {
+		}), /* @__PURE__ */ b("span", {
 			className: "truncate",
 			children: e.name
 		})]
 	})),
-	custom: (e, t, n, r = {}) => A(e, t, n, r)
+	custom: (e, t, n, r = {}) => O(e, t, n, r)
 };
 //#endregion
-export { w as DATA_TABLE_GROW_MIN, k as DataTable, C as KAESO_DATA_TABLE_DEFAULT_VARIANTS, S as KAESO_DATA_TABLE_VARIANTS, N as col, T as fitColumns };
+export { ve as DATA_TABLE_GROW_MIN, D as DataTable, ge as KAESO_DATA_TABLE_DEFAULT_VARIANTS, C as KAESO_DATA_TABLE_VARIANTS, j as col, ye as fitColumns };
 
 //# sourceMappingURL=data-table.js.map