@ztwoint/z-ui 0.1.135 → 0.1.136

package/dist/components/z2map/components/map-controls.js

@@ -15,13 +15,13 @@ const f = ({
     "div",
     {
       className: s(
-        "absolute bottom-6 right-6 z-10 transition-all duration-300 hover:scale-105",
+        "absolute bottom-6 right-6 z-0 transition-all duration-300 hover:scale-105",
         l
       ),
       children: /* @__PURE__ */ r(d, { onZoomIn: o, onZoomOut: t })
     }
   ),
-  e && a && i && /* @__PURE__ */ r("div", { className: s("absolute top-6 right-6 z-10 transition-all duration-300", l), children: /* @__PURE__ */ r(c, { activeStyle: a, onStyleChange: i }) })
+  e && a && i && /* @__PURE__ */ r("div", { className: s("absolute top-6 right-6 z-0 transition-all duration-300", l), children: /* @__PURE__ */ r(c, { activeStyle: a, onStyleChange: i }) })
 ] });
 f.displayName = "MapControls";
 export {

package/dist/components/z2map/components/map-empty-state.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { MapPinOff as a } from "lucide-react";
-const s = () => /* @__PURE__ */ e("div", { className: "absolute inset-0 pointer-events-none flex items-center justify-center z-20", children: /* @__PURE__ */ e("div", { className: "bg-white/95 backdrop-blur-sm rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.12)] border border-stroke-solid-light p-8 max-w-sm mx-4 pointer-events-auto", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-4 text-center", children: [
+const s = () => /* @__PURE__ */ e("div", { className: "absolute inset-0 pointer-events-none flex items-center justify-center z-0", children: /* @__PURE__ */ e("div", { className: "bg-white/95 backdrop-blur-sm rounded-2xl shadow-[0_8px_32px_rgba(0,0,0,0.12)] border border-stroke-solid-light p-8 max-w-sm mx-4 pointer-events-auto", children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-4 text-center", children: [
   /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-surface-neutral-default flex items-center justify-center", children: /* @__PURE__ */ e(a, { className: "w-8 h-8 text-neutral-secondary" }) }) }),
   /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ e("h3", { className: "leading-none-medium-base text-neutral-primary font-semibold", children: "No locations to display" }) })
 ] }) }) });

package/dist/components/z2map/components/map-loading-state.js

@@ -25,7 +25,7 @@ const c = ({ width: r, height: t, className: l }) => {
             }
           }
         ) }),
