@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/tools/components/data-table/data-table.js

@@ -4,112 +4,126 @@ import { buttonVariants as t } from "../../../ui/components/ui/button-variants.j
 import { Button as n } from "../../../ui/components/ui/button-components.js";
 import { Input as r } from "../../../ui/components/ui/input.js";
 import { DropdownMenu as i, DropdownMenuCheckboxItem as a, DropdownMenuContent as o, DropdownMenuGroup as s, DropdownMenuLabel as c, DropdownMenuSeparator as l, DropdownMenuTrigger as u } from "../../../ui/components/ui/dropdown-menu.js";
-import { Table as d, TableBody as f, TableCell as p, TableHead as m, TableHeader as ee, TableRow as h } from "../../../ui/components/ui/table.js";
-import { dataTable_filterPlaceholder as te } from "../../paraglide/messages/datatable_filterplaceholder2.js";
-import { dataTable_goToFirstPage as g } from "../../paraglide/messages/datatable_gotofirstpage4.js";
-import { dataTable_goToLastPage as ne } from "../../paraglide/messages/datatable_gotolastpage4.js";
-import { dataTable_goToNextPage as re } from "../../paraglide/messages/datatable_gotonextpage4.js";
-import { dataTable_goToPreviousPage as ie } from "../../paraglide/messages/datatable_gotopreviouspage4.js";
-import { dataTable_items as ae } from "../../paraglide/messages/datatable_items1.js";
-import { dataTable_noResults as oe } from "../../paraglide/messages/datatable_noresults2.js";
-import { dataTable_page as se } from "../../paraglide/messages/datatable_page1.js";
-import { dataTable_rowsPerPage as _ } from "../../paraglide/messages/datatable_rowsperpage3.js";
-import { dataTable_rowsSelected as v } from "../../paraglide/messages/datatable_rowsselected2.js";
-import { dataTable_toggleColumns as y } from "../../paraglide/messages/datatable_togglecolumns2.js";
-import { dataTable_view as b } from "../../paraglide/messages/datatable_view1.js";
-import { dataTableFeatures as ce, flexRender as le, useTable as ue } from "./table-engine.js";
-import { useDataTableStore as x } from "./table-store.js";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import * as T from "react";
-import { ChevronDown as de, ChevronLeft as E, ChevronRight as D, ChevronUp as O, ChevronsLeft as k, ChevronsRight as A, Filter as fe, Plus as pe, Settings2 as j } from "lucide-react";
-import { DndContext as me, KeyboardSensor as he, PointerSensor as ge, closestCenter as _e, useSensor as ve, useSensors as ye } from "@dnd-kit/core";
-import { SortableContext as be, arrayMove as xe, horizontalListSortingStrategy as Se, sortableKeyboardCoordinates as Ce, useSortable as M } from "@dnd-kit/sortable";
-import { CSS as N } from "@dnd-kit/utilities";
+import { Table as d, TableBody as f, TableCell as p, TableHead as ee, TableHeader as te, TableRow as m } from "../../../ui/components/ui/table.js";
+import { dataTable_filterPlaceholder as ne } from "../../paraglide/messages/datatable_filterplaceholder2.js";
+import { dataTable_goToFirstPage as h } from "../../paraglide/messages/datatable_gotofirstpage4.js";
+import { dataTable_goToLastPage as g } from "../../paraglide/messages/datatable_gotolastpage4.js";
+import { dataTable_goToNextPage as _ } from "../../paraglide/messages/datatable_gotonextpage4.js";
+import { dataTable_goToPreviousPage as v } from "../../paraglide/messages/datatable_gotopreviouspage4.js";
+import { dataTable_items as re } from "../../paraglide/messages/datatable_items1.js";
+import { dataTable_noResults as ie } from "../../paraglide/messages/datatable_noresults2.js";
+import { dataTable_page as ae } from "../../paraglide/messages/datatable_page1.js";
+import { dataTable_rowsPerPage as y } from "../../paraglide/messages/datatable_rowsperpage3.js";
+import { dataTable_rowsSelected as b } from "../../paraglide/messages/datatable_rowsselected2.js";
+import { dataTable_toggleColumns as x } from "../../paraglide/messages/datatable_togglecolumns2.js";
+import { dataTable_view as S } from "../../paraglide/messages/datatable_view1.js";
+import { dataTableFeatures as oe, flexRender as se, useTable as ce } from "./table-engine.js";
+import { useDataTableStore as C } from "./table-store.js";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import * as D from "react";
+import { ChevronDown as le, ChevronLeft as O, ChevronRight as k, ChevronUp as A, ChevronsLeft as j, ChevronsRight as M, Filter as ue, GripVertical as N, Plus as de, Settings2 as P } from "lucide-react";
+import { DndContext as fe, KeyboardSensor as pe, PointerSensor as me, closestCenter as he, useSensor as ge, useSensors as _e } from "@dnd-kit/core";
+import { SortableContext as ve, arrayMove as ye, horizontalListSortingStrategy as be, sortableKeyboardCoordinates as xe, useSortable as F } from "@dnd-kit/sortable";
+import { CSS as I } from "@dnd-kit/utilities";
 //#region src/tools/components/data-table/data-table.tsx
