{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "compare",
  "title": "Map Compare",
  "description": "Side-by-side map comparison component.",
  "dependencies": ["mapbox-gl"],
  "devDependencies": ["@types/mapbox-gl"],
  "registryDependencies": ["https://www.terrae.dev/map.json"],
  "files": [
    {
      "path": "src/registry/map/map-compare.tsx",
      "content": "\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport { Map } from \"./map\"\nimport { cn } from \"@/lib/utils\"\nimport type { MapProjection, MapCoordinates, MapCompareOrientation } from \"./types\"\n\nconst DEFAULT_CENTER: MapCoordinates = [0, 0]\nconst DEFAULT_ZOOM = 2\nconst DEFAULT_BEARING = 0\nconst DEFAULT_PITCH = 0\nconst DEFAULT_SIZE = 50\nconst DEFAULT_ORIENTATION: MapCompareOrientation = \"horizontal\"\n\nconst LABEL_BASE_STYLES = \"absolute z-10 bg-background/95 backdrop-blur-sm border rounded px-2 py-1 text-xs font-medium\"\n\ntype MapCompareProps = {\n  accessToken?: string\n  loader?: ReactNode\n  beforeStyle?: string\n  afterStyle?: string\n  center?: MapCoordinates\n  zoom?: number\n  bearing?: number\n  pitch?: number\n  projection?: MapProjection\n  defaultSize?: number\n  orientation?: MapCompareOrientation\n  showLabels?: boolean\n}\n\nexport const MapCompare = ({\n  accessToken,\n  loader,\n  beforeStyle,\n  afterStyle,\n  center = DEFAULT_CENTER,\n  zoom = DEFAULT_ZOOM,\n  bearing = DEFAULT_BEARING,\n  pitch = DEFAULT_PITCH,\n  projection,\n  defaultSize = DEFAULT_SIZE,\n  orientation = DEFAULT_ORIENTATION,\n  showLabels = false,\n}: MapCompareProps) => {\n  const isVertical = orientation === \"vertical\"\n\n  const beforeLabel = isVertical ? \"Top\" : \"Before\"\n  const afterLabel = isVertical ? \"Bottom\" : \"After\"\n\n  const beforeLabelPosition = \"top-3 left-3\"\n  const afterLabelPosition = isVertical ? \"bottom-3 right-3\" : \"top-3 right-3\"\n\n  return (\n    <div className={cn(\"relative w-full h-full\", isVertical ? \"flex flex-col\" : \"flex\")}>\n      <MapPanel\n        accessToken={accessToken}\n        center={center}\n        zoom={zoom}\n        bearing={bearing}\n        pitch={pitch}\n        projection={projection}\n        style={beforeStyle}\n        loader={loader}\n        label={beforeLabel}\n        labelPosition={beforeLabelPosition}\n        isVertical={isVertical}\n        size={defaultSize}\n        showLabel={showLabels}\n      />\n      <MapPanel\n        accessToken={accessToken}\n        center={center}\n        zoom={zoom}\n        bearing={bearing}\n        pitch={pitch}\n        projection={projection}\n        style={afterStyle}\n        loader={loader}\n        label={afterLabel}\n        labelPosition={afterLabelPosition}\n        isVertical={isVertical}\n        size={100 - defaultSize}\n        showLabel={showLabels}\n      />\n    </div>\n  )\n}\n\ntype MapPanelProps = {\n  accessToken?: string\n  center: MapCoordinates\n  zoom: number\n  bearing: number\n  pitch: number\n  isVertical: boolean\n  size: number\n  showLabel: boolean\n  label: string\n  labelPosition: string\n  projection?: MapProjection\n  style?: string\n  loader?: ReactNode\n}\n\nconst MapPanel = ({\n  accessToken,\n  center,\n  zoom,\n  bearing,\n  pitch,\n  isVertical,\n  size,\n  showLabel,\n  label,\n  labelPosition,\n  projection,\n  style,\n  loader,\n}: MapPanelProps) => {\n  return (\n    <div\n      className={cn(\"relative\", isVertical ? \"w-full\" : \"h-full\")}\n      style={isVertical ? { height: `${size}%` } : { width: `${size}%` }}\n    >\n      {showLabel && <div className={cn(LABEL_BASE_STYLES, labelPosition)}>{label}</div>}\n      <Map\n        accessToken={accessToken}\n        center={center}\n        zoom={zoom}\n        bearing={bearing}\n        pitch={pitch}\n        projection={projection}\n        style={style}\n        loader={loader}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/map/map-compare.tsx"
    }
  ],
  "type": "registry:ui"
}