next-recomponents 2.0.66 → 2.0.68

package/dist/index.d.mts

@@ -101,7 +101,7 @@ interface Props$2 extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaE
     label?: React$1.ReactNode;
     maxLength?: number;
 }
-declare function TextArea({ label, className, maxLength, onChange, children, ...props }: Props$2): react_jsx_runtime.JSX.Element;
+declare function TextArea({ label, className, maxLength, onChange, value, ...props }: Props$2): react_jsx_runtime.JSX.Element;
 
 interface DefaultParams {
     [key: string]: any;

package/dist/index.d.ts

@@ -101,7 +101,7 @@ interface Props$2 extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaE
     label?: React$1.ReactNode;
     maxLength?: number;
 }
-declare function TextArea({ label, className, maxLength, onChange, children, ...props }: Props$2): react_jsx_runtime.JSX.Element;
+declare function TextArea({ label, className, maxLength, onChange, value, ...props }: Props$2): react_jsx_runtime.JSX.Element;
 
 interface DefaultParams {
     [key: string]: any;

package/dist/index.js

@@ -36169,41 +36169,34 @@ function Table(props) {
 }
 
 // src/text-area/index.tsx
-var import_react6 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function TextArea({
   label,
   className,
   maxLength,
   onChange,
-  children = "",
+  value,
   ...props
 }) {
-  const [value, setValue] = (0, import_react6.useState)((props == null ? void 0 : props.value) || "");
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full relative my-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex items-center border rounded bg-white ", children: [
+  const currentValue = String(value != null ? value : "");
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-full relative my-3", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex items-center border rounded bg-white", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "textarea",
       {
         ...props,
         className: ["p-1 w-full transparent", className].join(" "),
-        value,
-        onChange: (e) => {
-          if (maxLength) {
-            e.target.value = e.target.value.slice(0, maxLength);
-          }
-          setValue(e.target.value);
-          onChange == null ? void 0 : onChange(e);
-        }
+        value: currentValue,
+        maxLength,
+        onChange
       }
     ),
-    " ",
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "absolute -top-2.5 left-2 text-xs font-bold  px-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "absolute -top-2.5 left-2 text-xs font-bold px-1", children: [
       label,
       " ",
-      (props == null ? void 0 : props.required) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-red-500", children: "*" })
+      props.required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-red-500", children: "*" })
     ] }),
-    maxLength && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: " text-xs text-gray text-right", children: [
-      value.length,
+    maxLength && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-xs text-gray text-right", children: [
+      currentValue.length,
       " / ",
       maxLength
     ] })
