lkd-web-kit 0.10.1 → 0.10.3

package/.agents/skills/update-lkd-dependencies/SKILL.md

@@ -0,0 +1,88 @@
+---
+name: update-lkd-dependencies
+description: Audita y actualiza con cautela solo las peerDependencies de lkd-web-kit. Usar cuando el usuario pida revisar versiones disponibles, actualizar peers del paquete, evaluar breaking changes de React/Mantine/Next/Zod/React Hook Form/TanStack/Ky, sincronizar package-lock o preparar una recomendacion SemVer sin publicar.
+---
+
+# Actualizar dependencias LKD
+
+## Principio
+
+Trabaja como auditor de compatibilidad de una libreria React corporativa. No actualices a ciegas: primero descubre versiones, peers, engines y riesgos; despues edita de forma acotada y valida el paquete.
+
+Esta skill no sube la version de `lkd-web-kit`, no crea tags y no publica en npm. Para publicar usa `$publish-lkd-web-kit`.
+
+Esta skill es solo para `peerDependencies`. No actualices `devDependencies`, `dependencies` ni tooling interno salvo que sea estrictamente necesario para que el lockfile resuelva los peers actualizados y el usuario lo haya pedido.
+
+## Contexto obligatorio
+
+Antes de proponer o editar dependencias, lee:
+
+- `AGENTS.md`
+- `package.json`
+- `package-lock.json`
+- `docs/generated/lkd-web-kit.md`
+
+Usa `docs/generated/lkd-web-kit.md` como fuente de verdad del catalogo publico de componentes. Si un cambio de dependencia puede afectar props, wrappers Mantine, formularios o hooks publicos, tratalo como riesgo de compatibilidad.
+
+## Auditoria de versiones
+
+1. Identifica todas las entradas de `peerDependencies`.
+2. Consulta metadata de npm para cada paquete relevante:
+
+```bash
+npm view <pkg> version peerDependencies dependencies engines --json
+```
+
+3. Para un reporte inicial no mutante, puedes ejecutar:
+
+```bash
+node .agents/skills/update-lkd-dependencies/scripts/collect-npm-metadata.mjs
+```
+
+4. Actualiza solo a versiones estables publicadas. Evita prereleases, canary, alpha, beta, rc y next salvo instruccion explicita.
+5. Mantiene alineadas familias peer que deben avanzar juntas: `react`/`react-dom`, paquetes `@mantine/*` y paquetes `@tanstack/*` cuando compartan contrato.
+
+## Politica de riesgo
+
+Detente y reporta antes de aplicar si encuentras:
+
+- Cambio major en React, Mantine, Next, Zod, React Hook Form, TanStack Query o Ky.
+- Cambio de `engines.node` que exceda el `>=22.12.0` actual o reduzca compatibilidad razonable.
+- Peer ranges incompatibles entre dependencias del kit.
+- Migraciones que obliguen a cambiar APIs publicas, props exportadas, tipos o comportamiento de componentes.
+
+Puedes aplicar patch/minor compatibles cuando las pruebas y peers lo respalden. Para majors, aplica solo si el usuario pidio explicitamente aceptar el breaking change o si el analisis demuestra que el rango actual ya era incompatible.
+
+Si por un breaking change tuviste que modificar props, componentes, formularios, hooks exportados o utilidades documentadas, regenera `docs/generated/lkd-web-kit.md` siguiendo estrictamente `docs/generate-lkd-web-kit-docs.md`. No edites el documento generado a mano salvo correcciones mecanicas posteriores al diff.
+
+## Edicion y validacion
+
+Cuando edites:
+
+- Actualiza solo `peerDependencies` en `package.json` y sincroniza `package-lock.json`.
+- Corrige drift de version entre `package.json` y `package-lock.json`; en este repo se ha visto `package.json` en `0.8.4` y lockfile en `0.8.3`.
+- No cambies `version` del paquete salvo que el usuario lo pida explicitamente fuera de esta skill.
+- No ejecutes `npm publish`, no crees tags y no automatices login.
+
+Validacion minima:
+
+```bash
+npm install --package-lock-only
+npm run lint
+npm run test
+npm run build
+npm pack --dry-run
+```
+
+Si una validacion falla, arregla solo lo necesario para la actualizacion o reporta el bloqueo con el paquete responsable.
+
+## Reporte final
+
+Termina siempre con un resumen en espanol:
+
+- Peer dependencies actualizadas.
+- Peer dependencies retenidas y motivo.
+- Breaking changes o riesgos detectados.
+- Si se regenero `docs/generated/lkd-web-kit.md`, indica por que cambio la superficie publica.
+- Validaciones ejecutadas y resultado.
+- Recomendacion SemVer para una futura publicacion: `major`, `minor` o `patch`, con una frase de justificacion.

package/.agents/skills/update-lkd-dependencies/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Actualizar dependencias LKD"
+  short_description: "Audita y actualiza peer deps del kit"
+  default_prompt: "Usa $update-lkd-dependencies para auditar y actualizar solo las peerDependencies de lkd-web-kit con cautela."

package/.agents/skills/update-lkd-dependencies/scripts/collect-npm-metadata.mjs

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+import { execFile } from 'node:child_process'
+import { readFile } from 'node:fs/promises'
+import { promisify } from 'node:util'
+
+const execFileAsync = promisify(execFile)
+const packageJsonPath = new URL('../../../../package.json', import.meta.url)
+const npmCommand = process.platform === 'win32' ? 'npm.cmd' : 'npm'
+
+function parseMaybeJson(value) {
+  try {
+    return JSON.parse(value)
+  } catch {
+    return value.trim()
+  }
+}
+
+async function npmView(packageName) {
+  const { stdout } = await execFileAsync(
+    npmCommand,
+    ['view', packageName, 'version', 'peerDependencies', 'dependencies', 'engines', '--json'],
+    { shell: process.platform === 'win32', windowsHide: true },
+  )
+
+  return parseMaybeJson(stdout)
+}
+
+async function main() {
+  const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8'))
+  const names = Object.keys(packageJson.peerDependencies ?? {}).sort()
+  const results = []
+
+  for (const name of names) {
+    const currentRange = packageJson.peerDependencies?.[name] ?? null
+
+    try {
+      results.push({
+        name,
+        section: 'peerDependencies',
+        currentRange,
+        npm: await npmView(name),
+      })
+    } catch (error) {
+      results.push({
+        name,
+        section: 'peerDependencies',
+        currentRange,
+        error: error instanceof Error ? error.message : String(error),
+      })
+    }
+  }
+
+  console.log(
+    JSON.stringify(
+      {
+        package: {
+          name: packageJson.name,
+          version: packageJson.version,
+          engines: packageJson.engines ?? {},
+        },
+        generatedAt: new Date().toISOString(),
+        dependencies: results,
+      },
+      null,
+      2,
+    ),
+  )
+}
+
+main().catch((error) => {
+  console.error(error instanceof Error ? error.message : String(error))
+  process.exitCode = 1
+})

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 };