next-recomponents 2.0.55 → 2.0.57

package/dist/index.js

@@ -3498,6 +3498,8 @@ __export(index_exports, {
   MyCalendar: () => MyCalendar,
   Pre: () => pre_default,
   Select: () => Select,
+  TabContainer: () => TabContainer,
+  TabItem: () => TabItem,
   Table: () => Table,
   Table3: () => Table3,
   TableAdvanced: () => TableAdvanced,
@@ -38508,10 +38510,10 @@ function Table3({
 }
 
 // src/table-advanced/index.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/table-advanced/h.table.tsx
-var import_react19 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // src/table-advanced/header.tsx
 var import_react18 = require("react");
@@ -38539,6 +38541,44 @@ function DropIcon() {
     }
   );
 }
+function PrevIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 24 24",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        "polyline",
+        {
+          fill: "none",
+          strokeWidth: "2",
+          points: "7 2 17 12 7 22",
+          transform: "matrix(-1 0 0 1 24 0)"
+        }
+      )
+    }
+  );
+}
+function NextIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 24 24",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polyline", { fill: "none", "stroke-width": "2", points: "7 2 17 12 7 22" })
+    }
+  );
+}
 function EditIcon3() {
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "svg",
@@ -38729,6 +38769,7 @@ function Header({
   padding
 }) {
   const [visible, setVisible] = (0, import_react18.useState)(false);
+  const [hovered, setHovered] = (0, import_react18.useState)(false);
   const sortIndex = context.sort.findIndex((b) => b.field == header);
   const [text, setText] = (0, import_react18.useState)("");
   const cellRef = (0, import_react18.useRef)(null);
@@ -38783,7 +38824,7 @@ function Header({
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
-        className: "border flex items-center justify-center  text-center relative  ",
+        className: " flex items-center justify-center  text-center relative  ",
         style: { zIndex: 10, height: `${padding}px`, maxHeight: "100px" },
         children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "input",
@@ -38805,11 +38846,13 @@ function Header({
       }
     ) });
   } else
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: " ", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "div",
       {
         ref: cellRef,
-        className: "shadow   ",
+        className: " border-r   ",
+        onMouseEnter: (e) => setHovered(true),
+        onMouseLeave: (e) => setHovered(false),
         style: { zIndex: 10, height: `${padding}px`, maxHeight: "100px" },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-between items-center ", children: [
@@ -38856,7 +38899,7 @@ function Header({
                 style: { zIndex: 10 },
                 className: "icon font-bold  p-1 cursor-pointer pr-3 ",
                 onClick: (e) => setVisible(true),
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropIcon, {})
+                children: hovered ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropIcon, {}) : ""
               }
             )
           ] }),
