next-recomponents 2.0.55 → 2.0.57

package/dist/index.mjs

@@ -38505,10 +38505,10 @@ import { useEffect as useEffect13 } from "react";
 
 // src/table-advanced/h.table.tsx
 import React10, {
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useEffect as useEffect11,
   useRef as useRef7,
-  useState as useState15
+  useState as useState16
 } from "react";
 
 // src/table-advanced/header.tsx
@@ -38537,6 +38537,44 @@ function DropIcon() {
     }
   );
 }
+function PrevIcon() {
+  return /* @__PURE__ */ jsx30(
+    "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__ */ jsx30(
+        "polyline",
+        {
+          fill: "none",
+          strokeWidth: "2",
+          points: "7 2 17 12 7 22",
+          transform: "matrix(-1 0 0 1 24 0)"
+        }
+      )
+    }
+  );
+}
+function NextIcon() {
+  return /* @__PURE__ */ jsx30(
+    "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__ */ jsx30("polyline", { fill: "none", "stroke-width": "2", points: "7 2 17 12 7 22" })
+    }
+  );
+}
 function EditIcon3() {
   return /* @__PURE__ */ jsx30(
     "svg",
@@ -38727,6 +38765,7 @@ function Header({
   padding
 }) {
   const [visible, setVisible] = useState14(false);
+  const [hovered, setHovered] = useState14(false);
   const sortIndex = context.sort.findIndex((b) => b.field == header);
   const [text, setText] = useState14("");
   const cellRef = useRef6(null);
@@ -38781,7 +38820,7 @@ function Header({
     return /* @__PURE__ */ jsx31("div", { className: "", children: /* @__PURE__ */ jsx31(
       "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__ */ jsx31(
           "input",
@@ -38803,11 +38842,13 @@ function Header({
       }
     ) });
   } else
-    return /* @__PURE__ */ jsx31("div", { className: "", children: /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsx31("div", { className: " ", children: /* @__PURE__ */ jsxs23(
       "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__ */ jsxs23("div", { className: "flex justify-between items-center ", children: [
@@ -38854,7 +38895,7 @@ function Header({
                 style: { zIndex: 10 },
                 className: "icon font-bold  p-1 cursor-pointer pr-3 ",
                 onClick: (e) => setVisible(true),
-                children: /* @__PURE__ */ jsx31(DropIcon, {})
+                children: hovered ? /* @__PURE__ */ jsx31(DropIcon, {}) : ""
               }
             )
           ] }),
@@ -38862,7 +38903,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 }
             }
           ),
@@ -39036,7 +39077,7 @@ import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
 function Searchable({
   context
 }) {
-  return /* @__PURE__ */ jsxs24("div", { className: "flex justify-start p-2 relative w-96", children: [
+  return /* @__PURE__ */ jsxs24("div", { className: "flex justify-start p-2 relative w-96 text-xs", children: [
     /* @__PURE__ */ jsx32(
       "input",
       {
@@ -39083,14 +39124,61 @@ function valueFormatter({
   return value;
 }
 
+// src/table-advanced/use.pagination.tsx
+import { useState as useState15, useMemo as useMemo8, useCallback as useCallback2 } from "react";
+function usePaginacion({
+  total,
+  tamanioPagina = 100,
+  paginaInicial = 1
+}) {
+  const totalPaginas = Math.max(1, Math.ceil(total / tamanioPagina));
+  const [pagina, setPagina] = useState15(
+    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 = useMemo8(() => {
+    if (total === 0) return "0 a 0";
+    return `${inicio} a ${fin}`;
+  }, [inicio, fin, total]);
+  const hasNext = pagina < totalPaginas;
+  const hasPrev = pagina > 1;
+  const next = useCallback2(() => {
+    setPagina((p) => Math.min(p + 1, totalPaginas));
+  }, [totalPaginas]);
+  const prev = useCallback2(() => {
+    setPagina((p) => Math.max(p - 1, 1));
+  }, []);
+  const irAPagina = useCallback2(
+    (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
 import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
 function HTable({
   context
 }) {
-  const [isLoading, setIsloading] = useState15(false);
+  const [isLoading, setIsloading] = useState16(false);
   const { cols, headers } = context;
-  const [currentIndex, setCurrentIndex] = useState15(-1);
+  const [currentIndex, setCurrentIndex] = useState16(-1);
   const tableRef = useRef7(null);
   const modalRef = useRef7(null);
   const catDensities = { confortable: 80, compact: 30, standard: 53 };
@@ -39106,8 +39194,8 @@ function HTable({
     function resize(headers3) {
       return Object.fromEntries(headers3.map((h) => [h, getWidth(h)]));
     }
-    const [widths2, setWidths2] = useState15({});
-    const startDrag2 = useCallback2(
+    const [widths2, setWidths2] = useState16({});
+    const startDrag2 = useCallback3(
       (e, headerKey) => {
         var _a;
         e.preventDefault();
@@ -39158,15 +39246,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) => {
@@ -39188,13 +39267,14 @@ function HTable({
       (value) => String(value).toLowerCase().includes(context.searchBy.toLowerCase())
     );
   });
+  const pagination = use_pagination_default({ total: searchedData.length });
   return /* @__PURE__ */ jsxs25(
     "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: [
@@ -39214,10 +39294,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__ */ jsx33(ExcelIcon2, {}),
                 "Exportar"
@@ -39227,7 +39308,7 @@ function HTable({
           context.onSelect && /* @__PURE__ */ jsx33(
             "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);
@@ -39244,7 +39325,7 @@ function HTable({
           context.onSave && /* @__PURE__ */ jsx33(
             "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) => {
@@ -39258,204 +39339,253 @@ function HTable({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs25("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__ */ jsxs25(
-              "div",
-              {
-                className: "bg-white relative w-full bg-red-100",
-                children: [
-                  /* @__PURE__ */ jsx33(
-                    Header,
-                    {
-                      padding,
-                      header,
-                      context,
-                      drag: { gridTemplateColumns, startDrag, widths }
-                    }
-                  ),
-                  i < headers.length - 1 && /* @__PURE__ */ jsx33(
-                    "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__ */ jsx33(
-                  "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__ */ jsx33(
-                      "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__ */ jsx33(EditIcon3, {})
-                      }
-                    )
+        /* @__PURE__ */ jsxs25(
+          "div",
+          {
+            children: [
+              /* @__PURE__ */ jsx33(
+                "div",
+                {
+                  style: {
+                    gridTemplateColumns,
+                    width: Object.values(widths).reduce((acc, i) => acc + i, 0)
                   },
-                  row.id + i
-                );
-              }
-              if (key == "__select__") {
-                return /* @__PURE__ */ jsx33(
-                  "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__ */ jsx33(
-                      "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__ */ jsx33(
+                      "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__ */ jsx33(
+                          Header,
+                          {
+                            padding,
+                            header,
+                            context,
+                            drag: { gridTemplateColumns, startDrag, widths }
                           }
-                          context.setSelected(newSelected);
-                        }
-                      }
-                    )
+                        )
+                      },
+                      header
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx33(
+                "div",
+                {
+                  style: {
+                    gridTemplateColumns,
+                    width: Object.values(widths).reduce((acc, i) => acc + i, 0)
                   },
-                  row.id + i
-                );
-              }
-              return /* @__PURE__ */ jsx33(
+                  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__ */ jsx33(
+                          "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__ */ jsx33(
+                              "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__ */ jsx33(EditIcon3, {})
+                              }
+                            )
+                          },
+                          row.id + i
+                        );
+                      }
+                      if (key == "__select__") {
+                        return /* @__PURE__ */ jsx33(
+                          "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__ */ jsx33(
+                              "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__ */ jsx33(
+                        "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__ */ jsx33(
+                            "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]) ? React10.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
+                          }) : React10.isValidElement(item) ? item : JSON.stringify(item)
+                        },
+                        row.id + i
+                      );
+                    });
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx33(
                 "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__ */ jsx33(
-                    "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__ */ jsx33(
+                      "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__ */ jsxs25("div", { className: "flex justify-end p-2", children: [
+                pagination.rango,
+                " de ",
+                pagination.total,
+                /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-5 mx-5", children: [
+                  /* @__PURE__ */ jsx33(
+                    "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__ */ jsx33(PrevIcon, {})
                     }
-                  ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? React10.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__ */ jsx33(
+                    "button",
+                    {
+                      onClick: (e) => pagination.hasNext && pagination.next(),
+                      className: pagination.hasNext ? "" : "text-gray-300",
+                      children: /* @__PURE__ */ jsx33(NextIcon, {})
                     }
-                  }) : ["number", "string"].includes(typeof item) ? valueFormatter({
-                    value: item,
-                    currentCoin: context.currentCoin
-                  }) : React10.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__ */ jsx33(
-              "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__ */ jsx33(
           Modal,
           {
@@ -39533,7 +39663,7 @@ function ModalContent({
 }
 
 // src/table-advanced/context.ts
-import { useEffect as useEffect12, useMemo as useMemo9, useReducer as useReducer3, useState as useState16 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo10, useReducer as useReducer3, useState as useState17 } from "react";
 
 // src/table-advanced/filter.reducer.ts
 var filterReducer = (acc, b) => {
@@ -39561,19 +39691,19 @@ var sortReducer = (acc, b) => {
 // src/table-advanced/context.ts
 function useContext({ onSelect }) {
   const excel = useExcel();
-  const [editions, setEditions] = useState16([]);
-  const [selected, setSelected] = useState16([]);
-  const [data, setData] = useState16([]);
+  const [editions, setEditions] = useState17([]);
+  const [selected, setSelected] = useState17([]);
+  const [data, setData] = useState17([]);
   const headers = [...new Set(data.map((b) => Object.keys(b)).flat())];
-  const [currentHeader, setCurrentHeader] = useState16(null);
+  const [currentHeader, setCurrentHeader] = useState17(null);
   const cols = headers.length;
   const [filters, setFilters] = useReducer3(
     filterReducer,
     new Array()
   );
-  const [searchBy, setSearchBy] = useState16("");
+  const [searchBy, setSearchBy] = useState17("");
   const [sort, setSort] = useReducer3(sortReducer, new Array());
-  const sortedData = useMemo9(() => {
+  const sortedData = useMemo10(() => {
     return [...data].sort((a, b) => {
       for (const { field, type } of sort.reverse()) {
         const av = a[field];
@@ -39664,6 +39794,64 @@ function TableAdvanced(tableProps) {
   }
   return null;
 }
+
+// src/tabs/index.tsx
+import React11, { useEffect as useEffect14, useState as useState19 } from "react";
+import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+function TabContainer({
+  children,
+  labelMaxWidth = 100,
+  currentIndex = 0
+}) {
+  const [index, setIndex] = useState19(0);
+  const items = React11.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);
+  };
+  useEffect14(() => {
+    setIndex(currentIndex);
+  }, [currentIndex]);
+  return /* @__PURE__ */ jsxs26("div", { className: "w-full bg-white", children: [
+    /* @__PURE__ */ jsx35("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__ */ jsxs26(
+        "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__ */ jsx35("span", { className: "absolute left-0 right-0 -bottom-px h-0.5 bg-indigo-600 rounded-full" })
+          ]
+        },
+        label + k
+      );
+    }) }),
+    /* @__PURE__ */ jsx35("div", { role: "tabpanel", className: "p-4 text-sm text-slate-700", children: items[index] })
+  ] });
+}
+function TabItem({ children }) {
+  return /* @__PURE__ */ jsx35(Fragment3, { children });
+}
 export {
   Alert,
   Button,
@@ -39675,6 +39863,8 @@ export {
   MyCalendar,
   pre_default as Pre,
   Select,
+  TabContainer,
+  TabItem,
   Table,
   Table3,
   TableAdvanced,