magick-ui 0.2.4 → 0.2.6

package/dist/index.cjs

@@ -3448,6 +3448,14 @@ var component_schema_default = {
                 showCurrentLocation: {
                   type: "boolean",
                   description: "Show a blue dot for the user's current location"
+                },
+                showSearch: {
+                  type: "boolean",
+                  description: "Show a search box to find places on the map"
+                },
+                searchPlaceholder: {
+                  type: "string",
+                  description: "Placeholder text for the search box"
                 }
               },
               additionalProperties: false
@@ -5660,7 +5668,9 @@ var googleMapSchema = import_zod46.z.object({
     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"),
-    showCurrentLocation: import_zod46.z.boolean().optional().describe("Show a blue dot for the user's current location")
+    showCurrentLocation: import_zod46.z.boolean().optional().describe("Show a blue dot for the user's current location"),
+    showSearch: import_zod46.z.boolean().optional().describe("Show a search box to find places on the map"),
+    searchPlaceholder: import_zod46.z.string().optional().describe("Placeholder text for the search box")
   })
 }).describe("An interactive Google Map with optional markers and info windows");
 
@@ -9585,7 +9595,6 @@ function MarkerWithInfo({
 }
 var CURRENT_LOCATION_ICON = {
   path: 0,
-  // google.maps.SymbolPath.CIRCLE
   scale: 8,
   fillColor: "#4285F4",
   fillOpacity: 1,
@@ -9619,12 +9628,51 @@ function CurrentLocationMarker() {
     }
   );
 }
+function PlaceSearch({
+  placeholder = "Search places...",
+  onPlaceSelect
+}) {
+  const map = (0, import_react_google_maps.useMap)();
+  const placesLib = (0, import_react_google_maps.useMapsLibrary)("places");
+  const inputRef = (0, import_react7.useRef)(null);
+  const autocompleteRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    if (!placesLib || !inputRef.current || autocompleteRef.current) return;
+    const autocomplete = new placesLib.Autocomplete(inputRef.current, {
+      fields: ["geometry", "name", "formatted_address"]
+    });
+    autocomplete.addListener("place_changed", () => {
+      const place = autocomplete.getPlace();
+      if (!place.geometry?.location) return;
+      const lat = place.geometry.location.lat();
+      const lng = place.geometry.location.lng();
+      map?.panTo({ lat, lng });
+      map?.setZoom(15);
+      onPlaceSelect?.({
+        lat,
+        lng,
+        name: place.name ?? "",
+        address: place.formatted_address ?? ""
+      });
+    });
+    autocompleteRef.current = autocomplete;
+  }, [placesLib, map, onPlaceSelect]);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute top-3 left-1/2 z-10 w-[min(90%,360px)] -translate-x-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      placeholder,
+      className: "w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm shadow-md outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
+    }
+  ) });
+}
 var DEFAULT_CENTER = { lat: 16.8661, lng: 96.1951 };
 function GoogleMapView({
   apiKey,
   center = DEFAULT_CENTER,
   zoom = 12,
-  markers = [],
+  markers: initialMarkers = [],
   mapId,
   height = "400px",
   width = "100%",
@@ -9632,36 +9680,62 @@ function GoogleMapView({
   gestureHandling = "cooperative",
   disableDefaultUI = false,
   showCurrentLocation = false,
-  onMarkerClick
+  showSearch = false,
+  searchPlaceholder,
+  onMarkerClick,
+  onPlaceSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_google_maps.APIProvider, { apiKey, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  const [searchMarker, setSearchMarker] = (0, import_react7.useState)(null);
+  const handlePlaceSelect = (0, import_react7.useCallback)(
+    (place) => {
+      setSearchMarker({
+        lat: place.lat,
+        lng: place.lng,
+        title: place.name,
+        description: place.address
+      });
+      onPlaceSelect?.(place);
+    },
+    [onPlaceSelect]
+  );
+  const allMarkers = searchMarker ? [...initialMarkers, searchMarker] : initialMarkers;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_google_maps.APIProvider, { apiKey, libraries: showSearch ? ["places"] : [], children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
-      className: cn("overflow-hidden rounded-unit-corner-radius-xl", className),
+      className: cn("relative overflow-hidden rounded-unit-corner-radius-xl", className),
       style: { height, width },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-        import_react_google_maps.Map,
-        {
-          defaultCenter: center,
-          defaultZoom: zoom,
-          mapId,
-          gestureHandling,
-          disableDefaultUI,
-          style: { width: "100%", height: "100%" },
-          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}`
-            ))
-          ]
-        }
-      )
+      children: [
+        showSearch && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          PlaceSearch,
+          {
+            placeholder: searchPlaceholder,
+            onPlaceSelect: handlePlaceSelect
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          import_react_google_maps.Map,
+          {
+            defaultCenter: center,
+            defaultZoom: zoom,
+            mapId,
+            gestureHandling,
+            disableDefaultUI,
+            style: { width: "100%", height: "100%" },
+            children: [
+              showCurrentLocation && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CurrentLocationMarker, {}),
+              allMarkers.map((marker, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                MarkerWithInfo,
+                {
+                  marker,
+                  index: i,
+                  onMarkerClick
+                },
+                `${marker.lat}-${marker.lng}-${i}`
+              ))
+            ]
+          }
+        )
+      ]
     }
   ) });
 }