@j3m-quantum/ui 2.1.8 → 2.1.10

package/dist/map.cjs

@@ -0,0 +1,103 @@
+'use strict';
+
+var reactLeaflet = require('react-leaflet');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/map/map.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function Map({
+  center,
+  zoom = 13,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactLeaflet.MapContainer,
+    {
+      center,
+      zoom,
+      className: cn(
+        "w-full rounded-lg border border-border overflow-hidden",
+        "[&_.leaflet-control-zoom]:border-border",
+        "[&_.leaflet-control-zoom]:rounded-md",
+        "[&_.leaflet-control-zoom]:shadow-sm",
+        "[&_.leaflet-control-zoom-in]:rounded-t-md",
+        "[&_.leaflet-control-zoom-in]:border-b",
+        "[&_.leaflet-control-zoom-in]:border-border",
+        "[&_.leaflet-control-zoom-out]:rounded-b-md",
+        "[&_.leaflet-popup-content-wrapper]:rounded-lg",
+        "[&_.leaflet-popup-content-wrapper]:shadow-lg",
+        "[&_.leaflet-popup-content-wrapper]:border",
+        "[&_.leaflet-popup-content-wrapper]:border-border",
+        className
+      ),
+      scrollWheelZoom: true,
+      ...props,
+      children
+    }
+  );
+}
+var TILE_LAYERS = {
+  default: {
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  },
+  dark: {
+    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+  },
+  satellite: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    attribution: "&copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
+  }
+};
+function MapTileLayer({
+  variant = "default",
+  ...props
+}) {
+  const layer = TILE_LAYERS[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactLeaflet.TileLayer,
+    {
+      url: layer.url,
+      attribution: layer.attribution,
+      ...props
+    }
+  );
+}
+function MapMarker({
+  position,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Marker, { position, ...props, children });
+}
+function MapPopup({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Popup, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children }) });
+}
+function MapTooltip({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Tooltip, { ...props, children });
+}
+function MapZoomControl(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.ZoomControl, { ...props });
+}
+
+exports.Map = Map;
+exports.MapMarker = MapMarker;
+exports.MapPopup = MapPopup;
+exports.MapTileLayer = MapTileLayer;
+exports.MapTooltip = MapTooltip;
+exports.MapZoomControl = MapZoomControl;
+//# sourceMappingURL=map.cjs.map
+//# sourceMappingURL=map.cjs.map

