lkd-web-kit 0.10.1 → 0.10.2

package/codex/skills/create-table-component/SKILL.md

@@ -14,9 +14,10 @@ Usar este skill para crear o refactorizar tablas del proyecto.
 3. Revisar un ejemplo cercano antes de editar; preferir `Table{EntityPlural}.tsx`.
 4. Crear o mantener la tabla en un componente encapsulado junto a la vista/feature que la consume.
 5. Usar `createColumnHelper<RowData>()`; no declarar `any`.
-6. Usar `MyTable` para renderizar la tabla.
-7. Usar `TableWrapper` como raiz visual de la tabla.
-8. No usar `MyTablePagination` para nuevas tablas.
+6. Importar `MyTable` y `TableWrapper*` desde `lkd-web-kit`.
+7. Usar `MyTable` para renderizar la tabla.
+8. Usar `TableWrapper` como raiz visual de la tabla.
+9. No usar `MyTablePagination` para nuevas tablas.
 
 ## Checklist antes de escribir columnas
 
@@ -107,14 +108,15 @@ const columns = [
 "use client";
 
 import { createColumnHelper } from "@tanstack/react-table";
-import { useMemo, useState } from "react";
-import MyTable from "src/components/ui/MyTable";
-import TableWrapper, {
+import {
+  MyTable,
+  TableWrapper,
   TableWrapperFooter,
   TableWrapperHeader,
   TableWrapperPagination,
   TableWrapperTitle,
-} from "src/components/ui/TableWrapper";
+} from "lkd-web-kit";
+import { useMemo, useState } from "react";
 
 type ItemTableData = {
   id: string;

package/dist/components/MyTable/MyTable.cjs

@@ -0,0 +1,172 @@
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let _mantine_core = require("@mantine/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+let _tanstack_react_table = require("@tanstack/react-table");
+//#region src/components/MyTable/MyTable.tsx
+var MyTable = ({ data, columns, highlightOnHover, isLoading, onRowClick, minWidth = 720, emptyMessage = "Sin datos", enableSorting, variant, layout, manualSorting, onSortingChange, sorting, ...props }) => {
+	const [theadHeight, setTheadHeight] = (0, react.useState)(0);
+	const setTheadRef = (0, react.useCallback)((node) => {
+		if (node) setTheadHeight(node.offsetHeight);
+	}, []);
+	const isSortingEnabled = enableSorting ?? (Boolean(sorting) || Boolean(onSortingChange));
+	const table = (0, _tanstack_react_table.useReactTable)({
+		data,
+		columns,
+		enableSorting: isSortingEnabled,
+		getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
+		getSortedRowModel: isSortingEnabled && !manualSorting ? (0, _tanstack_react_table.getSortedRowModel)() : void 0,
+		manualSorting,
+		onSortingChange,
+		state: sorting ? { sorting } : void 0
+	});
+	const rows = table.getRowModel().rows;
+	const isVertical = variant === "vertical";
+	const headersByColumnId = new Map(table.getFlatHeaders().map((header) => [header.column.id, header]));
+	const cellClassName = (0, clsx.default)(onRowClick && "cursor-pointer");
+	const renderHeaderContent = (header) => {
+		const content = (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext());
+		if (!isSortingEnabled || !header.column.getCanSort()) return content;
+		const sorted = header.column.getIsSorted();
+		const sortLabel = sorted === "asc" ? "Orden ascendente" : "Orden descendente";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				className: "whitespace-nowrap font-semibold text-grey-9 text-sm",
+				onClick: header.column.getToggleSortingHandler(),
+				type: "button",
+				children: content
+			}), sorted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Tooltip, {
+				label: sortLabel,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ActionIcon, {
+					"aria-label": sortLabel,
+					onClick: header.column.getToggleSortingHandler(),
+					size: "sm",
+					variant: "subtle",
+					children: sorted === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOrderAscending, {
+						"aria-hidden": "true",
+						className: "size-4"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOrderDescending, {
+						"aria-hidden": "true",
+						className: "size-4"
+					})
+				})
+			}) : null]
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Table.ScrollContainer, {
+		minWidth,
+		className: "relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.LoadingOverlay, {
+			visible: isLoading,
+			loaderProps: { type: "bars" },
+			overlayProps: { backgroundOpacity: .35 },
+			style: { top: isVertical ? 0 : theadHeight }
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Table, {
+			variant,
+			layout: layout ?? (isVertical ? "fixed" : void 0),
+			highlightOnHover: !isLoading && highlightOnHover,
+			...props,
+			children: [isVertical ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Thead, {
+				ref: setTheadRef,
+				children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Tr, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Th, { children: header.isPlaceholder ? null : renderHeaderContent(header) }, header.id)) }, headerGroup.id))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Table.Tbody, { children: [
+				rows.length === 0 && isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Tr, {
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Td, {
+						colSpan: isVertical ? 2 : columns.length,
+						className: "py-5",
+						children: "\xA0"
+					})
+				}),
+				isVertical ? rows.flatMap((row) => row.getVisibleCells().map((cell) => {
+					const header = headersByColumnId.get(cell.column.id);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Table.Tr, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Th, { children: header?.isPlaceholder || !header ? null : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Td, {
+						onClick: () => onRowClick?.(cell.row),
+						className: cellClassName,
+						children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+					})] }, cell.id);
+				})) : rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Tr, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Td, {
+					onClick: () => onRowClick?.(cell.row),
+					className: cellClassName,
+					children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+				}, cell.id)) }, row.id)),
+				rows.length === 0 && !isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Tr, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Table.Td, {
+					colSpan: isVertical ? 2 : columns.length,
+					className: "py-5",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
+						c: "dimmed",
+						size: "sm",
+						ta: "center",
+						children: emptyMessage
+					})
+				}) })
+			] })]
+		})]
+	});
+};
+var IconOrderAscending = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M11 5.25C11.4142 5.25 11.75 5.58579 11.75 6C11.75 6.41421 11.4142 6.75 11 6.75H4C3.58579 6.75 3.25 6.41421 3.25 6C3.25 5.58579 3.58579 5.25 4 5.25H11Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M11 11.25C11.4142 11.25 11.75 11.5858 11.75 12C11.75 12.4142 11.4142 12.75 11 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H11Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M13 17.25C13.4142 17.25 13.75 17.5858 13.75 18C13.75 18.4142 13.4142 18.75 13 18.75H4C3.58579 18.75 3.25 18.4142 3.25 18C3.25 17.5858 3.58579 17.25 4 17.25H13Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M17.5264 5.41796C17.821 5.17765 18.2557 5.19512 18.5303 5.46972L21.5303 8.46972C21.8232 8.76261 21.8232 9.23738 21.5303 9.53027C21.2374 9.82316 20.7626 9.82316 20.4697 9.53027L18 7.06054L15.5303 9.53027C15.2374 9.82316 14.7626 9.82316 14.4697 9.53027C14.1768 9.23738 14.1768 8.76261 14.4697 8.46972L17.4697 5.46972L17.5264 5.41796Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M17.25 18V6C17.25 5.58579 17.5858 5.25 18 5.25C18.4142 5.25 18.75 5.58579 18.75 6V18C18.75 18.4142 18.4142 18.75 18 18.75C17.5858 18.75 17.25 18.4142 17.25 18Z",
+			fill: "currentColor"
+		})
+	]
+});
+var IconOrderDescending = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M13 5.25C13.4142 5.25 13.75 5.58579 13.75 6C13.75 6.41421 13.4142 6.75 13 6.75H4C3.58579 6.75 3.25 6.41421 3.25 6C3.25 5.58579 3.58579 5.25 4 5.25H13Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M11 11.25C11.4142 11.25 11.75 11.5858 11.75 12C11.75 12.4142 11.4142 12.75 11 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H11Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M11 17.25C11.4142 17.25 11.75 17.5858 11.75 18C11.75 18.4142 11.4142 18.75 11 18.75H4C3.58579 18.75 3.25 18.4142 3.25 18C3.25 17.5858 3.58579 17.25 4 17.25H11Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M20.4697 14.4697C20.7626 14.1768 21.2374 14.1768 21.5303 14.4697C21.8232 14.7626 21.8232 15.2374 21.5303 15.5303L18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L14.4697 15.5303C14.1768 15.2374 14.1768 14.7626 14.4697 14.4697C14.7626 14.1768 15.2374 14.1768 15.5303 14.4697L18 16.9395L20.4697 14.4697Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M17.25 18V6C17.25 5.58579 17.5858 5.25 18 5.25C18.4142 5.25 18.75 5.58579 18.75 6V18C18.75 18.4142 18.4142 18.75 18 18.75C17.5858 18.75 17.25 18.4142 17.25 18Z",
+			fill: "currentColor"
+		})
+	]
+});
+//#endregion
+exports.default = MyTable;

