xertica-ui 1.3.7 → 1.3.8

package/components/Sidebar.tsx

@@ -74,6 +74,8 @@ interface SidebarProps {
   location: { pathname: string };
   navigate: (path: string) => void;
   routes: RouteConfig[];
+  logo?: React.ReactNode;
+  logoCollapsed?: React.ReactNode;
 }
 
 export function Sidebar({
@@ -84,6 +86,8 @@ export function Sidebar({
   location,
   navigate,
   routes,
+  logo,
+  logoCollapsed,
 }: SidebarProps) {
   const navRef = useRef<HTMLDivElement>(null);
   const [hasOverflow, setHasOverflow] = useState(false);
@@ -318,15 +322,19 @@ export function Sidebar({
           >
             <div className="flex items-center justify-center flex-shrink-0">
               {expanded ? (
-                <XerticaLogo
-                  className="h-5 w-auto"
-                  variant="white"
-                />
+                logo || (
+                  <XerticaLogo
+                    className="h-5 w-auto"
+                    variant="white"
+                  />
+                )
               ) : (
-                <XerticaXLogo
-                  className="h-5 w-auto"
-                  variant="white"
-                />
+                logoCollapsed || (
+                  <XerticaXLogo
+                    className="h-5 w-auto"
+                    variant="white"
+                  />
+                )
               )}
             </div>
           </div>

package/components/examples/ApiKeyMapExample.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Map } from '../ui/map';
+import { RouteMap } from '../ui/route-map';
+
+export function ApiKeyMapExample() {
+    const [key, setKey] = React.useState('');
+    const [appliedKey, setAppliedKey] = React.useState('');
+
+    const handleApply = () => {
+        if (key) setAppliedKey(key);
+    };
+
+    return (
+        <div className="space-y-8 p-6">
+            <div className="space-y-4">
+                <h2 className="text-2xl font-bold">Map with Explicit API Key</h2>
+                <p className="text-muted-foreground">
+                    Enter a Google Maps API Key to load the maps below. This simulates a scenario where the key is provided dynamically or via props, overriding/fallback for the global context.
+                </p>
+
+                <div className="flex gap-4 max-w-xl">
+                    <input
+                        type="text"
+                        value={key}
+                        onChange={(e) => setKey(e.target.value)}
+                        placeholder="Enter Google Maps API Key"
+                        className="flex-1 px-4 py-2 border rounded-md bg-background"
+                    />
+                    <button
+                        onClick={handleApply}
+                        className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+                    >
+                        Load Maps
+                    </button>
+                </div>
+            </div>
+
+            {appliedKey ? (
+                <div className="grid md:grid-cols-2 gap-8">
+                    <div className="space-y-4">
+                        <h3 className="font-semibold">Standard Map</h3>
+                        <Map
+                            apiKey={appliedKey}
+                            height="400px"
+                            center={{ lat: -23.5505, lng: -46.6333 }}
+                            zoom={12}
+                            markers={[
+                                { position: { lat: -23.5505, lng: -46.6333 }, title: 'São Paulo' }
+                            ]}
+                        />
+                    </div>
+
+                    <div className="space-y-4">
+                        <h3 className="font-semibold">Route Map</h3>
+                        <RouteMap
+                            apiKey={appliedKey}
+                            height="400px"
+                            origin={{ lat: -23.5505, lng: -46.6333 }}
+                            destination={{ lat: -23.6005, lng: -46.6833 }}
+                            travelMode="DRIVING"
+                        />
+                    </div>
+                </div>
+            ) : (
+                <div className="p-12 border-2 border-dashed rounded-lg text-center text-muted-foreground">
+                    Enter an API Key above to render the maps.
+                </div>
+            )}
+        </div>
+    );
+}

package/components/examples/SidebarLogoExample.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { Sidebar, RouteConfig } from '../Sidebar';
+import { Home, Settings, User } from 'lucide-react';
+import { BrowserRouter, useNavigate, useLocation } from 'react-router';
+
+// Wrapper wrapper to provide router context
+export function SidebarLogoExample() {
+    return (
+        <BrowserRouter>
+            <SidebarLogoContent />
+        </BrowserRouter>
+    );
+}
+
+function SidebarLogoContent() {
+    const [expanded, setExpanded] = useState(true);
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const routes: RouteConfig[] = [
+        { path: '/home', label: 'Home', icon: Home },
+        { path: '/profile', label: 'Profile', icon: User },
+        { path: '/settings', label: 'Settings', icon: Settings },
+    ];
+
+    const CustomLogo = (
+        <div className="flex items-center gap-2 font-bold text-xl text-primary">
+            <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-primary-foreground">
+                C
+            </div>
+            <span>CustomBrand</span>
+        </div>
+    );
+
+    const CustomLogoCollapsed = (
+        <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-primary-foreground font-bold">
+            C
+        </div>
+    );
+
+    return (
+        <div className="flex h-[500px] border rounded-lg overflow-hidden bg-background">
+            <Sidebar
+                expanded={expanded}
+                onToggle={() => setExpanded(!expanded)}
+                user={{ email: 'test@example.com' }}
+                onLogout={() => console.log('Logout')}
+                location={location}
+                navigate={navigate}
+                routes={routes}
+                logo={CustomLogo}
+                logoCollapsed={CustomLogoCollapsed}
+            />
+            <div className={`flex-1 p-8 transition-all duration-300 ${expanded ? 'ml-64' : 'ml-20'}`}>
+                <h1 className="text-2xl font-bold mb-4">Sidebar with Custom Logo</h1>
+                <p>This example demonstrates passing a custom logo component to the Sidebar.</p>
+                <div className="mt-8 p-4 border rounded bg-muted/20">
+                    <p className="text-sm text-muted-foreground">
+                        Try toggling the sidebar to see the collapsed logo version.
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

package/components/ui/google-maps-loader.tsx

@@ -6,11 +6,13 @@ import { GOOGLE_MAPS_LIBRARIES, GOOGLE_MAPS_ID } from './map-config';
 interface GoogleMapsContextType {
   isLoaded: boolean;
   loadError: Error | undefined;
+  load: (apiKey: string) => Promise<void>;
 }
 
 const GoogleMapsContext = createContext<GoogleMapsContextType>({
   isLoaded: false,
   loadError: undefined,
+  load: () => Promise.resolve(),
 });
 
 // Singleton global para prevenir múltiplos carregamentos
@@ -57,7 +59,7 @@ function removeExistingScript(): void {
   }
 
   // Remover script existente
-  const existingScript = document.querySelector(`script[src*=\"maps.googleapis.com/maps/api/js\"]`);
+  const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
   if (existingScript) {
     existingScript.remove();
   }
@@ -202,6 +204,7 @@ function getOrCreateSingleton() {
       isLoaded: isPreloaded,
       loadError: undefined,
       listeners: new Set(),
+      scriptElement: undefined
     };
   }
 
@@ -218,7 +221,24 @@ function updateSingleton(state: Partial<GoogleMapsContextType>) {
   if (state.isLoaded !== undefined) singleton.isLoaded = state.isLoaded;
   if (state.loadError !== undefined) singleton.loadError = state.loadError;
 
-  const newState = { isLoaded: singleton.isLoaded, loadError: singleton.loadError };
+  // Prepare safe state to notify
+  const newState: GoogleMapsContextType = {
+    isLoaded: singleton.isLoaded,
+    loadError: singleton.loadError,
+    load: async (apiKey: string) => {
+      // Allow manual loading call via stored function in context if needed,
+      // though typically we use the direct export or loadGoogleMapsScript
+      if (singleton.isLoaded) return;
+      try {
+        await loadGoogleMapsScript(apiKey);
+        updateSingleton({ isLoaded: true, loadError: undefined });
+      } catch (error: any) {
+        updateSingleton({ isLoaded: false, loadError: error });
+        throw error;
+      }
+    }
+  };
+
   singleton.listeners.forEach(listener => listener(newState));
 }
 
@@ -228,11 +248,25 @@ function updateSingleton(state: Partial<GoogleMapsContextType>) {
 const SingletonLoaderWrapper = ({ children }: { children: ReactNode }) => {
   const [state, setState] = useState<GoogleMapsContextType>(() => {
     const singleton = getOrCreateSingleton();
-    if (!singleton) return { isLoaded: false, loadError: undefined };
+
+    // Default load function that triggers the script load
+    const loadFn = async (apiKey: string) => {
+      if (singleton?.isLoaded) return;
+      try {
+        await loadGoogleMapsScript(apiKey);
+        updateSingleton({ isLoaded: true, loadError: undefined });
+      } catch (error: any) {
+        updateSingleton({ isLoaded: false, loadError: error });
+        throw error;
+      }
+    };
+
+    if (!singleton) return { isLoaded: false, loadError: undefined, load: loadFn };
 
     return {
       isLoaded: singleton.isLoaded,
       loadError: singleton.loadError,
+      load: loadFn
     };
   });
 
@@ -246,8 +280,12 @@ const SingletonLoaderWrapper = ({ children }: { children: ReactNode }) => {
 
     singleton.listeners.add(listener);
 
-    // Sincronizar estado inicial
-    listener({ isLoaded: singleton.isLoaded, loadError: singleton.loadError });
+    // Sincronizar estado inicial e função de load
+    listener({
+      isLoaded: singleton.isLoaded,
+      loadError: singleton.loadError,
+      load: state.load
+    });
 
     return () => {
       singleton.listeners.delete(listener);
@@ -264,7 +302,7 @@ const SingletonLoaderWrapper = ({ children }: { children: ReactNode }) => {
 /**
  * Componente que carrega o Google Maps manualmente
  */
-const LoaderInitializer = () => {
+const LoaderInitializer = ({ apiKey }: { apiKey?: string }) => {
   const hasInitializedRef = useRef(false);
 
   useEffect(() => {
@@ -285,10 +323,11 @@ const LoaderInitializer = () => {
 
     hasInitializedRef.current = true;
 
-    const apiKey = getInitialApiKey();
+    // Use prop key OR get from storage
+    const keyToUse = apiKey || getInitialApiKey();
 
     // Se não houver API key, apenas marcar como não carregado (sem erro)
-    if (!apiKey) {
+    if (!keyToUse) {
       updateSingleton({
         isLoaded: false,
         loadError: undefined // Não definir erro quando não há API key
@@ -296,25 +335,30 @@ const LoaderInitializer = () => {
       return;
     }
 
-    loadGoogleMapsScript(apiKey)
+    loadGoogleMapsScript(keyToUse)
       .then(() => {
         updateSingleton({ isLoaded: true, loadError: undefined });
       })
       .catch((error) => {
         updateSingleton({ isLoaded: false, loadError: error });
       });
-  }, []);
+  }, [apiKey]);
 
   return null;
 };
 
+interface GoogleMapsLoaderProviderProps {
+  children: ReactNode;
+  apiKey?: string;
+}
+
 /**
  * GoogleMapsLoaderProvider
  * 
  * Provider global que gerencia o carregamento da API do Google Maps.
  * Usa carregamento manual do script para evitar conflitos com custom elements.
  */
-export const GoogleMapsLoaderProvider = ({ children }: { children: ReactNode }) => {
+export const GoogleMapsLoaderProvider = ({ children, apiKey }: GoogleMapsLoaderProviderProps) => {
   const [shouldInitialize] = useState(() => {
     const singleton = getOrCreateSingleton();
     if (!singleton) return false;
@@ -330,7 +374,7 @@ export const GoogleMapsLoaderProvider = ({ children }: { children: ReactNode })
 
   return (
     <>
-      {shouldInitialize && <LoaderInitializer />}
+      {shouldInitialize && <LoaderInitializer apiKey={apiKey} />}
       <SingletonLoaderWrapper>{children}</SingletonLoaderWrapper>
     </>
   );

package/components/ui/map.tsx

@@ -96,6 +96,14 @@ const MapContent = React.forwardRef<HTMLDivElement, MapProps & { apiKey: string
 
     // Initialize map once
     useEffect(() => {
+      // If we have an apiKey and not loaded, try to load it
+      if (!isLoaded && apiKey && !loadError) {
+        const { load } = useGoogleMapsLoader();
+        if (load) {
+          load(apiKey).catch((console.error));
+        }
+      }
+
       if (!isLoaded || !mapContainerRef.current || isInitializedRef.current) return;
 
       isInitializedRef.current = true;
@@ -121,7 +129,7 @@ const MapContent = React.forwardRef<HTMLDivElement, MapProps & { apiKey: string
         isInitializedRef.current = false;
         mapRef.current = null;
       };
-    }, [isLoaded]);
+    }, [isLoaded, apiKey]);
 
     // Update markers
     useEffect(() => {

package/components/ui/route-map.tsx

@@ -47,6 +47,14 @@ const RouteMapContent = React.forwardRef<HTMLDivElement, RouteMapProps & { apiKe
 
     // Initialize map once
     useEffect(() => {
+      // If we have an apiKey and not loaded, try to load it
+      if (!isLoaded && apiKey && !loadError) {
+        const { load } = useGoogleMapsLoader();
+        if (load) {
+          load(apiKey).catch((console.error));
+        }
+      }
+
       if (!isLoaded || !mapContainerRef.current || isInitializedRef.current) return;
 
       isInitializedRef.current = true;
@@ -85,7 +93,7 @@ const RouteMapContent = React.forwardRef<HTMLDivElement, RouteMapProps & { apiKe
         isInitializedRef.current = false;
         mapRef.current = null;
       };
-    }, [isLoaded]);
+    }, [isLoaded, apiKey]);
 
     // Calculate route
     useEffect(() => {

package/dist/components/Sidebar.d.ts

@@ -17,6 +17,8 @@ interface SidebarProps {
     };
     navigate: (path: string) => void;
     routes: RouteConfig[];
+    logo?: React.ReactNode;
+    logoCollapsed?: React.ReactNode;
 }
-export declare function Sidebar({ expanded, onToggle, user, onLogout, location, navigate, routes, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ expanded, onToggle, user, onLogout, location, navigate, routes, logo, logoCollapsed, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/google-maps-loader.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 interface GoogleMapsContextType {
     isLoaded: boolean;
     loadError: Error | undefined;
+    load: (apiKey: string) => Promise<void>;
 }
 declare global {
     interface Window {
@@ -13,15 +14,17 @@ declare global {
         };
     }
 }
+interface GoogleMapsLoaderProviderProps {
+    children: ReactNode;
+    apiKey?: string;
+}
 /**
  * GoogleMapsLoaderProvider
  *
  * Provider global que gerencia o carregamento da API do Google Maps.
  * Usa carregamento manual do script para evitar conflitos com custom elements.
  */
-export declare const GoogleMapsLoaderProvider: ({ children }: {
-    children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const GoogleMapsLoaderProvider: ({ children, apiKey }: GoogleMapsLoaderProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useGoogleMapsLoader: () => GoogleMapsContextType;
 /**
  * Recarrega o Google Maps com uma nova API key

package/dist/index.es.js

@@ -47735,7 +47735,8 @@ const GOOGLE_MAPS_LIBRARIES = ["marker", "places", "geometry", "drawing"];
 const GOOGLE_MAPS_ID = "xertica-google-map-script";
 const GoogleMapsContext = createContext({
   isLoaded: false,
-  loadError: void 0
+  loadError: void 0,
+  load: () => Promise.resolve()
 });
 function getInitialApiKey() {
   if (typeof window === "undefined") return void 0;
@@ -47856,7 +47857,8 @@ function getOrCreateSingleton() {
     window.__XERTICA_GOOGLE_MAPS_LOADER__ = {
       isLoaded: isPreloaded,
       loadError: void 0,
-      listeners: /* @__PURE__ */ new Set()
+      listeners: /* @__PURE__ */ new Set(),
+      scriptElement: void 0
     };
   }
   return window.__XERTICA_GOOGLE_MAPS_LOADER__;
@@ -47866,16 +47868,40 @@ function updateSingleton(state) {
   if (!singleton) return;
   if (state.isLoaded !== void 0) singleton.isLoaded = state.isLoaded;
   if (state.loadError !== void 0) singleton.loadError = state.loadError;
-  const newState = { isLoaded: singleton.isLoaded, loadError: singleton.loadError };
+  const newState = {
+    isLoaded: singleton.isLoaded,
+    loadError: singleton.loadError,
+    load: async (apiKey) => {
+      if (singleton.isLoaded) return;
+      try {
+        await loadGoogleMapsScript(apiKey);
+        updateSingleton({ isLoaded: true, loadError: void 0 });
+      } catch (error) {
+        updateSingleton({ isLoaded: false, loadError: error });
+        throw error;
+      }
+    }
+  };
   singleton.listeners.forEach((listener) => listener(newState));
 }
 const SingletonLoaderWrapper = ({ children }) => {
   const [state, setState] = useState(() => {
     const singleton = getOrCreateSingleton();
-    if (!singleton) return { isLoaded: false, loadError: void 0 };
+    const loadFn = async (apiKey) => {
+      if (singleton == null ? void 0 : singleton.isLoaded) return;
+      try {
+        await loadGoogleMapsScript(apiKey);
+        updateSingleton({ isLoaded: true, loadError: void 0 });
+      } catch (error) {
+        updateSingleton({ isLoaded: false, loadError: error });
+        throw error;
+      }
+    };
+    if (!singleton) return { isLoaded: false, loadError: void 0, load: loadFn };
     return {
       isLoaded: singleton.isLoaded,
-      loadError: singleton.loadError
+      loadError: singleton.loadError,
+      load: loadFn
     };
   });
   useEffect(() => {
@@ -47885,14 +47911,18 @@ const SingletonLoaderWrapper = ({ children }) => {
       setState(newState);
     };
     singleton.listeners.add(listener);
-    listener({ isLoaded: singleton.isLoaded, loadError: singleton.loadError });
+    listener({
+      isLoaded: singleton.isLoaded,
+      loadError: singleton.loadError,
+      load: state.load
+    });
     return () => {
       singleton.listeners.delete(listener);
     };
   }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(GoogleMapsContext.Provider, { value: state, children });
 };
-const LoaderInitializer = () => {
+const LoaderInitializer = ({ apiKey }) => {
   const hasInitializedRef = useRef(false);
   useEffect(() => {
     if (hasInitializedRef.current) {
@@ -47906,8 +47936,8 @@ const LoaderInitializer = () => {
       return;
     }
     hasInitializedRef.current = true;
-    const apiKey = getInitialApiKey();
-    if (!apiKey) {
+    const keyToUse = apiKey || getInitialApiKey();
+    if (!keyToUse) {
       updateSingleton({
         isLoaded: false,
         loadError: void 0
@@ -47915,15 +47945,15 @@ const LoaderInitializer = () => {
       });
       return;
     }
-    loadGoogleMapsScript(apiKey).then(() => {
+    loadGoogleMapsScript(keyToUse).then(() => {
       updateSingleton({ isLoaded: true, loadError: void 0 });
     }).catch((error) => {
       updateSingleton({ isLoaded: false, loadError: error });
     });
-  }, []);
+  }, [apiKey]);
   return null;
 };
-const GoogleMapsLoaderProvider = ({ children }) => {
+const GoogleMapsLoaderProvider = ({ children, apiKey }) => {
   const [shouldInitialize] = useState(() => {
     const singleton = getOrCreateSingleton();
     if (!singleton) return false;
@@ -47934,7 +47964,7 @@ const GoogleMapsLoaderProvider = ({ children }) => {
     return true;
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    shouldInitialize && /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderInitializer, {}),
+    shouldInitialize && /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderInitializer, { apiKey }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SingletonLoaderWrapper, { children })
   ] });
 };
@@ -50509,7 +50539,9 @@ function Sidebar({
   onLogout,
   location,
   navigate,
-  routes: routes2
+  routes: routes2,
+  logo,
+  logoCollapsed
 }) {
   const navRef = useRef(null);
   const [hasOverflow, setHasOverflow] = useState(false);
@@ -50666,13 +50698,13 @@ function Sidebar({
           "div",
           {
             className: `flex items-center h-10 ${expanded ? "justify-center" : "justify-center"}`,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: expanded ? logo || /* @__PURE__ */ jsxRuntimeExports.jsx(
               XerticaLogo,
               {
                 className: "h-5 w-auto",
                 variant: "white"
               }
-            ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ) : logoCollapsed || /* @__PURE__ */ jsxRuntimeExports.jsx(
               XerticaXLogo,
               {
                 className: "h-5 w-auto",
@@ -69229,6 +69261,12 @@ const MapContent = React__default.forwardRef(
       }
     }, []);
     useEffect(() => {
+      if (!isLoaded && apiKey && !loadError) {
+        const { load } = useGoogleMapsLoader();
+        if (load) {
+          load(apiKey).catch(console.error);
+        }
+      }
       if (!isLoaded || !mapContainerRef.current || isInitializedRef.current) return;
       isInitializedRef.current = true;
       const map2 = new google.maps.Map(mapContainerRef.current, {
@@ -69250,7 +69288,7 @@ const MapContent = React__default.forwardRef(
         isInitializedRef.current = false;
         mapRef.current = null;
       };
-    }, [isLoaded]);
+    }, [isLoaded, apiKey]);
     useEffect(() => {
       var _a, _b;
       const map2 = mapRef.current;
@@ -69525,6 +69563,12 @@ const RouteMapContent = React__default.forwardRef(
     const isInitializedRef = useRef(false);
     const isCalculatingRef = useRef(false);
     useEffect(() => {
+      if (!isLoaded && apiKey && !loadError) {
+        const { load } = useGoogleMapsLoader();
+        if (load) {
+          load(apiKey).catch(console.error);
+        }
+      }
       if (!isLoaded || !mapContainerRef.current || isInitializedRef.current) return;
       isInitializedRef.current = true;
       const map2 = new google.maps.Map(mapContainerRef.current, {
@@ -69557,7 +69601,7 @@ const RouteMapContent = React__default.forwardRef(
         isInitializedRef.current = false;
         mapRef.current = null;
       };
-    }, [isLoaded]);
+    }, [isLoaded, apiKey]);
     useEffect(() => {
       const map2 = mapRef.current;
       const renderer = directionsRendererRef.current;

package/dist/index.umd.js

@@ -47754,7 +47754,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   const GOOGLE_MAPS_ID = "xertica-google-map-script";
   const GoogleMapsContext = React.createContext({
     isLoaded: false,
-    loadError: void 0
+    loadError: void 0,
+    load: () => Promise.resolve()
   });
   function getInitialApiKey() {
     if (typeof window === "undefined") return void 0;
@@ -47875,7 +47876,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       window.__XERTICA_GOOGLE_MAPS_LOADER__ = {
         isLoaded: isPreloaded,
         loadError: void 0,
-        listeners: /* @__PURE__ */ new Set()
+        listeners: /* @__PURE__ */ new Set(),
+        scriptElement: void 0
       };
     }
     return window.__XERTICA_GOOGLE_MAPS_LOADER__;
@@ -47885,16 +47887,40 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     if (!singleton) return;
     if (state.isLoaded !== void 0) singleton.isLoaded = state.isLoaded;
     if (state.loadError !== void 0) singleton.loadError = state.loadError;
-    const newState = { isLoaded: singleton.isLoaded, loadError: singleton.loadError };
+    const newState = {
+      isLoaded: singleton.isLoaded,
+      loadError: singleton.loadError,
+      load: async (apiKey) => {
+        if (singleton.isLoaded) return;
+        try {
+          await loadGoogleMapsScript(apiKey);
+          updateSingleton({ isLoaded: true, loadError: void 0 });
+        } catch (error) {
+          updateSingleton({ isLoaded: false, loadError: error });
+          throw error;
+        }
+      }
+    };
     singleton.listeners.forEach((listener) => listener(newState));
   }
   const SingletonLoaderWrapper = ({ children }) => {
     const [state, setState] = React.useState(() => {
       const singleton = getOrCreateSingleton();
-      if (!singleton) return { isLoaded: false, loadError: void 0 };
+      const loadFn = async (apiKey) => {
+        if (singleton == null ? void 0 : singleton.isLoaded) return;
+        try {
+          await loadGoogleMapsScript(apiKey);
+          updateSingleton({ isLoaded: true, loadError: void 0 });
+        } catch (error) {
+          updateSingleton({ isLoaded: false, loadError: error });
+          throw error;
+        }
+      };
+      if (!singleton) return { isLoaded: false, loadError: void 0, load: loadFn };
       return {
         isLoaded: singleton.isLoaded,
-        loadError: singleton.loadError
+        loadError: singleton.loadError,
+        load: loadFn
       };
     });
     React.useEffect(() => {
@@ -47904,14 +47930,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         setState(newState);
       };
       singleton.listeners.add(listener);
-      listener({ isLoaded: singleton.isLoaded, loadError: singleton.loadError });
+      listener({
+        isLoaded: singleton.isLoaded,
+        loadError: singleton.loadError,
+        load: state.load
+      });
       return () => {
         singleton.listeners.delete(listener);
       };
     }, []);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(GoogleMapsContext.Provider, { value: state, children });
   };
-  const LoaderInitializer = () => {
+  const LoaderInitializer = ({ apiKey }) => {
     const hasInitializedRef = React.useRef(false);
     React.useEffect(() => {
       if (hasInitializedRef.current) {
@@ -47925,8 +47955,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         return;
       }
       hasInitializedRef.current = true;
-      const apiKey = getInitialApiKey();
-      if (!apiKey) {
+      const keyToUse = apiKey || getInitialApiKey();
+      if (!keyToUse) {
         updateSingleton({
           isLoaded: false,
           loadError: void 0
@@ -47934,15 +47964,15 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         });
         return;
       }
-      loadGoogleMapsScript(apiKey).then(() => {
+      loadGoogleMapsScript(keyToUse).then(() => {
         updateSingleton({ isLoaded: true, loadError: void 0 });
       }).catch((error) => {
         updateSingleton({ isLoaded: false, loadError: error });
       });
-    }, []);
+    }, [apiKey]);
     return null;
   };
-  const GoogleMapsLoaderProvider = ({ children }) => {
+  const GoogleMapsLoaderProvider = ({ children, apiKey }) => {
     const [shouldInitialize] = React.useState(() => {
       const singleton = getOrCreateSingleton();
       if (!singleton) return false;
@@ -47953,7 +47983,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       return true;
     });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      shouldInitialize && /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderInitializer, {}),
+      shouldInitialize && /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderInitializer, { apiKey }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(SingletonLoaderWrapper, { children })
     ] });
   };
@@ -50528,7 +50558,9 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     onLogout,
     location: location2,
     navigate,
-    routes: routes2
+    routes: routes2,
+    logo,
+    logoCollapsed
   }) {
     const navRef = React.useRef(null);
     const [hasOverflow, setHasOverflow] = React.useState(false);
@@ -50685,13 +50717,13 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
             "div",
             {
               className: `flex items-center h-10 ${expanded ? "justify-center" : "justify-center"}`,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: expanded ? logo || /* @__PURE__ */ jsxRuntimeExports.jsx(
                 XerticaLogo,
                 {
                   className: "h-5 w-auto",
                   variant: "white"
                 }
-              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ) : logoCollapsed || /* @__PURE__ */ jsxRuntimeExports.jsx(
                 XerticaXLogo,
                 {
                   className: "h-5 w-auto",
@@ -69248,6 +69280,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
         }
       }, []);
       React.useEffect(() => {
+        if (!isLoaded && apiKey && !loadError) {
+          const { load } = useGoogleMapsLoader();
+          if (load) {
+            load(apiKey).catch(console.error);
+          }
+        }
         if (!isLoaded || !mapContainerRef.current || isInitializedRef.current) return;
         isInitializedRef.current = true;
         const map2 = new google.maps.Map(mapContainerRef.current, {
@@ -69269,7 +69307,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
           isInitializedRef.current = false;
           mapRef.current = null;
         };
-      }, [isLoaded]);
+      }, [isLoaded, apiKey]);
       React.useEffect(() => {
         var _a, _b;
         const map2 = mapRef.current;
@@ -69544,6 +69582,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
       const isInitializedRef = React.useRef(false);
       const isCalculatingRef = React.useRef(false);
       React.useEffect(() => {
+        if (!isLoaded && apiKey && !loadError) {
+          const { load } = useGoogleMapsLoader();
+          if (load) {
+            load(apiKey).catch(console.error);
+          }
+        }
         if (!isLoaded || !mapContainerRef.current || isInitializedRef.current) return;
         isInitializedRef.current = true;
         const map2 = new google.maps.Map(mapContainerRef.current, {
@@ -69576,7 +69620,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
           isInitializedRef.current = false;
           mapRef.current = null;
         };
-      }, [isLoaded]);
+      }, [isLoaded, apiKey]);
       React.useEffect(() => {
         const map2 = mapRef.current;
         const renderer = directionsRendererRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "Xertica UI - Design System completo com componentes React e Tailwind CSS",
   "type": "module",
   "main": "./dist/index.umd.js",