magick-ui 0.2.3 → 0.2.5

package/dist/index.cjs

@@ -3444,6 +3444,10 @@ var component_schema_default = {
                 disableDefaultUI: {
                   type: "boolean",
                   description: "Hide default map controls"
+                },
+                showCurrentLocation: {
+                  type: "boolean",
+                  description: "Show a blue dot for the user's current location"
                 }
               },
               additionalProperties: false
@@ -5655,7 +5659,8 @@ var googleMapSchema = import_zod46.z.object({
     height: import_zod46.z.string().optional().describe("Map height CSS value. Defaults to '400px'"),
     width: import_zod46.z.string().optional().describe("Map width CSS value. Defaults to '100%'"),
     gestureHandling: import_zod46.z.enum(["cooperative", "greedy", "none", "auto"]).optional().describe("How the map handles touch/scroll gestures. Defaults to 'cooperative'"),
-    disableDefaultUI: import_zod46.z.boolean().optional().describe("Hide default map controls")
+    disableDefaultUI: import_zod46.z.boolean().optional().describe("Hide default map controls"),
+    showCurrentLocation: import_zod46.z.boolean().optional().describe("Show a blue dot for the user's current location")
   })
 }).describe("An interactive Google Map with optional markers and info windows");
 
@@ -9556,33 +9561,61 @@ function MarkerWithInfo({
     setOpen((prev) => !prev);
     onMarkerClick?.(marker, index);
   }, [marker, index, onMarkerClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-    import_react_google_maps.AdvancedMarker,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      import_react_google_maps.Marker,
+      {
+        position: { lat: marker.lat, lng: marker.lng },
+        title: marker.title,
+        onClick: handleClick
+      }
+    ),
+    open && (marker.title || marker.description) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      import_react_google_maps.InfoWindow,
+      {
+        position: { lat: marker.lat, lng: marker.lng },
+        onCloseClick: () => setOpen(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "max-w-xs", children: [
+          marker.title && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-body-sm font-semibold", children: marker.title }),
+          marker.description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-body-sm text-element-inverse-gray mt-1", children: marker.description })
+        ] })
+      }
+    )
+  ] });
+}
+var CURRENT_LOCATION_ICON = {
+  path: 0,
+  // google.maps.SymbolPath.CIRCLE
+  scale: 8,
+  fillColor: "#4285F4",
+  fillOpacity: 1,
+  strokeColor: "#ffffff",
+  strokeWeight: 2.5
+};
+function CurrentLocationMarker() {
+  const map = (0, import_react_google_maps.useMap)();
+  const [position, setPosition] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    if (!navigator.geolocation) return;
+    const watchId = navigator.geolocation.watchPosition(
+      (pos) => {
+        const coords = { lat: pos.coords.latitude, lng: pos.coords.longitude };
+        setPosition(coords);
+      },
+      () => {
+      },
+      { enableHighAccuracy: true, maximumAge: 1e4 }
+    );
+    return () => navigator.geolocation.clearWatch(watchId);
+  }, [map]);
+  if (!position) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_react_google_maps.Marker,
     {
-      position: { lat: marker.lat, lng: marker.lng },
-      title: marker.title,
-      onClick: handleClick,
-      children: [
-        marker.color && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          import_react_google_maps.Pin,
-          {
-            background: marker.color,
-            borderColor: marker.color,
-            glyphColor: "#fff"
-          }
-        ),
-        open && (marker.title || marker.description) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          import_react_google_maps.InfoWindow,
-          {
-            position: { lat: marker.lat, lng: marker.lng },
-            onCloseClick: () => setOpen(false),
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "max-w-xs", children: [
-              marker.title && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-body-sm font-semibold", children: marker.title }),
-              marker.description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-body-sm text-element-inverse-gray mt-1", children: marker.description })
-            ] })
-          }
-        )
-      ]
+      position,
+      title: "Your location",
+      icon: CURRENT_LOCATION_ICON,
+      clickable: false
     }
   );
 }
@@ -9598,6 +9631,7 @@ function GoogleMapView({
   className,
   gestureHandling = "cooperative",
   disableDefaultUI = false,
+  showCurrentLocation = false,
   onMarkerClick
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_google_maps.APIProvider, { apiKey, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -9605,7 +9639,7 @@ function GoogleMapView({
     {
       className: cn("overflow-hidden rounded-unit-corner-radius-xl", className),
       style: { height, width },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         import_react_google_maps.Map,
         {
           defaultCenter: center,
@@ -9614,15 +9648,18 @@ function GoogleMapView({
           gestureHandling,
           disableDefaultUI,
           style: { width: "100%", height: "100%" },
-          children: markers.map((marker, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            MarkerWithInfo,
-            {
-              marker,
-              index: i,
-              onMarkerClick
-            },
-            `${marker.lat}-${marker.lng}-${i}`
-          ))
+          children: [
+            showCurrentLocation && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CurrentLocationMarker, {}),
+            markers.map((marker, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              MarkerWithInfo,
+              {
+                marker,
+                index: i,
+                onMarkerClick
+              },
+              `${marker.lat}-${marker.lng}-${i}`
+            ))
+          ]
         }
       )
     }