next-recomponents 2.0.28 → 2.0.30

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { DetailedHTMLProps, ButtonHTMLAttributes, ReactNode, Dispatch, SetStateAction, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement, TableHTMLAttributes } from 'react';
+import { React as React$2 } from 'next/dist/server/route-modules/app-page/vendored/rsc/entrypoints';
 import { GridValidRowModel } from '@mui/x-data-grid';
 
 interface Props$5 extends React.HTMLAttributes<HTMLDivElement> {
@@ -46,10 +47,10 @@ interface Props$3 {
 declare function useFormValues<T>(initial: Partial<T>): [Partial<T>, React$1.ActionDispatch<[action: Partial<T>]>];
 declare function Form({ onSubmit, state, invalidMessage, children, loader, ...otherProps }: Props$3): react_jsx_runtime.JSX.Element;
 
-interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-    label: React.ReactNode;
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label: React$2.ReactNode;
     regex?: RegExp;
-    invalidMessage?: React.ReactNode;
+    invalidMessage?: React$2.ReactNode;
 }
 declare function Input({ label, className, regex, invalidMessage, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
@@ -111,6 +112,14 @@ interface TableProps {
      * - "comfortable" → padding generoso, fácil de leer
      */
     density?: GridDensity;
+    /**
+     * Cuando es true, el alto del contenedor se ajusta automáticamente
+     * al contenido de la tabla, eliminando el scroll vertical.
+     * Compatible con `wrapText` (filas de alto variable) y con
+     * cualquier valor de `density`. Cuando está activo, las props
+     * `height` y `HEIGHT_MAP` se ignoran.
+     */
+    autoHeight?: boolean;
     [key: string]: any;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { DetailedHTMLProps, ButtonHTMLAttributes, ReactNode, Dispatch, SetStateAction, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement, TableHTMLAttributes } from 'react';
+import { React as React$2 } from 'next/dist/server/route-modules/app-page/vendored/rsc/entrypoints';
 import { GridValidRowModel } from '@mui/x-data-grid';
 
 interface Props$5 extends React.HTMLAttributes<HTMLDivElement> {
@@ -46,10 +47,10 @@ interface Props$3 {
 declare function useFormValues<T>(initial: Partial<T>): [Partial<T>, React$1.ActionDispatch<[action: Partial<T>]>];
 declare function Form({ onSubmit, state, invalidMessage, children, loader, ...otherProps }: Props$3): react_jsx_runtime.JSX.Element;
 
-interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-    label: React.ReactNode;
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label: React$2.ReactNode;
     regex?: RegExp;
-    invalidMessage?: React.ReactNode;
+    invalidMessage?: React$2.ReactNode;
 }
 declare function Input({ label, className, regex, invalidMessage, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
@@ -111,6 +112,14 @@ interface TableProps {
      * - "comfortable" → padding generoso, fácil de leer
      */
     density?: GridDensity;
+    /**
+     * Cuando es true, el alto del contenedor se ajusta automáticamente
+     * al contenido de la tabla, eliminando el scroll vertical.
+     * Compatible con `wrapText` (filas de alto variable) y con
+     * cualquier valor de `density`. Cuando está activo, las props
+     * `height` y `HEIGHT_MAP` se ignoran.
+     */
+    autoHeight?: boolean;
     [key: string]: any;
 }
 declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -3885,6 +3885,7 @@ function Form({
 }
 
 // src/input/index.tsx
+var import_react4 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Input({
   label,
@@ -3895,27 +3896,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] = (0, import_react4.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "font-bold ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "font-bold", children: [
         label,
         " ",
         (props == null ? void 0 : props.required) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-red-500", children: "*" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "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__ */ (0, import_jsx_runtime6.jsx)(
+          "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__ */ (0, import_jsx_runtime6.jsx)(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-5 w-5",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    "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__ */ (0, import_jsx_runtime6.jsxs)(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-5 w-5",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      "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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-red-800 invalid", children: invalidMessage })
+    !isValid && value !== "" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-red-800 invalid", children: invalidMessage })
   ] });
 }
 
@@ -3930,7 +4000,7 @@ var regular_expresions_default = regularExpresions;
 // src/table/index.tsx
 var import_x_data_grid = require("@mui/x-data-grid");
 var import_material = require("@mui/material");
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // ../../node_modules/xlsx/xlsx.mjs
 var XLSX = {};
@@ -35782,7 +35852,7 @@ function ModalDialog({ open, onClose, modal, selectedRow }) {
         children: "\xD7"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-4 m-auto p-5", children: selectedRow && import_react4.default.cloneElement(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-4 m-auto p-5", children: selectedRow && import_react5.default.cloneElement(
       modal,
       { row: selectedRow, hide: onClose }
     ) })
@@ -35832,7 +35902,7 @@ function useColumns(rows, currentCoin, options, colSize) {
     handleRowUpdate,
     onModalOpen
   } = options;
-  return (0, import_react4.useMemo)(() => {
+  return (0, import_react5.useMemo)(() => {
     if (!rows.length) return [];
     const cols = Object.keys(rows[0]).filter((key) => !key.startsWith("_") && !hideColumns.includes(key)).map((key) => {
       var _a, _b;
@@ -35884,7 +35954,7 @@ function useColumns(rows, currentCoin, options, colSize) {
         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];
-          return import_react4.default.cloneElement(buttons[key], {
+          return import_react5.default.cloneElement(buttons[key], {
             className: `${(_c = params == null ? void 0 : params.className) != null ? _c : ""} m-auto text-xs`,
             children,
             row: params == null ? void 0 : params.row,
@@ -36014,21 +36084,22 @@ function IHTable({
   rowHeight,
   wrapText = false,
   density = "standard",
-  searchable = false
+  searchable = false,
+  autoHeight = false
 }) {
   var _a;
   if (modal && onSelect)
     throw new Error("Solo se puede usar modal o onSelect por separado");
-  const [open, setOpen] = (0, import_react4.useState)(false);
-  const [rows, setRows] = (0, import_react4.useState)(data);
-  const [selectedRows, setSelectedRows] = (0, import_react4.useState)({
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const [rows, setRows] = (0, import_react5.useState)(data);
+  const [selectedRows, setSelectedRows] = (0, import_react5.useState)({
     type: "include",
     ids: /* @__PURE__ */ new Set()
   });
-  const [modalRow, setModalRow] = (0, import_react4.useState)();
-  const [searchQuery, setSearchQuery] = (0, import_react4.useState)("");
+  const [modalRow, setModalRow] = (0, import_react5.useState)();
+  const [searchQuery, setSearchQuery] = (0, import_react5.useState)("");
   const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     setRows(data);
   }, [data]);
   const handleModalOpen = (row) => {
@@ -36049,7 +36120,7 @@ function IHTable({
     );
     return updated;
   };
-  const filteredRows = (0, import_react4.useMemo)(() => {
+  const filteredRows = (0, import_react5.useMemo)(() => {
     if ((selectedRows == null ? void 0 : selectedRows.type) === "exclude") {
       return rows.filter((r) => !Array.from(selectedRows.ids).includes(r.id));
     }
@@ -36058,7 +36129,7 @@ function IHTable({
     }
     return [];
   }, [selectedRows, rows]);
-  const displayRows = (0, import_react4.useMemo)(
+  const displayRows = (0, import_react5.useMemo)(
     () => searchable ? rows.filter((r) => rowMatchesSearch(r, searchQuery)) : rows,
     [rows, searchQuery, searchable]
   );
@@ -36079,6 +36150,8 @@ function IHTable({
   );
   if (!rows.length) return null;
   const rowHeightProps = wrapText ? { getRowHeight: () => "auto" } : rowHeight != null ? { rowHeight } : {};
+  const containerHeight = autoHeight ? void 0 : (_a = HEIGHT_MAP[displayRows.length]) != null ? _a : height;
+  const hideFooter = autoHeight || displayRows.length <= Object.keys(HEIGHT_MAP).length;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "m-2", children: [
     header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-bold  p-2 ", children: header }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex justify-between", children: [
@@ -36100,7 +36173,8 @@ function IHTable({
         sx: {
           display: "flex",
           flexDirection: "column",
-          height: (_a = HEIGHT_MAP[displayRows.length]) != null ? _a : height,
+          // undefined height lets the child DataGrid size itself freely
+          height: containerHeight,
           width,
           zIndex: 999999999
         },
@@ -36121,6 +36195,7 @@ function IHTable({
               rows: displayRows,
               columns,
               density,
+              autoHeight,
               checkboxSelection: Boolean(onSelect),
               rowSelectionModel: selectedRows,
               onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
@@ -36162,7 +36237,7 @@ function IHTable({
               editMode: "row",
               processRowUpdate: handleRowUpdate,
               pageSizeOptions: [5, 10],
-              hideFooter: displayRows.length <= Object.keys(HEIGHT_MAP).length
+              hideFooter
             }
           )
         ]
@@ -36179,7 +36254,7 @@ function Table(props) {
 }
 
 // src/text-area/index.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function TextArea({
   label,
@@ -36189,7 +36264,7 @@ function TextArea({
   children = "",
   ...props
 }) {
-  const [value, setValue] = (0, import_react5.useState)((props == null ? void 0 : props.value) || "");
+  const [value, setValue] = (0, import_react6.useState)((props == null ? void 0 : props.value) || "");
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "font-bold ", children: [
       label,
@@ -36224,12 +36299,12 @@ function TextArea({
 }
 
 // src/use-resources/index.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/use-resources/get.token.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useToken() {
-  const token = (0, import_react6.useMemo)(() => {
+  const token = (0, import_react7.useMemo)(() => {
     if (typeof window != "undefined") {
       const t = window.localStorage.getItem("token");
       if (t) return t;
@@ -36321,7 +36396,7 @@ function useResources({
   onError
 }) {
   const token = useToken();
-  const [info, setInfo] = (0, import_react7.useState)(
+  const [info, setInfo] = (0, import_react8.useState)(
     Object.keys(endpoints).reduce((acc, key) => {
       var _a, _b;
       const newAcc = {
@@ -36704,14 +36779,14 @@ function useResources({
       }
     }
   }
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     doSome();
   }, [JSON.stringify(Object.values(info).map((v) => v.loaded))]);
   return results;
 }
 
 // src/select/index.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 
 // src/select/icon.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -36758,24 +36833,24 @@ function Select({
   strictMode = true,
   ...props
 }) {
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react8.useState)("");
-  const [options, setOptions] = (0, import_react8.useState)(
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react9.useState)("");
+  const [options, setOptions] = (0, import_react9.useState)(
     []
   );
-  const [filtered, setFiltered] = (0, import_react8.useState)(
+  const [filtered, setFiltered] = (0, import_react9.useState)(
     []
   );
-  const [hasEdition, setHasEdition] = (0, import_react8.useState)(false);
-  const [highlightedIndex, setHighlightedIndex] = (0, import_react8.useState)(-1);
-  const inputRef = (0, import_react8.useRef)(null);
+  const [hasEdition, setHasEdition] = (0, import_react9.useState)(false);
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react9.useState)(-1);
+  const inputRef = (0, import_react9.useRef)(null);
   const validOption = (value) => {
     return options.find((opt) => opt.label == value);
   };
   const normalize = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z]/g, "");
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     var _a;
-    const parsedOptions = import_react8.default.Children.toArray(children).filter((child) => {
+    const parsedOptions = import_react9.default.Children.toArray(children).filter((child) => {
       return child.type === "option";
     }).map((child) => {
       return {
@@ -36788,7 +36863,7 @@ function Select({
     const value = (props == null ? void 0 : props.value) && ((_a = parsedOptions.find((opt) => opt.value == props.value)) == null ? void 0 : _a.label);
     setInputValue(value);
   }, [children]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const items = options.filter((opt) => {
       if (!hasEdition) return true;
       const normilizedLabel = normalize(`${opt == null ? void 0 : opt.label}`);
@@ -36816,9 +36891,9 @@ function Select({
     setInputValue(opt.label);
     setIsOpen(false);
   };
-  const containerRef = (0, import_react8.useRef)(null);
-  const [openUpwards, setOpenUpwards] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const containerRef = (0, import_react9.useRef)(null);
+  const [openUpwards, setOpenUpwards] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => {
     if (isOpen && containerRef.current) {
       const rect = containerRef.current.getBoundingClientRect();
       const spaceBelow = window.innerHeight - rect.bottom;
@@ -36951,10 +37026,10 @@ function Select({
 }
 
 // src/modal/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/pop/index.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/pop/actions.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -37198,9 +37273,9 @@ var INITIAL_STATE = {
   full: false
 };
 function usePopup() {
-  const [popup, setPopup] = (0, import_react9.useState)(INITIAL_STATE);
-  const messageRef = (0, import_react9.useRef)(null);
-  const open = (0, import_react9.useCallback)(
+  const [popup, setPopup] = (0, import_react10.useState)(INITIAL_STATE);
+  const messageRef = (0, import_react10.useRef)(null);
+  const open = (0, import_react10.useCallback)(
     (partial) => {
       const { message, ...rest } = partial;
       messageRef.current = message;
@@ -37208,7 +37283,7 @@ function usePopup() {
     },
     []
   );
-  const close = (0, import_react9.useCallback)((confirmed, value) => {
+  const close = (0, import_react10.useCallback)((confirmed, value) => {
     setPopup((prev) => {
       var _a, _b;
       if (confirmed) (_a = prev.onConfirm) == null ? void 0 : _a.call(prev, value);
@@ -37216,7 +37291,7 @@ function usePopup() {
       return { ...prev, visible: false, inputValue: "" };
     });
   }, []);
-  const alert2 = (0, import_react9.useCallback)(
+  const alert2 = (0, import_react10.useCallback)(
     (message, color = "primary") => new Promise(
       (resolve) => open({
         type: "alert",
@@ -37228,7 +37303,7 @@ function usePopup() {
     ),
     [open]
   );
-  const modal = (0, import_react9.useCallback)(
+  const modal = (0, import_react10.useCallback)(
     (message, color = "primary", icons = false, full = false) => new Promise(
       (resolve) => open({
         type: "modal",
@@ -37242,7 +37317,7 @@ function usePopup() {
     ),
     [open]
   );
-  const confirm = (0, import_react9.useCallback)(
+  const confirm = (0, import_react10.useCallback)(
     (message, color = "primary") => new Promise(
       (resolve) => open({
         type: "confirm",
@@ -37254,7 +37329,7 @@ function usePopup() {
     ),
     [open]
   );
-  const prompt = (0, import_react9.useCallback)(
+  const prompt = (0, import_react10.useCallback)(
     (message, color = "primary") => new Promise(
       (resolve) => open({
         type: "prompt",
@@ -37266,7 +37341,7 @@ function usePopup() {
     ),
     [open]
   );
-  const updateMessage = (0, import_react9.useCallback)((message) => {
+  const updateMessage = (0, import_react10.useCallback)((message) => {
     messageRef.current = message;
     setPopup((prev) => ({ ...prev }));
   }, []);
@@ -37299,14 +37374,14 @@ function Modal({
 }) {
   const pop = usePopup();
   const hide = () => pop.close(false);
-  const childrenWithHide = (0, import_react10.cloneElement)(children, { hide });
-  (0, import_react10.useEffect)(() => {
+  const childrenWithHide = (0, import_react11.cloneElement)(children, { hide });
+  (0, import_react11.useEffect)(() => {
     pop.updateMessage(childrenWithHide);
   }, [children]);
   const props = button == null ? void 0 : button.props;
   const onClick = props == null ? void 0 : props.onClick;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    (0, import_react10.cloneElement)(button, {
+    (0, import_react11.cloneElement)(button, {
       onClick: (e) => {
         onClick == null ? void 0 : onClick(e);
         pop.modal(childrenWithHide, color, false, true);
@@ -37365,7 +37440,7 @@ function useDates() {
 }
 
 // src/calendar/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_datepicker = __toESM(require("react-datepicker"));
 
 // src/calendar/calendar.icon.tsx
@@ -37398,11 +37473,11 @@ function MyCalendar({
   value,
   ...otherProps
 }) {
-  const [selectedDate, setSelectedDate] = (0, import_react11.useState)(null);
-  const [dateStr, setDateStr] = (0, import_react11.useState)(
+  const [selectedDate, setSelectedDate] = (0, import_react12.useState)(null);
+  const [dateStr, setDateStr] = (0, import_react12.useState)(
     defaultValue || value || ""
   );
-  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [open, setOpen] = (0, import_react12.useState)(false);
   function handleChange(date) {
     if (!date) return;
     setSelectedDate(date);
@@ -37555,10 +37630,10 @@ function DocumentViewer({ item }) {
 }
 
 // src/table3/index.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // src/table3/filter.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/table3/filters.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -37668,14 +37743,14 @@ function Filter({
   sort,
   setSort
 }) {
-  const [visible, setVisible] = (0, import_react12.useState)(false);
-  const [text, setText] = (0, import_react12.useState)("");
-  const items = (0, import_react12.useMemo)(
+  const [visible, setVisible] = (0, import_react13.useState)(false);
+  const [text, setText] = (0, import_react13.useState)("");
+  const items = (0, import_react13.useMemo)(
     () => [...new Set(Object.values(objectData).map((o) => o[h]))],
     [objectData]
   );
-  const [selected, setSelected] = (0, import_react12.useState)(items);
-  const itemsFiltered = (0, import_react12.useMemo)(
+  const [selected, setSelected] = (0, import_react13.useState)(items);
+  const itemsFiltered = (0, import_react13.useMemo)(
     () => items.sort((a, b) => `${a}`.localeCompare(b)).filter((item) => {
       if (!text) return true;
       return `${item}`.toLowerCase().includes(text.toLowerCase());
@@ -37712,7 +37787,7 @@ function Filter({
   const hidden = Object.values(objectData).filter(
     (d) => d._visible === false
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (data.length != Object.values(objectData).map((o) => (o == null ? void 0 : o._id) || (o == null ? void 0 : o.id)).length) {
       const news = [...new Set(data.map((o) => o[h]))];
       setSelected(news);
@@ -37963,10 +38038,10 @@ function TableHead({
 }
 
 // src/table3/body.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/table3/tr.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function TR({
   handlers,
@@ -38028,7 +38103,7 @@ function TR({
             return null;
           } else if (handlers == null ? void 0 : handlers[h]) {
             const original = handlers[h];
-            const cloned = import_react13.default.cloneElement(original, {
+            const cloned = import_react14.default.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
@@ -38108,7 +38183,7 @@ function TableBody({
   symbols,
   sort
 }) {
-  const [selected, setSelected] = (0, import_react14.useState)(-1);
+  const [selected, setSelected] = (0, import_react15.useState)(-1);
   const sorted = Object.entries(objectData).sort(([, a], [, b]) => {
     for (const [key, order] of Object.entries(
       sort || { id: "desc", _id: "desc" }
@@ -38284,7 +38359,7 @@ function TableFooter({
 }
 
 // src/table3/dialog.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function Dialog3({
   modalRef,
@@ -38301,9 +38376,9 @@ function Dialog3({
     var _a;
     return (_a = modalRef.current) == null ? void 0 : _a.close();
   };
-  const clonedModal = (0, import_react15.useMemo)(() => {
-    if (dialogRow && import_react15.default.isValidElement(children)) {
-      return import_react15.default.cloneElement(children, {
+  const clonedModal = (0, import_react16.useMemo)(() => {
+    if (dialogRow && import_react16.default.isValidElement(children)) {
+      return import_react16.default.cloneElement(children, {
         key: JSON.stringify(dialogRow),
         row: dialogRow,
         show,
@@ -38357,8 +38432,8 @@ function Table3({
   sortBy,
   ...props
 }) {
-  const [handlers, setHandlers] = (0, import_react16.useState)({});
-  const [page, setPage] = (0, import_react16.useState)(1);
+  const [handlers, setHandlers] = (0, import_react17.useState)({});
+  const [page, setPage] = (0, import_react17.useState)(1);
   function dataReducer(a, b) {
     if (b == null) return {};
     if (Array.isArray(b)) {
@@ -38379,7 +38454,7 @@ function Table3({
         };
         const newHandlers = { ...handlers };
         for (let item in cc) {
-          const isReactComponent = import_react16.default.isValidElement(cc[item]);
+          const isReactComponent = import_react17.default.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 : "");
@@ -38399,12 +38474,12 @@ function Table3({
       return newA;
     }
   }
-  const [objectData, setObjectData] = (0, import_react16.useReducer)(dataReducer, null);
-  (0, import_react16.useEffect)(() => {
+  const [objectData, setObjectData] = (0, import_react17.useReducer)(dataReducer, null);
+  (0, import_react17.useEffect)(() => {
     setObjectData(data);
     setPage(1);
   }, [data]);
-  const headers = (0, import_react16.useMemo)(() => {
+  const headers = (0, import_react17.useMemo)(() => {
     if (!objectData) return [];
     return [
       ...new Set(
@@ -38412,13 +38487,13 @@ function Table3({
       )
     ];
   }, [objectData]);
-  const totalPages = (0, import_react16.useMemo)(() => {
+  const totalPages = (0, import_react17.useMemo)(() => {
     if (!objectData) return 0;
     return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
   }, [objectData, maxItems]);
-  const [sort, setSort] = (0, import_react16.useState)(sortBy);
-  const modalRef = (0, import_react16.useRef)(null);
-  const [dialogRow, setDialogRow] = (0, import_react16.useState)({});
+  const [sort, setSort] = (0, import_react17.useState)(sortBy);
+  const modalRef = (0, import_react17.useRef)(null);
+  const [dialogRow, setDialogRow] = (0, import_react17.useState)({});
   const context = {
     objectData,
     headers,
@@ -38445,7 +38520,7 @@ function Table3({
     setSort,
     ...props
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if ((dialogRow == null ? void 0 : dialogRow.id) || (dialogRow == null ? void 0 : dialogRow._id)) {
       const newDialogRow = objectData[dialogRow == null ? void 0 : dialogRow.id] || objectData[dialogRow == null ? void 0 : dialogRow._id];
       setDialogRow(newDialogRow);

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 = {};
@@ -35994,19 +36064,20 @@ function IHTable({
   rowHeight,
   wrapText = false,
   density = "standard",
-  searchable = false
+  searchable = false,
+  autoHeight = 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 [searchQuery, setSearchQuery] = useState4("");
+  const [modalRow, setModalRow] = useState5();
+  const [searchQuery, setSearchQuery] = useState5("");
   const resolvedButtons = modal ? { ...buttons, Modal: "" } : buttons;
   useEffect3(() => {
     setRows(data);
@@ -36059,6 +36130,8 @@ function IHTable({
   );
   if (!rows.length) return null;
   const rowHeightProps = wrapText ? { getRowHeight: () => "auto" } : rowHeight != null ? { rowHeight } : {};
+  const containerHeight = autoHeight ? void 0 : (_a = HEIGHT_MAP[displayRows.length]) != null ? _a : height;
+  const hideFooter = autoHeight || displayRows.length <= Object.keys(HEIGHT_MAP).length;
   return /* @__PURE__ */ jsxs5("div", { className: "m-2", children: [
     header && /* @__PURE__ */ jsx6("div", { className: "font-bold  p-2 ", children: header }),
     /* @__PURE__ */ jsxs5("div", { className: "flex justify-between", children: [
@@ -36080,7 +36153,8 @@ function IHTable({
         sx: {
           display: "flex",
           flexDirection: "column",
-          height: (_a = HEIGHT_MAP[displayRows.length]) != null ? _a : height,
+          // undefined height lets the child DataGrid size itself freely
+          height: containerHeight,
           width,
           zIndex: 999999999
         },
@@ -36101,6 +36175,7 @@ function IHTable({
               rows: displayRows,
               columns,
               density,
+              autoHeight,
               checkboxSelection: Boolean(onSelect),
               rowSelectionModel: selectedRows,
               onRowSelectionModelChange: !modal ? setSelectedRows : void 0,
@@ -36142,7 +36217,7 @@ function IHTable({
               editMode: "row",
               processRowUpdate: handleRowUpdate,
               pageSizeOptions: [5, 10],
-              hideFooter: displayRows.length <= Object.keys(HEIGHT_MAP).length
+              hideFooter
             }
           )
         ]
@@ -36160,7 +36235,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({
@@ -36171,7 +36246,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,
@@ -36206,7 +36281,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";
@@ -36303,7 +36378,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 = {
@@ -36696,7 +36771,7 @@ function useResources({
 import React5, {
   useEffect as useEffect5,
   useRef as useRef3,
-  useState as useState7
+  useState as useState8
 } from "react";
 
 // src/select/icon.tsx
@@ -36744,16 +36819,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);
@@ -36803,7 +36878,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();
@@ -36940,7 +37015,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";
@@ -37184,7 +37259,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) => {
@@ -37352,7 +37427,7 @@ function useDates() {
 
 // src/calendar/index.tsx
 import {
-  useState as useState9
+  useState as useState10
 } from "react";
 import DatePicker from "react-datepicker";
 
@@ -37386,11 +37461,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);
@@ -37548,11 +37623,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";
@@ -37662,13 +37737,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;
@@ -37957,7 +38032,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";
@@ -38102,7 +38177,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" }
@@ -38351,8 +38426,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)) {
@@ -38410,9 +38485,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.28",
+  "version": "2.0.30",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/input/index.tsx

@@ -1,14 +1,12 @@
-import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import { React } from "next/dist/server/route-modules/app-page/vendored/rsc/entrypoints";
+import { InputHTMLAttributes, useState } from "react";
 
-interface InputProps
-  extends DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > {
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label: React.ReactNode;
   regex?: RegExp;
   invalidMessage?: React.ReactNode;
 }
+
 export default function Input({
   label,
   className,
@@ -18,26 +16,82 @@ export default function Input({
 }: InputProps) {
   const value = `${props?.value || ""}`;
   const isValid = !regex ? true : regex.test(value);
+  const isPassword = props.type === "password";
+  const [showPassword, setShowPassword] = useState(false);
 
   return (
     <div className="w-full">
       <label className="flex flex-col gap-1">
-        <div className="font-bold ">
+        <div className="font-bold">
           {label} {props?.required && <span className="text-red-500">*</span>}
         </div>
-        <div>
+        <div className="relative">
           <input
             {...props}
+            type={isPassword && showPassword ? "text" : props.type}
             className={[
               "p-2 w-full rounded border shadow",
-              value != "" && !isValid && "bg-red-200 text-black",
-              value != "" && isValid && "bg-green-200 text-black",
+              isPassword && "pr-10",
+              value !== "" && !isValid && "bg-red-200 text-black",
+              value !== "" && isValid && "bg-green-200 text-black",
               className,
-            ].join(" ")}
+            ]
+              .filter(Boolean)
+              .join(" ")}
           />
+          {isPassword && (
+            <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ña" : "Mostrar contraseña"
+              }
+            >
+              {showPassword ? (
+                // Ojo cerrado (ocultar)
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <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"
+                  />
+                </svg>
+              ) : (
+                // Ojo abierto (mostrar)
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                  />
+                  <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"
+                  />
+                </svg>
+              )}
+            </button>
+          )}
         </div>
       </label>
-      {!isValid && value != "" && (
+      {!isValid && value !== "" && (
         <div className="text-red-800 invalid">{invalidMessage}</div>
       )}
     </div>

package/src/table/index.tsx

@@ -70,6 +70,14 @@ interface TableProps {
    * - "comfortable" → padding generoso, fácil de leer
    */
   density?: GridDensity;
+  /**
+   * Cuando es true, el alto del contenedor se ajusta automáticamente
+   * al contenido de la tabla, eliminando el scroll vertical.
+   * Compatible con `wrapText` (filas de alto variable) y con
+   * cualquier valor de `density`. Cuando está activo, las props
+   * `height` y `HEIGHT_MAP` se ignoran.
+   */
+  autoHeight?: boolean;
   [key: string]: any;
 }
 
@@ -500,6 +508,7 @@ function IHTable({
   wrapText = false,
   density = "standard",
   searchable = false,
+  autoHeight = false,
 }: TableProps) {
   if (modal && onSelect)
     throw new Error("Solo se puede usar modal o onSelect por separado");
@@ -576,13 +585,30 @@ function IHTable({
 
   if (!rows.length) return null;
 
-  // When wrapText is active we must use getRowHeight; rowHeight prop is ignored.
+  // ─── Row height props ──────────────────────────────────────────────────────
+  // Priority: wrapText always wins (variable row height).
+  // autoHeight delegates height control to MUI; rowHeight prop is still
+  // respected when neither wrapText nor autoHeight forces auto sizing.
   const rowHeightProps = wrapText
     ? { getRowHeight: () => "auto" as const }
     : rowHeight != null
       ? { rowHeight }
       : {};
 
+  // ─── Container height ──────────────────────────────────────────────────────
+  // When autoHeight is active the Box must NOT constrain the height so that
+  // MUI's own autoHeight can expand the grid to fit all rows without scroll.
+  // We still honour HEIGHT_MAP for small datasets when autoHeight is off,
+  // falling back to the explicit `height` prop for larger ones.
+  const containerHeight = autoHeight
+    ? undefined // let MUI decide
+    : (HEIGHT_MAP[displayRows.length] ?? height);
+
+  // Whether to hide MUI's built-in pagination footer.
+  // With autoHeight all rows are visible, so pagination is never needed.
+  const hideFooter =
+    autoHeight || displayRows.length <= Object.keys(HEIGHT_MAP).length;
+
   return (
     <div className="m-2">
       {header && <div className="font-bold  p-2 ">{header}</div>}
@@ -603,7 +629,8 @@ function IHTable({
         sx={{
           display: "flex",
           flexDirection: "column",
-          height: HEIGHT_MAP[displayRows.length] ?? height,
+          // undefined height lets the child DataGrid size itself freely
+          height: containerHeight,
           width,
           zIndex: 999999999,
         }}
@@ -622,6 +649,9 @@ function IHTable({
           rows={displayRows}
           columns={columns as any}
           density={density}
+          // MUI's native autoHeight prop — renders all rows and sizes the
+          // grid to fit them, regardless of density or wrapText.
+          autoHeight={autoHeight}
           checkboxSelection={Boolean(onSelect)}
           rowSelectionModel={selectedRows}
           onRowSelectionModelChange={!modal ? setSelectedRows : undefined}
@@ -663,7 +693,7 @@ function IHTable({
           editMode="row"
           processRowUpdate={handleRowUpdate}
           pageSizeOptions={[5, 10]}
-          hideFooter={displayRows.length <= Object.keys(HEIGHT_MAP).length}
+          hideFooter={hideFooter}
         />
       </Box>
       <CustomFooter footer={footer} rows={displayRows} />