@zekidev/ui 2.1.0 → 2.2.0

package/dist/types/index.d.ts

@@ -45,6 +45,14 @@ export interface SectionBase {
     paddingTop?: "none" | "sm" | "md" | "lg" | "xl";
     paddingBottom?: "none" | "sm" | "md" | "lg" | "xl";
     background?: "default" | "muted" | "primary" | "secondary" | "success" | "info" | "warning" | "error";
+    /** Decorative background image (shown behind section content) */
+    backgroundImage?: MediaAsset;
+    /** Direct URL to a .mp4 file. Not played on mobile. */
+    backgroundVideoUrl?: string;
+    /** 0–100 opacity of a dark overlay on top of background media */
+    backgroundOverlay?: number;
+    /** Fade-in entrance animation triggered on scroll */
+    animate?: boolean;
 }
 export type HeroVariant = "centered" | "split" | "left" | "video" | "minimal" | "background" | "card";
 export interface HeroSection extends SectionBase {
@@ -407,15 +415,18 @@ export interface BackgroundMusic {
      */
     autoplayOnInteraction?: boolean;
 }
+export type NotFoundVariant = "centered" | "split" | "minimal";
 export interface SiteSettings {
     _id: string;
     _type: "siteSettings";
     siteName: string;
     logo?: MediaAsset;
+    favicon?: MediaAsset;
     theme: SiteTheme;
     headerVariant?: HeaderVariant;
     footerVariant?: FooterVariant;
     layoutVariant?: LayoutVariant;
+    notFoundVariant?: NotFoundVariant;
     navigation?: {
         links: {
             label: string;

package/package.json

@@ -1,43 +1,26 @@
 {
   "name": "@zekidev/ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "default": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
     },
     "./styles": "./src/styles/globals.css",
     "./tailwind-config": "./tailwind.config.ts"
   },
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "src/styles",
     "tailwind.config.ts"
   ],
   "publishConfig": {
-    "access": "public",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js",
-        "default": "./dist/index.js"
-      },
-      "./styles": "./src/styles/globals.css",
-      "./tailwind-config": "./tailwind.config.ts"
-    },
-    "main": "./dist/index.js",
-    "module": "./dist/index.js",
-    "types": "./dist/index.d.ts"
-  },
-  "scripts": {
-    "build": "tsup && tsc -p tsconfig.build.json",
-    "dev": "tsup --watch",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint src --ext ts,tsx"
+    "access": "public"
   },
   "dependencies": {
     "@portabletext/react": "^3.0.0",
@@ -73,5 +56,12 @@
     "tailwindcss": "^3.4.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0"
-  }
-}
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig.build.json",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext ts,tsx"
+  },
+  "module": "./dist/index.js"
+}

package/src/styles/globals.css

@@ -73,7 +73,7 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 221.2 83.2% 53.3%;
   }
-  .dark [data-palette="default"],
+  .dark[data-palette="default"],
   .dark:not([data-palette]) {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
@@ -118,7 +118,7 @@
     --input: 240 5.9% 90%;
     --ring: 346.8 77.2% 49.8%;
   }
-  .dark [data-palette="rose"] {
+  .dark[data-palette="rose"] {
     --background: 20 14.3% 4.1%;
     --foreground: 0 0% 95%;
     --card: 24 9.8% 10%;
@@ -162,7 +162,7 @@
     --input: 20 5.9% 90%;
     --ring: 24.6 95% 53.1%;
   }
-  .dark [data-palette="orange"] {
+  .dark[data-palette="orange"] {
     --background: 20 14.3% 4.1%;
     --foreground: 60 9.1% 97.8%;
     --card: 20 14.3% 4.1%;
@@ -206,7 +206,7 @@
     --input: 240 5.9% 90%;
     --ring: 142.1 76.2% 36.3%;
   }
-  .dark [data-palette="green"] {
+  .dark[data-palette="green"] {
     --background: 20 14.3% 4.1%;
     --foreground: 0 0% 95%;
     --card: 24 9.8% 10%;
@@ -250,7 +250,7 @@
     --input: 220 13% 91%;
     --ring: 262.1 83.3% 57.8%;
   }
-  .dark [data-palette="violet"] {
+  .dark[data-palette="violet"] {
     --background: 224 71.4% 4.1%;
     --foreground: 210 20% 98%;
     --card: 224 71.4% 4.1%;
@@ -294,7 +294,7 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 173 80% 36%;
   }
-  .dark [data-palette="teal"] {
+  .dark[data-palette="teal"] {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
@@ -338,7 +338,7 @@
     --input: 20 5.9% 90%;
     --ring: 47.9 95.8% 53.1%;
   }
-  .dark [data-palette="yellow"] {
+  .dark[data-palette="yellow"] {
     --background: 20 14.3% 4.1%;
     --foreground: 60 9.1% 97.8%;
     --card: 20 14.3% 4.1%;
@@ -382,7 +382,7 @@
     --input: 240 5.9% 90%;
     --ring: 0 72.2% 50.6%;
   }
-  .dark [data-palette="red"] {
+  .dark[data-palette="red"] {
     --background: 20 14.3% 4.1%;
     --foreground: 0 0% 95%;
     --card: 24 9.8% 10%;

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

@@ -1,171 +0,0 @@
-"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
-};