flysoft-react-ui 0.5.3 → 1.0.0

package/dist/components/{utils → layout}/DropdownMenu.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, useCallback, useMemo, } from "react";
+import { createPortal } from "react-dom";
 import { Button } from "../form-controls/Button";
 export const DropdownMenu = ({ options, onOptionSelected, renderNode, getOptionLabel, renderOption, replaceOnSingleOption = false, }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -136,10 +137,15 @@ export const DropdownMenu = ({ options, onOptionSelected, renderNode, getOptionL
     if (shouldReplace && singleOption) {
         return (_jsx("div", { onClick: () => handleOptionClick(singleOption), className: "cursor-pointer", children: renderOption ? renderOption(singleOption) : labelGetter(singleOption) }));
     }
-    return (_jsxs("div", { className: "relative inline-block", ref: triggerRef, children: [_jsx("div", { onClick: handleToggle, className: "cursor-pointer", children: renderNode ? (renderNode) : (_jsx(Button, { variant: "ghost", icon: "fa-ellipsis-h" })) }), isOpen && (_jsx("div", { ref: menuRef, className: "absolute z-[1000] bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded-md shadow-[var(--shadow-lg)] py-1 min-w-[160px] font-[var(--font-default)]", style: menuStyles, children: options.map((option, index) => {
-                    const key = String(option?.id ??
-                        labelGetter(option) ??
-                        index);
-                    return (_jsx("div", { onClick: () => handleOptionClick(option), className: "px-4 py-2 text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] cursor-pointer transition-colors flex items-center", children: renderOption ? renderOption(option) : labelGetter(option) }, key));
-                }) }))] }));
+    return (_jsxs("div", { className: "relative inline-block", ref: triggerRef, children: [_jsx("div", { onClick: handleToggle, className: "cursor-pointer", children: renderNode ? (renderNode) : (_jsx(Button, { variant: "ghost", icon: "fa-ellipsis-h" })) }), isOpen &&
+                (typeof document !== "undefined" && document.body
+                    ? createPortal(_jsx("div", { ref: menuRef, className: "fixed z-[2000] bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded-md shadow-[var(--shadow-lg)] py-1 min-w-[160px] font-[var(--font-default)]", style: menuStyles, children: options.map((option, index) => {
+                            const key = String(option?.id ??
+                                labelGetter(option) ??
+                                index);
+                            return (_jsx("div", { onClick: () => handleOptionClick(option), className: "px-4 py-2 text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] cursor-pointer transition-colors flex items-center", children: renderOption
+                                    ? renderOption(option)
+                                    : labelGetter(option) }, key));
+                        }) }), document.body)
+                    : null)] }));
 };

package/dist/components/layout/DropdownPanel.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface DropdownPanelProps {
+    renderNode?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare const DropdownPanel: ({ renderNode, children, }: DropdownPanelProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DropdownPanel.d.ts.map

package/dist/components/layout/DropdownPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownPanel.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DropdownPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,GAAI,2BAG3B,kBAAkB,4CAmLpB,CAAC"}

package/dist/components/layout/DropdownPanel.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useCallback, useMemo, } from "react";
+import { createPortal } from "react-dom";
+import { Button } from "../form-controls/Button";
+export const DropdownPanel = ({ renderNode, children, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [menuPosition, setMenuPosition] = useState("bottom");
+    const [scrollUpdate, setScrollUpdate] = useState(0);
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    // Calcular posición del menú
+    const calculatePosition = useCallback(() => {
+        if (isOpen && triggerRef.current) {
+            const triggerRect = triggerRef.current.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            // Intentar obtener la altura real del menú, o usar una estimación si no está montado aún
+            let menuHeight = 200; // valor por defecto
+            if (menuRef.current) {
+                menuHeight = menuRef.current.getBoundingClientRect().height;
+            }
+            const menuMargin = 4;
+            // Calcular espacio disponible arriba y abajo
+            const spaceBelow = viewportHeight - triggerRect.bottom - menuMargin;
+            const spaceAbove = triggerRect.top - menuMargin;
+            // Si no hay suficiente espacio abajo pero sí arriba, mostrar arriba
+            if (spaceBelow < menuHeight && spaceAbove > spaceBelow) {
+                setMenuPosition("top");
+            }
+            else {
+                setMenuPosition("bottom"); // Preferir abajo si cabe o si es el que más espacio tiene, o por defecto
+            }
+        }
+    }, [isOpen]);
+    // Recalcular posición cuando cambia isOpen (y cuando el contenido podría haber cambiado el tamaño)
+    useEffect(() => {
+        calculatePosition();
+        // Podríamos necesitar un ResizeObserver para ser más robustos si el contenido cambia
+    }, [calculatePosition]);
+    // Recalcular posición al hacer scroll o redimensionar
+    useEffect(() => {
+        if (isOpen) {
+            const handleScroll = () => {
+                calculatePosition();
+                // Forzar actualización del estilo del menú
+                setScrollUpdate((prev) => prev + 1);
+            };
+            window.addEventListener("scroll", handleScroll, true);
+            window.addEventListener("resize", handleScroll);
+            return () => {
+                window.removeEventListener("scroll", handleScroll, true);
+                window.removeEventListener("resize", handleScroll);
+            };
+        }
+    }, [isOpen, calculatePosition]);
+    // Cerrar menú al hacer click fuera
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (isOpen &&
+                triggerRef.current &&
+                menuRef.current &&
+                !triggerRef.current.contains(event.target) &&
+                !menuRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    // Cerrar menú al presionar Escape
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === "Escape" && isOpen) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+        }
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [isOpen]);
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    };
+    const menuStyles = useMemo(() => {
+        if (!isOpen || !triggerRef.current) {
+            return {};
+        }
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const menuMargin = 4;
+        // Asegurar que el menú no se salga de la pantalla horizontalmente
+        let leftPosition = triggerRect.left;
+        const menuMinWidth = 160;
+        const viewportWidth = window.innerWidth;
+        // Si el menú se sale por la derecha, ajustar la posición
+        // Nota: Como el ancho es dinámico (basado en children), idealmente deberíamos medirlo.
+        // Usaremos menuRef si está disponible o un estimado.
+        let currentMenuWidth = menuMinWidth;
+        if (menuRef.current) {
+            currentMenuWidth = menuRef.current.getBoundingClientRect().width;
+        }
+        if (leftPosition + currentMenuWidth > viewportWidth) {
+            leftPosition = viewportWidth - currentMenuWidth - 8; // 8px de margen
+        }
+        // Asegurar que no se salga por la izquierda
+        if (leftPosition < 8) {
+            leftPosition = 8;
+        }
+        if (menuPosition === "top") {
+            return {
+                position: "fixed",
+                bottom: window.innerHeight - triggerRect.top + menuMargin,
+                left: leftPosition,
+                minWidth: Math.max(triggerRect.width, menuMinWidth), // Mantener el minWidth del trigger o 160
+            };
+        }
+        else {
+            return {
+                position: "fixed",
+                top: triggerRect.bottom + menuMargin,
+                left: leftPosition,
+                minWidth: Math.max(triggerRect.width, menuMinWidth),
+            };
+        }
+        // scrollUpdate se usa intencionalmente para forzar el recálculo en scroll
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen, menuPosition, scrollUpdate]);
+    return (_jsxs("div", { className: "relative inline-block", ref: triggerRef, children: [_jsx("div", { onClick: handleToggle, className: "cursor-pointer", children: renderNode ? (renderNode) : (_jsx(Button, { variant: "ghost", icon: "fa-ellipsis-h" })) }), isOpen &&
+                (typeof document !== "undefined" && document.body
+                    ? createPortal(_jsx("div", { ref: menuRef, className: "fixed z-[2000] bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded-md shadow-[var(--shadow-lg)] py-1 min-w-[160px] font-[var(--font-default)]", style: menuStyles, children: children }), document.body)
+                    : null)] }));
+};

package/dist/components/{utils → layout}/Filter.d.ts

@@ -18,6 +18,11 @@ interface BaseFilterProps {
      * Por defecto es false.
      */
     hideEmpty?: boolean;
+    /**
+     * Si es true, el componente se muestra con opacidad y no permite interacciones.
+     * Si el panel está abierto, se cerrará automáticamente.
+     */
+    disabled?: boolean;
 }
 export interface TextFilterProps extends BaseFilterProps {
     filterType?: "text";

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

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../src/components/layout/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;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;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,CAy+BxC,CAAC"}

package/dist/components/{utils → layout}/Filter.js

@@ -8,10 +8,10 @@ import { Input } from "../form-controls/Input";
 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";
+import { DataField } from "./DataField";
+import { normalizeIconClass } from "../utils/iconUtils";
 export const Filter = (props) => {
-    const { paramName, label, staticOptions, inputWidth, value: propValue, onChange, hideEmpty = false, } = props;
+    const { paramName, label, staticOptions, inputWidth, value: propValue, onChange, hideEmpty = false, disabled = false, } = props;
     const filterType = props.filterType || "text";
     // Calcular el ancho por defecto según el tipo de filtro
     const defaultInputWidth = filterType === "date" || filterType === "autocomplete" ? "160px" : "200px";
@@ -158,6 +158,12 @@ export const Filter = (props) => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
+    // Cerrar el panel si el componente se deshabilita
+    useEffect(() => {
+        if (disabled) {
+            setIsOpen(false);
+        }
+    }, [disabled]);
     const handleSetFilter = () => {
         const newValue = inputValue.trim() || undefined;
         // Si hay onChange, llamarlo con el nuevo valor
@@ -440,6 +446,8 @@ export const Filter = (props) => {
         }
     };
     const handleTogglePanel = () => {
+        if (disabled)
+            return;
         if (!isOpen) {
             // Calcular posición antes de abrir
             if (containerRef.current) {
@@ -503,7 +511,7 @@ export const Filter = (props) => {
     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 &&
+        return (_jsxs("div", { ref: containerRef, className: `relative inline-block ${disabled ? "opacity-50 pointer-events-none" : ""}`, children: [_jsx(DataField, { label: label, value: badgeContainer, className: "inline-block" }), isOpen &&
                     panelPosition &&
                     typeof document !== "undefined" &&
                     document.body &&
@@ -515,10 +523,10 @@ export const Filter = (props) => {
                                             : "text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]"}`, onMouseDown: (e) => {
                                             e.preventDefault();
                                             handleStaticOptionSelect(option);
-                                        }, children: _jsx("span", { className: "font-[var(--font-default)]", children: option.text }) }, option.value))) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { style: { width: finalInputWidth }, children: _jsx(AutocompleteInput, { ref: autocompleteInputRef, options: props.options, value: isUserTyping ? undefined : autocompleteValue, onChange: handleAutocompleteChange, getOptionLabel: props.getOptionLabel, getOptionValue: props.getOptionValue, renderOption: props.renderOption, noResultsText: props.noResultsText, onSelectOption: handleAutocompleteOptionSelect }) }), _jsx(Button, { onClick: handleAutocompleteSelect, icon: "fa-arrow-right", variant: "ghost" })] })] }) }), document.body)] }));
+                                        }, children: _jsx("span", { className: "font-[var(--font-default)]", children: option.text }) }, option.value))) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { style: { width: finalInputWidth }, children: _jsx(AutocompleteInput, { ref: autocompleteInputRef, options: props.options, value: isUserTyping ? undefined : autocompleteValue, onChange: handleAutocompleteChange, getOptionLabel: props.getOptionLabel, getOptionValue: props.getOptionValue, renderOption: props.renderOption, noResultsText: props.noResultsText, onSelectOption: handleAutocompleteOptionSelect, disabled: disabled }) }), _jsx(Button, { onClick: handleAutocompleteSelect, icon: "fa-arrow-right", variant: "ghost" })] })] }) }), document.body)] }));
     }
     if (filterType === "date") {
-        return (_jsxs("div", { ref: containerRef, className: "relative inline-block", children: [_jsx(DataField, { label: label, value: badgeContainer, className: "inline-block" }), isOpen &&
+        return (_jsxs("div", { ref: containerRef, className: `relative inline-block ${disabled ? "opacity-50 pointer-events-none" : ""}`, children: [_jsx(DataField, { label: label, value: badgeContainer, className: "inline-block" }), isOpen &&
                     panelPosition &&
                     typeof document !== "undefined" &&
                     document.body &&
@@ -535,7 +543,7 @@ export const Filter = (props) => {
     // Para searchSelect
     if (filterType === "searchSelect") {
         const searchSelectProps = props;
-        return (_jsxs("div", { ref: containerRef, className: "relative inline-block", children: [_jsx(DataField, { label: label, value: badgeContainer, className: "inline-block" }), isOpen &&
+        return (_jsxs("div", { ref: containerRef, className: `relative inline-block ${disabled ? "opacity-50 pointer-events-none" : ""}`, children: [_jsx(DataField, { label: label, value: badgeContainer, className: "inline-block" }), isOpen &&
                     panelPosition &&
                     typeof document !== "undefined" &&
                     document.body &&
@@ -554,10 +562,10 @@ export const Filter = (props) => {
         // Mostrar X solo si hay un valor actual Y el texto del input coincide con ese valor
         const hasValue = !!currentValue;
         const valueMatches = hasValue && searchValue.trim() === currentValue;
-        return (_jsx("div", { ref: containerRef, className: "relative inline-block", children: _jsx(DataField, { label: label, value: _jsx("div", { style: { width: finalInputWidth }, children: _jsx(Input, { ref: searchInputRef, type: "text", value: searchValue, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, icon: valueMatches ? "fa-times" : "fa-search", iconPosition: "right", onIconClick: handleSearchIconClick, placeholder: "Buscar...", size: "sm" }) }), className: "inline-block" }) }));
+        return (_jsx("div", { ref: containerRef, className: `relative inline-block ${disabled ? "opacity-50 pointer-events-none" : ""}`, children: _jsx(DataField, { label: label, value: _jsx("div", { style: { width: finalInputWidth }, children: _jsx(Input, { ref: searchInputRef, type: "text", value: searchValue, onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, icon: valueMatches ? "fa-times" : "fa-search", iconPosition: "right", onIconClick: handleSearchIconClick, placeholder: "Buscar...", size: "sm", disabled: disabled }) }), className: "inline-block" }) }));
     }
     // Para text y number
-    return (_jsxs("div", { ref: containerRef, className: "relative inline-block", children: [_jsx(DataField, { label: label, value: badgeContainer, className: "inline-block" }), isOpen &&
+    return (_jsxs("div", { ref: containerRef, className: `relative inline-block ${disabled ? "opacity-50 pointer-events-none" : ""}`, children: [_jsx(DataField, { label: label, value: badgeContainer, className: "inline-block" }), isOpen &&
                 panelPosition &&
                 typeof document !== "undefined" &&
                 document.body &&

package/dist/components/layout/Menu.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+export interface MenuProps<T = {
+    label: string;
+}> {
+    options: T[];
+    onOptionSelected: (item: T) => void;
+    /**
+     * Obtiene el label que se muestra para cada opción. Por defecto usa la propiedad "label".
+     */
+    getOptionLabel?: (item: T) => string;
+    /**
+     * Renderizado personalizado de cada opción. Si se define, se ignora el render por defecto.
+     */
+    renderOption?: (item: T) => React.ReactNode;
+    /**
+     * Clases adicionales para el contenedor del menú. Permite sobreescribir los estilos por defecto.
+     */
+    className?: string;
+    /**
+     * Estilos adicionales para el contenedor del menú.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Clases adicionales para cada opción del menú.
+     */
+    itemClassName?: string;
+}
+export declare const Menu: <T = {
+    label: string;
+}>({ options, onOptionSelected, getOptionLabel, renderOption, className, style, itemClassName, }: MenuProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/layout/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;IAC5C,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,gBAAgB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,IAAI,GAAI,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAAG,+FAQ1C,SAAS,CAAC,CAAC,CAAC,4CA8Cd,CAAC"}

package/dist/components/layout/Menu.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { twMerge } from "tailwind-merge";
+export const Menu = ({ options, onOptionSelected, getOptionLabel, renderOption, className, style, itemClassName, }) => {
+    const labelGetter = useCallback((item) => {
+        if (getOptionLabel)
+            return getOptionLabel(item);
+        const anyItem = item;
+        return (anyItem.label ?? "").toString();
+    }, [getOptionLabel]);
+    const handleOptionClick = (item) => {
+        onOptionSelected(item);
+    };
+    const mergedClassName = twMerge("bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded-md shadow-[var(--shadow-sm)] py-1 min-w-[160px] font-[var(--font-default)] inline-block", className);
+    return (_jsx("div", { className: mergedClassName, style: style, children: options.map((option, index) => {
+            const key = String(option?.id ??
+                labelGetter(option) ??
+                index);
+            return (_jsx("div", { onClick: () => handleOptionClick(option), className: twMerge("px-4 py-2 text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] cursor-pointer transition-colors flex items-center", itemClassName), children: renderOption ? renderOption(option) : labelGetter(option) }, key));
+        }) }));
+};

package/dist/components/layout/index.d.ts

@@ -14,4 +14,12 @@ export { DataTable } from "./DataTable";
 export type { DataTableProps, DataTableColumn } from "./DataTable";
 export { Accordion } from "./Accordion";
 export type { AccordionProps } from "./Accordion";
+export { Menu } from "./Menu";
+export type { MenuProps } from "./Menu";
+export { DropdownMenu } from "./DropdownMenu";
+export type { DropdownMenuProps } from "./DropdownMenu";
+export { DropdownPanel } from "./DropdownPanel";
+export type { DropdownPanelProps } from "./DropdownPanel";
+export { Filter } from "./Filter";
+export type { FilterProps } from "./Filter";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/layout/index.js

@@ -6,3 +6,7 @@ export { TabsGroup } from "./TabsGroup";
 export { TabPanel } from "./TabPanel";
 export { DataTable } from "./DataTable";
 export { Accordion } from "./Accordion";
+export { Menu } from "./Menu";
+export { DropdownMenu } from "./DropdownMenu";
+export { DropdownPanel } from "./DropdownPanel";
+export { Filter } from "./Filter";

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

@@ -2,8 +2,8 @@ import React from "react";
 export interface DialogProps {
     isOpen: boolean;
     title: React.ReactNode;
-    dialogBody: React.ReactNode;
-    dialogActions: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
     onClose?: () => void;
     closeOnOverlayClick?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyGxC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2GxC,CAAC"}

package/dist/components/utils/Dialog.js

@@ -1,7 +1,7 @@
 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, }) => {
+export const Dialog = ({ isOpen, title, children, footer, onClose, closeOnOverlayClick = false, }) => {
     // Prevenir scroll del body cuando el dialog está abierto
     useEffect(() => {
         if (isOpen) {
@@ -40,5 +40,5 @@ export const Dialog = ({ isOpen, title, dialogBody, dialogActions, onClose, clos
                             overflowY: "auto",
                             overflowX: "visible",
                             maxHeight: "calc(90vh - 200px)"
-                        }, children: dialogBody }), _jsx("div", { className: "px-6 py-4 border-t border-[var(--color-border-default)] flex items-center justify-end gap-2 flex-shrink-0 flex-wrap", children: dialogActions })] })] }));
+                        }, children: children }), footer && (_jsx("div", { className: "px-6 py-4 border-t border-[var(--color-border-default)] flex items-center justify-end gap-2 flex-shrink-0 flex-wrap", children: footer }))] })] }));
 };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { type FilterProps } from "./Filter";
+import { type FilterProps } from "../layout/Filter";
 export interface FilterConfig {
     filterType: FilterProps["filterType"];
     paramName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"FiltersDialog.d.ts","sourceRoot":"","sources":["../../../src/components/utils/FiltersDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpD,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,MAAM,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgJtD,CAAC"}
+{"version":3,"file":"FiltersDialog.d.ts","sourceRoot":"","sources":["../../../src/components/utils/FiltersDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,MAAM,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+ItD,CAAC"}

package/dist/components/utils/FiltersDialog.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Button } from "../form-controls/Button";
 import { Dialog } from "./Dialog";
-import { Filter } from "./Filter";
+import { Filter } from "../layout/Filter";
 import { Collection } from "../layout/Collection";
 export const FiltersDialog = ({ filters }) => {
     const [searchParams, setSearchParams] = useSearchParams();
@@ -100,5 +100,5 @@ export const FiltersDialog = ({ filters }) => {
                 };
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "fa-filter", variant: "outline", size: "sm", onClick: handleOpen, "aria-label": "Abrir filtros", children: "Filtrar" }), _jsx(Dialog, { isOpen: isOpen, title: "Filtros", dialogBody: _jsx("div", { className: "space-y-4", children: _jsx(Collection, { direction: "column", gap: "1rem", children: filters.map((filter) => (_jsx(Filter, { ...getFilterProps(filter) }, filter.paramName))) }) }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: handleClose, children: "Cerrar" }), _jsx(Button, { variant: "primary", onClick: handleApplyFilters, children: "Aplicar filtros" })] }), onClose: handleClose, closeOnOverlayClick: false })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "fa-filter", variant: "outline", size: "sm", onClick: handleOpen, "aria-label": "Abrir filtros", children: "Filtrar" }), _jsx(Dialog, { isOpen: isOpen, title: "Filtros", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: handleClose, children: "Cerrar" }), _jsx(Button, { variant: "primary", onClick: handleApplyFilters, children: "Aplicar filtros" })] }), onClose: handleClose, closeOnOverlayClick: false, children: _jsx("div", { className: "space-y-4", children: _jsx(Collection, { direction: "column", gap: "1rem", children: filters.map((filter) => (_jsx(Filter, { ...getFilterProps(filter) }, filter.paramName))) }) }) })] }));
 };

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

@@ -8,8 +8,6 @@ export { Dialog } from "./Dialog";
 export type { DialogProps } from "./Dialog";
 export { Loader } from "./Loader";
 export type { LoaderProps } from "./Loader";
-export { Filter } from "./Filter";
-export type { FilterProps } from "./Filter";
 export { FiltersDialog } from "./FiltersDialog";
 export type { FiltersDialogProps, FilterConfig } from "./FiltersDialog";
 export { Snackbar } from "./Snackbar";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/utils/index.js

@@ -3,7 +3,6 @@ export { Avatar } from "./Avatar";
 export { RoadMap } from "./RoadMap";
 export { Dialog } from "./Dialog";
 export { Loader } from "./Loader";
-export { Filter } from "./Filter";
 export { FiltersDialog } from "./FiltersDialog";
 export { Snackbar } from "./Snackbar";
 export { SnackbarContainer } from "./SnackbarContainer";

package/dist/contexts/{ListCrudContext.d.ts → CrudContext.d.ts}

@@ -1,7 +1,8 @@
-import { type ReactNode } from "react";
+import { type ReactNode, type Dispatch, type SetStateAction } from "react";
 import { type PaginationInterface } from "../components/form-controls/Pagination";
-export interface ListCrudContextType<T> {
+export interface CrudContextType<T> {
     list: Array<T> | undefined;
+    item: T | undefined;
     page: number;
     pages: number;
     total: number;
@@ -9,10 +10,16 @@ export interface ListCrudContextType<T> {
     isLoading: boolean;
     pagination: ReactNode;
     params: Record<string, any>;
+    extraData?: Record<string, any>;
+    setExtraData: Dispatch<SetStateAction<Record<string, any> | undefined>>;
     fetchItems: {
         execute: (params?: Record<string, any>) => Promise<void>;
         isLoading: boolean;
     };
+    fetchItem: {
+        execute: (params?: Record<string, any> | string | number) => Promise<T | undefined>;
+        isLoading: boolean;
+    };
     createItem: {
         execute: (item: T) => Promise<T | undefined | null>;
         isLoading: boolean;
@@ -26,25 +33,30 @@ export interface ListCrudContextType<T> {
         isLoading: boolean;
     };
 }
-export declare const ListCrudContext: import("react").Context<ListCrudContextType<any> | undefined>;
+export declare const CrudContext: import("react").Context<CrudContextType<any> | undefined>;
 export interface PromiseWithOptions<TResult, TParams extends any[] = []> {
     execute: (...params: TParams) => Promise<TResult>;
     successMessage?: string;
     errorMessage?: string;
 }
-interface ListCrudProviderProps<T> {
+interface CrudProviderProps<T> {
     children: ReactNode;
-    getPromise: ((params?: Record<string, any>) => Promise<Array<T> | PaginationInterface<T> | undefined>) | PromiseWithOptions<Array<T> | PaginationInterface<T> | undefined, [
+    getPromise?: ((params?: Record<string, any>) => Promise<Array<T> | PaginationInterface<T> | undefined>) | PromiseWithOptions<Array<T> | PaginationInterface<T> | undefined, [
         params?: Record<string, any>
     ]>;
+    getItemPromise?: ((params?: Record<string, any> | string | number) => Promise<T | undefined>) | PromiseWithOptions<T | undefined, [
+        params?: Record<string, any> | string | number
+    ]>;
     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;
+    singleItemId?: string | number;
+    extraData?: Record<string, any>;
 }
-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 declare function CrudProvider<T>({ children, getPromise, getItemPromise, postPromise, putPromise, deletePromise, limit, pageParam, urlParams, singleItemId, extraData: extraDataProp, }: CrudProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function useCrud<T>(): CrudContextType<T>;
 export {};
-//# sourceMappingURL=ListCrudContext.d.ts.map
+//# sourceMappingURL=CrudContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CrudContext.d.ts","sourceRoot":"","sources":["../../src/contexts/CrudContext.tsx"],"names":[],"mappings":"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"}