@stackcraftmx/calcita 0.0.0-stage → 0.25.0

package/cli/templates/project/src/modules/home/HomePage.jsx.tpl

@@ -0,0 +1,38 @@
+// El inicio: la bienvenida y los primeros pasos para crecer la app con el CLI de Calcita. Cámbielo por el tablero de su
+// app cuando lo tenga.
+//
+// Lo renderiza la app: arrow (regla de la casa).
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import {PageHeader, SectionCard, useToolkitTranslation} from '@stackcraftmx/calcita';
+
+// los comandos del CLI que se enseñan, con la llave de su explicación
+const NEXT_STEPS = Object.freeze([
+    {command: 'pnpm exec calcita make:module orders', textKey: 'steps.module'},
+    {command: 'pnpm exec calcita make:page orders OrderDetail', textKey: 'steps.page'},
+    {command: 'pnpm exec calcita make:form orders OrderForm', textKey: 'steps.form'},
+    {command: 'pnpm exec calcita make:component StatusBadge', textKey: 'steps.component'},
+]);
+
+export const HomePage = () => {
+    const {t} = useToolkitTranslation('home');
+
+    return (
+        <Stack spacing={3}>
+            <PageHeader title={t('page.title')} subtitle={t('page.subtitle')} />
+            <SectionCard title={t('steps.title')}>
+                <Stack spacing={2}>
+                    {NEXT_STEPS.map((step) => (
+                        <Box key={step.command}>
+                            <Typography variant="body2">{t(step.textKey)}</Typography>
+                            <Typography component="code" variant="body2" sx={{fontFamily: 'monospace', color: 'text.secondary'}}>
+                                {step.command}
+                            </Typography>
+                        </Box>
+                    ))}
+                </Stack>
+            </SectionCard>
+        </Stack>
+    );
+};

package/cli/templates/project/src/modules/home/homeTexts.js.tpl

@@ -0,0 +1,29 @@
+// Los textos del inicio (namespace home).
+export const homeTexts = {
+    es: {
+        home: {
+            menu: {label: 'Inicio', description: 'La bienvenida y los primeros pasos.'},
+            page: {title: 'Bienvenida', subtitle: 'Su app ya corre con Calcita: el marco, el tema, los textos y un módulo de ejemplo.'},
+            steps: {
+                title: 'Para seguir',
+                module: 'Un módulo nuevo, con su menú, su ruta, sus textos, su API y su servidor de mentira:',
+                page: 'Otra pantalla dentro de un módulo:',
+                form: 'Un formulario con sus reglas y sus textos:',
+                component: 'Un componente que comparten varios módulos (en src/core):',
+            },
+        },
+    },
+    en: {
+        home: {
+            menu: {label: 'Home', description: 'The welcome and the first steps.'},
+            page: {title: 'Welcome', subtitle: 'Your app already runs with Calcita: the frame, the theme, the texts and a sample module.'},
+            steps: {
+                title: 'Next steps',
+                module: 'A new module, with its menu, its route, its texts, its API and its fake server:',
+                page: 'Another screen inside a module:',
+                form: 'A form with its rules and its texts:',
+                component: 'A component shared by several modules (in src/core):',
+            },
+        },
+    },
+};

package/cli/templates/project/src/modules/home/menu.js.tpl

@@ -0,0 +1,17 @@
+// La entrada del inicio en el menú (composeMenu la descubre sola: no hay una lista central que editar).
+//
+// Sin access: lo ve cualquiera que entre.
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+
+import {APP_PATHS} from '@/core';
+
+export const order = 1;
+
+export function buildMenuItem() {
+    return {
+        to: APP_PATHS.home,
+        labelKey: 'home:menu.label',
+        descriptionKey: 'home:menu.description',
+        Icon: HomeOutlinedIcon,
+    };
+}

package/cli/templates/project/src/modules/home/routes.js.tpl

@@ -0,0 +1,4 @@
+// La ruta del inicio. lazy: la pantalla se descarga hasta que alguien la abre.
+export const routes = [
+    {index: true, lazy: async () => ({Component: (await import('@/modules/home/HomePage.jsx')).HomePage})},
+];

package/cli/templates/project/src/modules/profile/ProfilePage.jsx.tpl

@@ -0,0 +1,13 @@
+// Mi perfil: ProfileScreen de Calcita (sus datos; seguridad con la verificación en dos pasos, las sesiones abiertas y la
+// bitácora; y preferencias). Lo del servidor sale del conector de la cuenta (core/accountConnector.js).
+//
+// Lo renderiza la app: arrow (regla de la casa).
+import {ProfileScreen} from '@stackcraftmx/calcita/account';
+
+//#if darkMode
+export const ProfilePage = () => <ProfileScreen />;
+//#endif
+//#if !darkMode
+// sin modo oscuro, Preferencias no ofrece claro u oscuro
+export const ProfilePage = () => <ProfileScreen showColorScheme={false} />;
+//#endif

package/cli/templates/project/src/modules/profile/routes.js.tpl

@@ -0,0 +1,6 @@
+// La ruta de Mi perfil. No tiene menu.js: se llega desde el menú de la cuenta (profilePath de AppLayout).
+import {APP_PATHS} from '@/core';
+
+export const routes = [
+    {path: APP_PATHS.profile, lazy: async () => ({Component: (await import('@/modules/profile/ProfilePage.jsx')).ProfilePage})},
+];

package/cli/templates/project/vite.config.js.tpl