package/dist/components/MyTable/MyTable.d.ts

@@ -0,0 +1,18 @@
+import { TableProps } from '@mantine/core';
+import { OnChangeFn, Row, SortingState, TableOptions } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+export interface MyTableProps<T> extends Omit<TableProps, 'data'> {
+    data: T[];
+    columns: TableOptions<T>['columns'];
+    isLoading?: boolean;
+    onRowClick?: (row: Row<T>) => void;
+    minWidth?: number;
+    emptyMessage?: ReactNode;
+    enableSorting?: boolean;
+    manualSorting?: boolean;
+    onSortingChange?: OnChangeFn<SortingState>;
+    sorting?: SortingState;
+}
+declare const MyTable: <T>({ data, columns, highlightOnHover, isLoading, onRowClick, minWidth, emptyMessage, enableSorting, variant, layout, manualSorting, onSortingChange, sorting, ...props }: MyTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default MyTable;
+//# sourceMappingURL=MyTable.d.ts.map

package/dist/components/MyTable/MyTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MyTable.d.ts","sourceRoot":"","sources":["../../../src/components/MyTable/MyTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqC,UAAU,EAAiB,MAAM,eAAe,CAAA;AAC5F,OAAO,EAML,UAAU,EACV,GAAG,EACH,YAAY,EACZ,YAAY,EAEb,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAkB,SAAS,EAAyB,MAAM,OAAO,CAAA;AAExE,MAAM,WAAW,YAAY,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;IAC/D,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAA;IAC1C,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,QAAA,MAAM,OAAO,GAAI,CAAC,EAAG,uKAelB,YAAY,CAAC,CAAC,CAAC,4CA4IjB,CAAA;AAkED,eAAe,OAAO,CAAA"}

package/dist/components/MyTable/MyTable.js

@@ -0,0 +1,170 @@
+"use client";
+import { ActionIcon, LoadingOverlay, Table, Text, Tooltip } from "@mantine/core";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+//#region src/components/MyTable/MyTable.tsx
+var MyTable = ({ data, columns, highlightOnHover, isLoading, onRowClick, minWidth = 720, emptyMessage = "Sin datos", enableSorting, variant, layout, manualSorting, onSortingChange, sorting, ...props }) => {
+	const [theadHeight, setTheadHeight] = useState(0);
+	const setTheadRef = useCallback((node) => {
+		if (node) setTheadHeight(node.offsetHeight);
+	}, []);
+	const isSortingEnabled = enableSorting ?? (Boolean(sorting) || Boolean(onSortingChange));
+	const table = useReactTable({
+		data,
+		columns,
+		enableSorting: isSortingEnabled,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: isSortingEnabled && !manualSorting ? getSortedRowModel() : void 0,
+		manualSorting,
+		onSortingChange,
+		state: sorting ? { sorting } : void 0
+	});
+	const rows = table.getRowModel().rows;
+	const isVertical = variant === "vertical";
+	const headersByColumnId = new Map(table.getFlatHeaders().map((header) => [header.column.id, header]));
+	const cellClassName = clsx(onRowClick && "cursor-pointer");
+	const renderHeaderContent = (header) => {
+		const content = flexRender(header.column.columnDef.header, header.getContext());
+		if (!isSortingEnabled || !header.column.getCanSort()) return content;
+		const sorted = header.column.getIsSorted();
+		const sortLabel = sorted === "asc" ? "Orden ascendente" : "Orden descendente";
+		return /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx("button", {
+				className: "whitespace-nowrap font-semibold text-grey-9 text-sm",
+				onClick: header.column.getToggleSortingHandler(),
+				type: "button",
+				children: content
+			}), sorted ? /* @__PURE__ */ jsx(Tooltip, {
+				label: sortLabel,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					"aria-label": sortLabel,
+					onClick: header.column.getToggleSortingHandler(),
+					size: "sm",
+					variant: "subtle",
+					children: sorted === "asc" ? /* @__PURE__ */ jsx(IconOrderAscending, {
+						"aria-hidden": "true",
+						className: "size-4"
+					}) : /* @__PURE__ */ jsx(IconOrderDescending, {
+						"aria-hidden": "true",
+						className: "size-4"
+					})
+				})
+			}) : null]
+		});
+	};
+	return /* @__PURE__ */ jsxs(Table.ScrollContainer, {
+		minWidth,
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(LoadingOverlay, {
+			visible: isLoading,
+			loaderProps: { type: "bars" },
+			overlayProps: { backgroundOpacity: .35 },
+			style: { top: isVertical ? 0 : theadHeight }
+		}), /* @__PURE__ */ jsxs(Table, {
+			variant,
+			layout: layout ?? (isVertical ? "fixed" : void 0),
+			highlightOnHover: !isLoading && highlightOnHover,
+			...props,
+			children: [isVertical ? null : /* @__PURE__ */ jsx(Table.Thead, {
+				ref: setTheadRef,
+				children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table.Tr, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(Table.Th, { children: header.isPlaceholder ? null : renderHeaderContent(header) }, header.id)) }, headerGroup.id))
+			}), /* @__PURE__ */ jsxs(Table.Tbody, { children: [
+				rows.length === 0 && isLoading && /* @__PURE__ */ jsx(Table.Tr, {
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(Table.Td, {
+						colSpan: isVertical ? 2 : columns.length,
+						className: "py-5",
+						children: "\xA0"
+					})
+				}),
+				isVertical ? rows.flatMap((row) => row.getVisibleCells().map((cell) => {
+					const header = headersByColumnId.get(cell.column.id);
+					return /* @__PURE__ */ jsxs(Table.Tr, { children: [/* @__PURE__ */ jsx(Table.Th, { children: header?.isPlaceholder || !header ? null : flexRender(header.column.columnDef.header, header.getContext()) }), /* @__PURE__ */ jsx(Table.Td, {
+						onClick: () => onRowClick?.(cell.row),
+						className: cellClassName,
+						children: flexRender(cell.column.columnDef.cell, cell.getContext())
+					})] }, cell.id);
+				})) : rows.map((row) => /* @__PURE__ */ jsx(Table.Tr, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table.Td, {
+					onClick: () => onRowClick?.(cell.row),
+					className: cellClassName,
+					children: flexRender(cell.column.columnDef.cell, cell.getContext())
+				}, cell.id)) }, row.id)),
+				rows.length === 0 && !isLoading && /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+					colSpan: isVertical ? 2 : columns.length,
+					className: "py-5",
+					children: /* @__PURE__ */ jsx(Text, {
+						c: "dimmed",
+						size: "sm",
+						ta: "center",
+						children: emptyMessage
+					})
+				}) })
+			] })]
+		})]
+	});
+};
+var IconOrderAscending = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			d: "M11 5.25C11.4142 5.25 11.75 5.58579 11.75 6C11.75 6.41421 11.4142 6.75 11 6.75H4C3.58579 6.75 3.25 6.41421 3.25 6C3.25 5.58579 3.58579 5.25 4 5.25H11Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M11 11.25C11.4142 11.25 11.75 11.5858 11.75 12C11.75 12.4142 11.4142 12.75 11 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H11Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M13 17.25C13.4142 17.25 13.75 17.5858 13.75 18C13.75 18.4142 13.4142 18.75 13 18.75H4C3.58579 18.75 3.25 18.4142 3.25 18C3.25 17.5858 3.58579 17.25 4 17.25H13Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M17.5264 5.41796C17.821 5.17765 18.2557 5.19512 18.5303 5.46972L21.5303 8.46972C21.8232 8.76261 21.8232 9.23738 21.5303 9.53027C21.2374 9.82316 20.7626 9.82316 20.4697 9.53027L18 7.06054L15.5303 9.53027C15.2374 9.82316 14.7626 9.82316 14.4697 9.53027C14.1768 9.23738 14.1768 8.76261 14.4697 8.46972L17.4697 5.46972L17.5264 5.41796Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M17.25 18V6C17.25 5.58579 17.5858 5.25 18 5.25C18.4142 5.25 18.75 5.58579 18.75 6V18C18.75 18.4142 18.4142 18.75 18 18.75C17.5858 18.75 17.25 18.4142 17.25 18Z",
+			fill: "currentColor"
+		})
+	]
+});
+var IconOrderDescending = (props) => /* @__PURE__ */ jsxs("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			d: "M13 5.25C13.4142 5.25 13.75 5.58579 13.75 6C13.75 6.41421 13.4142 6.75 13 6.75H4C3.58579 6.75 3.25 6.41421 3.25 6C3.25 5.58579 3.58579 5.25 4 5.25H13Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M11 11.25C11.4142 11.25 11.75 11.5858 11.75 12C11.75 12.4142 11.4142 12.75 11 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H11Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M11 17.25C11.4142 17.25 11.75 17.5858 11.75 18C11.75 18.4142 11.4142 18.75 11 18.75H4C3.58579 18.75 3.25 18.4142 3.25 18C3.25 17.5858 3.58579 17.25 4 17.25H11Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M20.4697 14.4697C20.7626 14.1768 21.2374 14.1768 21.5303 14.4697C21.8232 14.7626 21.8232 15.2374 21.5303 15.5303L18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L14.4697 15.5303C14.1768 15.2374 14.1768 14.7626 14.4697 14.4697C14.7626 14.1768 15.2374 14.1768 15.5303 14.4697L18 16.9395L20.4697 14.4697Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M17.25 18V6C17.25 5.58579 17.5858 5.25 18 5.25C18.4142 5.25 18.75 5.58579 18.75 6V18C18.75 18.4142 18.4142 18.75 18 18.75C17.5858 18.75 17.25 18.4142 17.25 18Z",
+			fill: "currentColor"
+		})
+	]
+});
+//#endregion
+export { MyTable as default };

