import { ContextMenu } from '@base-ui/react/context-menu';

<ContextMenu.Root>
  <ContextMenu.Trigger>
    <div>Right-click me</div>
  </ContextMenu.Trigger>
  <ContextMenu.Portal>
    <ContextMenu.Positioner>
      <ContextMenu.Popup>
        <ContextMenu.Item onSelect={() => console.log('Copy')}
          Copy
        </ContextMenu.Item>
        <ContextMenu.Item onSelect={() => console.log('Paste')}
          Paste
        </ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item onSelect={() => console.log('Delete')}
          Delete
        </ContextMenu.Item>
      </ContextMenu.Popup>
    </ContextMenu.Positioner>
  </ContextMenu.Portal>
</ContextMenu.Root>

.ContextMenuPopup {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  animation: scaleIn 100ms ease-out;
}

.ContextMenuItem {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  outline: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ContextMenuItem:hover {
  background: #f5f5f5;
}

.ContextMenuItem[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ContextMenuSeparator {
  height: 1px;
  background: #e0e0e0;
  margin: 4px 0;
}

.ContextMenuGroupLabel {
  padding: 8px 12px 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}