@@ -0,0 +1,53 @@
+// La configuración de Vite: React y el alias @/ (= src/). El alias va también en jsconfig.json, para que el editor
+// (PhpStorm, VS Code) encuentre los archivos y no marque en rojo los imports.
+import {fileURLToPath, URL} from 'node:url';
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react';
+
+// OJO: dos copias de React, de MUI o del router rompen los hooks y los contextos (Calcita pediría el tema o el router a SU
+// copia y no encontraría los de la app). dedupe obliga a que todos usen la de este proyecto.
+const SINGLE_COPY_PACKAGES = [
+    'react', 'react-dom', 'react-router', '@mui/material', '@emotion/react', '@emotion/styled', 'sonner', 'xstate', '@xstate/react',
+//#if hookForm
+    'react-hook-form',
+//#endif
+];
+
+// el aviso de Vite de «archivo de más de 500 kB» saldría desde el primer build: React, MUI y el router ya pesan unos 520 kB
+// de los ~790 kB del archivo principal (medido con el proyecto recién creado). Cada pantalla va aparte (rutas lazy)
+const LARGEST_CHUNK_KILOBYTES = 1000;
+
+// Detrás de un proxy con prefijo (miempresa.com/ventas/, sin subdominio): UNA variable al construir, ASSET_URL=/ventas, la
+// misma línea que lleva el .env del servidor. Vite pide sus archivos con el prefijo, se lo pone a las rutas de index.html y lo
+// deja en import.meta.env.BASE_URL, de donde lo toman el router, las imágenes y version.json (src/core/publicPaths.js). Sin
+// ella, todo en la raíz. Con otro prefijo hay que volver a construir.
+const basePathOf = (assetUrl) => {
+    const prefix = (assetUrl ?? '').trim().replace(/^\/+|\/+$/g, '');
+    return prefix ? `/${prefix}/` : '/';
+};
+
+// La versión de esta compilación: va dentro de la app (import.meta.env.VITE_BUILD_ID → ToolkitProvider buildId) y en
+// dist/version.json, que la app publicada vuelve a leer al abrirla para saber si ya hay otra (usePublishedBuildWatch). Se
+// puede fijar desde afuera (VITE_BUILD_ID=… al construir, p. ej. el commit); si no, la hora en que se construyó
+const BUILD_ID = process.env.VITE_BUILD_ID || new Date().toISOString();
+
+function buildVersionPlugin() {
+    return {
+        name: 'build-version',
+        apply: 'build',
+        generateBundle() {
+            this.emitFile({type: 'asset', fileName: 'version.json', source: JSON.stringify({buildId: BUILD_ID})});
+        },
+    };
+}
+
+export default defineConfig({
+    base: basePathOf(process.env.ASSET_URL),
+    plugins: [react(), buildVersionPlugin()],
+    define: {'import.meta.env.VITE_BUILD_ID': JSON.stringify(BUILD_ID)},
+    resolve: {
+        alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},
+        dedupe: SINGLE_COPY_PACKAGES,
+    },
+    build: {chunkSizeWarningLimit: LARGEST_CHUNK_KILOBYTES},
+});

package/dist/DataTable/AuditTrailDialog.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import Typography from "@mui/material/Typography";
+import AuditTrailTable from "./AuditTrailTable.js";
+import ContentDialog from "../ui/layout/ContentDialog.js";
+function AuditTrailDialog({
+  open,
+  onClose,
+  title,
+  subtitle,
+  subjectKey,
+  fetchPage,
+  eventDictionary,
+  resultDictionary,
+  extraColumns = [],
+  header = null,
+  eventSuffixOf = null
+}) {
+  return /* @__PURE__ */ jsxs(ContentDialog, { open, onClose, title, children: [
+    subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: subtitle }),
+    header,
+    /* @__PURE__ */ jsx(
+      AuditTrailTable,
+      {
+        subjectKey: open ? subjectKey : "",
+        fetchPage,
+        eventDictionary,
+        resultDictionary,
+        extraColumns,
+        eventSuffixOf,
+        ariaLabel: title,
+        maxGridHeight: null
+      }
+    )
+  ] });
+}
+export {
+  AuditTrailDialog as default
+};
+//# sourceMappingURL=AuditTrailDialog.js.map

package/dist/DataTable/AuditTrailDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuditTrailDialog.js","sources":["../../src/DataTable/AuditTrailDialog.jsx"],"sourcesContent":["// Diálogo de auditoría de un renglón: su historia de eventos, paginada y filtrada EN EL SERVIDOR (AuditTrailTable).\n//\n// Sirve para el historial de cualquier registro (un pedido, una cuenta).\n// Solo abre una vista: no ejecuta nada y por eso no lleva confirmación.\n//\n// Se abre como diálogo de contenido (ContentDialog): sube desde abajo y ocupa la pantalla debajo de la barra superior. Una\n// tabla con su historia se lee mejor a todo lo ancho que en un recuadro al centro, también en el teléfono.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Typography from '@mui/material/Typography';\n\nimport AuditTrailTable from '@/DataTable/AuditTrailTable.jsx';\nimport ContentDialog from '@/ui/layout/ContentDialog.jsx';\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {string} props.title ya traducido («Historial de Q3 · ago 2026»)\n * @param {import('react').ReactNode} [props.subtitle]\n * @param {string} props.subjectKey\n * @param {(tableRequest: object, signal: AbortSignal) => Promise<{rows: Array, total: number, facets?: object}>} props.fetchPage\n * @param {Record<string, object>} props.eventDictionary\n * @param {Record<string, object>} [props.resultDictionary]\n * @param {Array<object>} [props.extraColumns]\n * @param {import('react').ReactNode} [props.header] va entre el subtítulo y la tabla (p. ej. pestañas que cambian lo que se\n *     consulta)\n * @param {(row: any) => string|null} [props.eventSuffixOf] complemento del evento de un renglón (AuditTrailTable)\n */\nexport default function AuditTrailDialog({\n    open, onClose, title, subtitle, subjectKey, fetchPage, eventDictionary, resultDictionary, extraColumns = [], header = null, eventSuffixOf = null,\n}) {\n    return (\n        <ContentDialog open={open} onClose={onClose} title={title}>\n            {subtitle && (\n                <Typography variant=\"body2\" color=\"text.secondary\" sx={{mb: 2}}>{subtitle}</Typography>\n            )}\n            {header}\n            <AuditTrailTable\n                subjectKey={open ? subjectKey : ''}\n                fetchPage={fetchPage}\n                eventDictionary={eventDictionary}\n                resultDictionary={resultDictionary}\n                extraColumns={extraColumns}\n                eventSuffixOf={eventSuffixOf}\n                ariaLabel={title}\n                maxGridHeight={null}\n            />\n        </ContentDialog>\n    );\n}\n"],"names":[],"mappings":";;;;;AA6BA,SAAwB,iBAAiB;AAAA,EACrC;AAAA,EAAM;AAAA,EAAS;AAAA,EAAO;AAAA,EAAU;AAAA,EAAY;AAAA,EAAW;AAAA,EAAiB;AAAA,EAAkB,eAAe,CAAA;AAAA,EAAI,SAAS;AAAA,EAAM,gBAAgB;AAChJ,GAAG;AACC,SACI,qBAAC,eAAA,EAAc,MAAY,SAAkB,OACxC,UAAA;AAAA,IAAA,YACG,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,IAAI,EAAC,IAAI,EAAA,GAAK,UAAA,SAAA,CAAS;AAAA,IAE7E;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,YAAY,OAAO,aAAa;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACJ;AAER;"}