package/dist/components/MyTable/index.d.ts

@@ -0,0 +1,3 @@
+export type { MyTableProps } from './MyTable';
+export { default as MyTable } from './MyTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MyTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MyTable/index.tsx"],"names":[],"mappings":"AAEA,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/TableWrapper/TableWrapper.cjs

@@ -0,0 +1,13 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+//#region src/components/TableWrapper/TableWrapper.tsx
+var TableWrapper = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Paper, {
+	component: "section",
+	className: (0, clsx.default)("flex flex-col px-1 py-0.5", className),
+	...props
+});
+//#endregion
+exports.default = TableWrapper;

package/dist/components/TableWrapper/TableWrapper.d.ts

@@ -0,0 +1,8 @@
+import { PaperProps } from '@mantine/core';
+import { ReactNode } from 'react';
+export interface TableWrapperProps extends PaperProps {
+    children?: ReactNode;
+}
+declare const TableWrapper: ({ className, ...props }: TableWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export default TableWrapper;
+//# sourceMappingURL=TableWrapper.d.ts.map

package/dist/components/TableWrapper/TableWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/TableWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,QAAA,MAAM,YAAY,GAAI,yBAAyB,iBAAiB,4CAE/D,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/components/TableWrapper/TableWrapper.js

@@ -0,0 +1,11 @@
+import { Paper } from "@mantine/core";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TableWrapper/TableWrapper.tsx
+var TableWrapper = ({ className, ...props }) => /* @__PURE__ */ jsx(Paper, {
+	component: "section",
+	className: clsx("flex flex-col px-1 py-0.5", className),
+	...props
+});
+//#endregion
+export { TableWrapper as default };

package/dist/components/TableWrapper/TableWrapperFooter.cjs

@@ -0,0 +1,11 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+//#region src/components/TableWrapper/TableWrapperFooter.tsx
+var TableWrapperFooter = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+	className: (0, clsx.default)("mt-3 flex justify-center p-2", className),
+	...props
+});
+//#endregion
+exports.default = TableWrapperFooter;

