@zekidev/ui 2.2.0 → 2.2.1

package/dist/leaflet-map-inner-E52RWDEC.cjs

@@ -0,0 +1,171 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+// src/sections/map/leaflet-map-inner.tsx
+require('leaflet/dist/leaflet.css');
+var _react = require('react');
+var _leaflet = require('leaflet'); var _leaflet2 = _interopRequireDefault(_leaflet);
+var _jsxruntime = require('react/jsx-runtime');
+var OSM_ATTR = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+var CARTO_ATTR = `${OSM_ATTR} &copy; <a href="https://carto.com/attributions">CARTO</a>`;
+var ESRI_ATTR = "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community";
+var TILES = {
+  // OpenStreetMap
+  standard: {
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: OSM_ATTR
+  },
+  // CartoDB Positron — clean, minimal, ideal for data overlays
+  light: {
+    url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
+    attribution: CARTO_ATTR
+  },
+  // CartoDB Dark Matter
+  dark: {
+    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+    attribution: CARTO_ATTR
+  },
+  // CartoDB Voyager — colorful, modern
+  voyager: {
+    url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
+    attribution: CARTO_ATTR
+  },
+  // OpenTopoMap — topographic with elevation contours
+  topo: {
+    url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
+    attribution: `${OSM_ATTR}, <a href="https://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a>`,
+    maxZoom: 17
+  },
+  // ESRI World Imagery — satellite/aerial photography
+  satellite: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    attribution: ESRI_ATTR,
+    maxZoom: 18
+  },
+  // ESRI World Street Map — detailed street basemap
+  streets: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
+    attribution: ESRI_ATTR,
+    maxZoom: 18
+  }
+};
+var markerIcon = new _leaflet2.default.Icon({
+  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+async function geocodeAddress(address) {
+  try {
+    const res = await fetch(
+      `https://nominatim.openstreetmap.org/search?format=json&limit=1&q=${encodeURIComponent(address)}`,
+      { headers: { "Accept-Language": "en", "User-Agent": "LandingBuilder/1.0" } }
+    );
+    if (!res.ok) return null;
+    const data = await res.json();
+    if (!data.length) return null;
+    return [parseFloat(data[0].lat), parseFloat(data[0].lon)];
+  } catch (e) {
+    return null;
+  }
+}
+async function geocodeAll(locations) {
+  const result = [];
+  for (const loc of locations) {
+    if (loc.lat != null && loc.lng != null) {
+      result.push({ ...loc, coords: [loc.lat, loc.lng] });
+      continue;
+    }
+    if (loc.address) {
+      const coords = await geocodeAddress(loc.address);
+      if (coords) result.push({ ...loc, coords });
+      await new Promise((r) => setTimeout(r, 1e3));
+    }
+  }
+  return result;
+}
+function buildPopup(loc) {
+  const parts = [];
+  parts.push(`<strong style="display:block;font-size:13px">${loc.name}</strong>`);
+  if (loc.address)
+    parts.push(`<span style="display:block;font-size:11px;color:#6b7280;margin-top:2px">${loc.address}</span>`);
+  if (loc.phone)
+    parts.push(`<span style="display:block;font-size:11px;margin-top:2px">${loc.phone}</span>`);
+  if (loc.hours)
+    parts.push(`<span style="display:block;font-size:11px;color:#6b7280;margin-top:2px">${loc.hours}</span>`);
+  if (loc.address)
+    parts.push(
+      `<a href="https://maps.google.com/?q=${encodeURIComponent(loc.address)}" target="_blank" rel="noopener noreferrer" style="display:block;font-size:11px;color:#2563eb;margin-top:4px">Ver en Google Maps \u2192</a>`
+    );
+  return parts.join("");
+}
+function LeafletMapInner({ locations, mapStyle = "standard", className }) {
+  const containerRef = _react.useRef.call(void 0, null);
+  const mapRef = _react.useRef.call(void 0, null);
+  const tileRef = _react.useRef.call(void 0, null);
+  const [loading, setLoading] = _react.useState.call(void 0, !!_optionalChain([locations, 'optionalAccess', _ => _.length]));
+  _react.useEffect.call(void 0, () => {
+    if (!containerRef.current || mapRef.current) return;
+    const tile = _nullishCoalesce(TILES[mapStyle], () => ( TILES.standard));
+    const map = _leaflet2.default.map(containerRef.current, { scrollWheelZoom: false });
+    const tileLayer = _leaflet2.default.tileLayer(tile.url, { attribution: tile.attribution, maxZoom: _nullishCoalesce(tile.maxZoom, () => ( 19)) }).addTo(map);
+    map.setView([20, 0], 2);
+    mapRef.current = map;
+    tileRef.current = tileLayer;
+    return () => {
+      map.remove();
+      mapRef.current = null;
+      tileRef.current = null;
+    };
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    if (!mapRef.current) return;
+    const tile = _nullishCoalesce(TILES[mapStyle], () => ( TILES.standard));
+    _optionalChain([tileRef, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.remove, 'call', _4 => _4()]);
+    tileRef.current = _leaflet2.default.tileLayer(tile.url, { attribution: tile.attribution, maxZoom: _nullishCoalesce(tile.maxZoom, () => ( 19)) }).addTo(mapRef.current);
+  }, [mapStyle]);
+  _react.useEffect.call(void 0, () => {
+    if (!_optionalChain([locations, 'optionalAccess', _5 => _5.length])) {
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    geocodeAll(locations).then((geocoded) => {
+      if (cancelled || !mapRef.current) return;
+      mapRef.current.eachLayer((layer) => {
+        if (layer instanceof _leaflet2.default.Marker) layer.remove();
+      });
+      geocoded.forEach((loc) => {
+        _leaflet2.default.marker(loc.coords, { icon: markerIcon }).addTo(mapRef.current).bindPopup(buildPopup(loc));
+      });
+      if (geocoded.length === 1) {
+        mapRef.current.setView(geocoded[0].coords, 14);
+      } else if (geocoded.length > 1) {
+        mapRef.current.fitBounds(
+          geocoded.map((l) => l.coords),
+          { padding: [48, 48] }
+        );
+      }
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [locations]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `relative ${_nullishCoalesce(className, () => ( ""))}`, children: [
+    loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-0 z-[1000] flex items-center justify-center bg-muted/80 rounded-xl", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center gap-2 text-muted-foreground text-sm", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "animate-spin h-6 w-6", viewBox: "0 0 24 24", fill: "none", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
+      ] }),
+      "Geocoding addresses\u2026"
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: containerRef, style: { height: "100%", width: "100%" } })
+  ] });
+}
+
+
+exports.LeafletMapInner = LeafletMapInner;

