flysoft-react-ui 1.2.4 → 1.2.6

package/dist/components/layout/TabsGroup.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useMemo, createContext, useContext } from "react";
-import { useSearchParams } from "react-router-dom";
-const TabsContext = createContext(undefined);
-export const useTabsContext = () => {
-    const context = useContext(TabsContext);
-    if (!context) {
-        throw new Error("TabPanel must be used within TabsGroup");
-    }
-    return context;
-};
-export const TabsGroup = ({ children, tabs, paramName, headerNode, onChangeTab, }) => {
-    const [searchParams, setSearchParams] = useSearchParams();
-    const defaultTab = tabs[0]?.id?.toString() || "";
-    // Obtener el tab activo desde URL params si paramName está definido, sino desde estado local
-    const urlTab = paramName ? searchParams.get(paramName) : null;
-    const initialTab = urlTab || defaultTab;
-    const [activeTab, setActiveTabState] = useState(initialTab);
-    // Sincronizar con URL params cuando cambian
-    useEffect(() => {
-        if (paramName && urlTab) {
-            setActiveTabState(urlTab);
-        }
-    }, [paramName, urlTab]);
-    const setActiveTab = (tab) => {
-        setActiveTabState(tab);
-        // Actualizar URL params si paramName está definido
-        if (paramName) {
-            const newSearchParams = new URLSearchParams(searchParams);
-            newSearchParams.set(paramName, tab.toString());
-            setSearchParams(newSearchParams, { replace: true });
-        }
-        // Llamar al callback si está definido
-        if (onChangeTab) {
-            onChangeTab(tab.toString());
-        }
-    };
-    const contextValue = useMemo(() => ({ activeTab, setActiveTab }), [activeTab]);
-    const handleTabClick = (tabId) => {
-        setActiveTab(tabId);
-    };
-    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs("div", { className: "w-full font-[var(--font-default)]", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-1", children: tabs.map((tab) => {
-                                const isActive = activeTab.toString() === tab.id.toString();
-                                return (_jsx("button", { onClick: () => handleTabClick(tab.id), className: `
-                    px-4 py-2 text-sm font-medium transition-colors cursor-pointer
-                    border-b-2 -mb-[1px]
-                    ${isActive
-                                        ? "text-[var(--color-primary)] border-[var(--color-primary)]"
-                                        : "text-[var(--color-text-secondary)] border-transparent hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-default)]"}
-                  `, "aria-selected": isActive, role: "tab", children: tab.label }, tab.id));
-                            }) }), headerNode && (_jsx("div", { className: "flex items-center", children: headerNode }))] }), _jsx("div", { className: "mt-4", children: children })] }) }));
-};

package/dist/components/layout/index.js

@@ -1,12 +0,0 @@
-export { Card } from "./Card";
-export { AppLayout } from "./AppLayout";
-export { Collection } from "./Collection";
-export { DataField } from "./DataField";
-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/Avatar.js

@@ -1,77 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState } from "react";
-import { getInitialLetters } from "../../helpers";
-/**
- * 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;
-};
-/**
- * Avatar component displays a circular avatar with initials or an image
- *
- * @example
- * // Basic usage with text
- * <Avatar text="John Doe" />
- *
- * @example
- * // With image
- * <Avatar text="John Doe" image="https://example.com/avatar.jpg" />
- *
- * @example
- * // Custom colors
- * <Avatar text="Jane Smith" bgColor="#3b82f6" textColor="#ffffff" />
- */
-export const Avatar = ({ text, image, bgColor = "gray-600", textColor = "white", size = "md", className = "", }) => {
-    const [imageError, setImageError] = useState(false);
-    const initials = getInitialLetters(text);
-    const showImage = image && !imageError;
-    const sizeClasses = {
-        sm: "w-8 h-8 text-xs",
-        md: "w-10 h-10 text-sm",
-        lg: "w-12 h-12 text-base",
-    };
-    const baseClasses = `
-    rounded-full
-    flex
-    items-center
-    justify-center
-    font-semibold
-    font-[var(--font-default)]
-    overflow-hidden
-    flex-shrink-0
-    ${sizeClasses[size]}
-    ${className}
-  `;
-    // Inline styles for colors (only if no image or image failed to load)
-    const inlineStyles = showImage
-        ? {}
-        : {
-            backgroundColor: getColorValue(bgColor) || bgColor || "#4b5563",
-            color: getColorValue(textColor) || textColor || "#ffffff",
-        };
-    return (_jsx("div", { className: baseClasses, style: inlineStyles, title: text, role: "img", "aria-label": text, children: showImage ? (_jsx("img", { src: image, alt: text, className: "w-full h-full object-cover", onError: () => setImageError(true) })) : (_jsx("span", { children: initials })) }));
-};
-Avatar.displayName = "Avatar";

package/dist/components/utils/Badge.js

