{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sales-territory-map",
  "title": "Sales Territory Map",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/sales-territory-map/SalesTerritoryMap.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Map, MapMarker } from '@/components/ui/map'\n\nexport interface SalesTerritory {\n  id: string\n  name: string\n  code: string\n  arr: string\n  attainment: number\n  status: 'attained' | 'ontrack' | 'attention'\n  centerLngLat: [number, number]\n}\n\nexport const DEFAULT_TERRITORIES: SalesTerritory[] = [\n  {\n    id: 'na-enterprise',\n    name: 'North America',\n    code: 'NA-ENT',\n    arr: '$6.4M',\n    attainment: 111,\n    status: 'attained',\n    centerLngLat: [-98.5, 39.8],\n  },\n  {\n    id: 'emea-central',\n    name: 'EMEA Central',\n    code: 'EMEA-C',\n    arr: '$5.8M',\n    attainment: 124,\n    status: 'attained',\n    centerLngLat: [10.4, 51.1],\n  },\n  {\n    id: 'apac-growth',\n    name: 'APAC Growth',\n    code: 'APAC-G',\n    arr: '$4.1M',\n    attainment: 94,\n    status: 'ontrack',\n    centerLngLat: [120.0, 30.0],\n  },\n  {\n    id: 'latam-emerging',\n    name: 'Latin America',\n    code: 'LATAM-E',\n    arr: '$2.1M',\n    attainment: 83,\n    status: 'attention',\n    centerLngLat: [-55.0, -14.0],\n  },\n]\n\nexport interface SalesTerritoryMapProps extends React.HTMLAttributes<HTMLDivElement> {\n  territories?: SalesTerritory[]\n  accessToken?: string\n}\n\nfunction statusVariant(status: SalesTerritory['status']) {\n  if (status === 'attained') return 'info' as const\n  if (status === 'ontrack') return 'secondary' as const\n  return 'warning' as const\n}\n\nexport function SalesTerritoryMap({\n  className,\n  territories = DEFAULT_TERRITORIES,\n  accessToken = '',\n  ...props\n}: SalesTerritoryMapProps) {\n  const [selectedId, setSelectedId] = React.useState(territories[0]?.id ?? '')\n  const mapRef = React.useRef<any>(null)\n\n  const fitTerritories = (map: any) => {\n    const coords = territories.map((t) => t.centerLngLat)\n    if (coords.length < 2) return\n    const lons = coords.map((c) => c[0])\n    const lats = coords.map((c) => c[1])\n    try {\n      map.fitBounds(\n        [\n          [Math.min(...lons), Math.min(...lats)],\n          [Math.max(...lons), Math.max(...lats)],\n        ],\n        { padding: { top: 48, bottom: 48, left: 80, right: 80 }, duration: 0, maxZoom: 1.8 },\n      )\n    } catch {\n      /* map not ready */\n    }\n  }\n\n  const selectTerritory = (territory: SalesTerritory) => {\n    setSelectedId(territory.id)\n    mapRef.current?.flyTo?.({\n      center: territory.centerLngLat,\n      zoom: 2.8,\n      essential: true,\n      duration: 800,\n    })\n  }\n\n  return (\n    <div data-slot=\"sales-territory-map\" className={cn('flex h-full min-h-0 flex-col gap-4', className)} {...props}>\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <h2 className=\"text-foreground text-lg font-semibold tracking-tight\">Territories</h2>\n        <p className=\"text-muted-foreground text-xs\">{territories.length} regions</p>\n      </div>\n\n      <div className=\"grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-12\">\n        <Card className=\"border-border flex min-h-0 flex-col overflow-hidden shadow-xs lg:col-span-8\">\n          <div className=\"relative min-h-[360px] flex-1 overflow-hidden\">\n            <Map\n              accessToken={accessToken}\n              variant=\"dark\"\n              center={[15, 20]}\n              zoom={1.2}\n              className=\"absolute inset-0 size-full\"\n              onCreated={(map) => {\n                mapRef.current = map\n                if (typeof map.loaded === 'function' && map.loaded()) fitTerritories(map)\n                else map.once?.('load', () => fitTerritories(map))\n              }}\n            >\n              {territories.map((t) => (\n                <MapMarker key={t.id} longitude={t.centerLngLat[0]} latitude={t.centerLngLat[1]} anchor=\"center\">\n                  <button\n                    type=\"button\"\n                    className={\n                      selectedId === t.id\n                        ? 'border-primary bg-primary text-primary-foreground rounded-full border px-2 py-0.5 font-mono text-xs font-semibold shadow-xs'\n                        : 'border-border bg-card text-foreground rounded-full border px-2 py-0.5 font-mono text-xs font-semibold shadow-xs'\n                    }\n                    onClick={() => selectTerritory(t)}\n                  >\n                    {t.code} {t.attainment}%\n                  </button>\n                </MapMarker>\n              ))}\n            </Map>\n          </div>\n        </Card>\n\n        <Card className=\"border-border flex min-h-0 flex-col overflow-hidden shadow-xs lg:col-span-4\">\n          <CardHeader className=\"border-border border-b p-4\">\n            <CardTitle className=\"text-sm font-semibold\">Quota</CardTitle>\n          </CardHeader>\n          <CardContent className=\"divide-border min-h-0 flex-1 divide-y overflow-auto p-0\">\n            {territories.map((t) => (\n              <button\n                key={t.id}\n                type=\"button\"\n                className={cn(\n                  'hover:bg-accent/50 flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors',\n                  selectedId === t.id && 'bg-accent/60',\n                )}\n                onClick={() => selectTerritory(t)}\n              >\n                <div className=\"min-w-0\">\n                  <p className=\"text-foreground truncate text-sm font-medium\">\n                    {t.code} · {t.name}\n                  </p>\n                  <p className=\"text-muted-foreground font-mono text-xs tabular-nums\">{t.arr}</p>\n                </div>\n                <Badge variant={statusVariant(t.status)} className=\"shrink-0 text-xs tabular-nums\">\n                  {t.attainment}%\n                </Badge>\n              </button>\n            ))}\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n\nexport default SalesTerritoryMap\n",
      "type": "registry:block",
      "target": "~/components/blocks/SalesTerritoryMap.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/map.json"
  ],
  "description": "Sales territory map. Region pins with quota attainment; select a territory to fly the camera.",
  "categories": [
    "analytics",
    "dashboard"
  ]
}