xertica-ui 1.4.1 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/components/ui/map.tsx +32 -24
  2. package/components/ui/route-map.tsx +38 -30
  3. package/dist/index.es.js +67 -57
  4. package/dist/index.umd.js +67 -57
  5. package/package.json +1 -1
package/components/ui/map.tsx CHANGED
@@ -413,39 +413,47 @@ MapContent.displayName = "MapContent";
413
413
 
414
414
  export const Map = React.forwardRef<HTMLDivElement, MapProps>(
415
415
  (props, ref) => {
416
+ const { isLoaded, loadError } = useGoogleMapsLoader();
416
417
  const effectiveApiKey = props.apiKey || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_API_KEY) || "";
417
418
 
418
419
  const isValidKey = effectiveApiKey &&
419
420
  effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" &&
420
421
  effectiveApiKey.startsWith("AIza");
421
422
 
422
- if (!isValidKey) {
423
- // ... (keep existing error state rendering)
424
- return (
425
- <div
426
- ref={ref}
427
- className={cn(
428
- "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
429
- props.className
430
- )}
431
- style={{ height: props.height || "400px" }}
432
- >
433
- <div className="absolute inset-0 flex items-center justify-center bg-muted">
434
- <div className="text-center space-y-3 p-6">
435
- <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
436
- <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
437
- <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" />
438
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
439
- </svg>
440
- </div>
441
- <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
423
+ if (isLoaded || isValidKey || loadError) {
424
+ return <MapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
425
+ }
426
+
427
+ // Check if the script is injected in the DOM (loading via provider)
428
+ const isScriptInjected = typeof document !== 'undefined' && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
429
+
430
+ if (isScriptInjected) {
431
+ // Let MapContent show the loading skeleton
432
+ return <MapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
433
+ }
434
+
435
+ return (
436
+ <div
437
+ ref={ref}
438
+ className={cn(
439
+ "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
440
+ props.className
441
+ )}
442
+ style={{ height: props.height || "400px" }}
443
+ >
444
+ <div className="absolute inset-0 flex items-center justify-center bg-muted">
445
+ <div className="text-center space-y-3 p-6">
446
+ <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
447
+ <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
448
+ <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" />
449
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
450
+ </svg>
442
451
  </div>
452
+ <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
443
453
  </div>
444
454
  </div>
445
- );
446
- }
447
-
448
- return <MapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
455
+ </div>
456
+ );
449
457
  }
450
458
  );
451
459
  Map.displayName = "Map";
package/components/ui/route-map.tsx CHANGED
@@ -234,46 +234,54 @@ RouteMapContent.displayName = "RouteMapContent";
234
234
 
235
235
  export const RouteMap = React.forwardRef<HTMLDivElement, RouteMapProps>(
236
236
  (props, ref) => {
237
+ const { isLoaded, loadError } = useGoogleMapsLoader();
237
238
  const effectiveApiKey = props.apiKey || (typeof import.meta !== 'undefined' && import.meta.env && import.meta.env.VITE_GOOGLE_MAPS_API_KEY) || "";
238
239
 
239
240
  const isValidKey = effectiveApiKey &&
240
241
  effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" &&
241
242
  effectiveApiKey.startsWith("AIza");
242
243
 
243
- if (!isValidKey) {
244
- const {
245
- origin, destination, waypoints, travelMode, height, apiKey,
246
- mapContainerClassName, disableDefaultUI, zoomControl,
247
- streetViewControl, mapTypeControl, fullscreenControl,
248
- onRouteCalculated, ...divProps
249
- } = props;
244
+ if (isLoaded || isValidKey || loadError) {
245
+ return <RouteMapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
246
+ }
250
247
 
251
- return (
252
- <div
253
- ref={ref}
254
- className={cn(
255
- "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
256
- props.className
257
- )}
258
- style={{ height: props.height || "450px" }}
259
- {...divProps}
260
- >
261
- <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted">
262
- <div className="text-center space-y-3 p-6">
263
- <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
264
- <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
265
- <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" />
266
- <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
267
- </svg>
268
- </div>
269
- <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
248
+ // Check if the script is injected in the DOM (loading via provider)
249
+ const isScriptInjected = typeof document !== 'undefined' && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
250
+
251
+ if (isScriptInjected) {
252
+ return <RouteMapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
253
+ }
254
+
255
+ const {
256
+ origin, destination, waypoints, travelMode, height, apiKey,
257
+ mapContainerClassName, disableDefaultUI, zoomControl,
258
+ streetViewControl, mapTypeControl, fullscreenControl,
259
+ onRouteCalculated, ...divProps
260
+ } = props;
261
+
262
+ return (
263
+ <div
264
+ ref={ref}
265
+ className={cn(
266
+ "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
267
+ props.className
268
+ )}
269
+ style={{ height: props.height || "450px" }}
270
+ {...divProps}
271
+ >
272
+ <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted">
273
+ <div className="text-center space-y-3 p-6">
274
+ <div className="w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center">
275
+ <svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
276
+ <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" />
277
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
278
+ </svg>
270
279
  </div>
280
+ <p className="text-sm text-muted-foreground">Configure Google Maps API Key in Settings</p>
271
281
  </div>
272
282
  </div>
273
- );
274
- }
275
-
276
- return <RouteMapContent ref={ref} {...props} apiKey={effectiveApiKey} />;
283
+ </div>
284
+ );
277
285
  }
278
286
  );
