next-recomponents 2.0.68 → 2.0.69

package/dist/index.mjs

@@ -37492,6 +37492,9 @@ function MyCalendar({
   ] });
 }
 
+// src/doc-viewer/index.tsx
+import { useState as useState10 } from "react";
+
 // src/doc-viewer/icon.tsx
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function Icon() {
@@ -37527,98 +37530,190 @@ function DownloadIcon() {
     }
   );
 }
+function OpenIcon() {
+  return /* @__PURE__ */ jsxs12(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "none",
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx19("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ jsx19("polyline", { points: "9 21 3 21 3 15" }),
+        /* @__PURE__ */ jsx19("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+        /* @__PURE__ */ jsx19("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ]
+    }
+  );
+}
+function DeleteIcon() {
+  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: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z" })
+      ]
+    }
+  );
+}
 
 // src/doc-viewer/index.tsx
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function DocumentViewer({
   item,
   width = "100%",
-  height = "100%"
+  height = "100%",
+  onDelete
 }) {
   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 isGoogleDocCompatible = 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__ */ 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",
-        {
-          href: url,
-          download: name,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          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, {})
-        }
-      )
-    ] }),
-    isImage ? /* @__PURE__ */ jsx20(
-      "img",
-      {
-        src: url,
-        alt: name,
-        className: "rounded",
-        style: {
-          width,
-          height,
-          maxWidth: "100%",
-          objectFit: "cover",
-          display: "block"
-        }
-      }
-    ) : isGoogleDocCompatible ? /* @__PURE__ */ jsx20(
-      "iframe",
-      {
-        className: "rounded",
-        style: {
-          width,
-          height,
-          maxWidth: "100%"
-        },
-        title: name,
-        src: viewerUrl,
-        allowFullScreen: true
-      }
-    ) : /* @__PURE__ */ jsx20(
-      "div",
-      {
-        className: "rounded",
-        style: {
-          width,
-          height,
-          maxWidth: "100%",
-          objectFit: "cover",
-          display: "block"
-        },
-        children: /* @__PURE__ */ jsx20(Icon, {})
-      }
-    )
-  ] });
+  const [isOpen, setIsOpen] = useState10(false);
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: "group relative rounded-lg bg-white shadow-md overflow-hidden",
+      style: {
+        width,
+        height
+      },
+      children: [
+        isImage ? /* @__PURE__ */ jsx20(
+          "img",
+          {
+            src: url,
+            alt: name,
+            className: "w-full h-full rounded object-cover"
+          }
+        ) : isPdf ? /* @__PURE__ */ jsx20("iframe", { src: url, title: name, className: "w-full h-full rounded" }) : isGoogleDocCompatible ? /* @__PURE__ */ jsx20(
+          "iframe",
+          {
+            src: viewerUrl,
+            title: name,
+            className: "w-full h-full rounded",
+            allowFullScreen: true
+          }
+        ) : /* @__PURE__ */ jsx20("div", { className: "w-full h-full rounded flex items-center justify-center", children: /* @__PURE__ */ jsx20(Icon, {}) }),
+        isOpen && /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "\r\n      fixed inset-0 z-[9999]\r\n      bg-black/50\r\n      flex items-center justify-center\r\n      p-6\r\n    ",
+            onClick: () => setIsOpen(false),
+            children: /* @__PURE__ */ jsxs13(
+              "div",
+              {
+                className: "\r\n        relative\r\n        w-full h-full\r\n        flex items-center justify-center\r\n      ",
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsx20(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setIsOpen(false),
+                      className: "\r\n          absolute top-4 right-4 z-10\r\n          w-10 h-10\r\n          rounded-full\r\n          bg-black/70 text-white\r\n          hover:bg-black\r\n          flex items-center justify-center\r\n          text-xl\r\n        ",
+                      children: "\u2715"
+                    }
+                  ),
+                  isImage ? /* @__PURE__ */ jsx20(
+                    "img",
+                    {
+                      src: url,
+                      alt: name,
+                      className: "w-full h-full rounded object-cover"
+                    }
+                  ) : isPdf ? /* @__PURE__ */ jsx20(
+                    "iframe",
+                    {
+                      src: url,
+                      title: name,
+                      className: "w-full h-full rounded"
+                    }
+                  ) : isGoogleDocCompatible ? /* @__PURE__ */ jsx20(
+                    "iframe",
+                    {
+                      src: viewerUrl,
+                      title: name,
+                      className: "w-full h-full rounded",
+                      allowFullScreen: true
+                    }
+                  ) : /* @__PURE__ */ jsx20("div", { className: "w-full h-full rounded flex items-center justify-center", children: /* @__PURE__ */ jsx20(Icon, {}) })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "\r\n      absolute inset-0\r\n      bg-white/70\r\n      opacity-0\r\n      invisible\r\n      group-hover:opacity-100\r\n      group-hover:visible\r\n      transition-all duration-200\r\n      flex items-center justify-center\r\n    ",
+            children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col justify-between h-full p-2  w-full", children: [
+              /* @__PURE__ */ jsx20("div", { className: "w-full bg-transparent h-full flex items-center justify-center", children: item.name }),
+              /* @__PURE__ */ jsxs13("div", { className: "flex justify-end gap-2 mr-10", children: [
+                /* @__PURE__ */ jsx20("div", { className: "border bg-black/50 shadow rounded p-2 hover:bg-black/70 transition-all duration-200 text-white", children: /* @__PURE__ */ jsx20(
+                  "a",
+                  {
+                    href: item.url,
+                    download: item.name,
+                    target: "_blank",
+                    title: "Download",
+                    children: /* @__PURE__ */ jsx20(DownloadIcon, {})
+                  }
+                ) }),
+                /* @__PURE__ */ jsx20(
+                  "div",
+                  {
+                    className: "border bg-black/50 shadow rounded p-2 hover:bg-black/70 transition-all duration-200 text-white cursor-pointer",
+                    onClick: (e) => {
+                      setIsOpen(true);
+                    },
+                    children: /* @__PURE__ */ jsx20("a", { title: "Open", children: /* @__PURE__ */ jsx20(OpenIcon, {}) })
+                  }
+                ),
+                onDelete && /* @__PURE__ */ jsx20("div", { className: "border bg-red-500/50 shadow rounded p-2 hover:bg-red-500/70 transition-all duration-200 text-white cursor-pointer", children: /* @__PURE__ */ jsx20("a", { title: "Delete", onClick: () => onDelete == null ? void 0 : onDelete(item), children: /* @__PURE__ */ jsx20(DeleteIcon, {}) }) })
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "\r\n      absolute bottom-0 right-0\r\n      w-10 h-10\r\n      bg-gray-200\r\n      transition-all duration-200\r\n      group-hover:w-14\r\n      group-hover:h-14\r\n      [clip-path:polygon(0_100%,100%_0,100%_100%)]\r\n    "
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/table3/index.tsx
-import React8, {
+import React9, {
   useEffect as useEffect9,
   useMemo as useMemo7,
   useReducer as useReducer2,
   useRef as useRef5,
-  useState as useState12
+  useState as useState13
 } from "react";
 
 // src/table3/filter.tsx
-import { useEffect as useEffect8, useMemo as useMemo5, useState as useState10 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo5, useState as useState11 } from "react";
 
 // src/table3/filters.tsx
 import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -37728,13 +37823,13 @@ function Filter({
   sort,
   setSort
 }) {
-  const [visible, setVisible] = useState10(false);
-  const [text, setText] = useState10("");
+  const [visible, setVisible] = useState11(false);
+  const [text, setText] = useState11("");
   const items = useMemo5(
     () => [...new Set(Object.values(objectData).map((o) => o[h]))],
     [objectData]
   );
-  const [selected, setSelected] = useState10(items);
+  const [selected, setSelected] = useState11(items);
   const itemsFiltered = useMemo5(
     () => items.sort((a, b) => `${a}`.localeCompare(b)).filter((item) => {
       if (!text) return true;
@@ -38023,10 +38118,10 @@ function TableHead({
 }
 
 // src/table3/body.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 
 // src/table3/tr.tsx
-import React6 from "react";
+import React7 from "react";
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function TR({
   handlers,
@@ -38088,7 +38183,7 @@ function TR({
             return null;
           } else if (handlers == null ? void 0 : handlers[h]) {
             const original = handlers[h];
-            const cloned = React6.cloneElement(original, {
+            const cloned = React7.cloneElement(original, {
               // si es controlado por value → actualiza con row[h]
               value: ((_a = original.props) == null ? void 0 : _a.value) !== void 0 ? row[h] : void 0,
               // si usa children → actualiza con row[h] también
@@ -38168,7 +38263,7 @@ function TableBody({
   symbols,
   sort
 }) {
-  const [selected, setSelected] = useState11(-1);
+  const [selected, setSelected] = useState12(-1);
   const sorted = Object.entries(objectData).sort(([, a], [, b]) => {
     for (const [key, order] of Object.entries(
       sort || { id: "desc", _id: "desc" }
@@ -38344,7 +38439,7 @@ function TableFooter({
 }
 
 // src/table3/dialog.tsx
-import React7, { useMemo as useMemo6 } from "react";
+import React8, { useMemo as useMemo6 } from "react";
 import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 function Dialog3({
   modalRef,
@@ -38362,8 +38457,8 @@ function Dialog3({
     return (_a = modalRef.current) == null ? void 0 : _a.close();
   };
   const clonedModal = useMemo6(() => {
-    if (dialogRow && React7.isValidElement(children)) {
-      return React7.cloneElement(children, {
+    if (dialogRow && React8.isValidElement(children)) {
+      return React8.cloneElement(children, {
         key: JSON.stringify(dialogRow),
         row: dialogRow,
         show,
@@ -38417,8 +38512,8 @@ function Table3({
   sortBy,
   ...props
 }) {
-  const [handlers, setHandlers] = useState12({});
-  const [page, setPage] = useState12(1);
+  const [handlers, setHandlers] = useState13({});
+  const [page, setPage] = useState13(1);
   function dataReducer(a, b) {
     if (b == null) return {};
     if (Array.isArray(b)) {
@@ -38439,7 +38534,7 @@ function Table3({
         };
         const newHandlers = { ...handlers };
         for (let item in cc) {
-          const isReactComponent = React8.isValidElement(cc[item]);
+          const isReactComponent = React9.isValidElement(cc[item]);
           if (isReactComponent) {
             newHandlers[item] = cc[item];
             const value = ((_c = (_b = cc[item]) == null ? void 0 : _b.props) == null ? void 0 : _c.value) || (typeof ((_e = (_d = cc[item]) == null ? void 0 : _d.props) == null ? void 0 : _e.children) !== "object" ? (_g = (_f = cc[item]) == null ? void 0 : _f.props) == null ? void 0 : _g.children : "");
@@ -38476,9 +38571,9 @@ function Table3({
     if (!objectData) return 0;
     return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
   }, [objectData, maxItems]);
-  const [sort, setSort] = useState12(sortBy);
+  const [sort, setSort] = useState13(sortBy);
   const modalRef = useRef5(null);
-  const [dialogRow, setDialogRow] = useState12({});
+  const [dialogRow, setDialogRow] = useState13({});
   const context = {
     objectData,
     headers,
@@ -38538,16 +38633,16 @@ function Table3({
 import { useEffect as useEffect14 } from "react";
 
 // src/table-advanced/h.table.tsx
-import React9, {
+import React10, {
   useCallback as useCallback3,
   useEffect as useEffect12,
   useMemo as useMemo10,
   useRef as useRef7,
-  useState as useState15
+  useState as useState16
 } from "react";
 
 // src/table-advanced/header.tsx
-import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef6, useState as useState13 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef6, useState as useState14 } from "react";
 import { createPortal } from "react-dom";
 
 // src/table-advanced/icons.tsx
@@ -38606,7 +38701,7 @@ function NextIcon() {
       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" })
+      children: /* @__PURE__ */ jsx30("polyline", { fill: "none", strokeWidth: "2", points: "7 2 17 12 7 22" })
     }
   );
 }
@@ -38801,12 +38896,12 @@ function Header({
   index,
   length
 }) {
-  const [visible, setVisible] = useState13(false);
-  const [hovered, setHovered] = useState13(false);
+  const [visible, setVisible] = useState14(false);
+  const [hovered, setHovered] = useState14(false);
   const sortIndex = context.sort.findIndex((b) => b.field == header);
-  const [text, setText] = useState13("");
+  const [text, setText] = useState14("");
   const cellRef = useRef6(null);
-  const [coords, setCoords] = useState13(
+  const [coords, setCoords] = useState14(
     null
   );
   const filteredValues = useMemo8(() => {
@@ -38815,7 +38910,7 @@ function Header({
       return `${d}`.toLowerCase().includes(text.toLowerCase());
     });
   }, [context.data, header, text]);
-  const [selected, setSelected] = useState13([]);
+  const [selected, setSelected] = useState14([]);
   const hasFilter = context.filters.find((b) => b.field == header);
   useEffect10(() => {
     setSelected(filteredValues);
@@ -39165,16 +39260,16 @@ function valueFormatter({
 }
 
 // src/table-advanced/use.pagination.tsx
-import { useState as useState14, useMemo as useMemo9, useCallback as useCallback2, useEffect as useEffect11 } from "react";
+import { useState as useState15, useMemo as useMemo9, useCallback as useCallback2, useEffect as useEffect11 } from "react";
 function usePaginacion({
   total,
   tamanioPagina = 100,
   paginaInicial = 1
 }) {
-  const [totalPaginas, setTotalPaginas] = useState14(
+  const [totalPaginas, setTotalPaginas] = useState15(
     Math.max(1, Math.ceil(total / tamanioPagina))
   );
-  const [pagina, setPagina] = useState14(
+  const [pagina, setPagina] = useState15(
     Math.min(Math.max(paginaInicial, 1), totalPaginas)
   );
   const inicio = total === 0 ? 0 : (pagina - 1) * tamanioPagina + 1;
@@ -39222,9 +39317,9 @@ import { jsx as jsx33, jsxs as jsxs26 } 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 };
@@ -39239,7 +39334,7 @@ function HTable({
     function resize(headers3) {
       return Object.fromEntries(headers3.map((h) => [h, getWidth(h)]));
     }
-    const [widths2, setWidths2] = useState15({});
+    const [widths2, setWidths2] = useState16({});
     const startDrag2 = useCallback3(
       (e, headerKey) => {
         var _a;
@@ -39526,7 +39621,7 @@ function HTable({
                                 context.setEditions(newEditions);
                               }
                             }
-                          ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? React9.cloneElement(context.buttons[key], {
+                          ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? React10.cloneElement(context.buttons[key], {
                             // children: context.buttons[key]?.props?.children
                             //   ? item
                             //   : undefined,
@@ -39570,7 +39665,7 @@ function HTable({
                           }) : ["number", "string"].includes(typeof item) ? valueFormatter({
                             value: item,
                             currentCoin: context.currentCoin
-                          }) : React9.isValidElement(item) ? item : JSON.stringify(item)
+                          }) : React10.isValidElement(item) ? item : JSON.stringify(item)
                         },
                         row.id + i
                       );
@@ -39705,7 +39800,7 @@ function ModalContent({
         }
       )
     ] }),
-    React9.cloneElement(context.modal, {
+    React10.cloneElement(context.modal, {
       row: searchedData[currentIndex],
       hide
     })
@@ -39713,7 +39808,7 @@ function ModalContent({
 }
 
 // src/table-advanced/context.ts
-import { useEffect as useEffect13, useMemo as useMemo11, useReducer as useReducer3, useState as useState16 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo11, useReducer as useReducer3, useState as useState17 } from "react";
 
 // src/table-advanced/filter.reducer.ts
 var filterReducer = (acc, b) => {
@@ -39741,17 +39836,17 @@ 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 = useMemo11(() => {
     return [...data].sort((a, b) => {
@@ -39846,15 +39941,15 @@ function TableAdvanced(tableProps) {
 }
 
 // src/tabs/index.tsx
-import React10, { useEffect as useEffect15, useState as useState18 } from "react";
+import React11, { useEffect as useEffect15, useState as useState19 } from "react";
 import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 function TabContainer({
   children,
   labelMaxWidth,
   currentIndex = 0
 }) {
-  const [index, setIndex] = useState18(0);
-  const items = React10.Children.toArray(
+  const [index, setIndex] = useState19(0);
+  const items = React11.Children.toArray(
     children
   );
   const labels = items.map((c) => c.props.label);

package/package.json

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

package/src/doc-viewer/icon.tsx

@@ -30,3 +30,40 @@ export function DownloadIcon() {
     </svg>
   );
 }
+
+export function OpenIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline points="15 3 21 3 21 9"></polyline>
+      <polyline points="9 21 3 21 3 15"></polyline>
+      <line x1="21" y1="3" x2="14" y2="10"></line>
+      <line x1="3" y1="21" x2="10" y2="14"></line>
+    </svg>
+  );
+}
+export function DeleteIcon() {
+  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="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z"></path>
+    </svg>
+  );
+}