@stackcraftmx/calcita 0.0.0-stage → 0.23.0

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,87 @@
+"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 { formatDateTime } from "../formatting.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
+}) {
+  const { t } = useToolkitTranslation(["table", "dictionaries"]);
+  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 {formatDateTime} from '@/formatting.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 */\nexport default function AuditTrailTable({\n    subjectKey, fetchPage, eventDictionary, resultDictionary, extraColumns = [], ariaLabel, maxGridHeight = null, refreshToken,\n    eventSuffixOf = null,\n}) {\n    const {t} = useToolkitTranslation(['table', 'dictionaries']);\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;AAehD,SAAwB,gBAAgB;AAAA,EACpC;AAAA,EAAY;AAAA,EAAW;AAAA,EAAiB;AAAA,EAAkB,eAAe,CAAA;AAAA,EAAI;AAAA,EAAW,gBAAgB;AAAA,EAAM;AAAA,EAC9G,gBAAgB;AACpB,GAAG;AACC,QAAM,EAAC,EAAA,IAAK,sBAAsB,CAAC,SAAS,cAAc,CAAC;AAE3D,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,50 @@
+"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 { formatNumber } from "../../formatting.js";
+const SEARCHABLE_FROM_OPTIONS = 8;
+function MultiSelectColumnFilter({ value = [], onChange, options = [], renderOption }) {
+  const { t } = useToolkitTranslation("table");
+  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 {formatNumber} from '@/formatting.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 [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,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 }) {
+  const { t } = useToolkitTranslation("table");
+  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 {{filtered?: boolean, label?: string, onClearFilters?: () => void}} props label ya traducido\n */\nexport default function EmptyState({filtered = false, label, onClearFilters}) {\n    const {t} = useToolkitTranslation('table');\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":";;;;;;;;;AAmBA,SAAwB,WAAW,EAAC,WAAW,OAAO,OAAO,kBAAiB;AAC1E,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,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;"}

package/dist/DataTable/FilterChips.js

@@ -0,0 +1,39 @@
+"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 ClearAllIcon from "@mui/icons-material/ClearAll";
+import ScrollableRow from "../ui/layout/ScrollableRow.js";
+import Tag from "../ui/labels/Tag.js";
+function FilterChips({ chipConfig, filters, onSetFilter, onClearAll, quickActiveCount = 0 }) {
+  const { t } = useToolkitTranslation("table");
+  const chips = chipConfig.filter((chipDeclaration) => chipDeclaration.isActive(filters[chipDeclaration.key])).flatMap((chipDeclaration) => chipDeclaration.chipsFor(filters[chipDeclaration.key], onSetFilter));
+  const activeCount = chips.length + quickActiveCount;
+  if (activeCount === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 1.5, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { px: 0.25, alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: t("chips.applied", { count: activeCount }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          color: "error",
+          startIcon: /* @__PURE__ */ jsx(ClearAllIcon, { fontSize: "small" }),
+          onClick: onClearAll,
+          sx: { flexShrink: 0 },
+          children: t("chips.clearAll")
+        }
+      )
+    ] }),
+    chips.length > 0 && /* @__PURE__ */ jsx(ScrollableRow, { children: chips.map(({ id, label, onDelete }) => /* @__PURE__ */ jsx(Tag, { label, color: "primary", onDelete, sx: { flex: "0 0 auto" } }, id)) })
+  ] });
+}
+export {
+  FilterChips as default
+};
+//# sourceMappingURL=FilterChips.js.map