package/dist/map.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/map/map.tsx","../src/components/map/map-tile-layer.tsx","../src/components/map/map-marker.tsx"],"names":["twMerge","clsx","jsx","MapContainer","TileLayer","Marker","Popup","Tooltip","ZoomControl"],"mappings":";;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACmCA,SAAS,GAAA,CAAI;AAAA,EACX,MAAA;AAAA,EACA,IAAA,GAAO,EAAA;AAAA,EACP,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAa;AACX,EAAA,uBACEC,cAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,wDAAA;AAAA,QACA,yCAAA;AAAA,QACA,sCAAA;AAAA,QACA,qCAAA;AAAA,QACA,2CAAA;AAAA,QACA,uCAAA;AAAA,QACA,4CAAA;AAAA,QACA,4CAAA;AAAA,QACA,+CAAA;AAAA,QACA,8CAAA;AAAA,QACA,2CAAA;AAAA,QACA,kDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,eAAA,EAAiB,IAAA;AAAA,MAChB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AC5DA,IAAM,WAAA,GAAc;AAAA,EAClB,OAAA,EAAS;AAAA,IACP,GAAA,EAAK,oDAAA;AAAA,IACL,WAAA,EAAa;AAAA,GACf;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,GAAA,EAAK,+DAAA;AAAA,IACL,WAAA,EAAa;AAAA,GACf;AAAA,EACA,SAAA,EAAW;AAAA,IACT,GAAA,EAAK,+FAAA;AAAA,IACL,WAAA,EAAa;AAAA;AAEjB,CAAA;AAiBA,SAAS,YAAA,CAAa;AAAA,EACpB,OAAA,GAAU,SAAA;AAAA,EACV,GAAG;AACL,CAAA,EAAsB;AACpB,EAAA,MAAM,KAAA,GAAQ,YAAY,OAAO,CAAA;AAEjC,EAAA,uBACED,cAAAA;AAAA,IAACE,sBAAA;AAAA,IAAA;AAAA,MACC,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,aAAa,KAAA,CAAM,WAAA;AAAA,MAClB,GAAG;AAAA;AAAA,GACN;AAEJ;AC7BA,SAAS,SAAA,CAAU;AAAA,EACjB,QAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,uBACEF,cAAAA,CAACG,mBAAA,EAAA,EAAO,QAAA,EAAyC,GAAG,OACjD,QAAA,EACH,CAAA;AAEJ;AAsBA,SAAS,QAAA,CAAS;AAAA,EAChB,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,uBACEH,cAAAA,CAACI,kBAAA,EAAA,EAAO,GAAG,KAAA,EACT,QAAA,kBAAAJ,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACZ,QAAA,EACH,CAAA,EACF,CAAA;AAEJ;AAmBA,SAAS,UAAA,CAAW;AAAA,EAClB,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,uBACEA,cAAAA,CAACK,oBAAA,EAAA,EAAS,GAAG,OACV,QAAA,EACH,CAAA;AAEJ;AAiBA,SAAS,eAAe,KAAA,EAA4B;AAClD,EAAA,uBAAOL,cAAAA,CAACM,wBAAA,EAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AACjC","file":"map.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\n// ============================================================================\n// SHARED STATUS CELL CLASSES\n// Reusable status fill classes for calibration table, planning table,\n// and supplier loading cards. Ensures visual consistency across components.\n// ============================================================================\n\n/**\n * Status types for cell/card fills\n * - complete/valid: Green - task is done\n * - warning: Amber - needs attention\n * - critical/risk: Red - at risk, urgent\n * - normal/pending: Grey - neutral, on track but not done\n * - shipped: Muted + green accent - completed delivery (distinct from complete)\n */\nexport type StatusCellType = \n  | \"complete\" \n  | \"valid\" \n  | \"warning\" \n  | \"critical\" \n  | \"risk\" \n  | \"normal\" \n  | \"pending\" \n  | \"shipped\"\n\n/**\n * Status cell fill classes - matching calibration/planning table styling\n * Uses left stroke (3px) + full background fill\n * \n * Pattern: \n * - Green = complete/valid/ready\n * - Amber = warning/attention\n * - Red = critical/risk\n * - Grey = normal/pending/neutral\n * - Muted = shipped (greyed out with green check)\n */\nexport const statusCellFillClasses = {\n  // Green - complete/valid/ready state\n  complete: {\n    border: \"border-l-[3px] border-l-green-500\",\n    bg: \"bg-green-50/50 dark:bg-green-950/30\",\n    combined: \"border-l-[3px] border-l-green-500 bg-green-50/50 dark:bg-green-950/30\",\n  },\n  valid: {\n    border: \"border-l-[3px] border-l-green-500\",\n    bg: \"bg-green-50/50 dark:bg-green-950/30\",\n    combined: \"border-l-[3px] border-l-green-500 bg-green-50/50 dark:bg-green-950/30\",\n  },\n  ready: {\n    border: \"border-l-[3px] border-l-green-500\",\n    bg: \"bg-green-50/50 dark:bg-green-950/30\",\n    combined: \"border-l-[3px] border-l-green-500 bg-green-50/50 dark:bg-green-950/30\",\n  },\n  \n  // Amber - warning/attention state\n  warning: {\n    border: \"border-l-[3px] border-l-amber-500\",\n    bg: \"bg-amber-50/50 dark:bg-amber-950/30\",\n    combined: \"border-l-[3px] border-l-amber-500 bg-amber-50/50 dark:bg-amber-950/30\",\n  },\n  \n  // Red - critical/risk state\n  critical: {\n    border: \"border-l-[3px] border-l-red-500\",\n    bg: \"bg-red-50/50 dark:bg-red-950/30\",\n    combined: \"border-l-[3px] border-l-red-500 bg-red-50/50 dark:bg-red-950/30\",\n  },\n  risk: {\n    border: \"border-l-[3px] border-l-red-500\",\n    bg: \"bg-red-50/50 dark:bg-red-950/30\",\n    combined: \"border-l-[3px] border-l-red-500 bg-red-50/50 dark:bg-red-950/30\",\n  },\n  \n  // Grey - normal/pending/neutral state (on track but not complete)\n  normal: {\n    border: \"border-l-[3px] border-l-muted-foreground/40\",\n    bg: \"bg-muted/30 dark:bg-muted/20\",\n    combined: \"border-l-[3px] border-l-muted-foreground/40 bg-muted/30 dark:bg-muted/20\",\n  },\n  pending: {\n    border: \"border-l-[3px] border-l-muted-foreground/40\",\n    bg: \"bg-muted/30 dark:bg-muted/20\",\n    combined: \"border-l-[3px] border-l-muted-foreground/40 bg-muted/30 dark:bg-muted/20\",\n  },\n  \n  // Shipped - distinct muted state with green accent (greyed out + check)\n  shipped: {\n    border: \"border-l-[3px] border-l-green-500/50\",\n    bg: \"bg-muted/50 dark:bg-muted/30\",\n    combined: \"border-l-[3px] border-l-green-500/50 bg-muted/50 dark:bg-muted/30\",\n  },\n} as const\n\n/**\n * Status text colors for use inside status cells\n */\nexport const statusCellTextClasses = {\n  complete: {\n    title: \"text-foreground\",\n    subtitle: \"text-green-700/80 dark:text-green-300/80\",\n    icon: \"text-green-600 dark:text-green-400\",\n  },\n  valid: {\n    title: \"text-foreground\",\n    subtitle: \"text-green-700/80 dark:text-green-300/80\",\n    icon: \"text-green-600 dark:text-green-400\",\n  },\n  ready: {\n    title: \"text-foreground\",\n    subtitle: \"text-green-700/80 dark:text-green-300/80\",\n    icon: \"text-green-600 dark:text-green-400\",\n  },\n  warning: {\n    title: \"text-foreground\",\n    subtitle: \"text-amber-700/80 dark:text-amber-300/80\",\n    icon: \"text-amber-600 dark:text-amber-400\",\n  },\n  critical: {\n    title: \"text-foreground\",\n    subtitle: \"text-red-700/80 dark:text-red-300/80\",\n    icon: \"text-red-600 dark:text-red-400\",\n  },\n  risk: {\n    title: \"text-foreground\",\n    subtitle: \"text-red-700/80 dark:text-red-300/80\",\n    icon: \"text-red-600 dark:text-red-400\",\n  },\n  normal: {\n    title: \"text-foreground\",\n    subtitle: \"text-muted-foreground\",\n    icon: \"text-muted-foreground\",\n  },\n  pending: {\n    title: \"text-foreground\",\n    subtitle: \"text-muted-foreground\",\n    icon: \"text-muted-foreground\",\n  },\n  shipped: {\n    title: \"text-muted-foreground\",\n    subtitle: \"text-muted-foreground/70\",\n    icon: \"text-green-600/70 dark:text-green-400/70\",\n  },\n} as const\n\n/**\n * Get combined status cell classes for a given status\n * @param status - The status type\n * @returns Object with border, bg, and combined classes\n */\nexport function getStatusCellClasses(status: keyof typeof statusCellFillClasses) {\n  return statusCellFillClasses[status]\n}\n\n/**\n * Get status text classes for a given status\n * @param status - The status type\n * @returns Object with title, subtitle, and icon classes\n */\nexport function getStatusTextClasses(status: keyof typeof statusCellTextClasses) {\n  return statusCellTextClasses[status]\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { MapContainer } from \"react-leaflet\"\nimport type { MapContainerProps } from \"react-leaflet\"\n\nimport { cn } from \"../../lib/utils\"\n\nexport interface MapProps extends Omit<MapContainerProps, \"center\" | \"zoom\"> {\n  /** Map center coordinates [latitude, longitude] */\n  center: [number, number]\n  /** Initial zoom level (0-18) */\n  zoom?: number\n  /** Additional class names for the map container */\n  className?: string\n  /** Map content (TileLayer, Markers, etc.) */\n  children?: React.ReactNode\n}\n\n/**\n * Map - Leaflet-based map component for Quantum UI\n * \n * A wrapper around react-leaflet's MapContainer with Quantum styling.\n * Requires explicit height on the container (via className or style).\n * \n * IMPORTANT: Consumer must import \"leaflet/dist/leaflet.css\" and handle\n * browser-only rendering (e.g., via React.lazy or dynamic import).\n * \n * @example\n * ```tsx\n * import \"leaflet/dist/leaflet.css\"\n * \n * <Map center={[57.7089, 11.9746]} zoom={12} className=\"h-[400px]\">\n *   <MapTileLayer />\n *   <MapMarker position={[57.7089, 11.9746]}>\n *     <MapPopup>Hello!</MapPopup>\n *   </MapMarker>\n * </Map>\n * ```\n */\nfunction Map({\n  center,\n  zoom = 13,\n  className,\n  children,\n  ...props\n}: MapProps) {\n  return (\n    <MapContainer\n      center={center}\n      zoom={zoom}\n      className={cn(\n        \"w-full rounded-lg border border-border overflow-hidden\",\n        \"[&_.leaflet-control-zoom]:border-border\",\n        \"[&_.leaflet-control-zoom]:rounded-md\",\n        \"[&_.leaflet-control-zoom]:shadow-sm\",\n        \"[&_.leaflet-control-zoom-in]:rounded-t-md\",\n        \"[&_.leaflet-control-zoom-in]:border-b\",\n        \"[&_.leaflet-control-zoom-in]:border-border\",\n        \"[&_.leaflet-control-zoom-out]:rounded-b-md\",\n        \"[&_.leaflet-popup-content-wrapper]:rounded-lg\",\n        \"[&_.leaflet-popup-content-wrapper]:shadow-lg\",\n        \"[&_.leaflet-popup-content-wrapper]:border\",\n        \"[&_.leaflet-popup-content-wrapper]:border-border\",\n        className\n      )}\n      scrollWheelZoom={true}\n      {...props}\n    >\n      {children}\n    </MapContainer>\n  )\n}\n\nexport { Map }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { TileLayer } from \"react-leaflet\"\nimport type { TileLayerProps } from \"react-leaflet\"\n\nexport interface MapTileLayerProps extends Partial<TileLayerProps> {\n  /** Tile layer variant */\n  variant?: \"default\" | \"dark\" | \"satellite\"\n}\n\n// Tile layer URLs for different variants\nconst TILE_LAYERS = {\n  default: {\n    url: \"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",\n    attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors',\n  },\n  dark: {\n    url: \"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png\",\n    attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors &copy; <a href=\"https://carto.com/attributions\">CARTO</a>',\n  },\n  satellite: {\n    url: \"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}\",\n    attribution: '&copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',\n  },\n}\n\n/**\n * MapTileLayer - Tile layer for the Map component\n * \n * Provides different tile variants:\n * - default: OpenStreetMap standard tiles\n * - dark: Carto dark basemap (good for dark mode)\n * - satellite: Esri satellite imagery\n * \n * @example\n * ```tsx\n * <Map center={[57.7089, 11.9746]} zoom={12}>\n *   <MapTileLayer variant=\"default\" />\n * </Map>\n * ```\n */\nfunction MapTileLayer({\n  variant = \"default\",\n  ...props\n}: MapTileLayerProps) {\n  const layer = TILE_LAYERS[variant]\n  \n  return (\n    <TileLayer\n      url={layer.url}\n      attribution={layer.attribution}\n      {...props}\n    />\n  )\n}\n\nexport { MapTileLayer }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Marker, Popup, Tooltip, ZoomControl } from \"react-leaflet\"\nimport type { MarkerProps, PopupProps, TooltipProps, ZoomControlProps } from \"react-leaflet\"\nimport type { LatLngExpression } from \"leaflet\"\n\nexport interface MapMarkerProps extends Omit<MarkerProps, \"position\"> {\n  /** Marker position [latitude, longitude] */\n  position: [number, number]\n  /** Marker content (Popup, Tooltip, etc.) */\n  children?: React.ReactNode\n}\n\n/**\n * MapMarker - Marker component for the Map\n * \n * Renders a marker at the specified position. Can contain Popup or Tooltip children.\n * \n * @example\n * ```tsx\n * <MapMarker position={[57.7089, 11.9746]}>\n *   <MapPopup>Hello from Gothenburg!</MapPopup>\n * </MapMarker>\n * ```\n */\nfunction MapMarker({\n  position,\n  children,\n  ...props\n}: MapMarkerProps) {\n  return (\n    <Marker position={position as LatLngExpression} {...props}>\n      {children}\n    </Marker>\n  )\n}\n\nexport interface MapPopupProps extends PopupProps {\n  /** Popup content */\n  children?: React.ReactNode\n}\n\n/**\n * MapPopup - Popup component for MapMarker\n * \n * Displays a popup when the marker is clicked.\n * \n * @example\n * ```tsx\n * <MapMarker position={[57.7089, 11.9746]}>\n *   <MapPopup>\n *     <h3>Gothenburg</h3>\n *     <p>Sweden's second largest city</p>\n *   </MapPopup>\n * </MapMarker>\n * ```\n */\nfunction MapPopup({\n  children,\n  ...props\n}: MapPopupProps) {\n  return (\n    <Popup {...props}>\n      <div className=\"text-sm\">\n        {children}\n      </div>\n    </Popup>\n  )\n}\n\nexport interface MapTooltipProps extends TooltipProps {\n  /** Tooltip content */\n  children?: React.ReactNode\n}\n\n/**\n * MapTooltip - Tooltip component for MapMarker\n * \n * Displays a tooltip on hover.\n * \n * @example\n * ```tsx\n * <MapMarker position={[57.7089, 11.9746]}>\n *   <MapTooltip>Gothenburg</MapTooltip>\n * </MapMarker>\n * ```\n */\nfunction MapTooltip({\n  children,\n  ...props\n}: MapTooltipProps) {\n  return (\n    <Tooltip {...props}>\n      {children}\n    </Tooltip>\n  )\n}\n\nexport interface MapZoomControlProps extends ZoomControlProps {}\n\n/**\n * MapZoomControl - Zoom control component for the Map\n * \n * Renders zoom in/out buttons. By default positioned top-right.\n * Note: MapContainer has built-in zoom controls, use this only if you need custom positioning.\n * \n * @example\n * ```tsx\n * <Map center={[57.7089, 11.9746]} zoom={12} zoomControl={false}>\n *   <MapZoomControl position=\"bottomright\" />\n * </Map>\n * ```\n */\nfunction MapZoomControl(props: MapZoomControlProps) {\n  return <ZoomControl {...props} />\n}\n\nexport { MapMarker, MapPopup, MapTooltip, MapZoomControl }\n"]}