@@ -38864,7 +38907,7 @@ function Header({
             "div",
             {
               onMouseDown: (e) => drag.startDrag(e, header),
-              className: "absolute top-0 h-full cursor-col-resize hover:bg-blue-300  p-2",
+              className: "absolute top-0 h-full cursor-col-resize hover:bg-blue-300   ",
               style: { right: -2, width: 6, zIndex: 20 }
             }
           ),
@@ -39038,7 +39081,7 @@ var import_jsx_runtime35 = require("react/jsx-runtime");
 function Searchable({
   context
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex justify-start p-2 relative w-96", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex justify-start p-2 relative w-96 text-xs", children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "input",
       {
@@ -39085,16 +39128,63 @@ function valueFormatter({
   return value;
 }
 
+// src/table-advanced/use.pagination.tsx
+var import_react19 = require("react");
+function usePaginacion({
+  total,
+  tamanioPagina = 100,
+  paginaInicial = 1
+}) {
+  const totalPaginas = Math.max(1, Math.ceil(total / tamanioPagina));
+  const [pagina, setPagina] = (0, import_react19.useState)(
+    Math.min(Math.max(paginaInicial, 1), totalPaginas)
+  );
+  const inicio = total === 0 ? 0 : (pagina - 1) * tamanioPagina + 1;
+  const fin = Math.min(pagina * tamanioPagina, total);
+  const rango = (0, import_react19.useMemo)(() => {
+    if (total === 0) return "0 a 0";
+    return `${inicio} a ${fin}`;
+  }, [inicio, fin, total]);
+  const hasNext = pagina < totalPaginas;
+  const hasPrev = pagina > 1;
+  const next = (0, import_react19.useCallback)(() => {
+    setPagina((p) => Math.min(p + 1, totalPaginas));
+  }, [totalPaginas]);
+  const prev = (0, import_react19.useCallback)(() => {
+    setPagina((p) => Math.max(p - 1, 1));
+  }, []);
+  const irAPagina = (0, import_react19.useCallback)(
+    (n) => {
+      setPagina(Math.min(Math.max(n, 1), totalPaginas));
+    },
+    [totalPaginas]
+  );
+  return {
+    rango,
+    inicio,
+    fin,
+    total,
+    pagina,
+    totalPaginas,
+    hasNext,
+    hasPrev,
+    next,
+    prev,
+    irAPagina
+  };
+}
+var use_pagination_default = usePaginacion;
+
 // src/table-advanced/h.table.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function HTable({
   context
 }) {
-  const [isLoading, setIsloading] = (0, import_react19.useState)(false);
+  const [isLoading, setIsloading] = (0, import_react20.useState)(false);
   const { cols, headers } = context;
-  const [currentIndex, setCurrentIndex] = (0, import_react19.useState)(-1);
-  const tableRef = (0, import_react19.useRef)(null);
-  const modalRef = (0, import_react19.useRef)(null);
+  const [currentIndex, setCurrentIndex] = (0, import_react20.useState)(-1);
+  const tableRef = (0, import_react20.useRef)(null);
+  const modalRef = (0, import_react20.useRef)(null);
   const catDensities = { confortable: 80, compact: 30, standard: 53 };
   const padding = (context == null ? void 0 : context.rowHeight) || (context == null ? void 0 : context.density) ? catDensities[context == null ? void 0 : context.density] : 53;
   function useResizableColumns(headers2, defaultWidth = 160, minWidth = 60) {
@@ -39108,8 +39198,8 @@ function HTable({
     function resize(headers3) {
       return Object.fromEntries(headers3.map((h) => [h, getWidth(h)]));
     }
-    const [widths2, setWidths2] = (0, import_react19.useState)({});
-    const startDrag2 = (0, import_react19.useCallback)(
+    const [widths2, setWidths2] = (0, import_react20.useState)({});
+    const startDrag2 = (0, import_react20.useCallback)(
       (e, headerKey) => {
         var _a;
         e.preventDefault();
@@ -39144,7 +39234,7 @@ function HTable({
     return { widths: widths2, gridTemplateColumns: gridTemplateColumns2, startDrag: startDrag2, setWidths: setWidths2 };
   }
   const { gridTemplateColumns, startDrag, widths, setWidths } = useResizableColumns(headers);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!tableRef.current) return;
     const observer = new ResizeObserver(([entry]) => {
       const ocultos = headers.filter(
@@ -39160,15 +39250,6 @@ function HTable({
       const sizeadosLength = sizeados.length;
       const sizeadosWidth = sizeadosLength * 60;
       const w = (ancho - sizeadosWidth - personalizadosSum) / (headers.length - sizeadosLength - personalizados.length - ocultos.length);
-      console.log({
-        w,
-        ancho,
-        sizeadosWidth,
-        personalizadosSum,
-        headers,
-        sizeadosLength,
-        personalizados
-      });
       setWidths(
         Object.fromEntries(
           headers.map((h) => {
@@ -39190,13 +39271,14 @@ function HTable({
       (value) => String(value).toLowerCase().includes(context.searchBy.toLowerCase())
     );
   });
+  const pagination = use_pagination_default({ total: searchedData.length });
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       className: [
         context.className,
         "bg-white relative",
-        "p-2 border shadow rounded-2xl"
+        "p-2 border shadow rounded-2xl w-full rounded-lg "
       ].join(" "),
       ref: tableRef,
       children: [
@@ -39216,10 +39298,11 @@ function HTable({
                       }
                     }
                     return obj;
-                  })
+                  }),
+                  `${context.exportName}.xlsx`
                 );
               },
-              className: "flex gap-1 items-center border shadow rounded p-1 text-white bg-green-800 px-2",
+              className: "flex gap-1 items-center border shadow rounded p-1 text-white bg-green-800 p-1 text-xs",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ExcelIcon2, {}),
                 "Exportar"
@@ -39229,7 +39312,7 @@ function HTable({
           context.onSelect && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "button",
             {
-              className: "border shadow rounded p-1 text-white px-2 " + (context.selected.length > 0 ? "bg-blue-500" : "bg-gray-500"),
+              className: "border shadow rounded p-1 text-white p-1 text-xs  bg-blue-500 cursor-pointer ",
               disabled: context.selected.length == 0,
               onClick: async (e) => {
                 setIsloading(true);
@@ -39246,7 +39329,7 @@ function HTable({
           context.onSave && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "button",
             {
-              className: "border shadow rounded p-1 text-white px-2 bg-blue-500",
+              className: "border shadow rounded p-1 text-white p-1 text-xs  bg-blue-500 cursor-pointer ",
               onClick: async (e) => {
                 setIsloading(true);
                 const ex = context.filteredData.map((d) => {
@@ -39260,204 +39343,253 @@ function HTable({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid ", style: { gridTemplateColumns }, children: [
-          headers.map((header, i) => {
-            var _a, _b;
-            if ((_b = (_a = context == null ? void 0 : context.hideColumns) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, header)) return null;
-            if (header.startsWith("_") && !header.startsWith("__")) return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-              "div",
-              {
-                className: "bg-white relative w-full bg-red-100",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                    Header,
-                    {
-                      padding,
-                      header,
-                      context,
-                      drag: { gridTemplateColumns, startDrag, widths }
-                    }
-                  ),
-                  i < headers.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                    "div",
-                    {
-                      onMouseDown: (e) => startDrag(e, header),
-                      style: {
-                        position: "absolute",
-                        right: -3,
-                        top: 0,
-                        width: 6,
-                        height: "100%",
-                        cursor: "col-resize",
-                        background: "transparent"
-                      },
-                      onMouseEnter: (e) => e.currentTarget.style.background = "var(--border-strong, #ccc)",
-                      onMouseLeave: (e) => e.currentTarget.style.background = "transparent"
-                    }
-                  )
-                ]
-              },
-              header
-            );
-          }),
-          searchedData.map((row, rowIndex) => {
-            const items = Object.entries(row);
-            return items.map(([key, item], i) => {
-              var _a, _b, _c, _d, _e;
-              if ((_b = (_a = context == null ? void 0 : context.hideColumns) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, key)) return null;
-              if (key.startsWith("_") && !key.startsWith("__")) return null;
-              if (key == "__modal__") {
-                return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                  "div",
-                  {
-                    onMouseEnter: (e) => setCurrentIndex(rowIndex),
-                    style: {
-                      height: `${padding}px`
-                    },
-                    className: (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + " border-b p-2 flex items-center justify-center  " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? "bg-yellow-100" : ""),
-                    children: (context == null ? void 0 : context.modalButton) || /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                      "button",
-                      {
-                        className: "border shadow rounded bg-blue-500 text-white p-2 ",
-                        onClick: (e) => {
-                          var _a2;
-                          setCurrentIndex(rowIndex);
-                          (_a2 = modalRef.current) == null ? void 0 : _a2.click();
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EditIcon3, {})
-                      }
-                    )
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          "div",
+          {
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                "div",
+                {
+                  style: {
+                    gridTemplateColumns,
+                    width: Object.values(widths).reduce((acc, i) => acc + i, 0)
                   },
-                  row.id + i
-                );
-              }
-              if (key == "__select__") {
-                return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                  "div",
-                  {
-                    onMouseEnter: (e) => setCurrentIndex(rowIndex),
-                    style: {
-                      height: `${padding}px`
-                    },
-                    className: (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + " border-b p-2 flex items-center justify-center " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? "bg-yellow-100" : ""),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                      "input",
+                  className: ["grid  w-full "].join(" "),
+                  children: headers.map((header, i) => {
+                    var _a, _b;
+                    if ((_b = (_a = context == null ? void 0 : context.hideColumns) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, header)) return null;
+                    if (header.startsWith("_") && !header.startsWith("__")) return null;
+                    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      "div",
                       {
-                        type: "checkbox",
-                        className: "w-5 h-5 accent-blue-600 transition-all duration-300 checked:scale-110 ",
-                        checked: Boolean(
-                          context.selected.find((s) => s == (row == null ? void 0 : row.id))
-                        ),
-                        onChange: (e) => {
-                          const newSelected = [...context.selected];
-                          const index = newSelected.findIndex((s) => s == (row == null ? void 0 : row.id));
-                          if (index >= 0) {
-                            newSelected.splice(index, 1);
-                          } else {
-                            newSelected.push(row == null ? void 0 : row.id);
+                        className: "bg-white relative w-full bg-red-100",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          Header,
+                          {
+                            padding,
+                            header,
+                            context,
+                            drag: { gridTemplateColumns, startDrag, widths }
                           }
-                          context.setSelected(newSelected);
-                        }
-                      }
-                    )
+                        )
+                      },
+                      header
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                "div",
+                {
+                  style: {
+                    gridTemplateColumns,
+                    width: Object.values(widths).reduce((acc, i) => acc + i, 0)
                   },
-                  row.id + i
-                );
-              }
-              return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  className: [
+                    "grid max-h-[500px]  overflow-hidden overflow-y-scroll "
+                  ].join(" "),
+                  children: searchedData.slice(pagination.inicio - 1, pagination.fin).map((row, rowIndex) => {
+                    const items = Object.entries(row);
+                    return items.map(([key, item], i) => {
+                      var _a, _b, _c, _d, _e;
+                      if ((_b = (_a = context == null ? void 0 : context.hideColumns) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, key)) return null;
+                      if (key.startsWith("_") && !key.startsWith("__")) return null;
+                      if (key == "__modal__") {
+                        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          "div",
+                          {
+                            onMouseEnter: (e) => setCurrentIndex(rowIndex),
+                            style: {
+                              height: `${padding}px`
+                            },
+                            className: (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + " border-b p-2 flex items-center justify-center  " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? "bg-yellow-100" : ""),
+                            children: (context == null ? void 0 : context.modalButton) || /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                              "button",
+                              {
+                                className: "border shadow rounded bg-blue-500 text-white p-2 ",
+                                onClick: (e) => {
+                                  var _a2;
+                                  setCurrentIndex(rowIndex);
+                                  (_a2 = modalRef.current) == null ? void 0 : _a2.click();
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EditIcon3, {})
+                              }
+                            )
+                          },
+                          row.id + i
+                        );
+                      }
+                      if (key == "__select__") {
+                        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          "div",
+                          {
+                            onMouseEnter: (e) => setCurrentIndex(rowIndex),
+                            style: {
+                              height: `${padding}px`
+                            },
+                            className: (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + " border-b  flex items-start p-2 justify-center " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? "bg-yellow-100" : ""),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                              "input",
+                              {
+                                type: "checkbox",
+                                className: "w-5 h-5 accent-blue-600 transition-all duration-300 checked:scale-110 ",
+                                checked: Boolean(
+                                  context.selected.find((s) => s == (row == null ? void 0 : row.id))
+                                ),
+                                onChange: (e) => {
+                                  const newSelected = [...context.selected];
+                                  const index = newSelected.findIndex(
+                                    (s) => s == (row == null ? void 0 : row.id)
+                                  );
+                                  if (index >= 0) {
+                                    newSelected.splice(index, 1);
+                                  } else {
+                                    newSelected.push(row == null ? void 0 : row.id);
+                                  }
+                                  context.setSelected(newSelected);
+                                }
+                              }
+                            )
+                          },
+                          row.id + i
+                        );
+                      }
+                      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        "div",
+                        {
+                          onMouseEnter: (e) => setCurrentIndex(rowIndex),
+                          style: {
+                            fontSize: (context == null ? void 0 : context.fontSize) || "12px",
+                            ...(context == null ? void 0 : context.wrapText) ? { minHeight: `${padding}px` } : { height: `${padding}px` }
+                          },
+                          className: "  p-1" + (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + (context.wrapText ? " text-wrap truncate " : "  truncate ") + " border-b  " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? rowIndex == currentIndex ? " bg-yellow-200 " : " bg-yellow-100 " : ""),
+                          children: (context == null ? void 0 : context.editableFields) && context.editableFields.includes(key) ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                            "input",
+                            {
+                              defaultValue: item,
+                              className: "w-full " + (context.editions.includes(row == null ? void 0 : row.id) ? "bg-blue-400 text-white" : "bg-blue-100"),
+                              onBlur: (e) => {
+                                const id = row == null ? void 0 : row.id;
+                                const newData = [...context.data];
+                                const index = newData.findIndex((d) => +d.id == +id);
+                                newData[index][key] = e.target.value;
+                                context.setData(newData);
+                                const newEditions = [
+                                  .../* @__PURE__ */ new Set([...context.editions, id])
+                                ];
+                                context.setEditions(newEditions);
+                              }
+                            }
+                          ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? import_react20.default.cloneElement(context.buttons[key], {
+                            // children: context.buttons[key]?.props?.children
+                            //   ? item
+                            //   : undefined,
+                            value: item,
+                            children: ((_e = (_d = context.buttons[key]) == null ? void 0 : _d.props) == null ? void 0 : _e.children) ? item : null,
+                            onClick: async (e) => {
+                              var _a2, _b2;
+                              const ret = await ((_b2 = (_a2 = context.buttons[key].props) == null ? void 0 : _a2.onClick) == null ? void 0 : _b2.call(_a2, {
+                                e,
+                                row
+                              })) || {};
+                              const newData = [...context.data];
+                              const index = newData.findIndex(
+                                (f) => f.id == (row == null ? void 0 : row.id)
+                              );
+                              newData[index] = { ...newData[index], ...ret };
+                              context.setData(newData);
+                            },
+                            onChange: async (e) => {
+                              var _a2, _b2, _c2;
+                              const value = e.target.value;
+                              const ret = await ((_b2 = (_a2 = context.buttons[key].props) == null ? void 0 : _a2.onChange) == null ? void 0 : _b2.call(_a2, {
+                                e,
+                                row
+                              })) || {};
+                              const newData = [...context.data];
+                              const index = newData.findIndex(
+                                (f) => f.id == (row == null ? void 0 : row.id)
+                              );
+                              if (index >= 0) {
+                                newData[index][key] = value;
+                              }
+                              for (let i2 in ret) {
+                                if ((_c2 = newData[index]) == null ? void 0 : _c2[i2]) {
+                                  const v = ret[i2];
+                                  newData[index][i2] = v;
+                                }
+                              }
+                              context.setData(newData);
+                            }
+                          }) : ["number", "string"].includes(typeof item) ? valueFormatter({
+                            value: item,
+                            currentCoin: context.currentCoin
+                          }) : import_react20.default.isValidElement(item) ? item : JSON.stringify(item)
+                        },
+                        row.id + i
+                      );
+                    });
+                  })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 "div",
                 {
-                  onMouseEnter: (e) => setCurrentIndex(rowIndex),
                   style: {
-                    fontSize: context.fontSize,
-                    ...(context == null ? void 0 : context.wrapText) ? { minHeight: `${padding}px` } : { height: `${padding}px` }
+                    gridTemplateColumns,
+                    width: Object.values(widths).reduce((acc, i) => acc + i, 0)
                   },
-                  className: " flex  justify-center items-center " + (rowIndex == currentIndex ? " bg-blue-100 " : " bg-white ") + (context.wrapText ? " text-wrap truncate " : "  truncate ") + " border-b  " + (context.searchBy && String(item).toLowerCase().includes(context.searchBy.toLowerCase()) ? rowIndex == currentIndex ? " bg-yellow-200 " : " bg-yellow-100 " : ""),
-                  children: (context == null ? void 0 : context.editableFields) && context.editableFields.includes(key) ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-                    "input",
+                  className: ["grid border-b bg-white"].join(" "),
+                  children: Object.keys((context == null ? void 0 : context.footer) || {}).length > 0 && headers.map((header) => {
+                    var _a, _b, _c, _d;
+                    if ((_b = (_a = context == null ? void 0 : context.hideColumns) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, header)) return null;
+                    if (header.startsWith("_") && !header.startsWith("__"))
+                      return null;
+                    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      "div",
+                      {
+                        style: {
+                          // height: `${padding}px`,
+                          maxHeight: "100px"
+                        },
+                        title: ((_c = context.footer) == null ? void 0 : _c[header]) + " de " + header,
+                        className: "  cursor-default font-bold  bg-white flex items-center justify-center border-r text-xs my-5 ",
+                        children: valueFormatter({
+                          currentCoin: context.currentCoin,
+                          value: ((_d = context.footer) == null ? void 0 : _d[header]) ? context.footer[header] == "sum" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) : context.footer[header] == "count" ? context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : context.footer[header] == "avg" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) / context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : "" : ""
+                        })
+                      },
+                      header
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex justify-end p-2", children: [
+                pagination.rango,
+                " de ",
+                pagination.total,
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-5 mx-5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    "button",
                     {
-                      defaultValue: item,
-                      className: "w-full " + (context.editions.includes(row == null ? void 0 : row.id) ? "bg-blue-400 text-white" : "bg-blue-100"),
-                      onBlur: (e) => {
-                        const id = row == null ? void 0 : row.id;
-                        const newData = [...context.data];
-                        const index = newData.findIndex((d) => +d.id == +id);
-                        newData[index][key] = e.target.value;
-                        context.setData(newData);
-                        const newEditions = [
-                          .../* @__PURE__ */ new Set([...context.editions, id])
-                        ];
-                        context.setEditions(newEditions);
-                      }
+                      onClick: (e) => pagination.hasPrev && pagination.prev(),
+                      className: pagination.hasPrev ? "" : "text-gray-300",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PrevIcon, {})
                     }
-                  ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? import_react19.default.cloneElement(context.buttons[key], {
-                    // children: context.buttons[key]?.props?.children
-                    //   ? item
-                    //   : undefined,
-                    value: item,
-                    children: ((_e = (_d = context.buttons[key]) == null ? void 0 : _d.props) == null ? void 0 : _e.children) ? item : null,
-                    onClick: async (e) => {
-                      var _a2, _b2;
-                      const ret = await ((_b2 = (_a2 = context.buttons[key].props) == null ? void 0 : _a2.onClick) == null ? void 0 : _b2.call(_a2, {
-                        e,
-                        row
-                      })) || {};
-                      const newData = [...context.data];
-                      const index = newData.findIndex((f) => f.id == (row == null ? void 0 : row.id));
-                      newData[index] = { ...newData[index], ...ret };
-                      context.setData(newData);
-                    },
-                    onChange: async (e) => {
-                      var _a2, _b2, _c2;
-                      const value = e.target.value;
-                      const ret = await ((_b2 = (_a2 = context.buttons[key].props) == null ? void 0 : _a2.onChange) == null ? void 0 : _b2.call(_a2, {
-                        e,
-                        row
-                      })) || {};
-                      const newData = [...context.data];
-                      const index = newData.findIndex((f) => f.id == (row == null ? void 0 : row.id));
-                      if (index >= 0) {
-                        newData[index][key] = value;
-                      }
-                      for (let i2 in ret) {
-                        if ((_c2 = newData[index]) == null ? void 0 : _c2[i2]) {
-                          const v = ret[i2];
-                          newData[index][i2] = v;
-                        }
-                      }
-                      context.setData(newData);
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    "button",
+                    {
+                      onClick: (e) => pagination.hasNext && pagination.next(),
+                      className: pagination.hasNext ? "" : "text-gray-300",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(NextIcon, {})
                     }
-                  }) : ["number", "string"].includes(typeof item) ? valueFormatter({
-                    value: item,
-                    currentCoin: context.currentCoin
-                  }) : import_react19.default.isValidElement(item) ? item : JSON.stringify(item)
-                },
-                row.id + i
-              );
-            });
-          }),
-          Object.keys((context == null ? void 0 : context.footer) || {}).length > 0 && headers.map((header) => {
-            var _a, _b, _c;
-            if ((_b = (_a = context == null ? void 0 : context.hideColumns) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, header)) return null;
-            if (header.startsWith("_") && !header.startsWith("__")) return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-              "div",
-              {
-                style: {
-                  height: `${padding}px`,
-                  maxHeight: "100px"
-                },
-                className: "border-b  font-bold  bg-white flex items-center justify-center",
-                children: valueFormatter({
-                  currentCoin: context.currentCoin,
-                  value: ((_c = context.footer) == null ? void 0 : _c[header]) ? context.footer[header] == "sum" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) : context.footer[header] == "count" ? context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : context.footer[header] == "avg" ? context.filteredData.map((d) => +d[header]).reduce((acc, h) => h + acc, 0) / context.filteredData.map((d) => d[header] != "" ? 1 : 0).reduce((acc, h) => acc + h, 0) : "" : ""
-                })
-              },
-              header
-            );
-          })
-        ] }),
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
         context.modal && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           Modal,
           {
@@ -39527,7 +39659,7 @@ function ModalContent({
         }
       )
     ] }),
-    import_react19.default.cloneElement(context.modal, {
+    import_react20.default.cloneElement(context.modal, {
       row: searchedData[currentIndex],
       hide
     })
@@ -39535,7 +39667,7 @@ function ModalContent({
 }
 
 // src/table-advanced/context.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/table-advanced/filter.reducer.ts
 var filterReducer = (acc, b) => {
@@ -39563,19 +39695,19 @@ var sortReducer = (acc, b) => {
 // src/table-advanced/context.ts
 function useContext({ onSelect }) {
   const excel = useExcel();
-  const [editions, setEditions] = (0, import_react20.useState)([]);
-  const [selected, setSelected] = (0, import_react20.useState)([]);
-  const [data, setData] = (0, import_react20.useState)([]);
+  const [editions, setEditions] = (0, import_react21.useState)([]);
+  const [selected, setSelected] = (0, import_react21.useState)([]);
+  const [data, setData] = (0, import_react21.useState)([]);
   const headers = [...new Set(data.map((b) => Object.keys(b)).flat())];
-  const [currentHeader, setCurrentHeader] = (0, import_react20.useState)(null);
+  const [currentHeader, setCurrentHeader] = (0, import_react21.useState)(null);
   const cols = headers.length;
-  const [filters, setFilters] = (0, import_react20.useReducer)(
+  const [filters, setFilters] = (0, import_react21.useReducer)(
     filterReducer,
     new Array()
   );
-  const [searchBy, setSearchBy] = (0, import_react20.useState)("");
-  const [sort, setSort] = (0, import_react20.useReducer)(sortReducer, new Array());
-  const sortedData = (0, import_react20.useMemo)(() => {
+  const [searchBy, setSearchBy] = (0, import_react21.useState)("");
+  const [sort, setSort] = (0, import_react21.useReducer)(sortReducer, new Array());
+  const sortedData = (0, import_react21.useMemo)(() => {
     return [...data].sort((a, b) => {
       for (const { field, type } of sort.reverse()) {
         const av = a[field];
@@ -39605,7 +39737,7 @@ function useContext({ onSelect }) {
     }
     return true;
   });
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (filters.length == 0) {
       setEditions([]);
     }
@@ -39638,7 +39770,7 @@ var import_jsx_runtime37 = require("react/jsx-runtime");
 function TableAdvanced(tableProps) {
   const { data, ...props } = tableProps;
   const context = useContext({ onSelect: Boolean(tableProps.onSelect) });
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     context.setData(
       Array.isArray(data) ? data.map((d) => {
         return {
@@ -39649,7 +39781,7 @@ function TableAdvanced(tableProps) {
       }) : data
     );
   }, [data]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (tableProps == null ? void 0 : tableProps.sortBy) {
       const [k, v] = Object.entries(tableProps.sortBy)[0];
       context.setSort({ [k]: v });
@@ -39666,6 +39798,64 @@ function TableAdvanced(tableProps) {
   }
   return null;
 }
+
+// src/tabs/index.tsx
+var import_react23 = __toESM(require("react"));
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function TabContainer({
+  children,
+  labelMaxWidth = 100,
+  currentIndex = 0
+}) {
+  const [index, setIndex] = (0, import_react23.useState)(0);
+  const items = import_react23.default.Children.toArray(
+    children
+  );
+  const labels = items.map((c) => c.props.label);
+  const handleKeyDown = (e, k) => {
+    if (e.key === "ArrowRight") setIndex((k + 1) % labels.length);
+    if (e.key === "ArrowLeft")
+      setIndex((k - 1 + labels.length) % labels.length);
+  };
+  (0, import_react23.useEffect)(() => {
+    setIndex(currentIndex);
+  }, [currentIndex]);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "w-full bg-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { role: "tablist", className: "flex gap-1 border-b border-slate-200", children: labels.map((label, k) => {
+      var _a, _b;
+      const active = k === index;
+      const isDisabled = (_b = (_a = items.find((i) => i.props.label == label)) == null ? void 0 : _a.props) == null ? void 0 : _b.disabled;
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        "button",
+        {
+          style: { maxWidth: labelMaxWidth },
+          title: label,
+          role: "tab",
+          type: "button",
+          "aria-selected": active,
+          tabIndex: active ? 0 : -1,
+          onClick: () => !isDisabled && setIndex(k),
+          onKeyDown: (e) => !isDisabled && handleKeyDown(e, k),
+          className: [
+            "truncate relative px-4 py-2 text-sm font-medium transition-colors duration-150",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-1 rounded-t-md",
+            active ? "text-indigo-600" : "text-slate-500 hover:text-slate-700 hover:bg-gray-200",
+            isDisabled ? " text-gray-300 cursor-not-allowed hover:text-gray-300 hover:bg-white" : ""
+          ].join(" "),
+          children: [
+            label,
+            active && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "absolute left-0 right-0 -bottom-px h-0.5 bg-indigo-600 rounded-full" })
+          ]
+        },
+        label + k
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { role: "tabpanel", className: "p-4 text-sm text-slate-700", children: items[index] })
+  ] });
+}
+function TabItem({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -39678,6 +39868,8 @@ function TableAdvanced(tableProps) {
   MyCalendar,
   Pre,
   Select,
+  TabContainer,
+  TabItem,
   Table,
   Table3,
   TableAdvanced,