@alneas/appkit-react 0.1.0 → 0.3.0

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

@@ -7,109 +7,133 @@ import { DropdownMenu as i, DropdownMenuCheckboxItem as a, DropdownMenuContent a
 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 { dataTable_goToLastPage as _ } from "../../paraglide/messages/datatable_gotolastpage4.js";
+import { dataTable_goToNextPage as v } from "../../paraglide/messages/datatable_gotonextpage4.js";
+import { dataTable_goToPreviousPage as y } from "../../paraglide/messages/datatable_gotopreviouspage4.js";
+import { dataTable_items as ne } from "../../paraglide/messages/datatable_items1.js";
+import { dataTable_noResults as re } from "../../paraglide/messages/datatable_noresults2.js";
+import { dataTable_page as ie } from "../../paraglide/messages/datatable_page1.js";
+import { dataTable_rowsPerPage as b } from "../../paraglide/messages/datatable_rowsperpage3.js";
+import { dataTable_rowsSelected as x } from "../../paraglide/messages/datatable_rowsselected2.js";
+import { dataTable_toggleColumns as S } from "../../paraglide/messages/datatable_togglecolumns2.js";
+import { dataTable_view as C } from "../../paraglide/messages/datatable_view1.js";
+import { dataTableFeatures as ae, flexRender as oe, useTable as se } from "./table-engine.js";
+import { getLeafColumnIds as ce, reorderVisibleColumns as le } from "./column-order.js";
+import { useDataTableStore as w } from "./table-store.js";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import * as O from "react";
+import { ChevronDown as ue, ChevronLeft as k, ChevronRight as A, ChevronUp as j, ChevronsLeft as M, ChevronsRight as N, Filter as de, GripVertical as P, Plus as fe, Settings2 as F } from "lucide-react";
+import { DragDropProvider as pe } from "@dnd-kit/react";
+import { Feedback as me, PointerActivationConstraints as he, PointerSensor as ge } from "@dnd-kit/dom";
+import { closestCenter as I } from "@dnd-kit/collision";
+import { isSortable as _e, useSortable as L } from "@dnd-kit/react/sortable";
 //#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({
-		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,
+function ve({ header: t, enableColumnOrdering: n = !0, enableMultiSort: r = !1, sortIndex: i, sortableIndex: a, sortableGroup: o, registeredIds: s }) {
+	let c = n && !t.isPlaceholder && t.column.columns.length === 0, { ref: l, handleRef: u, isDragging: d } = L({
+		id: t.id,
+		index: a,
+		group: o,
+		type: o,
+		accept: o,
+		data: {
+			columnId: t.column.id,
+			groupId: o,
+			columnIds: s
+		},
+		disabled: !c,
+		collisionDetector: I
+	}), f = t.column.getCanSort(), p = t.column.getIsSorted(), ee = p !== !1, h = f && typeof t.column.columnDef.header != "function" ? "button" : "span", te = n ? {
+		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, {
-		ref: n ? s : void 0,
-		style: ee,
-		...n ? {
-			...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", {
+	} : {};
+	return /* @__PURE__ */ D(m, {
+		ref: c ? l : void 0,
+		colSpan: t.colSpan,
+		"aria-hidden": t.isPlaceholder || void 0,
+		style: te,
+		"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: [c && /* @__PURE__ */ E("button", {
+			type: "button",
+			ref: u,
+			"aria-label": `Reorder column ${t.column.id}`,
+			className: "inline-flex h-6 w-6 items-center justify-center cursor-grab",
+			children: /* @__PURE__ */ E(P, {
+				className: "h-3 w-3",
+				"aria-hidden": "true"
+			})
+		}), t.isPlaceholder ? null : /* @__PURE__ */ D("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__ */ E(h, {
+				className: e(ee && "font-semibold"),
+				...h === "button" ? {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation(), t.column.toggleSorting(void 0, r && e.shiftKey);
+					}
+				} : {},
+				children: oe(t.column.columnDef.header, t.getContext())
+			}), ee && /* @__PURE__ */ D("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: [E(p === "asc" ? j : ue, { className: "h-3.5 w-3.5" }), r && i !== void 0 && i >= 0 && /* @__PURE__ */ E("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 ye({ 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: _, rowCount: v, onPaginationChange: y, onSortingChange: ie, onColumnFiltersChange: b, onRowClick: x, onSelectionChange: S, rowIdField: C = "id", manualPagination: T = !1, manualSorting: ue = !1, manualFiltering: k = !1, filterColumn: A, sorting: j, pagination: M, enableColumnOrdering: N = !0, containerClassName: P, tableClassName: F, pageSizeOptions: I = [
 	10,
 	20,
 	30,
 	50,
 	100
-], filterLayout: P = "inline", defaultFilterOpen: Ee = !1, activeFiltersContent: L }) {
+], filterLayout: L = "inline", defaultFilterOpen: ye = !1, activeFiltersContent: B }) {
 	"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 xe = w((e) => e.getTableSettings), Se = w((e) => e.setTableSettings), V = w((e) => e._hasHydrated), H = O.useSyncExternalStore(O.useCallback(() => () => {}, []), () => !0, () => !1), [U, Ce] = O.useState(ye), [we, Te] = O.useState(j || []), [W, Ee] = O.useState([]), [G, De] = O.useState({}), [Oe, ke] = O.useState({}), [Ae, je] = O.useState(M || {
 		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([
+	}), [K, q] = O.useState(ce(t)), Me = M !== void 0, J = j ?? we, Y = M ?? Ae, Ne = (e) => {
+		let t = typeof e == "function" ? e(J) : e;
+		j === void 0 && Te(t), ie?.(t);
+	}, Pe = (e) => {
+		let t = typeof e == "function" ? e(Y) : e;
+		M === void 0 && je(t), y?.(t);
+	}, [Fe, Ie] = O.useState(null), Le = O.useMemo(() => JSON.stringify([...u ? ["rowNumber"] : [], ...ce(t)]), [t, u]), X = O.useMemo(() => new Set(JSON.parse(Le)), [Le]), Z = s ? JSON.stringify([
 		s,
-		q,
-		!!O,
-		!!k
+		Le,
+		!!j,
+		!!M
 	]) : null;
-	if (R && s && K !== Y) {
-		He(Y);
-		let e = De(s);
+	if (V && s && Fe !== Z) {
+		Ie(Z);
+		let e = xe(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 (!j && e.sorting && e.sorting.length > 0) {
+				let t = e.sorting.filter((e) => X.has(e.id));
+				t.length > 0 && Te(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 && De(t);
 			}
-			if (!k && e.pageSize && e.pageSize !== 10 && Re((t) => ({
+			if (!M && e.pageSize && e.pageSize !== 10 && je((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 && q(i);
 			}
 		}
 	}
-	let Ue = T.useMemo(() => ({
+	let Re = O.useMemo(() => ({
 		id: "rowNumber",
 		header: "No",
 		enableSorting: !1,
@@ -117,8 +141,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;
+	}), []), ze = O.useMemo(() => {
+		let e = u ? [Re, ...t] : t;
 		return c ? e.map((e) => ({
 			...e,
 			enableSorting: e.enableSorting !== !1
@@ -126,247 +150,268 @@ function P({ columns: t, data: i, variant: a = "default", filterContent: o, stor
 	}, [
 		u,
 		t,
-		Ue,
+		Re,
 		c
-	]), We = T.useCallback((e) => {
-		if (b) return b.split("_").reduce((e, t) => {
+	]), Be = O.useCallback((e) => {
+		if (C) return C.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
+	}, [C]);
+	O.useEffect(() => {
+		s && V && Fe === Z && Se(s, {
+			columnOrder: K,
+			columnVisibility: G,
+			sorting: J,
+			pageSize: Y.pageSize
 		});
 	}, [
 		s,
-		H,
-		V,
-		W,
-		G.pageSize,
-		Oe,
-		R,
 		K,
-		Y
-	]), T.useEffect(() => {
-		E && _ && _(B);
+		G,
+		J,
+		Y.pageSize,
+		Se,
+		V,
+		Fe,
+		Z
+	]), O.useEffect(() => {
+		k && b && b(W);
 	}, [
-		B,
-		E,
-		_
+		W,
+		k,
+		b
 	]);
-	let Z = ue({
-		features: ce,
+	let Q = se({
+		features: ae,
 		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: ze,
+		pageCount: T ? _ : void 0,
+		rowCount: T ? v : void 0,
+		getRowId: C ? (e, t) => {
+			let n = C.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: J,
+			columnFilters: W,
+			columnVisibility: G,
+			rowSelection: Oe,
+			pagination: Y,
+			columnOrder: K
 		},
 		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: ke,
+		onSortingChange: Ne,
+		onColumnFiltersChange: Ee,
+		onColumnVisibilityChange: De,
+		onPaginationChange: Pe,
+		onColumnOrderChange: q,
+		autoResetPageIndex: T || Me ? !1 : void 0,
+		manualPagination: T,
+		manualSorting: ue,
+		manualFiltering: k
 	});
-	T.useEffect(() => {
-		y && y(Z.getFilteredSelectedRowModel().rows.map((e) => e.original));
+	O.useEffect(() => {
+		S && S(Q.getFilteredSelectedRowModel().rows.map((e) => e.original));
 	}, [
-		Fe,
-		Z,
-		y
+		Oe,
+		Q,
+		S
 	]);
-	let Ge = ye(ve(ge, { activationConstraint: { distance: 8 } }), ve(he, { coordinateGetter: Ce })), Ke = T.useCallback((e) => {
-		let { active: t, over: n } = e;
-		t && n && t.id !== n.id && U((e) => {
-			let r = e.indexOf(t.id), i = e.indexOf(n.id);
-			return xe(e, r, i);
+	let Ve = O.useRef(null), He = O.useCallback((e) => {
+		let t = e.operation.source;
+		t && Array.isArray(t.data.columnIds) && (Ve.current = {
+			sourceId: String(t.id),
+			groupId: t.data.groupId,
+			ids: [...t.data.columnIds],
+			leafIds: Q.getAllLeafColumns().map((e) => e.id),
+			order: [...K]
 		});
-	}, []), 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, {
-					header: e,
-					enableColumnOrdering: A,
+	}, [Q, K]), Ue = O.useCallback((e) => {
+		let t = Ve.current;
+		Ve.current = null;
+		let { source: n, target: r } = e.operation;
+		if (e.canceled || !N || !t || !r || !_e(n) || String(n.id) !== t.sourceId) return;
+		let i = Q.getAllLeafColumns().map((e) => e.id), a = Q.getHeaderGroups().find((e) => e.id === t.groupId)?.headers.filter((e) => !e.isPlaceholder && e.column.columns.length === 0).map((e) => e.column.id);
+		a && JSON.stringify(a) === JSON.stringify(t.ids) && JSON.stringify(i) === JSON.stringify(t.leafIds) && JSON.stringify(K) === JSON.stringify(t.order) && q((e) => le(e, i, t.ids, n.data.columnId, n.initialIndex, n.index));
+	}, [
+		Q,
+		K,
+		N
+	]), We = O.useCallback((e) => J.findIndex((t) => t.id === e), [J]), Ge = O.useCallback(() => /* @__PURE__ */ E(pe, {
+		sensors: (e) => [...e.filter((e) => e !== ge), ge.configure({ activationConstraints: [new he.Distance({ value: 8 })] })],
+		plugins: (e) => [...e, me.configure({
+			feedback: "clone",
+			dropAnimation: { duration: 0 }
+		})],
+		onDragStart: He,
+		onDragEnd: Ue,
+		children: /* @__PURE__ */ E("div", {
+			className: e("rounded-md border", F),
+			children: /* @__PURE__ */ D(d, { children: [/* @__PURE__ */ E(ee, { children: Q.getHeaderGroups().map((e) => {
+				let t = e.headers.filter((e) => !e.isPlaceholder && e.column.columns.length === 0).map((e) => e.column.id);
+				return /* @__PURE__ */ E(h, { children: e.headers.map((n) => /* @__PURE__ */ E(ve, {
+					header: n,
+					enableColumnOrdering: N,
 					enableMultiSort: l,
-					sortIndex: qe(e.column.id)
-				}, e.id)) })
-			}, e.id)) }), /* @__PURE__ */ C(f, { children: Z.getRowModel().rows?.length ? Z.getRowModel().rows.map((e) => /* @__PURE__ */ C(h, {
+					sortIndex: We(n.column.id),
+					sortableIndex: t.indexOf(n.column.id),
+					sortableGroup: e.id,
+					registeredIds: t
+				}, n.id)) }, e.id);
+			}) }), /* @__PURE__ */ E(f, { children: Q.getRowModel().rows?.length ? Q.getRowModel().rows.map((e) => /* @__PURE__ */ E(h, {
 				"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: () => x && x(Be(e.original)),
+				className: x ? "cursor-pointer hover:bg-muted/50" : void 0,
+				children: e.getVisibleCells().map((e) => /* @__PURE__ */ E(p, { children: oe(e.column.columnDef.cell, e.getContext()) }, e.id))
+			}, e.id)) : /* @__PURE__ */ E(h, { children: /* @__PURE__ */ E(p, {
+				colSpan: ze.length,
 				className: "h-24 text-center",
-				children: oe()
+				children: re()
 			}) }) })] })
 		})
 	}), [
-		Ge,
-		Ke,
-		Z,
-		X,
-		H,
-		A,
+		He,
+		Ue,
+		Q,
+		ze,
+		K,
+		N,
 		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, {
+		x,
+		Be,
+		F
+	]), $ = () => /* @__PURE__ */ E("div", {
+		className: e("rounded-md border", F),
+		children: /* @__PURE__ */ E(d, { children: /* @__PURE__ */ E(f, { children: /* @__PURE__ */ E(h, { children: /* @__PURE__ */ E(p, {
 			className: "h-24 text-center",
-			children: /* @__PURE__ */ C("div", {
+			children: /* @__PURE__ */ E("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__ */ D("div", {
+		className: e("space-y-4", P),
+		children: [H ? Ge() : $(), /* @__PURE__ */ E(z, {
+			table: Q,
+			pageSizeOptions: I
 		})]
-	}) : a === "toolbar" ? /* @__PURE__ */ w("div", {
-		className: e("relative h-full", j),
-		children: [g && /* @__PURE__ */ C("div", {
+	}) : a === "toolbar" ? /* @__PURE__ */ D("div", {
+		className: e("relative h-full", P),
+		children: [g && /* @__PURE__ */ E("div", {
 			className: "absolute left-0 top-0 w-full h-full z-10 pointer-events-none",
-			children: /* @__PURE__ */ C("div", {
+			children: /* @__PURE__ */ E("div", {
 				className: "fixed right-4 bottom-10 pointer-events-auto",
-				children: /* @__PURE__ */ C(n, {
+				children: /* @__PURE__ */ E(n, {
 					type: "button",
 					size: "icon",
+					"aria-label": "Add row",
 					onClick: g,
 					className: "w-12 h-12 rounded-full shadow-lg",
-					children: /* @__PURE__ */ C(pe, { className: "w-6 h-6" })
+					children: /* @__PURE__ */ E(fe, { className: "w-6 h-6" })
 				})
 			})
-		}), /* @__PURE__ */ w("div", {
+		}), /* @__PURE__ */ D("div", {
 			className: "relative h-full flex flex-col",
 			children: [
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ D("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__ */ D("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__ */ E(R, { table: Q }),
+							o && L === "inline" && o,
+							o && L === "panel" && /* @__PURE__ */ D(n, {
 								type: "button",
-								variant: ke ? "default" : "outline",
+								variant: U ? "default" : "outline",
 								size: "sm",
-								onClick: () => Ae(!ke),
+								onClick: () => Ce(!U),
 								className: "h-8 gap-1.5",
-								children: [/* @__PURE__ */ C(fe, { className: "h-4 w-4" }), /* @__PURE__ */ C("span", { children: "フィルター" })]
+								children: [/* @__PURE__ */ E(de, { className: "h-4 w-4" }), /* @__PURE__ */ E("span", { children: "フィルター" })]
 							})
 						]
-					}), /* @__PURE__ */ w("div", {
+					}), /* @__PURE__ */ D("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__ */ E(be, {
+							table: Q,
+							pageSizeOptions: I
+						}), typeof m == "number" && /* @__PURE__ */ E("span", {
 							className: "text-sm text-muted-foreground whitespace-nowrap",
-							children: `${m.toLocaleString()} ${ae()}`
+							children: `${m.toLocaleString()} ${ne()}`
 						})]
 					})]
 				}),
-				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 && L === "panel" && /* @__PURE__ */ E("div", {
+					className: e("border-b transition-all duration-200 ease-in-out overflow-hidden bg-background", U ? "max-h-[500px] p-4" : "max-h-0 p-0 border-none"),
 					children: o
 				}),
-				L && /* @__PURE__ */ C("div", {
+				B && /* @__PURE__ */ E("div", {
 					className: "bg-background px-4 py-1.5 border-b",
-					children: L
+					children: B
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ E("div", {
 					className: "flex-1 overflow-auto",
-					children: z ? Q() : $()
+					children: H ? Ge() : $()
 				})
 			]
 		})]
-	}) : /* @__PURE__ */ w("div", {
-		className: e("space-y-4", j),
+	}) : /* @__PURE__ */ D("div", {
+		className: e("space-y-4", P),
 		children: [
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ D("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ C("div", {
+				children: [/* @__PURE__ */ E("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: A && /* @__PURE__ */ E(r, {
+						placeholder: te({ column: A }),
+						value: Q.getColumn(A)?.getFilterValue() ?? "",
+						onChange: (e) => Q.getColumn(A)?.setFilterValue(e.target.value),
 						className: "max-w-sm"
 					})
-				}), /* @__PURE__ */ C(F, { table: Z })]
+				}), /* @__PURE__ */ E(R, { table: Q })]
 			}),
-			L && /* @__PURE__ */ C("div", {
+			B && /* @__PURE__ */ E("div", {
 				className: "border rounded-md bg-background px-3 py-1",
-				children: L
+				children: B
 			}),
-			z ? Q() : $(),
-			/* @__PURE__ */ C(I, {
-				table: Z,
-				pageSizeOptions: N
+			H ? Ge() : $(),
+			/* @__PURE__ */ E(z, {
+				table: Q,
+				pageSizeOptions: I
 			}),
-			g && /* @__PURE__ */ C("div", {
+			g && /* @__PURE__ */ E("div", {
 				className: "fixed right-4 bottom-10 z-10",
-				children: /* @__PURE__ */ C(n, {
+				children: /* @__PURE__ */ E(n, {
 					type: "button",
 					size: "icon",
 					onClick: g,
 					className: "w-12 h-12 rounded-full shadow-lg",
-					children: /* @__PURE__ */ C(pe, { className: "w-6 h-6" })
+					children: /* @__PURE__ */ E(fe, { className: "w-6 h-6" })
 				})
 			})
 		]
 	});
 }
-function F({ table: e }) {
-	return /* @__PURE__ */ w(i, { children: [/* @__PURE__ */ w(u, {
+function R({ table: e }) {
+	return /* @__PURE__ */ D(i, { children: [/* @__PURE__ */ D(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__ */ E(F, { className: "mr-2 h-4 w-4" }), C()]
+	}), /* @__PURE__ */ E(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__ */ D(s, { children: [
+			/* @__PURE__ */ E(c, { children: S() }),
+			/* @__PURE__ */ E(l, {}),
+			e.getAllColumns().filter((e) => e.accessorFn !== void 0 && e.getCanHide()).map((e) => /* @__PURE__ */ E(a, {
 				className: "capitalize",
 				checked: e.getIsVisible(),
 				onCheckedChange: (t) => e.toggleVisibility(!!t),
@@ -375,95 +420,99 @@ function F({ table: e }) {
 		] })
 	})] });
 }
-function I({ table: e, pageSizeOptions: t = [
+function z({ table: e, pageSizeOptions: t = [
 	10,
 	20,
 	30,
 	50,
 	100
 ] }) {
-	return /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ D("div", {
 		className: "flex items-center justify-between px-2",
-		children: [/* @__PURE__ */ C("div", {
+		children: [/* @__PURE__ */ E("div", {
 			className: "flex-1 text-sm text-muted-foreground",
-			children: v({
+			children: x({
 				selected: e.getFilteredSelectedRowModel().rows.length,
 				total: e.getFilteredRowModel().rows.length
 			})
-		}), /* @__PURE__ */ w("div", {
+		}), /* @__PURE__ */ D("div", {
 			className: "flex items-center space-x-6 lg:space-x-8",
 			children: [
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ D("div", {
 					className: "flex items-center space-x-2",
-					children: [/* @__PURE__ */ C("p", {
+					children: [/* @__PURE__ */ E("p", {
 						className: "text-sm font-medium",
-						children: _()
-					}), /* @__PURE__ */ C("select", {
-						"aria-label": _(),
+						children: b()
+					}), /* @__PURE__ */ E("select", {
+						"aria-label": b(),
 						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__ */ E("option", {
 							value: `${e}`,
 							children: e
 						}, e))
 					})]
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ E("div", {
 					className: "flex w-24 items-center justify-center text-sm font-medium",
-					children: se({
+					children: ie({
 						current: e.store.state.pagination.pageIndex + 1,
 						total: e.getPageCount()
 					})
 				}),
-				/* @__PURE__ */ w("div", {
+				/* @__PURE__ */ D("div", {
 					className: "flex items-center space-x-2",
 					children: [
-						/* @__PURE__ */ w(n, {
+						/* @__PURE__ */ D(n, {
 							variant: "default",
 							size: "icon",
 							className: "hidden h-8 w-8 lg:flex hover:bg-primary/90",
+							"aria-label": g(),
 							onClick: () => e.setPageIndex(0),
 							disabled: !e.getCanPreviousPage(),
-							children: [/* @__PURE__ */ C("span", {
+							children: [/* @__PURE__ */ E("span", {
 								className: "sr-only",
 								children: g()
-							}), /* @__PURE__ */ C(k, { className: "h-4 w-4" })]
+							}), /* @__PURE__ */ E(M, { className: "h-4 w-4" })]
 						}),
-						/* @__PURE__ */ w(n, {
+						/* @__PURE__ */ D(n, {
 							variant: "default",
 							size: "icon",
 							className: "h-8 w-8 hover:bg-primary/90",
+							"aria-label": y(),
 							onClick: () => e.previousPage(),
 							disabled: !e.getCanPreviousPage(),
-							children: [/* @__PURE__ */ C("span", {
+							children: [/* @__PURE__ */ E("span", {
 								className: "sr-only",
-								children: ie()
-							}), /* @__PURE__ */ C(E, { className: "h-4 w-4" })]
+								children: y()
+							}), /* @__PURE__ */ E(k, { className: "h-4 w-4" })]
 						}),
-						/* @__PURE__ */ w(n, {
+						/* @__PURE__ */ D(n, {
 							variant: "default",
 							size: "icon",
 							className: "h-8 w-8 hover:bg-primary/90",
+							"aria-label": v(),
 							onClick: () => e.nextPage(),
 							disabled: !e.getCanNextPage(),
-							children: [/* @__PURE__ */ C("span", {
+							children: [/* @__PURE__ */ E("span", {
 								className: "sr-only",
-								children: re()
-							}), /* @__PURE__ */ C(D, { className: "h-4 w-4" })]
+								children: v()
+							}), /* @__PURE__ */ E(A, { className: "h-4 w-4" })]
 						}),
-						/* @__PURE__ */ w(n, {
+						/* @__PURE__ */ D(n, {
 							variant: "default",
 							size: "icon",
 							className: "hidden h-8 w-8 lg:flex hover:bg-primary/90",
+							"aria-label": _(),
 							onClick: () => e.setPageIndex(e.getPageCount() - 1),
 							disabled: !e.getCanNextPage(),
-							children: [/* @__PURE__ */ C("span", {
+							children: [/* @__PURE__ */ E("span", {
 								className: "sr-only",
-								children: ne()
-							}), /* @__PURE__ */ C(A, { className: "h-4 w-4" })]
+								children: _()
+							}), /* @__PURE__ */ E(N, { className: "h-4 w-4" })]
 						})
 					]
 				})
@@ -471,7 +520,7 @@ function I({ table: e, pageSizeOptions: t = [
 		})]
 	});
 }
-function Te({ table: e, pageSizeOptions: t = [
+function be({ table: e, pageSizeOptions: t = [
 	10,
 	20,
 	30,
@@ -479,37 +528,39 @@ function Te({ table: e, pageSizeOptions: t = [
 	100
 ] }) {
 	let r = e.getPageCount();
-	return /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ D("div", {
 		className: "flex items-center gap-1",
-		children: [/* @__PURE__ */ C("select", {
-			"aria-label": _(),
+		children: [/* @__PURE__ */ E("select", {
+			"aria-label": b(),
 			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__ */ E("option", {
 				value: `${e}`,
 				children: e
 			}, e))
-		}), r > 1 && /* @__PURE__ */ w(S, { children: [
-			/* @__PURE__ */ C(n, {
+		}), r > 1 && /* @__PURE__ */ D(T, { children: [
+			/* @__PURE__ */ E(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
+				"aria-label": g(),
 				onClick: () => e.setPageIndex(0),
 				disabled: e.store.state.pagination.pageIndex === 0,
-				children: /* @__PURE__ */ C(k, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ E(M, { className: "h-4 w-4" })
 			}),
-			/* @__PURE__ */ C(n, {
+			/* @__PURE__ */ E(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
+				"aria-label": y(),
 				onClick: () => e.previousPage(),
 				disabled: !e.getCanPreviousPage(),
-				children: /* @__PURE__ */ C(E, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ E(k, { className: "h-4 w-4" })
 			}),
-			/* @__PURE__ */ w("span", {
+			/* @__PURE__ */ D("span", {
 				className: "text-sm text-muted-foreground whitespace-nowrap px-1",
 				children: [
 					e.store.state.pagination.pageIndex + 1,
@@ -517,26 +568,28 @@ function Te({ table: e, pageSizeOptions: t = [
 					r
 				]
 			}),
-			/* @__PURE__ */ C(n, {
+			/* @__PURE__ */ E(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
+				"aria-label": v(),
 				onClick: () => e.nextPage(),
 				disabled: !e.getCanNextPage(),
-				children: /* @__PURE__ */ C(D, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ E(A, { className: "h-4 w-4" })
 			}),
-			/* @__PURE__ */ C(n, {
+			/* @__PURE__ */ E(n, {
 				variant: "default",
 				size: "icon",
 				className: "h-8 w-8 hover:bg-primary/90",
+				"aria-label": _(),
 				onClick: () => e.setPageIndex(r - 1),
 				disabled: e.store.state.pagination.pageIndex === r - 1,
-				children: /* @__PURE__ */ C(A, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ E(N, { className: "h-4 w-4" })
 			})
 		] })]
 	});
 }
 //#endregion
-export { P as DataTable, I as DataTablePagination, Te as DataTablePaginationCompact, F as DataTableViewOptions };
+export { ye as DataTable, z as DataTablePagination, be as DataTablePaginationCompact, R as DataTableViewOptions };
 
 //# sourceMappingURL=data-table.js.map