@local-logic/maps 0.1.3 → 0.1.5

package/dist/{index-VFglx6lb.js → index-Bp7Yr6DA.js}

@@ -1,8 +1,8 @@
 import { jsx as E } from "react/jsx-runtime";
 import { useRef as d, useEffect as M } from "react";
 import { u as z, P as D } from "./scale-control-Dsir9fWY.js";
-import { u as H, P as T } from "./index-J8lmJ6Xj.js";
-import { c as j, m as A } from "./styles-J872R1eq.js";
+import { u as H, P as T } from "./index-Bbgg2AcG.js";
+import { c as j, m as A } from "./styles-C0jAgOTJ.js";
 function Z({
   latitude: h,
   longitude: l,

package/dist/index-Bx7faHOu.js

@@ -0,0 +1,41 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { u as a } from "./index-Bbgg2AcG.js";
+const d = `
+  relative w-full h-full bg-gray-200 border-2 border-gray-400
+  flex flex-col overflow-hidden
+`, l = `
+  p-2 bg-white/90 border-b border-gray-300 text-xs font-mono
+  shrink-0
+`, s = `
+  flex-1 overflow-y-auto relative
+`;
+function g({ children: n }) {
+  const { center: o, zoom: r, mapPadding: e } = a();
+  return /* @__PURE__ */ t("div", { className: d, children: [
+    /* @__PURE__ */ t("div", { className: l, children: [
+      "Testing Map | Center: (",
+      o.latitude.toFixed(2),
+      ", ",
+      o.longitude.toFixed(2),
+      ") | Zoom:",
+      " ",
+      r
+    ] }),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: s,
+        style: {
+          paddingTop: `${e.top}px`,
+          paddingBottom: `${e.bottom}px`,
+          paddingLeft: `${e.left}px`,
+          paddingRight: `${e.right}px`
+        },
+        children: n
+      }
+    )
+  ] });
+}
+export {
+  g as default
+};

package/dist/index-C0inY_TA.js

@@ -0,0 +1,41 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+const o = `
+  p-2 border-b border-gray-300
+  bg-white/95 text-xs
+`, d = `
+  font-bold mb-2
+`, i = `
+  p-1.5 mb-1 bg-gray-50 border border-gray-200 rounded
+`, c = `
+  font-bold
+`, y = `
+  flex gap-1.5 mt-1
+`, m = `
+  flex items-center gap-1
+`, b = `
+  w-4 h-4 border border-gray-400 rounded-sm
+`, g = `
+  text-xs
+`;
+function p({ sources: l = [] }) {
+  return l.length === 0 ? null : /* @__PURE__ */ r("div", { className: o, children: [
+    /* @__PURE__ */ r("div", { className: d, children: [
+      "Layers (",
+      l.length,
+      ")"
+    ] }),
+    l.map((e) => {
+      const n = Array.isArray(e.layer) ? e.layer : [e.layer];
+      return /* @__PURE__ */ r("div", { className: i, children: [
+        /* @__PURE__ */ a("div", { className: c, children: e.key }),
+        /* @__PURE__ */ a("div", { className: y, children: n.map((t, s) => /* @__PURE__ */ r("div", { className: m, children: [
+          /* @__PURE__ */ a("div", { className: b, style: { backgroundColor: t.color } }),
+          /* @__PURE__ */ a("span", { className: g, children: t.type })
+        ] }, s)) })
+      ] }, e.key);
+    })
+  ] });
+}
+export {
+  p as default
+};

package/dist/index-COB6j_V1.js