package/dist/map.d.cts

@@ -0,0 +1,132 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { MapContainerProps, TileLayerProps, MarkerProps, PopupProps, TooltipProps, ZoomControlProps } from 'react-leaflet';
+
+interface MapProps extends Omit<MapContainerProps, "center" | "zoom"> {
+    /** Map center coordinates [latitude, longitude] */
+    center: [number, number];
+    /** Initial zoom level (0-18) */
+    zoom?: number;
+    /** Additional class names for the map container */
+    className?: string;
+    /** Map content (TileLayer, Markers, etc.) */
+    children?: React.ReactNode;
+}
+/**
+ * Map - Leaflet-based map component for Quantum UI
+ *
+ * A wrapper around react-leaflet's MapContainer with Quantum styling.
+ * Requires explicit height on the container (via className or style).
+ *
+ * IMPORTANT: Consumer must import "leaflet/dist/leaflet.css" and handle
+ * browser-only rendering (e.g., via React.lazy or dynamic import).
+ *
+ * @example
+ * ```tsx
+ * import "leaflet/dist/leaflet.css"
+ *
+ * <Map center={[57.7089, 11.9746]} zoom={12} className="h-[400px]">
+ *   <MapTileLayer />
+ *   <MapMarker position={[57.7089, 11.9746]}>
+ *     <MapPopup>Hello!</MapPopup>
+ *   </MapMarker>
+ * </Map>
+ * ```
+ */
+declare function Map({ center, zoom, className, children, ...props }: MapProps): react_jsx_runtime.JSX.Element;
+
+interface MapTileLayerProps extends Partial<TileLayerProps> {
+    /** Tile layer variant */
+    variant?: "default" | "dark" | "satellite";
+}
+/**
+ * MapTileLayer - Tile layer for the Map component
+ *
+ * Provides different tile variants:
+ * - default: OpenStreetMap standard tiles
+ * - dark: Carto dark basemap (good for dark mode)
+ * - satellite: Esri satellite imagery
+ *
+ * @example
+ * ```tsx
+ * <Map center={[57.7089, 11.9746]} zoom={12}>
+ *   <MapTileLayer variant="default" />
+ * </Map>
+ * ```
+ */
+declare function MapTileLayer({ variant, ...props }: MapTileLayerProps): react_jsx_runtime.JSX.Element;
+
+interface MapMarkerProps extends Omit<MarkerProps, "position"> {
+    /** Marker position [latitude, longitude] */
+    position: [number, number];
+    /** Marker content (Popup, Tooltip, etc.) */
+    children?: React.ReactNode;
+}
+/**
+ * MapMarker - Marker component for the Map
+ *
+ * Renders a marker at the specified position. Can contain Popup or Tooltip children.
+ *
+ * @example
+ * ```tsx
+ * <MapMarker position={[57.7089, 11.9746]}>
+ *   <MapPopup>Hello from Gothenburg!</MapPopup>
+ * </MapMarker>
+ * ```
+ */
+declare function MapMarker({ position, children, ...props }: MapMarkerProps): react_jsx_runtime.JSX.Element;
+interface MapPopupProps extends PopupProps {
+    /** Popup content */
+    children?: React.ReactNode;
+}
+/**
+ * MapPopup - Popup component for MapMarker
+ *
+ * Displays a popup when the marker is clicked.
+ *
+ * @example
+ * ```tsx
+ * <MapMarker position={[57.7089, 11.9746]}>
+ *   <MapPopup>
+ *     <h3>Gothenburg</h3>
+ *     <p>Sweden's second largest city</p>
+ *   </MapPopup>
+ * </MapMarker>
+ * ```
+ */
+declare function MapPopup({ children, ...props }: MapPopupProps): react_jsx_runtime.JSX.Element;
+interface MapTooltipProps extends TooltipProps {
+    /** Tooltip content */
+    children?: React.ReactNode;
+}
+/**
+ * MapTooltip - Tooltip component for MapMarker
+ *
+ * Displays a tooltip on hover.
+ *
+ * @example
+ * ```tsx
+ * <MapMarker position={[57.7089, 11.9746]}>
+ *   <MapTooltip>Gothenburg</MapTooltip>
+ * </MapMarker>
+ * ```
+ */
+declare function MapTooltip({ children, ...props }: MapTooltipProps): react_jsx_runtime.JSX.Element;
+interface MapZoomControlProps extends ZoomControlProps {
+}
+/**
+ * MapZoomControl - Zoom control component for the Map
+ *
+ * Renders zoom in/out buttons. By default positioned top-right.
+ * Note: MapContainer has built-in zoom controls, use this only if you need custom positioning.
+ *
+ * @example
+ * ```tsx
+ * <Map center={[57.7089, 11.9746]} zoom={12} zoomControl={false}>
+ *   <MapZoomControl position="bottomright" />
+ * </Map>
+ * ```
+ */
+declare function MapZoomControl(props: MapZoomControlProps): react_jsx_runtime.JSX.Element;
+
+export { Map, MapMarker, type MapMarkerProps, MapPopup, type MapPopupProps, type MapProps, MapTileLayer, type MapTileLayerProps, MapTooltip, type MapTooltipProps, MapZoomControl, type MapZoomControlProps };

