magick-ui 0.2.4 → 0.2.6

package/dist/index.js

@@ -3316,6 +3316,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
@@ -5528,7 +5536,9 @@ var googleMapSchema = z46.object({
     width: z46.string().optional().describe("Map width CSS value. Defaults to '100%'"),
     gestureHandling: z46.enum(["cooperative", "greedy", "none", "auto"]).optional().describe("How the map handles touch/scroll gestures. Defaults to 'cooperative'"),
     disableDefaultUI: z46.boolean().optional().describe("Hide default map controls"),
-    showCurrentLocation: z46.boolean().optional().describe("Show a blue dot for the user's current location")
+    showCurrentLocation: z46.boolean().optional().describe("Show a blue dot for the user's current location"),
+    showSearch: z46.boolean().optional().describe("Show a search box to find places on the map"),
+    searchPlaceholder: z46.string().optional().describe("Placeholder text for the search box")
   })
 }).describe("An interactive Google Map with optional markers and info windows");
 
@@ -9425,9 +9435,10 @@ import {
   Map as GoogleMap,
   Marker,
   InfoWindow,
-  useMap
+  useMap,
+  useMapsLibrary
 } from "@vis.gl/react-google-maps";
-import { useState as useState6, useCallback as useCallback3, useEffect as useEffect5 } from "react";
+import { useState as useState6, useCallback as useCallback3, useEffect as useEffect5, useRef as useRef6 } from "react";
 import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 function MarkerWithInfo({
   marker,
@@ -9463,7 +9474,6 @@ function MarkerWithInfo({
 }
 var CURRENT_LOCATION_ICON = {
   path: 0,
-  // google.maps.SymbolPath.CIRCLE
   scale: 8,
   fillColor: "#4285F4",
   fillOpacity: 1,
@@ -9497,12 +9507,51 @@ function CurrentLocationMarker() {
     }
   );
 }
+function PlaceSearch({
+  placeholder = "Search places...",
+  onPlaceSelect
+}) {
+  const map = useMap();
+  const placesLib = useMapsLibrary("places");
+  const inputRef = useRef6(null);
+  const autocompleteRef = useRef6(null);
+  useEffect5(() => {
+    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__ */ jsx34("div", { className: "absolute top-3 left-1/2 z-10 w-[min(90%,360px)] -translate-x-1/2", children: /* @__PURE__ */ jsx34(
+    "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%",
@@ -9510,36 +9559,62 @@ function GoogleMapView({
   gestureHandling = "cooperative",
   disableDefaultUI = false,
   showCurrentLocation = false,
-  onMarkerClick
+  showSearch = false,
+  searchPlaceholder,
+  onMarkerClick,
+  onPlaceSelect
 }) {
-  return /* @__PURE__ */ jsx34(APIProvider, { apiKey, children: /* @__PURE__ */ jsx34(
+  const [searchMarker, setSearchMarker] = useState6(null);
+  const handlePlaceSelect = useCallback3(
+    (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__ */ jsx34(APIProvider, { apiKey, libraries: showSearch ? ["places"] : [], children: /* @__PURE__ */ jsxs25(
     "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__ */ jsxs25(
-        GoogleMap,
-        {
-          defaultCenter: center,
-          defaultZoom: zoom,
-          mapId,
-          gestureHandling,
-          disableDefaultUI,
-          style: { width: "100%", height: "100%" },
-          children: [
-            showCurrentLocation && /* @__PURE__ */ jsx34(CurrentLocationMarker, {}),
-            markers.map((marker, i) => /* @__PURE__ */ jsx34(
-              MarkerWithInfo,
-              {
-                marker,
-                index: i,
-                onMarkerClick
-              },
-              `${marker.lat}-${marker.lng}-${i}`
-            ))
-          ]
-        }
-      )
+      children: [
+        showSearch && /* @__PURE__ */ jsx34(
+          PlaceSearch,
+          {
+            placeholder: searchPlaceholder,
+            onPlaceSelect: handlePlaceSelect
+          }
+        ),
+        /* @__PURE__ */ jsxs25(
+          GoogleMap,
+          {
+            defaultCenter: center,
+            defaultZoom: zoom,
+            mapId,
+            gestureHandling,
+            disableDefaultUI,
+            style: { width: "100%", height: "100%" },
+            children: [
+              showCurrentLocation && /* @__PURE__ */ jsx34(CurrentLocationMarker, {}),
+              allMarkers.map((marker, i) => /* @__PURE__ */ jsx34(
+                MarkerWithInfo,
+                {
+                  marker,
+                  index: i,
+                  onMarkerClick
+                },
+                `${marker.lat}-${marker.lng}-${i}`
+              ))
+            ]
+          }
+        )
+      ]
     }
   ) });
 }
@@ -11067,7 +11142,7 @@ function Toggle({
 }
 
 // src/ui/ToggleDropdownButton/index.tsx
-import { useRef as useRef10 } from "react";
+import { useRef as useRef11 } from "react";
 
 // src/ui/ToggleDropdownButton/ToggleDropdownLeftButton.tsx
 import { cva as cva14 } from "class-variance-authority";
@@ -11376,7 +11451,7 @@ var ToggleDropdownButton = ({
   onLeftButtonClick,
   dropdownMenu
 }) => {
-  const rightButtonRef = useRef10(null);
+  const rightButtonRef = useRef11(null);
   const handleRightButtonClick = () => {
     onRightButtonClick?.();
   };