@@ -0,0 +1,25 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { XIcon as s } from "@phosphor-icons/react";
+const a = `
+  p-3 border-b border-blue-500
+  bg-white min-w-[200px]
+`, l = `
+  flex justify-between items-start mb-2
+`, c = `
+  text-xs text-gray-600 font-mono
+`, d = `
+  p-0 bg-transparent border-0 cursor-pointer
+  flex items-center justify-center text-gray-600 hover:text-gray-900
+`;
+function b({ latitude: o, longitude: n, onClose: t, children: i }) {
+  return o === void 0 || n === void 0 ? null : /* @__PURE__ */ r("div", { className: a, children: [
+    /* @__PURE__ */ r("div", { className: l, children: [
+      /* @__PURE__ */ e("div", { className: c, children: "Popup" }),
+      t && /* @__PURE__ */ e("button", { onClick: t, className: d, "aria-label": "Close popup", children: /* @__PURE__ */ e(s, { size: 20, weight: "bold" }) })
+    ] }),
+    /* @__PURE__ */ e("div", { children: i })
+  ] });
+}
+export {
+  b as default
+};

package/dist/{index-NMqp09ek.js → index-Caot5InX.js}

@@ -1,7 +1,7 @@
 import { jsxs as v, jsx as g } from "react/jsx-runtime";
 import { useState as T, useRef as E, useCallback as x, useEffect as b } from "react";
 import { M as L, N as A, u as G } from "./logo-control-CHapR1Dt.js";
