next-recomponents 2.0.27 → 2.0.29

package/dist/index.mjs

@@ -3865,6 +3865,7 @@ function Form({
 }
 
 // src/input/index.tsx
+import { useState as useState4 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function Input({
   label,
@@ -3875,27 +3876,96 @@ function Input({
 }) {
   const value = `${(props == null ? void 0 : props.value) || ""}`;
   const isValid = !regex ? true : regex.test(value);
+  const isPassword = props.type === "password";
+  const [showPassword, setShowPassword] = useState4(false);
   return /* @__PURE__ */ jsxs4("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxs4("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "font-bold ", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "font-bold", children: [
         label,
         " ",
         (props == null ? void 0 : props.required) && /* @__PURE__ */ jsx5("span", { className: "text-red-500", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5(
-        "input",
-        {
-          ...props,
-          className: [
-            "p-2 w-full rounded border shadow",
-            value != "" && !isValid && "bg-red-200 text-black",
-            value != "" && isValid && "bg-green-200 text-black",
-            className
-          ].join(" ")
-        }
-      ) })
+      /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            ...props,
+            type: isPassword && showPassword ? "text" : props.type,
+            className: [
+              "p-2 w-full rounded border shadow",
+              isPassword && "pr-10",
+              value !== "" && !isValid && "bg-red-200 text-black",
+              value !== "" && isValid && "bg-green-200 text-black",
+              className
+            ].filter(Boolean).join(" ")
+          }
+        ),
+        isPassword && /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowPassword((prev) => !prev),
+            className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-800 focus:outline-none",
+            "aria-label": showPassword ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
+            children: showPassword ? (
+              // Ojo cerrado (ocultar)
+              /* @__PURE__ */ jsx5(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-5 w-5",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx5(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                    }
+                  )
+                }
+              )
+            ) : (
+              // Ojo abierto (mostrar)
+              /* @__PURE__ */ jsxs4(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-5 w-5",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: [
+                    /* @__PURE__ */ jsx5(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                      }
+                    )
+                  ]
+                }
+              )
+            )
+          }
+        )
+      ] })
     ] }),
-    !isValid && value != "" && /* @__PURE__ */ jsx5("div", { className: "text-red-800 invalid", children: invalidMessage })
+    !isValid && value !== "" && /* @__PURE__ */ jsx5("div", { className: "text-red-800 invalid", children: invalidMessage })
   ] });
 }
 
@@ -3910,7 +3980,7 @@ var regular_expresions_default = regularExpresions;
 // src/table/index.tsx
 import { DataGrid } from "@mui/x-data-grid";
 import { Box, Dialog } from "@mui/material";
-import React3, { useEffect as useEffect3, useMemo, useState as useState4 } from "react";
+import React3, { useEffect as useEffect3, useMemo, useState as useState5 } from "react";
 
 // ../../node_modules/xlsx/xlsx.mjs
 var XLSX = {};
@@ -35808,6 +35878,7 @@ function useColumns(rows, currentCoin, options, colSize) {
     buttons,
     hideColumns,
     modal,
+    wrapText,
     handleRowUpdate,
     onModalOpen
   } = options;
@@ -35846,6 +35917,20 @@ function useColumns(rows, currentCoin, options, colSize) {
         width: key == "id" ? 80 : (_a = colSize == null ? void 0 : colSize[key]) != null ? _a : void 0,
         editable: (_b = editableFields == null ? void 0 : editableFields.includes(key)) != null ? _b : false,
         type: typeof rows[0][key] === "number" ? "number" : "string",
+        // When wrapText is enabled, allow cells to grow vertically
+        ...wrapText && {
+          renderHeader: (params) => /* @__PURE__ */ jsx6(
+            "span",
+            {
+              style: {
+                whiteSpace: "normal",
+                lineHeight: 1.3,
+                wordBreak: "break-word"
+              },
+              children: params.colDef.headerName
+            }
+          )
+        },
         renderCell: (buttons == null ? void 0 : buttons[key]) ? (params) => {
           var _a2, _b2, _c;
           const children = ((_a2 = buttons == null ? void 0 : buttons[key]) == null ? void 0 : _a2.type) == "input" ? null : (_b2 = params == null ? void 0 : params.row) == null ? void 0 : _b2[key];
@@ -35862,6 +35947,24 @@ function useColumns(rows, currentCoin, options, colSize) {
               }
             }
           });
