{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "map-marker",
  "title": "Map Marker",
  "description": "A branded pin marker with a selected state and a rounded popup card for map annotations.",
  "dependencies": [
    "@untitledui/icons@^0.0.22",
    "react-map-gl@^8.1.1"
  ],
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/maps/map-marker.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { XClose } from \"@untitledui/icons\"\nimport { Marker, Popup, type MarkerProps } from \"react-map-gl/mapbox\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * map-marker — the branded Mapbox pin + popup card for nx-ui.\n *\n * Two exports:\n *   • <MapPin> — a teardrop pin drawn in Nexus navy (brand-600) with a yellow\n *     accent dot (accent-400). It has a `selected` state that lifts and rings\n *     the pin, and it wraps react-map-gl's <Marker> so it positions by\n *     longitude/latitude and forwards onClick etc.\n *   • <MapPopupCard> — a white `rounded-xl shadow-lg` card with header/body/\n *     footer slots, wrapping react-map-gl's <Popup>. Use it to annotate a pin.\n *\n * Both are the primitives the higher-level blocks (site-map, route-map…) reuse.\n */\n\nexport interface MapPinProps extends Omit<MarkerProps, \"children\"> {\n  /** Selected pins lift, enlarge slightly and gain a focus ring. */\n  selected?: boolean\n  /** Optional label bubble rendered under the pin. */\n  label?: React.ReactNode\n  /** Override the pin body content (defaults to the yellow accent dot). */\n  children?: React.ReactNode\n  className?: string\n}\n\n/** The teardrop pin glyph itself (no positioning) — reusable inside clusters. */\nexport function MapPinGlyph({\n  selected = false,\n  children,\n  className,\n}: {\n  selected?: boolean\n  children?: React.ReactNode\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        \"relative flex flex-col items-center transition-transform\",\n        selected ? \"-translate-y-1 scale-110\" : \"hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {/* Pin head: navy circle with a white ring and a yellow accent dot. */}\n      <div\n        className={cn(\n          \"flex size-7 items-center justify-center rounded-full border-2 border-white bg-brand-600 shadow-lg\",\n          selected && \"ring-4 ring-accent-400/50\"\n        )}\n      >\n        {children ?? <span className=\"size-2.5 rounded-full bg-accent-400\" />}\n      </div>\n      {/* Teardrop tail. */}\n      <div className=\"-mt-1 size-2.5 rotate-45 rounded-[1px] border-r-2 border-b-2 border-white bg-brand-600\" />\n    </div>\n  )\n}\n\n/** A positioned, branded pin marker. */\nexport function MapPin({\n  selected = false,\n  label,\n  children,\n  className,\n  anchor = \"bottom\",\n  ...markerProps\n}: MapPinProps) {\n  return (\n    <Marker anchor={anchor} {...markerProps}>\n      {/* Pins are click targets (popups, selection) — always show the pointer. */}\n      <div className={cn(\"flex cursor-pointer flex-col items-center\", className)}>\n        <MapPinGlyph selected={selected}>{children}</MapPinGlyph>\n        {label ? (\n          <div className=\"mt-1 max-w-[160px] truncate rounded-md bg-background/90 px-1.5 py-0.5 text-[11px] font-semibold text-foreground shadow-sm backdrop-blur-sm\">\n            {label}\n          </div>\n        ) : null}\n      </div>\n    </Marker>\n  )\n}\n\nexport interface MapPopupCardProps {\n  longitude: number\n  latitude: number\n  onClose?: () => void\n  /** Header title (bold). */\n  title?: React.ReactNode\n  /** Optional subtitle under the title. */\n  subtitle?: React.ReactNode\n  /** Optional footer slot (e.g. actions or metadata). */\n  footer?: React.ReactNode\n  /** Body content. */\n  children?: React.ReactNode\n  className?: string\n  /** Popup offset from the anchor point (px). Default 28 to clear a pin. */\n  offset?: number\n}\n\n/** White rounded popup card with slots — wraps react-map-gl <Popup>. */\nexport function MapPopupCard({\n  longitude,\n  latitude,\n  onClose,\n  title,\n  subtitle,\n  footer,\n  children,\n  className,\n  offset = 28,\n}: MapPopupCardProps) {\n  return (\n    <Popup\n      longitude={longitude}\n      latitude={latitude}\n      anchor=\"bottom\"\n      offset={offset}\n      closeButton={false}\n      closeOnClick={false}\n      onClose={onClose}\n      maxWidth=\"none\"\n      // Neutralise Mapbox's default popup chrome so our card shows through.\n      className={cn(\n        \"![&_.mapboxgl-popup-content]:m-0 [&_.mapboxgl-popup-content]:!bg-transparent [&_.mapboxgl-popup-content]:!p-0 [&_.mapboxgl-popup-content]:!shadow-none [&_.mapboxgl-popup-tip]:!border-t-background\",\n        className\n      )}\n    >\n      <div className=\"w-64 overflow-hidden rounded-xl border border-border bg-background shadow-lg\">\n        {(title || onClose) && (\n          <div className=\"flex items-start justify-between gap-2 px-4 pt-3.5\">\n            <div className=\"min-w-0\">\n              {title ? (\n                <p className=\"truncate text-sm font-semibold text-foreground\">\n                  {title}\n                </p>\n              ) : null}\n              {subtitle ? (\n                <p className=\"mt-0.5 truncate text-xs text-muted-foreground\">\n                  {subtitle}\n                </p>\n              ) : null}\n            </div>\n            {onClose ? (\n              <button\n                type=\"button\"\n                aria-label=\"Close\"\n                onClick={onClose}\n                className=\"-mr-1 -mt-0.5 rounded-md p-1 text-fg-quaternary transition hover:bg-muted hover:text-foreground\"\n              >\n                <XClose className=\"size-4\" />\n              </button>\n            ) : null}\n          </div>\n        )}\n        {children ? (\n          <div className=\"px-4 py-3 text-sm text-secondary-foreground\">\n            {children}\n          </div>\n        ) : null}\n        {footer ? (\n          <div className=\"border-t border-border bg-muted/40 px-4 py-2.5 text-xs text-muted-foreground\">\n            {footer}\n          </div>\n        ) : null}\n      </div>\n    </Popup>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/maps/map-marker.tsx"
    }
  ],
  "type": "registry:block"
}