package/dist/DataTable/AuditTrailTable.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import ServerTable from "./ServerTable.js";
+import { FILTER_KINDS } from "./useTableState.js";
+import { labelOf, lookup } from "../dictionaries/dictionaries.js";
+import { useFormatters } from "../toolkit/useFormatters.js";
+import StatusChip from "../ui/labels/StatusChip.js";
+const AUDIT_FILTER_DEFAULTS = { event: [] };
+const AUDIT_FILTER_KINDS = { event: FILTER_KINDS.multiSelect };
+function AuditTrailTable({
+  subjectKey,
+  fetchPage,
+  eventDictionary,
+  resultDictionary,
+  extraColumns = [],
+  ariaLabel,
+  maxGridHeight = null,
+  refreshToken,
+  eventSuffixOf = null,
+  texts
+}) {
+  const { t } = useToolkitTranslation(["table", "dictionaries"], texts);
+  const { formatDateTime } = useFormatters();
+  const columns = [
+    {
+      field: "occurred_at",
+      headerName: t("table:audit.columns.occurredAt"),
+      width: 170,
+      sortable: false,
+      valueFormatter: (value) => value ? formatDateTime(value) : "—"
+    },
+    {
+      field: "event",
+      headerName: t("table:audit.columns.event"),
+      flex: 1,
+      minWidth: 230,
+      sortable: false,
+      renderCell: ({ row }) => /* @__PURE__ */ jsx(StatusChip, { variant: "chip", dictionary: eventDictionary, value: row.event, suffix: eventSuffixOf?.(row) ?? void 0 })
+    },
+    ...resultDictionary ? [{
+      field: "result",
+      headerName: t("table:audit.columns.result"),
+      width: 170,
+      sortable: false,
+      renderCell: ({ row }) => /* @__PURE__ */ jsx(StatusChip, { dictionary: resultDictionary, value: row.result })
+    }] : [],
+    {
+      field: "actor",
+      headerName: t("table:audit.columns.actor"),
+      width: 190,
+      sortable: false,
+      // los eventos que escribe un proceso automático o la propia persona no tienen actor: se dice quién fue en palabras
+      valueGetter: (value) => value?.name ?? t("table:audit.systemActor")
+    },
+    ...extraColumns
+  ];
+  return /* @__PURE__ */ jsx(
+    ServerTable,
+    {
+      queryKey: subjectKey ? `audit:${subjectKey}` : "",
+      enabled: Boolean(subjectKey),
+      fetchPage,
+      refreshToken,
+      columns,
+      filterDefaults: AUDIT_FILTER_DEFAULTS,
+      filterKinds: AUDIT_FILTER_KINDS,
+      searchField: null,
+      chipConfig: [],
+      quickFilters: [{
+        field: "event",
+        facetKey: "event",
+        caption: t("table:audit.eventFilterCaption"),
+        renderLabel: (eventValue) => labelOf(lookup(eventDictionary, eventValue), t)
+      }],
+      countLabel: (total) => t("table:audit.count", { count: total }),
+      emptyLabel: t("table:audit.empty"),
+      defaultPageSize: 10,
+      pageSizeOptions: [10, 25, 50],
+      maxGridHeight,
+      ariaLabel
+    },
+    subjectKey || "without-subject"
+  );
+}
+export {
+  AuditTrailTable as default
+};
+//# sourceMappingURL=AuditTrailTable.js.map

