magick-ui 0.2.3 → 0.2.4

package/dist/ui/index.d.cts

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

package/dist/ui/index.d.ts

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

package/dist/ui/index.js

@@ -3608,12 +3608,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,
@@ -3624,33 +3624,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
     }
   );
 }
@@ -3666,6 +3694,7 @@ function GoogleMapView({
   className,
   gestureHandling = "cooperative",
   disableDefaultUI = false,
+  showCurrentLocation = false,
   onMarkerClick
 }) {
   return /* @__PURE__ */ jsx34(APIProvider, { apiKey, children: /* @__PURE__ */ jsx34(
@@ -3673,7 +3702,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,
@@ -3682,15 +3711,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}`
+            ))
+          ]
         }
       )
     }
@@ -3701,7 +3733,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",
   {
@@ -3807,7 +3839,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",
             {
@@ -3831,7 +3863,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",
             {
@@ -4287,7 +4319,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,
@@ -4311,7 +4343,7 @@ function SearchInput({
     }, debounceDelay),
     [debounceDelay, addToParam, setSearch]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     debouncedSetValue(inputValue);
     return () => {
       debouncedSetValue.cancel();
@@ -4747,7 +4779,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,
@@ -4870,7 +4902,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,
           {
@@ -4883,7 +4915,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
       ] });