{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-menu",
  "type": "registry:ui",
  "title": "Context menu",
  "description": "Right click context menu that opens at the cursor with menu items, including destructive items in red. Closes on selection or click outside, in React.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/context-menu.tsx",
      "type": "registry:ui",
      "target": "components/ui/context-menu.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nfunction ContextMenu({\n  children,\n  items,\n  className,\n}: {\n  children: React.ReactNode\n  items: { id: string; label: string; destructive?: boolean; onSelect?: () => void }[]\n  className?: string\n}) {\n  const [pos, setPos] = React.useState<{ x: number; y: number } | null>(null)\n  return (\n    <div\n      data-slot=\"context-menu\"\n      className={cn(\"relative\", className)}\n      onContextMenu={(e) => {\n        e.preventDefault()\n        setPos({ x: e.clientX, y: e.clientY })\n      }}\n      onClick={() => setPos(null)}\n    >\n      {children}\n      {pos ? (\n        <div\n          role=\"menu\"\n          className=\"fixed z-50 min-w-44 rounded-xl border border-border bg-raised p-1 shadow-lg\"\n          style={{ left: pos.x, top: pos.y }}\n        >\n          {items.map((item) => (\n            <button\n              key={item.id}\n              type=\"button\"\n              role=\"menuitem\"\n              className={cn(\n                \"flex w-full rounded-lg px-2.5 py-1.5 text-left text-sm hover:bg-sunken\",\n                item.destructive && \"text-danger\"\n              )}\n              onClick={() => {\n                item.onSelect?.()\n                setPos(null)\n              }}\n            >\n              {item.label}\n            </button>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  )\n}\nexport { ContextMenu }\n"
    }
  ]
}