package/dist/components/TableWrapper/TableWrapperFooter.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+export type TableWrapperFooterProps = ComponentProps<'footer'>;
+declare const TableWrapperFooter: ({ className, ...props }: TableWrapperFooterProps) => import("react/jsx-runtime").JSX.Element;
+export default TableWrapperFooter;
+//# sourceMappingURL=TableWrapperFooter.d.ts.map

package/dist/components/TableWrapper/TableWrapperFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableWrapperFooter.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/TableWrapperFooter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAA;AAE9D,QAAA,MAAM,kBAAkB,GAAI,yBAAyB,uBAAuB,4CAE3E,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/dist/components/TableWrapper/TableWrapperFooter.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TableWrapper/TableWrapperFooter.tsx
+var TableWrapperFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("footer", {
+	className: clsx("mt-3 flex justify-center p-2", className),
+	...props
+});
+//#endregion
+export { TableWrapperFooter as default };

package/dist/components/TableWrapper/TableWrapperHeader.cjs

@@ -0,0 +1,11 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+//#region src/components/TableWrapper/TableWrapperHeader.tsx
+var TableWrapperHeader = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+	className: (0, clsx.default)("p-2", className),
+	...props
+});
+//#endregion
+exports.default = TableWrapperHeader;

package/dist/components/TableWrapper/TableWrapperHeader.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+export type TableWrapperHeaderProps = ComponentProps<'header'>;
+declare const TableWrapperHeader: ({ className, ...props }: TableWrapperHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default TableWrapperHeader;
+//# sourceMappingURL=TableWrapperHeader.d.ts.map

package/dist/components/TableWrapper/TableWrapperHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableWrapperHeader.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/TableWrapperHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAA;AAE9D,QAAA,MAAM,kBAAkB,GAAI,yBAAyB,uBAAuB,4CAE3E,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/dist/components/TableWrapper/TableWrapperHeader.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TableWrapper/TableWrapperHeader.tsx
+var TableWrapperHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("header", {
+	className: clsx("p-2", className),
+	...props
+});
+//#endregion
+export { TableWrapperHeader as default };

package/dist/components/TableWrapper/TableWrapperPagination.cjs

@@ -0,0 +1,31 @@
+require("../../_virtual/_rolldown/runtime.cjs");
+let _mantine_core = require("@mantine/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/TableWrapper/TableWrapperPagination.tsx
+var TableWrapperPagination = ({ variant = "long", text, totalRows = 15, pageSize = 10, currentRows = pageSize, value = 1, ...props }) => {
+	if (variant === "short") {
+		const start = totalRows > 0 ? (value - 1) * pageSize + 1 : 0;
+		const end = Math.min(start + currentRows - 1, totalRows);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex w-full items-center justify-end gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-grey-7 text-sm",
+				children: text ?? `${start}-${end} de ${totalRows} filas`
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Pagination, {
+				withPages: false,
+				value,
+				...props
+			})]
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Pagination, {
+		boundaries: 0,
+		siblings: 2,
+		withEdges: true,
+		classNames: { dots: "hidden" },
+		value,
+		...props
+	});
+};
+//#endregion
+exports.default = TableWrapperPagination;