package/dist/leaflet-map-inner-SOHFKEYD.js

@@ -0,0 +1,171 @@
+"use client";
+
+// src/sections/map/leaflet-map-inner.tsx
+import "leaflet/dist/leaflet.css";
+import { useEffect, useRef, useState } from "react";
+import L from "leaflet";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OSM_ATTR = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+var CARTO_ATTR = `${OSM_ATTR} &copy; <a href="https://carto.com/attributions">CARTO</a>`;
+var ESRI_ATTR = "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community";
+var TILES = {
+  // OpenStreetMap
+  standard: {
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: OSM_ATTR
+  },
+  // CartoDB Positron — clean, minimal, ideal for data overlays
+  light: {
+    url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
+    attribution: CARTO_ATTR
+  },
+  // CartoDB Dark Matter
+  dark: {
+    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+    attribution: CARTO_ATTR
+  },
+  // CartoDB Voyager — colorful, modern
+  voyager: {
+    url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
+    attribution: CARTO_ATTR
+  },
+  // OpenTopoMap — topographic with elevation contours
+  topo: {
+    url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
+    attribution: `${OSM_ATTR}, <a href="https://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a>`,
+    maxZoom: 17
+  },
+  // ESRI World Imagery — satellite/aerial photography
+  satellite: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    attribution: ESRI_ATTR,
+    maxZoom: 18
+  },
+  // ESRI World Street Map — detailed street basemap
+  streets: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
+    attribution: ESRI_ATTR,
+    maxZoom: 18
+  }
+};
+var markerIcon = new L.Icon({
+  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+async function geocodeAddress(address) {
+  try {
+    const res = await fetch(
+      `https://nominatim.openstreetmap.org/search?format=json&limit=1&q=${encodeURIComponent(address)}`,
+      { headers: { "Accept-Language": "en", "User-Agent": "LandingBuilder/1.0" } }
+    );
+    if (!res.ok) return null;
+    const data = await res.json();
+    if (!data.length) return null;
+    return [parseFloat(data[0].lat), parseFloat(data[0].lon)];
+  } catch {
+    return null;
+  }
+}
+async function geocodeAll(locations) {
+  const result = [];
+  for (const loc of locations) {
+    if (loc.lat != null && loc.lng != null) {
+      result.push({ ...loc, coords: [loc.lat, loc.lng] });
+      continue;
+    }
+    if (loc.address) {
+      const coords = await geocodeAddress(loc.address);
+      if (coords) result.push({ ...loc, coords });
+      await new Promise((r) => setTimeout(r, 1e3));
+    }
+  }
+  return result;
+}
+function buildPopup(loc) {
+  const parts = [];
+  parts.push(`<strong style="display:block;font-size:13px">${loc.name}</strong>`);
+  if (loc.address)
+    parts.push(`<span style="display:block;font-size:11px;color:#6b7280;margin-top:2px">${loc.address}</span>`);
+  if (loc.phone)
+    parts.push(`<span style="display:block;font-size:11px;margin-top:2px">${loc.phone}</span>`);
+  if (loc.hours)
+    parts.push(`<span style="display:block;font-size:11px;color:#6b7280;margin-top:2px">${loc.hours}</span>`);
+  if (loc.address)
+    parts.push(
+      `<a href="https://maps.google.com/?q=${encodeURIComponent(loc.address)}" target="_blank" rel="noopener noreferrer" style="display:block;font-size:11px;color:#2563eb;margin-top:4px">Ver en Google Maps \u2192</a>`
+    );
+  return parts.join("");
+}
+function LeafletMapInner({ locations, mapStyle = "standard", className }) {
+  const containerRef = useRef(null);
+  const mapRef = useRef(null);
+  const tileRef = useRef(null);
+  const [loading, setLoading] = useState(!!locations?.length);
+  useEffect(() => {
+    if (!containerRef.current || mapRef.current) return;
+    const tile = TILES[mapStyle] ?? TILES.standard;
+    const map = L.map(containerRef.current, { scrollWheelZoom: false });
+    const tileLayer = L.tileLayer(tile.url, { attribution: tile.attribution, maxZoom: tile.maxZoom ?? 19 }).addTo(map);
+    map.setView([20, 0], 2);
+    mapRef.current = map;
+    tileRef.current = tileLayer;
+    return () => {
+      map.remove();
+      mapRef.current = null;
+      tileRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    if (!mapRef.current) return;
+    const tile = TILES[mapStyle] ?? TILES.standard;
+    tileRef.current?.remove();
+    tileRef.current = L.tileLayer(tile.url, { attribution: tile.attribution, maxZoom: tile.maxZoom ?? 19 }).addTo(mapRef.current);
+  }, [mapStyle]);
+  useEffect(() => {
+    if (!locations?.length) {
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    geocodeAll(locations).then((geocoded) => {
+      if (cancelled || !mapRef.current) return;
+      mapRef.current.eachLayer((layer) => {
+        if (layer instanceof L.Marker) layer.remove();
+      });
+      geocoded.forEach((loc) => {
+        L.marker(loc.coords, { icon: markerIcon }).addTo(mapRef.current).bindPopup(buildPopup(loc));
+      });
+      if (geocoded.length === 1) {
+        mapRef.current.setView(geocoded[0].coords, 14);
+      } else if (geocoded.length > 1) {
+        mapRef.current.fitBounds(
+          geocoded.map((l) => l.coords),
+          { padding: [48, 48] }
+        );
+      }
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [locations]);
+  return /* @__PURE__ */ jsxs("div", { className: `relative ${className ?? ""}`, children: [
+    loading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-[1000] flex items-center justify-center bg-muted/80 rounded-xl", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground text-sm", children: [
+      /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-6 w-6", viewBox: "0 0 24 24", fill: "none", children: [
+        /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
+      ] }),
+      "Geocoding addresses\u2026"
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height: "100%", width: "100%" } })
+  ] });
+}
+export {
+  LeafletMapInner
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zekidev/ui",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "type": "module",
   "exports": {
     ".": {