{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popup",
  "title": "Map Popup",
  "description": "Info popups and tooltips for map locations.",
  "dependencies": ["mapbox-gl"],
  "devDependencies": ["@types/mapbox-gl"],
  "registryDependencies": ["https://www.terrae.dev/map.json"],
  "files": [
    {
      "path": "src/registry/map/popup.tsx",
      "content": "\"use client\"\n\nimport type mapboxgl from \"mapbox-gl\"\nimport type { PopupOptions } from \"mapbox-gl\"\nimport { mapgl } from \"./map-library\"\nimport { useEffect, useMemo, useRef, type ReactNode } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { X } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { useMap } from \"./hooks\"\nimport type { MapCoordinates } from \"./types\"\n\ntype MapPopupProps = {\n  /** Coordinates [longitude, latitude] for popup position */\n  coordinates: MapCoordinates\n  /** Callback when popup is closed */\n  onClose?: () => void\n  /** Popup content */\n  children: ReactNode\n  /** Additional CSS classes for the popup container */\n  className?: string\n  /** Show a close button in the popup (default: false) */\n  closeButton?: boolean\n} & Omit<PopupOptions, \"className\" | \"closeButton\">\n\nexport function MapPopup({\n  coordinates,\n  onClose,\n  children,\n  className,\n  closeButton = false,\n  ...popupOptions\n}: MapPopupProps) {\n  const { map } = useMap()\n  const popupRef = useRef<mapboxgl.Popup | null>(null)\n\n  const container = useMemo(() => document.createElement(\"div\"), [])\n\n  useEffect(() => {\n    if (!map || !map.isStyleLoaded()) return\n\n    const popup = new mapgl.Popup({\n      offset: 16,\n      ...popupOptions,\n      closeButton: false,\n      className: \"custom-map-popup\",\n    })\n      .setMaxWidth(\"none\")\n      .setDOMContent(container)\n      .setLngLat(coordinates)\n      .addTo(map)\n\n    const onCloseProp = () => onClose?.()\n\n    popup.on(\"close\", onCloseProp)\n\n    popupRef.current = popup\n\n    return () => {\n      popup.off(\"close\", onCloseProp)\n      popup.remove()\n      popupRef.current = null\n    }\n  }, [map, coordinates, popupOptions, onClose, container])\n\n  return createPortal(\n    <div\n      className={cn(\n        \"relative rounded-md border bg-popover p-3 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95\",\n        className\n      )}\n    >\n      {closeButton && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            popupRef.current?.remove()\n            onClose?.()\n          }}\n          className=\"absolute top-1 right-1 z-10 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n          aria-label=\"Close popup\"\n        >\n          <X className=\"h-4 w-4\" />\n          <span className=\"sr-only\">Close</span>\n        </button>\n      )}\n      {children}\n    </div>,\n    container\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/map/popup.tsx"
    }
  ],
  "type": "registry:ui"
}