package/dist/DataTable/FilterChips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.js","sources":["../../src/DataTable/FilterChips.jsx"],"sourcesContent":["// Los filtros activos, a la vista y desarmables de a uno.\n//\n// Un filtro que solo se ve como un icono encendido en el encabezado se olvida: alguien filtra, se va al detalle,\n// regresa y lee el total como si fuera el de todo. Por eso los filtros puestos se dicen con todas sus letras arriba de\n// la tabla.\n//\n// Van en UNA tira que se desliza (ScrollableRow), no envolviéndose en renglones que empujan la tabla fuera de la\n// pantalla. La cuenta y \"Limpiar todo\" van en su propio renglón, arriba, para no tener que deslizar hasta encontrarlo.\n// Sin filtros activos no se pinta nada (ni el hueco).\n//\n// Los accesos rápidos cuentan aunque no tengan chip aquí: su propio chip encendido ya dice qué está elegido.\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 ClearAllIcon from '@mui/icons-material/ClearAll';\n\nimport ScrollableRow from '@/ui/layout/ScrollableRow.jsx';\nimport Tag from '@/ui/labels/Tag.jsx';\n\n/**\n * @param {object} props\n * @param {Array<object>} props.chipConfig lo que arma buildChipConfig\n * @param {object} props.filters\n * @param {(field: string, value: unknown) => void} props.onSetFilter\n * @param {() => void} props.onClearAll\n * @param {number} [props.quickActiveCount] accesos rápidos puestos que no tienen chip aquí\n */\nexport default function FilterChips({chipConfig, filters, onSetFilter, onClearAll, quickActiveCount = 0}) {\n    const {t} = useToolkitTranslation('table');\n    const chips = chipConfig\n        .filter((chipDeclaration) => chipDeclaration.isActive(filters[chipDeclaration.key]))\n        .flatMap((chipDeclaration) => chipDeclaration.chipsFor(filters[chipDeclaration.key], onSetFilter));\n\n    const activeCount = chips.length + quickActiveCount;\n    // guard clause: sin filtros no se pinta nada\n    if (activeCount === 0) {\n        return null;\n    }\n\n    return (\n        <Box sx={{mb: 1.5, minWidth: 0}}>\n            <Stack direction=\"row\" spacing={1} sx={{px: 0.25, alignItems: 'center', justifyContent: 'space-between'}}>\n                <Typography variant=\"caption\" color=\"text.secondary\" noWrap>\n                    {t('chips.applied', {count: activeCount})}\n                </Typography>\n                <Button size=\"small\" color=\"error\" startIcon={<ClearAllIcon fontSize=\"small\" />} onClick={onClearAll}\n                        sx={{flexShrink: 0}}>\n                    {t('chips.clearAll')}\n                </Button>\n            </Stack>\n\n            {chips.length > 0 && (\n                <ScrollableRow>\n                    {chips.map(({id, label, onDelete}) => (\n                        <Tag key={id} label={label} color=\"primary\" onDelete={onDelete} sx={{flex: '0 0 auto'}} />\n                    ))}\n                </ScrollableRow>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AA+BA,SAAwB,YAAY,EAAC,YAAY,SAAS,aAAa,YAAY,mBAAmB,KAAI;AACtG,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,QAAQ,WACT,OAAO,CAAC,oBAAoB,gBAAgB,SAAS,QAAQ,gBAAgB,GAAG,CAAC,CAAC,EAClF,QAAQ,CAAC,oBAAoB,gBAAgB,SAAS,QAAQ,gBAAgB,GAAG,GAAG,WAAW,CAAC;AAErG,QAAM,cAAc,MAAM,SAAS;AAEnC,MAAI,gBAAgB,GAAG;AACnB,WAAO;AAAA,EACX;AAEA,SACI,qBAAC,OAAI,IAAI,EAAC,IAAI,KAAK,UAAU,KACzB,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,IAAI,EAAC,IAAI,MAAM,YAAY,UAAU,gBAAgB,mBACpF,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAiB,QAAM,MACtD,UAAA,EAAE,iBAAiB,EAAC,OAAO,YAAA,CAAY,GAC5C;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UAAO,MAAK;AAAA,UAAQ,OAAM;AAAA,UAAQ,WAAW,oBAAC,cAAA,EAAa,UAAS,QAAA,CAAQ;AAAA,UAAI,SAAS;AAAA,UAClF,IAAI,EAAC,YAAY,EAAA;AAAA,UACpB,YAAE,gBAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACvB,GACJ;AAAA,IAEC,MAAM,SAAS,KACZ,oBAAC,eAAA,EACI,UAAA,MAAM,IAAI,CAAC,EAAC,IAAI,OAAO,SAAA,0BACnB,KAAA,EAAa,OAAc,OAAM,WAAU,UAAoB,IAAI,EAAC,MAAM,WAAA,KAAjE,EAA8E,CAC3F,EAAA,CACL;AAAA,EAAA,GAER;AAER;"}