@@ -36211,12 +36204,12 @@ function TextArea({
 }
 
 // src/use-resources/index.ts
-var import_react8 = require("react");
+var import_react7 = require("react");
 
 // src/use-resources/get.token.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 function useToken() {
-  const token = (0, import_react7.useMemo)(() => {
+  const token = (0, import_react6.useMemo)(() => {
     if (typeof window != "undefined") {
       const t = window.localStorage.getItem("token");
       if (t) return t;
@@ -36308,7 +36301,7 @@ function useResources({
   onError
 }) {
   const token = useToken();
-  const [info, setInfo] = (0, import_react8.useState)(
+  const [info, setInfo] = (0, import_react7.useState)(
     Object.keys(endpoints).reduce((acc, key) => {
       var _a, _b;
       const newAcc = {
@@ -36698,14 +36691,14 @@ function useResources({
       }
     }
   }
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     doSome();
   }, []);
   return results;
 }
 
 // src/select/index.tsx
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/select/icon.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -36752,13 +36745,13 @@ function Select({
   strictMode = true,
   ...props
 }) {
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react9.useState)("");
-  const [options, setOptions] = (0, import_react9.useState)(
+  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react8.useState)("");
+  const [options, setOptions] = (0, import_react8.useState)(
     []
   );
-  const [dropdownPos, setDropdownPos] = (0, import_react9.useState)({ left: 0, width: 0 });
-  (0, import_react9.useEffect)(() => {
+  const [dropdownPos, setDropdownPos] = (0, import_react8.useState)({ left: 0, width: 0 });
+  (0, import_react8.useEffect)(() => {
     if (isOpen && containerRef.current) {
       const rect = containerRef.current.getBoundingClientRect();
       const spaceBelow = window.innerHeight - rect.bottom;
@@ -36780,23 +36773,23 @@ function Select({
       }
     }
   }, [isOpen]);
-  const [filtered, setFiltered] = (0, import_react9.useState)(
+  const [filtered, setFiltered] = (0, import_react8.useState)(
     []
   );
-  const [hasEdition, setHasEdition] = (0, import_react9.useState)(false);
-  const [highlightedIndex, setHighlightedIndex] = (0, import_react9.useState)(-1);
-  const inputRef = (0, import_react9.useRef)(null);
+  const [hasEdition, setHasEdition] = (0, import_react8.useState)(false);
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react8.useState)(-1);
+  const inputRef = (0, import_react8.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_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     var _a;
-    const parsedOptions = import_react9.default.Children.toArray(children).filter((child) => {
+    const parsedOptions = import_react8.default.Children.toArray(children).filter((child) => {
       return child.type === "option";
     }).map((child) => {
       var _a2;
-      const label2 = import_react9.default.Children.toArray(child.props.children).join("");
+      const label2 = import_react8.default.Children.toArray(child.props.children).join("");
       return {
         value: ((_a2 = child.props) == null ? void 0 : _a2.value) || label2,
         label: label2
@@ -36807,7 +36800,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_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const items = options.filter((opt) => {
       if (!hasEdition) return true;
       const normilizedLabel = normalize(`${opt == null ? void 0 : opt.label}`);
@@ -36836,9 +36829,9 @@ function Select({
     setInputValue(v);
     setIsOpen(false);
   };
-  const containerRef = (0, import_react9.useRef)(null);
-  const [openUpwards, setOpenUpwards] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const containerRef = (0, import_react8.useRef)(null);
+  const [openUpwards, setOpenUpwards] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     if (isOpen && containerRef.current) {
       const rect = containerRef.current.getBoundingClientRect();
       const spaceBelow = window.innerHeight - rect.bottom;
@@ -36981,10 +36974,10 @@ function Select({
 }
 
 // src/modal/index.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 
 // src/pop/index.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/pop/actions.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -37221,9 +37214,9 @@ var INITIAL_STATE = {
   full: false
 };
 function usePopup() {
-  const [popup, setPopup] = (0, import_react10.useState)(INITIAL_STATE);
-  const messageRef = (0, import_react10.useRef)(null);
-  const open = (0, import_react10.useCallback)(
+  const [popup, setPopup] = (0, import_react9.useState)(INITIAL_STATE);
+  const messageRef = (0, import_react9.useRef)(null);
+  const open = (0, import_react9.useCallback)(
     (partial) => {
       const { message, ...rest } = partial;
       messageRef.current = message;
@@ -37231,7 +37224,7 @@ function usePopup() {
     },
     []
   );
-  const close = (0, import_react10.useCallback)(
+  const close = (0, import_react9.useCallback)(
     async (confirmed, value) => {
       var _a, _b, _c;
       const prev = { ...popup };
@@ -37249,7 +37242,7 @@ function usePopup() {
     },
     [popup]
   );
-  const alert2 = (0, import_react10.useCallback)(
+  const alert2 = (0, import_react9.useCallback)(
     (message, color = "primary") => new Promise(
       (resolve) => open({
         type: "alert",
@@ -37261,7 +37254,7 @@ function usePopup() {
     ),
     [open]
   );
-  const modal = (0, import_react10.useCallback)(
+  const modal = (0, import_react9.useCallback)(
     (message, color = "primary", icons = false, full = false, onClose) => new Promise(
       (resolve) => open({
         type: "modal",
@@ -37278,7 +37271,7 @@ function usePopup() {
     ),
     [open]
   );
-  const confirm = (0, import_react10.useCallback)(
+  const confirm = (0, import_react9.useCallback)(
     (message, color = "primary") => new Promise(
       (resolve) => open({
         type: "confirm",
@@ -37290,7 +37283,7 @@ function usePopup() {
     ),
     [open]
   );
-  const prompt = (0, import_react10.useCallback)(
+  const prompt = (0, import_react9.useCallback)(
     (message, color = "primary") => new Promise(
       (resolve) => open({
         type: "prompt",
@@ -37302,7 +37295,7 @@ function usePopup() {
     ),
     [open]
   );
-  const updateMessage = (0, import_react10.useCallback)((message) => {
+  const updateMessage = (0, import_react9.useCallback)((message) => {
     messageRef.current = message;
     setPopup((prev) => ({ ...prev }));
   }, []);
@@ -37338,17 +37331,17 @@ function Modal({
   const hide = () => {
     pop.close(false);
   };
-  const childrenWithHide = (0, import_react11.useMemo)(
-    () => (0, import_react11.cloneElement)(children, { hide }),
+  const childrenWithHide = (0, import_react10.useMemo)(
+    () => (0, import_react10.cloneElement)(children, { hide }),
     [children]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     pop.updateMessage(childrenWithHide);
   }, [childrenWithHide]);
   const props = button == null ? void 0 : button.props;
   const onClick = props == null ? void 0 : props.onClick;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "", children: [
-    (0, import_react11.cloneElement)(button, {
+    (0, import_react10.cloneElement)(button, {
       onClick: (e) => {
         onClick == null ? void 0 : onClick(e);
         pop.modal(childrenWithHide, color, false, true, onClose);
@@ -37407,7 +37400,7 @@ function useDates() {
 }
 
 // src/calendar/index.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_react_datepicker = __toESM(require("react-datepicker"));
 
 // src/calendar/calendar.icon.tsx
@@ -37440,11 +37433,11 @@ function MyCalendar({
   value,
   ...otherProps
 }) {
-  const [selectedDate, setSelectedDate] = (0, import_react12.useState)(null);
-  const [dateStr, setDateStr] = (0, import_react12.useState)(
+  const [selectedDate, setSelectedDate] = (0, import_react11.useState)(null);
+  const [dateStr, setDateStr] = (0, import_react11.useState)(
     defaultValue || value || ""
   );
-  const [open, setOpen] = (0, import_react12.useState)(false);
+  const [open, setOpen] = (0, import_react11.useState)(false);
   function handleChange(date) {
     if (!date) return;
     setSelectedDate(date);
@@ -37633,10 +37626,10 @@ function DocumentViewer({
 }
 
 // src/table3/index.tsx
-var import_react17 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 
 // src/table3/filter.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 
 // src/table3/filters.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -37746,14 +37739,14 @@ function Filter({
   sort,
   setSort
 }) {
-  const [visible, setVisible] = (0, import_react13.useState)(false);
-  const [text, setText] = (0, import_react13.useState)("");
-  const items = (0, import_react13.useMemo)(
+  const [visible, setVisible] = (0, import_react12.useState)(false);
+  const [text, setText] = (0, import_react12.useState)("");
+  const items = (0, import_react12.useMemo)(
     () => [...new Set(Object.values(objectData).map((o) => o[h]))],
     [objectData]
   );
-  const [selected, setSelected] = (0, import_react13.useState)(items);
-  const itemsFiltered = (0, import_react13.useMemo)(
+  const [selected, setSelected] = (0, import_react12.useState)(items);
+  const itemsFiltered = (0, import_react12.useMemo)(
     () => items.sort((a, b) => `${a}`.localeCompare(b)).filter((item) => {
       if (!text) return true;
       return `${item}`.toLowerCase().includes(text.toLowerCase());
@@ -37790,7 +37783,7 @@ function Filter({
   const hidden = Object.values(objectData).filter(
     (d) => d._visible === false
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.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);
@@ -38041,10 +38034,10 @@ function TableHead({
 }
 
 // src/table3/body.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 
 // src/table3/tr.tsx
-var import_react14 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function TR({
   handlers,
@@ -38106,7 +38099,7 @@ function TR({
             return null;
           } else if (handlers == null ? void 0 : handlers[h]) {
             const original = handlers[h];
-            const cloned = import_react14.default.cloneElement(original, {
+            const cloned = import_react13.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
@@ -38186,7 +38179,7 @@ function TableBody({
   symbols,
   sort
 }) {
-  const [selected, setSelected] = (0, import_react15.useState)(-1);
+  const [selected, setSelected] = (0, import_react14.useState)(-1);
   const sorted = Object.entries(objectData).sort(([, a], [, b]) => {
     for (const [key, order] of Object.entries(
       sort || { id: "desc", _id: "desc" }
@@ -38362,7 +38355,7 @@ function TableFooter({
 }
 
 // src/table3/dialog.tsx
-var import_react16 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function Dialog3({
   modalRef,
@@ -38379,9 +38372,9 @@ function Dialog3({
     var _a;
     return (_a = modalRef.current) == null ? void 0 : _a.close();
   };
-  const clonedModal = (0, import_react16.useMemo)(() => {
-    if (dialogRow && import_react16.default.isValidElement(children)) {
-      return import_react16.default.cloneElement(children, {
+  const clonedModal = (0, import_react15.useMemo)(() => {
+    if (dialogRow && import_react15.default.isValidElement(children)) {
+      return import_react15.default.cloneElement(children, {
         key: JSON.stringify(dialogRow),
         row: dialogRow,
         show,
@@ -38435,8 +38428,8 @@ function Table3({
   sortBy,
   ...props
 }) {
-  const [handlers, setHandlers] = (0, import_react17.useState)({});
-  const [page, setPage] = (0, import_react17.useState)(1);
+  const [handlers, setHandlers] = (0, import_react16.useState)({});
+  const [page, setPage] = (0, import_react16.useState)(1);
   function dataReducer(a, b) {
     if (b == null) return {};
     if (Array.isArray(b)) {
@@ -38457,7 +38450,7 @@ function Table3({
         };
         const newHandlers = { ...handlers };
         for (let item in cc) {
-          const isReactComponent = import_react17.default.isValidElement(cc[item]);
+          const isReactComponent = import_react16.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 : "");
@@ -38477,12 +38470,12 @@ function Table3({
       return newA;
     }
   }
-  const [objectData, setObjectData] = (0, import_react17.useReducer)(dataReducer, null);
-  (0, import_react17.useEffect)(() => {
+  const [objectData, setObjectData] = (0, import_react16.useReducer)(dataReducer, null);
+  (0, import_react16.useEffect)(() => {
     setObjectData(data);
     setPage(1);
   }, [data]);
-  const headers = (0, import_react17.useMemo)(() => {
+  const headers = (0, import_react16.useMemo)(() => {
     if (!objectData) return [];
     return [
       ...new Set(
@@ -38490,13 +38483,13 @@ function Table3({
       )
     ];
   }, [objectData]);
-  const totalPages = (0, import_react17.useMemo)(() => {
+  const totalPages = (0, import_react16.useMemo)(() => {
     if (!objectData) return 0;
     return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
   }, [objectData, maxItems]);
-  const [sort, setSort] = (0, import_react17.useState)(sortBy);
-  const modalRef = (0, import_react17.useRef)(null);
-  const [dialogRow, setDialogRow] = (0, import_react17.useState)({});
+  const [sort, setSort] = (0, import_react16.useState)(sortBy);
+  const modalRef = (0, import_react16.useRef)(null);
+  const [dialogRow, setDialogRow] = (0, import_react16.useState)({});
   const context = {
     objectData,
     headers,
@@ -38523,7 +38516,7 @@ function Table3({
     setSort,
     ...props
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.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);
@@ -38553,13 +38546,13 @@ function Table3({
 }
 
 // src/table-advanced/index.tsx
-var import_react22 = require("react");
+var import_react21 = require("react");
 
 // src/table-advanced/h.table.tsx
-var import_react20 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 
 // src/table-advanced/header.tsx
-var import_react18 = require("react");
+var import_react17 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/table-advanced/icons.tsx
@@ -38813,32 +38806,32 @@ function Header({
   index,
   length
 }) {
-  const [visible, setVisible] = (0, import_react18.useState)(false);
-  const [hovered, setHovered] = (0, import_react18.useState)(false);
+  const [visible, setVisible] = (0, import_react17.useState)(false);
+  const [hovered, setHovered] = (0, import_react17.useState)(false);
   const sortIndex = context.sort.findIndex((b) => b.field == header);
-  const [text, setText] = (0, import_react18.useState)("");
-  const cellRef = (0, import_react18.useRef)(null);
-  const [coords, setCoords] = (0, import_react18.useState)(
+  const [text, setText] = (0, import_react17.useState)("");
+  const cellRef = (0, import_react17.useRef)(null);
+  const [coords, setCoords] = (0, import_react17.useState)(
     null
   );
-  const filteredValues = (0, import_react18.useMemo)(() => {
+  const filteredValues = (0, import_react17.useMemo)(() => {
     return [...new Set(context.data.map((d) => d[header]))].filter((d) => {
       if (text == "") return true;
       return `${d}`.toLowerCase().includes(text.toLowerCase());
     });
   }, [context.data, header, text]);
-  const [selected, setSelected] = (0, import_react18.useState)([]);
+  const [selected, setSelected] = (0, import_react17.useState)([]);
   const hasFilter = context.filters.find((b) => b.field == header);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     setSelected(filteredValues);
   }, [filteredValues]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (visible) {
       context.setCurrentHeader(header);
     }
     setText("");
   }, [visible]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!visible || !cellRef.current) {
       setCoords(null);
       return;
@@ -39177,39 +39170,39 @@ function valueFormatter({
 }
 
 // src/table-advanced/use.pagination.tsx
-var import_react19 = require("react");
+var import_react18 = require("react");
 function usePaginacion({
   total,
   tamanioPagina = 100,
   paginaInicial = 1
 }) {
-  const [totalPaginas, setTotalPaginas] = (0, import_react19.useState)(
+  const [totalPaginas, setTotalPaginas] = (0, import_react18.useState)(
     Math.max(1, Math.ceil(total / tamanioPagina))
   );
-  const [pagina, setPagina] = (0, import_react19.useState)(
+  const [pagina, setPagina] = (0, import_react18.useState)(
     Math.min(Math.max(paginaInicial, 1), totalPaginas)
   );
   const inicio = total === 0 ? 0 : (pagina - 1) * tamanioPagina + 1;
   const fin = Math.min(pagina * tamanioPagina, total);
-  const rango = (0, import_react19.useMemo)(() => {
+  const rango = (0, import_react18.useMemo)(() => {
     if (total === 0) return "0 a 0";
     return `${inicio} a ${fin}`;
   }, [inicio, fin, total]);
   const hasNext = pagina < totalPaginas;
   const hasPrev = pagina > 1;
-  const next = (0, import_react19.useCallback)(() => {
+  const next = (0, import_react18.useCallback)(() => {
     setPagina((p) => Math.min(p + 1, totalPaginas));
   }, [totalPaginas]);
-  const prev = (0, import_react19.useCallback)(() => {
+  const prev = (0, import_react18.useCallback)(() => {
     setPagina((p) => Math.max(p - 1, 1));
   }, []);
-  const irAPagina = (0, import_react19.useCallback)(
+  const irAPagina = (0, import_react18.useCallback)(
     (n) => {
       setPagina(Math.min(Math.max(n, 1), totalPaginas));
     },
     [totalPaginas]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setTotalPaginas(Math.max(1, Math.ceil(total / tamanioPagina)));
     setPagina(1);
   }, [total]);
@@ -39234,11 +39227,11 @@ var import_jsx_runtime36 = require("react/jsx-runtime");
 function HTable({
   context
 }) {
-  const [isLoading, setIsloading] = (0, import_react20.useState)(false);
+  const [isLoading, setIsloading] = (0, import_react19.useState)(false);
   const { cols, headers } = context;
-  const [currentIndex, setCurrentIndex] = (0, import_react20.useState)(-1);
-  const tableRef = (0, import_react20.useRef)(null);
-  const modalRef = (0, import_react20.useRef)(null);
+  const [currentIndex, setCurrentIndex] = (0, import_react19.useState)(-1);
+  const tableRef = (0, import_react19.useRef)(null);
+  const modalRef = (0, import_react19.useRef)(null);
   const catDensities = { confortable: 80, compact: 30, standard: 53 };
   const padding = (context == null ? void 0 : context.rowHeight) || (context == null ? void 0 : context.density) ? catDensities[context == null ? void 0 : context.density] : 53;
   function useResizableColumns(headers2, defaultWidth = 160, minWidth = 60) {
@@ -39251,8 +39244,8 @@ function HTable({
     function resize(headers3) {
       return Object.fromEntries(headers3.map((h) => [h, getWidth(h)]));
     }
-    const [widths2, setWidths2] = (0, import_react20.useState)({});
-    const startDrag2 = (0, import_react20.useCallback)(
+    const [widths2, setWidths2] = (0, import_react19.useState)({});
+    const startDrag2 = (0, import_react19.useCallback)(
       (e, headerKey) => {
         var _a;
         e.preventDefault();
@@ -39287,7 +39280,7 @@ function HTable({
     return { widths: widths2, gridTemplateColumns: gridTemplateColumns2, startDrag: startDrag2, setWidths: setWidths2 };
   }
   const { gridTemplateColumns, startDrag, widths, setWidths } = useResizableColumns(headers);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!tableRef.current) return;
     const observer = new ResizeObserver(([entry]) => {
       const ocultos = headers.filter(
@@ -39318,7 +39311,7 @@ function HTable({
     observer.observe(tableRef.current);
     return () => observer.disconnect();
   }, [headers.length]);
-  const searchedData = (0, import_react20.useMemo)(() => {
+  const searchedData = (0, import_react19.useMemo)(() => {
     return context.filteredData.filter((row) => {
       if (context.searchBy === "") return true;
       return Object.values(row).some(
@@ -39538,7 +39531,7 @@ function HTable({
                                 context.setEditions(newEditions);
                               }
                             }
-                          ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? import_react20.default.cloneElement(context.buttons[key], {
+                          ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? import_react19.default.cloneElement(context.buttons[key], {
                             // children: context.buttons[key]?.props?.children
                             //   ? item
                             //   : undefined,
@@ -39582,7 +39575,7 @@ function HTable({
                           }) : ["number", "string"].includes(typeof item) ? valueFormatter({
                             value: item,
                             currentCoin: context.currentCoin
-                          }) : import_react20.default.isValidElement(item) ? item : JSON.stringify(item)
+                          }) : import_react19.default.isValidElement(item) ? item : JSON.stringify(item)
                         },
                         row.id + i
                       );
@@ -39679,7 +39672,7 @@ function HTable({
           "div",
           {
             className: "bg-white/40  absolute inset-0 text-black flex items-center justify-center",
-            style: { zIndex: 9999999 },
+            style: { zIndex: 10 },
             children: "Loading..."
           }
         )
@@ -39717,7 +39710,7 @@ function ModalContent({
         }
       )
     ] }),
-    import_react20.default.cloneElement(context.modal, {
+    import_react19.default.cloneElement(context.modal, {
       row: searchedData[currentIndex],
       hide
     })
@@ -39725,7 +39718,7 @@ function ModalContent({
 }
 
 // src/table-advanced/context.ts
-var import_react21 = require("react");
+var import_react20 = require("react");
 
 // src/table-advanced/filter.reducer.ts
 var filterReducer = (acc, b) => {
@@ -39753,19 +39746,19 @@ var sortReducer = (acc, b) => {
 // src/table-advanced/context.ts
 function useContext({ onSelect }) {
   const excel = useExcel();
-  const [editions, setEditions] = (0, import_react21.useState)([]);
-  const [selected, setSelected] = (0, import_react21.useState)([]);
-  const [data, setData] = (0, import_react21.useState)([]);
+  const [editions, setEditions] = (0, import_react20.useState)([]);
+  const [selected, setSelected] = (0, import_react20.useState)([]);
+  const [data, setData] = (0, import_react20.useState)([]);
   const headers = [...new Set(data.map((b) => Object.keys(b)).flat())];
-  const [currentHeader, setCurrentHeader] = (0, import_react21.useState)(null);
+  const [currentHeader, setCurrentHeader] = (0, import_react20.useState)(null);
   const cols = headers.length;
-  const [filters, setFilters] = (0, import_react21.useReducer)(
+  const [filters, setFilters] = (0, import_react20.useReducer)(
     filterReducer,
     new Array()
   );
-  const [searchBy, setSearchBy] = (0, import_react21.useState)("");
-  const [sort, setSort] = (0, import_react21.useReducer)(sortReducer, new Array());
-  const sortedData = (0, import_react21.useMemo)(() => {
+  const [searchBy, setSearchBy] = (0, import_react20.useState)("");
+  const [sort, setSort] = (0, import_react20.useReducer)(sortReducer, new Array());
+  const sortedData = (0, import_react20.useMemo)(() => {
     return [...data].sort((a, b) => {
       for (const { field, type } of sort.reverse()) {
         const av = a[field];
@@ -39795,7 +39788,7 @@ function useContext({ onSelect }) {
     }
     return true;
   });
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (filters.length == 0) {
       setEditions([]);
     }
@@ -39828,7 +39821,7 @@ var import_jsx_runtime37 = require("react/jsx-runtime");
 function TableAdvanced(tableProps) {
   const { data, ...props } = tableProps;
   const context = useContext({ onSelect: Boolean(tableProps.onSelect) });
-  (0, import_react22.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     context.setData(
       Array.isArray(data) ? data.map((d) => {
         return {
@@ -39839,7 +39832,7 @@ function TableAdvanced(tableProps) {
       }) : data
     );
   }, [data]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (tableProps == null ? void 0 : tableProps.sortBy) {
       const [k, v] = Object.entries(tableProps.sortBy)[0];
       context.setSort({ [k]: v });
@@ -39858,15 +39851,15 @@ function TableAdvanced(tableProps) {
 }
 
 // src/tabs/index.tsx
-var import_react23 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function TabContainer({
   children,
   labelMaxWidth,
   currentIndex = 0
 }) {
-  const [index, setIndex] = (0, import_react23.useState)(0);
-  const items = import_react23.default.Children.toArray(
+  const [index, setIndex] = (0, import_react22.useState)(0);
+  const items = import_react22.default.Children.toArray(
     children
   );
   const labels = items.map((c) => c.props.label);
@@ -39875,7 +39868,7 @@ function TabContainer({
     if (e.key === "ArrowLeft")
       setIndex((k - 1 + labels.length) % labels.length);
   };
-  (0, import_react23.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     setIndex(currentIndex);
   }, [currentIndex]);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "w-full bg-white border shadow rounded-lg ", children: [

package/dist/index.mjs

@@ -36146,43 +36146,34 @@ function Table(props) {
 }
 
 // src/text-area/index.tsx
-import {
-  useState as useState6
-} from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function TextArea({
   label,
   className,
   maxLength,
   onChange,
-  children = "",
+  value,
   ...props
 }) {
-  const [value, setValue] = useState6((props == null ? void 0 : props.value) || "");
-  return /* @__PURE__ */ jsx7("div", { className: "w-full relative my-3", children: /* @__PURE__ */ jsxs6("div", { className: "relative flex items-center border rounded bg-white ", children: [
+  const currentValue = String(value != null ? value : "");
+  return /* @__PURE__ */ jsx7("div", { className: "w-full relative my-3", children: /* @__PURE__ */ jsxs6("div", { className: "relative flex items-center border rounded bg-white", children: [
     /* @__PURE__ */ jsx7(
       "textarea",
       {
         ...props,
         className: ["p-1 w-full transparent", className].join(" "),
-        value,
-        onChange: (e) => {
-          if (maxLength) {
-            e.target.value = e.target.value.slice(0, maxLength);
-          }
-          setValue(e.target.value);
-          onChange == null ? void 0 : onChange(e);
-        }
+        value: currentValue,
+        maxLength,
+        onChange
       }
     ),
-    " ",
-    /* @__PURE__ */ jsxs6("label", { className: "absolute -top-2.5 left-2 text-xs font-bold  px-1", children: [
+    /* @__PURE__ */ jsxs6("label", { className: "absolute -top-2.5 left-2 text-xs font-bold px-1", children: [
       label,
       " ",
-      (props == null ? void 0 : props.required) && /* @__PURE__ */ jsx7("span", { className: "text-red-500", children: "*" })
+      props.required && /* @__PURE__ */ jsx7("span", { className: "text-red-500", children: "*" })
     ] }),
-    maxLength && /* @__PURE__ */ jsxs6("div", { className: " text-xs text-gray text-right", children: [
-      value.length,
+    maxLength && /* @__PURE__ */ jsxs6("div", { className: "text-xs text-gray text-right", children: [
+      currentValue.length,
       " / ",
       maxLength
     ] })
@@ -36190,7 +36181,7 @@ function TextArea({
 }
 
 // src/use-resources/index.ts
-import { useEffect as useEffect4, useState as useState7 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 
 // src/use-resources/get.token.tsx
 import { useMemo as useMemo2 } from "react";
@@ -36287,7 +36278,7 @@ function useResources({
   onError
 }) {
   const token = useToken();
-  const [info, setInfo] = useState7(
+  const [info, setInfo] = useState6(
     Object.keys(endpoints).reduce((acc, key) => {
       var _a, _b;
       const newAcc = {
@@ -36684,10 +36675,10 @@ function useResources({
 }
 
 // src/select/index.tsx
-import React5, {
+import React4, {
   useEffect as useEffect5,
   useRef as useRef2,
-  useState as useState8
+  useState as useState7
 } from "react";
 
 // src/select/icon.tsx
@@ -36735,12 +36726,12 @@ function Select({
   strictMode = true,
   ...props
 }) {
-  const [isOpen, setIsOpen] = useState8(false);
-  const [inputValue, setInputValue] = useState8("");
-  const [options, setOptions] = useState8(
+  const [isOpen, setIsOpen] = useState7(false);
+  const [inputValue, setInputValue] = useState7("");
+  const [options, setOptions] = useState7(
     []
   );
-  const [dropdownPos, setDropdownPos] = useState8({ left: 0, width: 0 });
+  const [dropdownPos, setDropdownPos] = useState7({ left: 0, width: 0 });
   useEffect5(() => {
     if (isOpen && containerRef.current) {
       const rect = containerRef.current.getBoundingClientRect();
@@ -36763,11 +36754,11 @@ function Select({
       }
     }
   }, [isOpen]);
-  const [filtered, setFiltered] = useState8(
+  const [filtered, setFiltered] = useState7(
     []
   );
-  const [hasEdition, setHasEdition] = useState8(false);
-  const [highlightedIndex, setHighlightedIndex] = useState8(-1);
+  const [hasEdition, setHasEdition] = useState7(false);
+  const [highlightedIndex, setHighlightedIndex] = useState7(-1);
   const inputRef = useRef2(null);
   const validOption = (value) => {
     return options.find((opt) => opt.label == value);
@@ -36775,11 +36766,11 @@ function Select({
   const normalize = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z]/g, "");
   useEffect5(() => {
     var _a;
-    const parsedOptions = React5.Children.toArray(children).filter((child) => {
+    const parsedOptions = React4.Children.toArray(children).filter((child) => {
       return child.type === "option";
     }).map((child) => {
       var _a2;
-      const label2 = React5.Children.toArray(child.props.children).join("");
+      const label2 = React4.Children.toArray(child.props.children).join("");
       return {
         value: ((_a2 = child.props) == null ? void 0 : _a2.value) || label2,
         label: label2
@@ -36820,7 +36811,7 @@ function Select({
     setIsOpen(false);
   };
   const containerRef = useRef2(null);
-  const [openUpwards, setOpenUpwards] = useState8(false);
+  const [openUpwards, setOpenUpwards] = useState7(false);
   useEffect5(() => {
     if (isOpen && containerRef.current) {
       const rect = containerRef.current.getBoundingClientRect();
@@ -36967,7 +36958,7 @@ function Select({
 import { cloneElement as cloneElement2, useEffect as useEffect6, useMemo as useMemo4 } from "react";
 
 // src/pop/index.tsx
-import { useState as useState9, useCallback, useRef as useRef3 } from "react";
+import { useState as useState8, useCallback, useRef as useRef3 } from "react";
 
 // src/pop/actions.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -37204,7 +37195,7 @@ var INITIAL_STATE = {
   full: false
 };
 function usePopup() {
-  const [popup, setPopup] = useState9(INITIAL_STATE);
+  const [popup, setPopup] = useState8(INITIAL_STATE);
   const messageRef = useRef3(null);
   const open = useCallback(
     (partial) => {
@@ -37391,7 +37382,7 @@ function useDates() {
 
 // src/calendar/index.tsx
 import {
-  useState as useState10
+  useState as useState9
 } from "react";
 import DatePicker from "react-datepicker";
 
@@ -37425,11 +37416,11 @@ function MyCalendar({
   value,
   ...otherProps
 }) {
-  const [selectedDate, setSelectedDate] = useState10(null);
-  const [dateStr, setDateStr] = useState10(
+  const [selectedDate, setSelectedDate] = useState9(null);
+  const [dateStr, setDateStr] = useState9(
     defaultValue || value || ""
   );
-  const [open, setOpen] = useState10(false);
+  const [open, setOpen] = useState9(false);
   function handleChange(date) {
     if (!date) return;
     setSelectedDate(date);
@@ -37618,16 +37609,16 @@ function DocumentViewer({
 }
 
 // src/table3/index.tsx
-import React9, {
+import React8, {
   useEffect as useEffect9,
   useMemo as useMemo7,
   useReducer as useReducer2,
   useRef as useRef5,
-  useState as useState13
+  useState as useState12
 } from "react";
 
 // src/table3/filter.tsx
-import { useEffect as useEffect8, useMemo as useMemo5, useState as useState11 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo5, useState as useState10 } from "react";
 
 // src/table3/filters.tsx
 import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -37737,13 +37728,13 @@ function Filter({
   sort,
   setSort
 }) {
-  const [visible, setVisible] = useState11(false);
-  const [text, setText] = useState11("");
+  const [visible, setVisible] = useState10(false);
+  const [text, setText] = useState10("");
   const items = useMemo5(
     () => [...new Set(Object.values(objectData).map((o) => o[h]))],
     [objectData]
   );
-  const [selected, setSelected] = useState11(items);
+  const [selected, setSelected] = useState10(items);
   const itemsFiltered = useMemo5(
     () => items.sort((a, b) => `${a}`.localeCompare(b)).filter((item) => {
       if (!text) return true;
@@ -38032,10 +38023,10 @@ function TableHead({
 }
 
 // src/table3/body.tsx
-import { useState as useState12 } from "react";
+import { useState as useState11 } from "react";
 
 // src/table3/tr.tsx
-import React7 from "react";
+import React6 from "react";
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function TR({
   handlers,
@@ -38097,7 +38088,7 @@ function TR({
             return null;
           } else if (handlers == null ? void 0 : handlers[h]) {
             const original = handlers[h];
-            const cloned = React7.cloneElement(original, {
+            const cloned = React6.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
@@ -38177,7 +38168,7 @@ function TableBody({
   symbols,
   sort
 }) {
-  const [selected, setSelected] = useState12(-1);
+  const [selected, setSelected] = useState11(-1);
   const sorted = Object.entries(objectData).sort(([, a], [, b]) => {
     for (const [key, order] of Object.entries(
       sort || { id: "desc", _id: "desc" }
@@ -38353,7 +38344,7 @@ function TableFooter({
 }
 
 // src/table3/dialog.tsx
-import React8, { useMemo as useMemo6 } from "react";
+import React7, { useMemo as useMemo6 } from "react";
 import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 function Dialog3({
   modalRef,
@@ -38371,8 +38362,8 @@ function Dialog3({
     return (_a = modalRef.current) == null ? void 0 : _a.close();
   };
   const clonedModal = useMemo6(() => {
-    if (dialogRow && React8.isValidElement(children)) {
-      return React8.cloneElement(children, {
+    if (dialogRow && React7.isValidElement(children)) {
+      return React7.cloneElement(children, {
         key: JSON.stringify(dialogRow),
         row: dialogRow,
         show,
@@ -38426,8 +38417,8 @@ function Table3({
   sortBy,
   ...props
 }) {
-  const [handlers, setHandlers] = useState13({});
-  const [page, setPage] = useState13(1);
+  const [handlers, setHandlers] = useState12({});
+  const [page, setPage] = useState12(1);
   function dataReducer(a, b) {
     if (b == null) return {};
     if (Array.isArray(b)) {
@@ -38448,7 +38439,7 @@ function Table3({
         };
         const newHandlers = { ...handlers };
         for (let item in cc) {
-          const isReactComponent = React9.isValidElement(cc[item]);
+          const isReactComponent = React8.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 : "");
@@ -38485,9 +38476,9 @@ function Table3({
     if (!objectData) return 0;
     return maxItems ? Math.ceil(Object.keys(objectData).length / maxItems) : 1;
   }, [objectData, maxItems]);
-  const [sort, setSort] = useState13(sortBy);
+  const [sort, setSort] = useState12(sortBy);
   const modalRef = useRef5(null);
-  const [dialogRow, setDialogRow] = useState13({});
+  const [dialogRow, setDialogRow] = useState12({});
   const context = {
     objectData,
     headers,
@@ -38547,16 +38538,16 @@ function Table3({
 import { useEffect as useEffect14 } from "react";
 
 // src/table-advanced/h.table.tsx
-import React10, {
+import React9, {
   useCallback as useCallback3,
   useEffect as useEffect12,
   useMemo as useMemo10,
   useRef as useRef7,
-  useState as useState16
+  useState as useState15
 } from "react";
 
 // src/table-advanced/header.tsx
-import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef6, useState as useState14 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef6, useState as useState13 } from "react";
 import { createPortal } from "react-dom";
 
 // src/table-advanced/icons.tsx
@@ -38810,12 +38801,12 @@ function Header({
   index,
   length
 }) {
-  const [visible, setVisible] = useState14(false);
-  const [hovered, setHovered] = useState14(false);
+  const [visible, setVisible] = useState13(false);
+  const [hovered, setHovered] = useState13(false);
   const sortIndex = context.sort.findIndex((b) => b.field == header);
-  const [text, setText] = useState14("");
+  const [text, setText] = useState13("");
   const cellRef = useRef6(null);
-  const [coords, setCoords] = useState14(
+  const [coords, setCoords] = useState13(
     null
   );
   const filteredValues = useMemo8(() => {
@@ -38824,7 +38815,7 @@ function Header({
       return `${d}`.toLowerCase().includes(text.toLowerCase());
     });
   }, [context.data, header, text]);
-  const [selected, setSelected] = useState14([]);
+  const [selected, setSelected] = useState13([]);
   const hasFilter = context.filters.find((b) => b.field == header);
   useEffect10(() => {
     setSelected(filteredValues);
@@ -39174,16 +39165,16 @@ function valueFormatter({
 }
 
 // src/table-advanced/use.pagination.tsx
-import { useState as useState15, useMemo as useMemo9, useCallback as useCallback2, useEffect as useEffect11 } from "react";
+import { useState as useState14, useMemo as useMemo9, useCallback as useCallback2, useEffect as useEffect11 } from "react";
 function usePaginacion({
   total,
   tamanioPagina = 100,
   paginaInicial = 1
 }) {
-  const [totalPaginas, setTotalPaginas] = useState15(
+  const [totalPaginas, setTotalPaginas] = useState14(
     Math.max(1, Math.ceil(total / tamanioPagina))
   );
-  const [pagina, setPagina] = useState15(
+  const [pagina, setPagina] = useState14(
     Math.min(Math.max(paginaInicial, 1), totalPaginas)
   );
   const inicio = total === 0 ? 0 : (pagina - 1) * tamanioPagina + 1;
@@ -39231,9 +39222,9 @@ import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 function HTable({
   context
 }) {
-  const [isLoading, setIsloading] = useState16(false);
+  const [isLoading, setIsloading] = useState15(false);
   const { cols, headers } = context;
-  const [currentIndex, setCurrentIndex] = useState16(-1);
+  const [currentIndex, setCurrentIndex] = useState15(-1);
   const tableRef = useRef7(null);
   const modalRef = useRef7(null);
   const catDensities = { confortable: 80, compact: 30, standard: 53 };
@@ -39248,7 +39239,7 @@ function HTable({
     function resize(headers3) {
       return Object.fromEntries(headers3.map((h) => [h, getWidth(h)]));
     }
-    const [widths2, setWidths2] = useState16({});
+    const [widths2, setWidths2] = useState15({});
     const startDrag2 = useCallback3(
       (e, headerKey) => {
         var _a;
@@ -39535,7 +39526,7 @@ function HTable({
                                 context.setEditions(newEditions);
                               }
                             }
-                          ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? React10.cloneElement(context.buttons[key], {
+                          ) : ((_c = context.buttons) == null ? void 0 : _c[key]) ? React9.cloneElement(context.buttons[key], {
                             // children: context.buttons[key]?.props?.children
                             //   ? item
                             //   : undefined,
@@ -39579,7 +39570,7 @@ function HTable({
                           }) : ["number", "string"].includes(typeof item) ? valueFormatter({
                             value: item,
                             currentCoin: context.currentCoin
-                          }) : React10.isValidElement(item) ? item : JSON.stringify(item)
+                          }) : React9.isValidElement(item) ? item : JSON.stringify(item)
                         },
                         row.id + i
                       );
@@ -39676,7 +39667,7 @@ function HTable({
           "div",
           {
             className: "bg-white/40  absolute inset-0 text-black flex items-center justify-center",
-            style: { zIndex: 9999999 },
+            style: { zIndex: 10 },
             children: "Loading..."
           }
         )
@@ -39714,7 +39705,7 @@ function ModalContent({
         }
       )
     ] }),
-    React10.cloneElement(context.modal, {
+    React9.cloneElement(context.modal, {
       row: searchedData[currentIndex],
       hide
     })
@@ -39722,7 +39713,7 @@ function ModalContent({
 }
 
 // src/table-advanced/context.ts
-import { useEffect as useEffect13, useMemo as useMemo11, useReducer as useReducer3, useState as useState17 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo11, useReducer as useReducer3, useState as useState16 } from "react";
 
 // src/table-advanced/filter.reducer.ts
 var filterReducer = (acc, b) => {
@@ -39750,17 +39741,17 @@ var sortReducer = (acc, b) => {
 // src/table-advanced/context.ts
 function useContext({ onSelect }) {
   const excel = useExcel();
-  const [editions, setEditions] = useState17([]);
-  const [selected, setSelected] = useState17([]);
-  const [data, setData] = useState17([]);
+  const [editions, setEditions] = useState16([]);
+  const [selected, setSelected] = useState16([]);
+  const [data, setData] = useState16([]);
   const headers = [...new Set(data.map((b) => Object.keys(b)).flat())];
-  const [currentHeader, setCurrentHeader] = useState17(null);
+  const [currentHeader, setCurrentHeader] = useState16(null);
   const cols = headers.length;
   const [filters, setFilters] = useReducer3(
     filterReducer,
     new Array()
   );
-  const [searchBy, setSearchBy] = useState17("");
+  const [searchBy, setSearchBy] = useState16("");
   const [sort, setSort] = useReducer3(sortReducer, new Array());
   const sortedData = useMemo11(() => {
     return [...data].sort((a, b) => {
@@ -39855,15 +39846,15 @@ function TableAdvanced(tableProps) {
 }
 
 // src/tabs/index.tsx
-import React11, { useEffect as useEffect15, useState as useState19 } from "react";
+import React10, { useEffect as useEffect15, useState as useState18 } 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] = useState19(0);
-  const items = React11.Children.toArray(
+  const [index, setIndex] = useState18(0);
+  const items = React10.Children.toArray(
     children
   );
   const labels = items.map((c) => c.props.label);

package/package.json

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

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

@@ -600,7 +600,7 @@ export default function HTable({
       {isLoading && (
         <div
           className="bg-white/40  absolute inset-0 text-black flex items-center justify-center"
-          style={{ zIndex: 9999999 }}
+          style={{ zIndex: 10 }}
         >
           Loading...
         </div>

package/src/text-area/index.tsx

@@ -1,8 +1,4 @@
-import React, {
-  DetailedHTMLProps,
-  TextareaHTMLAttributes,
-  useState,
-} from "react";
+import React, { DetailedHTMLProps, TextareaHTMLAttributes } from "react";
 
 interface Props extends DetailedHTMLProps<
   TextareaHTMLAttributes<HTMLTextAreaElement>,
@@ -11,36 +7,35 @@ interface Props extends DetailedHTMLProps<
   label?: React.ReactNode;
   maxLength?: number;
 }
+
 export default function TextArea({
   label,
   className,
   maxLength,
   onChange,
-  children = "",
+  value,
   ...props
 }: Props) {
-  const [value, setValue] = useState<string>((props?.value as string) || "");
+  const currentValue = String(value ?? "");
+
   return (
     <div className="w-full relative my-3">
-      <div className="relative flex items-center border rounded bg-white ">
+      <div className="relative flex items-center border rounded bg-white">
         <textarea
           {...props}
           className={["p-1 w-full transparent", className].join(" ")}
-          value={value}
-          onChange={(e) => {
-            if (maxLength) {
-              e.target.value = e.target.value.slice(0, maxLength);
-            }
-            setValue(e.target.value);
-            onChange?.(e);
-          }}
-        ></textarea>{" "}
-        <label className="absolute -top-2.5 left-2 text-xs font-bold  px-1">
-          {label} {props?.required && <span className="text-red-500">*</span>}
+          value={currentValue}
+          maxLength={maxLength}
+          onChange={onChange}
+        />
+
+        <label className="absolute -top-2.5 left-2 text-xs font-bold px-1">
+          {label} {props.required && <span className="text-red-500">*</span>}
         </label>
+
         {maxLength && (
-          <div className=" text-xs text-gray text-right">
-            {value.length} / {maxLength}
+          <div className="text-xs text-gray text-right">
+            {currentValue.length} / {maxLength}
           </div>
         )}
       </div>