package/dist/map.d.ts

@@ -0,0 +1,132 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { MapContainerProps, TileLayerProps, MarkerProps, PopupProps, TooltipProps, ZoomControlProps } from 'react-leaflet';
+
+interface MapProps extends Omit<MapContainerProps, "center" | "zoom"> {
+    /** Map center coordinates [latitude, longitude] */
+    center: [number, number];
+    /** Initial zoom level (0-18) */
+    zoom?: number;
+    /** Additional class names for the map container */
+    className?: string;
+    /** Map content (TileLayer, Markers, etc.) */
+    children?: React.ReactNode;
+}
+/**
+ * Map - Leaflet-based map component for Quantum UI
+ *
+ * A wrapper around react-leaflet's MapContainer with Quantum styling.
+ * Requires explicit height on the container (via className or style).
+ *
+ * IMPORTANT: Consumer must import "leaflet/dist/leaflet.css" and handle
+ * browser-only rendering (e.g., via React.lazy or dynamic import).
+ *
+ * @example
+ * ```tsx
+ * import "leaflet/dist/leaflet.css"
+ *
+ * <Map center={[57.7089, 11.9746]} zoom={12} className="h-[400px]">
+ *   <MapTileLayer />
+ *   <MapMarker position={[57.7089, 11.9746]}>
+ *     <MapPopup>Hello!</MapPopup>
+ *   </MapMarker>
+ * </Map>
+ * ```
+ */
+declare function Map({ center, zoom, className, children, ...props }: MapProps): react_jsx_runtime.JSX.Element;
+
+interface MapTileLayerProps extends Partial<TileLayerProps> {
+    /** Tile layer variant */
+    variant?: "default" | "dark" | "satellite";
+}
+/**
+ * MapTileLayer - Tile layer for the Map component
+ *
+ * Provides different tile variants:
+ * - default: OpenStreetMap standard tiles
+ * - dark: Carto dark basemap (good for dark mode)
+ * - satellite: Esri satellite imagery
+ *
+ * @example
+ * ```tsx
+ * <Map center={[57.7089, 11.9746]} zoom={12}>
+ *   <MapTileLayer variant="default" />
+ * </Map>
+ * ```
+ */
+declare function MapTileLayer({ variant, ...props }: MapTileLayerProps): react_jsx_runtime.JSX.Element;
+
+interface MapMarkerProps extends Omit<MarkerProps, "position"> {
+    /** Marker position [latitude, longitude] */
+    position: [number, number];
+    /** Marker content (Popup, Tooltip, etc.) */
+    children?: React.ReactNode;
+}
+/**
+ * MapMarker - Marker component for the Map
+ *
+ * Renders a marker at the specified position. Can contain Popup or Tooltip children.
+ *
+ * @example
+ * ```tsx
+ * <MapMarker position={[57.7089, 11.9746]}>
+ *   <MapPopup>Hello from Gothenburg!</MapPopup>
+ * </MapMarker>
+ * ```
+ */
+declare function MapMarker({ position, children, ...props }: MapMarkerProps): react_jsx_runtime.JSX.Element;
+interface MapPopupProps extends PopupProps {
+    /** Popup content */
+    children?: React.ReactNode;
+}
+/**
+ * MapPopup - Popup component for MapMarker
+ *
+ * Displays a popup when the marker is clicked.
+ *
+ * @example
+ * ```tsx
+ * <MapMarker position={[57.7089, 11.9746]}>
+ *   <MapPopup>
+ *     <h3>Gothenburg</h3>
+ *     <p>Sweden's second largest city</p>
+ *   </MapPopup>
+ * </MapMarker>
+ * ```
+ */
+declare function MapPopup({ children, ...props }: MapPopupProps): react_jsx_runtime.JSX.Element;
+interface MapTooltipProps extends TooltipProps {
+    /** Tooltip content */
+    children?: React.ReactNode;
+}
+/**
+ * MapTooltip - Tooltip component for MapMarker
+ *
+ * Displays a tooltip on hover.
+ *
+ * @example
+ * ```tsx
+ * <MapMarker position={[57.7089, 11.9746]}>
+ *   <MapTooltip>Gothenburg</MapTooltip>
+ * </MapMarker>
+ * ```
+ */
+declare function MapTooltip({ children, ...props }: MapTooltipProps): react_jsx_runtime.JSX.Element;
+interface MapZoomControlProps extends ZoomControlProps {
+}
+/**
+ * MapZoomControl - Zoom control component for the Map
+ *
+ * Renders zoom in/out buttons. By default positioned top-right.
+ * Note: MapContainer has built-in zoom controls, use this only if you need custom positioning.
+ *
+ * @example
+ * ```tsx
+ * <Map center={[57.7089, 11.9746]} zoom={12} zoomControl={false}>
+ *   <MapZoomControl position="bottomright" />
+ * </Map>
+ * ```
+ */
+declare function MapZoomControl(props: MapZoomControlProps): react_jsx_runtime.JSX.Element;
+
+export { Map, MapMarker, type MapMarkerProps, MapPopup, type MapPopupProps, type MapProps, MapTileLayer, type MapTileLayerProps, MapTooltip, type MapTooltipProps, MapZoomControl, type MapZoomControlProps };