package/dist/DataTable/AuditTrailTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuditTrailTable.js","sources":["../../src/DataTable/AuditTrailTable.jsx"],"sourcesContent":["// Tabla de historial de un renglón: sus eventos, paginados y filtrados EN EL SERVIDOR (regla de tablas).\n//\n// La usan AuditTrailDialog (historial en un diálogo desde una lista) y los detalles con historial a la vista (p. ej. el\n// detalle de una cuenta). Recibe QUÉ consultar (fetchPage) y CÓMO nombrar los eventos (diccionarios) por props: core no\n// conoce el API.\n//\n// Filtros y página en memoria (sin prefijo de URL): el historial vive dentro de otra pantalla y escribir en la barra de\n// direcciones ensuciaría la URL de esa pantalla.\n//\n// Contrato de fetchPage: el de ServerTable ({filters: {event: [...]}, sortOrders, page, pageSize}) →\n// {rows: [{id, event, result, occurred_at, actor: {id, name}|null, ...}], total, facets: {event: [{value, total}]}}.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\nimport ServerTable from '@/DataTable/ServerTable.jsx';\nimport {FILTER_KINDS} from '@/DataTable/useTableState.js';\nimport {labelOf, lookup} from '@/dictionaries/dictionaries.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport StatusChip from '@/ui/labels/StatusChip.jsx';\n\n// OJO: constantes de módulo; objetos nuevos en cada render reinician el estado de la tabla\nconst AUDIT_FILTER_DEFAULTS = {event: []};\nconst AUDIT_FILTER_KINDS = {event: FILTER_KINDS.multiSelect};\n\n/**\n * @param {object} props\n * @param {string} props.subjectKey identifica el renglón (cambia la consulta al cambiar de renglón); '' no consulta\n * @param {(tableRequest: object, signal: AbortSignal) => Promise<{rows: Array, total: number, facets?: object}>} props.fetchPage\n * @param {Record<string, object>} props.eventDictionary\n * @param {Record<string, object>} [props.resultDictionary]\n * @param {Array<object>} [props.extraColumns] columnas del DataGrid propias del módulo (archivo, origen, motivo...)\n * @param {(row: any) => string|null} [props.eventSuffixOf] texto que va después del evento con « · » (p. ej. para\n *     quién era la descarga); null = solo el evento\n * @param {string} props.ariaLabel\n * @param {number} [props.maxGridHeight]\n * @param {unknown} [props.refreshToken] cambia para volver a consultar (después de una acción sobre el mismo renglón)\n * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete\n */\nexport default function AuditTrailTable({\n    subjectKey, fetchPage, eventDictionary, resultDictionary, extraColumns = [], ariaLabel, maxGridHeight = null, refreshToken,\n    eventSuffixOf = null, texts,\n}) {\n    const {t} = useToolkitTranslation(['table', 'dictionaries'], texts);\n    const {formatDateTime} = useFormatters();\n\n    const columns = [\n        {\n            field: 'occurred_at', headerName: t('table:audit.columns.occurredAt'), width: 170, sortable: false,\n            valueFormatter: (value) => (value ? formatDateTime(value) : '—'),\n        },\n        {\n            field: 'event', headerName: t('table:audit.columns.event'), flex: 1, minWidth: 230, sortable: false,\n            renderCell: ({row}) => <StatusChip variant=\"chip\" dictionary={eventDictionary} value={row.event} suffix={eventSuffixOf?.(row) ?? undefined} />,\n        },\n        ...(resultDictionary ? [{\n            field: 'result', headerName: t('table:audit.columns.result'), width: 170, sortable: false,\n            renderCell: ({row}) => <StatusChip dictionary={resultDictionary} value={row.result} />,\n        }] : []),\n        {\n            field: 'actor', headerName: t('table:audit.columns.actor'), width: 190, sortable: false,\n            // los eventos que escribe un proceso automático o la propia persona no tienen actor: se dice quién fue en palabras\n            valueGetter: (value) => value?.name ?? t('table:audit.systemActor'),\n        },\n        ...extraColumns,\n    ];\n\n    // OJO: key={subjectKey}. Sin prefijo, los filtros viven en memoria dentro de ServerTable; si el diálogo o la página\n    // siguen montados al pasar a otro renglón, el filtro de evento del renglón anterior se quedaría puesto\n    return (\n        <ServerTable\n            key={subjectKey || 'without-subject'}\n            queryKey={subjectKey ? `audit:${subjectKey}` : ''}\n            enabled={Boolean(subjectKey)}\n            fetchPage={fetchPage}\n            refreshToken={refreshToken}\n            columns={columns}\n            filterDefaults={AUDIT_FILTER_DEFAULTS}\n            filterKinds={AUDIT_FILTER_KINDS}\n            searchField={null}\n            chipConfig={[]}\n            quickFilters={[{\n                field: 'event',\n                facetKey: 'event',\n                caption: t('table:audit.eventFilterCaption'),\n                renderLabel: (eventValue) => labelOf(lookup(eventDictionary, eventValue), t),\n            }]}\n            countLabel={(total) => t('table:audit.count', {count: total})}\n            emptyLabel={t('table:audit.empty')}\n            defaultPageSize={10}\n            pageSizeOptions={[10, 25, 50]}\n            maxGridHeight={maxGridHeight}\n            ariaLabel={ariaLabel}\n        />\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAsBA,MAAM,wBAAwB,EAAC,OAAO,GAAC;AACvC,MAAM,qBAAqB,EAAC,OAAO,aAAa,YAAA;AAgBhD,SAAwB,gBAAgB;AAAA,EACpC;AAAA,EAAY;AAAA,EAAW;AAAA,EAAiB;AAAA,EAAkB,eAAe,CAAA;AAAA,EAAI;AAAA,EAAW,gBAAgB;AAAA,EAAM;AAAA,EAC9G,gBAAgB;AAAA,EAAM;AAC1B,GAAG;AACC,QAAM,EAAC,MAAK,sBAAsB,CAAC,SAAS,cAAc,GAAG,KAAK;AAClE,QAAM,EAAC,eAAA,IAAkB,cAAA;AAEzB,QAAM,UAAU;AAAA,IACZ;AAAA,MACI,OAAO;AAAA,MAAe,YAAY,EAAE,gCAAgC;AAAA,MAAG,OAAO;AAAA,MAAK,UAAU;AAAA,MAC7F,gBAAgB,CAAC,UAAW,QAAQ,eAAe,KAAK,IAAI;AAAA,IAAA;AAAA,IAEhE;AAAA,MACI,OAAO;AAAA,MAAS,YAAY,EAAE,2BAA2B;AAAA,MAAG,MAAM;AAAA,MAAG,UAAU;AAAA,MAAK,UAAU;AAAA,MAC9F,YAAY,CAAC,EAAC,UAAS,oBAAC,cAAW,SAAQ,QAAO,YAAY,iBAAiB,OAAO,IAAI,OAAO,QAAQ,gBAAgB,GAAG,KAAK,OAAA,CAAW;AAAA,IAAA;AAAA,IAEhJ,GAAI,mBAAmB,CAAC;AAAA,MACpB,OAAO;AAAA,MAAU,YAAY,EAAE,4BAA4B;AAAA,MAAG,OAAO;AAAA,MAAK,UAAU;AAAA,MACpF,YAAY,CAAC,EAAC,IAAA,MAAS,oBAAC,YAAA,EAAW,YAAY,kBAAkB,OAAO,IAAI,OAAA,CAAQ;AAAA,IAAA,CACvF,IAAI,CAAA;AAAA,IACL;AAAA,MACI,OAAO;AAAA,MAAS,YAAY,EAAE,2BAA2B;AAAA,MAAG,OAAO;AAAA,MAAK,UAAU;AAAA;AAAA,MAElF,aAAa,CAAC,UAAU,OAAO,QAAQ,EAAE,yBAAyB;AAAA,IAAA;AAAA,IAEtE,GAAG;AAAA,EAAA;AAKP,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,UAAU,aAAa,SAAS,UAAU,KAAK;AAAA,MAC/C,SAAS,QAAQ,UAAU;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,aAAa;AAAA,MACb,YAAY,CAAA;AAAA,MACZ,cAAc,CAAC;AAAA,QACX,OAAO;AAAA,QACP,UAAU;AAAA,QACV,SAAS,EAAE,gCAAgC;AAAA,QAC3C,aAAa,CAAC,eAAe,QAAQ,OAAO,iBAAiB,UAAU,GAAG,CAAC;AAAA,MAAA,CAC9E;AAAA,MACD,YAAY,CAAC,UAAU,EAAE,qBAAqB,EAAC,OAAO,OAAM;AAAA,MAC5D,YAAY,EAAE,mBAAmB;AAAA,MACjC,iBAAiB;AAAA,MACjB,iBAAiB,CAAC,IAAI,IAAI,EAAE;AAAA,MAC5B;AAAA,MACA;AAAA,IAAA;AAAA,IArBK,cAAc;AAAA,EAAA;AAwB/B;"}

package/dist/DataTable/ColumnFilters/HeaderFilterPopover.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Badge from "@mui/material/Badge";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Popover from "@mui/material/Popover";
+import Stack from "@mui/material/Stack";
+import Tooltip from "@mui/material/Tooltip";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import FilterAltOutlinedIcon from "@mui/icons-material/FilterAltOutlined";
+function HeaderFilterPopover({ activeCount = 0, onClear, children }) {
+  const { t } = useToolkitTranslation("table");
+  const [anchorElement, setAnchorElement] = useState(null);
+  const isActive = activeCount > 0;
+  const tooltip = isActive ? t("columnFilter.activeTooltip", { count: activeCount }) : t("columnFilter.tooltip");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        "aria-label": tooltip,
+        sx: { color: isActive ? "primary.main" : "action.active", opacity: isActive ? 1 : 0.45, overflow: "visible" },
+        onClick: (event) => {
+          event.stopPropagation();
+          setAnchorElement(event.currentTarget);
+        },
+        children: isActive ? /* @__PURE__ */ jsx(
+          Badge,
+          {
+            badgeContent: activeCount,
+            color: "primary",
+            overlap: "circular",
+            sx: { "& .MuiBadge-badge": { fontSize: 10, fontWeight: 700, minWidth: 16, height: 16 } },
+            children: /* @__PURE__ */ jsx(FilterAltIcon, { fontSize: "inherit" })
+          }
+        ) : /* @__PURE__ */ jsx(FilterAltOutlinedIcon, { fontSize: "inherit" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(anchorElement),
+        anchorEl: anchorElement,
+        onClose: () => setAnchorElement(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        children: /* @__PURE__ */ jsx(Box, { sx: { p: 2, minWidth: 280 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+          children,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              disabled: !isActive,
+              onClick: () => {
+                onClear();
+                setAnchorElement(null);
+              },
+              children: t("columnFilter.clear")
+            }
+          )
+        ] }) })
+      }
+    )
+  ] });
+}
+export {
+  HeaderFilterPopover as default
+};
+//# sourceMappingURL=HeaderFilterPopover.js.map

