magick-ui 0.2.4 → 0.2.6

package/dist/ui/index.d.cts

@@ -602,9 +602,17 @@ interface MapProps {
     gestureHandling?: "cooperative" | "greedy" | "none" | "auto";
     disableDefaultUI?: boolean;
     showCurrentLocation?: boolean;
+    showSearch?: boolean;
+    searchPlaceholder?: string;
     onMarkerClick?: (marker: MapMarker, index: number) => void;
+    onPlaceSelect?: (place: {
+        lat: number;
+        lng: number;
+        name: string;
+        address: string;
+    }) => void;
 }
-declare function GoogleMapView({ apiKey, center, zoom, markers, mapId, height, width, className, gestureHandling, disableDefaultUI, showCurrentLocation, onMarkerClick, }: MapProps): react_jsx_runtime.JSX.Element;
+declare function GoogleMapView({ apiKey, center, zoom, markers: initialMarkers, mapId, height, width, className, gestureHandling, disableDefaultUI, showCurrentLocation, showSearch, searchPlaceholder, onMarkerClick, onPlaceSelect, }: MapProps): react_jsx_runtime.JSX.Element;
 
 interface MediaProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof mediaVariants> {
     src: string;

package/dist/ui/index.d.ts

@@ -602,9 +602,17 @@ interface MapProps {
     gestureHandling?: "cooperative" | "greedy" | "none" | "auto";
     disableDefaultUI?: boolean;
     showCurrentLocation?: boolean;
+    showSearch?: boolean;
+    searchPlaceholder?: string;
     onMarkerClick?: (marker: MapMarker, index: number) => void;
+    onPlaceSelect?: (place: {
+        lat: number;
+        lng: number;
+        name: string;
+        address: string;
+    }) => void;
 }
-declare function GoogleMapView({ apiKey, center, zoom, markers, mapId, height, width, className, gestureHandling, disableDefaultUI, showCurrentLocation, onMarkerClick, }: MapProps): react_jsx_runtime.JSX.Element;
+declare function GoogleMapView({ apiKey, center, zoom, markers: initialMarkers, mapId, height, width, className, gestureHandling, disableDefaultUI, showCurrentLocation, showSearch, searchPlaceholder, onMarkerClick, onPlaceSelect, }: MapProps): react_jsx_runtime.JSX.Element;
 
 interface MediaProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof mediaVariants> {
     src: string;

package/dist/ui/index.js

@@ -3610,9 +3610,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,
@@ -3648,7 +3649,6 @@ function MarkerWithInfo({
 }
 var CURRENT_LOCATION_ICON = {
   path: 0,
-  // google.maps.SymbolPath.CIRCLE
   scale: 8,
   fillColor: "#4285F4",
   fillOpacity: 1,
@@ -3682,12 +3682,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%",
@@ -3695,36 +3734,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}`
+              ))
+            ]
+          }
+        )
+      ]
     }
   ) });
 }
@@ -5252,7 +5317,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";
@@ -5561,7 +5626,7 @@ var ToggleDropdownButton = ({
   onLeftButtonClick,
   dropdownMenu
 }) => {
-  const rightButtonRef = useRef10(null);
+  const rightButtonRef = useRef11(null);
   const handleRightButtonClick = () => {
     onRightButtonClick?.();
   };