flysoft-react-ui 0.2.10 → 0.3.0

package/README.md

@@ -123,28 +123,6 @@ 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/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAUA,OAAO,aAAa,CAAC;AAgCrB,iBAAS,GAAG,4CAkBX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAUA,OAAO,aAAa,CAAC;AAoCrB,iBAAS,GAAG,4CAkBX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -5,8 +5,9 @@ import { ThemeProvider } from "./index";
 import "./index.css";
 import { DocsMenu } from "./docs/DocsMenu";
 import DocsRouter from "./docs/DocsRouter";
+import { AuthDocs } from "./docs/AuthDocs.tsx/AuthDocs";
 function HomeContent() {
-    return (_jsx(_Fragment, { children: _jsx(Card, { title: "Empleados", className: "bg-gray-50", children: _jsx(Card, { className: "w-1/2", title: "FALCONE WALTER ALDO", subtitle: "3558-03 - Titular", footer: _jsx(Button, { children: "Ver" }), headerActions: _jsxs(_Fragment, { children: [_jsx(Badge, { variant: "secondary", children: "OSOCNA" }), _jsx(Badge, { variant: "secondary", children: "B\u00C1SICO" })] }), children: _jsxs(Collection, { direction: "row", gap: "1rem", wrap: true, children: [_jsx(DataField, { label: "Cuil", value: "20179902711" }), _jsx(DataField, { label: "Doc", value: "17990271" }), _jsx(DataField, { label: "F Nac", value: "23/06/1966" }), _jsx(DataField, { label: "F Alta", value: "01/03/2012" })] }) }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Empleados", className: "bg-gray-50", children: _jsx(Card, { className: "w-1/2", title: "FALCONE WALTER ALDO", subtitle: "3558-03 - Titular", footer: _jsx(Button, { children: "Ver" }), headerActions: _jsxs(_Fragment, { children: [_jsx(Badge, { variant: "secondary", children: "OSOCNA" }), _jsx(Badge, { variant: "secondary", children: "B\u00C1SICO" })] }), children: _jsxs(Collection, { direction: "row", gap: "1rem", wrap: true, children: [_jsx(DataField, { label: "Cuil", value: "20179902711" }), _jsx(DataField, { label: "Doc", value: "17990271" }), _jsx(DataField, { label: "F Nac", value: "23/06/1966" }), _jsx(DataField, { label: "F Alta", value: "01/03/2012" })] }) }) }), _jsx("div", { children: _jsx(AuthDocs, {}) })] }));
 }
 function App() {
     return (_jsx(ThemeProvider, { initialTheme: "light", forceInitialTheme: false, children: _jsx(AppLayout, { navBarDrawer: _jsx("h2", { children: _jsx(Link, { to: "/", children: "Flysoft React UI" }) }), leftDrawer: _jsx(DocsMenu, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(HomeContent, {}) }), _jsx(Route, { path: "/docs/*", element: _jsx(DocsRouter, {}) })] }) }) }));

package/dist/components/form-controls/Input.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 export const Input = ({ label, error, icon, iconPosition = "left", size = "md", className = "", id, ...props }) => {
     const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
-    const baseClasses = `
-    w-full border rounded-lg transition-colors focus:outline-none focus:ring-1
-    disabled:opacity-50 disabled:cursor-not-allowed
-    font-[var(--font-default)] text-[var(--color-text-primary)]
-    bg-[var(--color-bg-default)]
+    const baseClasses = `
+    w-full border rounded-lg transition-colors focus:outline-none focus:ring-1
+    disabled:opacity-50 disabled:cursor-not-allowed
+    font-[var(--font-default)] text-[var(--color-text-primary)]
+    bg-[var(--color-bg-default)]
   `;
     const sizeClasses = {
         sm: "px-3 py-1.5 text-sm",

package/dist/contexts/AuthContext.d.ts

@@ -0,0 +1,29 @@
+export interface AuthContextUserInterface {
+    id?: number;
+    name?: string;
+    aditionalData?: any;
+    token?: AuthTokenInterface;
+}
+export interface AuthTokenInterface {
+    accessToken?: string;
+    expires?: string;
+    tokenType?: string;
+    refreshToken?: string;
+}
+export interface AuthContextType {
+    user: AuthContextUserInterface | null;
+    login: (username: string, password: string) => Promise<void>;
+    logout: () => void;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+}
+export declare const AuthContext: import("react").Context<AuthContextType>;
+interface AuthProviderProps {
+    children: React.ReactNode;
+    getToken: (username: string, password: string) => Promise<AuthTokenInterface>;
+    getUserData: (token: string) => Promise<AuthContextUserInterface>;
+    removeToken?: (token: string) => Promise<void>;
+}
+export declare const AuthProvider: React.FC<AuthProviderProps>;
+export {};
+//# sourceMappingURL=AuthContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthContext.d.ts","sourceRoot":"","sources":["../../src/contexts/AuthContext.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,wBAAwB;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,wBAAwB,GAAG,IAAI,CAAC;IACtC,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,0CAMtB,CAAC;AAiBH,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC9E,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,wBAAwB,CAAC,CAAC;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4DpD,CAAC"}

package/dist/contexts/AuthContext.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useState } from "react";
+export const AuthContext = createContext({
+    user: null,
+    login: async () => { },
+    logout: async () => { },
+    isAuthenticated: false,
+    isLoading: false,
+});
+const initAuth = () => {
+    const authString = localStorage.getItem("auth");
+    if (!authString)
+        return {};
+    return JSON.parse(authString);
+};
+const storeAuth = (auth) => {
+    localStorage.setItem("auth", JSON.stringify(auth));
+};
+const removeStoredAuth = () => {
+    localStorage.removeItem("auth");
+};
+export const AuthProvider = ({ children, getToken, getUserData, removeToken, }) => {
+    const [user, setUser] = useState(null);
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    useEffect(() => {
+        const auth = initAuth();
+        if (auth.id) {
+            setUser(auth);
+            setIsAuthenticated(true);
+        }
+        else {
+            setIsAuthenticated(false);
+        }
+    }, []);
+    const login = async (username, password) => {
+        setIsLoading(true);
+        const token = await getToken(username, password);
+        if (token.accessToken) {
+            const { id, name, aditionalData } = await getUserData(token.accessToken);
+            const userData = {
+                id,
+                name,
+                aditionalData,
+                token,
+            };
+            setUser(userData);
+            storeAuth(userData);
+            setIsAuthenticated(true);
+        }
+        setIsLoading(false);
+    };
+    const logout = async () => {
+        removeStoredAuth();
+        setUser(null);
+        if (removeToken && user?.token?.accessToken) {
+            await removeToken(user.token.accessToken);
+        }
+        setIsAuthenticated(false);
+    };
+    return (_jsx(AuthContext.Provider, { value: { user, isAuthenticated, isLoading, login, logout }, children: children }));
+};

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

package/dist/contexts/ThemeContext.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import React, { createContext, useContext, useEffect, useMemo, useState, } from "react";
 import { themes, defaultTheme } from "./presets";
 const ThemeContext = createContext(undefined);
 const toKebabCase = (value) => value.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -67,55 +67,40 @@ 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, container) => {
+    const applyThemeToCSS = (theme) => {
         if (typeof document === "undefined")
             return;
-        // Priorizar el contenedor si está disponible, sino usar :root
-        const target = container || document.documentElement;
+        const root = document.documentElement;
         // Apply color variables
         Object.entries(theme.colors).forEach(([key, value]) => {
             const cssVarName = `--flysoft-${key
                 .replace(/([A-Z])/g, "-$1")
                 .toLowerCase()}`;
-            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);
-            }
+            root.style.setProperty(cssVarName, value);
         });
         // Apply shadow variables
         Object.entries(theme.shadows).forEach(([key, value]) => {
             const cssVarName = `--flysoft-shadow-${key}`;
-            target.style.setProperty(cssVarName, value);
+            root.style.setProperty(cssVarName, value);
         });
         // Apply radius variables
         Object.entries(theme.radius).forEach(([key, value]) => {
             const cssVarName = `--flysoft-radius-${key}`;
-            target.style.setProperty(cssVarName, value);
+            root.style.setProperty(cssVarName, value);
         });
         // Apply spacing variables
         Object.entries(theme.spacing).forEach(([key, value]) => {
             const cssVarName = `--flysoft-spacing-${key}`;
-            target.style.setProperty(cssVarName, value);
+            root.style.setProperty(cssVarName, value);
         });
         // Apply font variables
         Object.entries(theme.fonts).forEach(([key, value]) => {
             const cssVarName = `--flysoft-font-${key}`;
-            target.style.setProperty(cssVarName, value);
+            root.style.setProperty(cssVarName, value);
         });
         // Set theme name as data attribute for CSS targeting
-        if (container) {
-            container.setAttribute("data-theme", theme.name);
-        }
-        else {
-            document.documentElement.setAttribute("data-theme", theme.name);
-        }
+        root.setAttribute("data-theme", theme.name);
         // Apply background and text colors to body for better integration
         const body = document.body;
         if (body) {
@@ -145,29 +130,16 @@ export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "
         if (typeof window !== "undefined") {
             localStorage.setItem(storageKey, JSON.stringify(newTheme));
         }
-        // Apply to CSS usando el ref si está disponible
-        applyThemeToCSS(newTheme, containerRef.current);
+        // Apply to CSS
+        applyThemeToCSS(newTheme);
     };
     // Function to reset to initial theme (the one passed as initialTheme prop)
     const resetToDefault = () => {
         setTheme(getInitialTheme());
     };
-    // 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
+    // Apply theme on mount and when theme changes
     useEffect(() => {
-        if (containerRef.current) {
-            applyThemeToCSS(currentTheme, containerRef.current);
-        }
+        applyThemeToCSS(currentTheme);
     }, [currentTheme]);
     // Check if current theme is dark
     const isDark = currentTheme.name === "dark";
@@ -180,7 +152,7 @@ export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "
         resetToDefault,
         isDark,
     };
-    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx("div", { ref: containerRef, className: "flysoft-theme-reset", style: themeResetStyles, "data-theme": currentTheme.name, children: children }) }));
+    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx("div", { 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

package/dist/contexts/index.d.ts

@@ -2,4 +2,6 @@ export { ThemeProvider, useTheme, useThemeContext } from "./ThemeContext";
 export { useThemeOverride, useTemporaryOverride, } from "../hooks/useThemeOverride";
 export type { Theme, ThemeContextType, ThemeOverride } from "./types";
 export { lightTheme, darkTheme, blueTheme, greenTheme, defaultTheme, themes, } from "./presets";
+export { AuthProvider, AuthContext } from "./AuthContext";
+export type { AuthContextType, AuthContextUserInterface, AuthTokenInterface, } from "./AuthContext";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGtE,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,MAAM,GACP,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGtE,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,MAAM,GACP,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EACV,eAAe,EACf,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,eAAe,CAAC"}

package/dist/contexts/index.js

@@ -3,3 +3,5 @@ export { ThemeProvider, useTheme, useThemeContext } from "./ThemeContext";
 export { useThemeOverride, useTemporaryOverride, } from "../hooks/useThemeOverride";
 // Preset themes
 export { lightTheme, darkTheme, blueTheme, greenTheme, defaultTheme, themes, } from "./presets";
+// Auth system exports
+export { AuthProvider, AuthContext } from "./AuthContext";

package/dist/docs/AuthDocs.tsx/AuthDocs.d.ts

@@ -0,0 +1,2 @@
+export declare const AuthDocs: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AuthDocs.d.ts.map

package/dist/docs/AuthDocs.tsx/AuthDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthDocs.d.ts","sourceRoot":"","sources":["../../../src/docs/AuthDocs.tsx/AuthDocs.tsx"],"names":[],"mappings":"AAkDA,eAAO,MAAM,QAAQ,+CAMpB,CAAC"}

package/dist/docs/AuthDocs.tsx/AuthDocs.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AuthProvider, } from "../../contexts/AuthContext";
+import { apiClient } from "../../services/apiClient";
+import { AuthDocsContent } from "./AuthDocsContent";
+const getToken = async (username, password) => {
+    const { access_token, expires, token_type, refresh_token, } = await apiClient.post({
+        url: "https://devmanager.osocna.com.ar/backend/api/users/login",
+        body: {
+            username,
+            password,
+        },
+    });
+    return {
+        accessToken: access_token,
+        tokenType: token_type,
+        expires,
+        refreshToken: refresh_token,
+    };
+};
+const getUserData = async (token) => {
+    const { id, name } = await apiClient.get({
+        url: "https://devmanager.osocna.com.ar/backend/api/users/userdata",
+        headers: {
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    return {
+        id,
+        name,
+        aditionalData: {
+            role: "admin",
+        },
+    };
+};
+export const AuthDocs = () => {
+    return (_jsx(AuthProvider, { getToken: getToken, getUserData: getUserData, children: _jsx(AuthDocsContent, {}) }));
+};

package/dist/docs/AuthDocs.tsx/AuthDocsContent.d.ts

@@ -0,0 +1,2 @@
+export declare const AuthDocsContent: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AuthDocsContent.d.ts.map

package/dist/docs/AuthDocs.tsx/AuthDocsContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthDocsContent.d.ts","sourceRoot":"","sources":["../../../src/docs/AuthDocs.tsx/AuthDocsContent.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,+CA2B3B,CAAC"}

package/dist/docs/AuthDocs.tsx/AuthDocsContent.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { AuthContext } from "../../contexts/AuthContext";
+import { Button } from "../../components";
+export const AuthDocsContent = () => {
+    const { login, isAuthenticated, isLoading, user, logout } = useContext(AuthContext);
+    const handleLogin = async () => {
+        await login("wursten.alexis@gmail.com", "Oscn1138");
+    };
+    const handleLogout = () => {
+        logout();
+    };
+    return isAuthenticated ? (_jsxs("div", { children: [_jsx("h1", { children: "Bienvenido" }), JSON.stringify(user), _jsx("div", { children: _jsx(Button, { onClick: handleLogout, children: "Logout" }) })] })) : isLoading ? (_jsx("div", { children: "Cargando..." })) : (_jsx("div", { children: _jsx(Button, { onClick: handleLogin, children: "Login" }) }));
+};