package/dist/components/TableWrapper/TableWrapperPagination.d.ts

@@ -0,0 +1,16 @@
+import { PaginationProps } from '@mantine/core';
+type TableWrapperPaginationBaseProps = Omit<PaginationProps, 'boundaries' | 'siblings' | 'withControls' | 'withEdges' | 'variant'> & {
+    text?: string;
+    totalRows?: number;
+    currentRows?: number;
+};
+export type TableWrapperPaginationProps = (TableWrapperPaginationBaseProps & {
+    variant?: 'long';
+    pageSize?: number;
+}) | (TableWrapperPaginationBaseProps & {
+    variant: 'short';
+    pageSize: number;
+});
+declare const TableWrapperPagination: ({ variant, text, totalRows, pageSize, currentRows, value, ...props }: TableWrapperPaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default TableWrapperPagination;
+//# sourceMappingURL=TableWrapperPagination.d.ts.map

package/dist/components/TableWrapper/TableWrapperPagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableWrapperPagination.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/TableWrapperPagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAA;AAE3D,KAAK,+BAA+B,GAAG,IAAI,CACzC,eAAe,EACf,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,GAAG,SAAS,CACrE,GAAG;IACF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,2BAA2B,GACnC,CAAC,+BAA+B,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAC,GACF,CAAC,+BAA+B,GAAG;IACjC,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAC,CAAA;AAEN,QAAA,MAAM,sBAAsB,GAAI,sEAQ7B,2BAA2B,4CAyB7B,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/dist/components/TableWrapper/TableWrapperPagination.js

@@ -0,0 +1,30 @@
+import { Pagination } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TableWrapper/TableWrapperPagination.tsx
+var TableWrapperPagination = ({ variant = "long", text, totalRows = 15, pageSize = 10, currentRows = pageSize, value = 1, ...props }) => {
+	if (variant === "short") {
+		const start = totalRows > 0 ? (value - 1) * pageSize + 1 : 0;
+		const end = Math.min(start + currentRows - 1, totalRows);
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center justify-end gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-grey-7 text-sm",
+				children: text ?? `${start}-${end} de ${totalRows} filas`
+			}), /* @__PURE__ */ jsx(Pagination, {
+				withPages: false,
+				value,
+				...props
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsx(Pagination, {
+		boundaries: 0,
+		siblings: 2,
+		withEdges: true,
+		classNames: { dots: "hidden" },
+		value,
+		...props
+	});
+};
+//#endregion
+export { TableWrapperPagination as default };

package/dist/components/TableWrapper/TableWrapperTitle.cjs

@@ -0,0 +1,11 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+clsx = require_runtime.__toESM(clsx, 1);
+//#region src/components/TableWrapper/TableWrapperTitle.tsx
+var TableWrapperTitle = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+	className: (0, clsx.default)("font-semibold text-lg", className),
+	...props
+});
+//#endregion
+exports.default = TableWrapperTitle;