279
287
  RouteMap.displayName = "RouteMap";
package/dist/index.es.js CHANGED
@@ -54958,29 +54958,34 @@ const MapContent = React__default.forwardRef(
54958
54958
  MapContent.displayName = "MapContent";
54959
54959
  const Map$1 = React__default.forwardRef(
54960
54960
  (props, ref) => {
54961
+ const { isLoaded, loadError } = useGoogleMapsLoader();
54961
54962
  const effectiveApiKey = props.apiKey || typeof import.meta !== "undefined" && __vite_import_meta_env__$1 && void 0 || "";
54962
54963
  const isValidKey = effectiveApiKey && effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" && effectiveApiKey.startsWith("AIza");
54963
- if (!isValidKey) {
54964
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
54965
- "div",
54966
- {
54967
- ref,
54968
- className: cn(
54969
- "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
54970
- props.className
54971
- ),
54972
- style: { height: props.height || "400px" },
54973
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
54974
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
54975
- /* @__PURE__ */ jsxRuntimeExports.jsx("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" }),
54976
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
54977
- ] }) }),
54978
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
54979
- ] }) })
54980
- }
54981
- );
54964
+ if (isLoaded || isValidKey || loadError) {
54965
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
54966
+ }
54967
+ const isScriptInjected = typeof document !== "undefined" && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
54968
+ if (isScriptInjected) {
54969
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
54982
54970
  }
54983
- return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
54971
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
54972
+ "div",
54973
+ {
54974
+ ref,
54975
+ className: cn(
54976
+ "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
54977
+ props.className
54978
+ ),
54979
+ style: { height: props.height || "400px" },
54980
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
54981
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
54982
+ /* @__PURE__ */ jsxRuntimeExports.jsx("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" }),
54983
+ /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
54984
+ ] }) }),
54985
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
54986
+ ] }) })
54987
+ }
54988
+ );
54984
54989
  }
54985
54990
  );
54986
54991
  Map$1.displayName = "Map";