package/dist/DataTable/ColumnFilters/HeaderFilterPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderFilterPopover.js","sources":["../../../src/DataTable/ColumnFilters/HeaderFilterPopover.jsx"],"sourcesContent":["// El icono de filtro del encabezado, con su globo.\n//\n// El badge trae el NÚMERO de valores activos en esa columna, no un punto: así se sabe sin abrir nada si se filtró por\n// uno o por seis.\n//\n// OJO: stopPropagation en el clic no es adorno. El título del encabezado ordena, y sin eso abrir el filtro también\n// cambiaría el orden.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport Popover from '@mui/material/Popover';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport FilterAltIcon from '@mui/icons-material/FilterAlt';\nimport FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined';\n\n/**\n * @param {{activeCount?: number, onClear: () => void, children: import('react').ReactNode}} props children = el filtro\n */\nexport default function HeaderFilterPopover({activeCount = 0, onClear, children}) {\n    const {t} = useToolkitTranslation('table');\n    const [anchorElement, setAnchorElement] = useState(null);\n    const isActive = activeCount > 0;\n    const tooltip = isActive ? t('columnFilter.activeTooltip', {count: activeCount}) : t('columnFilter.tooltip');\n\n    return (\n        <>\n            <Tooltip title={tooltip}>\n                <IconButton size=\"small\" aria-label={tooltip}\n                            sx={{color: isActive ? 'primary.main' : 'action.active', opacity: isActive ? 1 : 0.45, overflow: 'visible'}}\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                setAnchorElement(event.currentTarget);\n                            }}>\n                    {/* sin filtros NO se monta el Badge: MUI lo esconde con scale(0) y deja un artefacto en la esquina */}\n                    {isActive ? (\n                        <Badge badgeContent={activeCount} color=\"primary\" overlap=\"circular\"\n                               sx={{'& .MuiBadge-badge': {fontSize: 10, fontWeight: 700, minWidth: 16, height: 16}}}>\n                            <FilterAltIcon fontSize=\"inherit\" />\n                        </Badge>\n                    ) : <FilterAltOutlinedIcon fontSize=\"inherit\" />}\n                </IconButton>\n            </Tooltip>\n\n            <Popover open={Boolean(anchorElement)} anchorEl={anchorElement} onClose={() => setAnchorElement(null)}\n                     anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}>\n                <Box sx={{p: 2, minWidth: 280}}>\n                    <Stack spacing={1}>\n                        {children}\n                        <Button size=\"small\" disabled={!isActive}\n                                onClick={() => {\n                                    onClear();\n                                    setAnchorElement(null);\n                                }}>\n                            {t('columnFilter.clear')}\n                        </Button>\n                    </Stack>\n                </Box>\n            </Popover>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwBA,SAAwB,oBAAoB,EAAC,cAAc,GAAG,SAAS,YAAW;AAC9E,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AACvD,QAAM,WAAW,cAAc;AAC/B,QAAM,UAAU,WAAW,EAAE,8BAA8B,EAAC,OAAO,YAAA,CAAY,IAAI,EAAE,sBAAsB;AAE3G,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,SACZ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW,MAAK;AAAA,QAAQ,cAAY;AAAA,QACzB,IAAI,EAAC,OAAO,WAAW,iBAAiB,iBAAiB,SAAS,WAAW,IAAI,MAAM,UAAU,UAAA;AAAA,QACjG,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,2BAAiB,MAAM,aAAa;AAAA,QACxC;AAAA,QAEP,UAAA,WACG;AAAA,UAAC;AAAA,UAAA;AAAA,YAAM,cAAc;AAAA,YAAa,OAAM;AAAA,YAAU,SAAQ;AAAA,YACnD,IAAI,EAAC,qBAAqB,EAAC,UAAU,IAAI,YAAY,KAAK,UAAU,IAAI,QAAQ,GAAA,EAAE;AAAA,YACrF,UAAA,oBAAC,eAAA,EAAc,UAAS,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA,IAEtC,oBAAC,uBAAA,EAAsB,UAAS,UAAA,CAAU;AAAA,MAAA;AAAA,IAAA,GAEtD;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAQ,MAAM,QAAQ,aAAa;AAAA,QAAG,UAAU;AAAA,QAAe,SAAS,MAAM,iBAAiB,IAAI;AAAA,QAC3F,cAAc,EAAC,UAAU,UAAU,YAAY,OAAA;AAAA,QACpD,UAAA,oBAAC,KAAA,EAAI,IAAI,EAAC,GAAG,GAAG,UAAU,IAAA,GACtB,UAAA,qBAAC,OAAA,EAAM,SAAS,GACX,UAAA;AAAA,UAAA;AAAA,UACD;AAAA,YAAC;AAAA,YAAA;AAAA,cAAO,MAAK;AAAA,cAAQ,UAAU,CAAC;AAAA,cACxB,SAAS,MAAM;AACX,wBAAA;AACA,iCAAiB,IAAI;AAAA,cACzB;AAAA,cACH,YAAE,oBAAoB;AAAA,YAAA;AAAA,UAAA;AAAA,QAC3B,EAAA,CACJ,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;"}

package/dist/DataTable/ColumnFilters/MultiSelectColumnFilter.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useFormatters } from "../../toolkit/useFormatters.js";
+const SEARCHABLE_FROM_OPTIONS = 8;
+function MultiSelectColumnFilter({ value = [], onChange, options = [], renderOption }) {
+  const { t } = useToolkitTranslation("table");
+  const { formatNumber } = useFormatters();
+  const [searchText, setSearchText] = useState("");
+  const toggleOption = (optionValue) => onChange(value.includes(optionValue) ? value.filter((currentValue) => currentValue !== optionValue) : [...value, optionValue]);
+  const isSearchable = options.length >= SEARCHABLE_FROM_OPTIONS;
+  const visibleOptions = isSearchable && searchText ? options.filter((option) => String(option.value).toLowerCase().includes(searchText.toLowerCase())) : options;
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+    isSearchable && /* @__PURE__ */ jsx(
+      TextField,
+      {
+        size: "small",
+        autoFocus: true,
+        fullWidth: true,
+        placeholder: t("options.searchPlaceholder"),
+        value: searchText,
+        onChange: (event) => setSearchText(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { sx: { maxHeight: 300, overflowY: "auto" }, children: [
+      options.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("options.empty") }),
+      options.length > 0 && visibleOptions.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("options.noMatch", { text: searchText }) }),
+      visibleOptions.map((option) => /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(Checkbox, { size: "small", checked: value.includes(option.value), onChange: () => toggleOption(option.value) }),
+          label: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.75, sx: { alignItems: "center" }, children: [
+            renderOption ? renderOption(option.value) : /* @__PURE__ */ jsx(Typography, { variant: "body2", children: option.value }),
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: formatNumber(option.total) })
+          ] })
+        },
+        option.value
+      ))
+    ] })
+  ] });
+}
+export {
+  MultiSelectColumnFilter as default
+};
+//# sourceMappingURL=MultiSelectColumnFilter.js.map

