magick-ui 0.2.3 → 0.2.4

package/dist/index.js

@@ -3312,6 +3312,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
@@ -5523,7 +5527,8 @@ var googleMapSchema = z46.object({
     height: z46.string().optional().describe("Map height CSS value. Defaults to '400px'"),
     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")
+    disableDefaultUI: z46.boolean().optional().describe("Hide default map controls"),
+    showCurrentLocation: z46.boolean().optional().describe("Show a blue dot for the user's current location")
   })
 }).describe("An interactive Google Map with optional markers and info windows");
 
@@ -9418,12 +9423,12 @@ function LinkButton({
 import {
   APIProvider,
   Map as GoogleMap,
-  AdvancedMarker,
+  Marker,
   InfoWindow,
-  Pin
+  useMap
 } from "@vis.gl/react-google-maps";
-import { useState as useState6, useCallback as useCallback3 } from "react";
-import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useState as useState6, useCallback as useCallback3, useEffect as useEffect5 } from "react";
+import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 function MarkerWithInfo({
   marker,
   index,
@@ -9434,33 +9439,61 @@ function MarkerWithInfo({
     setOpen((prev) => !prev);
     onMarkerClick?.(marker, index);
   }, [marker, index, onMarkerClick]);
-  return /* @__PURE__ */ jsxs25(
-    AdvancedMarker,
+  return /* @__PURE__ */ jsxs25(Fragment5, { children: [
+    /* @__PURE__ */ jsx34(
+      Marker,
+      {
+        position: { lat: marker.lat, lng: marker.lng },
+        title: marker.title,
+        onClick: handleClick
+      }
+    ),
+    open && (marker.title || marker.description) && /* @__PURE__ */ jsx34(
+      InfoWindow,
+      {
+        position: { lat: marker.lat, lng: marker.lng },
+        onCloseClick: () => setOpen(false),
+        children: /* @__PURE__ */ jsxs25("div", { className: "max-w-xs", children: [
+          marker.title && /* @__PURE__ */ jsx34("h3", { className: "text-body-sm font-semibold", children: marker.title }),
+          marker.description && /* @__PURE__ */ jsx34("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 = useMap();
+  const [position, setPosition] = useState6(null);
+  useEffect5(() => {
+    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__ */ jsx34(
+    Marker,
     {
-      position: { lat: marker.lat, lng: marker.lng },
-      title: marker.title,
-      onClick: handleClick,
-      children: [
-        marker.color && /* @__PURE__ */ jsx34(
-          Pin,
-          {
-            background: marker.color,
-            borderColor: marker.color,
-            glyphColor: "#fff"
-          }
-        ),
-        open && (marker.title || marker.description) && /* @__PURE__ */ jsx34(
-          InfoWindow,
-          {
-            position: { lat: marker.lat, lng: marker.lng },
-            onCloseClick: () => setOpen(false),
-            children: /* @__PURE__ */ jsxs25("div", { className: "max-w-xs", children: [
-              marker.title && /* @__PURE__ */ jsx34("h3", { className: "text-body-sm font-semibold", children: marker.title }),
-              marker.description && /* @__PURE__ */ jsx34("p", { className: "text-body-sm text-element-inverse-gray mt-1", children: marker.description })
-            ] })
-          }
-        )
-      ]
+      position,
+      title: "Your location",
+      icon: CURRENT_LOCATION_ICON,
+      clickable: false
     }
   );
 }
@@ -9476,6 +9509,7 @@ function GoogleMapView({
   className,
   gestureHandling = "cooperative",
   disableDefaultUI = false,
+  showCurrentLocation = false,
   onMarkerClick
 }) {
   return /* @__PURE__ */ jsx34(APIProvider, { apiKey, children: /* @__PURE__ */ jsx34(
@@ -9483,7 +9517,7 @@ function GoogleMapView({
     {
       className: cn("overflow-hidden rounded-unit-corner-radius-xl", className),
       style: { height, width },
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsxs25(
         GoogleMap,
         {
           defaultCenter: center,
@@ -9492,15 +9526,18 @@ function GoogleMapView({
           gestureHandling,
           disableDefaultUI,
           style: { width: "100%", height: "100%" },
-          children: markers.map((marker, i) => /* @__PURE__ */ jsx34(
-            MarkerWithInfo,
-            {
-              marker,
-              index: i,
-              onMarkerClick
-            },
-            `${marker.lat}-${marker.lng}-${i}`
-          ))
+          children: [
+            showCurrentLocation && /* @__PURE__ */ jsx34(CurrentLocationMarker, {}),
+            markers.map((marker, i) => /* @__PURE__ */ jsx34(
+              MarkerWithInfo,
+              {
+                marker,
+                index: i,
+                onMarkerClick
+              },
+              `${marker.lat}-${marker.lng}-${i}`
+            ))
+          ]
         }
       )
     }
@@ -9511,7 +9548,7 @@ function GoogleMapView({
 import { cva as cva10 } from "class-variance-authority";
 import { Pause, Play } from "lucide-react";
 import * as React10 from "react";
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
 var mediaVariants = cva10(
   "relative overflow-hidden bg-gray-100 dark:bg-gray-800",
   {
@@ -9617,7 +9654,7 @@ var Media = React10.forwardRef(
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         ...props,
-        children: type === "image" ? /* @__PURE__ */ jsxs26(Fragment5, { children: [
+        children: type === "image" ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
           /* @__PURE__ */ jsx35(
             "img",
             {
@@ -9641,7 +9678,7 @@ var Media = React10.forwardRef(
             /* @__PURE__ */ jsx35("div", { className: "text-2xl", children: "\u{1F4F7}" }),
             /* @__PURE__ */ jsx35("div", { className: "text-sm", children: "Failed to load" })
           ] }) })
-        ] }) : /* @__PURE__ */ jsxs26(Fragment5, { children: [
+        ] }) : /* @__PURE__ */ jsxs26(Fragment6, { children: [
           /* @__PURE__ */ jsx35(
             "video",
             {
@@ -10097,7 +10134,7 @@ function BaseRadioGroupItem({
 import { debounce } from "lodash";
 import { SearchIcon as SearchIcon2 } from "lucide-react";
 import { useQueryState } from "nuqs";
-import { useCallback as useCallback4, useEffect as useEffect6, useState as useState10 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useState as useState10 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 function SearchInput({
   searchKey,
@@ -10121,7 +10158,7 @@ function SearchInput({
     }, debounceDelay),
     [debounceDelay, addToParam, setSearch]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     debouncedSetValue(inputValue);
     return () => {
       debouncedSetValue.cancel();
@@ -10557,7 +10594,7 @@ import {
 } from "magick-icons";
 import * as React16 from "react";
 import { useState as useState12 } from "react";
-import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
 var Table = ({
   columns,
   tableData,
@@ -10680,7 +10717,7 @@ var PrimaryCell = React16.forwardRef(
         badgeContent && /* @__PURE__ */ jsx48(Badge, { type: badgeType, size: badgeSize, children: badgeContent })
       ] });
     } else if (variant === "progress") {
-      content = /* @__PURE__ */ jsxs36(Fragment6, { children: [
+      content = /* @__PURE__ */ jsxs36(Fragment7, { children: [
         progressValue !== 100 && /* @__PURE__ */ jsx48(
           ProgressIndicator,
           {
@@ -10693,7 +10730,7 @@ var PrimaryCell = React16.forwardRef(
         children && /* @__PURE__ */ jsx48("span", { className: "text-body-sm text-element-inverse-default", children })
       ] });
     } else if (variant === "error") {
-      content = /* @__PURE__ */ jsxs36(Fragment6, { children: [
+      content = /* @__PURE__ */ jsxs36(Fragment7, { children: [
         /* @__PURE__ */ jsx48(AlertCircle, { className: "size-4 shrink-0" }),
         errorMessage ? /* @__PURE__ */ jsx48("span", { className: "text-body-sm", children: errorMessage }) : children
       ] });