xertica-ui 1.4.1 → 1.4.3

package/components/TemplateContent.tsx

@@ -21,6 +21,26 @@ import { ScrollArea } from './ui/scroll-area';
 import { ThemeToggle } from './ThemeToggle';
 import { LanguageSelector } from './LanguageSelector';
 import { MapShowcase } from './examples/MapShowcase';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from './ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from './ui/alert-dialog';
 
 import { useLayout } from '../contexts/LayoutContext';
 
@@ -598,6 +618,85 @@ export function TemplateContent({ }: TemplateContentProps) {
                   </CardContent>
                 </Card>
               </section>
+
+              <Separator className="my-8" />
+
+              {/* Dialogs */}
+              <section>
+                <h3 className="mb-4">Dialogs</h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Dialog</CardTitle>
+                      <CardDescription>Um modal básico interativo</CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex justify-center py-6">
+                      <Dialog>
+                        <DialogTrigger asChild>
+                          <Button variant="outline">Editar Perfil</Button>
+                        </DialogTrigger>
+                        <DialogContent className="sm:max-w-[425px]">
+                          <DialogHeader>
+                            <DialogTitle>Editar Perfil</DialogTitle>
+                            <DialogDescription>
+                              Faça alterações no seu perfil aqui. Clique em salvar quando terminar.
+                            </DialogDescription>
+                          </DialogHeader>
+                          <div className="grid gap-4 py-4">
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="name" className="text-right">
+                                Nome
+                              </Label>
+                              <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+                            </div>
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="username" className="text-right">
+                                Username
+                              </Label>
+                              <Input id="username" defaultValue="@pedroduarte" className="col-span-3" />
+                            </div>
+                          </div>
+                          <DialogFooter>
+                            <Button type="submit">Atualizar</Button>
+                          </DialogFooter>
+                        </DialogContent>
+                      </Dialog>
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>Alert Dialog</CardTitle>
+                      <CardDescription>Um alerta para decisões importantes</CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex justify-center py-6">
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <Button variant="destructive">Excluir Conta</Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent className="sm:max-w-[425px]">
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>Você tem certeza absoluta?</AlertDialogTitle>
+                            <AlertDialogDescription>
+                              Esta ação não pode ser desfeita. Isso excluirá permanentemente sua
+                              conta e removerá seus dados de nossos servidores.
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                            <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+                              Continuar
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </CardContent>
+                  </Card>
+                </div>
+              </section>
+
+              <Separator className="my-8" />
+
               {/* Maps */}
               <section>
                 <MapShowcase />

package/components/ui/dialog.tsx

@@ -58,7 +58,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-auto translate-x-[-50%] translate-y-[-50%] gap-0 border shadow-elevation-sm duration-200 rounded-[var(--radius-card)]",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-elevation-sm duration-200 rounded-[var(--radius-card)]",
           className,
         )}
         {...props}
@@ -79,7 +79,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 p-6 pb-4 text-left", className)}
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
   );
@@ -90,7 +90,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="dialog-footer"
       className={cn(
-        "flex flex-col-reverse gap-3 p-6 pt-4 sm:flex-row sm:justify-end",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
         className,
       )}
       {...props}

package/components/ui/map.tsx

@@ -413,39 +413,47 @@ MapContent.displayName = "MapContent";
 
 export const Map = React.forwardRef<HTMLDivElement, MapProps>(
   (props, ref) => {
+    const { isLoaded, loadError } = useGoogleMapsLoader();
     const effectiveApiKey = props.apiKey || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_API_KEY) || "";
 
     const isValidKey = effectiveApiKey &&
       effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" &&
       effectiveApiKey.startsWith("AIza");
 
-    if (!isValidKey) {
-      // ... (keep existing error state rendering)
-      return (
-        <div
-          ref={ref}
-          className={cn(
-            "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
-            props.className
-          )}
-          style={{ height: props.height || "400px" }}
-        >
-          <div className="absolute inset-0 flex items-center justify-center bg-muted">
-            <div className="text-center space-y-3 p-6">
-              <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
-              </div>
-              <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
+    if (isLoaded || isValidKey || loadError) {
+      return <MapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+    }
+
+    // Check if the script is injected in the DOM (loading via provider)
+    const isScriptInjected = typeof document !== 'undefined' && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
+
+    if (isScriptInjected) {
+      // Let MapContent show the loading skeleton
+      return <MapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
+          props.className
+        )}
+        style={{ height: props.height || "400px" }}
+      >
+        <div className="absolute inset-0 flex items-center justify-center bg-muted">
+          <div className="text-center space-y-3 p-6">
+            <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
+              <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
             </div>
+            <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
           </div>
         </div>
-      );
-    }
-
-    return <MapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+      </div>
+    );
   }
 );
 Map.displayName = "Map";

package/components/ui/route-map.tsx

@@ -234,46 +234,54 @@ RouteMapContent.displayName = "RouteMapContent";
 
 export const RouteMap = React.forwardRef<HTMLDivElement, RouteMapProps>(
   (props, ref) => {
+    const { isLoaded, loadError } = useGoogleMapsLoader();
     const effectiveApiKey = props.apiKey || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_API_KEY) || "";
 
     const isValidKey = effectiveApiKey &&
       effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" &&
       effectiveApiKey.startsWith("AIza");
 
-    if (!isValidKey) {
-      const {
-        origin, destination, waypoints, travelMode, height, apiKey,
-        mapContainerClassName, disableDefaultUI, zoomControl,
-        streetViewControl, mapTypeControl, fullscreenControl,
-        onRouteCalculated, ...divProps
-      } = props;
+    if (isLoaded || isValidKey || loadError) {
+      return <RouteMapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+    }
 
-      return (
-        <div
-          ref={ref}
-          className={cn(
-            "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
-            props.className
-          )}
-          style={{ height: props.height || "450px" }}
-          {...divProps}
-        >
-          <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted">
-            <div className="text-center space-y-3 p-6">
-              <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
-              </div>
-              <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
+    // Check if the script is injected in the DOM (loading via provider)
+    const isScriptInjected = typeof document !== 'undefined' && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
+
+    if (isScriptInjected) {
+      return <RouteMapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+    }
+
+    const {
+      origin, destination, waypoints, travelMode, height, apiKey,
+      mapContainerClassName, disableDefaultUI, zoomControl,
+      streetViewControl, mapTypeControl, fullscreenControl,
+      onRouteCalculated, ...divProps
+    } = props;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
+          props.className
+        )}
+        style={{ height: props.height || "450px" }}
+        {...divProps}
+      >
+        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted">
+          <div className="text-center space-y-3 p-6">
+            <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
+              <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
             </div>
+            <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
           </div>
         </div>
-      );
-    }
-
-    return <RouteMapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
+      </div>
+    );
   }
 );
 RouteMap.displayName = "RouteMap";