package/dist/components/TableWrapper/TableWrapperTitle.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+export type TableWrapperTitleProps = ComponentProps<'p'>;
+declare const TableWrapperTitle: ({ className, ...props }: TableWrapperTitleProps) => import("react/jsx-runtime").JSX.Element;
+export default TableWrapperTitle;
+//# sourceMappingURL=TableWrapperTitle.d.ts.map

package/dist/components/TableWrapper/TableWrapperTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableWrapperTitle.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/TableWrapperTitle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAA;AAExD,QAAA,MAAM,iBAAiB,GAAI,yBAAyB,sBAAsB,4CAEzE,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/components/TableWrapper/TableWrapperTitle.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/TableWrapper/TableWrapperTitle.tsx
+var TableWrapperTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
+	className: clsx("font-semibold text-lg", className),
+	...props
+});
+//#endregion
+export { TableWrapperTitle as default };

package/dist/components/TableWrapper/index.d.ts

@@ -0,0 +1,11 @@
+export type { TableWrapperProps } from './TableWrapper';
+export { default as TableWrapper } from './TableWrapper';
+export type { TableWrapperFooterProps } from './TableWrapperFooter';
+export { default as TableWrapperFooter } from './TableWrapperFooter';
+export type { TableWrapperHeaderProps } from './TableWrapperHeader';
+export { default as TableWrapperHeader } from './TableWrapperHeader';
+export type { TableWrapperPaginationProps } from './TableWrapperPagination';
+export { default as TableWrapperPagination } from './TableWrapperPagination';
+export type { TableWrapperTitleProps } from './TableWrapperTitle';
+export { default as TableWrapperTitle } from './TableWrapperTitle';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TableWrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TableWrapper/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACpE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAC5E,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/components/index.d.ts

