next-recomponents 2.0.60 → 2.0.62

package/dist/index.d.mts

@@ -205,13 +205,13 @@ type Item = {
     url: string;
     name: string;
     contentType: string;
-    width?: string;
-    height?: string;
 };
 type Props = {
     item: Item;
+    width?: string;
+    height?: string;
 };
-declare function DocumentViewer({ item }: Props): react_jsx_runtime.JSX.Element;
+declare function DocumentViewer({ item, width, height, }: Props): react_jsx_runtime.JSX.Element;
 
 interface Table3Props<T extends Record<string, any>> extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
     data: T[];

package/dist/index.d.ts

@@ -205,13 +205,13 @@ type Item = {
     url: string;
     name: string;
     contentType: string;
-    width?: string;
-    height?: string;
 };
 type Props = {
     item: Item;
+    width?: string;
+    height?: string;
 };
-declare function DocumentViewer({ item }: Props): react_jsx_runtime.JSX.Element;
+declare function DocumentViewer({ item, width, height, }: Props): react_jsx_runtime.JSX.Element;
 
 interface Table3Props<T extends Record<string, any>> extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
     data: T[];

package/dist/index.js

@@ -37526,20 +37526,49 @@ function Icon() {
     }
   );
 }
+function DownloadIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "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_runtime21.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3zm-1-4-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59 7 11l5 5z" })
+      ]
+    }
+  );
+}
 
 // src/doc-viewer/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function DocumentViewer({ item }) {
-  const { url, name, contentType, width = "100%", height = "100%" } = item;
+function DocumentViewer({
+  item,
+  width = "100%",
+  height = "100%"
+}) {
+  const { url, name, contentType } = item;
   const isImage = contentType.startsWith("image/");
   const isPdf = contentType === "application/pdf";
   const isGoogleDocCompatible = isPdf || contentType.includes("msword") || contentType.includes("officedocument") || contentType.includes("presentation");
   const viewerUrl = isGoogleDocCompatible ? `https://docs.google.com/gview?url=${encodeURIComponent(
     url
   )}&embedded=true` : url;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "border shadow rounded p-2 h-[100%]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "mb-1 flex justify-between ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "font-bold", children: name }),
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "border shadow rounded  relative  pt-6 pb-1 px-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "grid grid-cols-[3fr_1fr] left-0 rounded-t  shadow  top-0  absolute p-1  bg-blue-500 px-1 text-white w-full ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "h3",
+        {
+          className: "font-bold truncate text-xs px-1 cursor-pointer max-w-[90%]  ",
+          title: name,
+          children: name
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "a",
         {
@@ -37547,8 +37576,8 @@ function DocumentViewer({ item }) {
           download: name,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: "border shadow rounded bg-blue-400 text-white p-2",
-          children: "Descargar"
+          className: "border shadow hover:bg-blue-100 hover:text-black rounded bg-blue-900 text-white text-xs items-center truncate  px-1 flex gap-1 justify-center",
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DownloadIcon, {})
         }
       )
     ] }),