-import { u as M, D as m, a as F, m as S } from "./index-J8lmJ6Xj.js";
+import { u as M, D as m, a as F, m as S } from "./index-Bbgg2AcG.js";
 import { t as h } from "./index-DscDx7HE.js";
 const z = {
   en: {

package/dist/index-Cz1bOBd_.js

@@ -0,0 +1,44 @@
+import { jsxs as i, jsx as e, Fragment as d } from "react/jsx-runtime";
+import { useMemo as u } from "react";
+import { u as f, M as n } from "./index-Bbgg2AcG.js";
+import { c as o, M as v } from "./index-D4t3jFAj.js";
+const M = `
+  relative flex
+`, m = `
+  -ml-6 -z-10 last:-z-20
+`;
+function $({
+  isActive: c = !1,
+  colors: r,
+  icon: l
+}) {
+  const { zoom: a, mapProvider: s } = f(), t = u(() => s.name === "google" ? a - 1 < n + 1 : a < n, [a, s]);
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: M,
+      style: {
+        "--background": r?.background,
+        "--fill": r?.fill
+      },
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: o,
+            "data-is-zoomed-out": t,
+            "data-is-active": c,
+            children: /* @__PURE__ */ e(v, { icon: l })
+          }
+        ),
+        !t && /* @__PURE__ */ i(d, { children: [
+          /* @__PURE__ */ e("div", { className: `${o} ${m}` }),
+          /* @__PURE__ */ e("div", { className: `${o} ${m}` })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  $ as C
+};

package/dist/{index-zqYpD_YN.js → index-D49Xw0s2.js}

@@ -1,8 +1,8 @@
 import { jsx as E } from "react/jsx-runtime";
 import { useRef as d, useEffect as M } from "react";
 import { u as D, P as H } from "./logo-control-CHapR1Dt.js";
-import { u as j, P as T } from "./index-J8lmJ6Xj.js";
-import { c as x, m as A } from "./styles-J872R1eq.js";
+import { u as j, P as T } from "./index-Bbgg2AcG.js";
+import { c as x, m as A } from "./styles-C0jAgOTJ.js";
 function Z({
   latitude: l,
   longitude: h,

package/dist/index-D4t3jFAj.js

@@ -0,0 +1,35 @@
+import { jsx as e } from "react/jsx-runtime";
+import { MapPinIcon as t } from "@phosphor-icons/react";
+const s = `
+  group/marker cursor-pointer rounded-full
+  relative h-7 w-7 flex items-center justify-center
+  text-base-white ring-1 ring-inset
+  transition-colors
+
+  bg-[var(--background,theme(colors.base.white))]
+  ring-[var(--fill,theme(colors.primary.100))]
+
+  hover:bg-[var(--fill,theme(colors.primary.100))]
+
+  data-[is-zoomed-out=true]:bg-[var(--fill,theme(colors.primary.100))]
+  data-[is-zoomed-out=true]:h-4
+  data-[is-zoomed-out=true]:w-4
+
+  data-[is-active=true]:bg-[var(--fill,theme(colors.primary.100))]
+`, o = `
+  m-auto transition-all w-4 h-4 
+
+  fill-[var(--fill,theme(colors.primary.100))]
+  group-hover/marker:fill-[var(--background,theme(colors.base.white))]
+
+  group-data-[is-zoomed-out=true]/marker:hidden
+
+  group-data-[is-active=true]/marker:fill-[var(--background,theme(colors.base.white))]
+`;
+function l({ icon: r }) {
+  return typeof r < "u" ? /* @__PURE__ */ e(r, { className: o }) : /* @__PURE__ */ e(t, { className: o });
+}
+export {
+  l as M,
+  s as c
+};

package/dist/{index-Deqck8KU.js → index-DBgzG__6.js}

@@ -1,17 +1,18 @@
 import { jsxs as f, jsx as i } from "react/jsx-runtime";
 import { a as k } from "./logo-control-CHapR1Dt.js";
 import "react";
-import { u, M } from "./index-J8lmJ6Xj.js";
-import { C as g, c as C, M as v } from "./index-HWDZde-a.js";
-function x({
+import { u, M } from "./index-Bbgg2AcG.js";
+import { c as g, M as C } from "./index-D4t3jFAj.js";
+import { C as v } from "./index-Cz1bOBd_.js";
+function y({
   clusters: n,
   colors: o,
-  clusterIcon: s,
-  onClick: p,
+  clusterIcon: p,
+  onClick: s,
   doesSuperclusterContainActiveMarker: d
 }) {
   const { activeMarker: m, zoom: c } = u(), l = (r) => (e) => {
-    e.originalEvent.stopPropagation(), !r.properties.disableClick && p?.(r);
+    e.originalEvent.stopPropagation(), !r.properties.disableClick && s?.(r);
   };
   return n?.map((r, e) => {
     const t = r.geometry.coordinates[0], a = r.geometry.coordinates[1];
@@ -24,17 +25,17 @@ function x({
         onClick: l(r),
         children: [
           r.properties.cluster && r.properties.cluster_id && /* @__PURE__ */ i(
-            g,
+            v,
             {
               colors: o,
-              icon: s,
+              icon: p,
               isActive: d(r.properties.cluster_id)
             }
           ),
           !r.properties.cluster && /* @__PURE__ */ i(
             "div",
             {
-              className: C,
+              className: g,
               style: r.properties.defaultColor ? {} : {
                 "--background": o?.background,
                 "--fill": o?.fill
@@ -42,7 +43,7 @@ function x({
               "data-is-cluster": !!r.properties.cluster,
               "data-is-zoomed-out": c < M,
               "data-is-active": m?.id === r.properties.id,
-              children: /* @__PURE__ */ i(v, { icon: r.properties.icon })
+              children: /* @__PURE__ */ i(C, { icon: r.properties.icon })
             }
           )
         ]
@@ -52,5 +53,5 @@ function x({
   });
 }
 export {
-  x as default
+  y as default
 };

package/dist/index-DEFuc-6u.js

@@ -0,0 +1,78 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { M as p } from "./index-D4t3jFAj.js";
+const b = `
+  p-2 border-b border-gray-300
+  bg-white/95 text-xs font-mono
+`, u = `
+  font-bold mb-2
+`, f = "w-6 h-6 flex items-center justify-center", h = `
+  p-1.5 mb-1 border border-primary-200 rounded
+  flex items-center gap-2 cursor-pointer
+  hover:bg-gray-100
+`, k = `
+  p-1.5 mb-1 border border-primary-200 rounded
+  flex items-center gap-2 cursor-pointer
+  hover:bg-gray-100
+`, x = `
+  w-6 h-6 rounded-full bg-primary-100 text-white
+  flex items-center justify-center font-bold text-xs
+`;
+function w({
+  clusters: s,
+  onClick: n,
+  doesSuperclusterContainActiveMarker: g,
+  children: c
+}) {
+  return /* @__PURE__ */ t("div", { className: b, children: [
+    /* @__PURE__ */ t("div", { className: u, children: [
+      "Markers (",
+      s.length,
+      ")"
+    ] }),
+    s.map((e, a) => {
+      const m = e.properties.cluster, l = e.properties.cluster_id, d = e.properties.point_count;
+      if (m)
+        return /* @__PURE__ */ t(
+          "div",
+          {
+            onClick: () => n(e),
+            onKeyDown: (i) => i.key === "Enter" && n(e),
+            role: "button",
+            tabIndex: 0,
+            className: k,
+            "data-testid": `map-marker-${a}`,
+            children: [
+              /* @__PURE__ */ o("div", { className: x, children: d }),
+              /* @__PURE__ */ t("span", { children: [
+                "Cluster (",
+                d,
+                " markers)"
+              ] })
+            ]
+          },
+          `cluster-${l}`
+        );
+      const r = e.properties;
+      return /* @__PURE__ */ t(
+        "div",
+        {
+          "data-testid": `map-marker-${a}`,
+          onClick: () => !r.disableClick && n(e),
+          onKeyDown: (i) => !r.disableClick && i.key === "Enter" && n(e),
+          role: "button",
+          tabIndex: 0,
+          className: h,
+          children: [
+            /* @__PURE__ */ o("div", { className: f, children: /* @__PURE__ */ o(p, { icon: r.icon }) }),
+            /* @__PURE__ */ o("span", { children: r.name || r.id })
+          ]
+        },
+        `marker-${r.id}`
+      );
+    }),
+    c
+  ] });
+}
+export {
+  w as default
+};

package/dist/{index-CzqD82Cl.js → index-DQ1iIFTk.js}

@@ -1,8 +1,8 @@
 import { jsx as E } from "react/jsx-runtime";
 import { useState as L, useRef as M, useCallback as N, useEffect as f, useMemo as W } from "react";
 import { useMap as _, InfoWindow as x } from "@vis.gl/react-google-maps";
-import { u as z, P as y } from "./index-J8lmJ6Xj.js";
-import { c as H, m as j } from "./styles-J872R1eq.js";
+import { u as z, P as y } from "./index-Bbgg2AcG.js";
+import { c as H, m as j } from "./styles-C0jAgOTJ.js";
 function Z({
   latitude: g,
   longitude: m,

package/dist/{index-CFioISlP.js → index-DsyoZEsZ.js}

@@ -1,8 +1,9 @@
 import { jsxs as f, jsx as r } from "react/jsx-runtime";
 import { useMap as k, AdvancedMarker as u } from "@vis.gl/react-google-maps";
-import { u as M, M as g } from "./index-J8lmJ6Xj.js";
-import { C, c as v, M as I } from "./index-HWDZde-a.js";
-function x({
+import { u as M, M as g } from "./index-Bbgg2AcG.js";
+import { c as C, M as v } from "./index-D4t3jFAj.js";
+import { C as I } from "./index-Cz1bOBd_.js";
+function y({
   clusters: a,
   colors: o,
   clusterIcon: n,
@@ -10,7 +11,7 @@ function x({
   doesSuperclusterContainActiveMarker: p
 }) {
   k();
-  const { activeMarker: d, zoom: c } = M(), m = (e) => () => {
+  const { activeMarker: d, zoom: m } = M(), c = (e) => () => {
     e.properties.disableClick || s?.(e);
   };
   return a?.map((e, l) => {
@@ -22,10 +23,10 @@ function x({
           lat: t,
           lng: i
         },
-        onClick: m(e),
+        onClick: c(e),
         children: [
           e.properties.cluster && /* @__PURE__ */ r(
-            C,
+            I,
             {
               colors: o,
               icon: n,
@@ -35,15 +36,15 @@ function x({
           !e.properties.cluster && /* @__PURE__ */ r(
             "div",
             {
-              className: v,
+              className: C,
               style: e.properties.defaultColor ? {} : {
                 "--background": o?.background,
                 "--fill": o?.fill
               },
               "data-is-cluster": !!e.properties.cluster,
-              "data-is-zoomed-out": c - 1 < g + 1,
+              "data-is-zoomed-out": m - 1 < g + 1,
               "data-is-active": d?.id === e.properties.id,
-              children: /* @__PURE__ */ r(I, { icon: e.properties.icon })
+              children: /* @__PURE__ */ r(v, { icon: e.properties.icon })
             }
           )
         ]
@@ -53,5 +54,5 @@ function x({
   });
 }
 export {
-  x as default
+  y as default
 };

package/dist/{index-CyFpPXRS.js → index-aSBXZLeP.js}

@@ -1,16 +1,17 @@
 import { jsxs as f, jsx as i } from "react/jsx-runtime";
 import { a as k } from "./scale-control-Dsir9fWY.js";
 import "react";
-import { u, M } from "./index-J8lmJ6Xj.js";
-import { C as g, c as C, M as b } from "./index-HWDZde-a.js";
-function _({
+import { u, M } from "./index-Bbgg2AcG.js";
+import { c as g, M as C } from "./index-D4t3jFAj.js";
+import { C as b } from "./index-Cz1bOBd_.js";
+function y({
   clusters: n,
   colors: r,
   clusterIcon: s,
   onClick: p,
-  doesSuperclusterContainActiveMarker: d
+  doesSuperclusterContainActiveMarker: m
 }) {
-  const { activeMarker: m, zoom: c } = u(), l = (o) => (e) => {
+  const { activeMarker: d, zoom: c } = u(), l = (o) => (e) => {
     e.originalEvent.stopPropagation(), !o.properties.disableClick && p?.(o);
   };
   return n?.map((o, e) => {
@@ -24,25 +25,25 @@ function _({
         onClick: l(o),
         children: [
           o.properties.cluster && /* @__PURE__ */ i(
-            g,
+            b,
             {
               colors: r,
               icon: s,
-              isActive: d(o.properties.cluster_id)
+              isActive: m(o.properties.cluster_id)
             }
           ),
           !o.properties.cluster && /* @__PURE__ */ i(
             "div",
             {
-              className: C,
+              className: g,
               style: o.properties.defaultColor ? {} : {
                 "--background": r?.background,
                 "--fill": r?.fill
               },
               "data-is-cluster": !!o.properties.cluster,
               "data-is-zoomed-out": c < M,
-              "data-is-active": m?.id === o.properties.id,
-              children: /* @__PURE__ */ i(b, { icon: o.properties.icon })
+              "data-is-active": d?.id === o.properties.id,
+              children: /* @__PURE__ */ i(C, { icon: o.properties.icon })
             }
           )
         ]
@@ -52,5 +53,5 @@ function _({
   });
 }
 export {
-  _ as default
+  y as default
 };

package/dist/{index-B1dI6iqp.js → index-wmShBScF.js}

@@ -1,7 +1,7 @@
 import { jsx as P, jsxs as x, Fragment as A } from "react/jsx-runtime";
 import { useState as v, useEffect as L, useRef as C, useCallback as E } from "react";
 import { APIProvider as O, Map as z, ControlPosition as g, useMap as G } from "@vis.gl/react-google-maps";
-import { u as B, D as h, W as f, a as Z, m as I } from "./index-J8lmJ6Xj.js";
+import { u as B, D as h, W as f, a as Z, m as I } from "./index-Bbgg2AcG.js";
 import { t as R } from "./index-DscDx7HE.js";
 const F = {
   "top-left": g.LEFT_TOP,

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { i as c } from "./index-J8lmJ6Xj.js";
+import { i as c } from "./index-Bbgg2AcG.js";
 export {
   c as LocalLogicMap
 };