@@ -12,8 +12,10 @@ export * from './MyNotifications';
 export * from './MyNumberInput';
 export * from './MyRadioGroup';
 export * from './MySelect';
+export * from './MyTable';
 export * from './MyTextarea';
 export * from './MyTextInput';
 export * from './MyTimeInput';
 export * from './NavItems';
+export * from './TableWrapper';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAE7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAE7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA"}

package/dist/index.cjs

@@ -14,10 +14,16 @@ const require_index$9 = require("./components/MyNotifications/index.cjs");
 const require_index$10 = require("./components/MyNumberInput/index.cjs");
 const require_index$11 = require("./components/MyRadioGroup/index.cjs");
 const require_index$12 = require("./components/MySelect/index.cjs");
+const require_MyTable = require("./components/MyTable/MyTable.cjs");
 const require_index$13 = require("./components/MyTextarea/index.cjs");
 const require_index$14 = require("./components/MyTextInput/index.cjs");
 const require_index$15 = require("./components/MyTimeInput/index.cjs");
 const require_NavItems = require("./components/NavItems.cjs");
+const require_TableWrapper = require("./components/TableWrapper/TableWrapper.cjs");
+const require_TableWrapperFooter = require("./components/TableWrapper/TableWrapperFooter.cjs");
+const require_TableWrapperHeader = require("./components/TableWrapper/TableWrapperHeader.cjs");
+const require_TableWrapperPagination = require("./components/TableWrapper/TableWrapperPagination.cjs");
+const require_TableWrapperTitle = require("./components/TableWrapper/TableWrapperTitle.cjs");
 const require_http_status = require("./consts/http-status.cjs");
 const require_revalidate = require("./consts/revalidate.cjs");
 const require_index$16 = require("./contexts/ModalManagerContext/index.cjs");
@@ -93,6 +99,7 @@ exports.MyNotifications = require_index$9.MyNotifications;
 exports.MyNumberInput = require_index$10.MyNumberInput;
 exports.MyRadioGroup = require_index$11.MyRadioGroup;
 exports.MySelect = require_index$12.MySelect;
+exports.MyTable = require_MyTable;
 exports.MyTextInput = require_index$14.MyTextInput;
 exports.MyTextarea = require_index$13.MyTextarea;
 exports.MyTimeInput = require_index$15.MyTimeInput;
@@ -101,6 +108,11 @@ exports.NavigationHistoryProvider = require_index$17.NavigationHistoryProvider;
 exports.PageDataProvider = require_index$18.PageDataProvider;
 exports.QP_BACK_URL_NAME = require_hook.QP_BACK_URL_NAME;
 exports.Revalidate = require_revalidate.Revalidate;
+exports.TableWrapper = require_TableWrapper;
+exports.TableWrapperFooter = require_TableWrapperFooter;
+exports.TableWrapperHeader = require_TableWrapperHeader;
+exports.TableWrapperPagination = require_TableWrapperPagination;
+exports.TableWrapperTitle = require_TableWrapperTitle;
 exports.addBodyJsonHook = require_addBodyJsonHook.addBodyJsonHook;
 exports.breakpointsWithPx = require_breakpoints_with_px.breakpointsWithPx;
 exports.createNewRoute = require_new_route.createNewRoute;

package/dist/index.js

@@ -13,10 +13,16 @@ import { MyNotifications } from "./components/MyNotifications/index.js";
 import { MyNumberInput } from "./components/MyNumberInput/index.js";
 import { MyRadioGroup } from "./components/MyRadioGroup/index.js";
 import { MySelect } from "./components/MySelect/index.js";
+import MyTable from "./components/MyTable/MyTable.js";
 import { MyTextarea } from "./components/MyTextarea/index.js";
 import { MyTextInput } from "./components/MyTextInput/index.js";
 import { MyTimeInput } from "./components/MyTimeInput/index.js";
 import { NavItems } from "./components/NavItems.js";