@@ -71078,46 +71083,51 @@ const RouteMapContent = React__default.forwardRef(
71078
71083
  RouteMapContent.displayName = "RouteMapContent";
71079
71084
  const RouteMap = React__default.forwardRef(
71080
71085
  (props, ref) => {
71086
+ const { isLoaded, loadError } = useGoogleMapsLoader();
71081
71087
  const effectiveApiKey = props.apiKey || typeof import.meta !== "undefined" && __vite_import_meta_env__ && void 0 || "";
71082
71088
  const isValidKey = effectiveApiKey && effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" && effectiveApiKey.startsWith("AIza");
71083
- if (!isValidKey) {
71084
- const {
71085
- origin,
71086
- destination,
71087
- waypoints,
71088
- travelMode,
71089
- height,
71090
- apiKey,
71091
- mapContainerClassName,
71092
- disableDefaultUI,
71093
- zoomControl,
71094
- streetViewControl,
71095
- mapTypeControl,
71096
- fullscreenControl,
71097
- onRouteCalculated,
71098
- ...divProps
71099
- } = props;
71100
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
71101
- "div",
71102
- {
71103
- ref,
71104
- className: cn(
71105
- "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
71106
- props.className
71107
- ),
71108
- style: { height: props.height || "450px" },
71109
- ...divProps,
71110
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
71111
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
71112
- /* @__PURE__ */ jsxRuntimeExports.jsx("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" }),
71113
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
71114
- ] }) }),
71115
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
71116
- ] }) })
71117
- }
71118
- );
71089
+ if (isLoaded || isValidKey || loadError) {
71090
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
71119
71091
  }
71120
- return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
71092
+ const isScriptInjected = typeof document !== "undefined" && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
71093
+ if (isScriptInjected) {
71094
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
71095
+ }
71096
+ const {
71097
+ origin,
71098
+ destination,
71099
+ waypoints,
71100
+ travelMode,
71101
+ height,
71102
+ apiKey,
71103
+ mapContainerClassName,
71104
+ disableDefaultUI,
71105
+ zoomControl,
71106
+ streetViewControl,
71107
+ mapTypeControl,
71108
+ fullscreenControl,
71109
+ onRouteCalculated,
71110
+ ...divProps
71111
+ } = props;
71112
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
71113
+ "div",
71114
+ {
71115
+ ref,
71116
+ className: cn(
71117
+ "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
71118
+ props.className
71119
+ ),
71120
+ style: { height: props.height || "450px" },
71121
+ ...divProps,
71122
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
71123
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
71124
+ /* @__PURE__ */ jsxRuntimeExports.jsx("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" }),
71125
+ /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
71126
+ ] }) }),
71127
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
71128
+ ] }) })
71129
+ }
71130
+ );
71121
71131
  }
71122
71132
  );
71123
71133
  RouteMap.displayName = "RouteMap";
package/dist/index.umd.js CHANGED
@@ -54977,29 +54977,34 @@ Defaulting to \`null\`.`;
54977
54977
  MapContent.displayName = "MapContent";
54978
54978
  const Map$1 = React.forwardRef(
54979
54979
  (props, ref) => {
54980
+ const { isLoaded, loadError } = useGoogleMapsLoader();
54980
54981
  const effectiveApiKey = props.apiKey || typeof { url: typeof document === "undefined" && typeof location === "undefined" ? require("url").pathToFileURL(__filename).href : typeof document === "undefined" ? location.href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("index.umd.js", document.baseURI).href } !== "undefined" && __vite_import_meta_env__$1 && void 0 || "";
54981
54982
  const isValidKey = effectiveApiKey && effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" && effectiveApiKey.startsWith("AIza");
54982
- if (!isValidKey) {
54983
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
54984
- "div",
54985
- {
54986
- ref,
54987
- className: cn(
54988
- "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
54989
- props.className
54990
- ),
54991
- style: { height: props.height || "400px" },
54992
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
54993
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
54994
- /* @__PURE__ */ jsxRuntimeExports.jsx("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" }),
54995
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
54996
- ] }) }),
54997
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
54998
- ] }) })
54999
- }
55000
- );
54983
+ if (isLoaded || isValidKey || loadError) {
54984
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
54985
+ }
54986
+ const isScriptInjected = typeof document !== "undefined" && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
54987
+ if (isScriptInjected) {
54988
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
55001
54989
  }
55002
- return /* @__PURE__ */ jsxRuntimeExports.jsx(MapContent, { ref, ...props, apiKey: effectiveApiKey });
54990
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
54991
+ "div",
54992
+ {
54993
+ ref,
54994
+ className: cn(
54995
+ "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
54996
+ props.className
54997
+ ),
54998
+ style: { height: props.height || "400px" },
54999
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
55000
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
55001
+ /* @__PURE__ */ jsxRuntimeExports.jsx("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" }),
55002
+ /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
55003
+ ] }) }),
55004
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
55005
+ ] }) })
55006
+ }
55007
+ );
55003
55008
  }