package/dist/DataTable/ColumnFilters/MultiSelectColumnFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectColumnFilter.js","sources":["../../../src/DataTable/ColumnFilters/MultiSelectColumnFilter.jsx"],"sourcesContent":["// Filtro de opciones de una columna.\n//\n// Dos cosas lo separan de un multi-select cualquiera:\n//   - las opciones NO salen de las filas visibles: salen de las FACETAS que el servidor calcula sobre el resultado\n//     COMPLETO (ofrecer solo lo que aparece en las primeras 25 filas convierte el filtro en adorno);\n//   - cada opción trae su conteo, que es lo que deja decidir si vale la pena filtrar.\n//\n// Desde ocho opciones aparece una caja para buscar entre ellas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Checkbox from '@mui/material/Checkbox';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\n\nconst SEARCHABLE_FROM_OPTIONS = 8;\n\n/**\n * @param {object} props\n * @param {string[]} [props.value]\n * @param {(value: string[]) => void} props.onChange\n * @param {Array<{value: string, total: number}>} [props.options] faceta del servidor\n * @param {(value: string) => import('react').ReactNode} [props.renderOption] cómo se lee el valor (diccionario)\n */\nexport default function MultiSelectColumnFilter({value = [], onChange, options = [], renderOption}) {\n    const {t} = useToolkitTranslation('table');\n    const {formatNumber} = useFormatters();\n    const [searchText, setSearchText] = useState('');\n\n    const toggleOption = (optionValue) => onChange(value.includes(optionValue)\n        ? value.filter((currentValue) => currentValue !== optionValue)\n        : [...value, optionValue]);\n\n    const isSearchable = options.length >= SEARCHABLE_FROM_OPTIONS;\n    const visibleOptions = isSearchable && searchText\n        ? options.filter((option) => String(option.value).toLowerCase().includes(searchText.toLowerCase()))\n        : options;\n\n    return (\n        <Stack spacing={1}>\n            {isSearchable && (\n                <TextField size=\"small\" autoFocus fullWidth placeholder={t('options.searchPlaceholder')} value={searchText}\n                           onChange={(event) => setSearchText(event.target.value)} />\n            )}\n            <Stack sx={{maxHeight: 300, overflowY: 'auto'}}>\n                {options.length === 0 && (\n                    <Typography variant=\"caption\" color=\"text.secondary\">{t('options.empty')}</Typography>\n                )}\n                {options.length > 0 && visibleOptions.length === 0 && (\n                    <Typography variant=\"caption\" color=\"text.secondary\">{t('options.noMatch', {text: searchText})}</Typography>\n                )}\n                {visibleOptions.map((option) => (\n                    <FormControlLabel\n                        key={option.value}\n                        control={<Checkbox size=\"small\" checked={value.includes(option.value)} onChange={() => toggleOption(option.value)} />}\n                        label={(\n                            <Stack direction=\"row\" spacing={0.75} sx={{alignItems: 'center'}}>\n                                {renderOption ? renderOption(option.value) : <Typography variant=\"body2\">{option.value}</Typography>}\n                                <Typography variant=\"caption\" color=\"text.secondary\">{formatNumber(option.total)}</Typography>\n                            </Stack>\n                        )}\n                    />\n                ))}\n            </Stack>\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAoBA,MAAM,0BAA0B;AAShC,SAAwB,wBAAwB,EAAC,QAAQ,CAAA,GAAI,UAAU,UAAU,CAAA,GAAI,gBAAe;AAChG,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,EAAC,aAAA,IAAgB,cAAA;AACvB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAE/C,QAAM,eAAe,CAAC,gBAAgB,SAAS,MAAM,SAAS,WAAW,IACnE,MAAM,OAAO,CAAC,iBAAiB,iBAAiB,WAAW,IAC3D,CAAC,GAAG,OAAO,WAAW,CAAC;AAE7B,QAAM,eAAe,QAAQ,UAAU;AACvC,QAAM,iBAAiB,gBAAgB,aACjC,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,KAAK,EAAE,cAAc,SAAS,WAAW,YAAA,CAAa,CAAC,IAChG;AAEN,SACI,qBAAC,OAAA,EAAM,SAAS,GACX,UAAA;AAAA,IAAA,gBACG;AAAA,MAAC;AAAA,MAAA;AAAA,QAAU,MAAK;AAAA,QAAQ,WAAS;AAAA,QAAC,WAAS;AAAA,QAAC,aAAa,EAAE,2BAA2B;AAAA,QAAG,OAAO;AAAA,QACrF,UAAU,CAAC,UAAU,cAAc,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpE,qBAAC,SAAM,IAAI,EAAC,WAAW,KAAK,WAAW,UAClC,UAAA;AAAA,MAAA,QAAQ,WAAW,KAChB,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAkB,UAAA,EAAE,eAAe,EAAA,CAAE;AAAA,MAE5E,QAAQ,SAAS,KAAK,eAAe,WAAW,yBAC5C,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAkB,UAAA,EAAE,mBAAmB,EAAC,MAAM,WAAA,CAAW,GAAE;AAAA,MAElG,eAAe,IAAI,CAAC,WACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEG,SAAS,oBAAC,UAAA,EAAS,MAAK,SAAQ,SAAS,MAAM,SAAS,OAAO,KAAK,GAAG,UAAU,MAAM,aAAa,OAAO,KAAK,GAAG;AAAA,UACnH,OACI,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,MAAM,IAAI,EAAC,YAAY,SAAA,GAClD,UAAA;AAAA,YAAA,eAAe,aAAa,OAAO,KAAK,wBAAK,YAAA,EAAW,SAAQ,SAAS,UAAA,OAAO,MAAA,CAAM;AAAA,YACvF,oBAAC,cAAW,SAAQ,WAAU,OAAM,kBAAkB,UAAA,aAAa,OAAO,KAAK,EAAA,CAAE;AAAA,UAAA,EAAA,CACrF;AAAA,QAAA;AAAA,QANC,OAAO;AAAA,MAAA,CASnB;AAAA,IAAA,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}