-function we({ header: t, enableColumnOrdering: n = !0, enableMultiSort: r = !1, sortIndex: i }) {
-	let { attributes: a, listeners: o, setNodeRef: s, transform: c, transition: l, isDragging: u } = M({
+function Se({ header: t, enableColumnOrdering: n = !0, enableMultiSort: r = !1, sortIndex: i }) {
+	let { attributes: a, listeners: o, setNodeRef: s, setActivatorNodeRef: c, transform: l, transition: u, isDragging: d } = F({
 		id: t.column.id,
 		disabled: !n
-	}), d = t.column.getCanSort(), f = t.column.getIsSorted(), p = f !== !1, ee = n ? {
-		transform: N.Translate.toString(c),
-		transition: l,
-		opacity: u ? .8 : 1,
-		zIndex: +!!u,
+	}), f = t.column.getCanSort(), p = t.column.getIsSorted(), te = p !== !1, m = f && typeof t.column.columnDef.header != "function" ? "button" : "span", ne = n ? {
+		transform: I.Translate.toString(l),
+		transition: u,
+		opacity: d ? .8 : 1,
+		zIndex: +!!d,
 		position: "relative",
 		cursor: "move"
-	} : {}, h = (e) => {
-		d && (r && e.shiftKey ? t.column.toggleSorting(void 0, !0) : t.column.toggleSorting());
-	};
-	return /* @__PURE__ */ C(m, {
+	} : {};
+	return /* @__PURE__ */ E(ee, {
 		ref: n ? s : void 0,
-		style: ee,
-		...n ? {
+		style: ne,
+		"aria-sort": f ? p === "asc" ? "ascending" : p === "desc" ? "descending" : "none" : void 0,
+		className: e("bg-primary/10 text-primary font-bold border-b border-primary/20", f && "cursor-pointer select-none hover:bg-primary/20 transition-colors"),
+		onClick: f ? (e) => {
+			f && !e.target.closest("button, input, select, [role=checkbox]") && (r && e.shiftKey ? t.column.toggleSorting(void 0, !0) : t.column.toggleSorting());
+		} : void 0,
+		children: [n && !t.isPlaceholder && /* @__PURE__ */ T("button", {
+			type: "button",
+			ref: c,
 			...a,
-			...o
-		} : {},
-		className: e("bg-primary/10 text-primary font-bold border-b border-primary/20", d && "cursor-pointer select-none hover:bg-primary/20 transition-colors"),
-		onClick: d ? h : void 0,
-		children: t.isPlaceholder ? null : /* @__PURE__ */ w("span", {
+			...o,
+			"aria-label": `Reorder column ${t.column.id}`,
+			className: "inline-flex h-6 w-6 items-center justify-center cursor-grab",
+			children: /* @__PURE__ */ T(N, {
+				className: "h-3 w-3",
+				"aria-hidden": "true"
+			})
+		}), t.isPlaceholder ? null : /* @__PURE__ */ E("span", {
 			className: "inline-flex items-center gap-1",
-			children: [/* @__PURE__ */ C("span", {
-				className: e(p && "font-semibold"),
-				children: le(t.column.columnDef.header, t.getContext())
-			}), p && /* @__PURE__ */ w("span", {
+			children: [/* @__PURE__ */ T(m, {
+				className: e(te && "font-semibold"),
+				...m === "button" ? {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation(), t.column.toggleSorting(void 0, r && e.shiftKey);
+					}
+				} : {},
+				children: se(t.column.columnDef.header, t.getContext())
+			}), te && /* @__PURE__ */ E("span", {
 				className: "inline-flex items-center text-xs",
-				children: [C(f === "asc" ? O : de, { className: "h-3.5 w-3.5" }), r && i !== void 0 && i >= 0 && /* @__PURE__ */ C("span", {
+				children: [T(p === "asc" ? A : le, { className: "h-3.5 w-3.5" }), r && i !== void 0 && i >= 0 && /* @__PURE__ */ T("span", {
 					className: "text-[10px] ml-0.5",
 					children: i + 1
 				})]
 			})]
-		})
+		})]
 	});
 }
-function P({ columns: t, data: i, variant: a = "default", filterContent: o, storageKey: s, enableSortingByDefault: c = !0, enableMultiSort: l = !1, showRowNumber: u = !1, itemCount: m, onAdd: g, pageCount: ne, rowCount: re, onPaginationChange: ie, onSortingChange: se, onColumnFiltersChange: _, onRowClick: v, onSelectionChange: y, rowIdField: b = "id", manualPagination: S = !1, manualSorting: de = !1, manualFiltering: E = !1, filterColumn: D, sorting: O, pagination: k, enableColumnOrdering: A = !0, containerClassName: j, tableClassName: M, pageSizeOptions: N = [
+function Ce({ columns: t, data: i, variant: a = "default", filterContent: o, storageKey: s, enableSortingByDefault: c = !0, enableMultiSort: l = !1, showRowNumber: u = !1, itemCount: ee, onAdd: h, pageCount: g, rowCount: _, onPaginationChange: v, onSortingChange: ae, onColumnFiltersChange: y, onRowClick: b, onSelectionChange: x, rowIdField: S = "id", manualPagination: w = !1, manualSorting: le = !1, manualFiltering: O = !1, filterColumn: k, sorting: A, pagination: j, enableColumnOrdering: M = !0, containerClassName: N, tableClassName: P, pageSizeOptions: F = [
 	10,
 	20,
 	30,
 	50,
 	100
-], filterLayout: P = "inline", defaultFilterOpen: Ee = !1, activeFiltersContent: L }) {
+], filterLayout: I = "inline", defaultFilterOpen: Ce = !1, activeFiltersContent: z }) {
 	"use no memo";
-	let De = x((e) => e.getTableSettings), Oe = x((e) => e.setTableSettings), R = x((e) => e._hasHydrated), z = T.useSyncExternalStore(T.useCallback(() => () => {}, []), () => !0, () => !1), [ke, Ae] = T.useState(Ee), [je, Me] = T.useState(O || []), [B, Ne] = T.useState([]), [V, Pe] = T.useState({}), [Fe, Ie] = T.useState({}), [Le, Re] = T.useState(k || {
+	let Te = C((e) => e.getTableSettings), Ee = C((e) => e.setTableSettings), B = C((e) => e._hasHydrated), V = D.useSyncExternalStore(D.useCallback(() => () => {}, []), () => !0, () => !1), [H, De] = D.useState(Ce), [Oe, ke] = D.useState(A || []), [U, Ae] = D.useState([]), [W, je] = D.useState({}), [Me, Ne] = D.useState({}), [Pe, Fe] = D.useState(j || {
 		pageIndex: 0,
 		pageSize: 10
-	}), [H, U] = T.useState(t.map((e) => e.id || e.accessorKey)), ze = k !== void 0, W = O ?? je, G = k ?? Le, Be = (e) => {
-		let t = typeof e == "function" ? e(W) : e;
-		O === void 0 && Me(t), se?.(t);
-	}, Ve = (e) => {
-		let t = typeof e == "function" ? e(G) : e;
-		k === void 0 && Re(t), ie?.(t);
-	}, [K, He] = T.useState(null), q = T.useMemo(() => t.map((e) => e.id || e.accessorKey || "").join("|"), [t]), J = T.useMemo(() => new Set(q.split("|").filter(Boolean)), [q]), Y = s ? JSON.stringify([
+	}), [G, K] = D.useState(t.map((e) => e.id || e.accessorKey)), Ie = j !== void 0, q = A ?? Oe, J = j ?? Pe, Le = (e) => {
+		let t = typeof e == "function" ? e(q) : e;
+		A === void 0 && ke(t), ae?.(t);
+	}, Re = (e) => {
+		let t = typeof e == "function" ? e(J) : e;
+		j === void 0 && Fe(t), v?.(t);
+	}, [ze, Be] = D.useState(null), Y = D.useMemo(() => t.map((e) => e.id || e.accessorKey || "").join("|"), [t]), X = D.useMemo(() => new Set(Y.split("|").filter(Boolean)), [Y]), Z = s ? JSON.stringify([
 		s,
-		q,
-		!!O,
-		!!k
+		Y,
+		!!A,
+		!!j
 	]) : null;
-	if (R && s && K !== Y) {
-		He(Y);
-		let e = De(s);
+	if (B && s && ze !== Z) {
+		Be(Z);
+		let e = Te(s);
 		if (e) {
-			if (!O && e.sorting && e.sorting.length > 0) {
-				let t = e.sorting.filter((e) => J.has(e.id));
-				t.length > 0 && Me(t);
+			if (!A && e.sorting && e.sorting.length > 0) {
+				let t = e.sorting.filter((e) => X.has(e.id));
+				t.length > 0 && ke(t);
 			}
 			if (e.columnVisibility && Object.keys(e.columnVisibility).length > 0) {
 				let t = {};
-				for (let [n, r] of Object.entries(e.columnVisibility)) J.has(n) && (t[n] = r);
-				Object.keys(t).length > 0 && Pe(t);
+				for (let [n, r] of Object.entries(e.columnVisibility)) X.has(n) && (t[n] = r);
+				Object.keys(t).length > 0 && je(t);
 			}
-			if (!k && e.pageSize && e.pageSize !== 10 && Re((t) => ({
+			if (!j && e.pageSize && e.pageSize !== 10 && Fe((t) => ({
 				...t,
 				pageSize: e.pageSize
 			})), e.columnOrder && e.columnOrder.length > 0) {
-				let t = e.columnOrder.filter((e) => J.has(e)), n = new Set(t), r = Array.from(J).filter((e) => !n.has(e)), i = [...t, ...r];
-				i.length > 0 && U(i);
+				let t = e.columnOrder.filter((e) => X.has(e)), n = new Set(t), r = Array.from(X).filter((e) => !n.has(e)), i = [...t, ...r];
+				i.length > 0 && K(i);
 			}
 		}
 	}
-	let Ue = T.useMemo(() => ({
+	let Ve = D.useMemo(() => ({
 		id: "rowNumber",
 		header: "No",
 		enableSorting: !1,
@@ -117,8 +131,8 @@ function P({ columns: t, data: i, variant: a = "default", filterContent: o, stor
 			let n = t.store.state.pagination;
 			return n ? n.pageIndex * n.pageSize + e.index + 1 : e.index + 1;
 		}
-	}), []), X = T.useMemo(() => {
-		let e = u ? [Ue, ...t] : t;
+	}), []), He = D.useMemo(() => {
+		let e = u ? [Ve, ...t] : t;
 		return c ? e.map((e) => ({
 			...e,
 			enableSorting: e.enableSorting !== !1
@@ -126,247 +140,248 @@ function P({ columns: t, data: i, variant: a = "default", filterContent: o, stor
 	}, [
 		u,
 		t,
-		Ue,
+		Ve,
 		c
-	]), We = T.useCallback((e) => {
-		if (b) return b.split("_").reduce((e, t) => {
+	]), Ue = D.useCallback((e) => {
+		if (S) return S.split("_").reduce((e, t) => {
 			if (e && typeof e == "object" && t !== "__proto__" && t !== "constructor" && t !== "prototype" && Object.prototype.hasOwnProperty.call(e, t)) return e[t];
 		}, e);
-	}, [b]);
-	T.useEffect(() => {
-		s && R && K === Y && Oe(s, {
-			columnOrder: H,
-			columnVisibility: V,
-			sorting: W,
-			pageSize: G.pageSize
+	}, [S]);
+	D.useEffect(() => {
+		s && B && ze === Z && Ee(s, {
+			columnOrder: G,
+			columnVisibility: W,
+			sorting: q,
+			pageSize: J.pageSize
 		});
 	}, [
 		s,
-		H,
-		V,
+		G,
 		W,
-		G.pageSize,
-		Oe,
-		R,
-		K,
-		Y
-	]), T.useEffect(() => {
-		E && _ && _(B);
-	}, [
+		q,
+		J.pageSize,
+		Ee,
 		B,
-		E,
-		_
+		ze,
+		Z
+	]), D.useEffect(() => {
+		O && y && y(U);
+	}, [
+		U,
+		O,
+		y
 	]);
-	let Z = ue({
-		features: ce,
+	let Q = ce({
+		features: oe,
 		data: i,
-		columns: X,
-		pageCount: S ? ne : void 0,
-		rowCount: S ? re : void 0,
-		getRowId: b ? (e, t) => {
-			let n = b.split("_").reduce((e, t) => {
+		columns: He,
+		pageCount: w ? g : void 0,
+		rowCount: w ? _ : void 0,
+		getRowId: S ? (e, t) => {
+			let n = S.split("_").reduce((e, t) => {
 				if (e && typeof e == "object" && t in e) return e[t];
 			}, e);
 			return String(n === void 0 ? t : n);
 		} : void 0,
 		state: {
-			sorting: W,
-			columnFilters: B,
-			columnVisibility: V,
-			rowSelection: Fe,
-			pagination: G,
-			columnOrder: H
+			sorting: q,
+			columnFilters: U,
+			columnVisibility: W,
+			rowSelection: Me,
+			pagination: J,
+			columnOrder: G
 		},
 		enableRowSelection: !0,
 		enableMultiSort: l,
-		onRowSelectionChange: Ie,
-		onSortingChange: Be,
-		onColumnFiltersChange: Ne,
-		onColumnVisibilityChange: Pe,
-		onPaginationChange: Ve,
-		onColumnOrderChange: U,
-		autoResetPageIndex: S || ze ? !1 : void 0,
-		manualPagination: S,
-		manualSorting: de,
-		manualFiltering: E
+		onRowSelectionChange: Ne,
+		onSortingChange: Le,
+		onColumnFiltersChange: Ae,
+		onColumnVisibilityChange: je,
+		onPaginationChange: Re,
+		onColumnOrderChange: K,
+		autoResetPageIndex: w || Ie ? !1 : void 0,
+		manualPagination: w,
+		manualSorting: le,
+		manualFiltering: O
 	});
-	T.useEffect(() => {
-		y && y(Z.getFilteredSelectedRowModel().rows.map((e) => e.original));
+	D.useEffect(() => {
+		x && x(Q.getFilteredSelectedRowModel().rows.map((e) => e.original));
 	}, [
-		Fe,
-		Z,
-		y
+		Me,
+		Q,
+		x
 	]);
-	let Ge = ye(ve(ge, { activationConstraint: { distance: 8 } }), ve(he, { coordinateGetter: Ce })), Ke = T.useCallback((e) => {
+	let We = _e(ge(me, { activationConstraint: { distance: 8 } }), ge(pe, { coordinateGetter: xe })), Ge = D.useCallback((e) => {
 		let { active: t, over: n } = e;
-		t && n && t.id !== n.id && U((e) => {
+		t && n && t.id !== n.id && K((e) => {
 			let r = e.indexOf(t.id), i = e.indexOf(n.id);
-			return xe(e, r, i);
+			return ye(e, r, i);
 		});
-	}, []), qe = T.useCallback((e) => W.findIndex((t) => t.id === e), [W]), Q = T.useCallback(() => /* @__PURE__ */ C(me, {
-		sensors: Ge,
-		collisionDetection: _e,
-		onDragEnd: Ke,
-		children: /* @__PURE__ */ C("div", {
-			className: e("rounded-md border", M),
-			children: /* @__PURE__ */ w(d, { children: [/* @__PURE__ */ C(ee, { children: Z.getHeaderGroups().map((e) => /* @__PURE__ */ C(be, {
-				items: H,
-				strategy: Se,
-				children: /* @__PURE__ */ C(h, { children: e.headers.map((e) => /* @__PURE__ */ C(we, {
+	}, []), Ke = D.useCallback((e) => q.findIndex((t) => t.id === e), [q]), qe = D.useCallback(() => /* @__PURE__ */ T(fe, {
+		sensors: We,
+		collisionDetection: he,
+		onDragEnd: Ge,
+		children: /* @__PURE__ */ T("div", {
+			className: e("rounded-md border", P),
+			children: /* @__PURE__ */ E(d, { children: [/* @__PURE__ */ T(te, { children: Q.getHeaderGroups().map((e) => /* @__PURE__ */ T(ve, {
+				items: G,
+				strategy: be,
+				children: /* @__PURE__ */ T(m, { children: e.headers.map((e) => /* @__PURE__ */ T(Se, {
 					header: e,
-					enableColumnOrdering: A,
+					enableColumnOrdering: M,
 					enableMultiSort: l,
-					sortIndex: qe(e.column.id)
+					sortIndex: Ke(e.column.id)
 				}, e.id)) })
-			}, e.id)) }), /* @__PURE__ */ C(f, { children: Z.getRowModel().rows?.length ? Z.getRowModel().rows.map((e) => /* @__PURE__ */ C(h, {
+			}, e.id)) }), /* @__PURE__ */ T(f, { children: Q.getRowModel().rows?.length ? Q.getRowModel().rows.map((e) => /* @__PURE__ */ T(m, {
 				"data-state": e.getIsSelected() && "selected",
-				onClick: () => v && v(We(e.original)),
-				className: v ? "cursor-pointer hover:bg-muted/50" : void 0,
-				children: e.getVisibleCells().map((e) => /* @__PURE__ */ C(p, { children: le(e.column.columnDef.cell, e.getContext()) }, e.id))
-			}, e.id)) : /* @__PURE__ */ C(h, { children: /* @__PURE__ */ C(p, {
-				colSpan: X.length,
+				onClick: () => b && b(Ue(e.original)),
+				className: b ? "cursor-pointer hover:bg-muted/50" : void 0,
+				children: e.getVisibleCells().map((e) => /* @__PURE__ */ T(p, { children: se(e.column.columnDef.cell, e.getContext()) }, e.id))
+			}, e.id)) : /* @__PURE__ */ T(m, { children: /* @__PURE__ */ T(p, {
+				colSpan: He.length,
 				className: "h-24 text-center",
-				children: oe()
+				children: ie()
 			}) }) })] })
 		})
 	}), [
+		We,
 		Ge,
-		Ke,
-		Z,
-		X,
-		H,
-		A,
+		Q,
+		He,
+		G,
+		M,
 		l,
-		qe,
-		v,
-		We,
-		M
-	]), $ = () => /* @__PURE__ */ C("div", {
-		className: e("rounded-md border", M),
-		children: /* @__PURE__ */ C(d, { children: /* @__PURE__ */ C(f, { children: /* @__PURE__ */ C(h, { children: /* @__PURE__ */ C(p, {
+		Ke,
+		b,
+		Ue,
+		P
+	]), $ = () => /* @__PURE__ */ T("div", {
+		className: e("rounded-md border", P),
+		children: /* @__PURE__ */ T(d, { children: /* @__PURE__ */ T(f, { children: /* @__PURE__ */ T(m, { children: /* @__PURE__ */ T(p, {
 			className: "h-24 text-center",
-			children: /* @__PURE__ */ C("div", {
+			children: /* @__PURE__ */ T("div", {
 				className: "text-muted-foreground",
 				children: "Loading..."
 			})
 		}) }) }) })
 	});
-	return a === "minimal" ? /* @__PURE__ */ w("div", {
-		className: e("space-y-4", j),
-		children: [z ? Q() : $(), /* @__PURE__ */ C(I, {
-			table: Z,
-			pageSizeOptions: N
+	return a === "minimal" ? /* @__PURE__ */ E("div", {
+		className: e("space-y-4", N),
+		children: [V ? qe() : $(), /* @__PURE__ */ T(R, {
+			table: Q,
+			pageSizeOptions: F
 		})]
-	}) : a === "toolbar" ? /* @__PURE__ */ w("div", {
-		className: e("relative h-full", j),
-		children: [g && /* @__PURE__ */ C("div", {
+	}) : a === "toolbar" ? /* @__PURE__ */ E("div", {
+		className: e("relative h-full", N),
+		children: [h && /* @__PURE__ */ T("div", {
 			className: "absolute left-0 top-0 w-full h-full z-10 pointer-events-none",
-			children: /* @__PURE__ */ C("div", {
+			children: /* @__PURE__ */ T("div", {
 				className: "fixed right-4 bottom-10 pointer-events-auto",
-				children: /* @__PURE__ */ C(n, {
+				children: /* @__PURE__ */ T(n, {
 					type: "button",
 					size: "icon",
-					onClick: g,
+					"aria-label": "Add row",
+					onClick: h,
 					className: "w-12 h-12 rounded-full shadow-lg",
-					children: /* @__PURE__ */ C(pe, { className: "w-6 h-6" })
+					children: /* @__PURE__ */ T(de, { className: "w-6 h-6" })
 				})
 			})
-		}), /* @__PURE__ */ w("div", {
+		}), /* @__PURE__ */ E("div", {
 			className: "relative h-full flex flex-col",
 			children: [
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ E("div", {
 					className: "bg-muted p-2 rounded-t-md grid grid-cols-1 sm:grid-cols-[1fr_minmax(0,auto)_1fr] items-center gap-2",
-					children: [/* @__PURE__ */ w("div", {
+					children: [/* @__PURE__ */ E("div", {
 						className: "flex flex-wrap justify-center items-center gap-2 sm:col-start-2 sm:col-end-3",
 						children: [
-							/* @__PURE__ */ C(F, { table: Z }),
-							o && P === "inline" && o,
-							o && P === "panel" && /* @__PURE__ */ w(n, {
+							/* @__PURE__ */ T(L, { table: Q }),
+							o && I === "inline" && o,
+							o && I === "panel" && /* @__PURE__ */ E(n, {
 								type: "button",
-								variant: ke ? "default" : "outline",
+								variant: H ? "default" : "outline",
 								size: "sm",
-								onClick: () => Ae(!ke),
+								onClick: () => De(!H),
 								className: "h-8 gap-1.5",
-								children: [/* @__PURE__ */ C(fe, { className: "h-4 w-4" }), /* @__PURE__ */ C("span", { children: "フィルター" })]
+								children: [/* @__PURE__ */ T(ue, { className: "h-4 w-4" }), /* @__PURE__ */ T("span", { children: "フィルター" })]
 							})
 						]
-					}), /* @__PURE__ */ w("div", {
+					}), /* @__PURE__ */ E("div", {
 						className: "flex items-center gap-3 justify-center sm:justify-end sm:col-start-3 sm:col-end-4",
-						children: [/* @__PURE__ */ C(Te, {
-							table: Z,
-							pageSizeOptions: N
-						}), typeof m == "number" && /* @__PURE__ */ C("span", {
+						children: [/* @__PURE__ */ T(we, {
+							table: Q,
+							pageSizeOptions: F
+						}), typeof ee == "number" && /* @__PURE__ */ T("span", {
 							className: "text-sm text-muted-foreground whitespace-nowrap",
-							children: `${m.toLocaleString()} ${ae()}`
+							children: `${ee.toLocaleString()} ${re()}`
 						})]
 					})]
 				}),
-				o && P === "panel" && /* @__PURE__ */ C("div", {
-					className: e("border-b transition-all duration-200 ease-in-out overflow-hidden bg-background", ke ? "max-h-[500px] p-4" : "max-h-0 p-0 border-none"),
+				o && I === "panel" && /* @__PURE__ */ T("div", {
+					className: e("border-b transition-all duration-200 ease-in-out overflow-hidden bg-background", H ? "max-h-[500px] p-4" : "max-h-0 p-0 border-none"),
 					children: o
 				}),
-				L && /* @__PURE__ */ C("div", {
+				z && /* @__PURE__ */ T("div", {
 					className: "bg-background px-4 py-1.5 border-b",
-					children: L
+					children: z
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex-1 overflow-auto",
-					children: z ? Q() : $()
+					children: V ? qe() : $()
 				})
 			]
 		})]
-	}) : /* @__PURE__ */ w("div", {
-		className: e("space-y-4", j),
+	}) : /* @__PURE__ */ E("div", {
+		className: e("space-y-4", N),
 		children: [
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ E("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ C("div", {
+				children: [/* @__PURE__ */ T("div", {
 					className: "flex items-center py-4",
-					children: D && /* @__PURE__ */ C(r, {
-						placeholder: te({ column: D }),
-						value: Z.getColumn(D)?.getFilterValue() ?? "",
-						onChange: (e) => Z.getColumn(D)?.setFilterValue(e.target.value),
+					children: k && /* @__PURE__ */ T(r, {
+						placeholder: ne({ column: k }),
+						value: Q.getColumn(k)?.getFilterValue() ?? "",
+						onChange: (e) => Q.getColumn(k)?.setFilterValue(e.target.value),
 						className: "max-w-sm"
 					})
-				}), /* @__PURE__ */ C(F, { table: Z })]
+				}), /* @__PURE__ */ T(L, { table: Q })]
 			}),
-			L && /* @__PURE__ */ C("div", {
+			z && /* @__PURE__ */ T("div", {
 				className: "border rounded-md bg-background px-3 py-1",
-				children: L
+				children: z
 			}),
-			z ? Q() : $(),
-			/* @__PURE__ */ C(I, {
-				table: Z,
-				pageSizeOptions: N
+			V ? qe() : $(),
+			/* @__PURE__ */ T(R, {
+				table: Q,
+				pageSizeOptions: F
 			}),
-			g && /* @__PURE__ */ C("div", {
+			h && /* @__PURE__ */ T("div", {
 				className: "fixed right-4 bottom-10 z-10",
-				children: /* @__PURE__ */ C(n, {
+				children: /* @__PURE__ */ T(n, {
 					type: "button",
 					size: "icon",
-					onClick: g,
+					onClick: h,
 					className: "w-12 h-12 rounded-full shadow-lg",
-					children: /* @__PURE__ */ C(pe, { className: "w-6 h-6" })
+					children: /* @__PURE__ */ T(de, { className: "w-6 h-6" })
 				})
 			})
 		]
 	});
 }
-function F({ table: e }) {
-	return /* @__PURE__ */ w(i, { children: [/* @__PURE__ */ w(u, {
+function L({ table: e }) {
+	return /* @__PURE__ */ E(i, { children: [/* @__PURE__ */ E(u, {
 		className: t({
 			variant: "default",
 			size: "sm",
 			className: "h-8"
 		}),
-		children: [/* @__PURE__ */ C(j, { className: "mr-2 h-4 w-4" }), b()]
-	}), /* @__PURE__ */ C(o, {
+		children: [/* @__PURE__ */ T(P, { className: "mr-2 h-4 w-4" }), S()]
+	}), /* @__PURE__ */ T(o, {
 		align: "end",
 		className: "w-40",
-		children: /* @__PURE__ */ w(s, { children: [
-			/* @__PURE__ */ C(c, { children: y() }),
-			/* @__PURE__ */ C(l, {}),
-			e.getAllColumns().filter((e) => e.accessorFn !== void 0 && e.getCanHide()).map((e) => /* @__PURE__ */ C(a, {
+		children: /* @__PURE__ */ E(s, { children: [
+			/* @__PURE__ */ T(c, { children: x() }),
+			/* @__PURE__ */ T(l, {}),
+			e.getAllColumns().filter((e) => e.accessorFn !== void 0 && e.getCanHide()).map((e) => /* @__PURE__ */ T(a, {
 				className: "capitalize",
 				checked: e.getIsVisible(),
 				onCheckedChange: (t) => e.toggleVisibility(!!t),
@@ -375,95 +390,99 @@ function F({ table: e }) {
 		] })
 	})] });
 }
-function I({ table: e, pageSizeOptions: t = [
+function R({ table: e, pageSizeOptions: t = [
 	10,
 	20,
 	30,
 	50,
 	100
 ] }) {
-	return /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ E("div", {
 		className: "flex items-center justify-between px-2",
-		children: [/* @__PURE__ */ C("div", {
+		children: [/* @__PURE__ */ T("div", {
 			className: "flex-1 text-sm text-muted-foreground",
-			children: v({
+			children: b({
 				selected: e.getFilteredSelectedRowModel().rows.length,
 				total: e.getFilteredRowModel().rows.length
 			})
-		}), /* @__PURE__ */ w("div", {
+		}), /* @__PURE__ */ E("div", {
 			className: "flex items-center space-x-6 lg:space-x-8",
 			children: [
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ E("div", {
 					className: "flex items-center space-x-2",
-					children: [/* @__PURE__ */ C("p", {
+					children: [/* @__PURE__ */ T("p", {
 						className: "text-sm font-medium",
-						children: _()
-					}), /* @__PURE__ */ C("select", {
-						"aria-label": _(),
+						children: y()
+					}), /* @__PURE__ */ T("select", {
+						"aria-label": y(),
 						value: `${e.store.state.pagination.pageSize}`,
 						onChange: (t) => {
 							e.setPageSize(Number(t.target.value));
 						},
 						className: "h-8 w-fit min-w-16 rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-						children: t.map((e) => /* @__PURE__ */ C("option", {
+						children: t.map((e) => /* @__PURE__ */ T("option", {
 							value: `${e}`,
 							children: e
 						}, e))
 					})]
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex w-24 items-center justify-center text-sm font-medium",
-					children: se({
+					children: ae({
 						current: e.store.state.pagination.pageIndex + 1,
 						total: e.getPageCount()
 					})
 				}),
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ E("div", {
 					className: "flex items-center space-x-2",
 					children: [
-						/* @__PURE__ */ w(n, {
+						/* @__PURE__ */ E(n, {
 							variant: "default",
 							size: "icon",
 							className: "hidden h-8 w-8 lg:flex hover:bg-primary/90",
+							"aria-label": h(),
 							onClick: () => e.setPageIndex(0),
 							disabled: !e.getCanPreviousPage(),
-							children: [/* @__PURE__ */ C("span", {
+							children: [/* @__PURE__ */ T("span", {
 								className: "sr-only",
-								children: g()
-							}), /* @__PURE__ */ C(k, { className: "h-4 w-4" })]
+								children: h()
+							}), /* @__PURE__ */ T(j, { className: "h-4 w-4" })]
 						}),
-						/* @__PURE__ */ w(n, {
+						/* @__PURE__ */ E(n, {
 							variant: "default",
 							size: "icon",
 							className: "h-8 w-8 hover:bg-primary/90",
+							"aria-label": v(),
 							onClick: () => e.previousPage(),
 							disabled: !e.getCanPreviousPage(),
-							children: [/* @__PURE__ */ C("span", {
+							children: [/* @__PURE__ */ T("span", {
 								className: "sr-only",
-								children: ie()
-							}), /* @__PURE__ */ C(E, { className: "h-4 w-4" })]
+								children: v()
+							}), /* @__PURE__ */ T(O, { className: "h-4 w-4" })]
 						}),
-						/* @__PURE__ */ w(n, {
+						/* @__PURE__ */ E(n, {
 							variant: "default",
 							size: "icon",
 							className: "h-8 w-8 hover:bg-primary/90",
+							"aria-label": _(),
 							onClick: () => e.nextPage(),
 							disabled: !e.getCanNextPage(),
-							children: [/* @__PURE__ */ C("span", {
+							children: [/* @__PURE__ */ T("span", {
 								className: "sr-only",
-								children: re()
-							}), /* @__PURE__ */ C(D, { className: "h-4 w-4" })]
+								children: _()
+							}), /* @__PURE__ */ T(k, { className: "h-4 w-4" })]
 						}),
-						/* @__PURE__ */ w(n, {
+						/* @__PURE__ */ E(n, {
 							variant: "default",
 							size: "icon",
 							className: "hidden h-8 w-8 lg:flex hover:bg-primary/90",
+							"aria-label": g(),
 							onClick: () => e.setPageIndex(e.getPageCount() - 1),
 							disabled: !e.getCanNextPage(),
-							children: [/* @__PURE__ */ C("span", {
+							children: [/* @__PURE__ */ T("span", {
 								className: "sr-only",
-								children: ne()
-							}), /* @__PURE__ */ C(A, { className: "h-4 w-4" })]
+								children: g()
+							}), /* @__PURE__ */ T(M, { className: "h-4 w-4" })]
 						})
 					]
 				})
@@ -471,7 +490,7 @@ function I({ table: e, pageSizeOptions: t = [
 		})]
 	});
 }
-function Te({ table: e, pageSizeOptions: t = [
+function we({ table: e, pageSizeOptions: t = [
 	10,
 	20,
 	30,
@@ -479,37 +498,39 @@ function Te({ table: e, pageSizeOptions: t = [
 	100
 ] }) {
 	let r = e.getPageCount();
-	return /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ E("div", {
 		className: "flex items-center gap-1",
-		children: [/* @__PURE__ */ C("select", {
-			"aria-label": _(),
+		children: [/* @__PURE__ */ T("select", {
+			"aria-label": y(),
 			value: `${e.store.state.pagination.pageSize}`,
 			onChange: (t) => {
 				e.setPageSize(Number(t.target.value));
 			},
 			className: "h-8 w-fit min-w-16 rounded-md border border-input bg-background px-2 py-1 text-sm",
-			children: t.map((e) => /* @__PURE__ */ C("option", {
+			children: t.map((e) => /* @__PURE__ */ T("option", {
 				value: `${e}`,
 				children: e
 			}, e))
-		}), r > 1 && /* @__PURE__ */ w(S, { children: [
-			/* @__PURE__ */ C(n, {
+		}), r > 1 && /* @__PURE__ */ E(w, { children: [
+			/* @__PURE__ */ T(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
+				"aria-label": h(),
 				onClick: () => e.setPageIndex(0),
 				disabled: e.store.state.pagination.pageIndex === 0,
-				children: /* @__PURE__ */ C(k, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ T(j, { className: "h-4 w-4" })
 			}),
-			/* @__PURE__ */ C(n, {
+			/* @__PURE__ */ T(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
+				"aria-label": v(),
 				onClick: () => e.previousPage(),
 				disabled: !e.getCanPreviousPage(),
-				children: /* @__PURE__ */ C(E, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ T(O, { className: "h-4 w-4" })
 			}),
-			/* @__PURE__ */ w("span", {
+			/* @__PURE__ */ E("span", {
 				className: "text-sm text-muted-foreground whitespace-nowrap px-1",
 				children: [
 					e.store.state.pagination.pageIndex + 1,
@@ -517,26 +538,28 @@ function Te({ table: e, pageSizeOptions: t = [
 					r
 				]
 			}),
-			/* @__PURE__ */ C(n, {
+			/* @__PURE__ */ T(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
+				"aria-label": _(),
 				onClick: () => e.nextPage(),
 				disabled: !e.getCanNextPage(),
-				children: /* @__PURE__ */ C(D, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ T(k, { className: "h-4 w-4" })
 			}),
-			/* @__PURE__ */ C(n, {
+			/* @__PURE__ */ T(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
+				"aria-label": g(),
 				onClick: () => e.setPageIndex(r - 1),
 				disabled: e.store.state.pagination.pageIndex === r - 1,
-				children: /* @__PURE__ */ C(A, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ T(M, { className: "h-4 w-4" })
 			})
 		] })]
 	});
 }
 //#endregion
-export { P as DataTable, I as DataTablePagination, Te as DataTablePaginationCompact, F as DataTableViewOptions };
+export { Ce as DataTable, R as DataTablePagination, we as DataTablePaginationCompact, L as DataTableViewOptions };
 
 //# sourceMappingURL=data-table.js.map