55004
55009
  );
55005
55010
  Map$1.displayName = "Map";
@@ -71097,46 +71102,51 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
71097
71102
  RouteMapContent.displayName = "RouteMapContent";
71098
71103
  const RouteMap = React.forwardRef(
71099
71104
  (props, ref) => {
71105
+ const { isLoaded, loadError } = useGoogleMapsLoader();
71100
71106
  const effectiveApiKey = props.apiKey || typeof { url: typeof document === "undefined" && typeof location === "undefined" ? require("url").pathToFileURL(__filename).href : typeof document === "undefined" ? location.href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("index.umd.js", document.baseURI).href } !== "undefined" && __vite_import_meta_env__ && void 0 || "";
71101
71107
  const isValidKey = effectiveApiKey && effectiveApiKey !== "YOUR_GOOGLE_MAPS_API_KEY_HERE" && effectiveApiKey.startsWith("AIza");
71102
- if (!isValidKey) {
71103
- const {
71104
- origin,
71105
- destination,
71106
- waypoints,
71107
- travelMode,
71108
- height,
71109
- apiKey,
71110
- mapContainerClassName,
71111
- disableDefaultUI,
71112
- zoomControl,
71113
- streetViewControl,
71114
- mapTypeControl,
71115
- fullscreenControl,
71116
- onRouteCalculated,
71117
- ...divProps
71118
- } = props;
71119
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
71120
- "div",
71121
- {
71122
- ref,
71123
- className: cn(
71124
- "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
71125
- props.className
71126
- ),
71127
- style: { height: props.height || "450px" },
71128
- ...divProps,
71129
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
71130
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
71131
- /* @__PURE__ */ jsxRuntimeExports.jsx("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" }),
71132
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
71133
- ] }) }),
71134
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
71135
- ] }) })
71136
- }
71137
- );
71108
+ if (isLoaded || isValidKey || loadError) {
71109
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
71138
71110
  }
71139
- return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
71111
+ const isScriptInjected = typeof document !== "undefined" && !!document.querySelector('script[src*="maps.googleapis.com/maps/api/js"]');
71112
+ if (isScriptInjected) {
71113
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(RouteMapContent, { ref, ...props, apiKey: effectiveApiKey });
71114
+ }
71115
+ const {
71116
+ origin,
71117
+ destination,
71118
+ waypoints,
71119
+ travelMode,
71120
+ height,
71121
+ apiKey,
71122
+ mapContainerClassName,
71123
+ disableDefaultUI,
71124
+ zoomControl,
71125
+ streetViewControl,
71126
+ mapTypeControl,
71127
+ fullscreenControl,
71128
+ onRouteCalculated,
71129
+ ...divProps
71130
+ } = props;
71131
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
71132
+ "div",
71133
+ {
71134
+ ref,
71135
+ className: cn(
71136
+ "relative rounded-[var(--radius-card)] border border-border overflow-hidden bg-muted",
71137
+ props.className
71138
+ ),
71139
+ style: { height: props.height || "450px" },
71140
+ ...divProps,
71141
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-muted/50 to-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center space-y-3 p-6", children: [
71142
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 mx-auto bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "w-8 h-8 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
71143
+ /* @__PURE__ */ jsxRuntimeExports.jsx("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" }),
71144
+ /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
71145
+ ] }) }),
71146
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: "Configure Google Maps API Key in Settings" })
71147
+ ] }) })
71148
+ }
71149
+ );
71140
71150
  }
71141
71151
  );
71142
71152
  RouteMap.displayName = "RouteMap";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xertica-ui",
3
- "version": "1.4.1",
3
+ "version": "1.4.2",
4
4
  "description": "Xertica UI - Design System completo com componentes React e Tailwind CSS",
5
5
  "type": "module",
6
6
  "main": "./dist/index.umd.js",