@@ -37557,6 +37586,7 @@ function DocumentViewer({ item }) {
       {
         src: url,
         alt: name,
+        className: "rounded",
         style: {
           width,
           height,
@@ -37568,14 +37598,20 @@ function DocumentViewer({ item }) {
     ) : isGoogleDocCompatible ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "iframe",
       {
+        className: "rounded",
+        style: {
+          width,
+          height,
+          maxWidth: "100%"
+        },
         title: name,
         src: viewerUrl,
-        style: { width, height, border: "none" },
         allowFullScreen: true
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
+        className: "rounded",
         style: {
           width,
           height,
@@ -39263,10 +39299,10 @@ function HTable({
       setWidths(
         Object.fromEntries(
           headers.map((h) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             return [
               h,
-              ((_a = context == null ? void 0 : context.colSize) == null ? void 0 : _a[h]) ? (_b = context == null ? void 0 : context.colSize) == null ? void 0 : _b[h] : ["__select__", "__modal__"].includes(h) ? 60 : h.startsWith("_") ? 0 : w
+              ((_a = context == null ? void 0 : context.colSize) == null ? void 0 : _a[h]) ? (_b = context == null ? void 0 : context.colSize) == null ? void 0 : _b[h] : ["__select__", "__modal__"].includes(h) ? 60 : h.startsWith("_") || ((_d = (_c = context == null ? void 0 : context.hideColumns) == null ? void 0 : _c.includes) == null ? void 0 : _d.call(_c, h)) ? 0 : w
             ];
           })
         )

package/dist/index.mjs

@@ -37495,7 +37495,7 @@ function MyCalendar({
 }
 
 // src/doc-viewer/icon.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function Icon() {
   return /* @__PURE__ */ jsx19(
     "svg",
@@ -37511,20 +37511,49 @@ function Icon() {
     }
   );
 }
+function DownloadIcon() {
+  return /* @__PURE__ */ jsxs12(
+    "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__ */ jsx19("path", { fill: "none", d: "M0 0h24v24H0z" }),
+        /* @__PURE__ */ jsx19("path", { d: "M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3zm-1-4-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59 7 11l5 5z" })
+      ]
+    }
+  );
+}
 
 // src/doc-viewer/index.tsx
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
-function DocumentViewer({ item }) {
-  const { url, name, contentType, width = "100%", height = "100%" } = item;
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function DocumentViewer({
+  item,
+  width = "100%",
+  height = "100%"
+}) {
+  const { url, name, contentType } = item;
   const isImage = contentType.startsWith("image/");
   const isPdf = contentType === "application/pdf";
   const isGoogleDocCompatible = isPdf || contentType.includes("msword") || contentType.includes("officedocument") || contentType.includes("presentation");
   const viewerUrl = isGoogleDocCompatible ? `https://docs.google.com/gview?url=${encodeURIComponent(
     url
   )}&embedded=true` : url;
-  return /* @__PURE__ */ jsxs12("div", { className: "border shadow rounded p-2 h-[100%]", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "mb-1 flex justify-between ", children: [
-      /* @__PURE__ */ jsx20("h3", { className: "font-bold", children: name }),
+  return /* @__PURE__ */ jsxs13("div", { className: "border shadow rounded  relative  pt-6 pb-1 px-1", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-[3fr_1fr] left-0 rounded-t  shadow  top-0  absolute p-1  bg-blue-500 px-1 text-white w-full ", children: [
+      /* @__PURE__ */ jsx20(
+        "h3",
+        {
+          className: "font-bold truncate text-xs px-1 cursor-pointer max-w-[90%]  ",
+          title: name,
+          children: name
+        }
+      ),
       /* @__PURE__ */ jsx20(
         "a",
         {
@@ -37532,8 +37561,8 @@ function DocumentViewer({ item }) {
           download: name,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: "border shadow rounded bg-blue-400 text-white p-2",
-          children: "Descargar"
+          className: "border shadow hover:bg-blue-100 hover:text-black rounded bg-blue-900 text-white text-xs items-center truncate  px-1 flex gap-1 justify-center",
+          children: /* @__PURE__ */ jsx20(DownloadIcon, {})
         }
       )
     ] }),
@@ -37542,6 +37571,7 @@ function DocumentViewer({ item }) {
       {
         src: url,
         alt: name,
+        className: "rounded",
         style: {
           width,
           height,
@@ -37553,14 +37583,20 @@ function DocumentViewer({ item }) {
     ) : isGoogleDocCompatible ? /* @__PURE__ */ jsx20(
       "iframe",
       {
+        className: "rounded",
+        style: {
+          width,
+          height,
+          maxWidth: "100%"
+        },
         title: name,
         src: viewerUrl,
-        style: { width, height, border: "none" },
         allowFullScreen: true
       }
     ) : /* @__PURE__ */ jsx20(
       "div",
       {
+        className: "rounded",
         style: {
           width,
           height,
@@ -37587,7 +37623,7 @@ import React9, {
 import { useEffect as useEffect8, useMemo as useMemo5, useState as useState11 } from "react";
 
 // src/table3/filters.tsx
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function FilterOffIcon() {
   return /* @__PURE__ */ jsx21(
     "svg",
@@ -37649,7 +37685,7 @@ function EditIcon2() {
   );
 }
 function SaveIcon() {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "svg",
     {
       stroke: "currentColor",
@@ -37683,7 +37719,7 @@ function ExcelIcon() {
 }
 
 // src/table3/filter.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function Filter({
   h,
   objectData,
@@ -37744,7 +37780,7 @@ function Filter({
       setSelected(news);
     }
   }, [data]);
-  return /* @__PURE__ */ jsxs14("th", { className: "cursor-pointer", children: [
+  return /* @__PURE__ */ jsxs15("th", { className: "cursor-pointer", children: [
     /* @__PURE__ */ jsx22("div", { className: "relative", children: visible && /* @__PURE__ */ jsx22(
       "div",
       {
@@ -37753,8 +37789,8 @@ function Filter({
         onClick: (e) => setVisible(!visible)
       }
     ) }),
-    /* @__PURE__ */ jsxs14("div", { className: "relative w-full justify-center flex", children: [
-      /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsxs15("div", { className: "relative w-full justify-center flex", children: [
+      /* @__PURE__ */ jsxs15(
         "div",
         {
           style: (colSizes == null ? void 0 : colSizes[h]) ? {
@@ -37777,8 +37813,8 @@ function Filter({
         {
           className: "border shadow rounded bg-white p-1 absolute left-0 text-black",
           style: { zIndex: 9999 },
-          children: /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1 w-[300px] min-w-[300px] resize-x overflow-auto", children: [
-            /* @__PURE__ */ jsxs14(
+          children: /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1 w-[300px] min-w-[300px] resize-x overflow-auto", children: [
+            /* @__PURE__ */ jsxs15(
               "div",
               {
                 onClick: (e) => {
@@ -37800,7 +37836,7 @@ function Filter({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs14(
+            /* @__PURE__ */ jsxs15(
               "div",
               {
                 onClick: (e) => {
@@ -37822,7 +37858,7 @@ function Filter({
                 ]
               }
             ),
-            selected.length < items.length && /* @__PURE__ */ jsxs14(
+            selected.length < items.length && /* @__PURE__ */ jsxs15(
               "div",
               {
                 className: "p-1 flex items-center justify-between px-2 bg-red-200 border shadow rounded",
@@ -37854,7 +37890,7 @@ function Filter({
                 }
               }
             ) }),
-            /* @__PURE__ */ jsx22("div", { children: /* @__PURE__ */ jsxs14("label", { className: "flex gap-1 cursor-pointer px-1", children: [
+            /* @__PURE__ */ jsx22("div", { children: /* @__PURE__ */ jsxs15("label", { className: "flex gap-1 cursor-pointer px-1", children: [
               /* @__PURE__ */ jsx22(
                 "input",
                 {
@@ -37872,7 +37908,7 @@ function Filter({
               "(Seleccionar Todo)"
             ] }) }),
             /* @__PURE__ */ jsx22("div", { className: "overflow-auto  flex gap-1 flex-col p-1 border shadow rounded h-[300px]", children: itemsFiltered.map((item) => {
-              return /* @__PURE__ */ jsx22("div", { className: "hover:bg-gray-100  ", children: /* @__PURE__ */ jsxs14("label", { className: "flex gap-1 cursor-pointer truncate", children: [
+              return /* @__PURE__ */ jsx22("div", { className: "hover:bg-gray-100  ", children: /* @__PURE__ */ jsxs15("label", { className: "flex gap-1 cursor-pointer truncate", children: [
                 /* @__PURE__ */ jsx22(
                   "input",
                   {
@@ -37894,7 +37930,7 @@ function Filter({
                 item || "(Vacias)"
               ] }) }, item);
             }) }),
-            /* @__PURE__ */ jsxs14("div", { className: "flex justify-between px-1", children: [
+            /* @__PURE__ */ jsxs15("div", { className: "flex justify-between px-1", children: [
               /* @__PURE__ */ jsx22(
                 "button",
                 {
@@ -37925,7 +37961,7 @@ function Filter({
 }
 
 // src/table3/head.tsx
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function TableHead({
   headers,
   selectItems,
@@ -37940,7 +37976,7 @@ function TableHead({
   sort,
   setSort
 }) {
-  return /* @__PURE__ */ jsx23("thead", { children: /* @__PURE__ */ jsxs15("tr", { className: "bg-blue-500 text-white font-bold", children: [
+  return /* @__PURE__ */ jsx23("thead", { children: /* @__PURE__ */ jsxs16("tr", { className: "bg-blue-500 text-white font-bold", children: [
     modal && /* @__PURE__ */ jsx23("th", { children: "-" }),
     selectItems && /* @__PURE__ */ jsx23("th", { children: /* @__PURE__ */ jsx23(
       "input",
@@ -37993,7 +38029,7 @@ import { useState as useState12 } from "react";
 
 // src/table3/tr.tsx
 import React7 from "react";
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function TR({
   handlers,
   setObjectData,
@@ -38013,7 +38049,7 @@ function TR({
   symbols
 }) {
   const color = selected == index ? "bg-blue-600 text-white hover:bg-blue-800" : index % 2 == 0 ? "bg-white" : "bg-blue-50";
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "tr",
     {
       className: ` hover:bg-blue-100 ${color} cursor-pointer`,
@@ -38103,7 +38139,7 @@ function TR({
             });
             return /* @__PURE__ */ jsx24("td", { className: `text-black `, children: cloned }, h);
           }
-          return symbols && (symbols == null ? void 0 : symbols[h]) ? /* @__PURE__ */ jsx24("td", { className: `text-center border max-w-[${colSize}px] `, children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1 w-full", children: [
+          return symbols && (symbols == null ? void 0 : symbols[h]) ? /* @__PURE__ */ jsx24("td", { className: `text-center border max-w-[${colSize}px] `, children: /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1 w-full", children: [
             symbols[h],
             " ",
             row[h]
@@ -38189,7 +38225,7 @@ function TableBody({
 }
 
 // src/table3/panel.tsx
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function Panel({
   page,
   setPage,
@@ -38200,9 +38236,9 @@ function Panel({
   maxItems
 }) {
   const excel = useExcel();
-  return /* @__PURE__ */ jsxs17("div", { className: "flex gap-2 bg-gray-100 items-center", children: [
-    /* @__PURE__ */ jsxs17("div", { className: "flex gap-1 ", children: [
-      onSave && /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 bg-gray-100 items-center", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "flex gap-1 ", children: [
+      onSave && /* @__PURE__ */ jsxs18(
         "button",
         {
           className: "p-2 border shadow rounded bg-blue-500 text-white flex items-center gap-1 text-md",
@@ -38216,7 +38252,7 @@ function Panel({
           ]
         }
       ),
-      exportName && /* @__PURE__ */ jsxs17(
+      exportName && /* @__PURE__ */ jsxs18(
         "button",
         {
           className: "p-2 border shadow rounded bg-green-800 text-white flex items-center gap-1 text-md",
@@ -38236,10 +38272,10 @@ function Panel({
         }
       )
     ] }),
-    maxItems !== Infinity && /* @__PURE__ */ jsxs17("div", { className: "flex gap-2 items-center text-2xl", children: [
+    maxItems !== Infinity && /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 items-center text-2xl", children: [
       /* @__PURE__ */ jsx26("button", { onClick: () => setPage(1), disabled: page === 1, children: "\u23EE" }),
       /* @__PURE__ */ jsx26("button", { onClick: () => setPage(page - 1), disabled: page === 1, children: "\u25C0" }),
-      /* @__PURE__ */ jsxs17("span", { className: "text-sm", children: [
+      /* @__PURE__ */ jsxs18("span", { className: "text-sm", children: [
         "P\xE1gina ",
         page,
         " / ",
@@ -38266,7 +38302,7 @@ function Panel({
 }
 
 // src/table3/footer.tsx
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function TableFooter({
   objectData,
   headers,
@@ -38291,14 +38327,14 @@ function TableFooter({
         return null;
     }
   }
-  return footer && /* @__PURE__ */ jsx27("tfoot", { children: /* @__PURE__ */ jsxs18("tr", { className: "bg-blue-500 text-white", children: [
+  return footer && /* @__PURE__ */ jsx27("tfoot", { children: /* @__PURE__ */ jsxs19("tr", { className: "bg-blue-500 text-white", children: [
     selectItems && /* @__PURE__ */ jsx27("th", {}),
     modal && /* @__PURE__ */ jsx27("th", {}),
     headers.map((header) => {
       if (header.startsWith("_")) {
         return null;
       } else if (footer == null ? void 0 : footer[header]) {
-        return symbols && (symbols == null ? void 0 : symbols[header]) ? /* @__PURE__ */ jsxs18("th", { className: "flex items-center gap-1", children: [
+        return symbols && (symbols == null ? void 0 : symbols[header]) ? /* @__PURE__ */ jsxs19("th", { className: "flex items-center gap-1", children: [
           symbols[header],
           " ",
           operacion(footer[header], header)
@@ -38311,7 +38347,7 @@ function TableFooter({
 
 // src/table3/dialog.tsx
 import React8, { useMemo as useMemo6 } from "react";
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 function Dialog3({
   modalRef,
   children,
@@ -38339,13 +38375,13 @@ function Dialog3({
     }
     return null;
   }, [dialogRow, children]);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "dialog",
     {
       ref: modalRef,
       className: "p-6 rounded-xl shadow-2xl backdrop:bg-black/50  w-[100%] h-screen",
       children: [
-        /* @__PURE__ */ jsxs19("div", { className: "flex justify-between items-center mb-4", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex justify-between items-center mb-4", children: [
           /* @__PURE__ */ jsx28("div", {}),
           /* @__PURE__ */ jsx28(
             "button",
@@ -38367,7 +38403,7 @@ function Dialog3({
 var dialog_default = Dialog3;
 
 // src/table3/index.tsx
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 function Table3({
   data,
   selectItems,
@@ -38479,7 +38515,7 @@ function Table3({
   }, [objectData]);
   const style = (props == null ? void 0 : props.style) ? { ...props.style, tableLayout: "fixed" } : { tableLayout: "fixed" };
   if (!objectData) return null;
-  return /* @__PURE__ */ jsxs20("div", { className: "border shadow rounded m-1 p-1 bg-white", children: [
+  return /* @__PURE__ */ jsxs21("div", { className: "border shadow rounded m-1 p-1 bg-white", children: [
     modal && /* @__PURE__ */ jsx29(
       dialog_default,
       {
@@ -38492,7 +38528,7 @@ function Table3({
     ),
     header && /* @__PURE__ */ jsx29("div", { className: "font-bold text-2xl py-5 px-2 bg-blue-50", children: header }),
     /* @__PURE__ */ jsx29(Panel, { ...context }),
-    /* @__PURE__ */ jsxs20("table", { ...props, style, children: [
+    /* @__PURE__ */ jsxs21("table", { ...props, style, children: [
       /* @__PURE__ */ jsx29(TableHead, { ...context }),
       /* @__PURE__ */ jsx29(TableBody, { ...context }),
       /* @__PURE__ */ jsx29(TableFooter, { ...context })
@@ -38517,9 +38553,9 @@ import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef6, useSt
 import { createPortal } from "react-dom";
 
 // src/table-advanced/icons.tsx
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 function DropIcon() {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       stroke: "currentColor",
@@ -38608,7 +38644,7 @@ function ExcelIcon2() {
   );
 }
 function OrderAscIcon() {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       stroke: "currentColor",
@@ -38628,7 +38664,7 @@ function OrderAscIcon() {
             points: "38,33 38,5 34,5 34,33 28,33 36,43 44,33"
           }
         ),
-        /* @__PURE__ */ jsxs21("g", { fill: "#2196F3", children: [
+        /* @__PURE__ */ jsxs22("g", { fill: "#2196F3", children: [
           /* @__PURE__ */ jsx30("path", { d: "M16.8,17.2h-5.3l-1.1,3H6.9L12.6,5h2.9l5.7,15.2h-3.2L16.8,17.2z M12.2,14.5H16l-1.9-5.7L12.2,14.5z" }),
           /* @__PURE__ */ jsx30("path", { d: "M12.4,40.5H20V43H8.4v-1.9L16,30.3H8.4v-2.5h11.4v1.7L12.4,40.5z" })
         ] })
@@ -38637,7 +38673,7 @@ function OrderAscIcon() {
   );
 }
 function OrderDesIcon() {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       stroke: "currentColor",
@@ -38651,7 +38687,7 @@ function OrderDesIcon() {
       className: "text-blue-500",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsxs21("g", { fill: "#2196F3", children: [
+        /* @__PURE__ */ jsxs22("g", { fill: "#2196F3", children: [
           /* @__PURE__ */ jsx30("path", { d: "M16.8,40h-5.3l-1.1,3H6.9l5.7-15.2h2.9L21.1,43h-3.2L16.8,40z M12.2,37.3H16l-1.9-5.7L12.2,37.3z" }),
           /* @__PURE__ */ jsx30("path", { d: "M12.4,17.7H20v2.5H8.4v-1.9L16,7.5H8.4V5h11.4v1.7L12.4,17.7z" })
         ] }),
@@ -38699,7 +38735,7 @@ function ArrowUPIcon() {
   );
 }
 function SearchIcon() {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       stroke: "currentColor",
@@ -38718,7 +38754,7 @@ function SearchIcon() {
   );
 }
 function FilterIcon() {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       className: "text-red-300",
@@ -38738,13 +38774,13 @@ function FilterIcon() {
 }
 
 // src/table-advanced/menu.item.tsx
-import { jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsxs as jsxs23 } from "react/jsx-runtime";
 function MenuItem({
   label,
   icon,
   onClick
 }) {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: "cursor-pointer border p-2 hover:bg-gray-100 flex items-center bg-white gap-2",
@@ -38758,7 +38794,7 @@ function MenuItem({
 }
 
 // src/table-advanced/header.tsx
-import { Fragment as Fragment2, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 function Header({
   header,
   context,
@@ -38848,7 +38884,7 @@ function Header({
       }
     ) });
   } else
-    return /* @__PURE__ */ jsx31("div", { className: " ", children: /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsx31("div", { className: " ", children: /* @__PURE__ */ jsxs24(
       "div",
       {
         ref: cellRef,
@@ -38857,8 +38893,8 @@ function Header({
         onMouseLeave: (e) => setHovered(false),
         style: { zIndex: 10, height: `${padding}px`, maxHeight: "100px" },
         children: [
-          /* @__PURE__ */ jsxs23("div", { className: "flex justify-between items-center ", children: [
-            !context.disabled ? /* @__PURE__ */ jsxs23("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs24("div", { className: "flex justify-between items-center ", children: [
+            !context.disabled ? /* @__PURE__ */ jsxs24("div", { className: "flex gap-2", children: [
               hasFilter ? /* @__PURE__ */ jsx31(
                 "div",
                 {
@@ -38914,7 +38950,7 @@ function Header({
             }
           ),
           visible && context.currentHeader == header && createPortal(
-            /* @__PURE__ */ jsxs23(Fragment2, { children: [
+            /* @__PURE__ */ jsxs24(Fragment2, { children: [
               /* @__PURE__ */ jsx31(
                 "div",
                 {
@@ -38930,7 +38966,7 @@ function Header({
                 {
                   className: "fixed",
                   style: { top: coords.top, left: coords.left, zIndex: 9999 },
-                  children: /* @__PURE__ */ jsxs23("div", { className: "bg-gray-100  w-[300px] flex flex-col border shadow rounded ", children: [
+                  children: /* @__PURE__ */ jsxs24("div", { className: "bg-gray-100  w-[300px] flex flex-col border shadow rounded ", children: [
                     hasFilter && /* @__PURE__ */ jsx31(
                       MenuItem,
                       {
@@ -38967,7 +39003,7 @@ function Header({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsxs23(
+                    /* @__PURE__ */ jsxs24(
                       Form,
                       {
                         onSubmit: (e) => {
@@ -38982,7 +39018,7 @@ function Header({
                           context.setCurrentHeader(null);
                         },
                         children: [
-                          /* @__PURE__ */ jsxs23("div", { className: "m-2 bg-white gap-2 flex flex-col", children: [
+                          /* @__PURE__ */ jsxs24("div", { className: "m-2 bg-white gap-2 flex flex-col", children: [
                             /* @__PURE__ */ jsx31(
                               "input",
                               {
@@ -38992,13 +39028,13 @@ function Header({
                                 onChange: (e) => setText(e.target.value)
                               }
                             ),
-                            /* @__PURE__ */ jsxs23(
+                            /* @__PURE__ */ jsxs24(
                               "div",
                               {
                                 className: "flex items-start flex-col p-2 border shadow rounded max-w-[600px] h-[300px] bg-white ",
                                 style: { overflow: "auto" },
                                 children: [
-                                  /* @__PURE__ */ jsxs23(
+                                  /* @__PURE__ */ jsxs24(
                                     "div",
                                     {
                                       className: "flex gap-2 " + (text != "" ? "text-gray-400" : ""),
@@ -39023,7 +39059,7 @@ function Header({
                                     }
                                   ),
                                   filteredValues.map((d) => {
-                                    return /* @__PURE__ */ jsxs23("div", { className: "flex gap-2 ", children: [
+                                    return /* @__PURE__ */ jsxs24("div", { className: "flex gap-2 ", children: [
                                       /* @__PURE__ */ jsx31(
                                         "input",
                                         {
@@ -39049,7 +39085,7 @@ function Header({
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ jsxs23("div", { className: "flex justify-between p-2", children: [
+                          /* @__PURE__ */ jsxs24("div", { className: "flex justify-between p-2", children: [
                             /* @__PURE__ */ jsx31(
                               "button",
                               {
@@ -39079,11 +39115,11 @@ function Header({
 }
 
 // src/table-advanced/searchable.tsx
-import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 function Searchable({
   context
 }) {
-  return /* @__PURE__ */ jsxs24("div", { className: "flex justify-start p-2 relative w-96 text-xs", children: [
+  return /* @__PURE__ */ jsxs25("div", { className: "flex justify-start p-2 relative w-96 text-xs", children: [
     /* @__PURE__ */ jsx32(
       "input",
       {
@@ -39184,7 +39220,7 @@ function usePaginacion({
 var use_pagination_default = usePaginacion;
 
 // src/table-advanced/h.table.tsx
-import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 function HTable({
   context
 }) {
@@ -39260,10 +39296,10 @@ function HTable({
       setWidths(
         Object.fromEntries(
           headers.map((h) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             return [
               h,
-              ((_a = context == null ? void 0 : context.colSize) == null ? void 0 : _a[h]) ? (_b = context == null ? void 0 : context.colSize) == null ? void 0 : _b[h] : ["__select__", "__modal__"].includes(h) ? 60 : h.startsWith("_") ? 0 : w
+              ((_a = context == null ? void 0 : context.colSize) == null ? void 0 : _a[h]) ? (_b = context == null ? void 0 : context.colSize) == null ? void 0 : _b[h] : ["__select__", "__modal__"].includes(h) ? 60 : h.startsWith("_") || ((_d = (_c = context == null ? void 0 : context.hideColumns) == null ? void 0 : _c.includes) == null ? void 0 : _d.call(_c, h)) ? 0 : w
             ];
           })
         )
@@ -39281,7 +39317,7 @@ function HTable({
     });
   }, [context.filteredData]);
   const pagination = use_pagination_default({ total: searchedData.length });
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: [
@@ -39292,9 +39328,9 @@ function HTable({
       ref: tableRef,
       children: [
         /* @__PURE__ */ jsx33("div", { className: "bg-white px-1 font-bold rounded-full", children: context.header }),
-        /* @__PURE__ */ jsxs25("div", { className: "bg-white flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsxs26("div", { className: "bg-white flex gap-2 items-center", children: [
           context.searchable && /* @__PURE__ */ jsx33(Searchable, { context }),
-          context.exportName && /* @__PURE__ */ jsxs25(
+          context.exportName && /* @__PURE__ */ jsxs26(
             "button",
             {
               onClick: (e) => {
@@ -39352,7 +39388,7 @@ function HTable({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsxs26(
           "div",
           {
             children: [
@@ -39576,11 +39612,11 @@ function HTable({
                   })
                 }
               ),
-              searchedData.length > 100 && /* @__PURE__ */ jsxs25("div", { className: "flex justify-end p-2", children: [
+              searchedData.length > 100 && /* @__PURE__ */ jsxs26("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__ */ jsxs26("div", { className: "flex items-center gap-5 mx-5", children: [
                   /* @__PURE__ */ jsx33(
                     "button",
                     {
@@ -39648,8 +39684,8 @@ function ModalContent({
   context,
   hide
 }) {
-  return /* @__PURE__ */ jsxs25("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxs25("div", { className: "fixed top-0 left-0 p-10 ", children: [
+  return /* @__PURE__ */ jsxs26("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "fixed top-0 left-0 p-10 ", children: [
       /* @__PURE__ */ jsx33(
         "button",
         {
@@ -39813,7 +39849,7 @@ function TableAdvanced(tableProps) {
 
 // src/tabs/index.tsx
 import React11, { useEffect as useEffect15, useState as useState19 } from "react";
-import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 function TabContainer({
   children,
   labelMaxWidth = 100,
@@ -39832,12 +39868,12 @@ function TabContainer({
   useEffect15(() => {
     setIndex(currentIndex);
   }, [currentIndex]);
-  return /* @__PURE__ */ jsxs26("div", { className: "w-full bg-white", children: [
+  return /* @__PURE__ */ jsxs27("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(
+      return /* @__PURE__ */ jsxs27(
         "button",
         {
           style: { maxWidth: labelMaxWidth },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "2.0.60",
+  "version": "2.0.62",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/doc-viewer/icon.tsx

@@ -13,3 +13,20 @@ export default function Icon() {
     </svg>
   );
 }
+
+export function DownloadIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill="none" d="M0 0h24v24H0z"></path>
+      <path d="M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3zm-1-4-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59 7 11l5 5z"></path>
+    </svg>
+  );
+}

package/src/doc-viewer/index.tsx

@@ -1,20 +1,24 @@
 import React from "react";
-import Icon from "./icon";
+import Icon, { DownloadIcon } from "./icon";
 
 type Item = {
   url: string;
   name: string;
   contentType: string;
-  width?: string;
-  height?: string;
 };
 
 type Props = {
   item: Item;
+  width?: string;
+  height?: string;
 };
 
-export default function DocumentViewer({ item }: Props) {
-  const { url, name, contentType, width = "100%", height = "100%" } = item;
+export default function DocumentViewer({
+  item,
+  width = "100%",
+  height = "100%",
+}: Props) {
+  const { url, name, contentType } = item;
 
   const isImage = contentType.startsWith("image/");
   const isPdf = contentType === "application/pdf";
@@ -26,22 +30,27 @@ export default function DocumentViewer({ item }: Props) {
 
   const viewerUrl = isGoogleDocCompatible
     ? `https://docs.google.com/gview?url=${encodeURIComponent(
-        url
+        url,
       )}&embedded=true`
     : url;
 
   return (
-    <div className="border shadow rounded p-2 h-[100%]">
-      <div className="mb-1 flex justify-between ">
-        <h3 className="font-bold">{name}</h3>
+    <div className="border shadow rounded  relative  pt-6 pb-1 px-1">
+      <div className="grid grid-cols-[3fr_1fr] left-0 rounded-t  shadow  top-0  absolute p-1  bg-blue-500 px-1 text-white w-full ">
+        <h3
+          className="font-bold truncate text-xs px-1 cursor-pointer max-w-[90%]  "
+          title={name}
+        >
+          {name}
+        </h3>
         <a
           href={url}
           download={name}
           target="_blank"
           rel="noopener noreferrer"
-          className="border shadow rounded bg-blue-400 text-white p-2"
+          className="border shadow hover:bg-blue-100 hover:text-black rounded bg-blue-900 text-white text-xs items-center truncate  px-1 flex gap-1 justify-center"
         >
-          Descargar
+          <DownloadIcon />
         </a>
       </div>
 
@@ -49,6 +58,7 @@ export default function DocumentViewer({ item }: Props) {
         <img
           src={url}
           alt={name}
+          className="rounded"
           style={{
             width: width,
             height: height,
@@ -59,13 +69,19 @@ export default function DocumentViewer({ item }: Props) {
         />
       ) : isGoogleDocCompatible ? (
         <iframe
+          className="rounded"
+          style={{
+            width: width,
+            height: height,
+            maxWidth: "100%",
+          }}
           title={name}
           src={viewerUrl}
-          style={{ width, height, border: "none" }}
           allowFullScreen
         />
       ) : (
         <div
+          className="rounded"
           style={{
             width: width,
             height: height,

package/src/table-advanced/h.table.tsx

@@ -129,7 +129,7 @@ export default function HTable({
               ? context?.colSize?.[h]
               : ["__select__", "__modal__"].includes(h)
                 ? 60
-                : h.startsWith("_")
+                : h.startsWith("_") || context?.hideColumns?.includes?.(h)
                   ? 0
                   : w,
           ]),