package/dist/DataTable/ColumnFilters/SortableFilterHeader.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
+import Stack from "@mui/material/Stack";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import HeaderFilterPopover from "./HeaderFilterPopover.js";
+function SortableFilterHeader({
+  label,
+  sortable = true,
+  sortEntry,
+  onSort,
+  onClearSort,
+  filterable = true,
+  activeCount,
+  onClear,
+  children
+}) {
+  const { t } = useToolkitTranslation("table");
+  const title = /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { fontWeight: 700, whiteSpace: "nowrap" }, children: label });
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.25, sx: { alignItems: "center" }, children: [
+    sortable ? /* @__PURE__ */ jsx(Tooltip, { title: t("sort.tooltip"), children: /* @__PURE__ */ jsxs(ButtonBase, { onClick: onSort, sx: { gap: 0.25, borderRadius: 0.5 }, children: [
+      title,
+      sortEntry && /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          sx: { display: "inline-flex", alignItems: "center", color: "primary.main", fontWeight: 700 },
+          "aria-label": sortEntry.direction === "asc" ? t("sort.ascending") : t("sort.descending"),
+          children: sortEntry.direction === "asc" ? "↑" : "↓"
+        }
+      )
+    ] }) }) : title,
+    sortEntry && onClearSort && /* @__PURE__ */ jsx(Tooltip, { title: t("sort.clear"), children: /* @__PURE__ */ jsx(
+      ButtonBase,
+      {
+        "aria-label": t("sort.clear"),
+        sx: { fontSize: 12, lineHeight: 1, color: "primary.main", "&:hover": { color: "primary.dark" } },
+        onClick: (event) => {
+          event.stopPropagation();
+          onClearSort();
+        },
+        children: "×"
+      }
+    ) }),
+    filterable && /* @__PURE__ */ jsx(HeaderFilterPopover, { activeCount, onClear, children })
+  ] });
+}
+export {
+  SortableFilterHeader as default
+};
+//# sourceMappingURL=SortableFilterHeader.js.map

package/dist/DataTable/ColumnFilters/SortableFilterHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableFilterHeader.js","sources":["../../../src/DataTable/ColumnFilters/SortableFilterHeader.jsx"],"sourcesContent":["// Encabezado con orden y filtro.\n//\n// El que ordena es el TÍTULO, no un botón aparte: es el gesto que ya tiene aprendido quien usa tablas. La flecha solo\n// aparece cuando la columna está ordenando, y su × quita ese orden sin tener que ciclar hasta el tercer clic.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\n\nimport HeaderFilterPopover from '@/DataTable/ColumnFilters/HeaderFilterPopover.jsx';\n\n/**\n * @param {object} props\n * @param {string} props.label\n * @param {boolean} [props.sortable]\n * @param {{column: string, direction: 'asc'|'desc'}} [props.sortEntry]\n * @param {() => void} [props.onSort]\n * @param {() => void} [props.onClearSort]\n * @param {boolean} [props.filterable]\n * @param {number} [props.activeCount]\n * @param {() => void} [props.onClear]\n * @param {import('react').ReactNode} [props.children] el filtro de la columna\n */\nexport default function SortableFilterHeader({\n    label, sortable = true, sortEntry, onSort, onClearSort, filterable = true, activeCount, onClear, children,\n}) {\n    const {t} = useToolkitTranslation('table');\n    const title = <Typography variant=\"caption\" sx={{fontWeight: 700, whiteSpace: 'nowrap'}}>{label}</Typography>;\n\n    return (\n        <Stack direction=\"row\" spacing={0.25} sx={{alignItems: 'center'}}>\n            {sortable ? (\n                <Tooltip title={t('sort.tooltip')}>\n                    <ButtonBase onClick={onSort} sx={{gap: 0.25, borderRadius: 0.5}}>\n                        {title}\n                        {sortEntry && (\n                            <Box component=\"span\" sx={{display: 'inline-flex', alignItems: 'center', color: 'primary.main', fontWeight: 700}}\n                                 aria-label={sortEntry.direction === 'asc' ? t('sort.ascending') : t('sort.descending')}>\n                                {sortEntry.direction === 'asc' ? '↑' : '↓'}\n                            </Box>\n                        )}\n                    </ButtonBase>\n                </Tooltip>\n            ) : title}\n\n            {sortEntry && onClearSort && (\n                <Tooltip title={t('sort.clear')}>\n                    <ButtonBase aria-label={t('sort.clear')}\n                                // sin opacidad: la × es un control y al 70% daba 2.90:1 sobre el encabezado de la tabla\n                                sx={{fontSize: 12, lineHeight: 1, color: 'primary.main', '&:hover': {color: 'primary.dark'}}}\n                                onClick={(event) => {\n                                    event.stopPropagation();\n                                    onClearSort();\n                                }}>\n                        ×\n                    </ButtonBase>\n                </Tooltip>\n            )}\n\n            {filterable && (\n                <HeaderFilterPopover activeCount={activeCount} onClear={onClear}>{children}</HeaderFilterPopover>\n            )}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AA2BA,SAAwB,qBAAqB;AAAA,EACzC;AAAA,EAAO,WAAW;AAAA,EAAM;AAAA,EAAW;AAAA,EAAQ;AAAA,EAAa,aAAa;AAAA,EAAM;AAAA,EAAa;AAAA,EAAS;AACrG,GAAG;AACC,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,QAAQ,oBAAC,YAAA,EAAW,SAAQ,WAAU,IAAI,EAAC,YAAY,KAAK,YAAY,SAAA,GAAY,UAAA,MAAA,CAAM;AAEhG,SACI,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,MAAM,IAAI,EAAC,YAAY,SAAA,GAClD,UAAA;AAAA,IAAA,+BACI,SAAA,EAAQ,OAAO,EAAE,cAAc,GAC5B,UAAA,qBAAC,YAAA,EAAW,SAAS,QAAQ,IAAI,EAAC,KAAK,MAAM,cAAc,OACtD,UAAA;AAAA,MAAA;AAAA,MACA,aACG;AAAA,QAAC;AAAA,QAAA;AAAA,UAAI,WAAU;AAAA,UAAO,IAAI,EAAC,SAAS,eAAe,YAAY,UAAU,OAAO,gBAAgB,YAAY,IAAA;AAAA,UACvG,cAAY,UAAU,cAAc,QAAQ,EAAE,gBAAgB,IAAI,EAAE,iBAAiB;AAAA,UACrF,UAAA,UAAU,cAAc,QAAQ,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3C,EAAA,CAER,GACJ,IACA;AAAA,IAEH,aAAa,eACV,oBAAC,WAAQ,OAAO,EAAE,YAAY,GAC1B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW,cAAY,EAAE,YAAY;AAAA,QAE1B,IAAI,EAAC,UAAU,IAAI,YAAY,GAAG,OAAO,gBAAgB,WAAW,EAAC,OAAO,eAAA,EAAc;AAAA,QAC1F,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,sBAAA;AAAA,QACJ;AAAA,QAAG,UAAA;AAAA,MAAA;AAAA,IAAA,GAGnB;AAAA,IAGH,cACG,oBAAC,qBAAA,EAAoB,aAA0B,SAAmB,SAAA,CAAS;AAAA,EAAA,GAEnF;AAER;"}