package/dist/DataTable/GoToPage.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import Autocomplete from "@mui/material/Autocomplete";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { formatNumber } from "../formatting.js";
+const RENDER_LIMIT = 100;
+function filterPages(pageNumbers, { inputValue }) {
+  const typedText = inputValue.trim();
+  if (!typedText) {
+    return pageNumbers.slice(0, RENDER_LIMIT);
+  }
+  const startingWith = pageNumbers.filter((pageNumber) => String(pageNumber).startsWith(typedText));
+  const containing = pageNumbers.filter((pageNumber) => !String(pageNumber).startsWith(typedText) && String(pageNumber).includes(typedText));
+  return [...startingWith, ...containing].slice(0, RENDER_LIMIT);
+}
+function GoToPage({ page, pageCount, onChange }) {
+  const { t } = useToolkitTranslation("table");
+  if (pageCount <= 1) {
+    return null;
+  }
+  const pageNumbers = Array.from({ length: pageCount }, (unused, position) => position + 1);
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.75, sx: { alignItems: "baseline" }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: t("goToPage.page") }),
+    /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        size: "small",
+        disableClearable: true,
+        openOnFocus: true,
+        autoHighlight: true,
+        options: pageNumbers,
+        filterOptions: filterPages,
+        value: page + 1,
+        isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
+        getOptionLabel: (option) => String(option),
+        onChange: (event, selectedPageNumber) => {
+          if (selectedPageNumber !== null && selectedPageNumber - 1 !== page) {
+            onChange(selectedPageNumber - 1);
+          }
+        },
+        sx: { width: 78, "& .MuiAutocomplete-endAdornment": { right: 0 } },
+        slotProps: { listbox: { sx: { maxHeight: 240 } } },
+        renderInput: (params) => /* @__PURE__ */ jsx(
+          TextField,
+          {
+            ...params,
+            variant: "standard",
+            slotProps: { htmlInput: { ...params.inputProps, inputMode: "numeric", "aria-label": t("goToPage.ariaLabel") } }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: t("goToPage.of", { count: pageCount, total: formatNumber(pageCount) }) })
+  ] });
+}
+export {
+  GoToPage as default
+};
+//# sourceMappingURL=GoToPage.js.map

