@j3m-quantum/ui 1.8.0 → 1.9.1

package/README.md

@@ -8,6 +8,13 @@ J3M Quantum UI - A React component library with J3M design tokens.
 - **Tailwind CSS v4** (required - not compatible with v3)
 - **tw-animate-css** >= 1.0.0
 
+### Optional Peer Dependencies
+
+| Package | Version | Required For |
+|---------|---------|--------------|
+| `leaflet` | ^1.9.4 | Map components |
+| `react-leaflet` | ^5.0.0 | Map components |
+
 ## Features
 
 - **J3M Design Tokens** - Orange primary, neutral grays, pill-shaped buttons
@@ -272,6 +279,9 @@ Dialog, Drawer, Sheet, Popover, HoverCard
 ### Layout
 ScrollArea, Collapsible, Resizable, Sidebar, SidebarProvider, SidebarInset, Section
 
+### Map
+Map, MapTileLayer, MapMarker, MapPopup, MapTooltip, MapZoomControl
+
 ### Utilities
 ThemeSwitch, ToolbarCanvas, PlayerCanvas
 
@@ -381,6 +391,96 @@ const navItems: NavItem[] = [
 <NavMain items={navItems} />
 ```
 
+## Map Components
+
+Leaflet-based map components for displaying interactive maps. **Requires optional peer dependencies.**
+
+### Installation
+
+```bash
+npm install leaflet react-leaflet
+```
+
+### Setup
+
+Import Leaflet CSS in your app's entry CSS file:
+
+```css
+/* src/index.css */
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@j3m-quantum/ui/styles";
+@import "leaflet/dist/leaflet.css";
+```
+
+### Basic Usage
+
+```tsx
+import { Map, MapTileLayer, MapMarker, MapPopup } from '@j3m-quantum/ui'
+
+function MyMap() {
+  return (
+    <Map center={[57.7089, 11.9746]} zoom={12} className="h-[400px]">
+      <MapTileLayer />
+      <MapMarker position={[57.7089, 11.9746]}>
+        <MapPopup>Hello from Gothenburg!</MapPopup>
+      </MapMarker>
+    </Map>
+  )
+}
+```
+
+### Tile Layer Variants
+
+```tsx
+// Default (OpenStreetMap)
+<MapTileLayer variant="default" />
+
+// Dark mode tiles
+<MapTileLayer variant="dark" />
+
+// Satellite imagery
+<MapTileLayer variant="satellite" />
+```
+
+### Map Components Reference
+
+| Component | Description |
+|-----------|-------------|
+| `Map` | Main map container. Requires explicit height via `className` or `style`. |
+| `MapTileLayer` | Tile layer for map background. Supports `default`, `dark`, `satellite` variants. |
+| `MapMarker` | Marker at a specific position. Can contain Popup and Tooltip children. |
+| `MapPopup` | Popup that appears when a marker is clicked. |
+| `MapTooltip` | Tooltip that appears on marker hover. |
+| `MapZoomControl` | Custom zoom control positioning (MapContainer has built-in controls). |
+
+### Fixing Marker Icons
+
+Bundlers may break Leaflet's default marker icon paths. Fix by configuring icons in your app:
+
+```tsx
+import L from "leaflet"
+
+delete (L.Icon.Default.prototype as any)._getIconUrl
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+})
+```
+
+### React StrictMode
+
+When using React StrictMode, use unique keys on Map components to prevent "already initialized" errors:
+
+```tsx
+const [mapKey] = useState(() => `map-${Date.now()}`)
+
+<Map key={mapKey} center={[57.7089, 11.9746]} zoom={12}>
+  ...
+</Map>
+```
+
 ## Customization
 
 Override CSS variables after the import:

package/dist/index.cjs

@@ -40,6 +40,7 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var ResizablePrimitive = require('react-resizable-panels');
+var reactLeaflet = require('react-leaflet');
 var reactTable = require('@tanstack/react-table');
 var dateFns = require('date-fns');
 
@@ -5888,6 +5889,89 @@ var SectionFooter = React27__namespace.forwardRef(
   )
 );
 SectionFooter.displayName = "SectionFooter";
+function Map2({
+  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 });
+}
 function DataTableColumnHeader({
   column,
   title,
@@ -13797,6 +13881,12 @@ exports.ItemTitle = ItemTitle;
 exports.Kbd = Kbd;
 exports.KbdGroup = KbdGroup;
 exports.Label = Label2;
+exports.Map = Map2;
+exports.MapMarker = MapMarker;
+exports.MapPopup = MapPopup;
+exports.MapTileLayer = MapTileLayer;
+exports.MapTooltip = MapTooltip;
+exports.MapZoomControl = MapZoomControl;
 exports.Menubar = Menubar;
 exports.MenubarCheckboxItem = MenubarCheckboxItem;
 exports.MenubarContent = MenubarContent;