flysoft-react-ui 0.5.2 → 0.5.3

package/dist/components/utils/Dialog.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from "react";
+import { normalizeIconClass } from "./iconUtils";
 export const Dialog = ({ isOpen, title, dialogBody, dialogActions, onClose, closeOnOverlayClick = false, }) => {
     // Prevenir scroll del body cuando el dialog está abierto
     useEffect(() => {
@@ -35,7 +36,7 @@ export const Dialog = ({ isOpen, title, dialogBody, dialogActions, onClose, clos
             onClose();
         }
     };
-    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-title", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: handleOverlayClick }), _jsxs("div", { className: "relative w-auto max-w-lg min-w-[400px] bg-[var(--color-bg-default)] rounded-lg shadow-[var(--shadow-xl)] border border-[var(--color-border-default)] font-[var(--font-default)] max-h-[90vh] flex flex-col", onClick: (e) => e.stopPropagation(), style: { overflow: "visible" }, children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-default)] flex-shrink-0", children: [_jsx("h2", { id: "dialog-title", className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title }), onClose && (_jsx("button", { onClick: onClose, className: "ml-4 p-1 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] transition-colors cursor-pointer", "aria-label": "Cerrar dialog", children: _jsx("i", { className: "fa fa-times" }) }))] }), _jsx("div", { className: "px-6 py-4 flex-1 text-[var(--color-text-primary)] min-w-0", style: {
+    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-title", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: handleOverlayClick }), _jsxs("div", { className: "relative w-auto max-w-lg min-w-[400px] bg-[var(--color-bg-default)] rounded-lg shadow-[var(--shadow-xl)] border border-[var(--color-border-default)] font-[var(--font-default)] max-h-[90vh] flex flex-col", onClick: (e) => e.stopPropagation(), style: { overflow: "visible" }, children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-default)] flex-shrink-0", children: [_jsx("h2", { id: "dialog-title", className: "text-lg font-semibold text-[var(--color-text-primary)]", children: title }), onClose && (_jsx("button", { onClick: onClose, className: "ml-4 p-1 rounded-md text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] transition-colors cursor-pointer", "aria-label": "Cerrar dialog", children: _jsx("i", { className: normalizeIconClass("fa-times") }) }))] }), _jsx("div", { className: "px-6 py-4 flex-1 text-[var(--color-text-primary)] min-w-0", style: {
                             overflowY: "auto",
                             overflowX: "visible",
                             maxHeight: "calc(90vh - 200px)"

package/dist/components/utils/Filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Filter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAE7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGvE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,UAAU,EAAE,QAAQ,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,CACzE,SAAQ,eAAe;IACvB,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,UAAU,EAAE,QAAQ,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,CACzE,SAAQ,eAAe;IACvB,UAAU,EAAE,cAAc,CAAC;IAC3B,iBAAiB,EAAE,CACjB,IAAI,EAAE,MAAM,KACT,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD,uBAAuB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,MAAM,MAAM,WAAW,GACnB,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,uBAAuB,GACvB,iBAAiB,GACjB,uBAAuB,CAAC;AAE5B,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAu8BxC,CAAC"}
+{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Filter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAE7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAIvE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,UAAU,EAAE,QAAQ,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,CACzE,SAAQ,eAAe;IACvB,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,UAAU,EAAE,QAAQ,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,CACzE,SAAQ,eAAe;IACvB,UAAU,EAAE,cAAc,CAAC;IAC3B,iBAAiB,EAAE,CACjB,IAAI,EAAE,MAAM,KACT,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD,uBAAuB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,MAAM,MAAM,WAAW,GACnB,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,uBAAuB,GACvB,iBAAiB,GACjB,uBAAuB,CAAC;AAE5B,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA68BxC,CAAC"}

package/dist/components/utils/Filter.js

@@ -9,6 +9,7 @@ import { DateInput } from "../form-controls/DateInput";
 import { AutocompleteInput } from "../form-controls/AutocompleteInput";
 import { SearchSelectInput } from "../form-controls/SearchSelectInput";
 import { DataField } from "../layout/DataField";
+import { normalizeIconClass } from "./iconUtils";
 export const Filter = (props) => {
     const { paramName, label, staticOptions, inputWidth, value: propValue, onChange, hideEmpty = false, } = props;
     const filterType = props.filterType || "text";
@@ -499,7 +500,7 @@ export const Filter = (props) => {
     }
     // Contenedor tipo badge con diseño similar al Input
     // Altura ajustada para coincidir con input sm: py-1.5 (6px arriba y abajo) + text-sm (14px línea) = ~26px total
-    const badgeContainer = (_jsxs("div", { className: "inline-flex items-center gap-2 px-3 py-1.5 h-[2.1rem] rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] text-[var(--color-text-primary)] font-[var(--font-default)] cursor-pointer text-sm transition-colors", onClick: handleTogglePanel, children: [_jsx("span", { className: "text-sm min-w-[1rem]", children: getDisplayValue() || "\u00A0" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "p-0.5 hover:bg-[var(--color-bg-secondary)] rounded transition-colors flex items-center justify-center", children: _jsx("i", { className: `fa fa-chevron-down text-xs text-[var(--color-text-muted)] hover:text-[var(--color-primary)] transition-all ${isOpen ? "rotate-180" : ""}` }) }), currentValue && (_jsx("button", { onClick: handleClearFilter, className: "p-0.5 hover:bg-[var(--color-bg-secondary)] rounded transition-colors flex items-center justify-center", "aria-label": "Borrar filtro", type: "button", children: _jsx("i", { className: "fa fa-times text-xs text-[var(--color-text-muted)] hover:text-[var(--color-primary)] transition-colors" }) }))] })] }));
+    const badgeContainer = (_jsxs("div", { className: "inline-flex items-center gap-2 px-3 py-1.5 h-[2.1rem] rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-default)] text-[var(--color-text-primary)] font-[var(--font-default)] cursor-pointer text-sm transition-colors", onClick: handleTogglePanel, children: [_jsx("span", { className: "text-sm min-w-[1rem]", children: getDisplayValue() || "\u00A0" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "p-0.5 hover:bg-[var(--color-bg-secondary)] rounded transition-colors flex items-center justify-center", children: _jsx("i", { className: `${normalizeIconClass("fa-chevron-down")} text-xs text-[var(--color-text-muted)] hover:text-[var(--color-primary)] transition-all ${isOpen ? "rotate-180" : ""}` }) }), currentValue && (_jsx("button", { onClick: handleClearFilter, className: "p-0.5 hover:bg-[var(--color-bg-secondary)] rounded transition-colors flex items-center justify-center", "aria-label": "Borrar filtro", type: "button", children: _jsx("i", { className: `${normalizeIconClass("fa-times")} text-xs text-[var(--color-text-muted)] hover:text-[var(--color-primary)] transition-colors` }) }))] })] }));
     // Renderizar según el tipo de filtro
     if (filterType === "autocomplete") {
         return (_jsxs("div", { ref: containerRef, className: "relative inline-block", children: [_jsx(DataField, { label: label, value: badgeContainer, className: "inline-block" }), isOpen &&

package/dist/components/utils/Loader.js

@@ -3,7 +3,7 @@ import React from "react";
 import { useTheme } from "../../contexts/ThemeContext";
 export const Loader = ({ isLoading = false, text, children, keepContentWhileLoading, contentLoadingNode, overlayClassName, }) => {
     const { theme } = useTheme();
-    const displayText = text || "Cargando...";
+    const displayText = text;
     // Clases por defecto del overlay (negro semitransparente con blur)
     const defaultOverlayClasses = "bg-black/50 backdrop-blur-sm";
     // Combinar clases por defecto con las personalizadas

package/dist/components/utils/RoadMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoadMap.d.ts","sourceRoot":"","sources":["../../../src/components/utils/RoadMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4E1B,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9E;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgH1C,CAAC"}
+{"version":3,"file":"RoadMap.d.ts","sourceRoot":"","sources":["../../../src/components/utils/RoadMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6E1B,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9E;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgH1C,CAAC"}

package/dist/components/utils/RoadMap.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { normalizeIconClass } from "./iconUtils";
 /**
  * Helper function to convert color names to CSS values
  */
@@ -127,7 +128,7 @@ export const RoadMap = ({ stages, className = "", }) => {
                 `, style: {
                                     backgroundColor: bgColor,
                                     color: "#ffffff",
-                                }, children: stage.icon ? (_jsx("i", { className: `fa ${stage.icon} text-xs` })) : null }), !isLast && (_jsx("div", { className: "w-0.5 h-4 flex-shrink-0", style: {
+                                }, children: stage.icon ? (_jsx("i", { className: `${normalizeIconClass(stage.icon)} text-xs` })) : null }), !isLast && (_jsx("div", { className: "w-0.5 h-4 flex-shrink-0", style: {
                                     background: connectorGradient || undefined,
                                 } }))] }), _jsxs("div", { className: `
                 flex-1

package/dist/components/utils/Snackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEtE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqM5C,CAAC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAGtE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqM5C,CAAC"}

package/dist/components/utils/Snackbar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState, useRef, useCallback } from "react";
+import { normalizeIconClass } from "./iconUtils";
 export const Snackbar = ({ id, message, variant, duration = 3000, icon, iconLabel, onClose, }) => {
     const [progress, setProgress] = useState(100);
     const [isClosing, setIsClosing] = useState(false);
@@ -117,5 +118,5 @@ export const Snackbar = ({ id, message, variant, duration = 3000, icon, iconLabe
       `, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "alert", "aria-live": "polite", children: _jsxs("div", { className: `${config.bg} ${config.text} p-4 flex items-start gap-3 relative`, children: [duration > 0 && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[3px] overflow-hidden", children: _jsx("div", { className: "h-full transition-all duration-50 ease-linear", style: {
                             width: `${progress}%`,
                             backgroundColor: "#00000050",
-                        } }) })), displayIcon && (_jsx("div", { className: "flex-shrink-0 -mt-0.5", children: _jsx("i", { className: `fa ${displayIcon} text-base`, "aria-hidden": !iconLabel, "aria-label": iconLabel }) })), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("p", { className: "text-sm font-medium break-words max-w-full", children: message }) }), _jsx("button", { onClick: handleClose, className: "flex-shrink-0 ml-2 text-gray-600 hover:text-gray-800 transition-colors cursor-pointer", "aria-label": "Cerrar notificaci\u00F3n", type: "button", children: _jsx("i", { className: "fa fa-times text-sm" }) })] }) }));
+                        } }) })), displayIcon && (_jsx("div", { className: "flex-shrink-0 -mt-0.5", children: _jsx("i", { className: `${normalizeIconClass(displayIcon)} text-base`, "aria-hidden": !iconLabel, "aria-label": iconLabel }) })), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("p", { className: "text-sm font-medium break-words max-w-full", children: message }) }), _jsx("button", { onClick: handleClose, className: "flex-shrink-0 ml-2 text-gray-600 hover:text-gray-800 transition-colors cursor-pointer", "aria-label": "Cerrar notificaci\u00F3n", type: "button", children: _jsx("i", { className: `${normalizeIconClass("fa-times")} text-sm` }) })] }) }));
 };

package/dist/components/utils/iconUtils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Normaliza las clases de iconos de FontAwesome para usar el estilo light (fal) por defecto
+ *
+ * Convierte:
+ * - "fa fa-user" -> "fal fa-user"
+ * - "fas fa-user" -> "fal fa-user"
+ * - "far fa-user" -> "fal fa-user"
+ * - "fal fa-user" -> "fal fa-user" (ya es light, se mantiene)
+ * - "fa-user" -> "fal fa-user"
+ * - "fa-spinner fa-spin" -> "fal fa-spinner fa-spin" (preserva clases adicionales)
+ *
+ * @param iconClass - La clase del icono a normalizar
+ * @returns La clase del icono normalizada con el estilo light (fal)
+ */
+export declare function normalizeIconClass(iconClass: string | undefined): string;
+//# sourceMappingURL=iconUtils.d.ts.map

package/dist/components/utils/iconUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconUtils.d.ts","sourceRoot":"","sources":["../../../src/components/utils/iconUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CA6BxE"}

package/dist/components/utils/iconUtils.js

@@ -0,0 +1,40 @@
+/**
+ * Normaliza las clases de iconos de FontAwesome para usar el estilo light (fal) por defecto
+ *
+ * Convierte:
+ * - "fa fa-user" -> "fal fa-user"
+ * - "fas fa-user" -> "fal fa-user"
+ * - "far fa-user" -> "fal fa-user"
+ * - "fal fa-user" -> "fal fa-user" (ya es light, se mantiene)
+ * - "fa-user" -> "fal fa-user"
+ * - "fa-spinner fa-spin" -> "fal fa-spinner fa-spin" (preserva clases adicionales)
+ *
+ * @param iconClass - La clase del icono a normalizar
+ * @returns La clase del icono normalizada con el estilo light (fal)
+ */
+export function normalizeIconClass(iconClass) {
+    if (!iconClass)
+        return "";
+    // Dividir las clases por espacios
+    const classes = iconClass.trim().split(/\s+/);
+    // Buscar y reemplazar el prefijo de estilo
+    const stylePrefixes = ["fas", "far", "fal", "fab"];
+    let hasStylePrefix = false;
+    const normalizedClasses = classes.map((cls) => {
+        // Si es un prefijo de estilo, reemplazarlo por "fal"
+        if (stylePrefixes.includes(cls)) {
+            hasStylePrefix = true;
+            return "fal";
+        }
+        return cls;
+    });
+    // Si no tenía prefijo de estilo y la primera clase empieza con "fa-", agregar "fal" al inicio
+    if (!hasStylePrefix && classes[0]?.startsWith("fa-")) {
+        normalizedClasses.unshift("fal");
+    }
+    // Si no tenía prefijo de estilo y ninguna clase es un prefijo, agregar "fal" al inicio
+    else if (!hasStylePrefix && !classes.some(cls => stylePrefixes.includes(cls))) {
+        normalizedClasses.unshift("fal");
+    }
+    return normalizedClasses.join(" ");
+}

package/dist/contexts/ListCrudContext.d.ts

@@ -9,21 +9,42 @@ export interface ListCrudContextType<T> {
     isLoading: boolean;
     pagination: ReactNode;
     params: Record<string, any>;
-    refetch: (params?: Record<string, any>) => Promise<void>;
-    createItem: (item: T) => Promise<T | undefined>;
-    deleteItem: (item: T) => Promise<void>;
+    fetchItems: {
+        execute: (params?: Record<string, any>) => Promise<void>;
+        isLoading: boolean;
+    };
+    createItem: {
+        execute: (item: T) => Promise<T | undefined | null>;
+        isLoading: boolean;
+    };
+    updateItem: {
+        execute: (item: T) => Promise<T | undefined | null>;
+        isLoading: boolean;
+    };
+    deleteItem: {
+        execute: (item: T) => Promise<void>;
+        isLoading: boolean;
+    };
 }
 export declare const ListCrudContext: import("react").Context<ListCrudContextType<any> | undefined>;
+export interface PromiseWithOptions<TResult, TParams extends any[] = []> {
+    execute: (...params: TParams) => Promise<TResult>;
+    successMessage?: string;
+    errorMessage?: string;
+}
 interface ListCrudProviderProps<T> {
     children: ReactNode;
-    getPromise: (params?: Record<string, any>) => Promise<Array<T> | PaginationInterface<T> | undefined>;
-    postPromise?: (item: T) => Promise<T | undefined>;
-    deletePromise?: (item: T) => Promise<void>;
+    getPromise: ((params?: Record<string, any>) => Promise<Array<T> | PaginationInterface<T> | undefined>) | PromiseWithOptions<Array<T> | PaginationInterface<T> | undefined, [
+        params?: Record<string, any>
+    ]>;
+    postPromise?: ((item: T) => Promise<T | undefined | null>) | PromiseWithOptions<T | undefined | null, [item: T]>;
+    putPromise?: ((item: T) => Promise<T | undefined | null>) | PromiseWithOptions<T | undefined | null, [item: T]>;
+    deletePromise?: ((item: T) => Promise<void>) | PromiseWithOptions<void, [item: T]>;
     urlParams?: Array<string>;
     limit?: number;
     pageParam?: string;
 }
-export declare function ListCrudProvider<T>({ children, getPromise, postPromise, deletePromise, limit, pageParam, urlParams, }: ListCrudProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ListCrudProvider<T>({ children, getPromise, postPromise, putPromise, deletePromise, limit, pageParam, urlParams, }: ListCrudProviderProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function useListCrud<T>(): ListCrudContextType<T>;
 export {};
 //# sourceMappingURL=ListCrudContext.d.ts.map

package/dist/contexts/ListCrudContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListCrudContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ListCrudContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,SAAS,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAChD,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC;AAQD,eAAO,MAAM,eAAe,+DAA+B,CAAC;AAE5D,UAAU,qBAAqB,CAAC,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,EAAE,CACV,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KACzB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAC5D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,QAAQ,EACR,UAAU,EACV,WAAW,EACX,aAAa,EACb,KAAU,EACV,SAAoB,EACpB,SAAc,GACf,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAwP1B;AAID,wBAAgB,WAAW,CAAC,CAAC,KAAK,mBAAmB,CAAC,CAAC,CAAC,CAMvD"}
+{"version":3,"file":"ListCrudContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ListCrudContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,SAAS,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;QACzD,SAAS,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC;QACpD,SAAS,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC;QACpD,SAAS,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;QACpC,SAAS,EAAE,OAAO,CAAC;KACpB,CAAC;CACH;AAQD,eAAO,MAAM,eAAe,+DAA+B,CAAC;AAE5D,MAAM,WAAW,kBAAkB,CAAC,OAAO,EAAE,OAAO,SAAS,GAAG,EAAE,GAAG,EAAE;IACrE,OAAO,EAAE,CAAC,GAAG,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,qBAAqB,CAAC,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,EACN,CAAC,CACC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KACzB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,GAC5D,kBAAkB,CAChB,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,GAAG,SAAS,EAC7C;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;KAAC,CAC/B,CAAC;IACN,WAAW,CAAC,EACR,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC,GAC5C,kBAAkB,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;IACxD,UAAU,CAAC,EACP,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC,GAC5C,kBAAkB,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EACV,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,GAC5B,kBAAkB,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACV,aAAa,EACb,KAAU,EACV,SAAoB,EACpB,SAAc,GACf,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAqT1B;AAID,wBAAgB,WAAW,CAAC,CAAC,KAAK,mBAAmB,CAAC,CAAC,CAAC,CAMvD"}

package/dist/contexts/ListCrudContext.js

@@ -9,29 +9,74 @@ const createListCrudContext = () => {
 // Crear el contexto con un tipo genérico por defecto
 // Los usuarios pueden crear su propio contexto con su tipo específico
 export const ListCrudContext = createListCrudContext();
-export function ListCrudProvider({ children, getPromise, postPromise, deletePromise, limit = 15, pageParam = "pagina", urlParams = [], }) {
+export function ListCrudProvider({ children, getPromise, postPromise, putPromise, deletePromise, limit = 15, pageParam = "pagina", urlParams = [], }) {
     const [list, setList] = useState(undefined);
     const [page, setPage] = useState(1);
     const [pages, setPages] = useState(1);
     const [total, setTotal] = useState(0);
-    const getPromiseRef = useRef(getPromise);
     const [searchParams, setSearchParams] = useSearchParams();
     const lastFetchParamsRef = useRef("");
-    // Hooks para manejar las peticiones asíncronas
-    // fetchDataAsync sin mensaje para cargas automáticas
-    const fetchDataAsync = useAsyncRequest();
-    // fetchDataAsyncManual con mensaje para refetch manual
-    const fetchDataAsyncManual = useAsyncRequest({
-        successMessage: "Datos cargados correctamente",
+    // Extraer funciones execute y opciones de las promises
+    const getPromiseExecute = typeof getPromise === "function" ? getPromise : getPromise.execute;
+    const getPromiseSuccessMessage = typeof getPromise === "function" ? undefined : getPromise.successMessage;
+    const getPromiseErrorMessage = typeof getPromise === "function" ? undefined : getPromise.errorMessage;
+    const postPromiseExecute = postPromise
+        ? typeof postPromise === "function"
+            ? postPromise
+            : postPromise.execute
+        : undefined;
+    const postPromiseSuccessMessage = postPromise && typeof postPromise === "object"
+        ? postPromise.successMessage
+        : undefined;
+    const postPromiseErrorMessage = postPromise && typeof postPromise === "object"
+        ? postPromise.errorMessage
+        : undefined;
+    const putPromiseExecute = putPromise
+        ? typeof putPromise === "function"
+            ? putPromise
+            : putPromise.execute
+        : undefined;
+    const putPromiseSuccessMessage = putPromise && typeof putPromise === "object"
+        ? putPromise.successMessage
+        : undefined;
+    const putPromiseErrorMessage = putPromise && typeof putPromise === "object"
+        ? putPromise.errorMessage
+        : undefined;
+    const deletePromiseExecute = deletePromise
+        ? typeof deletePromise === "function"
+            ? deletePromise
+            : deletePromise.execute
+        : undefined;
+    const deletePromiseSuccessMessage = deletePromise && typeof deletePromise === "object"
+        ? deletePromise.successMessage
+        : undefined;
+    const deletePromiseErrorMessage = deletePromise && typeof deletePromise === "object"
+        ? deletePromise.errorMessage
+        : undefined;
+    const getPromiseRef = useRef(getPromiseExecute);
+    // Hooks para manejar las peticiones asíncronas con mensajes opcionales
+    const fetchDataAsync = useAsyncRequest({
+        successMessage: getPromiseSuccessMessage,
+        errorMessage: getPromiseErrorMessage,
     });
-    const createItemAsync = useAsyncRequest();
-    const deleteItemAsync = useAsyncRequest();
-    // El isLoading del contexto combina ambos hooks de fetchData
-    const isLoading = fetchDataAsync.isLoading || fetchDataAsyncManual.isLoading;
+    const createItemAsync = useAsyncRequest({
+        successMessage: postPromiseSuccessMessage,
+        errorMessage: postPromiseErrorMessage,
+    });
+    const updateItemAsync = useAsyncRequest({
+        successMessage: putPromiseSuccessMessage,
+        errorMessage: putPromiseErrorMessage,
+    });
+    const deleteItemAsync = useAsyncRequest({
+        successMessage: deletePromiseSuccessMessage,
+        errorMessage: deletePromiseErrorMessage,
+    });
+    // El isLoading del contexto usa el hook de fetchData
+    const isLoading = fetchDataAsync.isLoading;
     // Actualizar la referencia cuando cambie getPromise
     useEffect(() => {
-        getPromiseRef.current = getPromise;
-    }, [getPromise]);
+        getPromiseRef.current = getPromiseExecute;
+    }, [getPromiseExecute]);
     // Función para obtener los parámetros de la URL
     const getUrlParams = useCallback(() => {
         const params = { limit };
@@ -53,35 +98,15 @@ export function ListCrudProvider({ children, getPromise, postPromise, deleteProm
         return params;
     }, [searchParams, pageParam, urlParams, limit]);
     // Función para obtener los datos
-    const fetchData = useCallback(async (params, showSuccessMessage = false) => {
-        const asyncRequest = showSuccessMessage
-            ? fetchDataAsyncManual
-            : fetchDataAsync;
+    const fetchData = useCallback(async (params) => {
         // Obtener los parámetros que se van a usar
         const requestParams = params || getUrlParams();
         // Crear una clave única para estos parámetros
-        const paramsKey = JSON.stringify({
-            ...requestParams,
-            showSuccessMessage,
-        });
-        // Evitar ejecuciones duplicadas con los mismos parámetros
-        if (!showSuccessMessage && lastFetchParamsRef.current === paramsKey) {
-            console.log("Skipping duplicate fetchData call");
-            return;
-        }
+        const paramsKey = JSON.stringify(requestParams);
         lastFetchParamsRef.current = paramsKey;
-        console.log("fetchData called", {
-            showSuccessMessage,
-            isLoading: asyncRequest.isLoading,
-            params: requestParams,
-        });
-        const result = await asyncRequest.execute(async () => {
-            console.log("Executing promise with params:", requestParams);
-            const promiseResult = await getPromiseRef.current(requestParams);
-            console.log("Promise result:", promiseResult);
-            return promiseResult;
+        const result = await fetchDataAsync.execute(async () => {
+            return await getPromiseRef.current(requestParams);
         });
-        console.log("fetchData result:", result);
         // Solo procesar el resultado si no es undefined (undefined significa error)
         if (result !== undefined) {
             if (result && typeof result === "object" && "list" in result) {
@@ -107,10 +132,7 @@ export function ListCrudProvider({ children, getPromise, postPromise, deleteProm
                 setTotal(0);
             }
         }
-        else {
-            console.log("Result is undefined, not processing");
-        }
-    }, [getUrlParams, limit, fetchDataAsync, fetchDataAsyncManual]);
+    }, [getUrlParams, limit, fetchDataAsync]);
     // Ref para almacenar los valores anteriores de urlParams
     const prevUrlParamsValuesRef = useRef({});
     // Memoizar los valores actuales de los urlParams
@@ -128,27 +150,36 @@ export function ListCrudProvider({ children, getPromise, postPromise, deleteProm
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [searchParams, pageParam, urlParamsKey, limit, urlParams]);
     // Función para recargar los datos
-    const refetch = useCallback(async (params) => {
-        await fetchData(params, true); // Mostrar mensaje de éxito en refetch manual
+    const fetchItemsExecute = useCallback(async (params) => {
+        await fetchData(params);
     }, [fetchData]);
     // Función para crear un item
-    const createItem = useCallback(async (item) => {
-        if (!postPromise) {
+    const createItemExecute = useCallback(async (item) => {
+        if (!postPromiseExecute) {
             throw new Error("postPromise is not defined. Please provide postPromise to ListCrudProvider.");
         }
         return await createItemAsync.execute(async () => {
-            return await postPromise(item);
+            return await postPromiseExecute(item);
+        });
+    }, [postPromiseExecute, createItemAsync]);
+    // Función para actualizar un item
+    const updateItemExecute = useCallback(async (item) => {
+        if (!putPromiseExecute) {
+            throw new Error("putPromise is not defined. Please provide putPromise to ListCrudProvider.");
+        }
+        return await updateItemAsync.execute(async () => {
+            return await putPromiseExecute(item);
         });
-    }, [postPromise, createItemAsync]);
+    }, [putPromiseExecute, updateItemAsync]);
     // Función para eliminar un item
-    const deleteItem = useCallback(async (item) => {
-        if (!deletePromise) {
+    const deleteItemExecute = useCallback(async (item) => {
+        if (!deletePromiseExecute) {
             throw new Error("deletePromise is not defined. Please provide deletePromise to ListCrudProvider.");
         }
         await deleteItemAsync.execute(async () => {
-            await deletePromise(item);
+            await deletePromiseExecute(item);
         });
-    }, [deletePromise, deleteItemAsync]);
+    }, [deletePromiseExecute, deleteItemAsync]);
     // useEffect para resetear pageParam a 1 cuando cambien los urlParams
     useEffect(() => {
         // Verificar si hay algún urlParam definido
@@ -182,7 +213,7 @@ export function ListCrudProvider({ children, getPromise, postPromise, deleteProm
         }, 0);
         return () => clearTimeout(timeoutId);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getPromise, searchParams, pageParam, urlParamsKey]);
+    }, [getPromiseExecute, searchParams, pageParam, urlParamsKey]);
     const value = {
         list,
         page,
@@ -191,9 +222,22 @@ export function ListCrudProvider({ children, getPromise, postPromise, deleteProm
         limit,
         isLoading,
         params: currentParams,
-        refetch,
-        createItem,
-        deleteItem,
+        fetchItems: {
+            execute: fetchItemsExecute,
+            isLoading: fetchDataAsync.isLoading,
+        },
+        createItem: {
+            execute: createItemExecute,
+            isLoading: createItemAsync.isLoading,
+        },
+        updateItem: {
+            execute: updateItemExecute,
+            isLoading: updateItemAsync.isLoading,
+        },
+        deleteItem: {
+            execute: deleteItemExecute,
+            isLoading: deleteItemAsync.isLoading,
+        },
         pagination: (_jsx(Pagination, { page: page, pages: pages, total: total, fieldName: pageParam, isLoading: isLoading })),
     };
     return (_jsx(ListCrudContext.Provider, { value: value, children: children }));

package/dist/docs/AccordionDocs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const AccordionDocs: React.FC;
+export default AccordionDocs;
+//# sourceMappingURL=AccordionDocs.d.ts.map

package/dist/docs/AccordionDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionDocs.d.ts","sourceRoot":"","sources":["../../src/docs/AccordionDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAwuB1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/docs/AccordionDocs.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Accordion, Card, Badge, Input } from "../index";
+const AccordionDocs = () => {
+    const [openAccordions, setOpenAccordions] = useState(new Set());
+    const handleToggle = (id, isOpen) => {
+        const newSet = new Set(openAccordions);
+        if (isOpen) {
+            newSet.add(id);
+        }
+        else {
+            newSet.delete(id);
+        }
+        setOpenAccordions(newSet);
+    };
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Accordion - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente Accordion soporta tres variantes visuales: default, elevated (con sombra) y outlined (con borde destacado)." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { variant: "default", title: "Default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con variante por defecto." }) }), _jsx(Accordion, { variant: "elevated", title: "Elevated", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con sombra elevada." }) }), _jsx(Accordion, { variant: "outlined", title: "Outlined", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con borde destacado." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente Accordion permite mostrar contenido colapsable con una animaci\u00F3n suave de expandir/contraer. Haz clic en el header para abrir o cerrar el contenido." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Informaci\u00F3n General", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este es un accordion b\u00E1sico sin icono ni elementos adicionales. El contenido se muestra cuando el accordion est\u00E1 abierto y se oculta con una animaci\u00F3n suave cuando est\u00E1 cerrado." }) }), _jsx(Accordion, { title: "Detalles del Producto", defaultOpen: true, children: _jsxs("div", { className: "space-y-2", children: [_jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este accordion est\u00E1 abierto por defecto usando la propiedad", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "defaultOpen" }), "."] }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("li", { children: "Caracter\u00EDstica 1: Descripci\u00F3n detallada" }), _jsx("li", { children: "Caracter\u00EDstica 2: M\u00E1s informaci\u00F3n" }), _jsx("li", { children: "Caracter\u00EDstica 3: Detalles adicionales" })] })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con icono" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes agregar un icono FontAwesome 5 del lado izquierdo del t\u00EDtulo usando la propiedad ", _jsx("code", { children: "icon" }), "."] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Configuraci\u00F3n", icon: "fa-cog", children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion tiene un icono de configuraci\u00F3n en el lado izquierdo." }), _jsx(Input, { label: "Nombre", placeholder: "Ingresa un nombre" }), _jsx(Input, { label: "Email", type: "email", placeholder: "correo@ejemplo.com" })] }) }), _jsx(Accordion, { title: "Informaci\u00F3n de Usuario", icon: "fa-user", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con icono de usuario. Los iconos ayudan a identificar visualmente el tipo de contenido." }) }), _jsx(Accordion, { title: "Notificaciones", icon: "fa-bell", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con icono de notificaciones. Puedes usar cualquier icono de FontAwesome 5." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con rightNode" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La propiedad ", _jsx("code", { children: "rightNode" }), " permite agregar contenido personalizado del lado derecho, antes del chevron. \u00DAtil para badges, botones peque\u00F1os, contadores, etc."] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Mensajes", icon: "fa-envelope", rightNode: _jsx(Badge, { variant: "info", children: "3" }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion muestra un badge con el n\u00FAmero de mensajes no le\u00EDdos en el lado derecho." }) }), _jsx(Accordion, { title: "Tareas Pendientes", icon: "fa-tasks", rightNode: _jsx(Badge, { variant: "warning", children: "5" }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con badge de tareas pendientes. El rightNode puede contener cualquier ReactNode." }) }), _jsx(Accordion, { title: "Configuraci\u00F3n Avanzada", icon: "fa-sliders-h", rightNode: _jsxs("div", { className: "flex items-center gap-2 px-2 py-1 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] cursor-pointer rounded transition-colors", onClick: (e) => {
+                                                e.stopPropagation();
+                                                console.log("Editar configuración");
+                                            }, children: [_jsx("i", { className: "fal fa-edit" }), _jsx("span", { children: "Editar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion incluye un elemento de acci\u00F3n en el rightNode, permitiendo acciones r\u00E1pidas sin abrir el accordion. Nota: No uses componentes Button dentro de rightNode ya que causar\u00EDa un error de anidaci\u00F3n de botones." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con callback onToggle" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La propiedad ", _jsx("code", { children: "onToggle" }), " permite ejecutar una funci\u00F3n cuando el accordion se abre o cierra. \u00DAtil para sincronizar estado externo o realizar acciones al cambiar el estado."] }), _jsxs("div", { className: "space-y-3", children: [openAccordions.size > 0 && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Accordions abiertos:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: Array.from(openAccordions).join(", ") || "Ninguno" })] }) })), _jsx(Accordion, { title: "Secci\u00F3n 1", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion1", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion notifica cuando se abre o cierra mediante el callback onToggle." }) }), _jsx(Accordion, { title: "Secci\u00F3n 2", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion2", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Otro accordion que tambi\u00E9n notifica su estado mediante onToggle." }) }), _jsx(Accordion, { title: "Secci\u00F3n 3", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion3", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Un tercer accordion para demostrar el seguimiento de m\u00FAltiples accordions." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo completo con m\u00FAltiples accordions" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo pr\u00E1ctico usando m\u00FAltiples accordions para organizar informaci\u00F3n en secciones colapsables." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Informaci\u00F3n Personal", icon: "fa-user-circle", rightNode: _jsx(Badge, { variant: "success", children: "Completo" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre", placeholder: "Juan", icon: "fa-user" }), _jsx(Input, { label: "Apellido", placeholder: "P\u00E9rez", icon: "fa-user" }), _jsx(Input, { label: "Fecha de Nacimiento", type: "date", icon: "fa-calendar" })] }) }), _jsx(Accordion, { title: "Informaci\u00F3n de Contacto", icon: "fa-address-book", rightNode: _jsx(Badge, { variant: "warning", children: "Pendiente" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Email", type: "email", placeholder: "juan@ejemplo.com", icon: "fa-envelope" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }) }), _jsx(Accordion, { title: "Configuraci\u00F3n de Seguridad", icon: "fa-shield-alt", rightNode: _jsx(Badge, { variant: "info", children: "Recomendado" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Contrase\u00F1a Actual", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-lock" }), _jsx(Input, { label: "Nueva Contrase\u00F1a", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-key" })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Background Personalizado" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente detecta autom\u00E1ticamente las clases de background (bg-*) desde la prop className y las aplica al background del accordion. Las dem\u00E1s clases se aplican normalmente al contenedor." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Accordion con bg-blue-50", className: "bg-blue-50", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con background personalizado usando clases de Tailwind." }) }), _jsx(Accordion, { title: "Accordion con bg-gradient", className: "bg-gradient-to-br from-purple-100 to-pink-100", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con gradiente personalizado." }) }), _jsx(Accordion, { title: "Accordion con bg y otras clases", className: "bg-green-50", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes combinar clases de background con otras clases de Tailwind." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Title como ReactNode" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El t\u00EDtulo puede ser un ReactNode, permitiendo incluir contenido personalizado como badges, iconos adicionales, o cualquier otro componente." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Proyecto Importante" }), _jsx(Badge, { variant: "danger", size: "sm", children: "Urgente" })] }), icon: "fa-project-diagram", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion tiene un t\u00EDtulo personalizado con un badge integrado." }) }), _jsx(Accordion, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-star text-yellow-500" }), _jsx("span", { children: "Favoritos" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "T\u00EDtulo personalizado con un icono de estrella integrado." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Animaci\u00F3n suave:" }), " El contenido se expande y contrae con una animaci\u00F3n CSS de 300ms."] }), _jsxs("li", { children: [_jsx("strong", { children: "Icono opcional:" }), " Soporta iconos FontAwesome 5 del lado izquierdo del t\u00EDtulo."] }), _jsxs("li", { children: [_jsx("strong", { children: "RightNode:" }), " Permite agregar contenido personalizado (badges, botones, etc.) del lado derecho antes del chevron."] }), _jsxs("li", { children: [_jsx("strong", { children: "Estado controlado:" }), " Soporta estado controlado mediante ", _jsx("code", { children: "defaultOpen" }), " y", " ", _jsx("code", { children: "onToggle" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Title flexible:" }), " El t\u00EDtulo puede ser un string o un ReactNode, permitiendo contenido personalizado."] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Incluye atributos ARIA para mejor accesibilidad."] }), _jsxs("li", { children: [_jsx("strong", { children: "Chevron din\u00E1mico:" }), " El chevron cambia autom\u00E1ticamente entre arriba (abierto) y abajo (cerrado)."] }), _jsxs("li", { children: [_jsx("strong", { children: "Variantes:" }), " Soporta tres variantes: default, elevated (con sombra) y outlined (con borde destacado)."] }), _jsxs("li", { children: [_jsx("strong", { children: "Background personalizado:" }), " El componente detecta autom\u00E1ticamente las clases de background (bg-*) y las aplica correctamente."] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Requerido" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "title" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string | ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "T\u00EDtulo del accordion. Puede ser un string o un ReactNode." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "children" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido que se muestra cuando el accordion est\u00E1 abierto." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "icon" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Clase de icono FontAwesome 5 (ej: \"fa-user\", \"fa-cog\") que se muestra del lado izquierdo del t\u00EDtulo." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "rightNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido personalizado que se muestra del lado derecho, antes del chevron. \u00DAtil para badges, botones, contadores, etc." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "defaultOpen" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "boolean" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Si es true, el accordion estar\u00E1 abierto por defecto. Por defecto es false." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "onToggle" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(isOpen: boolean) => void" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Callback que se ejecuta cuando el accordion se abre o cierra. Recibe un boolean indicando si est\u00E1 abierto (true) o cerrado (false)." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "variant" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\"default\" | \"elevated\" | \"outlined\"" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Variante visual del accordion. Por defecto es \"default\"." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "className" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Clases CSS adicionales. Las clases de background (bg-*) se aplican autom\u00E1ticamente al background del accordion." })] })] })] }) })] })] }) }) }));
+};
+export default AccordionDocs;

package/dist/docs/AuthDocs.tsx/AuthDocsContent.js

@@ -13,12 +13,10 @@ export const AuthDocsContent = () => {
     // Sección de documentación de interfaces (siempre visible)
     const InterfacesDocumentation = () => (_jsx("div", { className: "space-y-4 mb-6", children: _jsx(Card, { title: "Interfaces de TypeScript", subtitle: "Estructuras de datos utilizadas por el AuthContext", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "AuthTokenInterface" })] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Define la estructura de los datos del token de autenticaci\u00F3n devueltos por el servicio de autenticaci\u00F3n." }), _jsx("div", { className: "bg-[var(--color-bg-secondary)] rounded-lg p-4 border border-[var(--color-border-default)]", children: _jsxs("div", { className: "space-y-2", children: [_jsx(DataField, { label: "accessToken", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Token de acceso utilizado para autenticar las solicitudes HTTP." }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "tokenType", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Tipo de token (generalmente \"Bearer\")." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "expires", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Fecha de expiraci\u00F3n del token en formato ISO 8601." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "refreshToken", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Token de actualizaci\u00F3n utilizado para obtener un nuevo token de acceso cuando el actual expira." })] })] }) })] }), _jsxs("div", { className: "pt-4 border-t border-[var(--color-border-default)]", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Badge, { variant: "primary", icon: "fa-code", size: "sm", children: "Interface" }), _jsx("code", { className: "text-sm font-mono text-[var(--color-primary)] font-semibold", children: "AuthContextUserInterface" })] }), _jsx("p", { className: "text-sm text-[var(--color-text-secondary)] mb-3", children: "Define la estructura de los datos del usuario autenticado que se almacenan en el contexto." }), _jsx("div", { className: "bg-[var(--color-bg-secondary)] rounded-lg p-4 border border-[var(--color-border-default)]", children: _jsxs("div", { className: "space-y-2", children: [_jsx(DataField, { label: "id", value: _jsx("span", { className: "text-xs font-mono", children: "number | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Identificador \u00FAnico del usuario." }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "name", value: _jsx("span", { className: "text-xs font-mono", children: "string | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Nombre del usuario." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "aditionalData", value: _jsx("span", { className: "text-xs font-mono", children: "any | undefined" }) }), _jsx("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: "Objeto que puede contener datos adicionales del usuario (roles, permisos, email, etc.). Es flexible y puede adaptarse a las necesidades espec\u00EDficas de cada aplicaci\u00F3n." })] }), _jsxs("div", { className: "pt-2 border-t border-[var(--color-border-default)]", children: [_jsx(DataField, { label: "token", value: _jsx("span", { className: "text-xs font-mono", children: "AuthTokenInterface | undefined" }) }), _jsxs("p", { className: "text-xs text-[var(--color-text-secondary)] ml-2", children: ["Objeto de token que contiene el", " ", _jsx("code", { className: "text-xs bg-white/50 px-1 rounded", children: "AuthTokenInterface" }), " ", "con la informaci\u00F3n de autenticaci\u00F3n."] })] })] }) })] })] }) }) }));
     if (isLoading) {
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { children: _jsx("div", { className: "flex items-center justify-center py-8", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("i", { className: "fa fa-spinner fa-spin text-[var(--color-primary)] text-xl" }), _jsx("span", { className: "text-[var(--color-text-secondary)]", children: "Iniciando sesi\u00F3n..." })] }) }) })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { children: _jsx("div", { className: "flex items-center justify-center py-8", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("i", { className: "fal fa-spinner fa-spin text-[var(--color-primary)] text-xl" }), _jsx("span", { className: "text-[var(--color-text-secondary)]", children: "Iniciando sesi\u00F3n..." })] }) }) })] }));
     }
     if (isAuthenticated && user) {
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Sesi\u00F3n Activa", subtitle: "Informaci\u00F3n del usuario autenticado", headerActions: () => [
-                        _jsx(Badge, { variant: "success", icon: "fa-check-circle", iconPosition: "left", children: "Autenticado" }),
-                    ], children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "ID de Usuario", value: user.id }), _jsx(DataField, { label: "Nombre", value: user.name || "No disponible" })] }), user.aditionalData && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Datos Adicionales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [user.aditionalData.role && (_jsx(DataField, { label: "Rol", value: _jsx(Badge, { variant: "primary", icon: "fa-user-shield", children: user.aditionalData.role }) })), user.aditionalData.email && (_jsx(DataField, { label: "Email", value: user.aditionalData.email })), user.aditionalData.createdAt && (_jsx(DataField, { label: "Fecha de Creaci\u00F3n", value: new Date(user.aditionalData.createdAt).toLocaleString() })), user.aditionalData.permissions && (_jsx(DataField, { label: "Permisos", value: _jsx("div", { className: "flex flex-wrap gap-2", children: user.aditionalData.permissions.map((permission, index) => (_jsx(Badge, { variant: "info", size: "sm", icon: "fa-key", children: permission }, index))) }) }))] })] })), user.token && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Informaci\u00F3n del Token" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "Tipo de Token", value: _jsx(Badge, { variant: "secondary", icon: "fa-tag", children: user.token.tokenType || "Bearer" }) }), user.token.expires && (_jsx(DataField, { label: "Expira", value: new Date(user.token.expires).toLocaleString() })), user.token.accessToken && (_jsx(DataField, { label: "Access Token", value: _jsxs("code", { className: "text-xs bg-[var(--color-bg-secondary)] px-2 py-1 rounded break-all", children: [user.token.accessToken.substring(0, 30), "..."] }) }))] })] })), _jsx("div", { className: "mt-6 pt-4 border-t border-[var(--color-border-default)]", children: _jsx(Button, { variant: "outline", icon: "fa-sign-out-alt", iconPosition: "left", onClick: handleLogout, className: "w-full md:w-auto", children: "Cerrar Sesi\u00F3n" }) })] }) })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Sesi\u00F3n Activa", subtitle: "Informaci\u00F3n del usuario autenticado", headerActions: _jsx(Badge, { variant: "success", icon: "fa-check-circle", iconPosition: "left", children: "Autenticado" }), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "ID de Usuario", value: user.id }), _jsx(DataField, { label: "Nombre", value: user.name || "No disponible" })] }), user.aditionalData && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Datos Adicionales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [user.aditionalData.role && (_jsx(DataField, { label: "Rol", value: _jsx(Badge, { variant: "primary", icon: "fa-user-shield", children: user.aditionalData.role }) })), user.aditionalData.email && (_jsx(DataField, { label: "Email", value: user.aditionalData.email })), user.aditionalData.createdAt && (_jsx(DataField, { label: "Fecha de Creaci\u00F3n", value: new Date(user.aditionalData.createdAt).toLocaleString() })), user.aditionalData.permissions && (_jsx(DataField, { label: "Permisos", value: _jsx("div", { className: "flex flex-wrap gap-2", children: user.aditionalData.permissions.map((permission, index) => (_jsx(Badge, { variant: "info", size: "sm", icon: "fa-key", children: permission }, index))) }) }))] })] })), user.token && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Informaci\u00F3n del Token" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "Tipo de Token", value: _jsx(Badge, { variant: "secondary", icon: "fa-tag", children: user.token.tokenType || "Bearer" }) }), user.token.expires && (_jsx(DataField, { label: "Expira", value: new Date(user.token.expires).toLocaleString() })), user.token.accessToken && (_jsx(DataField, { label: "Access Token", value: _jsxs("code", { className: "text-xs bg-[var(--color-bg-secondary)] px-2 py-1 rounded break-all", children: [user.token.accessToken.substring(0, 30), "..."] }) }))] })] })), _jsx("div", { className: "mt-6 pt-4 border-t border-[var(--color-border-default)]", children: _jsx(Button, { variant: "outline", icon: "fa-sign-out-alt", iconPosition: "left", onClick: handleLogout, className: "w-full md:w-auto", children: "Cerrar Sesi\u00F3n" }) })] }) })] }));
     }
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Autenticaci\u00F3n", subtitle: "Inicia sesi\u00F3n para ver el AuthContext en acci\u00F3n", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "bg-[var(--color-info-light)] border border-[var(--color-info)] rounded-lg p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("i", { className: "fa fa-info-circle text-[var(--color-info)] mt-1" }), _jsx("div", { className: "flex-1", children: _jsxs("p", { className: "text-sm text-[var(--color-text-primary)]", children: ["Esta es una demostraci\u00F3n del", " ", _jsx("code", { className: "text-xs bg-white/50 px-1 rounded", children: "AuthContext" }), " ", "usando un servicio mock. Haz clic en el bot\u00F3n para simular un inicio de sesi\u00F3n."] }) })] }) }), _jsx("div", { className: "flex justify-center pt-4", children: _jsx(Button, { variant: "primary", size: "lg", icon: "fa-sign-in-alt", iconPosition: "left", onClick: handleLogin, children: "Iniciar Sesi\u00F3n" }) })] }) })] }));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Autenticaci\u00F3n", subtitle: "Inicia sesi\u00F3n para ver el AuthContext en acci\u00F3n", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "bg-[var(--color-info-light)] border border-[var(--color-info)] rounded-lg p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("i", { className: "fal fa-info-circle text-[var(--color-info)] mt-1" }), _jsx("div", { className: "flex-1", children: _jsxs("p", { className: "text-sm text-[var(--color-text-primary)]", children: ["Esta es una demostraci\u00F3n del", " ", _jsx("code", { className: "text-xs bg-white/50 px-1 rounded", children: "AuthContext" }), " ", "usando un servicio mock. Haz clic en el bot\u00F3n para simular un inicio de sesi\u00F3n."] }) })] }) }), _jsx("div", { className: "flex justify-center pt-4", children: _jsx(Button, { variant: "primary", size: "lg", icon: "fa-sign-in-alt", iconPosition: "left", onClick: handleLogin, children: "Iniciar Sesi\u00F3n" }) })] }) })] }));
 };