-        /* @__PURE__ */ a("div", { className: "relative z-10 flex flex-col items-center gap-3", children: [
+        /* @__PURE__ */ a("div", { className: "relative z-0 flex flex-col items-center gap-3", children: [
           /* @__PURE__ */ a("div", { className: "relative", children: [
             /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-surface-accent-default/10 flex items-center justify-center", children: /* @__PURE__ */ e(i, { className: "w-8 h-8 text-accent-primary animate-spin" }) }),
             /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-full bg-accent-primary/20 animate-ping" })

package/dist/components/z2map/components/map-pin.js

@@ -23,7 +23,7 @@ const m = v(
       },
       active: {
         true: [
-          "scale-125 z-50",
+          "scale-125 z-0",
           "before:ring-4 before:ring-white/70",
           "before:shadow-[0_8px_24px_rgba(0,0,0,0.3)]"
         ],
@@ -100,12 +100,12 @@ const m = v(
           "div",
           {
             className: c(
-              "absolute inset-0 rounded-full z-[1] opacity-60",
+              "absolute inset-0 rounded-full z-0 opacity-60",
               w[o]
             )
           }
         ),
-        /* @__PURE__ */ n("div", { className: "relative z-10 flex items-center justify-center", children: f || /* @__PURE__ */ n(h, { size: g, className: "text-white drop-shadow-sm" }) })
+        /* @__PURE__ */ n("div", { className: "relative z-0 flex items-center justify-center", children: f || /* @__PURE__ */ n(h, { size: g, className: "text-white drop-shadow-sm" }) })
       ]
     }
   );

package/dist/components/z2map/map.js

@@ -20,20 +20,20 @@ import { DEFAULT_MAP_CONFIG as r } from "./map.constants.js";
 import { cn as Q } from "../../lib/utils.js";
 /* empty css                                              */
 const X = ({
-  locations: n = [],
+  locations: m = [],
   mapboxToken: M,
   width: a = r.width,
-  height: d = r.height,
-  className: s,
-  pinVariant: l = r.pinVariant,
+  height: l = r.height,
+  className: d,
+  pinVariant: s = r.pinVariant,
   pinSize: h = r.pinSize,
   renderPin: t,
-  renderPopover: m,
+  renderPopover: n,
   popoverDisabled: C = r.popoverDisabled,
-  interactive: w = r.interactive,
-  draggable: u = r.draggable,
+  interactive: b = r.interactive,
+  draggable: c = r.draggable,
   scrollZoom: x = r.scrollZoom,
-  showZoomControls: b = r.showZoomControls,
+  showZoomControls: w = r.showZoomControls,
   showStyleSwitcher: y = r.showStyleSwitcher,
   minZoom: S = r.minZoom,
   maxZoom: k = r.maxZoom,
@@ -43,26 +43,26 @@ const X = ({
   const {
     mapRef: O,
     initialViewState: I,
-    currentVariant: A,
+    currentVariant: z,
     activeLocation: p,
-    openPopoverId: E,
-    setOpenPopoverId: P,
-    mapStyle: j,
-    containerStyle: F,
-    handleZoomIn: L,
-    handleZoomOut: N,
-    handleStyleChange: T,
+    openPopoverId: A,
+    setOpenPopoverId: E,
+    mapStyle: P,
+    containerStyle: j,
+    handleZoomIn: F,
+    handleZoomOut: L,
+    handleStyleChange: N,
     handlePinHover: i,
-    handlePinClickWrapper: c,
-    handleMove: z
-  } = $({ locations: n, width: a, height: d, ..._ });
-  return Z ? /* @__PURE__ */ o(J, { width: a, height: d, className: s }) : /* @__PURE__ */ g(
+    handlePinClickWrapper: u,
+    handleMove: T
+  } = $({ locations: m, width: a, height: l, ..._ });
+  return Z ? /* @__PURE__ */ o(J, { width: a, height: l, className: d }) : /* @__PURE__ */ g(
     "div",
     {
-      style: F,
+      style: j,
       className: Q(
-        "relative rounded-xl overflow-hidden shadow-[0_2px_16px_rgba(0,0,0,0.08)] border border-stroke-solid-light",
-        s
+        "relative rounded-xl overflow-hidden  border border-stroke-solid-light [&_.mapboxgl-ctrl-bottom-right]:!z-0 [&_.mapboxgl-ctrl-bottom-left]:!z-0",
+        d
       ),
       children: [
         /* @__PURE__ */ o(
@@ -72,16 +72,16 @@ const X = ({
             mapboxAccessToken: M,
             initialViewState: I,
             style: { width: "100%", height: "100%" },
-            mapStyle: j,
-            interactive: w,
-            dragPan: u,
+            mapStyle: P,
+            interactive: b,
+            dragPan: c,
             scrollZoom: x,
             minZoom: S,
             maxZoom: k,
-            onMove: z,
+            onMove: T,
             projection: { name: "mercator" },
-            cursor: u ? void 0 : "default",
-            children: n.map((e) => {
+            cursor: c ? void 0 : "default",
+            children: m.map((e) => {
               const f = (p == null ? void 0 : p.id) === e.id;
               return /* @__PURE__ */ o(
                 H,
@@ -92,30 +92,30 @@ const X = ({
                   children: C ? /* @__PURE__ */ o(V, { children: t ? t(e) : /* @__PURE__ */ o(
                     v,
                     {
-                      variant: l,
+                      variant: s,
                       size: h,
                       icon: e.icon,
                       active: f,
-                      onClick: () => c(e),
+                      onClick: () => u(e),
                       onMouseEnter: () => i(e),
                       onMouseLeave: () => i(null)
                     }
                   ) }) : /* @__PURE__ */ g(
                     R,
                     {
-                      open: E === e.id,
+                      open: A === e.id,
                       onOpenChange: (D) => {
-                        P(D ? e.id : null);
+                        E(D ? e.id : null);
                       },
                       children: [
                         /* @__PURE__ */ o(U, { asChild: !0, children: /* @__PURE__ */ o("div", { children: t ? t(e) : /* @__PURE__ */ o(
                           v,
                           {
-                            variant: l,
+                            variant: s,
                             size: h,
                             icon: e.icon,
                             active: f,
-                            onClick: () => c(e),
+                            onClick: () => u(e),
                             onMouseEnter: () => i(e),
                             onMouseLeave: () => i(null)
                           }
@@ -127,7 +127,7 @@ const X = ({
                             align: "center",
                             className: "w-auto max-w-sm p-3 bg-white/98 backdrop-blur-md shadow-[0_8px_32px_rgba(0,0,0,0.12)] border-stroke-solid-light",
                             sideOffset: 8,
-                            children: /* @__PURE__ */ o(q, { location: e, customContent: m == null ? void 0 : m(e) })
+                            children: /* @__PURE__ */ o(q, { location: e, customContent: n == null ? void 0 : n(e) })
                           }
                         )
                       ]
@@ -142,15 +142,15 @@ const X = ({
         /* @__PURE__ */ o(
           B,
           {
-            showZoomControls: b,
-            onZoomIn: L,
-            onZoomOut: N,
+            showZoomControls: w,
+            onZoomIn: F,
+            onZoomOut: L,
             showStyleSwitcher: y,
-            activeStyle: A,
-            onStyleChange: T
+            activeStyle: z,
+            onStyleChange: N
           }
         ),
-        n.length === 0 && /* @__PURE__ */ o(K, {})
+        m.length === 0 && /* @__PURE__ */ o(K, {})
       ]
     }
   );