package/dist/map.js

@@ -0,0 +1,96 @@
+import { MapContainer, TileLayer, Marker, Popup, Tooltip, ZoomControl } from 'react-leaflet';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/map/map.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Map({
+  center,
+  zoom = 13,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MapContainer,
+    {
+      center,
+      zoom,
+      className: cn(
+        "w-full rounded-lg border border-border overflow-hidden",
+        "[&_.leaflet-control-zoom]:border-border",
+        "[&_.leaflet-control-zoom]:rounded-md",
+        "[&_.leaflet-control-zoom]:shadow-sm",
+        "[&_.leaflet-control-zoom-in]:rounded-t-md",
+        "[&_.leaflet-control-zoom-in]:border-b",
+        "[&_.leaflet-control-zoom-in]:border-border",
+        "[&_.leaflet-control-zoom-out]:rounded-b-md",
+        "[&_.leaflet-popup-content-wrapper]:rounded-lg",
+        "[&_.leaflet-popup-content-wrapper]:shadow-lg",
+        "[&_.leaflet-popup-content-wrapper]:border",
+        "[&_.leaflet-popup-content-wrapper]:border-border",
+        className
+      ),
+      scrollWheelZoom: true,
+      ...props,
+      children
+    }
+  );
+}
+var TILE_LAYERS = {
+  default: {
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  },
+  dark: {
+    url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+  },
+  satellite: {
+    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    attribution: "&copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
+  }
+};
+function MapTileLayer({
+  variant = "default",
+  ...props
+}) {
+  const layer = TILE_LAYERS[variant];
+  return /* @__PURE__ */ jsx(
+    TileLayer,
+    {
+      url: layer.url,
+      attribution: layer.attribution,
+      ...props
+    }
+  );
+}
+function MapMarker({
+  position,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Marker, { position, ...props, children });
+}
+function MapPopup({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popup, { ...props, children: /* @__PURE__ */ jsx("div", { className: "text-sm", children }) });
+}
+function MapTooltip({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip, { ...props, children });
+}
+function MapZoomControl(props) {
+  return /* @__PURE__ */ jsx(ZoomControl, { ...props });
+}
+
+export { Map, MapMarker, MapPopup, MapTileLayer, MapTooltip, MapZoomControl };
+//# sourceMappingURL=map.js.map
+//# sourceMappingURL=map.js.map

