xertica-ui 1.3.9 → 1.4.1

package/components/ui/alert.tsx

@@ -32,20 +32,27 @@ const alertIcons = {
 
 type AlertVariantType = keyof typeof alertIcons;
 
+export interface AlertProps
+  extends React.ComponentProps<"div">,
+  VariantProps<typeof alertVariants> {
+  icon?: React.ReactNode;
+}
+
 function Alert({
   className,
   variant,
+  icon,
   children,
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+}: AlertProps) {
   // Determinar a variante válida com fallback seguro
-  const alertVariant: AlertVariantType = 
-    variant && variant in alertIcons 
-      ? (variant as AlertVariantType) 
+  const alertVariant: AlertVariantType =
+    variant && variant in alertIcons
+      ? (variant as AlertVariantType)
       : "default";
-  
-  const Icon = alertIcons[alertVariant];
-  
+
+  const DefaultIcon = alertIcons[alertVariant];
+
   return (
     <div
       data-slot="alert"
@@ -53,7 +60,7 @@ function Alert({
       className={cn(alertVariants({ variant }), className)}
       {...props}
     >
-      <Icon className="flex-shrink-0" />
+      {icon !== undefined ? icon : <DefaultIcon className="flex-shrink-0" />}
       <div className="flex-1">{children}</div>
     </div>
   );

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

@@ -119,13 +119,14 @@ function loadGoogleMapsScript(apiKey?: string): Promise<void> {
       }
     }
 
-    // Verificar se o script já existe com KEY DIFERENTE
+    // Verificar se o script já existe
     const existing = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`) as HTMLScriptElement;
     if (existing) {
-      // Se existe mas com chave diferente, precisamos recarregar a página
+      // Se existe mas com chave diferente, logar aviso. Não podemos recarregar com SPA se componentes já foram definidos.
       if (!existing.src.includes(`key=${apiKey}`)) {
-        console.warn('[GoogleMapsLoader] API key changed, page reload required');
-        reject(new Error('API key changed. Please reload the page to apply changes.'));
+        console.warn('[GoogleMapsLoader] API key changed, but Google Maps cannot be reloaded without a full page refresh because custom elements are already defined.');
+        // Don't reject, just resolve to keep the app working with the old key until refresh
+        resolve();
         return;
       }
 
@@ -134,7 +135,6 @@ function loadGoogleMapsScript(apiKey?: string): Promise<void> {
         resolve();
       } else {
         existing.addEventListener('load', () => {
-          // Aguardar um pouco para garantir que todas as bibliotecas foram carregadas
           setTimeout(() => {
             if (isMarkerLibraryLoaded()) {
               resolve();
@@ -148,6 +148,13 @@ function loadGoogleMapsScript(apiKey?: string): Promise<void> {
       return;
     }
 
+    // Prevenir reinjeção se customElements já tem gmp-map (garantia final)
+    if (typeof customElements !== 'undefined' && customElements.get('gmp-map')) {
+      console.warn('[GoogleMapsLoader] gmp-map is already defined in customElements. Skipping script injection.');
+      resolve();
+      return;
+    }
+
     // Criar novo script
     const script = document.createElement('script');
     const params = new URLSearchParams({
@@ -399,16 +406,23 @@ export function reloadGoogleMaps(newApiKey: string): Promise<void> {
     }
 
     // Verificar se a key atual é a mesma
-    const existingScript = document.querySelector(`script[src*=\"maps.googleapis.com/maps/api/js\"]`) as HTMLScriptElement;
+    const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`) as HTMLScriptElement;
     if (existingScript && existingScript.src.includes(`key=${newApiKey}`)) {
-      // Mesma key, apenas resolver
-      if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
-        resolve();
-        return;
-      }
+      // Mesma key, apenas resolver (ou esperar carregar)
+      resolve();
+      return;
+    }
+
+    // Se a chave for diferente, NÃO PODEMOS remover o script e adicionar outro 
+    // se o Google Maps já definiu custom elements. Isso causa o erro:
+    // "Element with name 'gmp-...' already defined"
+    if (typeof customElements !== 'undefined' && customElements.get('gmp-map')) {
+      console.warn('[GoogleMapsLoader] Cannot reload map API dynamically because custom elements (gmp-map) are already registered. A full page reload is required to apply the new API key.');
+      resolve(); // Resolver para não quebrar a UI
+      return;
     }
 
-    // Remover script antigo
+    // Se chegou aqui e não tem custom elements, podemos tentar recarregar
     removeExistingScript();
 
     // Atualizar singleton

package/components/ui/index.ts

@@ -226,6 +226,7 @@ export { RouteMap } from "./route-map";
 export type { MapProps } from "./map";
 export type { RouteMapProps } from "./route-map";
 export type { MapLayerType, MapLayersConfig } from "./map-layers";
+export { GoogleMapsLoaderProvider, useGoogleMapsLoader } from "./google-maps-loader";
 
 // Xertica Custom Components
 export { XerticaAssistant } from "./xertica-assistant";

package/contexts/BrandColorsContext.tsx

@@ -20,9 +20,9 @@ const BrandColorsContext = createContext<BrandColorsContextType | undefined>(und
 
 export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [currentTheme, setCurrentTheme] = useState<string>(() => {
-    // Updated key to avoid conflicts with previous local storage
-    const saved = localStorage.getItem('xertica-theme-preference');
-    return saved || 'xertica-original';
+    // Força o tema original / padrão do Xertica UI
+    // Ignorando o localStorage para evitar ficar preso em temas antigos sem UI para trocar
+    return 'xertica-original';
   });
 
   const [radius, setRadius] = useState<number>(0.5);
@@ -175,8 +175,8 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
       `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
     );
 
-    // Save preferences
-    localStorage.setItem('xertica-theme-preference', currentTheme);
+    // Removido o salvamento de preferência no localStorage para garantir que o tema padrão seja forçado
+    // localStorage.setItem('xertica-theme-preference', currentTheme);
   }, [colors, currentTheme, radius]);
 
   // Aplicar cores quando elas mudarem

package/dist/components/ui/alert.d.ts

@@ -3,7 +3,10 @@ import { type VariantProps } from "class-variance-authority";
 declare const alertVariants: (props?: ({
     variant?: "default" | "error" | "success" | "warning" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Alert({ className, variant, children, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+export interface AlertProps extends React.ComponentProps<"div">, VariantProps<typeof alertVariants> {
+    icon?: React.ReactNode;
+}
+declare function Alert({ className, variant, icon, children, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/index.d.ts

@@ -73,6 +73,7 @@ export { RouteMap } from "./route-map";
 export type { MapProps } from "./map";
 export type { RouteMapProps } from "./route-map";
 export type { MapLayerType, MapLayersConfig } from "./map-layers";
+export { GoogleMapsLoaderProvider, useGoogleMapsLoader } from "./google-maps-loader";
 export { XerticaAssistant } from "./xertica-assistant";
 export type { MessageType, AttachmentType } from "./xertica-assistant";
 export { PageHeader, PageHeaderDescription, PageHeaderHeading } from "./page-header";

package/dist/index.es.js

@@ -47804,8 +47804,7 @@ const colorThemes = [
 const BrandColorsContext = createContext(void 0);
 const BrandColorsProvider = ({ children }) => {
   const [currentTheme, setCurrentTheme] = useState(() => {
-    const saved = localStorage.getItem("xertica-theme-preference");
-    return saved || "xertica-original";
+    return "xertica-original";
   });
   const [radius, setRadius] = useState(0.5);
   const [colors, setColors] = useState(() => {
@@ -47896,7 +47895,6 @@ const BrandColorsProvider = ({ children }) => {
       "--gradient-diagonal",
       `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
     );
-    localStorage.setItem("xertica-theme-preference", currentTheme);
   }, [colors, currentTheme, radius]);
   useEffect(() => {
     applyColors();
@@ -47989,8 +47987,8 @@ function loadGoogleMapsScript(apiKey) {
     const existing = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
     if (existing) {
       if (!existing.src.includes(`key=${apiKey}`)) {
-        console.warn("[GoogleMapsLoader] API key changed, page reload required");
-        reject(new Error("API key changed. Please reload the page to apply changes."));
+        console.warn("[GoogleMapsLoader] API key changed, but Google Maps cannot be reloaded without a full page refresh because custom elements are already defined.");
+        resolve();
         return;
       }
       if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
@@ -48009,6 +48007,11 @@ function loadGoogleMapsScript(apiKey) {
       }
       return;
     }
+    if (typeof customElements !== "undefined" && customElements.get("gmp-map")) {
+      console.warn("[GoogleMapsLoader] gmp-map is already defined in customElements. Skipping script injection.");
+      resolve();
+      return;
+    }
     const script = document.createElement("script");
     const params = new URLSearchParams({
       key: apiKey,
@@ -48175,10 +48178,13 @@ function reloadGoogleMaps(newApiKey) {
     }
     const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
     if (existingScript && existingScript.src.includes(`key=${newApiKey}`)) {
-      if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
-        resolve();
-        return;
-      }
+      resolve();
+      return;
+    }
+    if (typeof customElements !== "undefined" && customElements.get("gmp-map")) {
+      console.warn("[GoogleMapsLoader] Cannot reload map API dynamically because custom elements (gmp-map) are already registered. A full page reload is required to apply the new API key.");
+      resolve();
+      return;
     }
     removeExistingScript();
     updateSingleton({ isLoaded: false, loadError: void 0 });
@@ -51495,11 +51501,12 @@ const alertIcons = {
 function Alert({
   className,
   variant,
+  icon,
   children,
   ...props
 }) {
   const alertVariant = variant && variant in alertIcons ? variant : "default";
-  const Icon2 = alertIcons[alertVariant];
+  const DefaultIcon = alertIcons[alertVariant];
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -51508,7 +51515,7 @@ function Alert({
       className: cn(alertVariants({ variant }), className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "flex-shrink-0" }),
+        icon !== void 0 ? icon : /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultIcon, { className: "flex-shrink-0" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children })
       ]
     }
@@ -98948,6 +98955,7 @@ export {
   FormLabel,
   FormMessage,
   FormattedDocument,
+  GoogleMapsLoaderProvider,
   Header,
   HoverCard,
   HoverCardContent,
@@ -99111,6 +99119,7 @@ export {
   useAssistente,
   useBrandColors,
   useFormField,
+  useGoogleMapsLoader,
   useIsMobile,
   useLanguage,
   useLayout,

package/dist/index.umd.js

@@ -47823,8 +47823,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   const BrandColorsContext = React.createContext(void 0);
   const BrandColorsProvider = ({ children }) => {
     const [currentTheme, setCurrentTheme] = React.useState(() => {
-      const saved = localStorage.getItem("xertica-theme-preference");
-      return saved || "xertica-original";
+      return "xertica-original";
     });
     const [radius, setRadius] = React.useState(0.5);
     const [colors, setColors] = React.useState(() => {
@@ -47915,7 +47914,6 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         "--gradient-diagonal",
         `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
       );
-      localStorage.setItem("xertica-theme-preference", currentTheme);
     }, [colors, currentTheme, radius]);
     React.useEffect(() => {
       applyColors();
@@ -48008,8 +48006,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       const existing = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
       if (existing) {
         if (!existing.src.includes(`key=${apiKey}`)) {
-          console.warn("[GoogleMapsLoader] API key changed, page reload required");
-          reject(new Error("API key changed. Please reload the page to apply changes."));
+          console.warn("[GoogleMapsLoader] API key changed, but Google Maps cannot be reloaded without a full page refresh because custom elements are already defined.");
+          resolve();
           return;
         }
         if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
@@ -48028,6 +48026,11 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         }
         return;
       }
+      if (typeof customElements !== "undefined" && customElements.get("gmp-map")) {
+        console.warn("[GoogleMapsLoader] gmp-map is already defined in customElements. Skipping script injection.");
+        resolve();
+        return;
+      }
       const script = document.createElement("script");
       const params = new URLSearchParams({
         key: apiKey,
@@ -48194,10 +48197,13 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       }
       const existingScript = document.querySelector(`script[src*="maps.googleapis.com/maps/api/js"]`);
       if (existingScript && existingScript.src.includes(`key=${newApiKey}`)) {
-        if (isGoogleMapsAlreadyLoaded() && isMarkerLibraryLoaded()) {
-          resolve();
-          return;
-        }
+        resolve();
+        return;
+      }
+      if (typeof customElements !== "undefined" && customElements.get("gmp-map")) {
+        console.warn("[GoogleMapsLoader] Cannot reload map API dynamically because custom elements (gmp-map) are already registered. A full page reload is required to apply the new API key.");
+        resolve();
+        return;
       }
       removeExistingScript();
       updateSingleton({ isLoaded: false, loadError: void 0 });
@@ -51514,11 +51520,12 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
   function Alert({
     className,
     variant,
+    icon,
     children,
     ...props
   }) {
     const alertVariant = variant && variant in alertIcons ? variant : "default";
-    const Icon2 = alertIcons[alertVariant];
+    const DefaultIcon = alertIcons[alertVariant];
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -51527,7 +51534,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         className: cn(alertVariants({ variant }), className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon2, { className: "flex-shrink-0" }),
+          icon !== void 0 ? icon : /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultIcon, { className: "flex-shrink-0" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children })
         ]
       }
@@ -98966,6 +98973,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
   exports2.FormLabel = FormLabel;
   exports2.FormMessage = FormMessage;
   exports2.FormattedDocument = FormattedDocument;
+  exports2.GoogleMapsLoaderProvider = GoogleMapsLoaderProvider;
   exports2.Header = Header;
   exports2.HoverCard = HoverCard;
   exports2.HoverCardContent = HoverCardContent;
@@ -99129,6 +99137,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
   exports2.useAssistente = useAssistente;
   exports2.useBrandColors = useBrandColors;
   exports2.useFormField = useFormField;
+  exports2.useGoogleMapsLoader = useGoogleMapsLoader;
   exports2.useIsMobile = useIsMobile;
   exports2.useLanguage = useLanguage;
   exports2.useLayout = useLayout;

package/package.json

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