@@ -1,151 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { normalizeIconClass } from "./iconUtils";
-// 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-gray-800
-    `,
-        secondary: `
-      bg-[var(--color-secondary-light)] text-gray-800
-    `,
-        success: `
-      bg-[var(--color-success-light)] text-gray-800
-    `,
-        warning: `
-      bg-[var(--color-warning-light)] text-gray-800
-    `,
-        danger: `
-      bg-[var(--color-danger-light)] text-gray-800
-    `,
-        info: `
-      bg-[var(--color-info-light)] text-gray-800
-    `,
-    };
-    const sizeClasses = {
-        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" : ""; // Gap entre icono y texto cuando hay icono
-    const iconSizeClasses = size === "sm" ? "text-xs" : size === "md" ? "text-sm" : "text-base";
-    // 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;
-        // Si hay onClick y hay iconos, el onClick se aplica solo a los iconos
-        const iconClasses = onClick
-            ? `${normalizeIconClass(icon)} ${iconSizeClasses} cursor-pointer`
-            : `${normalizeIconClass(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 }) }));
-    };
-    // 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.js

@@ -1,44 +0,0 @@
-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, children, footer, onClose, closeOnOverlayClick = false, compact = false, }) => {
-    // Prevenir scroll del body cuando el dialog está abierto
-    useEffect(() => {
-        if (isOpen) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = "";
-        }
-        return () => {
-            document.body.style.overflow = "";
-        };
-    }, [isOpen]);
-    // Manejar tecla Escape para cerrar
-    useEffect(() => {
-        const handleEscape = (e) => {
-            if (e.key === "Escape" && isOpen && onClose) {
-                onClose();
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("keydown", handleEscape);
-        }
-        return () => {
-            document.removeEventListener("keydown", handleEscape);
-        };
-    }, [isOpen, onClose]);
-    if (!isOpen) {
-        return null;
-    }
-    const handleOverlayClick = () => {
-        if (closeOnOverlayClick && onClose) {
-            onClose();
-        }
-    };
-    return (_jsxs("div", { className: "fixed inset-0 z-[2000] flex items-center justify-center p-4", role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-title", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: handleOverlayClick }), _jsxs("div", { className: "relative w-auto max-w-lg min-w-[400px] bg-[var(--color-bg-default)] rounded-lg shadow-[var(--shadow-xl)] border border-[var(--color-border-default)] font-[var(--font-default)] max-h-[90vh] flex flex-col", onClick: (e) => e.stopPropagation(), style: { overflow: "visible" }, children: [_jsxs("div", { className: `flex items-center justify-between ${compact ? "px-4 py-2" : "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 flysoft-button-reset bg-transparent border-none text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] transition-colors cursor-pointer", "aria-label": "Cerrar dialog", children: _jsx("i", { className: normalizeIconClass("fa-times") }) }))] }), _jsx("div", { className: `${compact ? "px-4 py-3" : "px-6 py-4"} flex-1 text-[var(--color-text-primary)] min-w-0`, style: {
-                            overflowY: "auto",
-                            overflowX: "visible",
-                            maxHeight: "calc(90vh - 200px)",
-                        }, children: children }), footer && (_jsx("div", { className: `${compact ? "px-4 py-2" : "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.js

@@ -1,104 +0,0 @@
-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 "../layout/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", 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/Loader.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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;
-    // Clases por defecto del overlay (negro semitransparente con blur)
-    const defaultOverlayClasses = "bg-black/50 backdrop-blur-sm";
-    // Combinar clases por defecto con las personalizadas
-    const overlayClasses = overlayClassName
-        ? overlayClassName
-        : defaultOverlayClasses;
-    // Barra de progreso infinita
-    const ProgressBar = () => {
-        // Variable CSS para el gradiente del color primario
-        const gradientColor = `no-repeat linear-gradient(${theme.colors.primary} 0 0)`;
-        const bgSecondary = theme.colors.bgSecondary || theme.colors.gray100;
-        return (_jsxs("div", { className: "flex flex-col items-center gap-0.5 w-full", role: "status", "aria-live": "polite", children: [_jsx("div", { className: "h-1 w-full rounded", style: {
-                        "--c": gradientColor,
-                        background: `var(--c), var(--c), ${bgSecondary}`,
-                        backgroundSize: "60% 100%",
-                        animation: "l16 3s infinite",
-                    } }), displayText && (_jsx("span", { className: "text-xs text-[var(--color-text-secondary)] font-[var(--font-default)]", children: displayText }))] }));
-    };
-    // Si no está cargando, mostrar solo children (si existen)
-    if (!isLoading) {
-        return _jsx(_Fragment, { children: children });
-    }
-    // Variante 1: Con contentLoadingNode
-    if (contentLoadingNode) {
-        return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: keepContentWhileLoading ? "opacity-50 pointer-events-none" : "", children: contentLoadingNode }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10 pointer-events-none px-4", children: _jsx("div", { className: "bg-[var(--color-bg-default)] rounded-lg p-6 shadow-lg border border-[var(--color-border-default)] pointer-events-auto w-full", children: _jsx(ProgressBar, {}) }) })] }));
-    }
-    // Variante 2: Con children pero sin contentLoadingNode
-    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 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, {}) }) }));
-    }
-    // Variante 3: Sin contentLoadingNode ni children - solo loader
-    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.js

@@ -1,139 +0,0 @@
-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/Skeleton.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { twMerge } from "tailwind-merge";
-/**
- * Componente Skeleton para mostrar estados de carga.
- * Consiste en un div con una animación de pulso y un fondo grisáceo por defecto.
- */
-export const Skeleton = ({ className }) => {
-    return (_jsx("div", { className: twMerge("animate-pulse bg-[var(--color-bg-secondary)] rounded-md", className) }));
-};