flysoft-react-ui 0.2.7 → 0.2.9

package/README.md

@@ -123,6 +123,28 @@ npx tailwindcss init -p
 
 La librería incluye FontAwesome 5. Si quieres usar tu propia instalación, puedes sobrescribir los estilos.
 
+**⚠️ Importante:** Si usas FontAwesome en tu proyecto, asegúrate de:
+
+1. Importar los estilos de `flysoft-react-ui` **después** de FontAwesome (si es posible)
+2. Usar `ThemeProvider` para envolver tu aplicación (esto evita conflictos de variables CSS)
+
+```tsx
+// Orden recomendado de importación
+import "fontawesome/css/all.min.css"; // Primero FontAwesome
+import "flysoft-react-ui/styles"; // Luego flysoft-react-ui
+
+// En tu App.tsx
+import { ThemeProvider } from "flysoft-react-ui";
+
+function App() {
+  return (
+    <ThemeProvider initialTheme="light">{/* Tu aplicación */}</ThemeProvider>
+  );
+}
+```
+
+El `ThemeProvider` aplica automáticamente las variables CSS con mayor especificidad, evitando que FontAwesome sobrescriba los colores del tema (como `gray-200`).
+
 ## 🎨 Sistema de Temas
 
 Flysoft React UI incluye un sistema completo de temas personalizables que permite cambiar dinámicamente la apariencia de todos los componentes.

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2CvD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgKtD,CAAC;AAIF,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC;AAIF,eAAO,MAAM,eAAe,eAG3B,CAAC"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2CvD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6LtD,CAAC;AAIF,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC;AAIF,eAAO,MAAM,eAAe,eAG3B,CAAC"}

package/dist/contexts/ThemeContext.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useEffect, useMemo, useState, } from "react";
+import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { themes, defaultTheme } from "./presets";
 const ThemeContext = createContext(undefined);
 const toKebabCase = (value) => value.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -67,40 +67,55 @@ export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "
         return getInitialTheme();
     });
     const [currentThemeName, setCurrentThemeName] = useState(currentTheme.name);
+    const containerRef = useRef(null);
     // Function to apply theme to CSS variables
-    const applyThemeToCSS = (theme) => {
+    const applyThemeToCSS = (theme, container) => {
         if (typeof document === "undefined")
             return;
-        const root = document.documentElement;
+        // Priorizar el contenedor si está disponible, sino usar :root
+        const target = container || document.documentElement;
         // Apply color variables
         Object.entries(theme.colors).forEach(([key, value]) => {
             const cssVarName = `--flysoft-${key
                 .replace(/([A-Z])/g, "-$1")
                 .toLowerCase()}`;
-            root.style.setProperty(cssVarName, value);
+            target.style.setProperty(cssVarName, value);
+            // También sobrescribir variables genéricas que FontAwesome pueda usar
+            // Esto asegura que nuestras variables tengan prioridad
+            if (key.startsWith("gray")) {
+                const genericVarName = `--color-${key
+                    .replace(/([A-Z])/g, "-$1")
+                    .toLowerCase()}`;
+                target.style.setProperty(genericVarName, value);
+            }
         });
         // Apply shadow variables
         Object.entries(theme.shadows).forEach(([key, value]) => {
             const cssVarName = `--flysoft-shadow-${key}`;
-            root.style.setProperty(cssVarName, value);
+            target.style.setProperty(cssVarName, value);
         });
         // Apply radius variables
         Object.entries(theme.radius).forEach(([key, value]) => {
             const cssVarName = `--flysoft-radius-${key}`;
-            root.style.setProperty(cssVarName, value);
+            target.style.setProperty(cssVarName, value);
         });
         // Apply spacing variables
         Object.entries(theme.spacing).forEach(([key, value]) => {
             const cssVarName = `--flysoft-spacing-${key}`;
-            root.style.setProperty(cssVarName, value);
+            target.style.setProperty(cssVarName, value);
         });
         // Apply font variables
         Object.entries(theme.fonts).forEach(([key, value]) => {
             const cssVarName = `--flysoft-font-${key}`;
-            root.style.setProperty(cssVarName, value);
+            target.style.setProperty(cssVarName, value);
         });
         // Set theme name as data attribute for CSS targeting
-        root.setAttribute("data-theme", theme.name);
+        if (container) {
+            container.setAttribute("data-theme", theme.name);
+        }
+        else {
+            document.documentElement.setAttribute("data-theme", theme.name);
+        }
         // Apply background and text colors to body for better integration
         const body = document.body;
         if (body) {
@@ -130,16 +145,29 @@ export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "
         if (typeof window !== "undefined") {
             localStorage.setItem(storageKey, JSON.stringify(newTheme));
         }
-        // Apply to CSS
-        applyThemeToCSS(newTheme);
+        // Apply to CSS usando el ref si está disponible
+        applyThemeToCSS(newTheme, containerRef.current);
     };
     // Function to reset to initial theme (the one passed as initialTheme prop)
     const resetToDefault = () => {
         setTheme(getInitialTheme());
     };
-    // Apply theme on mount and when theme changes
+    // Apply theme on mount and when theme changes using useLayoutEffect
+    // para asegurar que se aplique antes del paint y con mayor prioridad
+    useLayoutEffect(() => {
+        if (containerRef.current) {
+            applyThemeToCSS(currentTheme, containerRef.current);
+        }
+        else {
+            // Fallback a :root si el contenedor aún no está montado
+            applyThemeToCSS(currentTheme);
+        }
+    }, [currentTheme]);
+    // También aplicar después del mount para asegurar que se actualice
     useEffect(() => {
-        applyThemeToCSS(currentTheme);
+        if (containerRef.current) {
+            applyThemeToCSS(currentTheme, containerRef.current);
+        }
     }, [currentTheme]);
     // Check if current theme is dark
     const isDark = currentTheme.name === "dark";
@@ -152,7 +180,7 @@ export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "
         resetToDefault,
         isDark,
     };
-    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx("div", { className: "flysoft-theme-reset", style: themeResetStyles, "data-theme": currentTheme.name, children: children }) }));
+    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx("div", { ref: containerRef, className: "flysoft-theme-reset", style: themeResetStyles, "data-theme": currentTheme.name, children: children }) }));
 };
 // Hook to use theme context
 // eslint-disable-next-line react-refresh/only-export-components