flysoft-react-ui 0.5.0 → 0.5.3

package/dist/components/utils/FiltersDialog.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { Collection } from "../layout/Collection";
+export const FiltersDialog = ({ filters }) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [isOpen, setIsOpen] = useState(false);
+    const [filterValues, setFilterValues] = useState({});
+    // Inicializar filterValues con los valores actuales de la URL
+    useEffect(() => {
+        const initialValues = {};
+        filters.forEach((filter) => {
+            const urlValue = searchParams.get(filter.paramName);
+            initialValues[filter.paramName] = urlValue || undefined;
+        });
+        setFilterValues(initialValues);
+    }, []); // Solo al montar el componente
+    // Sincronizar filterValues cuando se abre el dialog con los valores actuales de la URL
+    useEffect(() => {
+        if (isOpen) {
+            const currentValues = {};
+            filters.forEach((filter) => {
+                const urlValue = searchParams.get(filter.paramName);
+                currentValues[filter.paramName] = urlValue || undefined;
+            });
+            setFilterValues(currentValues);
+        }
+    }, [isOpen, filters, searchParams]);
+    const handleFilterChange = (paramName, value) => {
+        setFilterValues((prev) => ({
+            ...prev,
+            [paramName]: value,
+        }));
+    };
+    const handleApplyFilters = () => {
+        const newSearchParams = new URLSearchParams(searchParams);
+        // Aplicar todos los filtros a la URL
+        filters.forEach((filter) => {
+            const value = filterValues[filter.paramName];
+            if (value) {
+                newSearchParams.set(filter.paramName, value);
+            }
+            else {
+                newSearchParams.delete(filter.paramName);
+            }
+        });
+        setSearchParams(newSearchParams, { replace: true });
+        setIsOpen(false);
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const handleOpen = () => {
+        setIsOpen(true);
+    };
+    // Construir las props de Filter para cada filtro
+    const getFilterProps = (filterConfig) => {
+        const baseProps = {
+            label: filterConfig.label,
+            staticOptions: filterConfig.staticOptions,
+            inputWidth: filterConfig.inputWidth,
+            value: filterValues[filterConfig.paramName],
+            onChange: (value) => handleFilterChange(filterConfig.paramName, value),
+        };
+        switch (filterConfig.filterType) {
+            case "text":
+                return {
+                    ...baseProps,
+                    filterType: "text",
+                };
+            case "number":
+                return {
+                    ...baseProps,
+                    filterType: "number",
+                    min: filterConfig.min,
+                    max: filterConfig.max,
+                };
+            case "date":
+                return {
+                    ...baseProps,
+                    filterType: "date",
+                };
+            case "autocomplete":
+                return {
+                    ...baseProps,
+                    filterType: "autocomplete",
+                    options: filterConfig.options || [],
+                    getOptionLabel: filterConfig.getOptionLabel,
+                    getOptionValue: filterConfig.getOptionValue,
+                    renderOption: filterConfig.renderOption,
+                    noResultsText: filterConfig.noResultsText,
+                };
+            default:
+                return {
+                    ...baseProps,
+                    filterType: "text",
+                };
+        }
+    };
+    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 })] }));
+};

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
@@ -34,7 +34,7 @@ export const Loader = ({ isLoading = false, text, children, keepContentWhileLoad
     if (children) {
         // Si keepContentWhileLoading es true, mostrar children con overlay
         if (keepContentWhileLoading) {
-            return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "pointer-events-none select-none", children: children }), _jsx("div", { className: `absolute inset-0 flex items-center justify-center z-10 pointer-events-auto px-4 ${overlayClasses}`, children: _jsx("div", { className: "bg-[var(--color-bg-default)] rounded-lg p-6 shadow-lg border border-[var(--color-border-default)] w-full", children: _jsx(ProgressBar, {}) }) })] }));
+            return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "pointer-events-none select-none", children: children }), _jsx("div", { className: `absolute inset-0 flex items-center justify-center z-10 pointer-events-auto px-4 ${overlayClasses}`, children: _jsx("div", { className: "bg-[var(--color-bg-default)] rounded-lg p-6 shadow-lg border border-[var(--color-border-default)] w-full max-w-2xl", children: _jsx(ProgressBar, {}) }) })] }));
         }
         // Si no tiene keepContentWhileLoading, ocultar children y mostrar solo loader básico
         return (_jsx("div", { className: "flex items-center justify-center p-6 w-full", children: _jsx("div", { className: "w-full max-w-2xl", children: _jsx(ProgressBar, {}) }) }));

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

