flysoft-react-ui 0.4.0 → 0.5.2

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyEtC,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiC1B,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA2KtC,CAAC"}

package/dist/components/utils/Badge.js

@@ -1,46 +1,150 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-export const Badge = ({ children, variant = "primary", size = "md", rounded = false, className = "", icon, iconPosition = "left", iconLabel, }) => {
+// Función helper para convertir nombres de colores comunes a valores CSS válidos
+const getColorValue = (color) => {
+    if (!color)
+        return undefined;
+    // Si ya es un valor CSS válido (hex, rgb, rgba, hsl, etc.), retornarlo
+    if (color.startsWith("#") ||
+        color.startsWith("rgb") ||
+        color.startsWith("hsl")) {
+        return color;
+    }
+    // Mapeo de nombres de colores comunes
+    const colorMap = {
+        white: "#ffffff",
+        black: "#000000",
+        "gray-800": "#1f2937",
+        "gray-700": "#374151",
+        "gray-600": "#4b5563",
+        "gray-500": "#6b7280",
+        "gray-400": "#9ca3af",
+        "gray-300": "#d1d5db",
+        "gray-200": "#e5e7eb",
+        "gray-100": "#f3f4f6",
+        "gray-50": "#f9fafb",
+    };
+    return colorMap[color.toLowerCase()] || color;
+};
+export const Badge = ({ children, variant = "primary", size = "md", rounded = false, className = "", icon, iconPosition = "left", iconLabel, bg, textColor, onClick, }) => {
     const baseClasses = "inline-flex items-center font-medium font-[var(--font-default)]";
     const variantClasses = {
-        primary: `
-      bg-[var(--color-primary-light)] text-[var(--color-primary-dark)]
-      hover:bg-[var(--color-primary)] hover:text-[var(--color-primary-contrast)]
+        primary: `
+      bg-[var(--color-primary-light)] text-gray-800
     `,
-        secondary: `
-      bg-[var(--color-secondary-light)] text-[var(--color-secondary-dark)]
-      hover:bg-[var(--color-secondary)] hover:text-[var(--color-secondary-contrast)]
+        secondary: `
+      bg-[var(--color-secondary-light)] text-gray-800
     `,
-        success: `
-      bg-[var(--color-success-light)] text-[var(--color-success-dark)]
-      hover:bg-[var(--color-success)] hover:text-[var(--color-success-contrast)]
+        success: `
+      bg-[var(--color-success-light)] text-gray-800
     `,
-        warning: `
-      bg-[var(--color-warning-light)] text-[var(--color-warning-dark)]
-      hover:bg-[var(--color-warning)] hover:text-[var(--color-warning-contrast)]
+        warning: `
+      bg-[var(--color-warning-light)] text-gray-800
     `,
-        danger: `
-      bg-[var(--color-danger-light)] text-[var(--color-danger-dark)]
-      hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)]
+        danger: `
+      bg-[var(--color-danger-light)] text-gray-800
     `,
-        info: `
-      bg-[var(--color-info-light)] text-[var(--color-info-dark)]
-      hover:bg-[var(--color-info)] hover:text-[var(--color-info-contrast)]
+        info: `
+      bg-[var(--color-info-light)] text-gray-800
     `,
     };
     const sizeClasses = {
-        sm: "px-2 py-0.5 text-xs",
-        md: "px-2.5 py-0.5 text-sm",
-        lg: "px-3 py-1 text-base",
+        sm: "py-0.5 text-xs",
+        md: "py-0.5 text-sm",
+        lg: "py-1 text-base",
     };
+    // Padding horizontal: si hay icono, el badge no tiene padding, se aplica a los elementos internos
+    const horizontalPaddingClasses = icon
+        ? "" // Sin padding horizontal en el badge cuando hay icono
+        : size === "sm"
+            ? "px-2"
+            : size === "md"
+                ? "px-2.5"
+                : "px-3";
+    // Padding para el texto: flex-1 para ocupar el espacio, padding solo en el lado opuesto al icono
+    const textPaddingClasses = icon
+        ? iconPosition === "left"
+            ? size === "sm"
+                ? "flex-1 pr-2"
+                : size === "md"
+                    ? "flex-1 pr-2.5"
+                    : "flex-1 pr-3"
+            : size === "sm"
+                ? "flex-1 pl-2"
+                : size === "md"
+                    ? "flex-1 pl-2.5"
+                    : "flex-1 pl-3"
+        : "";
+    // Padding para el icono: solo en el lado del borde
+    const iconPaddingClasses = icon
+        ? iconPosition === "left"
+            ? size === "sm"
+                ? "pl-2"
+                : size === "md"
+                    ? "pl-2.5"
+                    : "pl-3"
+            : size === "sm"
+                ? "pr-2"
+                : size === "md"
+                    ? "pr-2.5"
+                    : "pr-3"
+        : "";
     const roundedClasses = rounded ? "rounded-full" : "rounded-md";
-    const gapClasses = icon ? "gap-2" : "";
+    const gapClasses = icon ? "gap-2" : ""; // Gap entre icono y texto cuando hay icono
     const iconSizeClasses = size === "sm" ? "text-xs" : size === "md" ? "text-sm" : "text-base";
-    const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${roundedClasses} ${gapClasses} ${className}`;
+    // Si se proporciona bg personalizado, usar estilos inline; si no, usar las clases de variante
+    const backgroundClasses = bg ? "" : variantClasses[variant];
+    // Estilos inline para colores personalizados
+    const inlineStyles = bg
+        ? {
+            backgroundColor: getColorValue(bg) || bg,
+            color: getColorValue(textColor) || textColor || "#1f2937", // gray-800 por defecto
+        }
+        : {};
+    // Si hay onClick y no hay iconos, agregar cursor-pointer al badge completo
+    const cursorClasses = onClick && !icon ? "cursor-pointer" : "";
+    const classes = `${baseClasses} ${backgroundClasses} ${sizeClasses[size]} ${horizontalPaddingClasses} ${roundedClasses} ${gapClasses} ${cursorClasses} ${className}`;
     const renderIcon = () => {
         if (!icon)
             return null;
-        return (_jsx("i", { className: `fa ${icon} ${iconSizeClasses}`, "aria-hidden": !iconLabel, "aria-label": iconLabel }));
+        // Si hay onClick y hay iconos, el onClick se aplica solo a los iconos
+        const iconClasses = onClick
+            ? `fa ${icon} ${iconSizeClasses} cursor-pointer`
+            : `fa ${icon} ${iconSizeClasses}`;
+        return (_jsx("span", { className: iconPaddingClasses, children: _jsx("i", { className: iconClasses, "aria-hidden": !iconLabel, "aria-label": iconLabel, onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
+                    ? (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            // Crear un evento sintético compatible con MouseEvent
+                            const syntheticEvent = {
+                                ...e,
+                                currentTarget: e.currentTarget,
+                                target: e.target,
+                            };
+                            onClick(syntheticEvent);
+                        }
+                    }
+                    : undefined }) }));
     };
-    return (_jsxs("span", { className: classes, children: [icon && iconPosition === "left" && renderIcon(), _jsx("span", { children: children }), icon && iconPosition === "right" && renderIcon()] }));
+    // Si hay onClick y no hay iconos, aplicar onClick al badge completo
+    const badgeProps = onClick && !icon
+        ? {
+            onClick,
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    // Crear un evento sintético compatible con MouseEvent
+                    const syntheticEvent = {
+                        ...e,
+                        currentTarget: e.currentTarget,
+                        target: e.target,
+                    };
+                    onClick(syntheticEvent);
+                }
+            },
+        }
+        : {};
+    return (_jsxs("span", { className: classes, style: inlineStyles, ...badgeProps, children: [icon && iconPosition === "left" && renderIcon(), _jsx("span", { className: textPaddingClasses, children: children }), icon && iconPosition === "right" && renderIcon()] }));
 };

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;AAEzC,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,CAiGxC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,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"}

package/dist/components/utils/Dialog.js

@@ -35,5 +35,9 @@ 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(), children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-default)]", 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 overflow-y-auto flex-1 text-[var(--color-text-primary)] min-w-0", 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 })] })] }));
+    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: {
+                            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 })] })] }));
 };

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

@@ -0,0 +1,25 @@
+import React from "react";
+export interface DropdownMenuProps<T = {
+    label: string;
+}> {
+    options: T[];
+    onOptionSelected: (item: T) => void;
+    renderNode?: React.ReactNode;
+    /**
+     * 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;
+    /**
+     * Si es true y hay una sola opción, muestra directamente la opción en lugar del trigger.
+     * Por defecto es false.
+     */
+    replaceOnSingleOption?: boolean;
+}
+export declare const DropdownMenu: <T = {
+    label: string;
+}>({ options, onOptionSelected, renderNode, getOptionLabel, renderOption, replaceOnSingleOption, }: DropdownMenuProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DropdownMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/utils/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,gBAAgB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;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;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,GAAI,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAAG,iGAOlD,iBAAiB,CAAC,CAAC,CAAC,4CAiNtB,CAAC"}

package/dist/components/utils/DropdownMenu.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useCallback, useMemo, } from "react";
+import { Button } from "../form-controls/Button";
+export const DropdownMenu = ({ options, onOptionSelected, renderNode, getOptionLabel, renderOption, replaceOnSingleOption = false, }) => {
+    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;
+            // Estimar altura del menú (aproximadamente 40px por opción + padding)
+            const estimatedMenuHeight = options.length * 40 + 16;
+            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
+            // Usamos un margen de seguridad para asegurar que el menú quepa
+            if (spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow) {
+                setMenuPosition("top");
+            }
+            else {
+                setMenuPosition("bottom");
+            }
+        }
+    }, [isOpen, options.length]);
+    useEffect(() => {
+        calculatePosition();
+    }, [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 labelGetter = useCallback((item) => {
+        if (getOptionLabel)
+            return getOptionLabel(item);
+        const anyItem = item;
+        return (anyItem.label ?? "").toString();
+    }, [getOptionLabel]);
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    };
+    const handleOptionClick = (item) => {
+        onOptionSelected(item);
+        setIsOpen(false);
+    };
+    // Si replaceOnSingleOption es true y hay una sola opción, mostrar directamente la opción
+    const shouldReplace = replaceOnSingleOption && options.length === 1;
+    const singleOption = shouldReplace ? options[0] : null;
+    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
+        if (leftPosition + menuMinWidth > viewportWidth) {
+            leftPosition = viewportWidth - menuMinWidth - 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),
+            };
+        }
+        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]);
+    // Si debe reemplazar con la opción única, mostrar directamente la opción
+    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));
+                }) }))] }));
+};

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

@@ -0,0 +1,57 @@
+import React from "react";
+import type { AutocompleteOption } from "../form-controls/AutocompleteInput";
+import type { SearchSelectOption } from "../form-controls/SearchSelectInput";
+import type { PaginationInterface } from "../form-controls/Pagination";
+export interface StaticOption {
+    text: string;
+    value: string;
+}
+interface BaseFilterProps {
+    paramName?: string;
+    label?: string;
+    staticOptions?: StaticOption[];
+    inputWidth?: string;
+    value?: string;
+    onChange?: (value: string | undefined) => void;
+    /**
+     * Si es true, el componente solo se renderiza si tiene un valor o existe el queryParam asociado con un valor.
+     * Por defecto es false.
+     */
+    hideEmpty?: boolean;
+}
+export interface TextFilterProps extends BaseFilterProps {
+    filterType?: "text";
+}
+export interface NumberFilterProps extends BaseFilterProps {
+    filterType: "number";
+    min?: number;
+    max?: number;
+}
+export interface DateFilterProps extends BaseFilterProps {
+    filterType: "date";
+}
+export interface AutocompleteFilterProps<T = AutocompleteOption, K = string> extends BaseFilterProps {
+    filterType: "autocomplete";
+    options: T[];
+    getOptionLabel?: (item: T) => string;
+    getOptionValue?: (item: T) => K;
+    renderOption?: (item: T) => React.ReactNode;
+    noResultsText?: string;
+}
+export interface SearchFilterProps extends BaseFilterProps {
+    filterType: "search";
+}
+export interface SearchSelectFilterProps<T = SearchSelectOption, K = string> extends BaseFilterProps {
+    filterType: "searchSelect";
+    onSearchPromiseFn: (text: string) => Promise<Array<T> | PaginationInterface<T>>;
+    onSingleSearchPromiseFn: (value: K) => Promise<T | undefined>;
+    getOptionLabel?: (item: T) => string;
+    getOptionValue?: (item: T) => K;
+    renderOption?: (item: T) => React.ReactNode;
+    dialogTitle?: string;
+    noResultsText?: string;
+}
+export type FilterProps = TextFilterProps | NumberFilterProps | DateFilterProps | AutocompleteFilterProps | SearchFilterProps | SearchSelectFilterProps;
+export declare const Filter: React.FC<FilterProps>;
+export {};
+//# sourceMappingURL=Filter.d.ts.map

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

@@ -0,0 +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"}