+        } : wrapText ? (params) => {
+          var _a2;
+          return (
+            // Plain cell with wrap — no custom button
+            /* @__PURE__ */ jsx6(
+              "span",
+              {
+                style: {
+                  whiteSpace: "normal",
+                  wordBreak: "break-word",
+                  lineHeight: 1.4,
+                  padding: "6px 0",
+                  display: "block"
+                },
+                children: (_a2 = params.formattedValue) != null ? _a2 : params.value
+              }
+            )
+          );
         } : null
       };
     });
@@ -35869,7 +35972,6 @@ function useColumns(rows, currentCoin, options, colSize) {
       cols.unshift({
         field: "Modal",
         headerName: "Modal",
-        // flex,
         editable: false,
         type: "string",
         width: 10,
@@ -35888,7 +35990,57 @@ function useColumns(rows, currentCoin, options, colSize) {
       });
     }
     return cols;
-  }, [rows]);
+  }, [rows, wrapText]);
+}
+function SearchBar({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 px-2 pb-1", children: [
+    /* @__PURE__ */ jsx6(
+      "svg",
+      {
+        className: "text-gray-400 shrink-0",
+        width: "14",
+        height: "14",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        children: /* @__PURE__ */ jsx6(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
+            clipRule: "evenodd"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder: "Buscar\u2026",
+        className: "w-full max-w-xs text-xs border border-gray-300 rounded px-2 py-1 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-200 transition"
+      }
+    ),
+    value && /* @__PURE__ */ jsx6(
+      "button",
+      {
+        onClick: () => onChange(""),
+        className: "text-gray-400 hover:text-gray-600 text-sm leading-none",
+        title: "Limpiar b\xFAsqueda",
+        children: "\xD7"
+      }
+    )
+  ] });
+}
+function rowMatchesSearch(row, query) {
+  if (!query.trim()) return true;
+  const words = query.trim().toLowerCase().split(/\s+/);
+  const rowText = Object.values(row).filter((v) => v != null && v !== "").join(" ").toLowerCase();
+  return words.every((word) => rowText.includes(word));
 }
 function IHTable({
   data,
@@ -35908,18 +36060,23 @@ function IHTable({
   currentCoin = "$",
   fontSize = "1rem",
   className,
-  colSize
+  colSize,
+  rowHeight,
+  wrapText = false,
+  density = "standard",
+  searchable = false
 }) {
   var _a;
   if (modal && onSelect)
     throw new Error("Solo se puede usar modal o onSelect por separado");
-  const [open, setOpen] = useState4(false);
-  const [rows, setRows] = useState4(data);
-  const [selectedRows, setSelectedRows] = useState4({
+  const [open, setOpen] = useState5(false);
+  const [rows, setRows] = useState5(data);
+  const [selectedRows, setSelectedRows] = useState5({
     type: "include",
     ids: /* @__PURE__ */ new Set()
   });
-  const [modalRow, setModalRow] = useState4();
+  const [modalRow, setModalRow] = useState5();
+  const [searchQuery, setSearchQuery] = useState5("");
   const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
   useEffect3(() => {
     setRows(data);
@@ -35951,8 +36108,12 @@ function IHTable({
     }
     return [];
   }, [selectedRows, rows]);
+  const displayRows = useMemo(
+    () => searchable ? rows.filter((r) => rowMatchesSearch(r, searchQuery)) : rows,
+    [rows, searchQuery, searchable]
+  );
   const columns = useColumns(
-    rows,
+    displayRows,
     currentCoin,
     {
       flex,
@@ -35960,31 +36121,36 @@ function IHTable({
       buttons: resolvedButtons,
       hideColumns,
       modal,
+      wrapText,
       handleRowUpdate,
       onModalOpen: handleModalOpen
     },
     colSize
   );
   if (!rows.length) return null;
+  const rowHeightProps = wrapText ? { getRowHeight: () => "auto" } : rowHeight != null ? { rowHeight } : {};
   return /* @__PURE__ */ jsxs5("div", { className: "m-2", children: [
     header && /* @__PURE__ */ jsx6("div", { className: "font-bold  p-2 ", children: header }),
-    /* @__PURE__ */ jsx6(
-      Toolbar,
-      {
-        exportName,
-        onSave,
-        onSelect,
-        rows,
-        filteredRows
-      }
-    ),
+    /* @__PURE__ */ jsxs5("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ jsx6(
+        Toolbar,
+        {
+          exportName,
+          onSave,
+          onSelect,
+          rows,
+          filteredRows
+        }
+      ),
+      searchable && /* @__PURE__ */ jsx6(SearchBar, { value: searchQuery, onChange: setSearchQuery })
+    ] }),
     /* @__PURE__ */ jsxs5(
       Box,
       {
         sx: {
           display: "flex",
           flexDirection: "column",
-          height: (_a = HEIGHT_MAP[rows.length]) != null ? _a : height,
+          height: (_a = HEIGHT_MAP[displayRows.length]) != null ? _a : height,
           width,
           zIndex: 999999999
         },
@@ -36002,25 +36168,42 @@ function IHTable({
             DataGrid,
             {
               className,
-              rows,
+              rows: displayRows,
               columns,
+              density,
               checkboxSelection: Boolean(onSelect),
               rowSelectionModel: selectedRows,
               onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
+              ...rowHeightProps,
               sx: {
                 fontSize,
-                // equivalente a text-xs
                 "& .MuiDataGrid-cell": {
-                  fontSize
+                  fontSize,
+                  // Allow cells to wrap text when wrapText is enabled
+                  ...wrapText && {
+                    alignItems: "flex-start",
+                    paddingTop: "8px",
+                    paddingBottom: "8px",
+                    whiteSpace: "normal",
+                    wordBreak: "break-word"
+                  }
                 },
                 "& .MuiDataGrid-columnHeader": {
-                  fontSize
+                  fontSize,
+                  ...wrapText && {
+                    whiteSpace: "normal",
+                    "& .MuiDataGrid-columnHeaderTitle": {
+                      whiteSpace: "normal",
+                      lineHeight: 1.3,
+                      wordBreak: "break-word"
+                    }
+                  }
                 },
                 "& .MuiDataGrid-cell--editable": {
                   backgroundColor: "#c6d8f0",
                   fontWeight: 500
                 },
-                ...rows.length <= Object.keys(HEIGHT_MAP).length && {
+                ...displayRows.length <= Object.keys(HEIGHT_MAP).length && {
                   "& .MuiDataGrid-filler": {
                     display: "none"
                   }
@@ -36029,13 +36212,13 @@ function IHTable({
               editMode: "row",
               processRowUpdate: handleRowUpdate,
               pageSizeOptions: [5, 10],
-              hideFooter: rows.length <= Object.keys(HEIGHT_MAP).length
+              hideFooter: displayRows.length <= Object.keys(HEIGHT_MAP).length
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx6(CustomFooter, { footer, rows })
+    /* @__PURE__ */ jsx6(CustomFooter, { footer, rows: displayRows })
   ] });
 }
 function Table(props) {
@@ -36047,7 +36230,7 @@ function Table(props) {
 
 // src/text-area/index.tsx
 import {
-  useState as useState5
+  useState as useState6
 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function TextArea({
@@ -36058,7 +36241,7 @@ function TextArea({
   children = "",
   ...props
 }) {
-  const [value, setValue] = useState5((props == null ? void 0 : props.value) || "");
+  const [value, setValue] = useState6((props == null ? void 0 : props.value) || "");
   return /* @__PURE__ */ jsx7("div", { className: "w-full", children: /* @__PURE__ */ jsxs6("label", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsxs6("div", { className: "font-bold ", children: [
       label,
@@ -36093,7 +36276,7 @@ function TextArea({
 }
 
 // src/use-resources/index.ts
-import { useEffect as useEffect4, useState as useState6 } from "react";
+import { useEffect as useEffect4, useState as useState7 } from "react";
 
 // src/use-resources/get.token.tsx
 import { useMemo as useMemo2 } from "react";
@@ -36190,7 +36373,7 @@ function useResources({
   onError
 }) {
   const token = useToken();
-  const [info, setInfo] = useState6(
+  const [info, setInfo] = useState7(
     Object.keys(endpoints).reduce((acc, key) => {
       var _a, _b;
       const newAcc = {
@@ -36583,7 +36766,7 @@ function useResources({
 import React5, {
   useEffect as useEffect5,
   useRef as useRef3,
-  useState as useState7
+  useState as useState8
 } from "react";
 
 // src/select/icon.tsx
@@ -36631,16 +36814,16 @@ function Select({
   strictMode = true,
   ...props
 }) {
-  const [isOpen, setIsOpen] = useState7(false);
-  const [inputValue, setInputValue] = useState7("");
-  const [options, setOptions] = useState7(
+  const [isOpen, setIsOpen] = useState8(false);
+  const [inputValue, setInputValue] = useState8("");
+  const [options, setOptions] = useState8(
     []
   );
-  const [filtered, setFiltered] = useState7(
+  const [filtered, setFiltered] = useState8(
     []
   );
-  const [hasEdition, setHasEdition] = useState7(false);
-  const [highlightedIndex, setHighlightedIndex] = useState7(-1);
+  const [hasEdition, setHasEdition] = useState8(false);
+  const [highlightedIndex, setHighlightedIndex] = useState8(-1);
   const inputRef = useRef3(null);
   const validOption = (value) => {
     return options.find((opt) => opt.label == value);
@@ -36690,7 +36873,7 @@ function Select({
     setIsOpen(false);
   };
   const containerRef = useRef3(null);
-  const [openUpwards, setOpenUpwards] = useState7(false);
+  const [openUpwards, setOpenUpwards] = useState8(false);
   useEffect5(() => {
     if (isOpen && containerRef.current) {
       const rect = containerRef.current.getBoundingClientRect();
@@ -36827,7 +37010,7 @@ function Select({
 import { cloneElement as cloneElement2, useEffect as useEffect6 } from "react";
 
 // src/pop/index.tsx
-import { useState as useState8, useCallback, useRef as useRef4 } from "react";
+import { useState as useState9, useCallback, useRef as useRef4 } from "react";
 
 // src/pop/actions.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -37071,7 +37254,7 @@ var INITIAL_STATE = {
   full: false
 };
 function usePopup() {
-  const [popup, setPopup] = useState8(INITIAL_STATE);
+  const [popup, setPopup] = useState9(INITIAL_STATE);
   const messageRef = useRef4(null);
   const open = useCallback(
     (partial) => {
@@ -37239,7 +37422,7 @@ function useDates() {
 
 // src/calendar/index.tsx
 import {
-  useState as useState9
+  useState as useState10
 } from "react";
 import DatePicker from "react-datepicker";
 
@@ -37273,11 +37456,11 @@ function MyCalendar({
   value,
   ...otherProps
 }) {
-  const [selectedDate, setSelectedDate] = useState9(null);
-  const [dateStr, setDateStr] = useState9(
+  const [selectedDate, setSelectedDate] = useState10(null);
+  const [dateStr, setDateStr] = useState10(
     defaultValue || value || ""
   );
-  const [open, setOpen] = useState9(false);
+  const [open, setOpen] = useState10(false);
   function handleChange(date) {
     if (!date) return;
     setSelectedDate(date);
@@ -37435,11 +37618,11 @@ import React9, {
   useMemo as useMemo6,
   useReducer as useReducer2,
   useRef as useRef6,
-  useState as useState12
+  useState as useState13
 } from "react";
 
 // src/table3/filter.tsx
-import { useEffect as useEffect8, useMemo as useMemo4, useState as useState10 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo4, useState as useState11 } from "react";
 
 // src/table3/filters.tsx
 import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -37549,13 +37732,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 = useMemo4(
     () => [...new Set(Object.values(objectData).map((o) => o[h]))],
     [objectData]
   );
-  const [selected, setSelected] = useState10(items);
+  const [selected, setSelected] = useState11(items);
   const itemsFiltered = useMemo4(
     () => items.sort((a, b) => `${a}`.localeCompare(b)).filter((item) => {
       if (!text) return true;
@@ -37844,7 +38027,7 @@ function TableHead({
 }
 
 // src/table3/body.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 
 // src/table3/tr.tsx
 import React7 from "react";
@@ -37989,7 +38172,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" }
@@ -38238,8 +38421,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)) {
@@ -38297,9 +38480,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 = useRef6(null);
-  const [dialogRow, setDialogRow] = useState12({});
+  const [dialogRow, setDialogRow] = useState13({});
   const context = {
     objectData,
     headers,

package/package.json

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