+import TableWrapper from "./components/TableWrapper/TableWrapper.js";
+import TableWrapperFooter from "./components/TableWrapper/TableWrapperFooter.js";
+import TableWrapperHeader from "./components/TableWrapper/TableWrapperHeader.js";
+import TableWrapperPagination from "./components/TableWrapper/TableWrapperPagination.js";
+import TableWrapperTitle from "./components/TableWrapper/TableWrapperTitle.js";
 import { HttpStatus } from "./consts/http-status.js";
 import { Revalidate } from "./consts/revalidate.js";
 import { ModalManagerProvider, useModalManager } from "./contexts/ModalManagerContext/index.js";
@@ -60,4 +66,4 @@ import { addBodyJsonHook } from "./utils/ky/addBodyJsonHook.js";
 import { parseJSON } from "./utils/ky/parseJson.js";
 import { queryStringify } from "./utils/query-stringify.js";
 import { createNewRoute, newRoute } from "./utils/new-route.js";
-export { EmptyState, Form, FormCheckbox, FormCheckboxGroup, FormDateInput, FormDatePickerInput, FormDateTimePicker, FormInfinitySelect, FormMonthPickerInput, FormMultiSelect, FormNumberInput, FormRadioGroup, FormSelect, FormSubmitButton, FormTextInput, FormTextarea, FormTimeInput, HttpStatus, Icon, InfinityLoadMoreButton, InfinitySelect, ModalManagerProvider, MyCheckboxGroup, MyDateInput, MyDatePickerInput, MyDateTimePicker, MyMonthPickerInput, MyMultiSelect, MyNotifications, MyNumberInput, MyRadioGroup, MySelect, MyTextInput, MyTextarea, MyTimeInput, NavItems, NavigationHistoryProvider, PageDataProvider, QP_BACK_URL_NAME, Revalidate, addBodyJsonHook, breakpointsWithPx, createNewRoute, formatBytes, getVirtualContainerProps, getVirtualItemProps, groupBy, indexBy, isInfinityEmpty, myDefaultTheme, newRoute, nullableButRequired, numberToTimeInput, optionalButRequired, parseJSON, queryStringify, shuffleArray, timeInputToNumber, toTailwindColors, useBreakpoint, useFetchNextPageOnScroll, useModalManager, useNavigationHistory, useOnScrollProgress, usePageData, useUpdateSearchParams, useZodConfig, withController, withModalManager, zodValidator };
+export { EmptyState, Form, FormCheckbox, FormCheckboxGroup, FormDateInput, FormDatePickerInput, FormDateTimePicker, FormInfinitySelect, FormMonthPickerInput, FormMultiSelect, FormNumberInput, FormRadioGroup, FormSelect, FormSubmitButton, FormTextInput, FormTextarea, FormTimeInput, HttpStatus, Icon, InfinityLoadMoreButton, InfinitySelect, ModalManagerProvider, MyCheckboxGroup, MyDateInput, MyDatePickerInput, MyDateTimePicker, MyMonthPickerInput, MyMultiSelect, MyNotifications, MyNumberInput, MyRadioGroup, MySelect, MyTable, MyTextInput, MyTextarea, MyTimeInput, NavItems, NavigationHistoryProvider, PageDataProvider, QP_BACK_URL_NAME, Revalidate, TableWrapper, TableWrapperFooter, TableWrapperHeader, TableWrapperPagination, TableWrapperTitle, addBodyJsonHook, breakpointsWithPx, createNewRoute, formatBytes, getVirtualContainerProps, getVirtualItemProps, groupBy, indexBy, isInfinityEmpty, myDefaultTheme, newRoute, nullableButRequired, numberToTimeInput, optionalButRequired, parseJSON, queryStringify, shuffleArray, timeInputToNumber, toTailwindColors, useBreakpoint, useFetchNextPageOnScroll, useModalManager, useNavigationHistory, useOnScrollProgress, usePageData, useUpdateSearchParams, useZodConfig, withController, withModalManager, zodValidator };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkd-web-kit",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "A template for creating React component libraries with Vite.",
   "author": "LKD",
   "license": "MIT",
@@ -37,6 +37,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.4.14",
+    "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.24",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
@@ -60,6 +61,7 @@
     "@mantine/hooks": "^9.4.1",
     "@mantine/notifications": "^9.4.1",
     "@tanstack/react-query": "^5.101.2",
+    "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.14.4",
     "clsx": "^2.1.1",
     "ky": "^2.0.2",