package/dist/DataTable/ColumnFilters/TextColumnFilter.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import TextField from "@mui/material/TextField";
+import { useDebouncedFilter } from "../useDebouncedFilter.js";
+function TextColumnFilter({ value, onChange, label }) {
+  const { t } = useToolkitTranslation("table");
+  const [draft, setDraft] = useDebouncedFilter(value, onChange);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      autoFocus: true,
+      fullWidth: true,
+      label: label ?? t("columnFilter.contains"),
+      value: draft,
+      onChange: (event) => setDraft(event.target.value)
+    }
+  );
+}
+export {
+  TextColumnFilter as default
+};
+//# sourceMappingURL=TextColumnFilter.js.map

package/dist/DataTable/ColumnFilters/TextColumnFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextColumnFilter.js","sources":["../../../src/DataTable/ColumnFilters/TextColumnFilter.jsx"],"sourcesContent":["// Filtro de texto libre de una columna, con rebote (350 ms, igual que la caja de búsqueda de la tabla): sin él,\n// escribir cinco letras son cinco consultas y las respuestas llegan en desorden.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport TextField from '@mui/material/TextField';\n\nimport {useDebouncedFilter} from '@/DataTable/useDebouncedFilter.js';\n\n/**\n * @param {{value: string, onChange: (value: string) => void, label?: string}} props label ya traducido\n */\nexport default function TextColumnFilter({value, onChange, label}) {\n    const {t} = useToolkitTranslation('table');\n    const [draft, setDraft] = useDebouncedFilter(value, onChange);\n\n    return (\n        <TextField size=\"small\" autoFocus fullWidth label={label ?? t('columnFilter.contains')} value={draft}\n                   onChange={(event) => setDraft(event.target.value)} />\n    );\n}\n"],"names":[],"mappings":";;;;;AAYA,SAAwB,iBAAiB,EAAC,OAAO,UAAU,SAAQ;AAC/D,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,CAAC,OAAO,QAAQ,IAAI,mBAAmB,OAAO,QAAQ;AAE5D,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAU,MAAK;AAAA,MAAQ,WAAS;AAAA,MAAC,WAAS;AAAA,MAAC,OAAO,SAAS,EAAE,uBAAuB;AAAA,MAAG,OAAO;AAAA,MACpF,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,IAAA;AAAA,EAAA;AAEnE;"}

package/dist/DataTable/EmptyState.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import FilterListOffIcon from "@mui/icons-material/FilterListOff";
+import InboxOutlinedIcon from "@mui/icons-material/InboxOutlined";
+function EmptyState({ filtered = false, label, onClearFilters, texts }) {
+  const { t } = useToolkitTranslation("table", texts);
+  const Icon = filtered ? FilterListOffIcon : InboxOutlinedIcon;
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { height: "100%", px: 3, textAlign: "center", alignItems: "center", justifyContent: "center" }, children: [
+    /* @__PURE__ */ jsx(Box, { sx: { color: "text.disabled", display: "flex" }, children: /* @__PURE__ */ jsx(Icon, { fontSize: "large" }) }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: filtered ? t("empty.filtered") : label ?? t("empty.default") }),
+    filtered && onClearFilters && /* @__PURE__ */ jsx(Button, { size: "small", onClick: onClearFilters, children: t("empty.clearFilters") })
+  ] });
+}
+export {
+  EmptyState as default
+};
+//# sourceMappingURL=EmptyState.js.map

package/dist/DataTable/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sources":["../../src/DataTable/EmptyState.jsx"],"sourcesContent":["// Qué decir cuando la tabla no tiene filas.\n//\n// Son dos situaciones distintas y confundirlas hace daño:\n//   - sin filtros puestos, la lista vacía es el RESULTADO y se dice tal cual (label);\n//   - con filtros puestos, la lista vacía NO dice nada del conjunto: dice que lo filtrado no existe dentro de él. Ahí\n//     sí hay algo que hacer, y el botón lo hace.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport FilterListOffIcon from '@mui/icons-material/FilterListOff';\nimport InboxOutlinedIcon from '@mui/icons-material/InboxOutlined';\n\n/**\n * @param {object} [props]\n * @param {boolean} [props.filtered]\n * @param {string} [props.label] ya traducido\n * @param {() => void} [props.onClearFilters]\n * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete\n */\nexport default function EmptyState({filtered = false, label, onClearFilters, texts}) {\n    const {t} = useToolkitTranslation('table', texts);\n    const Icon = filtered ? FilterListOffIcon : InboxOutlinedIcon;\n\n    return (\n        <Stack spacing={1} sx={{height: '100%', px: 3, textAlign: 'center', alignItems: 'center', justifyContent: 'center'}}>\n            <Box sx={{color: 'text.disabled', display: 'flex'}}>\n                <Icon fontSize=\"large\" />\n            </Box>\n            <Typography variant=\"body2\" color=\"text.secondary\">\n                {filtered ? t('empty.filtered') : (label ?? t('empty.default'))}\n            </Typography>\n            {filtered && onClearFilters && (\n                <Button size=\"small\" onClick={onClearFilters}>{t('empty.clearFilters')}</Button>\n            )}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AAuBA,SAAwB,WAAW,EAAC,WAAW,OAAO,OAAO,gBAAgB,SAAQ;AACjF,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS,KAAK;AAChD,QAAM,OAAO,WAAW,oBAAoB;AAE5C,8BACK,OAAA,EAAM,SAAS,GAAG,IAAI,EAAC,QAAQ,QAAQ,IAAI,GAAG,WAAW,UAAU,YAAY,UAAU,gBAAgB,YACtG,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,IAAI,EAAC,OAAO,iBAAiB,SAAS,OAAA,GACvC,UAAA,oBAAC,MAAA,EAAK,UAAS,QAAA,CAAQ,GAC3B;AAAA,IACA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC7B,UAAA,WAAW,EAAE,gBAAgB,IAAK,SAAS,EAAE,eAAe,GACjE;AAAA,IACC,YAAY,kBACT,oBAAC,QAAA,EAAO,MAAK,SAAQ,SAAS,gBAAiB,UAAA,EAAE,oBAAoB,EAAA,CAAE;AAAA,EAAA,GAE/E;AAER;"}