package/dist/map.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/map/map.tsx","../src/components/map/map-tile-layer.tsx","../src/components/map/map-marker.tsx"],"names":["jsx"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACmCA,SAAS,GAAA,CAAI;AAAA,EACX,MAAA;AAAA,EACA,IAAA,GAAO,EAAA;AAAA,EACP,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAa;AACX,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,wDAAA;AAAA,QACA,yCAAA;AAAA,QACA,sCAAA;AAAA,QACA,qCAAA;AAAA,QACA,2CAAA;AAAA,QACA,uCAAA;AAAA,QACA,4CAAA;AAAA,QACA,4CAAA;AAAA,QACA,+CAAA;AAAA,QACA,8CAAA;AAAA,QACA,2CAAA;AAAA,QACA,kDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,eAAA,EAAiB,IAAA;AAAA,MAChB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AC5DA,IAAM,WAAA,GAAc;AAAA,EAClB,OAAA,EAAS;AAAA,IACP,GAAA,EAAK,oDAAA;AAAA,IACL,WAAA,EAAa;AAAA,GACf;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,GAAA,EAAK,+DAAA;AAAA,IACL,WAAA,EAAa;AAAA,GACf;AAAA,EACA,SAAA,EAAW;AAAA,IACT,GAAA,EAAK,+FAAA;AAAA,IACL,WAAA,EAAa;AAAA;AAEjB,CAAA;AAiBA,SAAS,YAAA,CAAa;AAAA,EACpB,OAAA,GAAU,SAAA;AAAA,EACV,GAAG;AACL,CAAA,EAAsB;AACpB,EAAA,MAAM,KAAA,GAAQ,YAAY,OAAO,CAAA;AAEjC,EAAA,uBACEA,GAAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,aAAa,KAAA,CAAM,WAAA;AAAA,MAClB,GAAG;AAAA;AAAA,GACN;AAEJ;AC7BA,SAAS,SAAA,CAAU;AAAA,EACjB,QAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,uBACEA,GAAAA,CAAC,MAAA,EAAA,EAAO,QAAA,EAAyC,GAAG,OACjD,QAAA,EACH,CAAA;AAEJ;AAsBA,SAAS,QAAA,CAAS;AAAA,EAChB,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,uBACEA,GAAAA,CAAC,KAAA,EAAA,EAAO,GAAG,KAAA,EACT,QAAA,kBAAAA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACZ,QAAA,EACH,CAAA,EACF,CAAA;AAEJ;AAmBA,SAAS,UAAA,CAAW;AAAA,EAClB,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,uBACEA,GAAAA,CAAC,OAAA,EAAA,EAAS,GAAG,OACV,QAAA,EACH,CAAA;AAEJ;AAiBA,SAAS,eAAe,KAAA,EAA4B;AAClD,EAAA,uBAAOA,GAAAA,CAAC,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AACjC","file":"map.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\n// ============================================================================\n// SHARED STATUS CELL CLASSES\n// Reusable status fill classes for calibration table, planning table,\n// and supplier loading cards. Ensures visual consistency across components.\n// ============================================================================\n\n/**\n * Status types for cell/card fills\n * - complete/valid: Green - task is done\n * - warning: Amber - needs attention\n * - critical/risk: Red - at risk, urgent\n * - normal/pending: Grey - neutral, on track but not done\n * - shipped: Muted + green accent - completed delivery (distinct from complete)\n */\nexport type StatusCellType = \n  | \"complete\" \n  | \"valid\" \n  | \"warning\" \n  | \"critical\" \n  | \"risk\" \n  | \"normal\" \n  | \"pending\" \n  | \"shipped\"\n\n/**\n * Status cell fill classes - matching calibration/planning table styling\n * Uses left stroke (3px) + full background fill\n * \n * Pattern: \n * - Green = complete/valid/ready\n * - Amber = warning/attention\n * - Red = critical/risk\n * - Grey = normal/pending/neutral\n * - Muted = shipped (greyed out with green check)\n */\nexport const statusCellFillClasses = {\n  // Green - complete/valid/ready state\n  complete: {\n    border: \"border-l-[3px] border-l-green-500\",\n    bg: \"bg-green-50/50 dark:bg-green-950/30\",\n    combined: \"border-l-[3px] border-l-green-500 bg-green-50/50 dark:bg-green-950/30\",\n  },\n  valid: {\n    border: \"border-l-[3px] border-l-green-500\",\n    bg: \"bg-green-50/50 dark:bg-green-950/30\",\n    combined: \"border-l-[3px] border-l-green-500 bg-green-50/50 dark:bg-green-950/30\",\n  },\n  ready: {\n    border: \"border-l-[3px] border-l-green-500\",\n    bg: \"bg-green-50/50 dark:bg-green-950/30\",\n    combined: \"border-l-[3px] border-l-green-500 bg-green-50/50 dark:bg-green-950/30\",\n  },\n  \n  // Amber - warning/attention state\n  warning: {\n    border: \"border-l-[3px] border-l-amber-500\",\n    bg: \"bg-amber-50/50 dark:bg-amber-950/30\",\n    combined: \"border-l-[3px] border-l-amber-500 bg-amber-50/50 dark:bg-amber-950/30\",\n  },\n  \n  // Red - critical/risk state\n  critical: {\n    border: \"border-l-[3px] border-l-red-500\",\n    bg: \"bg-red-50/50 dark:bg-red-950/30\",\n    combined: \"border-l-[3px] border-l-red-500 bg-red-50/50 dark:bg-red-950/30\",\n  },\n  risk: {\n    border: \"border-l-[3px] border-l-red-500\",\n    bg: \"bg-red-50/50 dark:bg-red-950/30\",\n    combined: \"border-l-[3px] border-l-red-500 bg-red-50/50 dark:bg-red-950/30\",\n  },\n  \n  // Grey - normal/pending/neutral state (on track but not complete)\n  normal: {\n    border: \"border-l-[3px] border-l-muted-foreground/40\",\n    bg: \"bg-muted/30 dark:bg-muted/20\",\n    combined: \"border-l-[3px] border-l-muted-foreground/40 bg-muted/30 dark:bg-muted/20\",\n  },\n  pending: {\n    border: \"border-l-[3px] border-l-muted-foreground/40\",\n    bg: \"bg-muted/30 dark:bg-muted/20\",\n    combined: \"border-l-[3px] border-l-muted-foreground/40 bg-muted/30 dark:bg-muted/20\",\n  },\n  \n  // Shipped - distinct muted state with green accent (greyed out + check)\n  shipped: {\n    border: \"border-l-[3px] border-l-green-500/50\",\n    bg: \"bg-muted/50 dark:bg-muted/30\",\n    combined: \"border-l-[3px] border-l-green-500/50 bg-muted/50 dark:bg-muted/30\",\n  },\n} as const\n\n/**\n * Status text colors for use inside status cells\n */\nexport const statusCellTextClasses = {\n  complete: {\n    title: \"text-foreground\",\n    subtitle: \"text-green-700/80 dark:text-green-300/80\",\n    icon: \"text-green-600 dark:text-green-400\",\n  },\n  valid: {\n    title: \"text-foreground\",\n    subtitle: \"text-green-700/80 dark:text-green-300/80\",\n    icon: \"text-green-600 dark:text-green-400\",\n  },\n  ready: {\n    title: \"text-foreground\",\n    subtitle: \"text-green-700/80 dark:text-green-300/80\",\n    icon: \"text-green-600 dark:text-green-400\",\n  },\n  warning: {\n    title: \"text-foreground\",\n    subtitle: \"text-amber-700/80 dark:text-amber-300/80\",\n    icon: \"text-amber-600 dark:text-amber-400\",\n  },\n  critical: {\n    title: \"text-foreground\",\n    subtitle: \"text-red-700/80 dark:text-red-300/80\",\n    icon: \"text-red-600 dark:text-red-400\",\n  },\n  risk: {\n    title: \"text-foreground\",\n    subtitle: \"text-red-700/80 dark:text-red-300/80\",\n    icon: \"text-red-600 dark:text-red-400\",\n  },\n  normal: {\n    title: \"text-foreground\",\n    subtitle: \"text-muted-foreground\",\n    icon: \"text-muted-foreground\",\n  },\n  pending: {\n    title: \"text-foreground\",\n    subtitle: \"text-muted-foreground\",\n    icon: \"text-muted-foreground\",\n  },\n  shipped: {\n    title: \"text-muted-foreground\",\n    subtitle: \"text-muted-foreground/70\",\n    icon: \"text-green-600/70 dark:text-green-400/70\",\n  },\n} as const\n\n/**\n * Get combined status cell classes for a given status\n * @param status - The status type\n * @returns Object with border, bg, and combined classes\n */\nexport function getStatusCellClasses(status: keyof typeof statusCellFillClasses) {\n  return statusCellFillClasses[status]\n}\n\n/**\n * Get status text classes for a given status\n * @param status - The status type\n * @returns Object with title, subtitle, and icon classes\n */\nexport function getStatusTextClasses(status: keyof typeof statusCellTextClasses) {\n  return statusCellTextClasses[status]\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { MapContainer } from \"react-leaflet\"\nimport type { MapContainerProps } from \"react-leaflet\"\n\nimport { cn } from \"../../lib/utils\"\n\nexport interface MapProps extends Omit<MapContainerProps, \"center\" | \"zoom\"> {\n  /** Map center coordinates [latitude, longitude] */\n  center: [number, number]\n  /** Initial zoom level (0-18) */\n  zoom?: number\n  /** Additional class names for the map container */\n  className?: string\n  /** Map content (TileLayer, Markers, etc.) */\n  children?: React.ReactNode\n}\n\n/**\n * Map - Leaflet-based map component for Quantum UI\n * \n * A wrapper around react-leaflet's MapContainer with Quantum styling.\n * Requires explicit height on the container (via className or style).\n * \n * IMPORTANT: Consumer must import \"leaflet/dist/leaflet.css\" and handle\n * browser-only rendering (e.g., via React.lazy or dynamic import).\n * \n * @example\n * ```tsx\n * import \"leaflet/dist/leaflet.css\"\n * \n * <Map center={[57.7089, 11.9746]} zoom={12} className=\"h-[400px]\">\n *   <MapTileLayer />\n *   <MapMarker position={[57.7089, 11.9746]}>\n *     <MapPopup>Hello!</MapPopup>\n *   </MapMarker>\n * </Map>\n * ```\n */\nfunction Map({\n  center,\n  zoom = 13,\n  className,\n  children,\n  ...props\n}: MapProps) {\n  return (\n    <MapContainer\n      center={center}\n      zoom={zoom}\n      className={cn(\n        \"w-full rounded-lg border border-border overflow-hidden\",\n        \"[&_.leaflet-control-zoom]:border-border\",\n        \"[&_.leaflet-control-zoom]:rounded-md\",\n        \"[&_.leaflet-control-zoom]:shadow-sm\",\n        \"[&_.leaflet-control-zoom-in]:rounded-t-md\",\n        \"[&_.leaflet-control-zoom-in]:border-b\",\n        \"[&_.leaflet-control-zoom-in]:border-border\",\n        \"[&_.leaflet-control-zoom-out]:rounded-b-md\",\n        \"[&_.leaflet-popup-content-wrapper]:rounded-lg\",\n        \"[&_.leaflet-popup-content-wrapper]:shadow-lg\",\n        \"[&_.leaflet-popup-content-wrapper]:border\",\n        \"[&_.leaflet-popup-content-wrapper]:border-border\",\n        className\n      )}\n      scrollWheelZoom={true}\n      {...props}\n    >\n      {children}\n    </MapContainer>\n  )\n}\n\nexport { Map }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { TileLayer } from \"react-leaflet\"\nimport type { TileLayerProps } from \"react-leaflet\"\n\nexport interface MapTileLayerProps extends Partial<TileLayerProps> {\n  /** Tile layer variant */\n  variant?: \"default\" | \"dark\" | \"satellite\"\n}\n\n// Tile layer URLs for different variants\nconst TILE_LAYERS = {\n  default: {\n    url: \"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",\n    attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors',\n  },\n  dark: {\n    url: \"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png\",\n    attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors &copy; <a href=\"https://carto.com/attributions\">CARTO</a>',\n  },\n  satellite: {\n    url: \"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}\",\n    attribution: '&copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',\n  },\n}\n\n/**\n * MapTileLayer - Tile layer for the Map component\n * \n * Provides different tile variants:\n * - default: OpenStreetMap standard tiles\n * - dark: Carto dark basemap (good for dark mode)\n * - satellite: Esri satellite imagery\n * \n * @example\n * ```tsx\n * <Map center={[57.7089, 11.9746]} zoom={12}>\n *   <MapTileLayer variant=\"default\" />\n * </Map>\n * ```\n */\nfunction MapTileLayer({\n  variant = \"default\",\n  ...props\n}: MapTileLayerProps) {\n  const layer = TILE_LAYERS[variant]\n  \n  return (\n    <TileLayer\n      url={layer.url}\n      attribution={layer.attribution}\n      {...props}\n    />\n  )\n}\n\nexport { MapTileLayer }\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Marker, Popup, Tooltip, ZoomControl } from \"react-leaflet\"\nimport type { MarkerProps, PopupProps, TooltipProps, ZoomControlProps } from \"react-leaflet\"\nimport type { LatLngExpression } from \"leaflet\"\n\nexport interface MapMarkerProps extends Omit<MarkerProps, \"position\"> {\n  /** Marker position [latitude, longitude] */\n  position: [number, number]\n  /** Marker content (Popup, Tooltip, etc.) */\n  children?: React.ReactNode\n}\n\n/**\n * MapMarker - Marker component for the Map\n * \n * Renders a marker at the specified position. Can contain Popup or Tooltip children.\n * \n * @example\n * ```tsx\n * <MapMarker position={[57.7089, 11.9746]}>\n *   <MapPopup>Hello from Gothenburg!</MapPopup>\n * </MapMarker>\n * ```\n */\nfunction MapMarker({\n  position,\n  children,\n  ...props\n}: MapMarkerProps) {\n  return (\n    <Marker position={position as LatLngExpression} {...props}>\n      {children}\n    </Marker>\n  )\n}\n\nexport interface MapPopupProps extends PopupProps {\n  /** Popup content */\n  children?: React.ReactNode\n}\n\n/**\n * MapPopup - Popup component for MapMarker\n * \n * Displays a popup when the marker is clicked.\n * \n * @example\n * ```tsx\n * <MapMarker position={[57.7089, 11.9746]}>\n *   <MapPopup>\n *     <h3>Gothenburg</h3>\n *     <p>Sweden's second largest city</p>\n *   </MapPopup>\n * </MapMarker>\n * ```\n */\nfunction MapPopup({\n  children,\n  ...props\n}: MapPopupProps) {\n  return (\n    <Popup {...props}>\n      <div className=\"text-sm\">\n        {children}\n      </div>\n    </Popup>\n  )\n}\n\nexport interface MapTooltipProps extends TooltipProps {\n  /** Tooltip content */\n  children?: React.ReactNode\n}\n\n/**\n * MapTooltip - Tooltip component for MapMarker\n * \n * Displays a tooltip on hover.\n * \n * @example\n * ```tsx\n * <MapMarker position={[57.7089, 11.9746]}>\n *   <MapTooltip>Gothenburg</MapTooltip>\n * </MapMarker>\n * ```\n */\nfunction MapTooltip({\n  children,\n  ...props\n}: MapTooltipProps) {\n  return (\n    <Tooltip {...props}>\n      {children}\n    </Tooltip>\n  )\n}\n\nexport interface MapZoomControlProps extends ZoomControlProps {}\n\n/**\n * MapZoomControl - Zoom control component for the Map\n * \n * Renders zoom in/out buttons. By default positioned top-right.\n * Note: MapContainer has built-in zoom controls, use this only if you need custom positioning.\n * \n * @example\n * ```tsx\n * <Map center={[57.7089, 11.9746]} zoom={12} zoomControl={false}>\n *   <MapZoomControl position=\"bottomright\" />\n * </Map>\n * ```\n */\nfunction MapZoomControl(props: MapZoomControlProps) {\n  return <ZoomControl {...props} />\n}\n\nexport { MapMarker, MapPopup, MapTooltip, MapZoomControl }\n"]}

package/dist/styles/index.css

@@ -664,6 +664,7 @@
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
+  --color-border-subtle: color-mix(in srgb, var(--border) 40%, transparent);
   --color-input: var(--input);
   --color-ring: var(--ring);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j3m-quantum/ui",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "private": false,
   "description": "J3M UI Component Library - React components with J3M design tokens",
   "type": "module",
@@ -21,6 +21,16 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./map": {
+      "import": {
+        "types": "./dist/map.d.ts",
+        "default": "./dist/map.js"
+      },
+      "require": {
+        "types": "./dist/map.d.cts",
+        "default": "./dist/map.cjs"
+      }
+    },
     "./styles": "./dist/styles/index.css",
     "./styles/*": "./dist/styles/*"
   },
@@ -103,21 +113,11 @@
     "vaul": "^1.0.0"
   },
   "peerDependencies": {
-    "leaflet": "^1.9.4",
     "react": ">=18",
     "react-dom": ">=18",
-    "react-leaflet": "^5.0.0",
     "tailwindcss": ">=4",
     "tw-animate-css": "^1.0.0"
   },
-  "peerDependenciesMeta": {
-    "leaflet": {
-      "optional": true
-    },
-    "react-leaflet": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@types/leaflet": "^1.9.12",