@@ -0,0 +1,59 @@
+import React from "react";
+export interface RoadMapStage {
+    /**
+     * Name of the stage
+     */
+    name: string;
+    /**
+     * Optional description shown below the name
+     */
+    description?: string;
+    /**
+     * Optional FontAwesome 5 icon class (e.g., "fa-check", "fa-user")
+     */
+    icon?: string;
+    /**
+     * Whether the stage is disabled (shown with 0.5 opacity)
+     */
+    disabled?: boolean;
+    /**
+     * Color variant for the stage circle
+     */
+    variant?: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+    /**
+     * Custom background color (hexadecimal, rgb, or color name)
+     * Takes precedence over variant if provided
+     */
+    bg?: string;
+}
+export interface RoadMapProps {
+    /**
+     * Array of stages to display
+     */
+    stages: RoadMapStage[];
+    /**
+     * Optional additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * RoadMap component displays a series of stages like metro stations
+ *
+ * @example
+ * // Basic usage
+ * <RoadMap stages={[
+ *   { name: "Start", variant: "primary" },
+ *   { name: "Middle", variant: "success" },
+ *   { name: "End", variant: "info" }
+ * ]} />
+ *
+ * @example
+ * // With icons and descriptions
+ * <RoadMap stages={[
+ *   { name: "Planning", description: "Define requirements", icon: "fa-clipboard", variant: "primary" },
+ *   { name: "Development", description: "Build the feature", icon: "fa-code", variant: "success" },
+ *   { name: "Testing", description: "Test thoroughly", icon: "fa-check-circle", variant: "warning" }
+ * ]} />
+ */
+export declare const RoadMap: React.FC<RoadMapProps>;
+//# sourceMappingURL=RoadMap.d.ts.map

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

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

@@ -0,0 +1,139 @@
+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
+ */
+const getColorValue = (color) => {
+    if (!color)
+        return undefined;
+    // If already a valid CSS value (hex, rgb, rgba, hsl, etc.), return it
+    if (color.startsWith("#") ||
+        color.startsWith("rgb") ||
+        color.startsWith("hsl")) {
+        return color;
+    }
+    // Map common color names
+    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;
+};
+/**
+ * Get the CSS variable name for a variant color
+ */
+const getVariantColorVar = (variant) => {
+    if (!variant)
+        return "var(--color-primary)";
+    const variantMap = {
+        primary: "var(--color-primary)",
+        secondary: "var(--color-secondary)",
+        success: "var(--color-success)",
+        warning: "var(--color-warning)",
+        danger: "var(--color-danger)",
+        info: "var(--color-info)",
+    };
+    return variantMap[variant];
+};
+/**
+ * Get the actual color value for a variant (for gradients)
+ * This reads the CSS variable value from the computed styles
+ */
+const getVariantColorValue = (variant) => {
+    if (!variant)
+        return "#007aff"; // default primary color
+    const variantColorMap = {
+        primary: "#007aff",
+        secondary: "#6b7280",
+        success: "#10b981",
+        warning: "#f59e0b",
+        danger: "#ef4444",
+        info: "#06b6d4",
+    };
+    return variantColorMap[variant];
+};
+/**
+ * RoadMap component displays a series of stages like metro stations
+ *
+ * @example
+ * // Basic usage
+ * <RoadMap stages={[
+ *   { name: "Start", variant: "primary" },
+ *   { name: "Middle", variant: "success" },
+ *   { name: "End", variant: "info" }
+ * ]} />
+ *
+ * @example
+ * // With icons and descriptions
+ * <RoadMap stages={[
+ *   { name: "Planning", description: "Define requirements", icon: "fa-clipboard", variant: "primary" },
+ *   { name: "Development", description: "Build the feature", icon: "fa-code", variant: "success" },
+ *   { name: "Testing", description: "Test thoroughly", icon: "fa-check-circle", variant: "warning" }
+ * ]} />
+ */
+export const RoadMap = ({ stages, className = "", }) => {
+    if (!stages || stages.length === 0) {
+        return null;
+    }
+    /**
+     * Get the background color for a stage
+     */
+    const getStageBgColor = (stage) => {
+        if (stage.bg) {
+            return getColorValue(stage.bg) || stage.bg;
+        }
+        return getVariantColorVar(stage.variant || "primary");
+    };
+    /**
+     * Get the color value for gradient calculations
+     */
+    const getStageColorValue = (stage) => {
+        if (stage.bg) {
+            return getColorValue(stage.bg) || stage.bg;
+        }
+        return getVariantColorValue(stage.variant || "primary");
+    };
+    /**
+     * Create a gradient string for the connector line
+     * The line transitions smoothly from the source color to the destination color
+     */
+    const getConnectorGradient = (fromStage, toStage) => {
+        const fromColor = getStageColorValue(fromStage);
+        const toColor = getStageColorValue(toStage);
+        // Create a smooth gradient that transitions from source to destination
+        return `linear-gradient(to bottom, ${fromColor}, ${toColor})`;
+    };
+    return (_jsx("div", { className: `roadmap-container ${className}`, children: stages.map((stage, index) => {
+            const isLast = index === stages.length - 1;
+            const isDisabled = stage.disabled;
+            const bgColor = getStageBgColor(stage);
+            const connectorGradient = !isLast
+                ? getConnectorGradient(stage, stages[index + 1])
+                : null;
+            return (_jsxs("div", { className: "relative flex items-start gap-3", children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: `
+                  w-6 h-6 rounded-full
+                  flex items-center justify-center
+                  flex-shrink-0
+                  ${isDisabled ? "opacity-50" : ""}
+                `, style: {
+                                    backgroundColor: bgColor,
+                                    color: "#ffffff",
+                                }, 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
+                ${isDisabled ? "opacity-50" : ""}
+              `, children: [_jsx("h3", { className: "text-sm font-semibold font-[var(--font-default)] mb-0.5", style: { color: "var(--color-text-primary)" }, children: stage.name }), stage.description && (_jsx("p", { className: "text-xs font-[var(--font-default)]", style: { color: "var(--color-text-secondary)" }, children: stage.description }))] })] }, index));
+        }) }));
+};
+RoadMap.displayName = "RoadMap";

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { SnackbarVariant } from "../../contexts/SnackbarContext";
+export interface SnackbarProps {
+    id: string;
+    message: string;
+    variant: SnackbarVariant;
+    duration?: number;
+    icon?: string;
+    iconLabel?: string;
+    onClose: (id: string) => void;
+}
+export declare const Snackbar: React.FC<SnackbarProps>;
+//# sourceMappingURL=Snackbar.d.ts.map

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

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

@@ -0,0 +1,122 @@
+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);
+    const intervalRef = useRef(null);
+    const startTimeRef = useRef(Date.now());
+    const remainingTimeRef = useRef(duration);
+    // Mapeo de variantes a colores y clases
+    const variantConfig = {
+        primary: {
+            bg: "bg-[var(--color-primary-light)]",
+            border: "border-[var(--color-primary)]",
+            text: "text-gray-800",
+            progressColor: "var(--color-primary)",
+        },
+        secondary: {
+            bg: "bg-[var(--color-secondary-light)]",
+            border: "border-[var(--color-secondary)]",
+            text: "text-gray-800",
+            progressColor: "var(--color-secondary)",
+        },
+        success: {
+            bg: "bg-[var(--color-success-light)]",
+            border: "border-[var(--color-success)]",
+            text: "text-gray-800",
+            progressColor: "var(--color-success)",
+        },
+        warning: {
+            bg: "bg-[var(--color-warning-light)]",
+            border: "border-[var(--color-warning)]",
+            text: "text-gray-800",
+            progressColor: "var(--color-warning)",
+        },
+        danger: {
+            bg: "bg-[var(--color-danger-light)]",
+            border: "border-[var(--color-danger)]",
+            text: "text-gray-800",
+            progressColor: "var(--color-danger)",
+        },
+        info: {
+            bg: "bg-[var(--color-info-light)]",
+            border: "border-[var(--color-info)]",
+            text: "text-gray-800",
+            progressColor: "var(--color-info)",
+        },
+    };
+    const config = variantConfig[variant];
+    // Función para cerrar el snackbar
+    const handleClose = useCallback(() => {
+        setIsClosing(true);
+        // Esperar a que termine la animación antes de remover
+        setTimeout(() => {
+            onClose(id);
+        }, 300); // Duración de la animación de salida
+    }, [id, onClose]);
+    // Efecto para la barra de progreso
+    useEffect(() => {
+        if (duration <= 0) {
+            // Si duration es 0 o negativo, no se cierra automáticamente
+            return;
+        }
+        const updateProgress = () => {
+            const elapsed = Date.now() - startTimeRef.current;
+            const newProgress = Math.max(0, 100 - (elapsed / duration) * 100);
+            setProgress(newProgress);
+            if (newProgress <= 0) {
+                handleClose();
+            }
+        };
+        // Actualizar cada 50ms para una animación suave
+        intervalRef.current = setInterval(updateProgress, 50);
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, [duration, handleClose]);
+    // Pausar el progreso cuando el mouse está sobre el snackbar
+    const handleMouseEnter = () => {
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+        const elapsed = Date.now() - startTimeRef.current;
+        remainingTimeRef.current = duration - elapsed;
+    };
+    // Reanudar el progreso cuando el mouse sale del snackbar
+    const handleMouseLeave = () => {
+        if (remainingTimeRef.current > 0) {
+            startTimeRef.current = Date.now();
+            const updateProgress = () => {
+                const elapsed = Date.now() - startTimeRef.current;
+                const newProgress = Math.max(0, ((remainingTimeRef.current - elapsed) / duration) * 100);
+                setProgress(newProgress);
+                if (newProgress <= 0) {
+                    handleClose();
+                }
+            };
+            intervalRef.current = setInterval(updateProgress, 50);
+        }
+    };
+    // Íconos por defecto según la variante
+    const defaultIcons = {
+        primary: "fa-info-circle",
+        secondary: "fa-info-circle",
+        success: "fa-check-circle",
+        warning: "fa-exclamation-triangle",
+        danger: "fa-times-circle",
+        info: "fa-info-circle",
+    };
+    const displayIcon = icon || defaultIcons[variant];
+    return (_jsx("div", { className: `
+        relative w-[18rem] bg-white rounded-md shadow-lg border border-gray-200
+        overflow-hidden transition-all duration-300 ease-in-out
+        ${isClosing ? "opacity-0 translate-x-full" : "opacity-100 translate-x-0"}
+      `, 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: `${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/SnackbarContainer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SnackbarContainerProps {
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
+    maxSnackbars?: number;
+}
+export declare const SnackbarContainer: React.FC<SnackbarContainerProps>;
+//# sourceMappingURL=SnackbarContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarContainer.d.ts","sourceRoot":"","sources":["../../../src/components/utils/SnackbarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,eAAe,CAAC;IACtG,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgD9D,CAAC"}

package/dist/components/utils/SnackbarContainer.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useSnackbar } from "../../contexts/SnackbarContext";
+import { Snackbar } from "./Snackbar";
+export const SnackbarContainer = ({ position = "top-right", maxSnackbars = 5, }) => {
+    const { snackbars, removeSnackbar } = useSnackbar();
+    // Limitar el número de snackbars visibles
+    const visibleSnackbars = snackbars.slice(-maxSnackbars);
+    // Clases de posición
+    const positionClasses = {
+        "top-right": "top-4 right-4",
+        "top-left": "top-4 left-4",
+        "bottom-right": "bottom-4 right-4",
+        "bottom-left": "bottom-4 left-4",
+        "top-center": "top-4 left-1/2 -translate-x-1/2",
+        "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+    };
+    if (snackbars.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: `
+        fixed z-50 pointer-events-none
+        ${positionClasses[position]}
+      `, "aria-live": "polite", "aria-atomic": "true", children: _jsx("div", { className: "flex flex-col gap-3 pointer-events-auto", children: visibleSnackbars.map((snackbar) => (_jsx(Snackbar, { id: snackbar.id, message: snackbar.message, variant: snackbar.variant, duration: snackbar.duration, icon: snackbar.icon, iconLabel: snackbar.iconLabel, onClose: removeSnackbar }, snackbar.id))) }) }));
+};

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/components/utils/index.d.ts

@@ -1,7 +1,19 @@
 export { Badge } from "./Badge";
 export type { BadgeProps } from "./Badge";
+export { Avatar } from "./Avatar";
+export type { AvatarProps } from "./Avatar";
+export { RoadMap } from "./RoadMap";
+export type { RoadMapProps, RoadMapStage } from "./RoadMap";
 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";
+export type { SnackbarProps } from "./Snackbar";
+export { SnackbarContainer } from "./SnackbarContainer";
+export type { SnackbarContainerProps } from "./SnackbarContainer";
 //# sourceMappingURL=index.d.ts.map

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,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,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,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

@@ -1,3 +1,9 @@
 export { Badge } from "./Badge";
+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/AppLayoutContext.d.ts

@@ -0,0 +1,40 @@
+import React, { type ReactNode, type Dispatch, type SetStateAction } from "react";
+import type { Theme, ThemeContextType } from "./types";
+export interface NavbarInterface {
+    navBarLeftNode?: string | ReactNode;
+    navBarRightNode?: string | ReactNode;
+    fullWidthNavbar: boolean;
+    height?: string;
+    className?: string;
+}
+export interface LeftDrawerInterface {
+    headerNode?: ReactNode;
+    contentNode?: ReactNode;
+    footerNode?: ReactNode;
+    className?: string;
+    width?: string;
+}
+export interface AppLayoutContextType extends ThemeContextType {
+    navbar: NavbarInterface | undefined;
+    leftDrawer: LeftDrawerInterface | undefined;
+    className: string;
+    setNavbar: Dispatch<SetStateAction<NavbarInterface | undefined>>;
+    setLeftDrawer: Dispatch<SetStateAction<LeftDrawerInterface | undefined>>;
+    setClassName: (className: string) => void;
+    setNavBarLeftNode: (node: string | ReactNode | undefined) => void;
+    setNavbarRightNode: (node: string | ReactNode | undefined) => void;
+}
+interface AppLayoutProviderProps {
+    children: ReactNode;
+    initialTheme?: string | Theme;
+    storageKey?: string;
+    forceInitialTheme?: boolean;
+    initialNavbar?: NavbarInterface;
+    initialLeftDrawer?: LeftDrawerInterface;
+    className?: string;
+}
+export declare const AppLayoutProvider: React.FC<AppLayoutProviderProps>;
+export declare const useAppLayout: () => AppLayoutContextType;
+export declare const useAppLayoutContext: () => boolean;
+export {};
+//# sourceMappingURL=AppLayoutContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayoutContext.d.ts","sourceRoot":"","sources":["../../src/contexts/AppLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EAEd,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKvD,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAE5D,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAGlB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC;IACjE,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAC;IACzE,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAClE,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CACpE;AAMD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyHD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2B9D,CAAC;AAIF,eAAO,MAAM,YAAY,QAAO,oBAM/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,eAG/B,CAAC"}