package/dist/DataTable/GoToPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoToPage.js","sources":["../../src/DataTable/GoToPage.jsx"],"sourcesContent":["// \"Ir a la página N\", como un selector con búsqueda.\n//\n// Con cientos de páginas, llegar a la 137 a punta de flechita no es navegar. Un Autocomplete dice las tres cosas sin\n// explicarlas: se abre y se ve la lista, se teclea y se filtra, se elige y ya.\n//\n// Tres detalles:\n//   1. la lista se recorta a RENDER_LIMIT opciones en el DOM; lo demás se alcanza tecleando;\n//   2. filtra por PREFIJO primero (teclear 13 da 13, 130, 131...) y luego por \"contiene\";\n//   3. con una sola página no se pinta: sería un control que no lleva a ningún lado.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Autocomplete from '@mui/material/Autocomplete';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\n\nimport {formatNumber} from '@/formatting.js';\n\n// tope del DOM, no de la navegación\nconst RENDER_LIMIT = 100;\n\nfunction filterPages(pageNumbers, {inputValue}) {\n    const typedText = inputValue.trim();\n    if (!typedText) {\n        return pageNumbers.slice(0, RENDER_LIMIT);\n    }\n    const startingWith = pageNumbers.filter((pageNumber) => String(pageNumber).startsWith(typedText));\n    const containing = pageNumbers.filter((pageNumber) => !String(pageNumber).startsWith(typedText) && String(pageNumber).includes(typedText));\n    return [...startingWith, ...containing].slice(0, RENDER_LIMIT);\n}\n\n/**\n * @param {{page: number, pageCount: number, onChange: (page: number) => void}} props page cuenta desde 0\n */\nexport default function GoToPage({page, pageCount, onChange}) {\n    const {t} = useToolkitTranslation('table');\n\n    // guard clause: con una página no hay a dónde ir\n    if (pageCount <= 1) {\n        return null;\n    }\n\n    // la persona cuenta desde 1 y el estado de la tabla desde 0: la conversión vive AQUÍ y en ningún otro lado\n    const pageNumbers = Array.from({length: pageCount}, (unused, position) => position + 1);\n\n    return (\n        <Stack direction=\"row\" spacing={0.75} sx={{alignItems: 'baseline'}}>\n            <Typography variant=\"body2\" color=\"text.secondary\" noWrap>{t('goToPage.page')}</Typography>\n            <Autocomplete\n                size=\"small\"\n                disableClearable\n                openOnFocus\n                autoHighlight\n                options={pageNumbers}\n                filterOptions={filterPages}\n                value={page + 1}\n                isOptionEqualToValue={(option, selectedValue) => option === selectedValue}\n                getOptionLabel={(option) => String(option)}\n                onChange={(event, selectedPageNumber) => {\n                    if (selectedPageNumber !== null && selectedPageNumber - 1 !== page) {\n                        onChange(selectedPageNumber - 1);\n                    }\n                }}\n                sx={{width: 78, '& .MuiAutocomplete-endAdornment': {right: 0}}}\n                slotProps={{listbox: {sx: {maxHeight: 240}}}}\n                renderInput={(params) => (\n                    <TextField {...params} variant=\"standard\"\n                               slotProps={{htmlInput: {...params.inputProps, inputMode: 'numeric', 'aria-label': t('goToPage.ariaLabel')}}} />\n                )}\n            />\n            <Typography variant=\"body2\" color=\"text.secondary\" noWrap>\n                {t('goToPage.of', {count: pageCount, total: formatNumber(pageCount)})}\n            </Typography>\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,eAAe;AAErB,SAAS,YAAY,aAAa,EAAC,cAAa;AAC5C,QAAM,YAAY,WAAW,KAAA;AAC7B,MAAI,CAAC,WAAW;AACZ,WAAO,YAAY,MAAM,GAAG,YAAY;AAAA,EAC5C;AACA,QAAM,eAAe,YAAY,OAAO,CAAC,eAAe,OAAO,UAAU,EAAE,WAAW,SAAS,CAAC;AAChG,QAAM,aAAa,YAAY,OAAO,CAAC,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,SAAS,KAAK,OAAO,UAAU,EAAE,SAAS,SAAS,CAAC;AACzI,SAAO,CAAC,GAAG,cAAc,GAAG,UAAU,EAAE,MAAM,GAAG,YAAY;AACjE;AAKA,SAAwB,SAAS,EAAC,MAAM,WAAW,YAAW;AAC1D,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AAGzC,MAAI,aAAa,GAAG;AAChB,WAAO;AAAA,EACX;AAGA,QAAM,cAAc,MAAM,KAAK,EAAC,QAAQ,UAAA,GAAY,CAAC,QAAQ,aAAa,WAAW,CAAC;AAEtF,SACI,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,MAAM,IAAI,EAAC,YAAY,WAAA,GACnD,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,QAAM,MAAE,UAAA,EAAE,eAAe,EAAA,CAAE;AAAA,IAC9E;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,kBAAgB;AAAA,QAChB,aAAW;AAAA,QACX,eAAa;AAAA,QACb,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO,OAAO;AAAA,QACd,sBAAsB,CAAC,QAAQ,kBAAkB,WAAW;AAAA,QAC5D,gBAAgB,CAAC,WAAW,OAAO,MAAM;AAAA,QACzC,UAAU,CAAC,OAAO,uBAAuB;AACrC,cAAI,uBAAuB,QAAQ,qBAAqB,MAAM,MAAM;AAChE,qBAAS,qBAAqB,CAAC;AAAA,UACnC;AAAA,QACJ;AAAA,QACA,IAAI,EAAC,OAAO,IAAI,mCAAmC,EAAC,OAAO,IAAC;AAAA,QAC5D,WAAW,EAAC,SAAS,EAAC,IAAI,EAAC,WAAW,IAAA,IAAI;AAAA,QAC1C,aAAa,CAAC,WACV;AAAA,UAAC;AAAA,UAAA;AAAA,YAAW,GAAG;AAAA,YAAQ,SAAQ;AAAA,YACpB,WAAW,EAAC,WAAW,EAAC,GAAG,OAAO,YAAY,WAAW,WAAW,cAAc,EAAE,oBAAoB,IAAC;AAAA,UAAC;AAAA,QAAA;AAAA,MAAG;AAAA,IAAA;AAAA,wBAG/H,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,QAAM,MACpD,UAAA,EAAE,eAAe,EAAC,OAAO,WAAW,OAAO,aAAa,SAAS,EAAA,CAAE,EAAA,CACxE;AAAA,EAAA,GACJ;AAER;"}